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 ef821fedd97d9865aef70afe03b272c77cb2fd18..282f3700195e90b2e5a2446f8d96915eeb7cd3b9 100644 --- a/README.md +++ b/README.md @@ -4,363 +4,10 @@ emoji: 🏢 colorFrom: indigo colorTo: indigo sdk: gradio -sdk_version: 5.38.0 +sdk_version: 5.23.3 app_file: app.py pinned: false disable_embedding: true -hf_oauth: true -hf_oauth_scopes: - - manage-repos # Needed to create/upload/delete Spaces on behalf of the user -# Note: 'openid' and 'profile' are always included by default and should not be listed here. --- -Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference - -# 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 and can generate HTML/CSS/JavaScript code for web applications. - -## Features - -- **Multi-Model Support**: Choose from various AI models including DeepSeek, ERNIE-4.5-VL, MiniMax, and Qwen -- **Image-to-Code**: Upload UI design images and get corresponding HTML/CSS code (ERNIE-4.5-VL model) -- **Image Text Extraction**: Upload images and extract text using OCR for processing -- **Website Redesign**: Enter a website URL to extract content and redesign it with modern, responsive layouts -- **Live Preview**: See your generated code in action with the built-in sandbox -- **Web Search Integration**: Enable real-time web search to get the latest information and best practices -- **Chat History**: Keep track of your conversations and generated code -- **Quick Examples**: Pre-built examples to get you started quickly -- **🚀 One-Click Deployment**: Deploy your generated applications directly to Hugging Face Spaces - -## 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 -``` - -## 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 - -4. Optionally: - - Upload a UI design image (for ERNIE-4.5-VL model) - - Enable web search to get the latest information - - Choose a different AI model - -5. Click "Generate" to create your code - -6. View the generated code in the Code Editor tab or see it in action in the Live Preview tab - -7. **Deploy to Space**: Enter a title and click "🚀 Deploy to Space" to publish your application - -## 🚀 Deployment Feature - -AnyCoder now includes one-click deployment to Hugging Face Spaces! This feature allows you to: - -### How to Deploy - -1. **Login**: Click the "Sign in with Hugging Face" button in the sidebar -2. **Authorize Permissions**: When the authorization page appears, make sure to grant ALL the requested permissions: - - ✅ **read-repos** - Read access to repositories - - ✅ **write-repos** - Write access to create repositories - - ✅ **manage-repos** - Manage repository settings -3. **Complete Authorization**: Click "Authorize" to complete the login -4. **Generate Code**: Generate some HTML code using the AI -5. **Enter Title**: In the sidebar, enter a title for your space (e.g., "My Todo App") -6. **Deploy**: Click the "🚀 Deploy to Space" button -7. **Share**: Get a shareable URL for your deployed application - -**Important**: You must grant ALL three permissions during the OAuth authorization process. If you only grant partial permissions, deployment will fail. - -**Note**: You need to be logged in with your Hugging Face account to deploy. This ensures that: -- Deployments are created under your own account namespace -- You can manage and update your spaces from your Hugging Face dashboard -- Each deployment gets a unique URL under your username - -**Technical Note**: The deployment uses your personal OAuth token to create spaces under your account, ensuring full security and ownership of your deployed applications. - -### Troubleshooting Deployment Issues - -If you encounter permission errors during deployment: - -1. **Check Permissions**: Make sure you granted all three required permissions during login -2. **Logout and Login Again**: Click logout and sign in again, ensuring all permissions are granted -3. **Account Status**: Verify your Hugging Face account allows repository creation -4. **Network Issues**: Check your internet connection and try again -5. **Contact Support**: If issues persist, contact Hugging Face support - -### What Gets Deployed - -- **Complete HTML Application**: Your generated code wrapped in a professional template -- **Responsive Design**: Mobile-friendly layout with modern styling -- **Project Documentation**: README with project details and prompts used -- **Live URL**: Publicly accessible URL that anyone can visit - -### Deployment Benefits - -- **Instant Publishing**: No need to set up hosting or domains -- **Shareable**: Get a public URL to share with others -- **Professional**: Clean, branded presentation of your work -- **Version Control**: Each deployment creates a new space with timestamp -- **Free Hosting**: Hosted on Hugging Face's infrastructure - -### Example Deployment - -``` -Title: "My Weather Dashboard" -Generated Code:
Weather app HTML...
-Result: https://huggingface.co/spaces/my-weather-dashboard-1234567890 -``` - -The deployed space will include: -- Your application with professional styling -- A header with your title and AnyCoder branding -- A footer with attribution -- A README documenting the project - -## Web Search Feature - -The web search feature uses Tavily to provide real-time information when generating code. To enable this feature: - -1. Get a free Tavily API key from [Tavily Platform](https://tavily.com/) -2. Set the `TAVILY_API_KEY` environment variable -3. Toggle the "🔍 Enable Web Search" checkbox in the sidebar - -When enabled, the AI will search the web for the latest information, best practices, and technologies related to your request. - -## Image Text Extraction - -The application supports extracting text from images using OCR (Optical Character Recognition). This feature allows you to: - -1. Upload image files (JPG, PNG, BMP, TIFF, GIF, WebP) through the file input -2. Automatically extract text from the images using Tesseract OCR -3. Include the extracted text in your prompts for code generation - -### Setting up OCR - -To use the image text extraction feature, you need to install Tesseract OCR on your system. See `install_tesseract.md` for detailed installation instructions. - -**Example usage:** -- Upload an image containing text (like a screenshot, document, or handwritten notes) -- The application will extract the text and include it in your prompt -- You can then ask the AI to process, summarize, or work with the extracted text - -## Website Redesign Feature - -The website redesign feature allows you to extract content from existing websites and generate modern, responsive redesigns. This feature: - -1. **Extracts Website Content**: Automatically scrapes the target website to extract: - - Page title and meta description - - Navigation menu structure - - Main content sections - - Images and their descriptions - - Overall page structure and purpose - -2. **Generates Modern Redesigns**: Creates improved versions with: - - Modern, responsive layouts - - Enhanced user experience - - Better accessibility - - Mobile-first design principles - - Current design trends and best practices - -### How to Use Website Redesign - -1. **Enter a Website URL**: In the "🌐 Website URL (for redesign)" field, enter the URL of the website you want to redesign - - Example: `https://example.com` - - The URL can be with or without `https://` - -2. **Add Custom Requirements**: Optionally describe specific improvements you want: - - "Make it more modern and minimalist" - - "Add a dark mode toggle" - - "Improve the mobile layout" - - "Use a different color scheme" - -3. **Enable Web Search**: Toggle the web search feature to get the latest design trends and best practices - -4. **Generate**: Click "Generate" to create your redesigned website - -### Example Usage - -``` -URL: https://example.com -Description: Redesign this website with a modern, minimalist approach. Use a clean typography and improve the mobile experience. -``` - -The AI will analyze the original website content and create a completely redesigned version that maintains the core functionality while providing a better user experience. - -### Supported Websites - -The feature works with most public websites, including: -- Business websites -- Portfolio sites -- Blog platforms -- E-commerce sites -- Landing pages -- Documentation sites - -**Note**: Some websites may block automated access or require JavaScript to load content. In such cases, the extraction may be limited. - -## Available Models - -- **DeepSeek V3**: Advanced code generation model -- **DeepSeek R1**: Specialized for code generation tasks -- **ERNIE-4.5-VL**: Multimodal model with image support -- **MiniMax M1**: General-purpose AI model -- **Qwen3-235B-A22B**: Large language model for code generation - -## Environment Variables - -- `HF_TOKEN`: Your Hugging Face API token (required) -- `TAVILY_API_KEY`: Your Tavily API key (optional, for web search) - -## License - -[Add your license information here] - -## Project Structure - -``` -anycoder/ -├── app.py # Main application (everything included) -├── app.css # Basic styling -├── pyproject.toml # Dependencies -└── README.md # This file -``` - -## Setup - -1. Set your Hugging Face API token: - ```bash - export HF_TOKEN="your_huggingface_token" - ``` - -2. Install dependencies: - ```bash - uv sync - ``` - -3. Run the application: - ```bash - uv run python app.py - ``` - -## Usage - -1. **Sign in with your Hugging Face account** using the login button at the top left. -2. Enter your application requirements in the text area -3. Click "send" to generate code -4. View the generated code in the code drawer -5. See the live preview in the sandbox area -6. Use example cards for quick prompts - -## Code Example - -```python -import os -from huggingface_hub import InferenceClient - -client = InferenceClient( - provider="novita", - api_key=os.environ["HF_TOKEN"], - bill_to="huggingface" -) - -completion = client.chat.completions.create( - model="deepseek-ai/DeepSeek-V3-0324", - messages=[ - { - "role": "user", - "content": "Create a simple todo app" - } - ], -) -``` - -## Architecture - -The application uses: -- **Gradio**: For the web interface -- **Hugging Face Hub**: For model inference -- **ModelScope Studio**: For UI components -- **OAuth Login**: Requires users to sign in with Hugging Face for code generation -- **Streaming**: For real-time code generation - -# Hugging Face Coder - -A Gradio-based application that uses Hugging Face models to generate code based on user requirements. The app supports both text-only and multimodal (text + image) code generation. - -## Features - -- **Multiple Model Support**: DeepSeek V3, DeepSeek R1, and ERNIE-4.5-VL -- **Multimodal Input**: Upload images to help describe your requirements -- **Real-time Code Generation**: Stream responses from the models -- **Live Preview**: See your generated code in action with the built-in sandbox -- **History Management**: Keep track of your previous generations -- **Example Templates**: Quick-start with predefined application templates - -## Setup - -1. Install dependencies: -```bash -pip install -r requirements.txt -``` - -2. Set your Hugging Face API token as an environment variable: -```bash -export HF_TOKEN="your_huggingface_token" -``` - -3. Run the application: -```bash -python app.py -``` - -## Usage - -1. **Text-only Generation**: Simply type your requirements in the text area -2. **Multimodal Generation**: Upload an image and describe what you want to create -3. **Model Selection**: Switch between different models using the model selector -4. **Examples**: Use the provided example templates to get started quickly - -## Supported Models - -- **DeepSeek V3**: General code generation -- **DeepSeek R1**: Advanced code generation -- **ERNIE-4.5-VL**: Multimodal code generation with image understanding - -## Environment Variables - -- `HF_TOKEN`: Your Hugging Face API token (required) - -## Examples - -- Todo App -- Calculator -- Weather Dashboard -- Chat Interface -- E-commerce Product Card -- Login Form -- Dashboard Layout -- Data Table -- Image Gallery -- UI from Image (multimodal) \ 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 a4186d47941e6847a901d7044eb50acedffea45e..7017c18c09b63735c96780a229fed2c8da9329c9 100644 --- a/app.py +++ b/app.py @@ -1,1363 +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 - +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 - -# 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 ``` 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 ``` 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} -

Old Title

-{DIVIDER} -

New Title

-{REPLACE_END} -{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": "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" - } -] - -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'" - } -] - -# 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.""" - 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() - 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""" - - - - - - - - - {code} - - - """ - encoded_html = base64.b64encode(wrapped_code.encode('utf-8')).decode('utf-8') - data_uri = f"data:text/html;charset=utf-8;base64,{encoded_html}" - iframe = f'' - return iframe - -def demo_card_click(e: gr.EventData): - try: - # Get the index from the event data - if hasattr(e, '_data') and e._data: - # Try different ways to get the index - if 'index' in e._data: - index = e._data['index'] - elif 'component' in e._data and 'index' in e._data['component']: - index = e._data['component']['index'] - elif 'target' in e._data and 'index' in e._data['target']: - index = e._data['target']['index'] - else: - # If we can't get the index, try to extract it from the card data - index = 0 - else: - index = 0 - - # Ensure index is within bounds - if index >= len(DEMO_LIST): - index = 0 - - return DEMO_LIST[index]['description'] - except (KeyError, IndexError, AttributeError) as e: - # Return the first demo description as fallback - return DEMO_LIST[0]['description'] - -def extract_text_from_image(image_path): - """Extract text from image using OCR""" - try: - # Check if tesseract is available - try: - pytesseract.get_tesseract_version() - except Exception: - return "Error: Tesseract OCR is not installed. Please install Tesseract to extract text from images. See install_tesseract.md for instructions." - - # Read image using OpenCV - image = cv2.imread(image_path) - if image is None: - return "Error: Could not read image file" - - # Convert to RGB (OpenCV uses BGR) - image_rgb = cv2.cvtColor(image, cv2.COLOR_BGR2RGB) - - # Preprocess image for better OCR results - # Convert to grayscale - gray = cv2.cvtColor(image_rgb, cv2.COLOR_RGB2GRAY) - - # Apply thresholding to get binary image - _, binary = cv2.threshold(gray, 0, 255, cv2.THRESH_BINARY + cv2.THRESH_OTSU) - - # Extract text using pytesseract - text = pytesseract.image_to_string(binary, config='--psm 6') - - return text.strip() if text.strip() else "No text found in image" - - except Exception as e: - return f"Error extracting text from image: {e}" -def extract_text_from_file(file_path): - if not file_path: - return "" - mime, _ = mimetypes.guess_type(file_path) - ext = os.path.splitext(file_path)[1].lower() - try: - if ext == ".pdf": - with open(file_path, "rb") as f: - reader = PyPDF2.PdfReader(f) - return "\n".join(page.extract_text() or "" for page in reader.pages) - elif ext in [".txt", ".md"]: - with open(file_path, "r", encoding="utf-8") as f: - return f.read() - elif ext == ".csv": - with open(file_path, "r", encoding="utf-8") as f: - return f.read() - elif ext == ".docx": - doc = docx.Document(file_path) - return "\n".join([para.text for para in doc.paragraphs]) - elif ext.lower() in [".jpg", ".jpeg", ".png", ".bmp", ".tiff", ".tif", ".gif", ".webp"]: - return extract_text_from_image(file_path) - else: - return "" - except Exception as e: - return f"Error extracting text: {e}" - -def extract_website_content(url: str) -> str: - """Extract HTML code and content from a website URL""" - try: - # Validate URL - parsed_url = urlparse(url) - if not parsed_url.scheme: - url = "https://" + url - parsed_url = urlparse(url) - - if not parsed_url.netloc: - return "Error: Invalid URL provided" - - # Set comprehensive headers to mimic a real browser request - headers = { - 'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36', - 'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8', - 'Accept-Language': 'en-US,en;q=0.9', - 'Accept-Encoding': 'gzip, deflate, br', - 'DNT': '1', - 'Connection': 'keep-alive', - 'Upgrade-Insecure-Requests': '1', - 'Sec-Fetch-Dest': 'document', - 'Sec-Fetch-Mode': 'navigate', - 'Sec-Fetch-Site': 'none', - 'Sec-Fetch-User': '?1', - 'Cache-Control': 'max-age=0' - } - - # Create a session to maintain cookies and handle redirects - session = requests.Session() - session.headers.update(headers) - - # Make the request with retry logic - max_retries = 3 - for attempt in range(max_retries): - try: - response = session.get(url, timeout=15, allow_redirects=True) - response.raise_for_status() - break - except requests.exceptions.HTTPError as e: - if e.response.status_code == 403 and attempt < max_retries - 1: - # Try with different User-Agent on 403 - session.headers['User-Agent'] = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36' - continue - else: - raise - - # Get the raw HTML content with proper encoding - try: - # Try to get the content with automatic encoding detection - response.encoding = response.apparent_encoding - raw_html = response.text - except: - # Fallback to UTF-8 if encoding detection fails - raw_html = response.content.decode('utf-8', errors='ignore') - - # Debug: Check if we got valid HTML - if not raw_html.strip().startswith(' 10: - print(f"Warning: This site has {len(script_tags)} script tags - it may be a JavaScript-heavy site") - print("The content might be loaded dynamically and not available in the initial HTML") - - # Extract title - title = soup.find('title') - title_text = title.get_text().strip() if title else "No title found" - - # Extract meta description - meta_desc = soup.find('meta', attrs={'name': 'description'}) - description = meta_desc.get('content', '') if meta_desc else "" - - # Extract main content areas for analysis - content_sections = [] - main_selectors = [ - 'main', 'article', '.content', '.main-content', '.post-content', - '#content', '#main', '.entry-content', '.post-body' - ] - - for selector in main_selectors: - elements = soup.select(selector) - for element in elements: - text = element.get_text().strip() - if len(text) > 100: # Only include substantial content - content_sections.append(text) - - # Extract navigation links for analysis - nav_links = [] - nav_elements = soup.find_all(['nav', 'header']) - for nav in nav_elements: - links = nav.find_all('a') - for link in links: - link_text = link.get_text().strip() - link_href = link.get('href', '') - if link_text and link_href: - nav_links.append(f"{link_text}: {link_href}") - - # Extract and fix image URLs in the HTML - img_elements = soup.find_all('img') - for img in img_elements: - src = img.get('src', '') - if src: - # Handle different URL formats - if src.startswith('//'): - # Protocol-relative URL - absolute_src = 'https:' + src - img['src'] = absolute_src - elif src.startswith('/'): - # Root-relative URL - absolute_src = urljoin(url, src) - img['src'] = absolute_src - elif not src.startswith(('http://', 'https://')): - # Relative URL - absolute_src = urljoin(url, src) - img['src'] = absolute_src - # If it's already absolute, keep it as is - - # Also check for data-src (lazy loading) and other common attributes - data_src = img.get('data-src', '') - if data_src and not src: - # Use data-src if src is empty - if data_src.startswith('//'): - absolute_data_src = 'https:' + data_src - img['src'] = absolute_data_src - elif data_src.startswith('/'): - absolute_data_src = urljoin(url, data_src) - img['src'] = absolute_data_src - elif not data_src.startswith(('http://', 'https://')): - absolute_data_src = urljoin(url, data_src) - img['src'] = absolute_data_src - else: - img['src'] = data_src - - # Also fix background image URLs in style attributes - elements_with_style = soup.find_all(attrs={'style': True}) - for element in elements_with_style: - style_attr = element.get('style', '') - # Find and replace relative URLs in background-image - import re - bg_pattern = r'background-image:\s*url\(["\']?([^"\']+)["\']?\)' - matches = re.findall(bg_pattern, style_attr, re.IGNORECASE) - for match in matches: - if match: - if match.startswith('//'): - absolute_bg = 'https:' + match - style_attr = style_attr.replace(match, absolute_bg) - elif match.startswith('/'): - absolute_bg = urljoin(url, match) - style_attr = style_attr.replace(match, absolute_bg) - elif not match.startswith(('http://', 'https://')): - absolute_bg = urljoin(url, match) - style_attr = style_attr.replace(match, absolute_bg) - element['style'] = style_attr - - # Fix background images in