|
|
import os |
|
|
import gradio as gr |
|
|
from typing import Dict, List |
|
|
|
|
|
|
|
|
HF_TOKEN = os.getenv('HF_TOKEN') |
|
|
TAVILY_API_KEY = os.getenv('TAVILY_API_KEY') |
|
|
|
|
|
|
|
|
SEARCH_START = "<<<<<<< SEARCH" |
|
|
DIVIDER = "=======" |
|
|
REPLACE_END = ">>>>>>> REPLACE" |
|
|
|
|
|
|
|
|
GRADIO_SUPPORTED_LANGUAGES = [ |
|
|
"python", "c", "cpp", "markdown", "latex", "json", "html", "css", |
|
|
"javascript", "jinja2", "typescript", "yaml", "dockerfile", "shell", |
|
|
"r", "sql", "sql-msSQL", "sql-mySQL", "sql-mariaDB", "sql-sqlite", |
|
|
"sql-cassandra", "sql-plSQL", "sql-hive", "sql-pgSQL", "sql-gql", |
|
|
"sql-gpSQL", "sql-sparkSQL", "sql-esper", None |
|
|
] |
|
|
|
|
|
|
|
|
AVAILABLE_MODELS = [ |
|
|
{ |
|
|
"name": "Moonshot Kimi-K2", |
|
|
"id": "moonshotai/Kimi-K2-Instruct", |
|
|
"description": "Moonshot AI Kimi-K2-Instruct model for code generation and general tasks", |
|
|
"category": "General", |
|
|
"supports_vision": False |
|
|
}, |
|
|
{ |
|
|
"name": "Kimi K2 Turbo (Preview)", |
|
|
"id": "kimi-k2-turbo-preview", |
|
|
"description": "Moonshot AI Kimi K2 Turbo via OpenAI-compatible API", |
|
|
"category": "General", |
|
|
"supports_vision": False |
|
|
}, |
|
|
{ |
|
|
"name": "DeepSeek V3", |
|
|
"id": "deepseek-ai/DeepSeek-V3-0324", |
|
|
"description": "DeepSeek V3 model for code generation", |
|
|
"category": "Code Specialist", |
|
|
"supports_vision": False |
|
|
}, |
|
|
{ |
|
|
"name": "DeepSeek V3.1", |
|
|
"id": "deepseek-ai/DeepSeek-V3.1", |
|
|
"description": "DeepSeek V3.1 model for code generation and general tasks", |
|
|
"category": "Code Specialist", |
|
|
"supports_vision": False |
|
|
}, |
|
|
{ |
|
|
"name": "DeepSeek R1", |
|
|
"id": "deepseek-ai/DeepSeek-R1-0528", |
|
|
"description": "DeepSeek R1 model for code generation", |
|
|
"category": "Code Specialist", |
|
|
"supports_vision": False |
|
|
}, |
|
|
{ |
|
|
"name": "ERNIE-4.5-VL", |
|
|
"id": "baidu/ERNIE-4.5-VL-424B-A47B-Base-PT", |
|
|
"description": "ERNIE-4.5-VL model for multimodal code generation with image support", |
|
|
"category": "Vision-Language", |
|
|
"supports_vision": True |
|
|
}, |
|
|
{ |
|
|
"name": "GLM-4.5V", |
|
|
"id": "zai-org/GLM-4.5V", |
|
|
"description": "GLM-4.5V multimodal model with image understanding for code generation", |
|
|
"category": "Vision-Language", |
|
|
"supports_vision": True |
|
|
}, |
|
|
{ |
|
|
"name": "Qwen3-Coder-480B-A35B-Instruct", |
|
|
"id": "Qwen/Qwen3-Coder-480B-A35B-Instruct", |
|
|
"description": "Qwen3-Coder-480B-A35B-Instruct model for advanced code generation and programming tasks", |
|
|
"category": "Code Specialist", |
|
|
"supports_vision": False |
|
|
}, |
|
|
{ |
|
|
"name": "GPT-5", |
|
|
"id": "gpt-5", |
|
|
"description": "OpenAI GPT-5 model for advanced code generation and general tasks", |
|
|
"category": "Premium", |
|
|
"supports_vision": False |
|
|
}, |
|
|
{ |
|
|
"name": "Claude-Opus-4.1", |
|
|
"id": "claude-opus-4.1", |
|
|
"description": "Anthropic Claude Opus 4.1 via Poe (OpenAI-compatible)", |
|
|
"category": "Premium", |
|
|
"supports_vision": False |
|
|
} |
|
|
] |
|
|
|
|
|
DEFAULT_MODEL_NAME = "Qwen3-Coder-480B-A35B-Instruct" |
|
|
DEFAULT_MODEL = next((m for m in AVAILABLE_MODELS if m.get("name") == DEFAULT_MODEL_NAME), AVAILABLE_MODELS[0]) |
|
|
|
|
|
|
|
|
HTML_SYSTEM_PROMPT = """You are an expert front-end developer creating modern, responsive web applications. |
|
|
|
|
|
Output a COMPLETE, STANDALONE HTML document that renders directly in a browser. |
|
|
|
|
|
Requirements: |
|
|
- Include <!DOCTYPE html>, <html>, <head>, and <body> with proper nesting |
|
|
- Include all required <link> and <script> tags for any libraries you use |
|
|
- Use modern CSS frameworks (Tailwind CSS, Bootstrap) or custom CSS |
|
|
- Ensure mobile-first responsive design |
|
|
- Include proper semantic HTML structure |
|
|
- Add accessibility features (ARIA labels, alt text, proper contrast) |
|
|
- Use modern JavaScript ES6+ features |
|
|
- Keep everything in ONE file; inline CSS/JS as needed |
|
|
|
|
|
For website redesign tasks: |
|
|
- Preserve all original content, structure, and functionality |
|
|
- Keep the same semantic HTML structure but enhance the styling |
|
|
- Reuse all original images and their URLs from the HTML code |
|
|
- Create a modern, responsive design with improved typography and spacing |
|
|
- Maintain the same navigation and user flow |
|
|
- Enhance the visual design while keeping the original layout structure |
|
|
|
|
|
Always output only the HTML code inside a ```html ... ``` code block. |
|
|
""" |
|
|
|
|
|
TRANSFORMERS_JS_SYSTEM_PROMPT = """You are an expert web developer creating transformers.js applications. |
|
|
|
|
|
Generate THREE separate files: index.html, index.js, and style.css. |
|
|
|
|
|
IMPORTANT: You MUST output ALL THREE files in the following format: |
|
|
|
|
|
```html |
|
|
<!-- index.html content here --> |
|
|
``` |
|
|
|
|
|
```javascript |
|
|
// index.js content here |
|
|
``` |
|
|
|
|
|
```css |
|
|
/* style.css content here */ |
|
|
``` |
|
|
|
|
|
Requirements: |
|
|
1. Create a modern, responsive web application using transformers.js |
|
|
2. Use the transformers.js library for AI/ML functionality |
|
|
3. Create a clean, professional UI with good user experience |
|
|
4. Make the application fully responsive for mobile devices |
|
|
5. Use modern CSS practices and JavaScript ES6+ features |
|
|
6. Include proper error handling and loading states |
|
|
7. Follow accessibility best practices |
|
|
|
|
|
Library import (required): Add the following to index.html: |
|
|
<script type="module"> |
|
|
import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]'; |
|
|
</script> |
|
|
""" |
|
|
|
|
|
SVELTE_SYSTEM_PROMPT = """You are an expert Svelte developer creating modern Svelte applications. |
|
|
|
|
|
Generate ONLY the custom files that need user-specific content: |
|
|
|
|
|
```svelte |
|
|
<!-- src/App.svelte content here --> |
|
|
``` |
|
|
|
|
|
```css |
|
|
/* src/app.css content here */ |
|
|
``` |
|
|
|
|
|
Requirements: |
|
|
1. Create a modern, responsive Svelte application |
|
|
2. Use TypeScript for better type safety |
|
|
3. Create a clean, professional UI with excellent UX |
|
|
4. Make the application fully responsive |
|
|
5. Use modern CSS practices and Svelte best practices |
|
|
6. Include proper error handling and loading states |
|
|
7. Follow accessibility best practices |
|
|
8. Use Svelte's reactive features effectively |
|
|
""" |
|
|
|
|
|
GENERIC_SYSTEM_PROMPT = """You are an expert {language} developer. Write clean, idiomatic, and runnable {language} code for the user's request. |
|
|
|
|
|
Requirements: |
|
|
- Write production-ready, well-structured code |
|
|
- Include comprehensive error handling |
|
|
- Add clear comments and documentation |
|
|
- Follow language-specific best practices |
|
|
- Make code modular and maintainable |
|
|
- Include type hints where applicable |
|
|
- Optimize for performance and readability |
|
|
|
|
|
Output ONLY the code inside a ``` code block. |
|
|
""" |
|
|
|
|
|
|
|
|
THEME_CONFIGS = { |
|
|
"Professional Dark": { |
|
|
"theme": gr.themes.Base( |
|
|
primary_hue="blue", |
|
|
secondary_hue="slate", |
|
|
neutral_hue="slate", |
|
|
text_size="sm", |
|
|
spacing_size="sm", |
|
|
radius_size="md" |
|
|
).set( |
|
|
body_background_fill="#0f172a", |
|
|
body_background_fill_dark="#0f172a", |
|
|
background_fill_primary="#3b82f6", |
|
|
background_fill_secondary="#1e293b", |
|
|
border_color_primary="#334155", |
|
|
block_background_fill="#1e293b", |
|
|
block_border_color="#334155", |
|
|
body_text_color="#f1f5f9", |
|
|
body_text_color_dark="#f1f5f9", |
|
|
block_label_text_color="#f1f5f9", |
|
|
input_background_fill="#0f172a", |
|
|
input_border_color="#334155", |
|
|
button_primary_background_fill="#3b82f6", |
|
|
button_primary_border_color="#3b82f6", |
|
|
button_secondary_background_fill="#334155" |
|
|
), |
|
|
"description": "Professional dark theme optimized for developers" |
|
|
}, |
|
|
"Modern Light": { |
|
|
"theme": gr.themes.Soft( |
|
|
primary_hue="blue", |
|
|
secondary_hue="slate", |
|
|
neutral_hue="slate", |
|
|
text_size="sm", |
|
|
spacing_size="md", |
|
|
radius_size="lg" |
|
|
).set( |
|
|
body_background_fill="#ffffff", |
|
|
background_fill_primary="#3b82f6", |
|
|
background_fill_secondary="#f8fafc", |
|
|
border_color_primary="#e2e8f0", |
|
|
block_background_fill="#ffffff", |
|
|
block_border_color="#e2e8f0", |
|
|
body_text_color="#1e293b", |
|
|
button_primary_background_fill="#3b82f6" |
|
|
), |
|
|
"description": "Clean, modern light theme with professional styling" |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
DEMO_LIST = [ |
|
|
{ |
|
|
"title": "Interactive Dashboard", |
|
|
"description": "Create a comprehensive analytics dashboard with charts, metrics, and real-time data visualization", |
|
|
"category": "Data & Analytics", |
|
|
"complexity": "Advanced" |
|
|
}, |
|
|
{ |
|
|
"title": "AI Chat Interface", |
|
|
"description": "Build a modern chat interface with message history, typing indicators, and file sharing", |
|
|
"category": "AI & ML", |
|
|
"complexity": "Intermediate" |
|
|
}, |
|
|
{ |
|
|
"title": "E-commerce Platform", |
|
|
"description": "Design a complete e-commerce solution with product catalog, shopping cart, and checkout", |
|
|
"category": "E-commerce", |
|
|
"complexity": "Advanced" |
|
|
}, |
|
|
{ |
|
|
"title": "Task Management App", |
|
|
"description": "Create a Kanban-style task manager with drag-and-drop, categories, and progress tracking", |
|
|
"category": "Productivity", |
|
|
"complexity": "Intermediate" |
|
|
}, |
|
|
{ |
|
|
"title": "Social Media Feed", |
|
|
"description": "Build a responsive social media feed with posts, comments, likes, and infinite scroll", |
|
|
"category": "Social", |
|
|
"complexity": "Intermediate" |
|
|
}, |
|
|
{ |
|
|
"title": "Data Visualization Suite", |
|
|
"description": "Create interactive charts and graphs with real-time data updates and export features", |
|
|
"category": "Data & Analytics", |
|
|
"complexity": "Advanced" |
|
|
}, |
|
|
{ |
|
|
"title": "Portfolio Website", |
|
|
"description": "Design a professional portfolio with project showcase, skills, and contact sections", |
|
|
"category": "Portfolio", |
|
|
"complexity": "Beginner" |
|
|
}, |
|
|
{ |
|
|
"title": "Form Builder", |
|
|
"description": "Build a dynamic form builder with validation, conditional logic, and submission handling", |
|
|
"category": "Forms", |
|
|
"complexity": "Advanced" |
|
|
} |
|
|
] |
|
|
|
|
|
|
|
|
TEMP_DIR_TTL_SECONDS = 6 * 60 * 60 |
|
|
MAX_FILE_SIZE_MB = 10 |
|
|
SUPPORTED_FILE_TYPES = [ |
|
|
".pdf", ".txt", ".md", ".csv", ".docx", |
|
|
".jpg", ".jpeg", ".png", ".bmp", ".tiff", ".tif", ".gif", ".webp" |
|
|
] |
|
|
|
|
|
def get_gradio_language(language): |
|
|
"""Map composite options to supported syntax highlighting""" |
|
|
language_map = { |
|
|
"streamlit": "python", |
|
|
"gradio": "python", |
|
|
"transformers.js": "javascript" |
|
|
} |
|
|
return language_map.get(language, language if language in GRADIO_SUPPORTED_LANGUAGES else None) |
|
|
|
|
|
def get_saved_theme(): |
|
|
"""Get the saved theme preference from file""" |
|
|
try: |
|
|
if os.path.exists('.theme_preference'): |
|
|
with open('.theme_preference', 'r') as f: |
|
|
return f.read().strip() |
|
|
except: |
|
|
pass |
|
|
return "Professional Dark" |
|
|
|
|
|
def save_theme_preference(theme_name): |
|
|
"""Save theme preference to file""" |
|
|
try: |
|
|
with open('.theme_preference', 'w') as f: |
|
|
f.write(theme_name) |
|
|
except: |
|
|
pass |
