chore: gradio interface enhancement

gradio_chatbot.py

@@ -2,138 +2,215 @@ import gradio as gr
 import environs
 import httpx
 import asyncio
-from typing import List, Tuple
+from typing import List, Tuple, Dict, Optional
+from dataclasses import dataclass
+from enum import Enum
 
+# Environment configuration
 env = environs.Env()
 env.read_env()
 
+# API Configuration
 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"
 
-async def call_chat_api(prompt: str) -> Tuple[str, str]:
-    print(f"Calling chat API with prompt: {prompt}")
-    try:
-        async with httpx.AsyncClient() as client:
-            response = await client.post(
-                CHAT_API_ENDPOINT,
-                headers={"Authorization": f"Bearer {API_KEY}"},
-                json={
-                    "messages": [{"role": "user", "content": prompt}],
-                    "model": "gpt-3.5-turbo",
-                    "completion_id": "new_chat",
-                    "stream": True
-                }
-            )
-            
-            if response.status_code != 200:
-                print(f"Error response: {response.text}")
-                return "Error", f"API Error: {response.text}"
-            
-            result = response.json()
-            print(f"API response: {result}")
-            
-            if "choices" in result and len(result["choices"]) > 0:
-                message = result["choices"][0].get("message", {})
-                content = message.get("content", "Content not found")
-                print(f"Last message: {content}")
-                return "Success", content
-            else:
-                return "Error", "Invalid API response"
-                
-    except Exception as e:
-        print(f"Error: {str(e)}")
-        return "Error", f"Error: {str(e)}"
+class MessageStatus(Enum):
+    """Enum for message status"""
+    SUCCESS = "Success"
+    ERROR = "Error"
 
-def build_gradio_app():
-    with gr.Blocks(theme=gr.themes.Soft()) as demo:
-        gr.Markdown("""
-        # 🤖 Data Chatbot
-        
-        This chatbot allows you to chat with your data and visualize it.
-        Please enter your question in the text box below and click the "Send" button.
-        """)
+@dataclass
+class MessageResponse:
+    """Data class for message response"""
+    status: MessageStatus
+    content: str
+    error: Optional[str] = None
+
+class ChatAPI:
+    """Class to handle chat API interactions"""
+    
+    def __init__(self, base_url: str, api_key: str):
+        self.base_url = base_url
+        self.api_key = api_key
+        self.endpoint = f"{base_url}/v1/chat/completions"
+    
+    async def send_message(self, prompt: str) -> MessageResponse:
+        """
+        Send a message to the chat API
         
-        with gr.Row():
-            with gr.Column(scale=4):
-                chatbot = gr.Chatbot(
-                    label="Chat History",
-                    height=400,
-                    show_copy_button=True,
-                    avatar_images=("👤", "🤖")
+        Args:
+            prompt (str): The message to send
+            
+        Returns:
+            MessageResponse: The response from the API
+        """
+        print(f"Calling chat API with prompt: {prompt}")
+        try:
+            async with httpx.AsyncClient() as client:
+                response = await client.post(
+                    self.endpoint,
+                    headers={"Authorization": f"Bearer {self.api_key}"},
+                    json={
+                        "messages": [{"role": "user", "content": prompt}],
+                        "model": "gpt-3.5-turbo",
+                        "completion_id": "new_chat",
+                        "stream": True
+                    }
                 )
                 
-                with gr.Row():
-                    msg = gr.Textbox(
-                        label="Your Message",
-                        placeholder="Enter your question here...",
-                        lines=3,
-                        scale=4
+                if response.status_code != 200:
+                    print(f"Error response: {response.text}")
+                    return MessageResponse(
+                        status=MessageStatus.ERROR,
+                        content="",
+                        error=f"API Error: {response.text}"
                     )
-                    submit_btn = gr.Button("Send", variant="primary", scale=1)
                 
-                with gr.Row():
-                    clear_btn = gr.Button("Clear Chat", variant="secondary")
-                    retry_btn = gr.Button("Retry", variant="secondary")
+                result = response.json()
+                print(f"API response: {result}")
                 
-                status = gr.Textbox(label="Status", interactive=False)
-                last_message = gr.Textbox(label="Last Message", interactive=False)
+                if "choices" in result and len(result["choices"]) > 0:
+                    message = result["choices"][0].get("message", {})
+                    content = message.get("content", "Content not found")
+                    print(f"Last message: {content}")
+                    return MessageResponse(
+                        status=MessageStatus.SUCCESS,
+                        content=content
+                    )
+                else:
+                    return MessageResponse(
+                        status=MessageStatus.ERROR,
+                        content="",
+                        error="Invalid API response"
+                    )
+                    
+        except Exception as e:
+            print(f"Error: {str(e)}")
+            return MessageResponse(
+                status=MessageStatus.ERROR,
+                content="",
+                error=f"Error: {str(e)}"
+            )
+
+class ChatInterface:
+    """Class to handle the Gradio chat interface"""
+    
+    def __init__(self, chat_api: ChatAPI):
+        self.chat_api = chat_api
+        self.demo = self._build_interface()
+    
+    def _build_interface(self) -> gr.Blocks:
+        """
+        Build the Gradio interface
         
-        async def user_message(message: str, history: List[List[str]]) -> Tuple[List[List[str]], str, str, str]:
-            if not message.strip():
-                return history, "", "Please enter a message.", ""
+        Returns:
+            gr.Blocks: The Gradio interface
+        """
+        with gr.Blocks(theme=gr.themes.Soft()) as demo:
+            # Header
+            gr.Markdown(f"""
+            # 🤖 Data Chatbot
             
-            history.append([message, ""])
-            status_text, response = await call_chat_api(message)
+            This chatbot allows you to chat with your data and visualize it.
+            Please enter your question in the text box below and click the "Send" button.
             
-            if status_text == "Success":
-                history[-1][1] = response
-                return history, "", "Message sent successfully.", response
-            else:
-                history[-1][1] = f"❌ {response}"
-                return history, "", f"Error: {response}", ""
-        
-        def clear_history() -> Tuple[List[List[str]], str, str, str]:
-            return [], "", "Chat cleared.", ""
-        
-        def retry_last_message(history: List[List[str]]) -> Tuple[List[List[str]], str, str, str]:
-            if not history:
-                return history, "", "No message to retry.", ""
+            > 📚 API Documentation: [{self.chat_api.base_url}/docs]({self.chat_api.base_url}/docs)
+            """)
             
-            last_message = history[-1][0]
-            return history[:-1], last_message, "Last message will be retried.", ""
-        
-        submit_btn.click(
-            fn=user_message,
-            inputs=[msg, chatbot],
-            outputs=[chatbot, msg, status, last_message]
-        )
-        
-        msg.submit(
-            fn=user_message,
-            inputs=[msg, chatbot],
-            outputs=[chatbot, msg, status, last_message]
-        )
-        
-        clear_btn.click(
-            fn=clear_history,
-            inputs=[],
-            outputs=[chatbot, msg, status, last_message]
-        )
+            # Main chat interface
+            with gr.Row():
+                with gr.Column(scale=4):
+                    # Chat history display
+                    chatbot = gr.Chatbot(
+                        label="Chat History",
+                        height=400,
+                        show_copy_button=True,
+                        avatar_images=("👤", "🤖")
+                    )
+                    
+                    # Message input area
+                    with gr.Row():
+                        msg = gr.Textbox(
+                            label="Your Message",
+                            placeholder="Enter your question here...",
+                            lines=3,
+                            scale=4
+                        )
+                        submit_btn = gr.Button("Send", variant="primary", scale=1)
+                    
+                    # Control buttons
+                    with gr.Row():
+                        clear_btn = gr.Button("Clear Chat", variant="secondary")
+                        retry_btn = gr.Button("Retry", variant="secondary")
+                    
+                    # Status and last message display
+                    status = gr.Textbox(label="Status", interactive=False)
+                    last_message = gr.Textbox(label="Last Message", interactive=False)
+            
+            # Event handlers
+            async def user_message(message: str, history: List[List[str]]) -> Tuple[List[List[str]], str, str, str]:
+                """Handle user message submission"""
+                if not message.strip():
+                    return history, "", "Please enter a message.", ""
+                
+                history.append([message, ""])
+                response = await self.chat_api.send_message(message)
+                
+                if response.status == MessageStatus.SUCCESS:
+                    history[-1][1] = response.content
+                    return history, "", "Message sent successfully.", response.content
+                else:
+                    history[-1][1] = f"❌ {response.error}"
+                    return history, "", f"Error: {response.error}", ""
+            
+            def clear_history() -> Tuple[List[List[str]], str, str, str]:
+                """Clear chat history"""
+                return [], "", "Chat cleared.", ""
+            
+            def retry_last_message(history: List[List[str]]) -> Tuple[List[List[str]], str, str, str]:
+                """Retry the last message"""
+                if not history:
+                    return history, "", "No message to retry.", ""
+                
+                last_message = history[-1][0]
+                return history[:-1], last_message, "Last message will be retried.", ""
+            
+            # Connect event handlers to UI elements
+            submit_btn.click(
+                fn=user_message,
+                inputs=[msg, chatbot],
+                outputs=[chatbot, msg, status, last_message]
+            )
+            
+            msg.submit(
+                fn=user_message,
+                inputs=[msg, chatbot],
+                outputs=[chatbot, msg, status, last_message]
+            )
+            
+            clear_btn.click(
+                fn=clear_history,
+                inputs=[],
+                outputs=[chatbot, msg, status, last_message]
+            )
+            
+            retry_btn.click(
+                fn=retry_last_message,
+                inputs=[chatbot],
+                outputs=[chatbot, msg, status, last_message]
+            )
         
-        retry_btn.click(
-            fn=retry_last_message,
-            inputs=[chatbot],
-            outputs=[chatbot, msg, status, last_message]
-        )
+        return demo
 
-    return demo
+def build_gradio_app() -> gr.Blocks:
+    """
+    Build and return the Gradio application
+    
+    Returns:
+        gr.Blocks: The Gradio interface
+    """
+    chat_api = ChatAPI(BASE_URL, API_KEY)
+    chat_interface = ChatInterface(chat_api)
+    return chat_interface.demo
 
-if __name__ == "__main__":
-    demo = build_gradio_app()
-    demo.launch(
-        server_name="0.0.0.0",
-        server_port=7861,
-        share=False,
-        show_error=True
-    )

main.py

@@ -7,6 +7,8 @@ from loguru import logger
 from environs import Env
 from contextlib import asynccontextmanager
 from app.db.client import mongodb
+from gradio_chatbot import build_gradio_app
+import gradio as gr
 
 print(log_config.get_log_level())
 
@@ -91,8 +93,12 @@ 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
+demo = build_gradio_app()
+app = gr.mount_gradio_app(app, demo, path="/ui")
+
 @app.get("/")
 async def root():
-    return RedirectResponse(url="http://localhost:7861")
+    return RedirectResponse(url="http://localhost:7860/ui")
 
 # uv run uvicorn main:app --host 0.0.0.0 --port 7860 --reload

run.sh

@@ -1,34 +1,18 @@
 #!/bin/bash
 
-# Önce eski uygulamaları durdur
-echo "Stopping existing applications..."
+# Önce eski uygulamayı durdur
+echo "Stopping existing application..."
 pkill -f "uvicorn main:app"
-pkill -f "python gradio_chatbot.py"
 
 # 2 saniye bekle
 sleep 2
 
-# FastAPI uygulamasını arka planda başlat
-echo "Starting FastAPI application..."
-uv run uvicorn main:app --host 0.0.0.0 --port 7860 --reload &
-FASTAPI_PID=$!
-
-# 5 saniye bekle (FastAPI'nin başlaması için)
-sleep 5
-
-# Gradio uygulamasını başlat
-echo "Starting Gradio application..."
-uv run python gradio_chatbot.py &
-GRADIO_PID=$!
-
-# Uygulamaların çalışmasını bekle
-echo "Applications are running..."
-echo "FastAPI: http://localhost:7860"
-echo "Gradio: http://localhost:7861"
-echo "Press Ctrl+C to stop all applications"
+# FastAPI uygulamasını başlat (Gradio entegre edilmiş)
+echo "Starting application..."
+uv run uvicorn main:app --host 0.0.0.0 --port 7860 --reload
 
 # Ctrl+C ile durdurma işlemini yakala
-trap "echo 'Stopping applications...'; kill $FASTAPI_PID $GRADIO_PID; exit" INT
+trap "echo 'Stopping application...'; pkill -f 'uvicorn main:app'; exit" INT
 
-# Uygulamaların çalışmasını bekle
+# Uygulamanın çalışmasını bekle
 wait