Update app.py

app.py

@@ -1,213 +1,259 @@
 import gradio as gr
-import requests
-import base64
-import json
 import os
+import json
+import base64
+from datetime import datetime
+from openai import OpenAI
+from tempfile import NamedTemporaryFile
 
-# --- UI Constants ---
-TITLE = "🤖 Chatbot based on Responses API by Pejman Ebrahimi"
-FOOTER = "@2025 Pejman Ebrahimi - All rights reserved."
-LINKS = [
-    ("[![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/pejman-ebrahimi-4a60151a7/)", "https://www.linkedin.com/in/pejman-ebrahimi-4a60151a7/"),
-    ("[![HuggingFace](https://img.shields.io/badge/🤗_Hugging_Face-FFD21E?style=for-the-badge)](https://huggingface.co/arad1367)", "https://huggingface.co/arad1367"),
-    ("[![Website](https://img.shields.io/badge/Website-008080?style=for-the-badge&logo=About.me&logoColor=white)](https://arad1367.github.io/pejman-ebrahimi/)", "https://arad1367.github.io/pejman-ebrahimi/"),
-    ("[![University](https://img.shields.io/badge/University-00205B?style=for-the-badge&logo=academia&logoColor=white)](https://www.uni.li/pejman.ebrahimi?set_language=en)", "https://www.uni.li/pejman.ebrahimi?set_language=en"),
-]
-
-# --- Helper Functions ---
+# Global variables
+api_key = None
+client = None
+chat_history = []
+current_response_id = None
 
-def check_api_key(api_key):
-    """Check if the provided OpenAI API key is valid by making a minimal request."""
+def validate_api_key(key):
+    """Validate OpenAI API key by making a simple request"""
     try:
-        url = "https://api.openai.com/v1/models"
-        headers = {"Authorization": f"Bearer {api_key}"}
-        r = requests.get(url, headers=headers, timeout=10)
-        return r.status_code == 200
-    except Exception:
-        return False
+        temp_client = OpenAI(api_key=key)
+        # Make a minimal request to check if the key works
+        response = temp_client.responses.create(
+            model="gpt-4o-mini",
+            input="Hello"
+        )
+        return True, "API key is valid!"
+    except Exception as e:
+        return False, f"Invalid API key: {str(e)}"
 
-def openai_responses_api(api_key, messages, previous_response_id=None):
-    """Call OpenAI Responses API for chat or image analysis."""
-    url = "https://api.openai.com/v1/responses"
-    headers = {
-        "Authorization": f"Bearer {api_key}",
-        "Content-Type": "application/json"
-    }
-    payload = {
-        "model": "gpt-4o-mini",
-        "input": messages
-    }
-    if previous_response_id:
-        payload["previous_response_id"] = previous_response_id
-    r = requests.post(url, headers=headers, json=payload, timeout=60)
-    if r.status_code == 200:
-        return r.json()
+def set_api_key(key):
+    """Set the OpenAI API key and initialize client"""
+    global api_key, client
+    is_valid, message = validate_api_key(key)
+    if is_valid:
+        api_key = key
+        client = OpenAI(api_key=api_key)
+        return gr.update(visible=False), gr.update(visible=True), message
     else:
-        try:
-            return {"error": r.json().get("error", {}).get("message", "Unknown error")}
-        except Exception:
-            return {"error": "Unknown error"}
-
-def encode_image_to_base64(image):
-    """Encode uploaded image to base64 string."""
-    if image is None:
-        return None
-    with open(image, "rb") as f:
-        return base64.b64encode(f.read()).decode("utf-8")
+        return gr.update(visible=True), gr.update(visible=False), message
 
-def get_iframe_code(space_url):
-    """Generate iframe code for embedding."""
-    return f'<iframe src="{space_url}" width="100%" height="600" frameborder="0"></iframe>'
-
-# --- Gradio App Logic ---
-
-def set_api_key(api_key, state):
-    """Set and validate API key in session state."""
-    if not api_key or not api_key.startswith("sk-"):
-        return gr.update(visible=True), "Please enter a valid OpenAI API key.", state
-    if check_api_key(api_key):
-        state["api_key"] = api_key
-        return gr.update(visible=False), "", state
-    else:
-        return gr.update(visible=True), "API key is invalid. Please try again.", state
-
-def chat_fn(user_message, chat_history, image, state):
-    """Main chat function: handles text and optional image."""
-    api_key = state.get("api_key")
-    if not api_key:
-        return chat_history, state, gr.update(visible=True), "Please enter your OpenAI API key."
-    if not user_message and image is None:
-        return chat_history, state, gr.update(visible=False), ""
-    # Prepare messages for API
-    messages = chat_history.copy()
-    # Add current user message
-    if image is not None:
-        base64_img = encode_image_to_base64(image)
-        content = [
-            {"type": "input_text", "text": user_message or "Please describe this image."},
-            {"type": "input_image", "image_url": f"data:image/jpeg;base64,{base64_img}"}
-        ]
-        messages.append({"role": "user", "content": content})
-        display_user = (user_message or "") + "\n[Image attached]"
-    else:
-        messages.append({"role": "user", "content": user_message})
-        display_user = user_message
-    # Call OpenAI Responses API
-    response = openai_responses_api(api_key, messages, state.get("previous_response_id"))
-    if "error" in response:
-        return chat_history, state, gr.update(visible=True), f"API error: {response['error']}"
-    output_text = response.get("output_text", "")
-    state["previous_response_id"] = response.get("id")
-    # Update chat history for display
-    chat_history = chat_history + [
-        {"role": "user", "content": display_user},
-        {"role": "assistant", "content": output_text}
-    ]
-    return chat_history, state, gr.update(visible=False), ""
+def encode_image(image_path):
+    """Encode image to base64"""
+    with open(image_path, 'rb') as image_file:
+        return base64.b64encode(image_file.read()).decode("utf-8")
 
-def image_analysis_fn(image, state):
-    """Analyze uploaded image using OpenAI Responses API."""
-    api_key = state.get("api_key")
-    if not api_key:
-        return "", gr.update(visible=True), "Please enter your OpenAI API key."
-    if image is None:
-        return "Please upload an image.", gr.update(visible=False), ""
-    base64_img = encode_image_to_base64(image)
-    messages = [
-        {
-            "role": "user",
-            "content": [
-                {"type": "input_text", "text": "Please describe this image."},
-                {"type": "input_image", "image_url": f"data:image/jpeg;base64,{base64_img}"}
+def chat(message, history, image=None):
+    """Process chat messages with optional image"""
+    global client, current_response_id, chat_history
+    
+    if not client:
+        return "Please set your OpenAI API key first."
+    
+    try:
+        if image is not None:
+            # Save the uploaded image to a temporary file
+            temp_file = NamedTemporaryFile(delete=False, suffix=".png")
+            image_path = temp_file.name
+            image.save(image_path)
+            
+            # Encode the image
+            base64_image = encode_image(image_path)
+            
+            # Create input with text and image
+            input_messages = [
+                {
+                    "role": "user",
+                    "content": [
+                        {
+                            "type": "input_text",
+                            "text": message
+                        },
+                        {
+                            "type": "input_image",
+                            "image_url": f"data:image/png;base64,{base64_image}"
+                        }
+                    ]
+                }
             ]
-        }
-    ]
-    response = openai_responses_api(api_key, messages)
-    if "error" in response:
-        return f"API error: {response['error']}", gr.update(visible=True), f"API error: {response['error']}"
-    return response.get("output_text", ""), gr.update(visible=False), ""
-
-def export_chat(chat_history):
-    """Export chat history as JSON."""
-    chat_json = chat_history
-    with open("chat_history.json", "w", encoding="utf-8") as f:
-        json.dump(chat_json, f, indent=2, ensure_ascii=False)
-    return "chat_history.json"
-
-def show_iframe(space_url):
-    """Show iframe code for embedding."""
-    return get_iframe_code(space_url)
-
-# --- Gradio UI ---
+            
+            response = client.responses.create(
+                model="gpt-4o-mini",
+                input=input_messages,
+                previous_response_id=current_response_id
+            )
+            
+            # Clean up the temporary file
+            os.unlink(image_path)
+        else:
+            # Text-only message
+            response = client.responses.create(
+                model="gpt-4o-mini",
+                input=message,
+                previous_response_id=current_response_id
+            )
+        
+        current_response_id = response.id
+        
+        # Update chat history for export
+        chat_history.append({"role": "user", "content": message})
+        chat_history.append({"role": "assistant", "content": response.output_text})
+        
+        return response.output_text
+    except Exception as e:
+        return f"Error: {str(e)}"
 
-with gr.Blocks(theme=gr.themes.Soft(), css=".footer {text-align: center; font-size: 14px; color: gray;}") as demo:
-    # --- Header ---
-    gr.Markdown(f"<h1 style='text-align:center'>{TITLE}</h1>")
-    with gr.Row():
-        for md, url in LINKS:
-            gr.Markdown(f"<a href='{url}' target='_blank'>{md}</a>")
-    gr.Markdown("---")
+def export_chat():
+    """Export chat history to JSON file"""
+    global chat_history
+    
+    if not chat_history:
+        return "No chat history to export."
+    
+    timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+    filename = f"chat_export_{timestamp}.json"
+    
+    with open(filename, "w") as f:
+        json.dump(chat_history, f, indent=2)
+    
+    return f"Chat exported to {filename}"
 
-    # --- API Key Modal ---
-    state = gr.State({"api_key": None, "previous_response_id": None})
-    with gr.Row(visible=True) as api_key_row:
-        api_key_box = gr.Textbox(label="Enter your OpenAI API Key", type="password", placeholder="sk-...", show_label=True)
-        api_key_btn = gr.Button("Submit")
-        api_key_error = gr.Markdown("", visible=False)
-    api_key_box.submit(set_api_key, [api_key_box, state], [api_key_row, api_key_error, state])
-    api_key_btn.click(set_api_key, [api_key_box, state], [api_key_row, api_key_error, state])
+def clear_chat():
+    """Clear chat history and reset response ID"""
+    global chat_history, current_response_id
+    chat_history = []
+    current_response_id = None
+    return None
 
-    # --- Tabs ---
-    with gr.Tabs():
-        # --- Chat Tab ---
-        with gr.Tab("💬 Chatbot"):
-            chatbot = gr.Chatbot(label="Chatbot", height=400, type="messages")
-            with gr.Row():
-                user_input = gr.Textbox(label="Your message", placeholder="Type your message here...", scale=4)
-                image_input = gr.Image(type="filepath", label="Attach image (optional)", scale=1)
-                send_btn = gr.Button("Send", scale=1)
-            chat_error = gr.Markdown("", visible=False)
-            with gr.Row():
-                export_btn = gr.Button("Export chat as JSON")
-                export_file = gr.File(label="Download chat JSON", visible=False)
-                iframe_btn = gr.Button("Get iframe code")
-                iframe_code = gr.Textbox(label="Embed code", interactive=False, visible=False)
-            # Chat logic
-            send_btn.click(
-                chat_fn,
-                [user_input, chatbot, image_input, state],
-                [chatbot, state, chat_error, api_key_error]
-            )
-            user_input.submit(
-                chat_fn,
-                [user_input, chatbot, image_input, state],
-                [chatbot, state, chat_error, api_key_error]
-            )
-            export_btn.click(
-                export_chat,
-                chatbot,
-                export_file
-            )
-            iframe_btn.click(
-                show_iframe,
-                gr.Textbox(value="https://huggingface.co/spaces/your-space-name", visible=False),
-                iframe_code
-            )
-        # --- Image Analysis Tab ---
-        with gr.Tab("🖼️ Image Analysis"):
-            image_upload = gr.Image(type="filepath", label="Upload image")
-            analyze_btn = gr.Button("Analyze")
-            image_result = gr.Textbox(label="Analysis result", lines=4)
-            image_error = gr.Markdown("", visible=False)
-            analyze_btn.click(
-                image_analysis_fn,
-                [image_upload, state],
-                [image_result, api_key_error, image_error]
-            )
+def generate_iframe_code(request: gr.Request):
+    """Generate iframe code for embedding the app"""
+    app_url = request.headers.get('host', 'localhost')
+    if not app_url.startswith('http'):
+        app_url = f"https://{app_url}"
+    
+    iframe_code = f"""<iframe
+    src="{app_url}"
+    width="100%"
+    height="500px"
+    style="border: 1px solid #ddd; border-radius: 8px;"
+    allow="microphone"
+></iframe>"""
+    
+    return iframe_code
 
-    # --- Footer ---
-    gr.Markdown(f"<div class='footer'>{FOOTER}</div>")
+def create_ui():
+    """Create the Gradio UI"""
+    with gr.Blocks(theme=gr.themes.Soft(), css="""
+        .container { max-width: 900px; margin: auto; }
+        .title { text-align: center; margin-bottom: 10px; }
+        .subtitle { text-align: center; margin-bottom: 20px; color: #666; }
+        .social-links { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; }
+        .footer { text-align: center; margin-top: 20px; padding: 10px; border-top: 1px solid #eee; }
+        .tab-content { padding: 20px; }
+    """) as demo:
+        with gr.Column(elem_classes="container"):
+            gr.Markdown("# Responses API Chatbot", elem_classes="title")
+            gr.Markdown("### Created by Pejman Ebrahimi", elem_classes="subtitle")
+            
+            with gr.Row(elem_classes="social-links"):
+                gr.HTML("""
+                    <a href="https://www.linkedin.com/in/pejman-ebrahimi-4a60151a7/" target="_blank">
+                        <img src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white" alt="LinkedIn">
+                    </a>
+                    <a href="https://huggingface.co/arad1367" target="_blank">
+                        <img src="https://img.shields.io/badge/🤗_Hugging_Face-FFD21E?style=for-the-badge" alt="HuggingFace">
+                    </a>
+                    <a href="https://arad1367.github.io/pejman-ebrahimi/" target="_blank">
+                        <img src="https://img.shields.io/badge/Website-008080?style=for-the-badge&logo=About.me&logoColor=white" alt="Website">
+                    </a>
+                    <a href="https://www.uni.li/pejman.ebrahimi?set_language=en" target="_blank">
+                        <img src="https://img.shields.io/badge/University-00205B?style=for-the-badge&logo=academia&logoColor=white" alt="University">
+                    </a>
+                """)
+            
+            # API Key Input Section
+            with gr.Group(visible=True) as api_key_group:
+                with gr.Row():
+                    api_key_input = gr.Textbox(
+                        label="Enter your OpenAI API Key",
+                        placeholder="sk-...",
+                        type="password",
+                        scale=4
+                    )
+                    api_key_button = gr.Button("Set API Key", scale=1)
+                api_key_message = gr.Markdown("")
+            
+            # Main Chat Interface (hidden until API key is set)
+            with gr.Group(visible=False) as chat_interface:
+                with gr.Tabs() as tabs:
+                    with gr.TabItem("Chat", elem_classes="tab-content"):
+                        chatbot = gr.Chatbot(height=400)
+                        with gr.Row():
+                            with gr.Column(scale=4):
+                                msg = gr.Textbox(
+                                    placeholder="Type your message here...",
+                                    show_label=False,
+                                    container=False
+                                )
+                            with gr.Column(scale=1):
+                                with gr.Row():
+                                    image_btn = gr.UploadButton("📎", file_types=["image"])
+                        
+                        with gr.Row():
+                            clear_btn = gr.Button("Clear Chat")
+                            export_btn = gr.Button("Export Chat")
+                            theme_btn = gr.Button("Toggle Theme")
+                        
+                        export_message = gr.Markdown("")
+                    
+                    with gr.TabItem("Embed", elem_classes="tab-content"):
+                        gr.Markdown("### Embed this chatbot on your website")
+                        iframe_code = gr.Code(language="html")
+                        generate_iframe_btn = gr.Button("Generate Embed Code")
+            
+            gr.Markdown("© 2025 Pejman Ebrahimi - All Rights Reserved", elem_classes="footer")
+        
+        # Set up event handlers
+        api_key_button.click(
+            set_api_key,
+            inputs=[api_key_input],
+            outputs=[api_key_group, chat_interface, api_key_message]
+        )
+        
+        msg.submit(
+            chat,
+            inputs=[msg, chatbot, None],
+            outputs=[chatbot]
+        )
+        
+        image_btn.upload(
+            lambda img: gr.update(value=f"[Uploaded image] "),
+            inputs=[image_btn],
+            outputs=[msg]
+        )
+        
+        clear_btn.click(
+            clear_chat,
+            outputs=[chatbot]
+        )
+        
+        export_btn.click(
+            export_chat,
+            outputs=[export_message]
+        )
+        
+        theme_btn.click(
+            lambda: gr.Theme.toggle_theme(),
+            None,
+            None
+        )
+        
+        generate_iframe_btn.click(
+            generate_iframe_code,
+            None,
+            iframe_code
+        )
+    
+    return demo
 
-# --- Launch ---
 if __name__ == "__main__":
+    demo = create_ui()
     demo.launch()