|
|
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 |
|
|
|
|
|
import gradio as gr |
|
|
|
|
|
|
|
|
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.") |
|
|
|
|
|
OPENAI_API_KEY = os.getenv("OPENAI_API_KEY") |
|
|
if not OPENAI_API_KEY: |
|
|
print("Warning: OPENAI_API_KEY not set; OpenAI provider will be unavailable.") |
|
|
|
|
|
GEMINI_API_KEY = os.getenv("GEMINI_API_KEY") |
|
|
if not GEMINI_API_KEY: |
|
|
print("Warning: GEMINI_API_KEY not set; Gemini provider will be unavailable.") |
|
|
|
|
|
|
|
|
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_START = "<<<<<<< SEARCH" |
|
|
DIVIDER = "=======" |
|
|
REPLACE_END = ">>>>>>> REPLACE" |
|
|
|
|
|
HTML_SYSTEM_PROMPT = """ |
|
|
You are an expert-level front-end web developer, renowned for creating modern, clean, and fully responsive web pages. Your task is to generate complete, single-file HTML documents based on user requests. |
|
|
|
|
|
**Your Guiding Principles:** |
|
|
1. **Structure is Paramount:** Employ semantic HTML5 tags (`<header>`, `<main>`, `<section>`, `<footer>`, `<nav>`, etc.) to create a logical and accessible document structure. |
|
|
2. **Style with Finesse:** All CSS styling MUST be placed within a single `<style>` tag in the `<head>` of the HTML document. Adhere to modern practices; DO NOT use inline styles (e.g., `<div style="...">`). |
|
|
3. **Modern & Responsive:** Utilize modern CSS techniques like Flexbox and Grid for layout. Ensure the page is fully responsive and looks exceptional on all screen sizes, from mobile phones to widescreen desktops. |
|
|
4. **Accessibility First:** All images (`<img>`) must have descriptive `alt` attributes. Interactive elements should be accessible. |
|
|
5. **Complete & Valid:** Always generate a full, valid HTML5 document, including `<!DOCTYPE html>`, `<html>`, `<head>`, and `<body>` tags. Include a relevant `<title>` in the head. |
|
|
6. **JavaScript Best Practices:** Any necessary JavaScript should be placed in a `<script>` tag just before the closing `</body>` tag. The code must be clean, commented, and efficient. |
|
|
|
|
|
**Output Format:** |
|
|
You MUST output ONLY the raw HTML code enclosed within a single ```html ... ``` code block. Do not include any conversational text, apologies, or explanations before or after the code block. Your response should be immediately usable. |
|
|
""" |
|
|
|
|
|
|
|
|
|
|
|
TRANSFORMERS_JS_SYSTEM_PROMPT = """ |
|
|
You are a specialist in machine learning on the web, with deep expertise in the transformers.js library. Your goal is to create compelling, self-contained AI applications that run entirely in the browser. |
|
|
|
|
|
**Your Core Directives:** |
|
|
1. **Functionality:** The application must be fully functional and demonstrate a clear use case of the transformers.js library (e.g., text generation, sentiment analysis, image classification). |
|
|
2. **User Experience:** Create a clean, intuitive user interface. Include loading indicators, clear instructions, and well-designed input/output areas. |
|
|
3. **Code Quality:** Write modern, commented ES6+ JavaScript. The code should be modular and easy to understand. |
|
|
4. **Dependency Handling:** Import the transformers.js library directly from the CDN (`https://cdn.jsdelivr.net/npm/@xenova/transformers@2`). |
|
|
|
|
|
**Output Format:** |
|
|
Your entire response MUST consist of exactly three markdown code blocks in the following order, with no other text or explanations: |
|
|
""" |
|
|
|
|
|
SYSTEM_PROMPTS = { |
|
|
"html": HTML_SYSTEM_PROMPT, |
|
|
"transformers_js": TRANSFORMERS_JS_SYSTEM_PROMPT, |
|
|
} |
|
|
|
|
|
|
|
|
AVAILABLE_MODELS = [ |
|
|
{"name": "Moonshot Kimi-K2", "id": "moonshotai/Kimi-K2-Instruct", "description": "Moonshot AI Kimi-K2-Instruct model", "category": "Hugging Face"}, |
|
|
{"name": "DeepSeek V3", "id": "deepseek-ai/DeepSeek-V3-0324", "description": "DeepSeek V3 model", "category": "Hugging Face"}, |
|
|
{"name": "DeepSeek R1", "id": "deepseek-ai/DeepSeek-R1-0528", "description": "DeepSeek R1 model", "category": "Hugging Face"}, |
|
|
{"name": "ERNIE-4.5-VL", "id": "baidu/ERNIE-4.5-VL-424B-A47B-Base-PT", "description": "ERNIE-4.5-VL model", "category": "Hugging Face"}, |
|
|
{"name": "MiniMax M1", "id": "MiniMaxAI/MiniMax-M1-80k", "description": "MiniMax M1 model", "category": "Hugging Face"}, |
|
|
{"name": "Qwen3-235B-A22B", "id": "Qwen/Qwen3-235B-A22B", "description": "Qwen3-235B-A22B model", "category": "Hugging Face"}, |
|
|
{"name": "SmolLM3-3B", "id": "HuggingFaceTB/SmolLM3-3B", "description": "SmolLM3-3B model", "category": "Hugging Face"}, |
|
|
{"name": "GLM-4.1V-9B-Thinking", "id": "THUDM/GLM-4.1V-9B-Thinking", "description": "GLM-4.1V-9B-Thinking model", "category": "Hugging Face"}, |
|
|
{"name": "OpenAI GPT-4", "id": "openai/gpt-4", "description": "OpenAI GPT-4 model", "category": "OpenAI"}, |
|
|
{"name": "Gemini Pro", "id": "gemini/pro", "description": "Google Gemini Pro model", "category": "Gemini"}, |
|
|
{"name": "Fireworks AI", "id": "fireworks-ai/fireworks-v1", "description": "Fireworks AI model", "category": "Fireworks AI"}, |
|
|
] |
|
|
|
|
|
|
|
|
|
|
|
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'"}, |
|
|
{"title": "Transformers.js App", "description": "Create a transformers.js application with AI/ML functionality using the transformers.js library"} |
|
|
] |
