Add ChatGPT-like UI with history and streaming for OpenAI

README.markdown

@@ -0,0 +1,14 @@
+# Multimodelselector
+
+     A Gradio-based chat application that allows querying multiple AI models (OpenAI, Anthropic, Gemini) with a ChatGPT-like interface, including history and streaming responses (for OpenAI).
+
+     ## Usage
+     - Open the Space URL in your browser.
+     - Select a provider (OpenAI, Anthropic, Gemini) from the dropdown.
+     - Type a query and press Enter to chat.
+     - Conversation history is preserved, and OpenAI responses stream in real-time.
+
+     ## Setup
+     - Set `OPENAI_API_KEY`, `ANTHROPIC_API_KEY`, and `GEMINI_API_KEY` as secrets in Hugging Face Space settings.
+     - Runs on Python 3.8+ with dependencies listed in `requirements.txt`.
+     - Framework: Gradio

app.py

@@ -3,6 +3,7 @@ import logging
 import httpx
 from dotenv import load_dotenv
 import gradio as gr
+from typing import AsyncGenerator, List, Dict
 
 # Configure logging
 logging.basicConfig(level=logging.INFO)
@@ -15,11 +16,20 @@ logger.info(f"OPENAI_API_KEY present: {'OPENAI_API_KEY' in os.environ}")
 logger.info(f"ANTHROPIC_API_KEY present: {'ANTHROPIC_API_KEY' in os.environ}")
 logger.info(f"GEMINI_API_KEY present: {'GEMINI_API_KEY' in os.environ}")
 
-async def ask_openai(query: str):
+async def ask_openai(query: str, history: List[Dict[str, str]]) -> AsyncGenerator[str, None]:
     openai_api_key = os.getenv("OPENAI_API_KEY")
     if not openai_api_key:
         logger.error("OpenAI API key not provided")
-        return "Error: OpenAI API key not provided."
+        yield "Error: OpenAI API key not provided."
+        return
+
+    # Build message history
+    messages = []
+    for msg in history:
+        messages.append({"role": "user", "content": msg["user"]})
+        if msg["bot"]:
+            messages.append({"role": "assistant", "content": msg["bot"]})
+    messages.append({"role": "user", "content": query})
 
     headers = {
         "Authorization": f"Bearer {openai_api_key}",
@@ -28,30 +38,54 @@ async def ask_openai(query: str):
 
     payload = {
         "model": "gpt-3.5-turbo",
-        "messages": [{"role": "user", "content": query}]
+        "messages": messages,
+        "stream": True
     }
 
     try:
         async with httpx.AsyncClient() as client:
-            response = await client.post("https://api.openai.com/v1/chat/completions", headers=headers, json=payload)
-        
-        response.raise_for_status()
-        answer = response.json()['choices'][0]['message']['content']
-        return answer
+            async with client.stream("POST", "https://api.openai.com/v1/chat/completions", headers=headers, json=payload) as response:
+                response.raise_for_status()
+                async for chunk in response.aiter_text():
+                    if chunk:
+                        # Parse the streaming chunk (JSON lines)
+                        lines = chunk.splitlines()
+                        for line in lines:
+                            if line.startswith("data: "):
+                                data = line[6:]  # Remove "data: " prefix
+                                if data == "[DONE]":
+                                    break
+                                try:
+                                    json_data = eval(data)  # Safely parse JSON
+                                    if "choices" in json_data and json_data["choices"]:
+                                        delta = json_data["choices"][0].get("delta", {})
+                                        if "content" in delta:
+                                            yield delta["content"]
+                                except Exception as e:
+                                    logger.error(f"Error parsing OpenAI stream chunk: {str(e)}")
+                                    yield f"Error parsing stream: {str(e)}"
 
     except httpx.HTTPStatusError as e:
         logger.error(f"OpenAI HTTP Status Error: {e.response.status_code}, {e.response.text}")
-        return f"Error: OpenAI HTTP Status Error: {e.response.status_code}, {e.response.text}"
+        yield f"Error: OpenAI HTTP Status Error: {e.response.status_code}, {e.response.text}"
     except Exception as e:
         logger.error(f"OpenAI Error: {str(e)}")
-        return f"Error: OpenAI Error: {str(e)}"
+        yield f"Error: OpenAI Error: {str(e)}"
 
-async def ask_anthropic(query: str):
+async def ask_anthropic(query: str, history: List[Dict[str, str]]) -> str:
     anthropic_api_key = os.getenv("ANTHROPIC_API_KEY")
     if not anthropic_api_key:
         logger.error("Anthropic API key not provided")
         return "Error: Anthropic API key not provided."
 
+    # Build message history
+    messages = []
+    for msg in history:
+        messages.append({"role": "user", "content": msg["user"]})
+        if msg["bot"]:
+            messages.append({"role": "assistant", "content": msg["bot"]})
+    messages.append({"role": "user", "content": query})
+
     headers = {
         "x-api-key": anthropic_api_key,
         "anthropic-version": "2023-06-01",
@@ -61,7 +95,7 @@ async def ask_anthropic(query: str):
     payload = {
         "model": "claude-3-5-sonnet-20241022",
         "max_tokens": 1024,
-        "messages": [{"role": "user", "content": query}]
+        "messages": messages
     }
 
     try:
@@ -71,8 +105,7 @@ async def ask_anthropic(query: str):
         
         response.raise_for_status()
         logger.info(f"Anthropic response: {response.json()}")
-        answer = response.json()['content'][0]['text']
-        return answer
+        return response.json()['content'][0]['text']
 
     except httpx.HTTPStatusError as e:
         logger.error(f"Anthropic HTTP Status Error: {e.response.status_code}, {e.response.text}")
@@ -81,18 +114,24 @@ async def ask_anthropic(query: str):
         logger.error(f"Anthropic Error: {str(e)}")
         return f"Error: Anthropic Error: {str(e)}"
 
-async def ask_gemini(query: str):
+async def ask_gemini(query: str, history: List[Dict[str, str]]) -> str:
     gemini_api_key = os.getenv("GEMINI_API_KEY")
     if not gemini_api_key:
         logger.error("Gemini API key not provided")
         return "Error: Gemini API key not provided."
 
+    # Gemini doesn't natively support chat history in the same way, so we concatenate history as text
+    history_text = ""
+    for msg in history:
+        history_text += f"User: {msg['user']}\nAssistant: {msg['bot']}\n" if msg["bot"] else f"User: {msg['user']}\n"
+    full_query = history_text + f"User: {query}\n"
+
     headers = {
         "Content-Type": "application/json"
     }
 
     payload = {
-        "contents": [{"parts": [{"text": query}]}]
+        "contents": [{"parts": [{"text": full_query}]}]
     }
 
     try:
@@ -104,8 +143,7 @@ async def ask_gemini(query: str):
             )
         
         response.raise_for_status()
-        answer = response.json()['candidates'][0]['content']['parts'][0]['text']
-        return answer
+        return response.json()['candidates'][0]['content']['parts'][0]['text']
 
     except httpx.HTTPStatusError as e:
         logger.error(f"Gemini HTTP Status Error: {e.response.status_code}, {e.response.text}")
@@ -114,31 +152,32 @@ async def ask_gemini(query: str):
         logger.error(f"Gemini Error: {str(e)}")
         return f"Error: Gemini Error: {str(e)}"
 
-async def query_model(query: str, provider: str):
+async def query_model(query: str, provider: str, history: List[Dict[str, str]]):
     provider = provider.lower()
     if provider == "openai":
-        return await ask_openai(query)
+        async for chunk in ask_openai(query, history):
+            yield chunk
     elif provider == "anthropic":
-        return await ask_anthropic(query)
+        yield await ask_anthropic(query, history)
     elif provider == "gemini":
-        return await ask_gemini(query)
+        yield await ask_gemini(query, history)
     else:
-        return f"Error: Unknown provider: {provider}"
+        yield f"Error: Unknown provideratom: {provider}"
 
 # Gradio interface
-with gr.Blocks() as demo:
-    gr.Markdown("# Multi-Model Selector")
-    gr.Markdown("Select a provider and enter a query to get a response from the chosen AI model.")
-    
-    provider = gr.Dropdown(choices=["OpenAI", "Anthropic", "Gemini"], label="Select Provider")
-    query = gr.Textbox(label="Enter your query", placeholder="e.g., What is the capital of the United States?")
-    submit_button = gr.Button("Submit")
-    output = gr.Textbox(label="Response", interactive=False)
+with gr.Blocks(theme=gr.themes.Soft()) as demo:
+    gr.Markdown("# Multi-Model Chat")
+    gr.Markdown("Chat with OpenAI, Anthropic, or Gemini. Select a provider and start typing!")
     
-    submit_button.click(
+    provider = gr.Dropdown(choices=["OpenAI", "Anthropic", "Gemini"], label="Select Provider", value="OpenAI")
+    chatbot = gr.ChatInterface(
         fn=query_model,
-        inputs=[query, provider],
-        outputs=output
+        additional_inputs=[provider],
+        retry_btn=None,
+        undo_btn=None,
+        clear_btn="Clear",
+        title="",
+        description=""
     )
 
 # Launch the Gradio app

requirements.txt

@@ -1,11 +1,3 @@
-fastapi
-uvicorn
-openai
-google-generativeai
-anthropic
-python-dotenv
-requests
-gradio
-httpx
-
-
+gradio==4.44.0
+httpx==0.27.2
+python-dotenv==1.0.1