diff --git a/.gitattributes b/.gitattributes
index 1abc6d15eb80582bc2bc48e8b790dd790b00d25b..a6344aac8c09253b3b630fb776ae94478aa0275b 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -1 +1,35 @@
-Animated_Logo_Video_Ready.gif filter=lfs diff=lfs merge=lfs -text
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text
diff --git a/.gitignore b/.gitignore
index 3f72906b798b3435d6ec00d45b2d8c4a002be398..0f25b866ecf0fddab1b5836b418c1966b98cb00f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,5 @@
+.gradio/
+
# Byte-compiled / optimized / DLL files
__pycache__/
*.py[cod]
@@ -19,18 +21,16 @@ lib64/
parts/
sdist/
var/
+wheels/
+share/python-wheels/
*.egg-info/
.installed.cfg
*.egg
MANIFEST
-# Virtual environments
-venv/
-env/
-ENV/
-.venv/
-
# PyInstaller
+# Usually these files are written by a python script from a template
+# before PyInstaller builds the exe, so as to inject date/other infos into it.
*.manifest
*.spec
@@ -48,34 +48,115 @@ htmlcov/
nosetests.xml
coverage.xml
*.cover
+*.py,cover
.hypothesis/
.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
# Jupyter Notebook
.ipynb_checkpoints
+# IPython
+profile_default/
+ipython_config.py
+
# pyenv
-.python-version
+# For a library or package, you might want to ignore these files since the code is
+# intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+# According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+# However, in case of collaboration, if having platform-specific dependencies or dependencies
+# having no cross-platform support, pipenv may install dependencies that don't work, or not
+# install all needed dependencies.
+#Pipfile.lock
+
+# poetry
+# Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+# This is especially recommended for binary packages to ensure reproducibility, and is more
+# commonly ignored for libraries.
+# https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+# Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+# pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+# in version control.
+# https://pdm.fming.dev/#use-with-ide
+.pdm.toml
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
# mypy
.mypy_cache/
.dmypy.json
+dmypy.json
# Pyre type checker
.pyre/
-# Gradio cache
-log/
-logs/
-
-# System files
-.DS_Store
-Thumbs.db
+# pytype static type analyzer
+.pytype/
-# Lock files
-uv.lock
-poetry.lock
-Pipfile.lock
+# Cython debug symbols
+cython_debug/
-# VSCode
-.vscode/
\ No newline at end of file
+# PyCharm
+# JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+# be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+# and can be added to the global gitignore or merged into this file. For a more nuclear
+# option (not recommended) you can uncomment the following to ignore the entire idea folder.
+#.idea/
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..4bc0c623a659d38b912b9efd8443b18bc4922d49
--- /dev/null
+++ b/.pre-commit-config.yaml
@@ -0,0 +1,32 @@
+repos:
+ - repo: https://github.com/pre-commit/pre-commit-hooks
+ rev: v5.0.0
+ hooks:
+ - id: check-executables-have-shebangs
+ - id: check-json
+ - id: check-merge-conflict
+ - id: check-shebang-scripts-are-executable
+ - id: check-toml
+ - id: check-yaml
+ - id: end-of-file-fixer
+ - id: mixed-line-ending
+ args: ["--fix=lf"]
+ - id: requirements-txt-fixer
+ - id: trailing-whitespace
+ - repo: https://github.com/astral-sh/ruff-pre-commit
+ rev: v0.8.6
+ hooks:
+ - id: ruff
+ args: ["--fix"]
+ - repo: https://github.com/pre-commit/mirrors-mypy
+ rev: v1.14.1
+ hooks:
+ - id: mypy
+ args: ["--ignore-missing-imports"]
+ additional_dependencies:
+ [
+ "types-python-slugify",
+ "types-requests",
+ "types-PyYAML",
+ "types-pytz",
+ ]
diff --git a/.python-version b/.python-version
new file mode 100644
index 0000000000000000000000000000000000000000..c8cfe3959183f8e9a50f83f54cd723f2dc9c252d
--- /dev/null
+++ b/.python-version
@@ -0,0 +1 @@
+3.10
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000000000000000000000000000000000000..854d34838a8695341a86e1cfa239be0014098058
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,8 @@
+{
+ "recommendations": [
+ "ms-python.python",
+ "charliermarsh.ruff",
+ "streetsidesoftware.code-spell-checker",
+ "tamasfe.even-better-toml"
+ ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000000000000000000000000000000000000..6b1ad68d2449998e1085249c2f4828e886ff47e5
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,16 @@
+{
+ "editor.formatOnSave": true,
+ "files.insertFinalNewline": false,
+ "[python]": {
+ "editor.defaultFormatter": "charliermarsh.ruff",
+ "editor.formatOnType": true,
+ "editor.codeActionsOnSave": {
+ "source.fixAll.ruff": "explicit"
+ }
+ },
+ "[jupyter]": {
+ "files.insertFinalNewline": false
+ },
+ "notebook.output.scrolling": true,
+ "notebook.formatOnSave.enabled": true
+}
diff --git a/README.md b/README.md
index 02f4fc48ab74bbdfdd926ac7d24fb822a106adb4..282f3700195e90b2e5a2446f8d96915eeb7cd3b9 100644
--- a/README.md
+++ b/README.md
@@ -4,132 +4,10 @@ emoji: π’
colorFrom: indigo
colorTo: indigo
sdk: gradio
-sdk_version: 5.38.2
+sdk_version: 5.23.3
app_file: app.py
pinned: false
disable_embedding: true
-hf_oauth: true
-hf_oauth_scopes:
-- manage-repos
---
-# AnyCoder - AI Code Generator
-
-AnyCoder is an AI-powered code generator that helps you create applications by describing them in plain English. It supports multiple AI models, multimodal input, website redesign, and one-click deployment to Hugging Face Spaces. The UI is built with Gradio theming for a minimal, modern experience.
-
-## Features
-
-- **Multi-Model Support**: Choose from Moonshot Kimi-K2, DeepSeek V3, DeepSeek R1, ERNIE-4.5-VL, MiniMax M1, Qwen3-235B-A22B, Qwen3-30B-A3B-Instruct-2507, Qwen3-30B-A3B-Thinking-2507, SmolLM3-3B, and GLM-4.1V-9B-Thinking
-- **Flexible Input**: Describe your app in text, upload a UI design image (for multimodal models), provide a reference file (PDF, TXT, MD, CSV, DOCX, or image), or enter a website URL for redesign
-- **Web Search Integration**: Enable real-time web search (Tavily, with advanced search depth) to enhance code generation with up-to-date information and best practices
-- **Code Generation**: Generate code in HTML, Python, JS, and more. Special support for transformers.js apps (outputs index.html, index.js, style.css)
-- **Live Preview**: Instantly preview generated HTML in a sandboxed iframe
-- **Modify Existing Code**: Use search/replace block format to update generated HTML
-- **One-Click Deployment**: Deploy your app to Hugging Face Spaces (Gradio, Streamlit, Static HTML, or Transformers.js) with OAuth login
-- **History & Examples**: Chat-like history of all interactions and quick example prompts for fast prototyping
-- **Minimal, Modern UI**: Built with Gradio 5.x, using only built-in theming and styling (no custom CSS)
-
-## Installation
-
-1. Clone the repository:
-```bash
-git clone
-cd anycoder
-```
-2. Install dependencies:
-```bash
-pip install -r requirements.txt
-```
-3. Set up environment variables:
-```bash
-export HF_TOKEN="your_huggingface_token"
-export TAVILY_API_KEY="your_tavily_api_key" # Optional, for web search feature
-export DASHSCOPE_API_KEY="your_dashscope_api_key" # Required for Qwen3-30B models via DashScope
-```
-
-## Usage
-
-1. Run the application:
-```bash
-python app.py
-```
-2. Open your browser and navigate to the provided URL
-3. Describe your application in the text input field, or:
- - Upload a UI design image (for ERNIE-4.5-VL or GLM-4.1V-9B-Thinking)
- - Upload a reference file (PDF, TXT, MD, CSV, DOCX, or image)
- - Enter a website URL for redesign (the app will extract and analyze the HTML and content)
- - Enable web search for up-to-date information
- - Choose a different AI model or code language
-4. Click "Generate" to create your code
-5. View the generated code in the Code tab or see it in action in the Preview tab
-6. Use the History tab to review previous generations
-7. **Deploy to Space**: Enter a title, select SDK, and click "π Deploy App" to publish your application (OAuth login required)
-
-## Supported Models
-
-- Moonshot Kimi-K2
-- DeepSeek V3
-- DeepSeek R1
-- ERNIE-4.5-VL (multimodal)
-- MiniMax M1
-- Qwen3-235B-A22B
-- Qwen3-4B-Instruct-2507
-- Qwen3-4B-Thinking-2507
-- Qwen3-30B-A3B-Instruct-2507 (via DashScope)
-- Qwen3-30B-A3B-Thinking-2507 (via DashScope)
-- SmolLM3-3B
-- GLM-4.1V-9B-Thinking (multimodal)
-
-## Input Options
-
-- **Text Prompt**: Describe your app or code requirements
-- **Image Upload**: For multimodal models, upload a UI design image to generate code from visuals
-- **File Upload**: Provide a reference file (PDF, TXT, MD, CSV, DOCX, or image) for code generation or text extraction (OCR for images)
-- **Website URL**: Enter a URL to extract and redesign the website (HTML and content are analyzed and modernized)
-
-## Web Search Feature
-
-- Enable the "Web search" toggle to use Tavily for real-time information (requires TAVILY_API_KEY)
-- Uses advanced search depth for best results
-
-## Code Generation & Modification
-
-- Generates code in HTML, Python, JS, and more (selectable via dropdown)
-- Special support for transformers.js apps (outputs index.html, index.js, style.css)
-- Svelte apps
-- For HTML, provides a live preview in a sandboxed iframe
-- For modification requests, uses a search/replace block format to update existing HTML
-
-## Deployment
-
-- Deploy generated apps to Hugging Face Spaces directly from the UI
-- Supported SDKs: Gradio (Python), Streamlit (Python), Static (HTML), Transformers.js
-- OAuth login with Hugging Face is required for deployment to user-owned Spaces
-
-## History & Examples
-
-- Maintains a chat-like history of user/assistant interactions
-- Quick example prompts are available in the sidebar for fast prototyping
-
-## UI/UX
-
-- Built with Gradio 5.x, using only Gradio's built-in theming and styling (no custom CSS)
-- Minimal, uncluttered sidebar and interface
-
-## Environment Variables
-
-- `HF_TOKEN`: Your Hugging Face API token (required)
-- `TAVILY_API_KEY`: Your Tavily API key (optional, for web search)
-
-## Project Structure
-
-```
-anycoder/
-βββ app.py # Main application (all logic and UI)
-βββ requirements.txt
-βββ README.md # This file
-```
-
-## License
-
-[Add your license information here]
\ No newline at end of file
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
\ No newline at end of file
diff --git a/app.py b/app.py
index 2cc964951de0e4e2ff4c0b5c38865c5fff007a4e..7017c18c09b63735c96780a229fed2c8da9329c9 100644
--- a/app.py
+++ b/app.py
@@ -1,4339 +1,54 @@
-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
-
+from app_huggingface import demo as demo_huggingface
+from app_gemini_coder import demo as demo_gemini
+from utils import get_app
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 = """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."""
-
-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
-
-```
-
-```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."""
-
-SVELTE_SYSTEM_PROMPT = """You are an expert Svelte developer creating a modern Svelte application. You will generate ONLY the custom files that need user-specific content for the user's requested application.
-
-IMPORTANT: You MUST output files in the following format. Generate ONLY the files needed for the user's specific request:
-
-```svelte
-
-```
-
-```css
-/* src/app.css content here */
-```
-
-If you need additional components for the user's specific app, add them like:
-```svelte
-
-```
-
-Requirements:
-1. Create a modern, responsive Svelte application based on the user's specific request
-2. Use TypeScript for better type safety
-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 Svelte best practices
-6. Include proper error handling and loading states
-7. Follow accessibility best practices
-8. Use Svelte's reactive features effectively
-9. Include proper component structure and organization
-10. Generate ONLY components that are actually needed for the user's requested application
-
-Files you should generate:
-- src/App.svelte: Main application component (ALWAYS required)
-- src/app.css: Global styles (ALWAYS required)
-- src/lib/[ComponentName].svelte: Additional components (ONLY if needed for the user's specific app)
-
-The other files (index.html, package.json, vite.config.ts, tsconfig files, svelte.config.js, src/main.ts, src/vite-env.d.ts) are provided by the Svelte template and don't need to be generated.
-
-Always output only the two code blocks as shown above, and do not include any explanations or extra text."""
-
-SVELTE_SYSTEM_PROMPT_WITH_SEARCH = """You are an expert Svelte developer creating a modern Svelte application. You have access to real-time web search. When needed, use web search to find the latest information, best practices, or specific Svelte technologies.
-
-You will generate ONLY the custom files that need user-specific content.
-
-IMPORTANT: You MUST output ONLY the custom files in the following format:
-
-```svelte
-
-```
-
-```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 good user experience
-4. Make the application fully responsive for mobile devices
-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
-9. Include proper component structure and organization
-10. Use web search to find the latest Svelte patterns, libraries, and best practices
-
-The files you generate are:
-- src/App.svelte: Main application component (your custom app logic)
-- src/app.css: Global styles (your custom styling)
-
-The other files (index.html, package.json, vite.config.ts, tsconfig files, svelte.config.js, src/main.ts, src/vite-env.d.ts) are provided by the Svelte template and don't need to be generated.
-
-Always output only the two code blocks as shown above, and do not include any explanations or extra text."""
-
-TRANSFORMERS_JS_SYSTEM_PROMPT_WITH_SEARCH = """You are an expert web developer creating a transformers.js application. You have access to real-time web search. When needed, use web search to find the latest information, best practices, or specific technologies for transformers.js.
-
-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
-
-```
-
-```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. Use web search to find current best practices and latest transformers.js features
-4. Create a clean, professional UI with good user experience
-5. Make the application fully responsive for mobile devices
-6. Use modern CSS practices and JavaScript ES6+ features
-7. Include proper error handling and loading states
-8. 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."""
-
-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 ``` 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. Do NOT add the language name at the top of the code output."""
-
-# 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. Do NOT add the language name at the top of the code output."""
-
-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 ``` 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. Do NOT add the language name at the top of the code output."""
-
-# Follow-up system prompt for modifying existing HTML files
-FollowUpSystemPrompt = f"""You are an expert web developer modifying an existing project.
-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:
-- ImportError/ModuleNotFoundError β Fix requirements.txt by adding missing packages
-- Syntax errors in Python code β Fix app.py or the main Python file
-- HTML/CSS/JavaScript errors β Fix the respective HTML/CSS/JS files
-- Configuration errors β Fix config files, Docker files, etc.
-
-For Python applications (Gradio/Streamlit), the project structure typically includes:
-- app.py (main application file)
-- requirements.txt (dependencies)
-- Other supporting files as needed
-
-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.
-10. For multi-file projects, specify which file you're modifying by starting with the filename before the search/replace block.
-
-Example Modifying Code:
-```
-Some explanation...
-{SEARCH_START}
-
Old Title
-{DIVIDER}
-
New Title
-{REPLACE_END}
-{SEARCH_START}
-
]*>", 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 ', html_content.find(' str:
- """Create search/replace blocks that generate and insert ONLY ONE text-to-image result.
-
- Replaces the first detected placeholder; if none found, inserts one image near the top of .
- """
- if not prompt or not prompt.strip():
- return ""
-
- import re
-
- # Detect placeholders similarly to the multi-image version
- placeholder_patterns = [
- r']*src=["\'](?:placeholder|dummy|sample|example)[^"\']*["\'][^>]*>',
- r']*src=["\']https?://via\.placeholder\.com[^"\']*["\'][^>]*>',
- r']*src=["\']https?://picsum\.photos[^"\']*["\'][^>]*>',
- r']*src=["\']https?://dummyimage\.com[^"\']*["\'][^>]*>',
- r']*alt=["\'][^"\']*placeholder[^"\']*["\'][^>]*>',
- r']*class=["\'][^"\']*placeholder[^"\']*["\'][^>]*>',
- r']*id=["\'][^"\']*placeholder[^"\']*["\'][^>]*>',
- r']*src=["\']data:image[^"\']*["\'][^>]*>',
- r']*src=["\']#["\'][^>]*>',
- r']*src=["\']about:blank["\'][^>]*>',
- ]
-
- placeholder_images = []
- for pattern in placeholder_patterns:
- matches = re.findall(pattern, html_content, re.IGNORECASE)
- if matches:
- placeholder_images.extend(matches)
-
- # Fallback to any if no placeholders
- if not placeholder_images:
- img_pattern = r']*>'
- placeholder_images = re.findall(img_pattern, html_content)
-
- # Generate a single image
- image_html = generate_image_with_qwen(prompt, 0)
- if image_html.startswith("Error"):
- return ""
-
- # Replace first placeholder if present
- if placeholder_images:
- placeholder = placeholder_images[0]
- placeholder_clean = re.sub(r'\s+', ' ', placeholder.strip())
- placeholder_variations = [
- placeholder_clean,
- placeholder_clean.replace('"', "'"),
- placeholder_clean.replace("'", '"'),
- re.sub(r'\s+', ' ', placeholder_clean),
- placeholder_clean.replace(' ', ' '),
- ]
- blocks = []
- for variation in placeholder_variations:
- blocks.append(f"""{SEARCH_START}
-{variation}
-{DIVIDER}
-{image_html}
-{REPLACE_END}""")
- return '\n\n'.join(blocks)
-
- # Otherwise insert after
- if '', html_content.find(', just append
- return f"{SEARCH_START}\n\n{DIVIDER}\n{image_html}\n{REPLACE_END}"
-
-def create_image_replacement_blocks_from_input_image(html_content: str, user_prompt: str, input_image_data, max_images: int = 1) -> str:
- """Create search/replace blocks using image-to-image generation with a provided input image.
-
- Mirrors placeholder detection from create_image_replacement_blocks but uses generate_image_to_image.
- """
- if not user_prompt:
- return ""
- import re
-
- placeholder_patterns = [
- r']*src=["\'](?:placeholder|dummy|sample|example)[^"\']*["\'][^>]*>',
- r']*src=["\']https?://via\.placeholder\.com[^"\']*["\'][^>]*>',
- r']*src=["\']https?://picsum\.photos[^"\']*["\'][^>]*>',
- r']*src=["\']https?://dummyimage\.com[^"\']*["\'][^>]*>',
- r']*alt=["\'][^"\']*placeholder[^"\']*["\'][^>]*>',
- r']*class=["\'][^"\']*placeholder[^"\']*["\'][^>]*>',
- r']*id=["\'][^"\']*placeholder[^"\']*["\'][^>]*>',
- r']*src=["\']data:image[^"\']*["\'][^>]*>',
- r']*src=["\']#["\'][^>]*>',
- r']*src=["\']about:blank["\'][^>]*>',
- ]
-
- placeholder_images = []
- for pattern in placeholder_patterns:
- matches = re.findall(pattern, html_content, re.IGNORECASE)
- placeholder_images.extend(matches)
-
- if not placeholder_images:
- img_pattern = r']*>'
- placeholder_images = re.findall(img_pattern, html_content)
-
- div_placeholder_patterns = [
- r'