🚀 Free Coding Agent
CodePen-style environment with AI assistance
✨ Generate, edit, and run code with AI help!
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"""
CodePen-style environment with AI assistance
✨ Generate, edit, and run code with AI help!
Start coding here...
", 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( "Start coding here...
", "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.Textbox( value="", label="Python Output", lines=10, max_lines=20, interactive=False ) 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", show_error=True )