Upload 3 files

app.css

@@ -0,0 +1,186 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  line-height: 1.6;
+  color: #1e293b;
+  background: #f8fafc;
+}
+
+/* Custom scrollbar styles */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f5f9;
+  border-radius: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 8px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+/* Loading animation */
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+/* Code syntax highlighting in preview */
+pre code {
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+}
+
+/* Gradient text utilities */
+.gradient-text {
+  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Glass morphism effect for cards */
+.glass-card {
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* Button hover effects */
+.btn-gradient {
+  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+  transition: all 0.3s ease;
+}
+
+.btn-gradient:hover {
+  background: linear-gradient(135deg, #2563eb, #7c3aed);
+  transform: translateY(-1px);
+  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
+}
+
+/* Iframe responsive wrapper */
+.iframe-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 8px;
+}
+
+/* Status indicators */
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: 8px;
+}
+
+.status-generating {
+  background: #f59e0b;
+  animation: pulse 2s infinite;
+}
+
+.status-complete {
+  background: #10b981;
+}
+
+.status-error {
+  background: #ef4444;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+/* File type badges */
+.file-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  background: #e2e8f0;
+  color: #475569;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.file-badge.html { background: #fef3c7; color: #92400e; }
+.file-badge.jsx { background: #dbeafe; color: #1e40af; }
+.file-badge.css { background: #dcfce7; color: #166534; }
+.file-badge.js { background: #fef3c7; color: #92400e; }
+
+/* Preview loading state */
+.preview-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #64748b;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .container {
+    padding: 16px;
+  }
+  
+  .grid.lg\\:grid-cols-2 {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Toast styling (works with sonner) */
+.toast-container {
+  font-family: 'Inter', sans-serif;
+}
+
+/* Code block styling */
+.code-block {
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  background: #1e293b;
+  color: #e2e8f0;
+  padding: 16px;
+  border-radius: 8px;
+  overflow-x: auto;
+}
+
+/* Smooth transitions for all interactive elements */
+button, .btn, input, textarea, select {
+  transition: all 0.2s ease;
+}
+
+/* Focus states */
+input:focus, textarea:focus, select:focus {
+  outline: none;
+  ring: 2px solid #3b82f6;
+  border-color: #3b82f6;
+}
+
+/* Custom selection */
+::selection {
+  background: #3b82f6;
+  color: white;
+}

requirements.txt (1)

@@ -0,0 +1,69 @@
+annotated-types==0.7.0
+anyio==4.10.0
+black==25.1.0
+boto3==1.40.30
+botocore==1.40.30
+certifi==2025.8.3
+cffi==2.0.0
+charset-normalizer==3.4.3
+click==8.2.1
+cryptography==45.0.7
+dnspython==2.8.0
+ecdsa==0.19.1
+email-validator==2.3.0
+fastapi==0.110.1
+flake8==7.3.0
+h11==0.16.0
+httpcore==1.0.9
+httpx==0.28.1
+idna==3.10
+iniconfig==2.1.0
+isort==6.0.1
+jmespath==1.0.1
+jq==1.10.0
+markdown-it-py==4.0.0
+mccabe==0.7.0
+mdurl==0.1.2
+motor==3.3.1
+mypy==1.18.1
+mypy_extensions==1.1.0
+numpy==2.3.3
+oauthlib==3.3.1
+packaging==25.0
+pandas==2.3.2
+passlib==1.7.4
+pathspec==0.12.1
+platformdirs==4.4.0
+pluggy==1.6.0
+pyasn1==0.6.1
+pycodestyle==2.14.0
+pycparser==2.23
+pydantic==2.11.7
+pydantic_core==2.33.2
+pyflakes==3.4.0
+Pygments==2.19.2
+PyJWT==2.10.1
+pymongo==4.5.0
+pytest==8.4.2
+python-dateutil==2.9.0.post0
+python-dotenv==1.1.1
+python-jose==3.5.0
+python-multipart==0.0.20
+pytz==2025.2
+requests==2.32.5
+requests-oauthlib==2.0.0
+rich==14.1.0
+rsa==4.9.1
+s3transfer==0.14.0
+s5cmd==0.2.0
+shellingham==1.5.4
+six==1.17.0
+sniffio==1.3.1
+starlette==0.37.2
+typer==0.17.4
+typing-inspection==0.4.1
+typing_extensions==4.15.0
+tzdata==2025.2
+urllib3==2.5.0
+uvicorn==0.25.0
+watchfiles==1.1.0

server.py (1)

@@ -0,0 +1,266 @@
+import os
+import re
+import json
+import asyncio
+import zipfile
+import io
+from typing import Dict, Any, List, Optional
+from dotenv import load_dotenv
+
+from fastapi import FastAPI, HTTPException, Request
+from fastapi.responses import StreamingResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel
+import httpx
+
+# Load environment variables
+load_dotenv()
+
+# Configuration
+OPENROUTER_API_KEY = os.getenv("OPENROUTER_API_KEY")
+SYSTEM_PROMPT = os.getenv("SYSTEM_PROMPT", 
+    "You are a helpful coding assistant that produces clean, well-structured, "
+    "production-ready code. Generate readable, commented code and follow best practices. "
+    "When returning multiple files, enclose each file in a fenced code block with an optional "
+    "filename attribute (e.g. ```html filename=index.html). If no filename is provided, default to index.html."
+)
+
+# Preflight check for API key
+if not OPENROUTER_API_KEY:
+    raise RuntimeError(
+        "OPENROUTER_API_KEY is not set. Set it as an environment variable before running. "
+        "Get your API key from https://openrouter.ai/keys"
+    )
+
+app = FastAPI(title="AI Coding Playground", version="1.0.0")
+
+# CORS Configuration
+cors_origins = os.getenv("CORS_ORIGINS", "*").split(",")
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=cors_origins,
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Code parsing regex - tolerant pattern for fenced code blocks
+fence_pattern = re.compile(
+    r"```(?:\s*(?P<lang>[\w+-]+))?(?:\s+filename=(?P<fname>(?:\"[^\"]+\"|'[^']+'|\S+)))?\s*\n(?P<body>[\s\S]*?)```",
+    re.MULTILINE
+)
+
+# Language to file extension mapping
+LANG_TO_EXT = {
+    'html': '.html',
+    'css': '.css',
+    'javascript': '.js',
+    'js': '.js',
+    'typescript': '.ts',
+    'ts': '.ts',
+    'jsx': '.jsx',
+    'tsx': '.tsx',
+    'react': '.jsx',
+    'json': '.json',
+    'python': '.py',
+    'py': '.py',
+}
+
+class GenerateRequest(BaseModel):
+    prompt: str
+
+class ParsedFile(BaseModel):
+    filename: str
+    content: str
+    language: str
+
+def parse_code_blocks(text: str) -> Dict[str, str]:
+    """Parse fenced code blocks from LLM output with improved React support"""
+    files = {}
+    matches = fence_pattern.finditer(text)
+    
+    for match in matches:
+        lang = match.group('lang') or 'html'
+        fname = match.group('fname')
+        body = match.group('body').strip()
+        
+        # Clean filename if quoted
+        if fname:
+            fname = fname.strip('"\'')
+        else:
+            # Smart default filename based on language
+            if lang.lower() in ['jsx', 'tsx', 'react']:
+                # Look for component name in the code
+                component_match = re.search(r'(?:function|const)\s+([A-Z][a-zA-Z]*)', body)
+                if component_match:
+                    component_name = component_match.group(1)
+                    fname = f'{component_name}.jsx'
+                else:
+                    fname = 'App.jsx'
+            elif lang.lower() == 'javascript' or lang.lower() == 'js':
+                # Check if this is actually React code (contains JSX)
+                if 'return (' in body and ('<' in body and '>' in body):
+                    # This looks like JSX, use .jsx extension
+                    component_match = re.search(r'(?:function|const)\s+([A-Z][a-zA-Z]*)', body)
+                    if component_match:
+                        component_name = component_match.group(1)
+                        fname = f'{component_name}.jsx'
+                    else:
+                        fname = 'App.jsx'
+                else:
+                    fname = 'script.js'
+            elif lang.lower() == 'css':
+                # Try to match CSS filename with JSX files
+                if 'App' in body or not files:
+                    fname = 'App.css'
+                else:
+                    fname = 'styles.css'
+            else:
+                ext = LANG_TO_EXT.get(lang.lower(), '.html')
+                fname = f'index{ext}'
+        
+        files[fname] = body
+    
+    # If no code blocks found but there's content, treat as HTML
+    if not files and text:
+        files['index.html'] = text
+    
+    return files
+
+def create_zip_buffer(files: Dict[str, str]) -> io.BytesIO:
+    """Create a zip file buffer from parsed files"""
+    zip_buffer = io.BytesIO()
+    with zipfile.ZipFile(zip_buffer, 'w', zipfile.ZIP_DEFLATED) as zip_file:
+        for filename, content in files.items():
+            zip_file.writestr(filename, content)
+    zip_buffer.seek(0)
+    return zip_buffer
+
+async def stream_openrouter_response(prompt: str):
+    """Stream response from OpenRouter API"""
+    url = "https://openrouter.ai/api/v1/chat/completions"
+    headers = {
+        "Authorization": f"Bearer {OPENROUTER_API_KEY}",
+        "Content-Type": "application/json",
+    }
+    
+    payload = {
+        "model": "qwen/qwen3-coder:free",
+        "messages": [
+            {"role": "system", "content": SYSTEM_PROMPT},
+            {"role": "user", "content": prompt}
+        ],
+        "stream": True,
+        "temperature": 0.7
+    }
+    
+    try:
+        async with httpx.AsyncClient(timeout=60.0) as client:
+            async with client.stream("POST", url, json=payload, headers=headers) as response:
+                if response.status_code != 200:
+                    error_text = await response.aread()
+                    error_data = {"error": f"OpenRouter API Error: {response.status_code}", "details": error_text.decode()}
+                    yield f"data: {json.dumps(error_data)}\n\n"
+                    return
+                
+                full_content = ""
+                async for chunk in response.aiter_lines():
+                    if chunk.startswith("data: "):
+                        data = chunk[6:]  # Remove "data: " prefix
+                        if data == "[DONE]":
+                            # Send final parsed files
+                            parsed_files = parse_code_blocks(full_content)
+                            final_data = {
+                                "type": "complete",
+                                "files": parsed_files,
+                                "full_content": full_content
+                            }
+                            yield f"data: {json.dumps(final_data)}\n\n"
+                            break
+                        
+                        try:
+                            chunk_data = json.loads(data)
+                            if "choices" in chunk_data and chunk_data["choices"]:
+                                delta = chunk_data["choices"][0].get("delta", {})
+                                if "content" in delta:
+                                    content = delta["content"]
+                                    full_content += content
+                                    
+                                    # Send streaming content
+                                    stream_data = {
+                                        "type": "content",
+                                        "content": content,
+                                        "full_content": full_content
+                                    }
+                                    yield f"data: {json.dumps(stream_data)}\n\n"
+                        except json.JSONDecodeError:
+                            continue
+                            
+    except httpx.TimeoutException:
+        error_data = {"error": "Request timeout", "details": "The API request timed out. Please try again."}
+        yield f"data: {json.dumps(error_data)}\n\n"
+    except httpx.RequestError as e:
+        error_data = {"error": "Connection error", "details": f"Failed to connect to OpenRouter API: {str(e)}"}
+        yield f"data: {json.dumps(error_data)}\n\n"
+    except Exception as e:
+        error_data = {"error": "Unexpected error", "details": str(e)}
+        yield f"data: {json.dumps(error_data)}\n\n"
+
+@app.get("/api/health")
+async def health_check():
+    """Health check endpoint"""
+    return {
+        "status": "healthy",
+        "api_key_configured": bool(OPENROUTER_API_KEY),
+        "system_prompt_configured": bool(SYSTEM_PROMPT)
+    }
+
+@app.post("/api/generate")
+async def generate_code(request: GenerateRequest):
+    """Generate code using OpenRouter API with streaming"""
+    if not request.prompt.strip():
+        raise HTTPException(status_code=400, detail="Prompt cannot be empty")
+    
+    return StreamingResponse(
+        stream_openrouter_response(request.prompt),
+        media_type="text/plain",
+        headers={
+            "Cache-Control": "no-cache",
+            "Connection": "keep-alive",
+            "Access-Control-Allow-Origin": "*",
+        }
+    )
+
+@app.post("/api/download")
+async def download_files(files: Dict[str, str]):
+    """Create and download ZIP file from parsed files"""
+    if not files:
+        raise HTTPException(status_code=400, detail="No files provided")
+    
+    try:
+        zip_buffer = create_zip_buffer(files)
+        
+        return StreamingResponse(
+            io.BytesIO(zip_buffer.read()),
+            media_type="application/zip",
+            headers={
+                "Content-Disposition": "attachment; filename=generated-code.zip"
+            }
+        )
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Failed to create ZIP file: {str(e)}")
+
+# Serve React static files (for Hugging Face Spaces deployment)
+try:
+    app.mount("/", StaticFiles(directory="/app/frontend/build", html=True), name="frontend")
+except Exception:
+    # For development - React dev server handles frontend
+    @app.get("/")
+    async def root():
+        return {"message": "AI Coding Playground API", "frontend": "Run React dev server separately"}
+
+if __name__ == "__main__":
+    import uvicorn
+    port = int(os.getenv("PORT", 8001))
+    uvicorn.run(app, host="0.0.0.0", port=port)