Create app.py

app.py

@@ -0,0 +1,426 @@
+import gradio as gr
+import requests
+import os
+import json
+from typing import List, Dict, Optional
+import time
+import subprocess
+import tempfile
+import sys
+import io
+import contextlib
+
+class OpenRouterCodingAgent:
+    def __init__(self):
+        # Get API key from environment variable or Hugging Face Secrets
+        self.api_key = os.getenv("OPENROUTER_API_KEY")
+        self.base_url = "https://openrouter.ai/api/v1/chat/completions"
+        
+        # Free coding models (good for code generation)
+        self.free_models = [
+            "agentica-org/deepcoder-14b-preview:free",
+            "arliai/qwq-32b-arliai-rpr-v1:free",
+            "cognitivecomputations/dolphin3.0-mistral-24b:free",
+            "cognitivecomputations/dolphin3.0-r1-mistral-24b:free",
+            "deepseek/deepseek-chat-v3-0324:free",
+            "deepseek/deepseek-chat:free",
+            "deepseek/deepseek-r1-0528-qwen3-8b:free",
+            "deepseek/deepseek-r1-0528:free",
+            "deepseek/deepseek-r1-distill-llama-70b:free",
+            "deepseek/deepseek-r1-distill-qwen-14b:free",
+            "deepseek/deepseek-r1:free",
+            "deepseek/deepseek-v3-base:free",
+            "featherless/qwerky-72b:free",
+            "google/gemini-2.0-flash-exp:free",
+            "google/gemini-2.5-pro-exp-03-25",
+            "google/gemma-2-9b-it:free",
+            "google/gemma-3-12b-it:free",
+            "google/gemma-3-27b-it:free",
+            "google/gemma-3-4b-it:free",
+            "google/gemma-3n-e4b-it:free",
+            "meta-llama/llama-3.1-8b-instruct:free",
+            "meta-llama/llama-3.2-11b-vision-instruct:free",
+            "meta-llama/llama-3.2-1b-instruct:free",
+            "meta-llama/llama-3.3-70b-instruct:free",
+            "meta-llama/llama-4-maverick:free",
+            "meta-llama/llama-4-scout:free",
+            "microsoft/mai-ds-r1:free",
+            "mistralai/devstral-small:free",
+            "mistralai/mistral-7b-instruct:free",
+            "mistralai/mistral-nemo:free",
+            "mistralai/mistral-small-24b-instruct-2501:free",
+            "mistralai/mistral-small-3.1-24b-instruct:free",
+            "mistralai/mistral-small-3.2-24b-instruct:free",
+            "moonshotai/kimi-dev-72b:free",
+            "moonshotai/kimi-vl-a3b-thinking:free",
+            "nousresearch/deephermes-3-llama-3-8b-preview:free",
+            "nvidia/llama-3.1-nemotron-ultra-253b-v1:free",
+            "nvidia/llama-3.3-nemotron-super-49b-v1:free",
+            "qwen/qwen-2.5-72b-instruct:free",
+            "qwen/qwen-2.5-coder-32b-instruct:free",
+            "qwen/qwen2.5-vl-32b-instruct:free",
+            "qwen/qwen2.5-vl-72b-instruct:free",
+            "qwen/qwen3-14b:free",
+            "qwen/qwen3-235b-a22b:free",
+            "qwen/qwen3-30b-a3b:free",
+            "qwen/qwen3-32b:free",
+            "qwen/qwen3-8b:free",
+            "qwen/qwq-32b:free",
+            "rekaai/reka-flash-3:free",
+            "sarvamai/sarvam-m:free",
+            "shisa-ai/shisa-v2-llama3.3-70b:free",
+            "thudm/glm-4-32b:free",
+            "thudm/glm-z1-32b:free",
+            "tngtech/deepseek-r1t-chimera:free",
+        ]
+        
+        # Set default model (DeepSeek is excellent for coding)
+        self.default_model = "deepseek/deepseek-r1:free"
+        
+        print(f"✅ Coding Agent ready with {len(self.free_models)} free models")
+    
+    def get_clean_model_choices(self):
+        """Get model choices with clean names for display"""
+        choices = []
+        for model in self.free_models:
+            clean_name = model.replace(":free", "")
+            choices.append((clean_name, model))
+        return choices
+    
+    def make_request(self, messages: List[Dict], model: str, temperature: float = 0.7) -> str:
+        """Make a request to OpenRouter API"""
+        if not self.api_key:
+            return "❌ Error: OpenRouter API key not configured."
+        
+        headers = {
+            "Authorization": f"Bearer {self.api_key}",
+            "Content-Type": "application/json",
+            "HTTP-Referer": "https://huggingface.co/spaces",
+            "X-Title": "Free Coding Agent via OpenRouter"
+        }
+        
+        data = {
+            "model": model,
+            "messages": messages,
+            "temperature": temperature,
+            "max_tokens": 2000,
+            "stream": False
+        }
+        
+        try:
+            response = requests.post(self.base_url, headers=headers, json=data, timeout=60)
+            response.raise_for_status()
+            result = response.json()
+            
+            if 'choices' in result and len(result['choices']) > 0:
+                return result['choices'][0]['message']['content']
+            else:
+                return "❌ Error: No response generated"
+                
+        except Exception as e:
+            return f"❌ Error: {str(e)}"
+
+# Initialize the coding agent
+coding_agent = OpenRouterCodingAgent()
+
+def execute_python_code(code: str) -> str:
+    """Execute Python code safely and return output"""
+    if not code.strip():
+        return ""
+    
+    # Create string buffer to capture output
+    output = io.StringIO()
+    
+    try:
+        # Redirect stdout to capture print statements
+        with contextlib.redirect_stdout(output):
+            # Execute the code
+            exec(code)
+        
+        result = output.getvalue()
+        return result if result else "✅ Code executed successfully (no output)"
+        
+    except Exception as e:
+        return f"❌ Error: {str(e)}"
+
+def create_web_preview(html: str, css: str, js: str) -> str:
+    """Create a complete HTML page with CSS and JS"""
+    return f"""
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Live Preview</title>
+    <style>
+        body {{
+            margin: 0;
+            padding: 20px;
+            font-family: Arial, sans-serif;
+        }}
+        {css}
+    </style>
+</head>
+<body>
+    {html}
+    <script>
+        {js}
+    </script>
+</body>
+</html>
+"""
+
+def generate_code(prompt: str, model: str, code_type: str, current_code: str = "") -> str:
+    """Generate code using OpenRouter API"""
+    system_prompts = {
+        "html": "You are an expert HTML developer. Generate clean, semantic HTML code based on the user's request. Only return the HTML code, no explanations.",
+        "css": "You are an expert CSS developer. Generate modern, responsive CSS code based on the user's request. Only return the CSS code, no explanations.",
+        "javascript": "You are an expert JavaScript developer. Generate clean, modern JavaScript code based on the user's request. Only return the JavaScript code, no explanations.",
+        "python": "You are an expert Python developer. Generate clean, working Python code based on the user's request. Only return the Python code, no explanations."
+    }
+    
+    context = f"\nCurrent {code_type} code:\n```{code_type}\n{current_code}\n```\n" if current_code.strip() else ""
+    
+    messages = [
+        {"role": "system", "content": system_prompts.get(code_type, "You are a helpful coding assistant.")},
+        {"role": "user", "content": f"{prompt}{context}"}
+    ]
+    
+    response = coding_agent.make_request(messages, model)
+    
+    # Clean up the response to extract just the code
+    if "```" in response:
+        # Extract code from markdown code blocks
+        parts = response.split("```")
+        for i, part in enumerate(parts):
+            if i % 2 == 1:  # Odd indices are code blocks
+                # Remove language identifier if present
+                lines = part.strip().split('\n')
+                if lines[0].strip() in ['html', 'css', 'javascript', 'js', 'python', 'py']:
+                    return '\n'.join(lines[1:])
+                return part.strip()
+    
+    return response.strip()
+
+def chat_with_agent(message: str, history: List, model: str) -> tuple:
+    """Chat with the coding agent"""
+    if not message.strip():
+        return history, ""
+    
+    messages = [
+        {"role": "system", "content": "You are a helpful coding assistant. Help users with programming questions, debugging, and code explanations."}
+    ]
+    
+    # Add conversation history
+    for user_msg, assistant_msg in history:
+        if user_msg:
+            messages.append({"role": "user", "content": user_msg})
+        if assistant_msg:
+            messages.append({"role": "assistant", "content": assistant_msg})
+    
+    # Add current message
+    messages.append({"role": "user", "content": message})
+    
+    # Get response
+    response = coding_agent.make_request(messages, model, temperature=0.7)
+    
+    # Add to history
+    history.append((message, response))
+    return history, ""
+
+# Create the Gradio interface
+with gr.Blocks(
+    title="Free Coding Agent - CodePen Style",
+    theme=gr.themes.Soft(),
+    css="""
+    .code-container { font-family: 'Courier New', monospace; }
+    .preview-container { border: 1px solid #ddd; border-radius: 8px; }
+    .main-header { text-align: center; margin-bottom: 2em; }
+    """) as demo:
+    
+    gr.HTML("""
+    <div class="main-header">
+        <h1>🚀 Free Coding Agent</h1>
+        <p>CodePen-style environment with AI assistance</p>
+        <p style="color: #22c55e; font-weight: bold;">✨ Generate, edit, and run code with AI help!</p>
+    </div>
+    """)
+    
+    with gr.Row():
+        # Left Panel - Code Editors and AI
+        with gr.Column(scale=1):
+            gr.Markdown("### 🤖 AI Coding Assistant")
+            
+            model_dropdown = gr.Dropdown(
+                choices=coding_agent.get_clean_model_choices(),
+                value=coding_agent.default_model,
+                label="AI Model",
+                info="Choose your coding AI"
+            )
+            
+            # AI Chat Interface
+            with gr.Accordion("💬 Chat with AI", open=True):
+                chatbot = gr.Chatbot(height=300, show_label=False)
+                chat_input = gr.Textbox(
+                    placeholder="Ask the AI about coding, debugging, or request code generation...",
+                    show_label=False
+                )
+                chat_btn = gr.Button("Send", variant="primary")
+            
+            # Code Generation Tools
+            gr.Markdown("### 🛠️ Code Generation")
+            
+            code_type = gr.Radio(
+                choices=["html", "css", "javascript", "python"],
+                value="html",
+                label="Code Type"
+            )
+            
+            code_prompt = gr.Textbox(
+                placeholder="Describe what you want to generate...",
+                label="Code Request",
+                lines=2
+            )
+            
+            generate_btn = gr.Button("🎯 Generate Code", variant="secondary")
+            
+        # Right Panel - Code Editors
+        with gr.Column(scale=2):
+            gr.Markdown("### 📝 Code Editors")
+            
+            with gr.Tabs():
+                with gr.Tab("HTML"):
+                    html_code = gr.Code(
+                        value="<h1>Hello World!</h1>\n<p>Start coding here...</p>",
+                        language="html",
+                        label="HTML",
+                        lines=15
+                    )
+                
+                with gr.Tab("CSS"):
+                    css_code = gr.Code(
+                        value="body {\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n    color: white;\n    text-align: center;\n    padding: 50px;\n}",
+                        language="css",
+                        label="CSS",
+                        lines=15
+                    )
+                
+                with gr.Tab("JavaScript"):
+                    js_code = gr.Code(
+                        value="console.log('Hello from JavaScript!');\n\n// Add your JavaScript here",
+                        language="javascript",
+                        label="JavaScript",
+                        lines=15
+                    )
+                
+                with gr.Tab("Python"):
+                    python_code = gr.Code(
+                        value="print('Hello from Python!')\n\n# Add your Python code here",
+                        language="python",
+                        label="Python",
+                        lines=15
+                    )
+    
+    with gr.Row():
+        # Preview Panel
+        with gr.Column():
+            gr.Markdown("### 🌐 Live Preview")
+            
+            with gr.Tabs():
+                with gr.Tab("Web Preview"):
+                    web_preview = gr.HTML(
+                        value=create_web_preview(
+                            "<h1>Hello World!</h1><p>Start coding here...</p>",
+                            "body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-align: center; padding: 50px; }",
+                            "console.log('Hello from JavaScript!');"
+                        ),
+                        label="Preview"
+                    )
+                    
+                    update_preview_btn = gr.Button("🔄 Update Preview", variant="primary")
+                
+                with gr.Tab("Python Output"):
+                    python_output = gr.Code(
+                        value="",
+                        language="text",
+                        label="Python Output",
+                        lines=10
+                    )
+                    
+                    run_python_btn = gr.Button("▶️ Run Python", variant="primary")
+    
+    # Event Handlers
+    def update_preview(html, css, js):
+        return create_web_preview(html, css, js)
+    
+    def run_python(code):
+        return execute_python_code(code)
+    
+    def generate_code_handler(prompt, model, code_type, html, css, js, python):
+        current_code = {
+            "html": html,
+            "css": css, 
+            "javascript": js,
+            "python": python
+        }.get(code_type, "")
+        
+        generated = generate_code(prompt, model, code_type, current_code)
+        
+        if code_type == "html":
+            return generated, css, js, python
+        elif code_type == "css":
+            return html, generated, js, python
+        elif code_type == "javascript":
+            return html, css, generated, python
+        elif code_type == "python":
+            return html, css, js, generated
+        
+        return html, css, js, python
+    
+    # Connect event handlers
+    chat_btn.click(
+        chat_with_agent,
+        inputs=[chat_input, chatbot, model_dropdown],
+        outputs=[chatbot, chat_input]
+    )
+    
+    chat_input.submit(
+        chat_with_agent,
+        inputs=[chat_input, chatbot, model_dropdown],
+        outputs=[chatbot, chat_input]
+    )
+    
+    update_preview_btn.click(
+        update_preview,
+        inputs=[html_code, css_code, js_code],
+        outputs=[web_preview]
+    )
+    
+    run_python_btn.click(
+        run_python,
+        inputs=[python_code],
+        outputs=[python_output]
+    )
+    
+    generate_btn.click(
+        generate_code_handler,
+        inputs=[code_prompt, model_dropdown, code_type, html_code, css_code, js_code, python_code],
+        outputs=[html_code, css_code, js_code, python_code]
+    )
+    
+    # Auto-update preview when code changes
+    for code_input in [html_code, css_code, js_code]:
+        code_input.change(
+            update_preview,
+            inputs=[html_code, css_code, js_code],
+            outputs=[web_preview]
+        )
+
+# Launch the app
+if __name__ == "__main__":
+    demo.launch(
+        share=False,
+        server_name="0.0.0.0",
+        server_port=7861,  # Different port to avoid conflicts
+        show_error=True
+    )