Create app.py

app.py

@@ -0,0 +1,708 @@
+"""
+Groq AI Studio Pro - Glassmorphism Edition with Auto-Fallback
+A complete, copy-paste ready tool for Groq API with intelligent model fallback
+Features: Glass UI, Mobile-Responsive, Auto Model Switching, GitHub Integration
+"""
+
+import os
+import json
+import base64
+import requests
+import gradio as gr
+from datetime import datetime
+from typing import Optional, List, Dict, Any, Tuple
+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_REPO - Your repo (format: username/repo-name)
+
+GROQ_API_KEY = os.getenv("GROQ_API_KEY", "")
+GITHUB_TOKEN = os.getenv("GITHUB_TOKEN", "")
+GITHUB_REPO = os.getenv("GITHUB_REPO", "")
+
+# Fallback chain - if selected model fails, try these in order
+MODEL_FALLBACK_CHAIN = [
+    "llama-3.3-70b-versatile",      # Primary workhorse
+    "meta-llama/llama-4-scout-17b-16e-instruct",  # Llama 4 Scout
+    "meta-llama/llama-4-maverick-17b-128e-instruct",  # Llama 4 Maverick
+    "llama-3.1-8b-instant",         # Fast fallback
+    "openai/gpt-oss-120b",          # GPT-OSS large
+    "openai/gpt-oss-20b",           # GPT-OSS small
+    "qwen/qwen3-32b",               # Qwen 3
+    "mixtral-8x7b-32768",           # Legacy fallback
+]
+
+# Default models shown in UI (will be updated dynamically)
+DEFAULT_MODELS = [
+    "llama-3.3-70b-versatile",
+    "meta-llama/llama-4-scout-17b-16e-instruct",
+    "meta-llama/llama-4-maverick-17b-128e-instruct",
+    "llama-3.1-8b-instant",
+    "openai/gpt-oss-120b",
+    "openai/gpt-oss-20b",
+    "deepseek-r1-distill-llama-70b",
+    "qwen/qwen3-32b",
+    "gemma2-9b-it",
+    "mixtral-8x7b-32768",
+    "whisper-large-v3-turbo",
+    "groq/compound",
+]
+
+# ==================== GROQ API CLIENT ====================
+class GroqClient:
+    def __init__(self, api_key: str):
+        self.api_key = api_key
+        self.base_url = "https://api.groq.com/openai/v1"
+        self.headers = {
+            "Authorization": f"Bearer {api_key}",
+            "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"
+        try:
+            response = requests.get(url, headers=self.headers, timeout=10)
+            if response.status_code == 200:
+                data = response.json()
+                models = [m["id"] for m in data.get("data", [])]
+                self.available_models = models
+                return models
+        except Exception as e:
+            print(f"Error fetching models: {e}")
+        return []
+    
+    def chat_completion(
+        self,
+        messages: List[Dict[str, str]],
+        model: str,
+        temperature: float = 0.7,
+        max_tokens: int = 4096,
+        stream: bool = False,
+        retry_with_fallback: bool = True
+    ) -> Tuple[Dict[str, Any], str]:
+        """
+        Send chat completion request with automatic fallback
+        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:
+            # Add remaining fallback chain after the selected model
+            idx = MODEL_FALLBACK_CHAIN.index(model)
+            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,
+                "messages": messages,
+                "temperature": temperature,
+                "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
+
+# ==================== GITHUB INTEGRATION ====================
+class GitHubIntegration:
+    def __init__(self, token: str, repo: str):
+        self.token = token
+        self.repo = repo
+        self.base_url = "https://api.github.com"
+        self.headers = {
+            "Authorization": f"token {token}",
+            "Accept": "application/vnd.github.v3+json"
+        }
+    
+    def commit_file(
+        self,
+        content: str,
+        filename: str,
+        path: str = "groq-studio-sessions",
+        message: Optional[str] = None
+    ) -> Dict[str, str]:
+        """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,
+                "branch": "main"
+            }
+            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",
+                "url": result["content"]["html_url"],
+                "sha": result["content"]["sha"],
+                "path": file_path
+            }
+        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,
+            "public": public,
+            "files": {
+                "groq_session.md": {
+                    "content": content
+                }
+            }
+        }
+        
+        try:
+            resp = requests.post(url, headers=self.headers, json=data)
+            resp.raise_for_status()
+            result = resp.json()
+            return {
+                "status": "success",
+                "url": result["html_url"],
+                "id": result["id"]
+            }
+        except Exception as e:
+            return {"status": "error", "message": str(e)}
+
+# ==================== UI FUNCTIONS ====================
+def refresh_models(api_key: str) -> gr.update:
+    """Refresh available models from API"""
+    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"]
+        sorted_models = []
+        for p in priority:
+            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(
+    message: str,
+    history: List[List[str]],
+    model: str,
+    temperature: float,
+    max_tokens: int,
+    system_prompt: str,
+    api_key: str,
+    auto_fallback: bool
+) -> tuple:
+    """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,
+        model=model,
+        temperature=temperature,
+        max_tokens=max_tokens,
+        retry_with_fallback=auto_fallback
+    )
+    
+    # Update history
+    if "error" in response:
+        error_msg = f"❌ Error: {response['error']}"
+        if "detail" in response:
+            error_msg += f"\n\nDetails: {response['detail']}"
+        history[-1][1] = error_msg
+        status = f"❌ Error with {model_used}"
+    else:
+        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(
+    history: List[List[str]],
+    filename: str,
+    commit_msg: str,
+    github_token: str,
+    github_repo: str
+) -> str:
+    """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:
+        return f"❌ Error: {result['message']}"
+
+def create_gist_export(
+    history: List[List[str]],
+    description: str,
+    github_token: str
+) -> 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:
+        return f"❌ Error: {result['message']}"
+
+def format_conversation(history: List[List[str]]) -> str:
+    """Format chat history as markdown"""
+    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():
+    """Clear chat history"""
+    return [], "", "🔄 Ready"
+
+def debug_request(
+    message: str,
+    history: List[List[str]],
+    model: str,
+    temperature: float,
+    max_tokens: int,
+    system_prompt: str,
+    api_key: str
+) -> str:
+    """Generate debug/curl command"""
+    key = api_key or GROQ_API_KEY
+    
+    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})
+    
+    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
+
+url = "https://api.groq.com/openai/v1/chat/completions"
+headers = {{
+    "Authorization": f"Bearer {{os.getenv('GROQ_API_KEY')}}",
+    "Content-Type": "application/json"
+}}
+
+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 ====================
+CUSTOM_CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+:root {
+    --glass-bg: rgba(20, 20, 30, 0.6);
+    --glass-border: rgba(255, 255, 255, 0.1);
+    --accent-primary: #ff6b6b;
+    --accent-secondary: #4ecdc4;
+    --text-primary: #ffffff;
+    --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+body {
+    font-family: 'Inter', sans-serif !important;
+    background: linear-gradient(-45deg, #0f0c29, #302b63, #24243e, #1a1a2e) !important;
+    background-size: 400% 400% !important;
+    animation: gradientBG 15s ease infinite !important;
+    min-height: 100vh;
+}
+
+@keyframes gradientBG {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+.glass-panel {
+    background: var(--glass-bg) !important;
+    backdrop-filter: blur(20px) !important;
+    -webkit-backdrop-filter: blur(20px) !important;
+    border: 1px solid var(--glass-border) !important;
+    border-radius: 24px !important;
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
+}
+
+.chatbot {
+    background: rgba(0, 0, 0, 0.3) !important;
+    border-radius: 20px !important;
+    border: 1px solid var(--glass-border) !important;
+    height: 600px !important;
+}
+
+.chatbot .message {
+    background: var(--glass-bg) !important;
+    border: 1px solid var(--glass-border) !important;
+    border-radius: 18px !important;
+    margin: 8px 0 !important;
+    padding: 16px !important;
+    backdrop-filter: blur(10px) !important;
+}
+
+.chatbot .message.user {
+    background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3)) !important;
+    border-left: 4px solid #667eea !important;
+}
+
+.chatbot .message.bot {
+    background: linear-gradient(135deg, rgba(78, 205, 196, 0.2), rgba(68, 160, 141, 0.2)) !important;
+    border-left: 4px solid #4ecdc4 !important;
+}
+
+input, textarea, select {
+    background: rgba(0, 0, 0, 0.4) !important;
+    border: 1px solid var(--glass-border) !important;
+    border-radius: 12px !important;
+    color: var(--text-primary) !important;
+    padding: 12px 16px !important;
+}
+
+button {
+    background: var(--gradient-1) !important;
+    border: none !important;
+    border-radius: 12px !important;
+    color: white !important;
+    font-weight: 600 !important;
+    padding: 12px 24px !important;
+    transition: all 0.3s ease !important;
+}
+
+button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4) !important;
+}
+
+.status-bar {
+    background: rgba(0, 0, 0, 0.5) !important;
+    border-radius: 8px !important;
+    padding: 8px 16px !important;
+    font-size: 12px !important;
+    color: #4ecdc4 !important;
+    border: 1px solid var(--glass-border) !important;
+}
+
+@media (max-width: 768px) {
+    .glass-panel { border-radius: 16px !important; margin: 8px !important; }
+    .chatbot { height: 400px !important; }
+    button { padding: 10px 16px !important; font-size: 14px !important; }
+}
+"""
+
+# ==================== GRADIO INTERFACE ====================
+def create_interface():
+    with gr.Blocks(css=CUSTOM_CSS, title="Groq AI Studio Pro") as demo:
+        
+        # Header
+        with gr.Row():
+            with gr.Column():
+                gr.HTML("""
+                    <div class="glass-panel" style="text-align: center; padding: 20px; margin-bottom: 20px;">
+                        <h1 style="background: linear-gradient(135deg, #fff 0%, #a8edea 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; margin: 0;">
+                            ⚡ Groq AI Studio Pro
+                        </h1>
+                        <p style="color: #b0b0b0; margin-top: 8px;">
+                            <span style="color: #4ecdc4;">●</span> Auto-Fallback Enabled | Glass UI | GitHub Integration
+                        </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"):
+                    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)",
+                            label="",
+                            scale=4,
+                            show_label=False,
+                            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",
+                        label="",
+                        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",
+                            placeholder="gsk_...",
+                            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,
+                            value=DEFAULT_MODELS[0],
+                            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():
+                gr.Markdown("### Export to GitHub")
+                export_filename = gr.Textbox(label="Filename", value="session.md")
+                export_message = gr.Textbox(label="Commit Message", value="Update from Groq Studio")
+                with gr.Row():
+                    commit_btn = gr.Button("📥 Commit to Repo", variant="primary")
+                    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;">
+                <p>Powered by Groq API | Auto-Fallback: Llama 3.3 → Llama 4 → GPT-OSS → Qwen | 
+                <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)