first working demo

app.py

@@ -0,0 +1,115 @@
+import sqlite3
+import time
+from pathlib import Path
+from sqlite3.dbapi2 import Connection
+
+import gradio as gr
+import uvicorn
+from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
+from PIL import Image, ImageDraw, ImageFont
+
+
+# Function to fill the template, save to SQLite, and convert to image
+def write_text_to_image(
+    name: str,
+    distance: float,
+    conn: Connection,
+    name_x: int = 410,
+    name_y: int = 410,
+    distance_x: int = 435,
+    distance_y: int = 450,
+) -> str:
+    # Save the input data to the SQLite database
+    cursor = conn.cursor()
+    cursor.execute(
+        "INSERT INTO user_inputs (name, distance) VALUES (?, ?)",
+        (name, distance),
+    )
+    conn.commit()
+
+    # Open the background image
+    background_image_path = f"{static_dir}/phocao_run_2024.jpg"
+    image = Image.open(background_image_path)
+    draw = ImageDraw.Draw(image)
+
+    # Set the font (adjust the font size and style)
+    font = ImageFont.truetype("font/RobotoSlab-Bold.ttf", 23)
+
+    # Define text colors
+    text_color = (0, 255, 0)  # Green
+
+    # Write the name on the image at the specified coordinates
+    draw.text((name_x, name_y), name, font=font, fill=text_color)
+
+    # Write the distance on the image at the specified coordinates
+    draw.text((distance_x, distance_y), f"{distance} km", font=font, fill=text_color)
+
+    # Save the image with the text
+    timestamp = int(time.perf_counter_ns())
+    output_image_path = f"{static_dir}/{timestamp}.jpg"
+    image.save(output_image_path)
+
+    # Return the path to the generated image
+    return output_image_path
+
+
+# Serve the app
+if __name__ == "__main__":
+    # Create a FastAPI app
+    app = FastAPI()
+
+    # Create a static directory to store the static files
+    static_dir = Path("./static")
+    static_dir.mkdir(parents=True, exist_ok=True)
+
+    # Mount FastAPI StaticFiles server
+    app.mount("/static", StaticFiles(directory=static_dir), name="static")
+
+    # Connect to SQLite database
+    conn = sqlite3.connect("user_input.db", check_same_thread=False)
+    cursor = conn.cursor()
+
+    # Create a table if it doesn't already exist
+    cursor.execute(
+        """
+    CREATE TABLE IF NOT EXISTS user_inputs (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        name TEXT,
+        distance FLOAT
+    )
+    """
+    )
+    conn.commit()
+
+    # Gradio Blocks interface
+    with gr.Blocks(title="PhoCao Run 2024 - Chứng Nhận Hoàn Thành", css="footer {visibility: hidden}") as demo:
+        gr.Markdown("## PhoCao Run 2024 - Chứng Nhận Hoàn Thành")
+        name_input = gr.Textbox(label="Tên/Nickname")
+        distance_input = gr.Number(label="Số km")
+
+        submit_button = gr.Button("Chạm Đích")
+
+        output_image = gr.Image(label="Kết quả")
+
+        # Event handler for the button click
+        def on_submit(name, distance):
+            image_path = write_text_to_image(name, distance, conn)
+            submit_button = gr.Button(visible=False)
+            return submit_button, image_path
+
+        submit_button.click(
+            on_submit,
+            inputs=[name_input, distance_input],
+            outputs=[submit_button, output_image],
+            scroll_to_output=True,
+            api_name=None,
+            max_batch_size=1,
+            show_api=False,
+        )
+
+    # Mount Gradio app to FastAPI app
+    demo.show_api = False
+    app = gr.mount_gradio_app(app, demo, path="/")
+
+    uvicorn.run(app, host="0.0.0.0", port=7860)

font/GoogleFont_README.txt

@@ -0,0 +1,71 @@
+Roboto Slab Variable Font
+=========================
+
+This download contains Roboto Slab as both a variable font and static fonts.
+
+Roboto Slab is a variable font with this axis:
+  wght
+
+This means all the styles are contained in a single file:
+  RobotoSlab-VariableFont_wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Roboto Slab:
+  static/RobotoSlab-Thin.ttf
+  static/RobotoSlab-ExtraLight.ttf
+  static/RobotoSlab-Light.ttf
+  static/RobotoSlab-Regular.ttf
+  static/RobotoSlab-Medium.ttf
+  static/RobotoSlab-SemiBold.ttf
+  static/RobotoSlab-Bold.ttf
+  static/RobotoSlab-ExtraBold.ttf
+  static/RobotoSlab-Black.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (LICENSE.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.

note.txt

@@ -0,0 +1,6 @@
+- App generated from chatgpt.com
+- https://www.gradio.app/guides/quickstart
+
+Publish
+- https://www.gradio.app/guides/sharing-your-app#hosting-on-hf-spaces
+- https://huggingface.co/docs/hub/en/spaces-dependencies

static/styles.css

@@ -0,0 +1,17 @@
+/* styles.css */
+.container {
+    position: relative;
+    text-align: center;
+}
+
+.background-image {
+    width: 100%;
+    height: auto;
+}
+
+.text {
+    position: absolute;
+    color: orange;
+    font-weight: bold;
+    font-size: 24px; /* Adjust as needed */
+}

template.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/static/styles.css" />
+    <title>Template with Background Image</title>
+  </head>
+  <body>
+    <div class="container">
+      <img
+        src="/static/phocao_run_2024.jpg"
+        alt="background"
+        class="background-image"
+      />
+      <div class="text" style="left: {{ name_x }}px; top: {{ name_y }}px;">
+        <h2>{{ name }}</h2>
+      </div>
+      <div class="text" style="left: {{ age_x }}px; top: {{ age_y }}px;">
+        <h2>{{ age }} years old</h2>
+      </div>
+    </div>
+  </body>
+</html>