Update app.py

app.py

@@ -16,7 +16,7 @@ from functools import lru_cache
 # ==================== CONFIGURATION ====================
 # Set these environment variables:
 # GROQ_API_KEY - Your Groq API key
-# GITHUB_TOKEN - Your GitHub Personal Access Token  
+# GITHUB_TOKEN - Your GitHub Personal Access Token
 # GITHUB_REPO - Your repo (format: username/repo-name)
 
 GROQ_API_KEY = os.getenv("GROQ_API_KEY", "")
@@ -61,7 +61,7 @@ class GroqClient:
             "Content-Type": "application/json"
         }
         self.available_models = []
-    
+
     def fetch_models(self) -> List[str]:
         """Fetch available models from Groq API"""
         url = f"{self.base_url}/models"
@@ -75,7 +75,7 @@ class GroqClient:
         except Exception as e:
             print(f"Error fetching models: {e}")
         return []
-    
+
     def chat_completion(
         self,
         messages: List[Dict[str, str]],
@@ -90,7 +90,7 @@ class GroqClient:
         Returns: (response_dict, model_used)
         """
         url = f"{self.base_url}/chat/completions"
-        
+
         # Determine which models to try
         models_to_try = [model]
         if retry_with_fallback and model in MODEL_FALLBACK_CHAIN:
@@ -99,9 +99,9 @@ class GroqClient:
             models_to_try.extend(MODEL_FALLBACK_CHAIN[idx+1:])
         elif retry_with_fallback:
             models_to_try.extend(MODEL_FALLBACK_CHAIN)
-        
+
         last_error = None
-        
+
         for try_model in models_to_try:
             payload = {
                 "model": try_model,
@@ -110,30 +110,30 @@ class GroqClient:
                 "max_completion_tokens": max_tokens,
                 "stream": stream
             }
-            
+
             try:
                 response = requests.post(url, headers=self.headers, json=payload, timeout=60)
-                
+
                 if response.status_code == 200:
                     return response.json(), try_model
-                
+
                 # Handle specific errors
                 error_data = response.json() if response.text else {}
                 error_msg = error_data.get("error", {}).get("message", "")
-                
+
                 # If model not found, try next
                 if "model_not_found" in error_msg or "does not exist" in error_msg:
                     print(f"Model {try_model} not available, trying fallback...")
                     last_error = f"{try_model}: {error_msg}"
                     continue
-                
+
                 # For other errors, return immediately
                 return {"error": error_msg or f"HTTP {response.status_code}", "detail": response.text}, try_model
-                
+
             except requests.exceptions.RequestException as e:
                 last_error = str(e)
                 continue
-        
+
         # All models failed
         return {"error": f"All models failed. Last error: {last_error}"}, model
 
@@ -147,7 +147,7 @@ class GitHubIntegration:
             "Authorization": f"token {token}",
             "Accept": "application/vnd.github.v3+json"
         }
-    
+
     def commit_file(
         self,
         content: str,
@@ -158,20 +158,20 @@ class GitHubIntegration:
         """Commit a file to GitHub repository"""
         if not self.token or not self.repo:
             return {"status": "error", "message": "GitHub credentials not configured"}
-        
+
         timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
         full_filename = f"{timestamp}_{filename}"
         file_path = f"{path}/{full_filename}"
-        
+
         content_bytes = content.encode('utf-8')
         content_b64 = base64.b64encode(content_bytes).decode('utf-8')
-        
+
         check_url = f"{self.base_url}/repos/{self.repo}/contents/{file_path}"
-        
+
         try:
             check_resp = requests.get(check_url, headers=self.headers)
             sha = check_resp.json().get("sha") if check_resp.status_code == 200 else None
-            
+
             data = {
                 "message": message or f"Update from Groq Studio - {timestamp}",
                 "content": content_b64,
@@ -179,10 +179,10 @@ class GitHubIntegration:
             }
             if sha:
                 data["sha"] = sha
-            
+
             resp = requests.put(check_url, headers=self.headers, json=data)
             resp.raise_for_status()
-            
+
             result = resp.json()
             return {
                 "status": "success",
@@ -192,12 +192,12 @@ class GitHubIntegration:
             }
         except Exception as e:
             return {"status": "error", "message": str(e)}
-    
+
     def create_gist(self, content: str, description: str = "Groq Studio Export", public: bool = False) -> Dict[str, str]:
         """Create a GitHub Gist"""
         if not self.token:
             return {"status": "error", "message": "GitHub token not configured"}
-        
+
         url = f"{self.base_url}/gists"
         data = {
             "description": description,
@@ -208,7 +208,7 @@ class GitHubIntegration:
                 }
             }
         }
-        
+
         try:
             resp = requests.post(url, headers=self.headers, json=data)
             resp.raise_for_status()
@@ -227,10 +227,10 @@ def refresh_models(api_key: str) -> gr.update:
     key = api_key or GROQ_API_KEY
     if not key:
         return gr.update(choices=DEFAULT_MODELS, value=DEFAULT_MODELS[0])
-    
+
     client = GroqClient(key)
     models = client.fetch_models()
-    
+
     if models:
         # Prioritize common models at top
         priority = ["llama-3.3-70b-versatile", "meta-llama/llama-4", "gpt-oss", "qwen", "llama-3.1"]
@@ -239,7 +239,7 @@ def refresh_models(api_key: str) -> gr.update:
             sorted_models.extend([m for m in models if p in m and m not in sorted_models])
         sorted_models.extend([m for m in models if m not in sorted_models])
         return gr.update(choices=sorted_models, value=sorted_models[0])
-    
+
     return gr.update(choices=DEFAULT_MODELS, value=DEFAULT_MODELS[0])
 
 def process_chat(
@@ -255,26 +255,26 @@ def process_chat(
     """Process chat message with Groq API and auto-fallback"""
     if not api_key and not GROQ_API_KEY:
         return history + [[message, "❌ Error: Please provide a Groq API Key in settings or environment variable."]], "", "⚠️ No API Key"
-    
+
     key = api_key or GROQ_API_KEY
     client = GroqClient(key)
-    
+
     # Build messages
     messages = []
     if system_prompt:
         messages.append({"role": "system", "content": system_prompt})
-    
+
     for human, assistant in history:
         messages.append({"role": "user", "content": human})
         if assistant:
             messages.append({"role": "assistant", "content": assistant})
-    
+
     messages.append({"role": "user", "content": message})
-    
+
     # Show typing indicator
     history = history + [[message, "⏳ Thinking..."]]
     yield history, "", f"🔄 Using {model}..."
-    
+
     # Get response with fallback
     response, model_used = client.chat_completion(
         messages=messages,
@@ -283,7 +283,7 @@ def process_chat(
         max_tokens=max_tokens,
         retry_with_fallback=auto_fallback
     )
-    
+
     # Update history
     if "error" in response:
         error_msg = f"❌ Error: {response['error']}"
@@ -295,19 +295,19 @@ def process_chat(
         try:
             content = response["choices"][0]["message"]["content"]
             usage = response.get("usage", {})
-            
+
             # Add model info footer
             fallback_notice = ""
             if model_used != model:
                 fallback_notice = f" (⚠️ Fallback from {model})"
-            
+
             info = f"\n\n---\n*Model: {model_used}{fallback_notice} | Tokens: {usage.get('total_tokens', 'N/A')}*"
             history[-1][1] = content + info
             status = f"✅ Success with {model_used}" + (" (fallback)" if model_used != model else "")
         except Exception as e:
             history[-1][1] = f"❌ Error parsing response: {str(e)}"
             status = f"❌ Parse Error"
-    
+
     yield history, "", status
 
 def export_to_github(
@@ -320,14 +320,14 @@ def export_to_github(
     """Export chat history to GitHub"""
     token = github_token or GITHUB_TOKEN
     repo = github_repo or GITHUB_REPO
-    
+
     if not token or not repo:
         return "❌ Error: GitHub token and repo not configured."
-    
+
     content = format_conversation(history)
     gh = GitHubIntegration(token, repo)
     result = gh.commit_file(content, filename or "session.md", message=commit_msg)
-    
+
     if result["status"] == "success":
         return f"✅ Committed successfully!\n\n🔗 [View on GitHub]({result['url']})"
     else:
@@ -340,14 +340,14 @@ def create_gist_export(
 ) -> str:
     """Export as GitHub Gist"""
     token = github_token or GITHUB_TOKEN
-    
+
     if not token:
         return "❌ Error: GitHub token not configured."
-    
+
     content = format_conversation(history)
     gh = GitHubIntegration(token, "")
     result = gh.create_gist(content, description)
-    
+
     if result["status"] == "success":
         return f"✅ Gist created!\n\n🔗 [View Gist]({result['url']})"
     else:
@@ -358,14 +358,14 @@ def format_conversation(history: List[List[str]]) -> str:
     content = "# Groq Studio Session\n\n"
     content += f"**Date:** {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}\n\n"
     content += "## Conversation\n\n"
-    
+
     for i, (human, assistant) in enumerate(history, 1):
         if not assistant or assistant == "⏳ Thinking...":
             continue
         content += f"### Turn {i}\n\n"
         content += f"**User:**\n{human}\n\n"
         content += f"**Assistant:**\n{assistant}\n\n---\n\n"
-    
+
     return content
 
 def clear_chat():
@@ -383,7 +383,7 @@ def debug_request(
 ) -> str:
     """Generate debug/curl command"""
     key = api_key or GROQ_API_KEY
-    
+
     messages = []
     if system_prompt:
         messages.append({"role": "system", "content": system_prompt})
@@ -392,19 +392,19 @@ def debug_request(
         if assistant:
             messages.append({"role": "assistant", "content": assistant})
     messages.append({"role": "user", "content": message})
-    
+
     payload = {
         "model": model,
         "messages": messages,
         "temperature": temperature,
         "max_completion_tokens": max_tokens
     }
-    
+
     curl_cmd = f"""curl -X POST https://api.groq.com/openai/v1/chat/completions \\
   -H "Authorization: Bearer {key[:10]}...{key[-4:] if len(key) > 14 else ''}" \\
   -H "Content-Type: application/json" \\
   -d '{json.dumps(payload, indent=2)}'"""
-    
+
     python_code = f"""import requests
 import json
 import os
@@ -420,7 +420,7 @@ payload = {json.dumps(payload, indent=2)}
 response = requests.post(url, headers=headers, json=payload)
 print(f"Status: {{response.status_code}}")
 print(f"Response: {{response.text}}")"""
-    
+
     return f"## cURL Command\n```bash\n{curl_cmd}\n```\n\n## Python Code\n```python\n{python_code}\n```"
 
 # ==================== CUSTOM CSS ====================
@@ -526,8 +526,9 @@ button:hover {
 
 # ==================== GRADIO INTERFACE ====================
 def create_interface():
-    with gr.Blocks(css=CUSTOM_CSS, title="Groq AI Studio Pro") as demo:
-        
+    # FIX: Removed css parameter from Blocks constructor
+    with gr.Blocks(title="Groq AI Studio Pro") as demo:
+
         # Header
         with gr.Row():
             with gr.Column():
@@ -541,21 +542,21 @@ def create_interface():
                         </p>
                     </div>
                 """)
-        
+
         # State
         state_history = gr.State([])
-        
+
         with gr.Row():
             # Left Panel - Chat
             with gr.Column(scale=3):
                 with gr.Group(elem_classes="glass-panel"):
+                    # FIX: Removed bubble_full_width parameter
                     chatbot = gr.Chatbot(
                         label="Conversation",
                         elem_classes="chatbot",
-                        bubble_full_width=False,
                         show_copy_button=True
                     )
-                    
+
                     with gr.Row():
                         msg_input = gr.Textbox(
                             placeholder="Type your message here... (Shift+Enter for new line)",
@@ -565,12 +566,12 @@ def create_interface():
                             lines=1
                         )
                         send_btn = gr.Button("Send ➤", scale=1, variant="primary")
-                    
+
                     with gr.Row():
                         clear_btn = gr.Button("🗑️ Clear", variant="secondary")
                         debug_btn = gr.Button("🔧 Debug", variant="secondary")
                         export_btn = gr.Button("📤 Export", variant="secondary")
-                    
+
                     # Status bar
                     status_text = gr.Textbox(
                         value="🔄 Ready",
@@ -578,12 +579,12 @@ def create_interface():
                         interactive=False,
                         elem_classes="status-bar"
                     )
-            
+
             # Right Panel - Settings
             with gr.Column(scale=1):
                 with gr.Group(elem_classes="glass-panel"):
                     gr.Markdown("### ⚙️ Configuration")
-                    
+
                     with gr.Accordion("🔑 API Settings", open=False):
                         api_key_input = gr.Textbox(
                             label="Groq API Key",
@@ -591,20 +592,20 @@ def create_interface():
                             type="password",
                             value=GROQ_API_KEY
                         )
-                        
+
                         github_token_input = gr.Textbox(
                             label="GitHub Token",
                             placeholder="ghp_...",
                             type="password",
                             value=GITHUB_TOKEN
                         )
-                        
+
                         github_repo_input = gr.Textbox(
                             label="GitHub Repo",
                             placeholder="username/repo",
                             value=GITHUB_REPO
                         )
-                    
+
                     with gr.Row():
                         model_dropdown = gr.Dropdown(
                             choices=DEFAULT_MODELS,
@@ -612,30 +613,30 @@ def create_interface():
                             label="Model"
                         )
                         refresh_btn = gr.Button("🔄", size="sm")
-                    
+
                     auto_fallback = gr.Checkbox(
                         label="Auto-Fallback if Model Fails",
                         value=True,
                         info="Automatically try backup models"
                     )
-                    
+
                     system_prompt = gr.Textbox(
                         label="System Prompt",
                         placeholder="You are a helpful assistant...",
                         lines=3,
                         value="You are a helpful, creative AI assistant powered by Groq. Respond concisely but thoroughly."
                     )
-                    
+
                     with gr.Row():
                         temperature = gr.Slider(0, 2, value=0.7, label="Temperature")
                         max_tokens = gr.Slider(100, 8192, value=4096, label="Max Tokens")
-        
+
         # Debug Modal
         with gr.Row(visible=False) as debug_row:
             with gr.Column():
                 debug_output = gr.Code(label="Debug Request", language="python")
                 close_debug = gr.Button("Close")
-        
+
         # Export Modal
         with gr.Row(visible=False) as export_row:
             with gr.Column():
@@ -647,51 +648,51 @@ def create_interface():
                     gist_btn = gr.Button("📄 Create Gist")
                 export_result = gr.Markdown()
                 close_export = gr.Button("Close")
-        
+
         # Event Handlers
         refresh_btn.click(
             refresh_models,
             [api_key_input],
             [model_dropdown]
         )
-        
+
         send_event = msg_input.submit(
             process_chat,
             [msg_input, chatbot, model_dropdown, temperature, max_tokens, system_prompt, api_key_input, auto_fallback],
             [chatbot, msg_input, status_text]
         )
-        
+
         send_btn.click(
             process_chat,
             [msg_input, chatbot, model_dropdown, temperature, max_tokens, system_prompt, api_key_input, auto_fallback],
             [chatbot, msg_input, status_text]
         )
-        
+
         clear_btn.click(clear_chat, outputs=[chatbot, state_history, status_text])
-        
+
         debug_btn.click(
             debug_request,
             [msg_input, chatbot, model_dropdown, temperature, max_tokens, system_prompt, api_key_input],
             [debug_output]
         ).then(lambda: gr.update(visible=True), outputs=[debug_row])
-        
+
         close_debug.click(lambda: gr.update(visible=False), outputs=[debug_row])
-        
+
         export_btn.click(lambda: gr.update(visible=True), outputs=[export_row])
         close_export.click(lambda: gr.update(visible=False), outputs=[export_row])
-        
+
         commit_btn.click(
             export_to_github,
             [state_history, export_filename, export_message, github_token_input, github_repo_input],
             [export_result]
         )
-        
+
         gist_btn.click(
             create_gist_export,
             [state_history, export_message, github_token_input],
             [export_result]
         )
-        
+
         # Footer
         gr.HTML("""
             <div style="text-align: center; padding: 20px; color: #666; font-size: 12px;">
@@ -699,10 +700,11 @@ def create_interface():
                 <a href="https://console.groq.com" target="_blank" style="color: #4ecdc4;">Get API Key</a></p>
             </div>
         """)
-    
+
     return demo
 
 # Launch
 if __name__ == "__main__":
     demo = create_interface()
-    demo.launch(server_name="0.0.0.0", server_port=7860)
+    # FIX: Moved CSS to launch() method
+    demo.launch(server_name="0.0.0.0", server_port=7860, css=CUSTOM_CSS)