Spaces:
Running
Running
| title: Anycoder | |
| emoji: 🏢 | |
| colorFrom: indigo | |
| colorTo: indigo | |
| sdk: gradio | |
| sdk_version: 5.35.0 | |
| app_file: app.py | |
| pinned: false | |
| disable_embedding: true | |
| hf_oauth: true | |
| 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 | |
| ## Installation | |
| 1. Clone the repository: | |
| ```bash | |
| git clone <repository-url> | |
| 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 | |
| ## 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) |