Hugging Face's logo

Spaces:
akhaliq
/
anycoder
Running

App Files Community
66
anycoder / README.md
akhaliq's picture
akhaliq HF Staff
update
8e9e1ab
preview code
|
raw
history blame
12.3 kB
metadata
title: Anycoder
emoji: 🏢
colorFrom: indigo
colorTo: indigo
sdk: gradio
sdk_version: 5.38.0
app_file: app.py
pinned: false
disable_embedding: true
hf_oauth: true
hf_oauth_scopes:
  - manage-repos

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:
git clone <repository-url>
cd anycoder
  1. Install dependencies:
pip install -r requirements.txt
  1. Set up environment variables:
export HF_TOKEN="your_huggingface_token"
export TAVILY_API_KEY="your_tavily_api_key"  # Optional, for web search feature

Usage

  1. Run the application:
python app.py

  1. Open your browser and navigate to the provided URL

  2. Describe your application in the text input field

  3. 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

  4. Click "Generate" to create your code

  5. View the generated code in the Code Editor tab or see it in action in the Live Preview tab

  6. 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: <div>Weather app HTML...</div>
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
  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:

    export HF_TOKEN="your_huggingface_token"

  2. Install dependencies:

    uv sync

  3. Run the application:

    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 

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:
pip install -r requirements.txt
  1. Set your Hugging Face API token as an environment variable:
export HF_TOKEN="your_huggingface_token"
  1. Run the application:
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)