update readme

README.md

@@ -14,23 +14,21 @@ hf_oauth_scopes:
 # 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.
+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 pure Gradio theming for a minimal, modern experience.
 
 ## 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
+- **Multi-Model Support**: Choose from Moonshot Kimi-K2, DeepSeek V3, DeepSeek R1, ERNIE-4.5-VL, MiniMax M1, Qwen3-235B-A22B, 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
 
@@ -39,12 +37,10 @@ AnyCoder is an AI-powered code generator that helps you create applications by d
 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"
@@ -57,310 +53,78 @@ export TAVILY_API_KEY="your_tavily_api_key"  # Optional, for web search feature
 ```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)
 
-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
+## Supported Models
 
-### Example Deployment
+- Moonshot Kimi-K2
+- DeepSeek V3
+- DeepSeek R1
+- ERNIE-4.5-VL (multimodal)
+- MiniMax M1
+- Qwen3-235B-A22B
+- SmolLM3-3B
+- GLM-4.1V-9B-Thinking (multimodal)
 
-```
-Title: "My Weather Dashboard"
-Generated Code: <div>Weather app HTML...</div>
-Result: https://huggingface.co/spaces/my-weather-dashboard-1234567890
-```
+## Input Options
 
-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
+- **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
 
-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:
+- Enable the "Web search" toggle to use Tavily for real-time information (requires TAVILY_API_KEY)
+- Uses advanced search depth for best results
 
-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
+## Code Generation & Modification
 
-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
+- Generates code in HTML, Python, JS, and more (selectable via dropdown)
+- Special support for transformers.js apps (outputs index.html, index.js, style.css)
+- For HTML, provides a live preview in a sandboxed iframe
+- For modification requests, uses a search/replace block format to update existing HTML
 
-### How to Use Website Redesign
+## Deployment
 
-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://`
+- 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
 
-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"
+## History & Examples
 
-3. **Enable Web Search**: Toggle the web search feature to get the latest design trends and best practices
+- Maintains a chat-like history of user/assistant interactions
+- Quick example prompts are available in the sidebar for fast prototyping
 
-4. **Generate**: Click "Generate" to create your redesigned website
+## UI/UX
 
-### 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
+- 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)
 
-## 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
+├── app.py          # Main application (all logic and UI)
+├── requirements.txt
+├── 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
+## License
 
-- Todo App
-- Calculator
-- Weather Dashboard
-- Chat Interface
-- E-commerce Product Card
-- Login Form
-- Dashboard Layout
-- Data Table
-- Image Gallery
-- UI from Image (multimodal)
+[Add your license information here]