| import gradio as gr |
| import base64 |
| import io |
| import json |
| from PIL import Image |
| import httpx |
| import html |
| from lzstring import LZString |
| import google.generativeai as genai |
|
|
| |
| DEFAULT_GEMINI_API_KEY = "" |
| DEFAULT_DEEPSEEK_API_KEY = "" |
| DEEPSEEK_BASE_URL = "https://api.deepseek.com" |
|
|
| |
| def analyze_image(image: Image.Image, gemini_api_key: str = "") -> str: |
| """ |
| Analyze an uploaded image and provide a detailed description of its content and layout. |
| |
| Args: |
| image: The PIL Image object to analyze |
| gemini_api_key: Gemini API key for image analysis |
| |
| Returns: |
| A detailed description of the image content, layout, and website type |
| """ |
| if image is None: |
| return "Error: No image provided" |
| |
| |
| api_key = gemini_api_key.strip() if gemini_api_key.strip() else DEFAULT_GEMINI_API_KEY |
| |
| if not api_key: |
| return "Error: Gemini API key not provided" |
| |
| try: |
| |
| genai.configure(api_key=api_key) |
| |
| |
| buffered = io.BytesIO() |
| image.save(buffered, format="PNG") |
| img_str = base64.b64encode(buffered.getvalue()).decode("utf-8") |
| |
| |
| model = genai.GenerativeModel(model_name="gemini-2.5-flash-preview-05-20") |
| prompt = """ |
| Analyze this image and provide a concise description. |
| Describe the main elements, colors, layout, and UI components. |
| Identify what type of website or application this resembles. |
| Focus on structural and visual elements that would be important for recreating the design. |
| """ |
| |
| image_part = {"mime_type": "image/png", "data": img_str} |
| contents = [prompt, image_part] |
| |
| |
| response = model.generate_content(contents) |
| return response.text |
| |
| except Exception as e: |
| return f"Error analyzing image: {str(e)}" |
|
|
| def generate_html_code(description: str, deepseek_api_key: str = "") -> str: |
| """ |
| Generate HTML/CSS/JavaScript code based on a website description. |
| |
| Args: |
| description: Detailed description of the website to generate |
| deepseek_api_key: DeepSeek API key for code generation |
| |
| Returns: |
| Complete HTML code with embedded CSS and JavaScript |
| """ |
| if not description or description.startswith("Error"): |
| return "Error: Invalid or missing description" |
| |
| |
| api_key = deepseek_api_key.strip() if deepseek_api_key.strip() else DEFAULT_DEEPSEEK_API_KEY |
| |
| if not api_key: |
| return "Error: DeepSeek API key not provided" |
| |
| prompt = f""" |
| Generate a complete, responsive webpage based on this description: |
| |
| {description} |
| |
| Requirements: |
| - Use modern HTML5, CSS3, and vanilla JavaScript only |
| - Include TailwindCSS via CDN for styling |
| - Make it responsive and visually appealing |
| - Use placeholder images from https://unsplash.com/ if needed |
| - Include proper semantic HTML structure |
| - Add interactive elements where appropriate |
| - Ensure the design matches the described layout and style |
| |
| Return only the complete HTML code starting with <!DOCTYPE html> and ending with </html>. |
| """ |
| |
| headers = { |
| "Authorization": f"Bearer {api_key}", |
| "Content-Type": "application/json" |
| } |
| |
| data = { |
| "model": "deepseek-chat", |
| "messages": [{"role": "user", "content": prompt}], |
| "temperature": 0.7, |
| "max_tokens": 8000 |
| } |
| |
| try: |
| import requests |
| response = requests.post( |
| f"{DEEPSEEK_BASE_URL}/chat/completions", |
| headers=headers, |
| json=data, |
| timeout=60 |
| ) |
| |
| if response.status_code == 200: |
| result = response.json() |
| html_code = result['choices'][0]['message']['content'] |
| |
| |
| if html_code.strip().startswith("```html"): |
| html_code = html_code.split("```html", 1)[1].strip() |
| if html_code.strip().endswith("```"): |
| html_code = html_code.rsplit("```", 1)[0].strip() |
| |
| |
| if "<!DOCTYPE html>" in html_code and "</html>" in html_code: |
| start = html_code.find("<!DOCTYPE html>") |
| end = html_code.rfind("</html>") + 7 |
| return html_code[start:end] |
| else: |
| return html_code |
| else: |
| return f"Error: API request failed with status {response.status_code}" |
| |
| except Exception as e: |
| return f"Error generating HTML code: {str(e)}" |
|
|
| def create_codesandbox(html_code: str) -> str: |
| """ |
| Create a CodeSandbox project from HTML code. |
| |
| Args: |
| html_code: Complete HTML code to upload to CodeSandbox |
| |
| Returns: |
| CodeSandbox URL or error message |
| """ |
| if not html_code or html_code.startswith("Error"): |
| return "Error: No valid HTML code provided" |
| |
| try: |
| |
| files = { |
| "index.html": { |
| "content": html_code, |
| "isBinary": False |
| }, |
| "package.json": { |
| "content": json.dumps({ |
| "name": "ai-generated-website", |
| "version": "1.0.0", |
| "description": "Website generated from image analysis", |
| "main": "index.html", |
| "scripts": { |
| "start": "serve .", |
| "build": "echo 'No build required'" |
| }, |
| "devDependencies": { |
| "serve": "^14.0.0" |
| } |
| }, indent=2), |
| "isBinary": False |
| } |
| } |
| |
| |
| parameters = { |
| "files": files, |
| "template": "static" |
| } |
| |
| |
| json_str = json.dumps(parameters, separators=(',', ':')) |
| lz = LZString() |
| compressed = lz.compressToBase64(json_str) |
| compressed = compressed.replace('+', '-').replace('/', '_').rstrip('=') |
| |
| |
| codesandbox_url = f"https://codesandbox.io/api/v1/sandboxes/define?parameters={compressed}" |
| |
| |
| import requests |
| response = requests.post(codesandbox_url, timeout=30) |
| |
| if response.status_code == 200: |
| result = response.json() |
| sandbox_id = result.get("sandbox_id") |
| if sandbox_id: |
| return f"https://codesandbox.io/s/{sandbox_id}" |
| |
| |
| return codesandbox_url |
| |
| except Exception as e: |
| return f"Error creating CodeSandbox: {str(e)}" |
|
|
| def screenshot_to_code(image: Image.Image, gemini_api_key: str = "", deepseek_api_key: str = "") -> tuple: |
| """ |
| Complete pipeline: analyze image and generate corresponding HTML code. |
| |
| Args: |
| image: Screenshot image to analyze |
| gemini_api_key: Gemini API key for image analysis |
| deepseek_api_key: DeepSeek API key for code generation |
| |
| Returns: |
| Tuple of (description, html_code) |
| """ |
| |
| description = analyze_image(image, gemini_api_key) |
| |
| if description.startswith("Error"): |
| return description, "Error: Cannot generate code due to image analysis failure" |
| |
| |
| html_code = generate_html_code(description, deepseek_api_key) |
| |
| return description, html_code |
|
|
| |
| with gr.Blocks( |
| theme=gr.themes.Soft(), |
| title="AI Website Generator - MCP Compatible", |
| css=""" |
| .api-section { background: #f8f9fa; padding: 15px; border-radius: 8px; margin: 10px 0; } |
| .tool-section { border: 1px solid #e0e0e0; padding: 15px; border-radius: 8px; margin: 10px 0; } |
| """ |
| ) as app: |
| |
| gr.Markdown(""" |
| # 🚀 AI Website Generator (MCP Compatible) |
| |
| Transform website screenshots into functional HTML code using AI. |
| |
| **Features:** |
| - 📸 Image analysis with Gemini AI |
| - 💻 HTML/CSS/JS code generation with DeepSeek |
| - 🌐 Direct CodeSandbox deployment |
| - 🔧 MCP (Model Context Protocol) compatible |
| |
| **Tools Available:** |
| - `analyze_image`: Analyze website screenshots |
| - `generate_html_code`: Generate HTML from descriptions |
| - `create_codesandbox`: Deploy to CodeSandbox |
| - `screenshot_to_code`: Complete pipeline |
| """) |
| |
| with gr.Tab("🎯 Quick Generate"): |
| with gr.Row(): |
| with gr.Column(scale=1): |
| gr.Markdown("### 📤 Input", elem_classes=["tool-section"]) |
| |
| |
| with gr.Group(): |
| gr.Markdown("**API Keys (Optional)**") |
| gemini_key = gr.Textbox( |
| label="Gemini API Key", |
| type="password", |
| placeholder="Leave empty to use default", |
| value="" |
| ) |
| deepseek_key = gr.Textbox( |
| label="DeepSeek API Key", |
| type="password", |
| placeholder="Leave empty to use default", |
| value="" |
| ) |
| |
| |
| image_input = gr.Image( |
| type="pil", |
| label="Upload Website Screenshot", |
| sources=["upload", "clipboard"] |
| ) |
| |
| generate_btn = gr.Button( |
| "🎨 Generate Website", |
| variant="primary", |
| size="lg" |
| ) |
| |
| with gr.Column(scale=2): |
| gr.Markdown("### 📋 Results", elem_classes=["tool-section"]) |
| |
| description_output = gr.Textbox( |
| label="📝 Image Analysis", |
| lines=6, |
| interactive=False |
| ) |
| |
| html_output = gr.Code( |
| label="💻 Generated HTML Code", |
| language="html", |
| lines=15 |
| ) |
| |
| with gr.Row(): |
| codesandbox_btn = gr.Button("🚀 Deploy to CodeSandbox") |
| codesandbox_output = gr.Textbox( |
| label="CodeSandbox URL", |
| interactive=False |
| ) |
| |
| with gr.Tab("🔧 Individual Tools"): |
| gr.Markdown("### Use individual MCP tools") |
| |
| with gr.Row(): |
| with gr.Column(): |
| gr.Markdown("#### 📸 Image Analysis Tool") |
| img_tool = gr.Image(type="pil", label="Image") |
| gemini_key_tool = gr.Textbox(label="Gemini API Key", type="password") |
| analyze_btn = gr.Button("Analyze Image") |
| analysis_result = gr.Textbox(label="Analysis Result", lines=5) |
| |
| with gr.Column(): |
| gr.Markdown("#### 💻 Code Generation Tool") |
| desc_input = gr.Textbox(label="Description", lines=3) |
| deepseek_key_tool = gr.Textbox(label="DeepSeek API Key", type="password") |
| code_btn = gr.Button("Generate Code") |
| code_result = gr.Code(label="Generated Code", language="html") |
| |
| |
| generate_btn.click( |
| fn=screenshot_to_code, |
| inputs=[image_input, gemini_key, deepseek_key], |
| outputs=[description_output, html_output] |
| ) |
| |
| codesandbox_btn.click( |
| fn=create_codesandbox, |
| inputs=[html_output], |
| outputs=[codesandbox_output] |
| ) |
| |
| analyze_btn.click( |
| fn=analyze_image, |
| inputs=[img_tool, gemini_key_tool], |
| outputs=[analysis_result] |
| ) |
| |
| code_btn.click( |
| fn=generate_html_code, |
| inputs=[desc_input, deepseek_key_tool], |
| outputs=[code_result] |
| ) |
| |
| |
| gr.Examples( |
| examples=[["1.jpg"]], |
| inputs=[image_input], |
| label="📷 Example Screenshots" |
| ) |
|
|
| if __name__ == "__main__": |
| app.launch(mcp_server=True, share=False) |
