import os
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 webbrowser
import urllib.parse
import copy
import html
import gradio as gr
from huggingface_hub import InferenceClient
from tavily import TavilyClient
from huggingface_hub import HfApi
import tempfile
from openai import OpenAI
from mistralai import Mistral
# 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):
# Map composite options to a supported syntax highlighting
if language == "streamlit":
return "python"
if language == "gradio":
return "python"
return language if language in GRADIO_SUPPORTED_LANGUAGES else None
# Search/Replace Constants
SEARCH_START = "<<<<<<< SEARCH"
DIVIDER = "======="
REPLACE_END = ">>>>>>> REPLACE"
# Configuration
HTML_SYSTEM_PROMPT = """You are an expert front-end developer.
Output a COMPLETE, STANDALONE HTML document that renders directly in a browser. Requirements:
- Include , , , and with proper nesting
- Include all required and
{REPLACE_END}
```
Example Fixing Dependencies (requirements.txt):
```
Adding missing dependency to fix ImportError...
=== requirements.txt ===
{SEARCH_START}
gradio
streamlit
{DIVIDER}
gradio
streamlit
mistral-common
{REPLACE_END}
```
Example Deleting Code:
```
Removing the paragraph...
{SEARCH_START}
This paragraph will be deleted.
{DIVIDER}
{REPLACE_END}
```"""
# Follow-up system prompt for modifying existing transformers.js applications
TransformersJSFollowUpSystemPrompt = f"""You are an expert web developer modifying an existing transformers.js application.
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.
IMPORTANT: When the user reports an ERROR MESSAGE, analyze it carefully to determine which file needs fixing:
- JavaScript errors/module loading issues → Fix index.js
- HTML rendering/DOM issues → Fix index.html
- Styling/visual issues → Fix style.css
- CDN/library loading errors → Fix script tags in index.html
The transformers.js application consists of three files: index.html, index.js, and style.css.
When making changes, specify which file you're modifying by starting your search/replace blocks with the file name.
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 HTML:
```
Changing the title in index.html...
=== index.html ===
{SEARCH_START}
Old Title
{DIVIDER}
New Title
{REPLACE_END}
```
Example Modifying JavaScript:
```
Adding a new function to index.js...
=== index.js ===
{SEARCH_START}
// Existing code
{DIVIDER}
// Existing code
function newFunction() {{
console.log("New function added");
}}
{REPLACE_END}
```
Example Modifying CSS:
```
Changing background color in style.css...
=== style.css ===
{SEARCH_START}
body {{
background-color: white;
}}
{DIVIDER}
body {{
background-color: #f0f0f0;
}}
{REPLACE_END}
```
Example Fixing Library Loading Error:
```
Fixing transformers.js CDN loading error...
=== index.html ===
{SEARCH_START}
{DIVIDER}
{REPLACE_END}
```"""
# Available models
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.5",
"id": "zai-org/GLM-4.5",
"description": "GLM-4.5 model with thinking capabilities for advanced code generation"
},
{
"name": "GLM-4.5V",
"id": "zai-org/GLM-4.5V",
"description": "GLM-4.5V multimodal model with image understanding for code generation"
},
{
"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-Instruct",
"id": "Qwen/Qwen3-Coder-480B-A35B-Instruct",
"description": "Qwen3-Coder-480B-A35B-Instruct model for advanced code generation and programming tasks"
},
{
"name": "Qwen3-32B",
"id": "Qwen/Qwen3-32B",
"description": "Qwen3-32B model for code generation and general tasks"
},
{
"name": "Qwen3-4B-Instruct-2507",
"id": "Qwen/Qwen3-4B-Instruct-2507",
"description": "Qwen3-4B-Instruct-2507 model for code generation and general tasks"
},
{
"name": "Qwen3-4B-Thinking-2507",
"id": "Qwen/Qwen3-4B-Thinking-2507",
"description": "Qwen3-4B-Thinking-2507 model with advanced reasoning capabilities for code generation and general tasks"
},
{
"name": "Qwen3-235B-A22B-Thinking",
"id": "Qwen/Qwen3-235B-A22B-Thinking-2507",
"description": "Qwen3-235B-A22B-Thinking model with advanced reasoning capabilities"
},
{
"name": "Qwen3-30B-A3B-Instruct-2507",
"id": "qwen3-30b-a3b-instruct-2507",
"description": "Qwen3-30B-A3B-Instruct model via Alibaba Cloud DashScope API"
},
{
"name": "Qwen3-30B-A3B-Thinking-2507",
"id": "qwen3-30b-a3b-thinking-2507",
"description": "Qwen3-30B-A3B-Thinking model with advanced reasoning via Alibaba Cloud DashScope API"
},
{
"name": "Qwen3-Coder-30B-A3B-Instruct",
"id": "qwen3-coder-30b-a3b-instruct",
"description": "Qwen3-Coder-30B-A3B-Instruct model for advanced code generation via Alibaba Cloud DashScope API"
},
{
"name": "StepFun Step-3",
"id": "step-3",
"description": "StepFun Step-3 model - AI chat assistant by 阶跃星辰 with multilingual capabilities"
},
{
"name": "Codestral 2508",
"id": "codestral-2508",
"description": "Mistral Codestral model - specialized for code generation and programming tasks"
},
{
"name": "GPT-OSS-120B",
"id": "openai/gpt-oss-120b",
"description": "OpenAI GPT-OSS-120B model for advanced code generation and general tasks"
},
{
"name": "GPT-OSS-20B",
"id": "openai/gpt-oss-20b",
"description": "OpenAI GPT-OSS-20B model for code generation and general tasks"
},
{
"name": "GPT-5",
"id": "gpt-5",
"description": "OpenAI GPT-5 model for advanced code generation and general tasks"
},
{
"name": "Grok-4",
"id": "grok-4",
"description": "Grok-4 model via Poe (OpenAI-compatible) for advanced tasks"
}
]
# Default model selection
DEFAULT_MODEL_NAME = "Grok-4"
DEFAULT_MODEL = None
for _m in AVAILABLE_MODELS:
if _m.get("name") == DEFAULT_MODEL_NAME:
DEFAULT_MODEL = _m
break
if DEFAULT_MODEL is None and AVAILABLE_MODELS:
DEFAULT_MODEL = AVAILABLE_MODELS[0]
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"
},
{
"title": "Svelte App",
"description": "Create a modern Svelte application with TypeScript, Vite, and responsive design"
}
]
# HF Inference Client
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.")
def get_inference_client(model_id, provider="auto"):
"""Return an InferenceClient with provider based on model_id and user selection."""
if model_id == "qwen3-30b-a3b-instruct-2507":
# Use DashScope OpenAI client
return OpenAI(
api_key=os.getenv("DASHSCOPE_API_KEY"),
base_url="https://dashscope.aliyuncs.com/compatible-mode/v1",
)
elif model_id == "qwen3-30b-a3b-thinking-2507":
# Use DashScope OpenAI client for Thinking model
return OpenAI(
api_key=os.getenv("DASHSCOPE_API_KEY"),
base_url="https://dashscope.aliyuncs.com/compatible-mode/v1",
)
elif model_id == "qwen3-coder-30b-a3b-instruct":
# Use DashScope OpenAI client for Coder model
return OpenAI(
api_key=os.getenv("DASHSCOPE_API_KEY"),
base_url="https://dashscope.aliyuncs.com/compatible-mode/v1",
)
elif model_id == "gpt-5":
# Use Poe (OpenAI-compatible) client for GPT-5 model
return OpenAI(
api_key=os.getenv("POE_API_KEY"),
base_url="https://api.poe.com/v1"
)
elif model_id == "grok-4":
# Use Poe (OpenAI-compatible) client for Grok-4 model
return OpenAI(
api_key=os.getenv("POE_API_KEY"),
base_url="https://api.poe.com/v1"
)
elif model_id == "step-3":
# Use StepFun API client for Step-3 model
return OpenAI(
api_key=os.getenv("STEP_API_KEY"),
base_url="https://api.stepfun.com/v1"
)
elif model_id == "codestral-2508":
# Use Mistral client for Codestral model
return Mistral(api_key=os.getenv("MISTRAL_API_KEY"))
elif model_id == "openai/gpt-oss-120b":
provider = "cerebras"
elif model_id == "openai/gpt-oss-20b":
provider = "groq"
elif model_id == "moonshotai/Kimi-K2-Instruct":
provider = "groq"
elif model_id == "Qwen/Qwen3-235B-A22B":
provider = "cerebras"
elif model_id == "Qwen/Qwen3-235B-A22B-Instruct-2507":
provider = "cerebras"
elif model_id == "Qwen/Qwen3-32B":
provider = "cerebras"
elif model_id == "Qwen/Qwen3-235B-A22B-Thinking-2507":
provider = "cerebras"
elif model_id == "Qwen/Qwen3-Coder-480B-A35B-Instruct":
provider = "cerebras"
return InferenceClient(
provider=provider,
api_key=HF_TOKEN,
bill_to="huggingface"
)
# 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()
# Remove a leading language marker line (e.g., 'python') if present
if extracted.split('\n', 1)[0].strip().lower() in ['python', 'html', 'css', 'javascript', 'json', 'c', 'cpp', 'markdown', 'latex', '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']:
return extracted.split('\n', 1)[1] if '\n' in extracted else ''
# If HTML markup starts later in the block (e.g., Poe injected preface), trim to first HTML root
html_root_idx = None
for tag in [' 0:
return extracted[html_root_idx:].strip()
return extracted
# If no code block is found, check if the entire text is HTML
stripped = text.strip()
if stripped.startswith('') or stripped.startswith(' 0:
return stripped[idx:].strip()
return stripped
# Special handling for python: remove python marker
if text.strip().startswith('```python'):
return text.strip()[9:-3].strip()
# Remove a leading language marker line if present (fallback)
lines = text.strip().split('\n', 1)
if lines[0].strip().lower() in ['python', 'html', 'css', 'javascript', 'json', 'c', 'cpp', 'markdown', 'latex', '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']:
return lines[1] if len(lines) > 1 else ''
return text.strip()
def strip_placeholder_thinking(text: str) -> str:
"""Remove placeholder 'Thinking...' status lines from streamed text."""
if not text:
return text
# Matches lines like: "Thinking..." or "Thinking... (12s elapsed)"
return re.sub(r"(?mi)^[\t ]*Thinking\.\.\.(?:\s*\(\d+s elapsed\))?[\t ]*$\n?", "", text)
def is_placeholder_thinking_only(text: str) -> bool:
"""Return True if text contains only 'Thinking...' placeholder lines (with optional elapsed)."""
if not text:
return False
stripped = text.strip()
if not stripped:
return False
return re.fullmatch(r"(?s)(?:\s*Thinking\.\.\.(?:\s*\(\d+s elapsed\))?\s*)+", stripped) is not None
def extract_last_thinking_line(text: str) -> str:
"""Extract the last 'Thinking...' line to display as status."""
matches = list(re.finditer(r"Thinking\.\.\.(?:\s*\(\d+s elapsed\))?", text))
return matches[-1].group(0) if matches else "Thinking..."
def parse_transformers_js_output(text):
"""Parse transformers.js output and extract the three files (index.html, index.js, style.css)"""
files = {
'index.html': '',
'index.js': '',
'style.css': ''
}
# Multiple patterns to match the three code blocks with different variations
html_patterns = [
r'```html\s*\n([\s\S]+?)\n```',
r'```htm\s*\n([\s\S]+?)\n```',
r'```\s*(?:index\.html|html)\s*\n([\s\S]+?)\n```'
]
js_patterns = [
r'```javascript\s*\n([\s\S]+?)\n```',
r'```js\s*\n([\s\S]+?)\n```',
r'```\s*(?:index\.js|javascript)\s*\n([\s\S]+?)\n```'
]
css_patterns = [
r'```css\s*\n([\s\S]+?)\n```',
r'```\s*(?:style\.css|css)\s*\n([\s\S]+?)\n```'
]
# Extract HTML content
for pattern in html_patterns:
html_match = re.search(pattern, text, re.IGNORECASE)
if html_match:
files['index.html'] = html_match.group(1).strip()
break
# Extract JavaScript content
for pattern in js_patterns:
js_match = re.search(pattern, text, re.IGNORECASE)
if js_match:
files['index.js'] = js_match.group(1).strip()
break
# Extract CSS content
for pattern in css_patterns:
css_match = re.search(pattern, text, re.IGNORECASE)
if css_match:
files['style.css'] = css_match.group(1).strip()
break
# Fallback: support === index.html === format if any file is missing
if not (files['index.html'] and files['index.js'] and files['style.css']):
# Use regex to extract sections
html_fallback = re.search(r'===\s*index\.html\s*===\s*\n([\s\S]+?)(?=\n===|$)', text, re.IGNORECASE)
js_fallback = re.search(r'===\s*index\.js\s*===\s*\n([\s\S]+?)(?=\n===|$)', text, re.IGNORECASE)
css_fallback = re.search(r'===\s*style\.css\s*===\s*\n([\s\S]+?)(?=\n===|$)', text, re.IGNORECASE)
if html_fallback:
files['index.html'] = html_fallback.group(1).strip()
if js_fallback:
files['index.js'] = js_fallback.group(1).strip()
if css_fallback:
files['style.css'] = css_fallback.group(1).strip()
# Additional fallback: extract from numbered sections or file headers
if not (files['index.html'] and files['index.js'] and files['style.css']):
# Try patterns like "1. index.html:" or "**index.html**"
patterns = [
(r'(?:^\d+\.\s*|^##\s*|^\*\*\s*)index\.html(?:\s*:|\*\*:?)\s*\n([\s\S]+?)(?=\n(?:\d+\.|##|\*\*|===)|$)', 'index.html'),
(r'(?:^\d+\.\s*|^##\s*|^\*\*\s*)index\.js(?:\s*:|\*\*:?)\s*\n([\s\S]+?)(?=\n(?:\d+\.|##|\*\*|===)|$)', 'index.js'),
(r'(?:^\d+\.\s*|^##\s*|^\*\*\s*)style\.css(?:\s*:|\*\*:?)\s*\n([\s\S]+?)(?=\n(?:\d+\.|##|\*\*|===)|$)', 'style.css')
]
for pattern, file_key in patterns:
if not files[file_key]:
match = re.search(pattern, text, re.IGNORECASE | re.MULTILINE)
if match:
# Clean up the content by removing any code block markers
content = match.group(1).strip()
content = re.sub(r'^```\w*\s*\n', '', content)
content = re.sub(r'\n```\s*$', '', content)
files[file_key] = content.strip()
return files
def format_transformers_js_output(files):
"""Format the three files into a single display string"""
output = []
output.append("=== index.html ===")
output.append(files['index.html'])
output.append("\n=== index.js ===")
output.append(files['index.js'])
output.append("\n=== style.css ===")
output.append(files['style.css'])
return '\n'.join(output)
def build_transformers_inline_html(files: dict) -> str:
"""Merge transformers.js three-file output into a single self-contained HTML document.
- Inlines style.css into a " if css else ""
if style_tag:
if '' in doc.lower():
# Preserve original casing by finding closing head case-insensitively
match = _re.search(r"", doc, flags=_re.IGNORECASE)
if match:
idx = match.start()
doc = doc[:idx] + style_tag + doc[idx:]
else:
# No head; insert at top of body
match = _re.search(r"]*>", doc, flags=_re.IGNORECASE)
if match:
idx = match.end()
doc = doc[:idx] + "\n" + style_tag + doc[idx:]
else:
# Append at beginning
doc = style_tag + doc
# Inline JS: insert before