Update app.py

app.py

@@ -1,25 +1,19 @@
-# Create updated app.py file with fixes
 import gradio as gr
-import os
 import json
-import base64
-from datetime import datetime
+import os
 from openai import OpenAI
-from tempfile import NamedTemporaryFile
+from datetime import datetime
 
 # Global variables
-api_key = None
 client = None
-chat_history = []
-current_response_id = None
-current_image = None
+conversation_history = []
 
-def validate_api_key(key):
-    """Validate OpenAI API key by making a simple request"""
+def validate_api_key(api_key):
+    """Validate OpenAI API key by making a test request"""
     try:
-        temp_client = OpenAI(api_key=key)
-        # Make a minimal request to check if the key works
-        response = temp_client.responses.create(
+        test_client = OpenAI(api_key=api_key)
+        # Make a minimal test request
+        test_client.responses.create(
             model="gpt-4o-mini",
             input="Hello"
         )
@@ -27,255 +21,153 @@ def validate_api_key(key):
     except Exception as e:
         return False, f"Invalid API key: {str(e)}"
 
-def set_api_key(key):
-    """Set the OpenAI API key and initialize client"""
-    global api_key, client
-    is_valid, message = validate_api_key(key)
+def save_api_key(api_key):
+    """Save API key and initialize client"""
+    global client
+    is_valid, message = validate_api_key(api_key)
+    
     if is_valid:
-        api_key = key
         client = OpenAI(api_key=api_key)
         return gr.update(visible=False), gr.update(visible=True), message
     else:
         return gr.update(visible=True), gr.update(visible=False), message
 
-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 chat(message, chat_history):
-    """Process chat messages with optional image"""
-    global client, current_response_id, current_image
+def chat(message, history, response_id):
+    """Process chat message and get response"""
+    global client, conversation_history
     
     if not client:
-        return chat_history + [{"role": "assistant", "content": "Please set your OpenAI API key first."}]
+        return history + [[message, "Please enter a valid API key first"]], None
     
     try:
         # Add user message to history
-        chat_history.append({"role": "user", "content": message})
-        
-        if current_image is not None:
-            # Save the uploaded image to a temporary file
-            temp_file = NamedTemporaryFile(delete=False, suffix=".png")
-            image_path = temp_file.name
-            current_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 = 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)
-            # Reset the image
-            current_image = None
-        else:
-            # Text-only message
-            response = client.responses.create(
-                model="gpt-4o-mini",
-                input=message,
-                previous_response_id=current_response_id
-            )
+        conversation_history.append({"role": "user", "content": message})
         
-        current_response_id = response.id
+        # Get response from OpenAI
+        response = client.responses.create(
+            model="gpt-4o-mini",
+            input=message,
+            previous_response_id=response_id if response_id else None
+        )
         
         # Add assistant response to history
-        chat_history.append({"role": "assistant", "content": response.output_text})
+        conversation_history.append({"role": "assistant", "content": response.output_text})
         
-        return chat_history
+        return history + [[message, response.output_text]], response.id
     except Exception as e:
         error_message = f"Error: {str(e)}"
-        chat_history.append({"role": "assistant", "content": error_message})
-        return chat_history
+        return history + [[message, error_message]], None
 
 def export_chat():
-    """Export chat history to JSON file"""
-    global chat_history
+    """Export conversation history to JSON file"""
+    global conversation_history
     
-    if not chat_history:
-        return "No chat history to export."
+    if not conversation_history:
+        return "No conversation 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)
+        json.dump(conversation_history, f, indent=2)
     
-    return f"Chat exported to {filename}"
+    return f"Conversation exported to {filename}"
 
-def clear_chat():
-    """Clear chat history and reset response ID"""
-    global chat_history, current_response_id, current_image
-    chat_history = []
-    current_response_id = None
-    current_image = None
-    return []
+def clear_chat(history):
+    """Clear the chat history"""
+    global conversation_history
+    conversation_history = []
+    return [], None
 
-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>"""
+# Create Gradio interface
+with gr.Blocks(theme=gr.themes.Soft()) as app:
+    gr.HTML("""
+    <div style="text-align: center; margin-bottom: 1rem">
+        <h1 style="margin-bottom: 0.5rem">Chatbot based on responses API by Pejman Ebrahimi</h1>
+        <p>Powered by OpenAI's Responses API</p>
+    </div>
+    """)
     
-    return iframe_code
-
-def save_image(img):
-    """Save uploaded image to global variable"""
-    global current_image
-    current_image = img
-    return "[Image attached]"
-
-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, type="messages")
-                        
-                        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):
-                                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]
-        )
-        
-        # Handle image uploads
-        image_btn.upload(
-            save_image,
-            inputs=[image_btn],
-            outputs=[msg]
-        )
-        
-        # Handle chat submission
-        msg.submit(
-            chat,
-            inputs=[msg, chatbot],
-            outputs=[chatbot]
-        ).then(
-            lambda: gr.update(value=""),
-            None,
-            [msg]
-        )
-        
-        clear_btn.click(
-            clear_chat,
-            outputs=[chatbot]
+    # API key input interface
+    with gr.Group(visible=True) as api_key_group:
+        api_key_input = gr.Textbox(
+            label="Enter your OpenAI API Key",
+            placeholder="sk-...",
+            type="password"
         )
+        api_submit_btn = gr.Button("Submit API Key")
+        api_message = gr.Textbox(label="Status")
+    
+    # Chat interface
+    with gr.Group(visible=False) as chat_group:
+        chatbot = gr.Chatbot(height=500)
+        response_id = gr.State(None)
         
-        export_btn.click(
-            export_chat,
-            outputs=[export_message]
-        )
+        with gr.Row():
+            msg = gr.Textbox(
+                label="Message",
+                placeholder="Type your message here...",
+                show_label=False
+            )
+            submit_btn = gr.Button("Send")
         
-        theme_btn.click(
-            None,
-            None,
-            None,
-            _js="() => {document.body.classList.toggle('dark');}"
-        )
+        with gr.Row():
+            clear_btn = gr.Button("Clear Chat")
+            export_btn = gr.Button("Export Chat (JSON)")
         
-        generate_iframe_btn.click(
-            generate_iframe_code,
-            None,
-            iframe_code
-        )
+        export_message = gr.Textbox(label="Export Status", visible=True)
+    
+    # Set up event handlers
+    api_submit_btn.click(
+        save_api_key,
+        inputs=[api_key_input],
+        outputs=[api_key_group, chat_group, api_message]
+    )
+    
+    msg.submit(
+        chat,
+        inputs=[msg, chatbot, response_id],
+        outputs=[chatbot, response_id]
+    ).then(
+        lambda: "",
+        None,
+        [msg]
+    )
     
-    return demo
+    submit_btn.click(
+        chat,
+        inputs=[msg, chatbot, response_id],
+        outputs=[chatbot, response_id]
+    ).then(
+        lambda: "",
+        None,
+        [msg]
+    )
+    
+    clear_btn.click(
+        clear_chat,
+        inputs=[chatbot],
+        outputs=[chatbot, response_id]
+    )
+    
+    export_btn.click(
+        export_chat,
+        outputs=[export_message]
+    )
+    
+    # Footer
+    gr.HTML("""
+    <div style="text-align: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #ddd">
+        <p>© 2025 Pejman Ebrahimi | Built with Gradio and OpenAI Responses API</p>
+        <p style="font-size: 0.8rem; color: #666">
+            This application securely processes your conversations using OpenAI's technology.
+            Your API key is used only for authentication and is not stored permanently.
+        </p>
+    </div>
+    """)
 
+# Launch the app
 if __name__ == "__main__":
-    demo = create_ui()
-    demo.launch()
+    app.launch()
+
+print("Gradio app code generated successfully. Run this code to launch your chatbot application.")