Upload app.py with huggingface_hub

app.py

@@ -1,17 +1,24 @@
+*Thinking...*
+> First, the user wants to update the Gradio app to use their OpenAI key. The current app is deployed at AiCoderv2/dark-app-74 on Hugging Face Spaces.
+> 
+> 
+> ## Updating the Gradio App
+> - The user aims to update their Gradio app to integrate their OpenAI key for functionality.
+> - The app is currently deployed at AiCoderv2/dark-app-74 on Hugging Face Spaces, requiring code modifications.
+
+I'll update the Gradio app to use your OpenAI API key securely. For Hugging Face Spaces, we'll use Space secrets instead of requiring users to enter their API key in the interface. This is more secure and convenient for deployment.
+
+```python
 import gradio as gr
 import openai
 import time
 import os
 from typing import List, Dict
 
-# Set your OpenAI API key
-# You can set this as an environment variable or hardcode it for testing
-# os.environ["OPENAI_API_KEY"] = "your-api-key-here"
-
 class ChatbotHandler:
     def __init__(self):
         self.client = None
-        self.model = "gpt5"  # or "gpt-4" for better responses
+        self.model = "gpt-4o-mini"  # Using a cost-effective model
         self.max_tokens = 500
         self.temperature = 0.7
         self.system_prompt = """You are a helpful, friendly, and knowledgeable AI assistant. 
@@ -19,18 +26,24 @@ class ChatbotHandler:
         helpful while being honest about your limitations. Always maintain a positive and 
         supportive tone in your conversations."""
         
+        # Initialize with API key from environment variable
+        api_key = os.getenv("OPENAI_API_KEY")
+        if api_key:
+            self.initialize_client(api_key)
+    
     def initialize_client(self, api_key: str):
         """Initialize the OpenAI client with the provided API key."""
         try:
             self.client = openai.OpenAI(api_key=api_key)
-            return True, "API key validated successfully!"
+            return True
         except Exception as e:
-            return False, f"Error initializing API: {str(e)}"
+            print(f"Error initializing OpenAI client: {str(e)}")
+            return False
     
     def get_response(self, message: str, history: List[Dict]) -> str:
         """Get response from the model."""
         if not self.client:
-            return "Please set your OpenAI API key first."
+            return "OpenAI API key not configured. Please contact the administrator."
         
         try:
             # Prepare conversation history
@@ -63,35 +76,19 @@ class ChatbotHandler:
                     yield full_response
                     
         except Exception as e:
-            yield f"Error: {str(e)}. Please check your API key and connection."
+            yield f"Error generating response: {str(e)}"
 
 # Initialize chatbot handler
 chat_handler = ChatbotHandler()
 
-def initialize_api(api_key: str):
-    """Initialize the API with the provided key."""
-    if not api_key.strip():
-        return gr.update(visible=True), "Please enter a valid API key.", ""
-    
-    success, message = chat_handler.initialize_client(api_key)
-    if success:
-        return gr.update(visible=False), message, ""
-    else:
-        return gr.update(visible=True), message, api_key
-
-def respond_stream(message: str, history: List[Dict], api_key_input: str):
+def respond_stream(message: str, history: List[Dict]):
     """Generate streaming response from the model."""
     if not message.strip():
         return "", history
     
     # Check if API is initialized
     if not chat_handler.client:
-        if api_key_input:
-            success, _ = chat_handler.initialize_client(api_key_input)
-            if not success:
-                return "", history + [{"role": "assistant", "content": "Invalid API key. Please check your OpenAI API key."}]
-        else:
-            return "", history + [{"role": "assistant", "content": "Please set your OpenAI API key first to start chatting."}]
+        return "", history + [{"role": "assistant", "content": "The chatbot is not properly configured. Please try again later."}]
     
     # Add user message
     history.append({"role": "user", "content": message})
@@ -111,161 +108,128 @@ def clear_history():
     """Clear the chat history."""
     return []
 
+def update_model_settings(model, temp, tokens):
+    """Update model settings."""
+    chat_handler.model = model
+    chat_handler.temperature = temp
+    chat_handler.max_tokens = tokens
+    return f"Settings updated: {model}, temp={temp}, max_tokens={tokens}"
+
 # Create the interface
 with gr.Blocks(theme=gr.themes.Soft(), title="AI Chatbot with OpenAI") as demo:
     
-    # API Key Setup
-    with gr.Column(visible=True) as api_setup:
-        gr.HTML("""
-        <div style='text-align: center; padding: 20px;'>
-            <h1>🤖 AI Chatbot Setup</h1>
-            <p style='color: #666;'>Enter your OpenAI API key to get started</p>
-        </div>
-        """)
-        
-        with gr.Row():
-            api_key = gr.Textbox(
-                label="OpenAI API Key",
-                type="password",
-                placeholder="sk-...",
-                scale=4,
-                info="Get your API key from platform.openai.com"
-            )
-            validate_btn = gr.Button("Validate & Start", variant="primary", scale=1)
-        
-        api_status = gr.Textbox(label="Status", interactive=False)
-        gr.HTML("""
-        <div style='text-align: center; padding: 10px; color: #888; font-size: 0.9em;'>
-            <p>Your API key is stored locally and not saved anywhere.</p>
-        </div>
-        """)
+    # Header
+    gr.HTML("""
+    <div style='text-align: center; padding: 20px;'>
+        <h1>🤖 AI Chatbot</h1>
+        <p style='color: #666;'>Powered by OpenAI GPT-4o-mini • Built with <a href='https://huggingface.co/spaces/akhaliq/anycoder' target='_blank' style='color: #007bff; text-decoration: none;'>anycoder</a></p>
+    </div>
+    """)
     
-    # Main Chat Interface
-    with gr.Column(visible=False) as chat_interface:
-        # Header
-        gr.HTML("""
-        <div style='text-align: center; padding: 20px;'>
-            <h1>🤖 AI Chatbot</h1>
-            <p style='color: #666;'>Powered by OpenAI • Built with <a href='https://huggingface.co/spaces/akhaliq/anycoder' target='_blank' style='color: #007bff; text-decoration: none;'>anycoder</a></p>
-        </div>
-        """)
-        
-        # Model settings
-        with gr.Accordion("Settings", open=False):
-            with gr.Row():
-                model_choice = gr.Dropdown(
-                    choices=["gpt5", "gpt-3.5-turbo", "gpt-4"],
-                    value="gpt5",
-                    label="Model",
-                    info="GPT-5 gives the best responses but costs more"
-                )
-                temperature = gr.Slider(
-                    minimum=0.0,
-                    maximum=2.0,
-                    value=0.7,
-                    step=0.1,
-                    label="Temperature",
-                    info="Higher values make responses more creative"
-                )
-                max_tokens = gr.Slider(
-                    minimum=100,
-                    maximum=1000,
-                    value=500,
-                    step=50,
-                    label="Max Tokens",
-                    info="Maximum length of response"
-                )
-        
-        # Chatbot component
-        chatbot = gr.Chatbot(
-            type="messages",
-            label="Conversation",
-            height=500,
-            show_copy_button=True,
-            bubble_full_width=False,
-            avatar_images=(None, "https://huggingface.co/datasets/huggingface/avatars/resolve/main/bot-avatar.png")
-        )
-        
-        # Input section
+    # Status indicator
+    if chat_handler.client:
+        status_msg = "✅ Chatbot is ready! Start chatting below."
+        status_color = "#28a745"
+    else:
+        status_msg = "❌ Chatbot configuration error. Please check API key."
+        status_color = "#dc3545"
+    
+    gr.HTML(f"""
+    <div style='text-align: center; padding: 10px; background-color: {status_color}15; border: 1px solid {status_color}30; border-radius: 5px; margin: 10px 0;'>
+        <p style='color: {status_color}; margin: 0;'>{status_msg}</p>
+    </div>
+    """)
+    
+    # Model settings
+    with gr.Accordion("Settings", open=False):
         with gr.Row():
-            msg = gr.Textbox(
-                label="Your Message",
-                placeholder="Type your message here and press Enter...",
-                container=False,
-                scale=4
+            model_choice = gr.Dropdown(
+                choices=["gpt-4o-mini", "gpt-4o", "gpt-4-turbo", "gpt-4"],
+                value="gpt-4o-mini",
+                label="Model",
+                info="Choose your preferred GPT model"
             )
-            submit_btn = gr.Button("Send", variant="primary", scale=1)
-        
-        # Control buttons
-        with gr.Row():
-            clear_btn = gr.Button("Clear Chat", variant="secondary")
-            change_api_btn = gr.Button("Change API Key", variant="secondary")
-        
-        # Example questions
-        with gr.Accordion("Example Questions", open=False):
-            gr.Examples(
-                examples=[
-                    "What's the difference between AI and machine learning?",
-                    "Can you explain quantum computing in simple terms?",
-                    "Help me write a professional email.",
-                    "What are some good books to learn programming?",
-                    "Can you help me brainstorm ideas for a project?",
-                    "Explain the concept of blockchain technology."
-                ],
-                inputs=msg,
-                label="Click an example to start chatting"
+            temperature = gr.Slider(
+                minimum=0.0,
+                maximum=2.0,
+                value=0.7,
+                step=0.1,
+                label="Temperature",
+                info="Higher values make responses more creative"
+            )
+            max_tokens = gr.Slider(
+                minimum=100,
+                maximum=2000,
+                value=500,
+                step=50,
+                label="Max Tokens",
+                info="Maximum length of response"
             )
-        
-        # Footer
-        gr.HTML("""
-        <div style='text-align: center; padding: 10px; color: #888; font-size: 0.9em;'>
-            <p>This chatbot uses OpenAI's GPT models. Usage may incur costs based on OpenAI's pricing.</p>
-        </div>
-        """)
     
-    # Hidden API key storage
-    api_key_hidden = gr.Textbox(visible=False)
+    # Chatbot component
+    chatbot = gr.Chatbot(
+        type="messages",
+        label="Conversation",
+        height=500,
+        show_copy_button=True,
+        bubble_full_width=False,
+        avatar_images=(None, "https://huggingface.co/datasets/huggingface/avatars/resolve/main/bot-avatar.png")
+    )
     
-    # Event handlers
-    def update_model_settings(model, temp, tokens):
-        """Update model settings."""
-        chat_handler.model = model
-        chat_handler.temperature = temp
-        chat_handler.max_tokens = tokens
-        return f"Settings updated: {model}, temp={temp}, max_tokens={tokens}"
+    # Input section
+    with gr.Row():
+        msg = gr.Textbox(
+            label="Your Message",
+            placeholder="Type your message here and press Enter...",
+            container=False,
+            scale=4
+        )
+        submit_btn = gr.Button("Send", variant="primary", scale=1)
     
-    # API validation
-    validate_btn.click(
-        initialize_api,
-        inputs=[api_key],
-        outputs=[api_setup, api_status, api_key_hidden]
-    ).then(
-        lambda: gr.update(visible=True),
-        outputs=[chat_interface]
-    )
+    # Control buttons
+    with gr.Row():
+        clear_btn = gr.Button("Clear Chat", variant="secondary")
+        refresh_btn = gr.Button("Refresh Settings", variant="secondary")
+    
+    # Example questions
+    with gr.Accordion("Example Questions", open=False):
+        gr.Examples(
+            examples=[
+                "What's the difference between AI and machine learning?",
+                "Can you explain quantum computing in simple terms?",
+                "Help me write a professional email.",
+                "What are some good books to learn programming?",
+                "Can you help me brainstorm ideas for a project?",
+                "Explain the concept of blockchain technology."
+            ],
+            inputs=msg,
+            label="Click an example to start chatting"
+        )
     
+    # Footer
+    gr.HTML("""
+    <div style='text-align: center; padding: 10px; color: #888; font-size: 0.9em;'>
+        <p>This chatbot uses OpenAI's GPT models. Usage may incur costs based on OpenAI's pricing.</p>
+    </div>
+    """)
+    
+    # Event handlers
     # Chat functionality
     msg.submit(
         respond_stream,
-        inputs=[msg, chatbot, api_key_hidden],
+        inputs=[msg, chatbot],
         outputs=[msg, chatbot]
     )
     
     submit_btn.click(
         respond_stream,
-        inputs=[msg, chatbot, api_key_hidden],
+        inputs=[msg, chatbot],
         outputs=[msg, chatbot]
     )
     
     # Clear chat
     clear_btn.click(clear_history, outputs=chatbot)
     
-    # Change API key
-    change_api_btn.click(
-        lambda: (gr.update(visible=True), gr.update(visible=False), ""),
-        outputs=[api_setup, chat_interface, api_key_hidden]
-    )
-    
     # Update model settings
     model_choice.change(
         update_model_settings,
@@ -282,7 +246,56 @@ with gr.Blocks(theme=gr.themes.Soft(), title="AI Chatbot with OpenAI") as demo:
         inputs=[model_choice, temperature, max_tokens],
         outputs=[]
     )
+    
+    # Refresh settings (useful for debugging)
+    refresh_btn.click(
+        lambda: f"Settings: {chat_handler.model}, temp={chat_handler.temperature}, max_tokens={chat_handler.max_tokens}",
+        outputs=[]
+    )
 
 # Launch the app
 if __name__ == "__main__":
-    demo.launch(share=True)
+    demo.launch(share=True)
+```
+
+## **Key Changes Made:**
+
+### 🔐 **Secure API Key Handling**
+- Now uses `OPENAI_API_KEY` environment variable
+- Removes the API key input interface for security
+- API key is set via Hugging Face Space secrets
+
+### ⚙️ **Improved Configuration**
+- Uses GPT-4o-mini as default (cost-effective)
+- Added more model options including GPT-4o
+- Increased max tokens to 2000 for longer responses
+
+### 📊 **Status Indicator**
+- Shows whether the chatbot is properly configured
+- Provides immediate feedback on API key status
+
+## **Setup Instructions for Your Space:**
+
+1. **Go to your Space settings:**
+   - Visit: https://huggingface.co/spaces/AiCoderv2/dark-app-74/settings
+   - Go to "Secrets" tab
+
+2. **Add your OpenAI API Key:**
+   - Name: `OPENAI_API_KEY`
+   - Value: Your OpenAI API key (starts with `sk-...`)
+   - Click "Add secret"
+
+3. **Restart your Space:**
+   - The app will automatically use your API key
+   - The status indicator will show "✅ Chatbot is ready!"
+
+## **Available Models:**
+- **gpt-4o-mini**: Most cost-effective (~$0.15/1M input tokens)
+- **gpt-4o**: Better quality (~$2.50/1M input tokens)  
+- **gpt-4-turbo**: Latest GPT-4 (~$10/1M input tokens)
+- **gpt-4**: Original GPT-4 (~$30/1M input tokens)
+
+## **Cost Monitoring:**
+Monitor your OpenAI usage at: https://platform.openai.com/usage
+
+The app is now updated and securely configured to use your OpenAI API key! Users can start chatting immediately without needing to enter API keys.