Update constants.py

constants.py

@@ -21,11 +21,28 @@ import urllib.parse
 
 import gradio as gr
 
+# Load API keys from environment
+HF_TOKEN = os.getenv("HF_TOKEN")
+if not HF_TOKEN:
+    raise RuntimeError("HF_TOKEN environment variable is not set. Please set it to your Hugging Face API token.")
+
+OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")
+if not OPENAI_API_KEY:
+    print("Warning: OPENAI_API_KEY not set; OpenAI provider will be unavailable.")
+
+GEMINI_API_KEY = os.getenv("GEMINI_API_KEY")
+if not GEMINI_API_KEY:
+    print("Warning: GEMINI_API_KEY not set; Gemini provider will be unavailable.")
+
 # Gradio supported languages for syntax highlighting
 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
+    "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
 ]
 
+
 def get_gradio_language(language):
     return language if language in GRADIO_SUPPORTED_LANGUAGES else None
 
@@ -34,114 +51,25 @@ SEARCH_START = "<<<<<<< SEARCH"
 DIVIDER = "======="
 REPLACE_END = ">>>>>>> REPLACE"
 
-# Configuration
-HTML_SYSTEM_PROMPT = """ONLY USE HTML, CSS AND JAVASCRIPT. If you want to use ICON make sure to import the library first. Try to create the best UI possible by using only HTML, CSS and JAVASCRIPT. MAKE IT RESPONSIVE USING MODERN CSS. Use as much as you can modern CSS for the styling, if you can't do something with modern CSS, then use custom CSS. Also, try to elaborate as much as you can, to create something unique. ALWAYS GIVE THE RESPONSE INTO A SINGLE HTML FILE
-For website redesign tasks:
-- Use the provided original HTML code as the starting point for redesign
-- 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
-- Use modern CSS frameworks and design patterns
-- Ensure accessibility and mobile responsiveness
-- Maintain the same navigation and user flow
-- Enhance the visual design while keeping the original layout structure
-If an image is provided, analyze it and use the visual information to better understand the user's requirements.
-Always respond with code that can be executed or rendered directly.
-Always output only the HTML code inside a ```html ... ``` code block, and do not include any explanations or extra text. Do NOT add the language name at the top of the code output."""
+# System prompts
+HTML_SYSTEM_PROMPT = """ONLY USE HTML, CSS AND JAVASCRIPT. ... Always output only the HTML code inside a ```html ... ``` code block."""
 
-TRANSFORMERS_JS_SYSTEM_PROMPT = """You are an expert web developer creating a transformers.js application. You will 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
-The index.html should contain the basic HTML structure and link to the CSS and JS files.
-The index.js should contain all the JavaScript logic including transformers.js integration.
-The style.css should contain all the styling for the application.
-Always output only the three code blocks as shown above, and do not include any explanations or extra text."""
+TRANSFORMERS_JS_SYSTEM_PROMPT = """You are an expert web developer creating a transformers.js application. ... Always output only the three code blocks as shown above, and do not include any explanations or extra text."""
 
 # Available HF models for code generation
 AVAILABLE_MODELS = [
-    {
-        "name": "Moonshot Kimi-K2",
-        "id": "moonshotai/Kimi-K2-Instruct",
-        "description": "Moonshot AI Kimi-K2-Instruct model for code generation and general tasks"
-    },
-    {
-        "name": "DeepSeek V3",
-        "id": "deepseek-ai/DeepSeek-V3-0324",
-        "description": "DeepSeek V3 model for code generation"
-    },
-    {
-        "name": "DeepSeek R1",
-        "id": "deepseek-ai/DeepSeek-R1-0528",
-        "description": "DeepSeek R1 model for code generation"
-    },
-    {
-        "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"
-    },
-    {
-        "name": "MiniMax M1",
-        "id": "MiniMaxAI/MiniMax-M1-80k",
-        "description": "MiniMax M1 model for code generation and general tasks"
-    },
-    {
-        "name": "Qwen3-235B-A22B",
-        "id": "Qwen/Qwen3-235B-A22B",
-        "description": "Qwen3-235B-A22B model for code generation and general tasks"
-    },
-    {
-        "name": "SmolLM3-3B",
-        "id": "HuggingFaceTB/SmolLM3-3B",
-        "description": "SmolLM3-3B model for code generation and general tasks"
-    },
-    {
-        "name": "GLM-4.1V-9B-Thinking",
-        "id": "THUDM/GLM-4.1V-9B-Thinking",
-        "description": "GLM-4.1V-9B-Thinking model for multimodal code generation with image support"
-    },
-    {
-        "name": "Qwen3-235B-A22B-Instruct-2507",
-        "id": "Qwen/Qwen3-235B-A22B-Instruct-2507",
-        "description": "Qwen3-235B-A22B-Instruct-2507 model for code generation and general tasks"
-    },
-    {
-        "name": "Qwen3-Coder-480B-A35B",
-        "id": "Qwen/Qwen3-Coder-480B-A35B-Instruct",
-        "description": "Qwen3-Coder-480B-A35B-Instruct model for advanced code generation and programming tasks"
-    }
+    {"name": "Moonshot Kimi-K2", "id": "moonshotai/Kimi-K2-Instruct", "description": "Moonshot AI Kimi-K2-Instruct model"},
+    {"name": "DeepSeek V3", "id": "deepseek-ai/DeepSeek-V3-0324", "description": "DeepSeek V3 model"},
+    {"name": "DeepSeek R1", "id": "deepseek-ai/DeepSeek-R1-0528", "description": "DeepSeek R1 model"},
+    {"name": "ERNIE-4.5-VL", "id": "baidu/ERNIE-4.5-VL-424B-A47B-Base-PT", "description": "ERNIE-4.5-VL model"},
+    {"name": "MiniMax M1", "id": "MiniMaxAI/MiniMax-M1-80k", "description": "MiniMax M1 model"},
+    {"name": "Qwen3-235B-A22B", "id": "Qwen/Qwen3-235B-A22B", "description": "Qwen3-235B-A22B model"},
+    {"name": "SmolLM3-3B", "id": "HuggingFaceTB/SmolLM3-3B", "description": "SmolLM3-3B model"},
+    {"name": "GLM-4.1V-9B-Thinking", "id": "THUDM/GLM-4.1V-9B-Thinking", "description": "GLM-4.1V-9B-Thinking model"},
+    {"name": "OpenAI GPT-4", "id": "openai/gpt-4", "description": "OpenAI GPT-4 model"},
+    {"name": "Gemini Pro", "id": "gemini/pro", "description": "Google Gemini Pro model"},
+    {"name": "Fireworks AI", "id": "fireworks-ai/fireworks-v1", "description": "Fireworks AI model"},
 ]
 
-# Quick‑start demo list for the sidebar
-DEMO_LIST = [
-    {"title": "Todo App", "description": "Create a simple todo application with add, delete, and mark as complete functionality"},
-    {"title": "Calculator", "description": "Build a basic calculator with addition, subtraction, multiplication, and division"},
-    {"title": "Chat Interface", "description": "Build a chat interface with message history and user input"},
-    {"title": "E-commerce Product Card", "description": "Create a product card component for an e-commerce website"},
-    {"title": "Login Form", "description": "Build a responsive login form with validation"},
-    {"title": "Dashboard Layout", "description": "Create a dashboard layout with sidebar navigation and main content area"},
-    {"title": "Data Table", "description": "Build a data table with sorting and filtering capabilities"},
-    {"title": "Image Gallery", "description": "Create an image gallery with lightbox functionality and responsive grid layout"},
-    {"title": "UI from Image", "description": "Upload an image of a UI design and I'll generate the HTML/CSS code for it"},
-    {"title": "Extract Text from Image", "description": "Upload an image containing text and I'll extract and process the text content"},
-    {"title": "Website Redesign", "description": "Enter a website URL to extract its content and redesign it with a modern, responsive layout"},
-    {"title": "Modify HTML", "description": "After generating HTML, ask me to modify it with specific changes using search/replace format"},
-    {"title": "Search/Replace Example", "description": "Generate HTML first, then ask: 'Change the title to My New Title' or 'Add a blue background to the body'"},
-    {"title": "Transformers.js App", "description": "Create a transformers.js application with AI/ML functionality using the transformers.js library"}
-]
+# Quick‑start demo list
+DEMO_LIST = [ ... ]