import re from http import HTTPStatus from typing import Dict, List, Optional, Tuple import base64 import mimetypes import PyPDF2 import docx import cv2 import numpy as np from PIL import Image import pytesseract import requests from urllib.parse import urlparse, urljoin from bs4 import BeautifulSoup import html2text import json import time import os import gradio as gr from huggingface_hub import InferenceClient from tavily import TavilyClient import openai # 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 ] def get_gradio_language(language): return language if language in GRADIO_SUPPORTED_LANGUAGES else None # Search/Replace Constants 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.""" GENERIC_SYSTEM_PROMPT = """You are an expert {language} developer. Write clean, idiomatic, and runnable {language} code for the user's request. If possible, include comments and best practices. Output ONLY the code inside a ```{language} ... ``` code block, and do not include any explanations or extra text. If the user provides a file or other context, use it as a reference. If the code is for a script or app, make it as self-contained as possible.""" # System prompt with search capability HTML_SYSTEM_PROMPT_WITH_SEARCH = """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 You have access to real-time web search. When needed, use web search to find the latest information, best practices, or specific technologies. 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 - Use web search to find current design trends and best practices for the specific type of website - 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.""" GENERIC_SYSTEM_PROMPT_WITH_SEARCH = """You are an expert {language} developer. You have access to real-time web search. When needed, use web search to find the latest information, best practices, or specific technologies for {language}. Write clean, idiomatic, and runnable {language} code for the user's request. If possible, include comments and best practices. Output ONLY the code inside a ```{language} ... ``` code block, and do not include any explanations or extra text. If the user provides a file or other context, use it as a reference. If the code is for a script or app, make it as self-contained as possible.""" # Follow-up system prompt for modifying existing HTML files FollowUpSystemPrompt = f"""You are an expert web developer modifying an existing HTML file. The user wants to apply changes based on their request. You MUST output ONLY the changes required using the following SEARCH/REPLACE block format. Do NOT output the entire file. Explain the changes briefly *before* the blocks if necessary, but the code changes THEMSELVES MUST be within the blocks. Format Rules: 1. Start with {SEARCH_START} 2. Provide the exact lines from the current code that need to be replaced. 3. Use {DIVIDER} to separate the search block from the replacement. 4. Provide the new lines that should replace the original lines. 5. End with {REPLACE_END} 6. You can use multiple SEARCH/REPLACE blocks if changes are needed in different parts of the file. 7. To insert code, use an empty SEARCH block (only {SEARCH_START} and {DIVIDER} on their lines) if inserting at the very beginning, otherwise provide the line *before* the insertion point in the SEARCH block and include that line plus the new lines in the REPLACE block. 8. To delete code, provide the lines to delete in the SEARCH block and leave the REPLACE block empty (only {DIVIDER} and {REPLACE_END} on their lines). 9. IMPORTANT: The SEARCH block must *exactly* match the current code, including indentation and whitespace. Example Modifying Code: ``` Some explanation... {SEARCH_START}
{DIVIDER} {REPLACE_END} ``` Example Deleting Code: ``` Removing the paragraph... {SEARCH_START}
This paragraph will be deleted.
{DIVIDER} {REPLACE_END} ```""" # Available models AVAILABLE_MODELS = [ { "name": "DeepSeek V3", "id": "deepseek-ai/DeepSeek-V3-0324", "description": "DeepSeek V3 model for code generation", "provider": "huggingface" }, { "name": "DeepSeek R1", "id": "deepseek-ai/DeepSeek-R1-0528", "description": "DeepSeek R1 model for code generation", "provider": "huggingface" }, { # "name": "GPT-4o-mini", # "id": "gpt-4o-mini", # "description": "OpenAI GPT-4o-mini model for code generation and general tasks", # "provider": "openai" #}, # Commented out to avoid requiring extra setup for all users #{ "name": "Gemini 1.5 Pro", "id": "gemini-1.5-pro-latest", "description": "Google Gemini 1.5 Pro model for code generation and general tasks", "provider": "gemini" }, { "name": "GPT-4o", "id": "gpt-4o", "description": "OpenAI GPT-4o model for code generation and general tasks", "provider": "openai" }, { "name": "Qwen3-235B-A22B", "id": "Qwen/Qwen3-235B-A22B", "description": "Qwen3-235B-A22B model for code generation and general tasks", "provider": "huggingface" }, { "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", } ] 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": "Weather Dashboard", "description": "Create a weather dashboard that displays current weather information" }, { "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'" } ] # HF Inference Client HF_TOKEN = os.getenv("HF_TOKEN") OPENAI_API_KEY = os.getenv("OPENAI_API_KEY") GEMINI_API_KEY = os.getenv("GEMINI_API_KEY") def get_inference_client(model_id): """Return an appropriate client based on model_id and configured provider.""" model_info = next((m for m in AVAILABLE_MODELS if m["id"] == model_id), None) if not model_info: raise ValueError(f"Model with id '{model_id}' not found.") provider = model_info.get("provider", "huggingface") # Default to HF if provider == "groq": return InferenceClient( provider="groq", api_key=HF_TOKEN, # Groq uses HF token as well bill_to="huggingface" # Assuming billing through HF for Groq ) elif provider == "huggingface": return InferenceClient( provider="auto", # Use HF's auto provider for other HF models api_key=HF_TOKEN, bill_to="huggingface" ) elif provider == "openai": if not OPENAI_API_KEY: raise ValueError("OPENAI_API_KEY environment variable not set.") openai.api_key = OPENAI_API_KEY return openai elif provider == "gemini": if not GEMINI_API_KEY: raise ValueError("GEMINI_API_KEY environment variable not set.") import google.generativeai as genai genai.configure(api_key=GEMINI_API_KEY) return genai else: raise ValueError(f"Unsupported provider: {provider}") # Type definitions History = List[Tuple[str, str]] Messages = List[Dict[str, str]] # Tavily Search Client TAVILY_API_KEY = os.getenv('TAVILY_API_KEY') tavily_client = None if TAVILY_API_KEY: try: tavily_client = TavilyClient(api_key=TAVILY_API_KEY) except Exception as e: print(f"Failed to initialize Tavily client: {e}") tavily_client = None def history_to_messages(history: History, system: str) -> Messages: messages = [{'role': 'system', 'content': system}] for h in history: # Handle multimodal content in history user_content = h[0] if isinstance(user_content, list): # Extract text from multimodal content text_content = "" for item in user_content: if isinstance(item, dict) and item.get("type") == "text": text_content += item.get("text", "") user_content = text_content if text_content else str(user_content) messages.append({'role': 'user', 'content': user_content}) messages.append({'role': 'assistant', 'content': h[1]}) return messages def messages_to_history(messages: Messages) -> Tuple[str, History]: assert messages[0]['role'] == 'system' history = [] for q, r in zip(messages[1::2], messages[2::2]): # Extract text content from multimodal messages for history user_content = q['content'] if isinstance(user_content, list): text_content = "" for item in user_content: if isinstance(item, dict) and item.get("type") == "text": text_content += item.get("text", "") user_content = text_content if text_content else str(user_content) history.append([user_content, r['content']]) return history def history_to_chatbot_messages(history: History) -> List[Dict[str, str]]: """Convert history tuples to chatbot message format""" messages = [] for user_msg, assistant_msg in history: # Handle multimodal content if isinstance(user_msg, list): text_content = "" for item in user_msg: if isinstance(item, dict) and item.get("type") == "text": text_content += item.get("text", "") user_msg = text_content if text_content else str(user_msg) messages.append({"role": "user", "content": user_msg}) messages.append({"role": "assistant", "content": assistant_msg}) return messages def remove_code_block(text): # Try to match code blocks with language markers patterns = [ r'```(?:html|HTML)\n([\s\S]+?)\n```', # Match ```html or ```HTML r'```\n([\s\S]+?)\n```', # Match code blocks without language markers r'```([\s\S]+?)```' # Match code blocks without line breaks ] for pattern in patterns: match = re.search(pattern, text, re.DOTALL) if match: extracted = match.group(1).strip() return extracted # If no code block is found, check if the entire text is HTML if text.strip().startswith('') or text.strip().startswith(' str: """Apply search/replace changes to HTML content""" if not changes_text.strip(): return original_html # Split the changes text into individual search/replace blocks blocks = [] current_block = "" lines = changes_text.split('\n') for line in lines: if line.strip() == SEARCH_START: if current_block.strip(): blocks.append(current_block.strip()) current_block = line + '\n' elif line.strip() == REPLACE_END: current_block += line + '\n' blocks.append(current_block.strip()) current_block = "" else: current_block += line + '\n' if current_block.strip(): blocks.append(current_block.strip()) modified_html = original_html for block in blocks: if not block.strip(): continue # Parse the search/replace block lines = block.split('\n') search_lines = [] replace_lines = [] in_search = False in_replace = False for line in lines: if line.strip() == SEARCH_START: in_search = True in_replace = False elif line.strip() == DIVIDER: in_search = False in_replace = True elif line.strip() == REPLACE_END: in_replace = False elif in_search: search_lines.append(line) elif in_replace: replace_lines.append(line) # Apply the search/replace if search_lines: search_text = '\n'.join(search_lines).strip() replace_text = '\n'.join(replace_lines).strip() if search_text in modified_html: modified_html = modified_html.replace(search_text, replace_text) else: print(f"Warning: Search text not found in HTML: {search_text[:100]}...") return modified_html # Updated for faster Tavily search and closer prompt usage # Uses 'advanced' search_depth and auto_parameters=True for speed and relevance def perform_web_search(query: str, max_results: int = 5, include_domains=None, exclude_domains=None) -> str: """Perform web search using Tavily with default parameters""" if not tavily_client: return "Web search is not available. Please set the TAVILY_API_KEY environment variable." try: # Use Tavily defaults with advanced search depth for better results search_params = { "search_depth": "advanced", "max_results": min(max(1, max_results), 20) } if include_domains is not None: search_params["include_domains"] = include_domains if exclude_domains is not None: search_params["exclude_domains"] = exclude_domains response = tavily_client.search(query, **search_params) search_results = [] for result in response.get('results', []): title = result.get('title', 'No title') url = result.get('url', 'No URL') content = result.get('content', 'No content') search_results.append(f"Title: {title}\nURL: {url}\nContent: {content}\n") if search_results: return "Web Search Results:\n\n" + "\n---\n".join(search_results) else: return "No search results found." except Exception as e: return f"Search error: {str(e)}" def enhance_query_with_search(query: str, enable_search: bool) -> str: """Enhance the query with web search results if search is enabled""" if not enable_search or not tavily_client: return query # Perform search to get relevant information search_results = perform_web_search(query) # Combine original query with search results enhanced_query = f"""Original Query: {query} {search_results} Please use the search results above to help create the requested application with the most up-to-date information and best practices.""" return enhanced_query def send_to_sandbox(code): # Add a wrapper to inject necessary permissions and ensure full HTML wrapped_code = f"""