chore: add static files for gradio ui style

gradio_chatbot.py

@@ -5,6 +5,7 @@ import asyncio
 from typing import List, Tuple, Dict, Optional
 from dataclasses import dataclass
 from enum import Enum
+import os
 
 # Environment configuration
 env = environs.Env()
@@ -15,6 +16,49 @@ BASE_URL = env.str("BASE_URL", "http://localhost:7860")
 API_KEY = env.str("API_KEY", "sk-test-xxx")
 CHAT_API_ENDPOINT = f"{BASE_URL}/v1/chat/completions"
 
+# Get absolute paths for static files
+STATIC_DIR = os.path.join(os.path.dirname(os.path.abspath(__file__)), "static")
+AVATAR_DIR = os.path.join(STATIC_DIR, "avatars")
+
+# Avatar paths
+USER_AVATAR = os.path.join(AVATAR_DIR, "user.png")
+BOT_AVATAR = os.path.join(AVATAR_DIR, "bot.png")
+
+# Custom CSS for fonts
+CUSTOM_CSS = """
+@font-face {
+    font-family: 'UI Sans Serif';
+    src: url('/static/fonts/ui-sans-serif/ui-sans-serif-Regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'UI Sans Serif';
+    src: url('/static/fonts/ui-sans-serif/ui-sans-serif-Bold.woff2') format('woff2');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'System UI';
+    src: url('/static/fonts/system-ui/system-ui-Regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'System UI';
+    src: url('/static/fonts/system-ui/system-ui-Bold.woff2') format('woff2');
+    font-weight: bold;
+    font-style: normal;
+}
+
+.gradio-container {
+    font-family: 'UI Sans Serif', 'System UI', sans-serif;
+}
+"""
+
 class MessageStatus(Enum):
     """Enum for message status"""
     SUCCESS = "Success"
@@ -107,7 +151,7 @@ class ChatInterface:
         Returns:
             gr.Blocks: The Gradio interface
         """
-        with gr.Blocks(theme=gr.themes.Soft()) as demo:
+        with gr.Blocks(theme=gr.themes.Soft(), css=CUSTOM_CSS) as demo:
             # Header
             gr.Markdown(f"""
             # 🤖 Data Chatbot
@@ -126,7 +170,7 @@ class ChatInterface:
                         label="Chat History",
                         height=400,
                         show_copy_button=True,
-                        avatar_images=("👤", "🤖")
+                        avatar_images=(USER_AVATAR, BOT_AVATAR)
                     )
                     
                     # Message input area

main.py

@@ -1,6 +1,7 @@
 from fastapi import FastAPI
-from fastapi.responses import RedirectResponse
+from fastapi.responses import RedirectResponse, JSONResponse
 from fastapi.staticfiles import StaticFiles
+from fastapi.middleware.cors import CORSMiddleware
 from app.api import chat_api
 from app.config.log import log_config
 from loguru import logger
@@ -89,16 +90,51 @@ app.openapi_components = {
     }
 }
 
+# Configure CORS
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
 app.mount("/static", StaticFiles(directory="static"), name="static")
 app.mount("/.well-known", StaticFiles(directory=".well-known"), name="well-known")
 app.include_router(chat_api.router)
 
-# gradio mount in fastapi app
+# Build and mount Gradio app
 demo = build_gradio_app()
 app = gr.mount_gradio_app(app, demo, path="/ui")
 
 @app.get("/")
 async def root():
-    return RedirectResponse(url="http://localhost:7860/ui")
+    """Redirect root to Gradio UI"""
+    return RedirectResponse(url="/ui")
+
+@app.get("/manifest.json")
+async def get_manifest():
+    """Return the web app manifest"""
+    return JSONResponse({
+        "name": "Data Chatbot",
+        "short_name": "Chatbot",
+        "description": "A chatbot interface for data visualization and analysis",
+        "start_url": "/ui",
+        "display": "standalone",
+        "background_color": "#ffffff",
+        "theme_color": "#4f46e5",
+        "icons": [
+            {
+                "src": "/static/icons/icon-192x192.png",
+                "sizes": "192x192",
+                "type": "image/png"
+            },
+            {
+                "src": "/static/icons/icon-512x512.png",
+                "sizes": "512x512",
+                "type": "image/png"
+            }
+        ]
+    })
 
 # uv run uvicorn main:app --host 0.0.0.0 --port 7860 --reload

static/fonts/system-ui/system-ui-Bold.woff2

@@ -0,0 +1 @@
+404: Not Found

static/fonts/system-ui/system-ui-Regular.woff2

@@ -0,0 +1 @@
+404: Not Found

static/fonts/ui-sans-serif/ui-sans-serif-Bold.woff2

@@ -0,0 +1 @@
+404: Not Found

static/fonts/ui-sans-serif/ui-sans-serif-Regular.woff2

@@ -0,0 +1 @@
+404: Not Found

static/manifest.json

@@ -0,0 +1,21 @@
+{
+    "name": "Data Chatbot",
+    "short_name": "Chatbot",
+    "description": "A chatbot interface for data visualization and analysis",
+    "start_url": "/ui",
+    "display": "standalone",
+    "background_color": "#ffffff",
+    "theme_color": "#4f46e5",
+    "icons": [
+        {
+            "src": "/static/icons/icon-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/static/icons/icon-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
+}