Create app.py

app.py

@@ -0,0 +1,570 @@
+import base64
+import io
+import json
+import os
+import re
+import tempfile
+from typing import Tuple, Optional
+
+import gradio as gr
+import httpx
+from PIL import Image
+from lzstring import LZString
+
+# =========================
+# Configuration
+# =========================
+NEBIUS_BASE_URL = "https://api.studio.nebius.com/v1/"
+
+# Add more selectable models (you can also type your own in the dropdowns)
+DEFAULT_VISION_MODEL = "Qwen/Qwen2.5-VL-72B-Instruct"
+VISION_MODELS = [
+    DEFAULT_VISION_MODEL,
+    "Qwen/Qwen2.5-VL-7B-Instruct",
+    "Qwen/Qwen2-VL-72B-Instruct",
+]
+
+DEFAULT_CODE_MODEL = "deepseek-ai/DeepSeek-V3-0324"
+CODE_MODELS = [
+    DEFAULT_CODE_MODEL,
+    "Qwen/Qwen2.5-Coder-32B-Instruct",
+    "Meta-Llama-3.1-70B-Instruct",
+    "Mistral-7B-Instruct",
+]
+
+# More forgiving timeouts and built-in retries
+HTTP_TIMEOUTS = httpx.Timeout(connect=10.0, read=120.0, write=30.0, pool=60.0)
+HTTP_RETRIES = 2  # extra attempts on transient failures
+
+# Use the same default key you provided
+DEFAULT_NEBIUS_API_KEY = (
+    "eyJhbGciOiJIUzI1NiIsImtpZCI6IlV6SXJWd1h0dnprLVRvdzlLZWstc0M1akptWXBvX1VaVkxUZlpnMDRlOFUiLCJ0eXAiOiJKV1QifQ.eyJzdWIiOiJnb29nbGUtb2F1dGgyfDEwNTA1MTQzMDg2MDMwMzIxNDEwMiIsInNjb3BlIjoib3BlbmlkIG9mZmxpbmVfYWNjZXNzIiwiaXNzIjoiYXBpX2tleV9pc3N1ZXIiLCJhdWQiOlsiaHR0cHM6Ly9uZWJpdXMtaW5mZXJlbmNlLmV1LmF1dGgwLmNvbS9hcGkvdjIvIl0sImV4cCI6MTkwNjU5ODA0NCwidXVpZCI6ImNkOGFiMWZlLTIxN2QtNDJlMy04OWUwLWM1YTg4MjcwMGVhNyIsIm5hbWUiOiJodW5nZ2luZyIsImV4cGlyZXNfYXQiOiIyMDMwLTA2LTAyVDAyOjM0OjA0KzAwMDAifQ.MA52QuIiNruK7_lX688RXAEI2TkcCOjcf_02XrpnhI8"
+)
+
+
+# =========================
+# Helpers
+# =========================
+def get_api_key(user_key: str = "") -> str:
+    """
+    Resolve the Nebius API key from:
+    1) The provided user_key field
+    2) The NEBIUS_API_KEY environment variable
+    3) The built-in DEFAULT_NEBIUS_API_KEY
+    """
+    return (user_key or "").strip() or os.getenv("NEBIUS_API_KEY", "").strip() or DEFAULT_NEBIUS_API_KEY
+
+
+def call_chat_completions(
+    model: str,
+    messages: list,
+    api_key: str,
+    max_tokens: int = 2000,
+    temperature: float = 0.7,
+) -> str:
+    """
+    Calls the Nebius OpenAI-compatible chat completions endpoint via HTTP.
+    Returns the assistant message content string.
+    Includes retries and increased read timeout to mitigate timeouts.
+    """
+    if not api_key:
+        raise ValueError("Nebius API key is required.")
+
+    url = f"{NEBIUS_BASE_URL}chat/completions"
+    payload = {
+        "model": model,
+        "messages": messages,
+        "max_tokens": max_tokens,
+        "temperature": temperature,
+    }
+    headers = {"Authorization": f"Bearer {api_key}", "Content-Type": "application/json"}
+
+    transport = httpx.HTTPTransport(retries=HTTP_RETRIES)
+    with httpx.Client(timeout=HTTP_TIMEOUTS, transport=transport) as client:
+        resp = client.post(url, headers=headers, json=payload)
+        resp.raise_for_status()
+        data = resp.json()
+
+    choices = data.get("choices", [])
+    if not choices:
+        raise RuntimeError("No choices returned from the API.")
+    content = choices[0].get("message", {}).get("content", "")
+    if not content:
+        raise RuntimeError("Empty content returned from the API.")
+    return content
+
+
+def _strip_fenced_code(text: str) -> str:
+    """
+    Removes ```html ... ``` fences from a content block if present.
+    """
+    s = text.strip()
+    if s.startswith("```html"):
+        s = s.split("```html", 1)[1].strip()
+    if s.endswith("```"):
+        s = s.rsplit("```", 1)[0].strip()
+    return s
+
+
+def _split_assets(html_code: str) -> Tuple[str, str, str]:
+    """
+    Split inline <style> and <script> (without src) from the HTML into separate CSS and JS strings.
+    Return tuple: (updated_html, css_text, js_text)
+    """
+    if not html_code:
+        return html_code, "", ""
+
+    html = html_code
+
+    # Collect and remove style blocks
+    css_blocks = re.findall(r"<style[^>]*>(.*?)</style>", html, flags=re.IGNORECASE | re.DOTALL)
+    css_text = "\n\n".join(block.strip() for block in css_blocks if block.strip())
+    html = re.sub(r"<style[^>]*>.*?</style>", "", html, flags=re.IGNORECASE | re.DOTALL)
+
+    # Collect and remove inline scripts (no src)
+    js_blocks = []
+    def _script_repl(m):
+        attrs = m.group("attrs") or ""
+        code = m.group("code") or ""
+        if "src=" in attrs.lower():
+            return m.group(0)  # keep external scripts
+        if code.strip():
+            js_blocks.append(code.strip())
+        return ""  # remove inline script
+    html = re.sub(r"<script(?P<attrs>[^>]*)>(?P<code>.*?)</script>", _script_repl, html, flags=re.IGNORECASE | re.DOTALL)
+    js_text = "\n\n".join(js_blocks)
+
+    # If CSS collected, ensure link tag is added
+    if css_text:
+        if re.search(r"</head>", html, flags=re.IGNORECASE):
+            html = re.sub(r"</head>", '  <link rel="stylesheet" href="style.css">\n</head>', html, flags=re.IGNORECASE)
+        else:
+            # add a minimal head if missing
+            html = f"<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"utf-8\"/>\n  <link rel=\"stylesheet\" href=\"style.css\">\n</head>\n{html}"
+
+    # If JS collected, ensure script tag before </body> or at end
+    if js_text:
+        if re.search(r"</body>", html, flags=re.IGNORECASE):
+            html = re.sub(r"</body>", '  <script src="script.js"></script>\n</body>', html, flags=re.IGNORECASE)
+        else:
+            html = html.rstrip() + '\n  <script src="script.js"></script>\n'
+
+    return html, css_text, js_text
+
+
+# =========================
+# Core functions
+# =========================
+def analyze_image(
+    image: Optional[Image.Image],
+    nebius_api_key: str = "",
+    vision_model: str = DEFAULT_VISION_MODEL,
+) -> str:
+    """
+    Analyze an uploaded image and provide a concise description of its content and layout.
+    """
+    if image is None:
+        return "Error: No image provided."
+
+    api_key = get_api_key(nebius_api_key)
+    if not api_key:
+        return "Error: Nebius API key not provided."
+
+    try:
+        # Encode image to base64
+        buffered = io.BytesIO()
+        image.save(buffered, format="PNG")
+        img_b64 = base64.b64encode(buffered.getvalue()).decode("utf-8")
+
+        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."
+        )
+
+        messages = [
+            {
+                "role": "user",
+                "content": [
+                    {"type": "text", "text": prompt},
+                    {"type": "image_url", "image_url": {"url": f"data:image/png;base64,{img_b64}"}},
+                ],
+            }
+        ]
+
+        content = call_chat_completions(
+            model=vision_model,
+            messages=messages,
+            api_key=api_key,
+            max_tokens=1000,
+            temperature=0.7,
+        )
+        return content
+    except Exception as e:
+        return f"Error analyzing image: {str(e)}"
+
+
+def generate_html_code(
+    description: str,
+    nebius_api_key: str = "",
+    code_model: str = DEFAULT_CODE_MODEL,
+    code_max_tokens: int = 4000,
+    code_temperature: float = 0.7,
+) -> str:
+    """
+    Generate HTML/CSS/JavaScript code based on a website description.
+    """
+    if not description or description.startswith("Error"):
+        return "Error: Invalid or missing description."
+
+    api_key = get_api_key(nebius_api_key)
+    if not api_key:
+        return "Error: Nebius 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>.
+""".strip()
+
+    try:
+        messages = [{"role": "user", "content": prompt}]
+        content = call_chat_completions(
+            model=code_model,
+            messages=messages,
+            api_key=api_key,
+            max_tokens=code_max_tokens,
+            temperature=code_temperature,
+        )
+        html_code = _strip_fenced_code(content)
+
+        if "<!DOCTYPE html>" in html_code and "</html>" in html_code:
+            start = html_code.find("<!DOCTYPE html>")
+            end = html_code.rfind("</html>") + len("</html>")
+            return html_code[start:end]
+        return html_code
+    except (httpx.ReadTimeout, httpx.TimeoutException):
+        # Retry once with a reduced token budget to improve latency
+        try:
+            reduced_tokens = max(1000, int(code_max_tokens * 0.6))
+            messages = [{"role": "user", "content": prompt}]
+            content = call_chat_completions(
+                model=code_model,
+                messages=messages,
+                api_key=api_key,
+                max_tokens=reduced_tokens,
+                temperature=code_temperature,
+            )
+            html_code = _strip_fenced_code(content)
+            if "<!DOCTYPE html>" in html_code and "</html>" in html_code:
+                start = html_code.find("<!DOCTYPE html>")
+                end = html_code.rfind("</html>") + len("</html>")
+                return html_code[start:end]
+            return html_code
+        except Exception as e2:
+            return f"Error generating HTML code after retry: {str(e2)}. Tips: lower Max tokens, pick a smaller/faster model, or try again."
+    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.
+    Splits inline CSS/JS into separate files so you can open index.html and style.css directly.
+    Returns Markdown with direct links to open index.html (and style.css/script.js if present) in the editor.
+    """
+    if not html_code or html_code.startswith("Error"):
+        return "Error: No valid HTML code provided."
+
+    try:
+        updated_html, css_text, js_text = _split_assets(html_code)
+
+        files = {
+            "index.html": {"content": updated_html, "isBinary": False},
+        }
+        if css_text:
+            files["style.css"] = {"content": css_text, "isBinary": False}
+        if js_text:
+            files["script.js"] = {"content": js_text, "isBinary": False}
+
+        # package.json is optional for static template
+        files["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"}
+
+        # Fallback GET URL with compressed parameters (also add file query to open index.html)
+        json_str = json.dumps(parameters, separators=(",", ":"))
+        lz = LZString()
+        compressed = lz.compressToBase64(json_str)
+        compressed = compressed.replace("+", "-").replace("/", "_").rstrip("=")
+        prefill_base = "https://codesandbox.io/api/v1/sandboxes/define"
+        prefill_index = f"{prefill_base}?parameters={compressed}&file=/index.html"
+        prefill_css = f"{prefill_base}?parameters={compressed}&file=/style.css" if "style.css" in files else ""
+        prefill_js = f"{prefill_base}?parameters={compressed}&file=/script.js" if "script.js" in files else ""
+
+        # Try POST API to get a sandbox_id so we can link directly to the editor
+        url = "https://codesandbox.io/api/v1/sandboxes/define"
+        transport = httpx.HTTPTransport(retries=HTTP_RETRIES)
+        with httpx.Client(timeout=HTTP_TIMEOUTS, transport=transport) as client:
+            resp = client.post(url, json=parameters)
+            if resp.status_code == 200:
+                data = resp.json()
+                sandbox_id = data.get("sandbox_id")
+                if sandbox_id:
+                    editor_base = f"https://codesandbox.io/p/sandbox/{sandbox_id}"
+                    preview_base = f"https://codesandbox.io/s/{sandbox_id}"
+                    lines = [
+                        f"- Open index.html in editor: {editor_base}?file=/index.html",
+                    ]
+                    if "style.css" in files:
+                        lines.append(f"- Open style.css in editor: {editor_base}?file=/style.css")
+                    if "script.js" in files:
+                        lines.append(f"- Open script.js in editor: {editor_base}?file=/script.js")
+                    lines.append(f"- Live preview: {preview_base}")
+                    return "\n".join(lines)
+
+        # Fallback to prefill URLs if POST fails
+        lines = [f"- Open index.html in editor: {prefill_index}"]
+        if prefill_css:
+            lines.append(f"- Open style.css in editor: {prefill_css}")
+        if prefill_js:
+            lines.append(f"- Open script.js in editor: {prefill_js}")
+        return "\n".join(lines)
+
+    except Exception as e:
+        return f"Error creating CodeSandbox: {str(e)}"
+
+
+def screenshot_to_code(
+    image: Optional[Image.Image],
+    nebius_api_key: str = "",
+    vision_model: str = DEFAULT_VISION_MODEL,
+    code_model: str = DEFAULT_CODE_MODEL,
+    code_max_tokens: int = 4000,
+    code_temperature: float = 0.7,
+) -> Tuple[str, str]:
+    """
+    Complete pipeline: analyze image and generate corresponding HTML code.
+    Returns (description, html_code).
+    """
+    description = analyze_image(image, nebius_api_key, vision_model)
+    if description.startswith("Error"):
+        return description, "Error: Cannot generate code due to image analysis failure."
+    html_code = generate_html_code(
+        description,
+        nebius_api_key,
+        code_model=code_model,
+        code_max_tokens=code_max_tokens,
+        code_temperature=code_temperature,
+    )
+    return description, html_code
+
+
+def export_html_to_file(html_code: str) -> Optional[str]:
+    """
+    Writes the HTML code to a temporary .html file and returns its path for download.
+    """
+    if not html_code or html_code.startswith("Error"):
+        return None
+    try:
+        tmp = tempfile.NamedTemporaryFile(delete=False, suffix=".html")
+        with open(tmp.name, "w", encoding="utf-8") as f:
+            f.write(html_code)
+        return tmp.name
+    except Exception:
+        return None
+
+
+# =========================
+# Gradio UI (English-only, user-friendly)
+# =========================
+with gr.Blocks(
+    theme=gr.themes.Soft(),
+    title="AI Website Generator (Nebius)",
+    css="""
+        .section { border: 1px solid #e5e7eb; padding: 16px; border-radius: 10px; margin: 10px 0; }
+        .muted { color: #6b7280; font-size: 0.9em; }
+        .footer { text-align:center; color:#9ca3af; padding: 8px 0; }
+    """,
+) as app:
+    gr.Markdown(
+        """
+# 🚀 AI Website Generator (Nebius)
+Turn website screenshots into functional HTML using Nebius-compatible models.
+
+- 📸 Image analysis (choose a vision model)
+- 💻 Code generation (choose a code-capable model)
+- 🌐 One-click CodeSandbox deployment
+- 🧩 Editor links open index.html and style.css directly
+- 🔒 Your key is used at runtime only
+        """
+    )
+
+    with gr.Accordion("API & Models", open=True):
+        gr.Markdown("Provide your Nebius API key or use the default configured in this app.", elem_classes=["muted"])
+        nebius_key = gr.Textbox(
+            label="Nebius API Key",
+            type="password",
+            placeholder="Paste your Nebius API key, or leave as-is to use the default key.",
+            value=DEFAULT_NEBIUS_API_KEY,
+        )
+        with gr.Row():
+            vision_model_dd = gr.Dropdown(
+                label="Vision Model",
+                choices=VISION_MODELS,
+                value=DEFAULT_VISION_MODEL,
+                allow_custom_value=True,
+                info="You can also type a custom model name supported by your Nebius endpoint.",
+            )
+            code_model_dd = gr.Dropdown(
+                label="Code Generation Model",
+                choices=CODE_MODELS,
+                value=DEFAULT_CODE_MODEL,
+                allow_custom_value=True,
+                info="You can also type a custom model name supported by your Nebius endpoint.",
+            )
+        with gr.Row():
+            code_max_tokens = gr.Slider(
+                label="Max tokens (code generation)",
+                minimum=500,
+                maximum=8000,
+                step=100,
+                value=4000,
+                info="Lower this if you see timeouts; higher values may take longer.",
+            )
+            code_temperature = gr.Slider(
+                label="Temperature",
+                minimum=0.0,
+                maximum=1.5,
+                step=0.1,
+                value=0.7,
+                info="Higher is more creative; lower is more deterministic.",
+            )
+
+    with gr.Tab("🎯 Quick Generate"):
+        with gr.Row():
+            with gr.Column(scale=1):
+                gr.Markdown("### Step 1: Upload Screenshot", elem_classes=["section"])
+                image_input = gr.Image(
+                    type="pil",
+                    label="Website Screenshot",
+                    sources=["upload", "clipboard"],
+                    height=280,
+                )
+                generate_btn = gr.Button("🎨 Generate Website", variant="primary")
+
+            with gr.Column(scale=2):
+                gr.Markdown("### Step 2: Review Results", elem_classes=["section"])
+                description_output = gr.Textbox(
+                    label="Image Analysis",
+                    lines=6,
+                    interactive=False,
+                )
+                html_output = gr.Code(
+                    label="Generated HTML (copy or download)",
+                    language="html",
+                    lines=18,
+                )
+
+                with gr.Row():
+                    codesandbox_btn = gr.Button("🚀 Deploy to CodeSandbox")
+                    download_btn = gr.Button("💾 Download index.html")
+
+                codesandbox_links = gr.Markdown(value="")
+                download_file = gr.File(
+                    label="Download (index.html)",
+                    interactive=False,
+                    visible=False,
+                )
+
+    with gr.Tab("🔧 Individual Tools"):
+        with gr.Row():
+            with gr.Column():
+                gr.Markdown("### Image Analysis Tool", elem_classes=["section"])
+                img_tool = gr.Image(type="pil", label="Image")
+                analyze_btn = gr.Button("Analyze Image")
+                analysis_result = gr.Textbox(label="Analysis Result", lines=6)
+
+            with gr.Column():
+                gr.Markdown("### Code Generation Tool", elem_classes=["section"])
+                desc_input = gr.Textbox(label="Description", lines=4, placeholder="Describe the page you want...")
+                code_btn = gr.Button("Generate Code")
+                code_result = gr.Code(label="Generated Code", language="html")
+
+    gr.Markdown("Made with Gradio • Nebius API compatible", elem_classes=["footer"])
+
+    # Event bindings
+    generate_btn.click(
+        fn=screenshot_to_code,
+        inputs=[image_input, nebius_key, vision_model_dd, code_model_dd, code_max_tokens, code_temperature],
+        outputs=[description_output, html_output],
+    )
+
+    def _deploy_to_codesandbox(html_code: str) -> str:
+        url_block = create_codesandbox(html_code)
+        if url_block.startswith("Error"):
+            return f"**{url_block}**"
+        # Render as Markdown list
+        lines = ["### CodeSandbox Links", "", url_block]
+        return "\n".join(lines)
+
+    codesandbox_btn.click(
+        fn=_deploy_to_codesandbox,
+        inputs=[html_output],
+        outputs=[codesandbox_links],
+    )
+
+    def _download_html(html_code: str):
+        path = export_html_to_file(html_code)
+        return gr.update(value=path, visible=bool(path))
+
+    download_btn.click(
+        fn=_download_html,
+        inputs=[html_output],
+        outputs=[download_file],
+    )
+
+    analyze_btn.click(
+        fn=lambda img, key, vmod: analyze_image(img, key, vmod),
+        inputs=[img_tool, nebius_key, vision_model_dd],
+        outputs=[analysis_result],
+    )
+
+    code_btn.click(
+        fn=lambda desc, key, cmod, mtoks, temp: generate_html_code(
+            desc, key, code_model=cmod, code_max_tokens=mtoks, code_temperature=temp
+        ),
+        inputs=[desc_input, nebius_key, code_model_dd, code_max_tokens, code_temperature],
+        outputs=[code_result],
+    )
+
+    # Optional examples (uncomment and provide your own image file)
+    # gr.Examples(examples=[["1.jpg"]], inputs=[image_input], label="Example Screenshots")
+
+if __name__ == "__main__":
+    app.launch(share=False)