Spaces:

natabrizy
/

myscreencoder

Sleeping

App Files Files Community

natabrizy commited on Aug 21, 2025

Commit

40dc698

verified ·

1 Parent(s): f3af1db

Update app.py

Browse files

Files changed (1) hide show

app.py +134 -63

app.py CHANGED Viewed

@@ -259,13 +259,62 @@ def call_chat_completions(
 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]:
@@ -360,11 +409,17 @@ def analyze_image(
         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. "
-            "Be specific about layout patterns, component types, and styling details."
         )
         messages = [
@@ -412,24 +467,30 @@ def generate_html_code(
         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 fully responsive (mobile, tablet, desktop)
-- Use high-quality placeholder images from https://picsum.photos/ or https://unsplash.com/
-- Include proper semantic HTML structure
-- Add smooth animations and transitions
-- Include interactive elements where appropriate
-- Use modern design patterns and best practices
-- Ensure the design matches the described layout and style exactly
-- Add proper meta tags and accessibility features
-Return only the complete HTML code starting with <!DOCTYPE html> and ending with </html>.
-Include all CSS and JavaScript inline within the HTML.
 """.strip()
     try:
@@ -442,17 +503,27 @@ Include all CSS and JavaScript inline within the HTML.
             temperature=code_temperature,
             retry_with_fallback=True,
         )
         html_code = _strip_fenced_code(content)
-        # Ensure we have valid HTML
-        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]
-        elif "<html" in html_code and "</html>" in html_code:
-            # Add DOCTYPE if missing
-            return f"<!DOCTYPE html>\n{html_code}"
         return html_code
     except Exception as e:
         error_msg = str(e)
         if "404" in error_msg or "not found" in error_msg.lower():
@@ -522,19 +593,19 @@ def create_codesandbox(html_code: str) -> str:
                     editor_base = f"https://codesandbox.io/p/sandbox/{sandbox_id}"
                     preview_base = f"https://codesandbox.io/s/{sandbox_id}"
                     lines = [
-                        f"✅ **Successfully deployed to CodeSandbox!**\n",
-                        f"- 📝 Open index.html in editor: [{editor_base}?file=/index.html]({editor_base}?file=/index.html)",
                     ]
                     if "style.css" in files:
-                        lines.append(f"- 🎨 Open style.css in editor: [{editor_base}?file=/style.css]({editor_base}?file=/style.css)")
                     if "script.js" in files:
-                        lines.append(f"- ⚡ Open script.js in editor: [{editor_base}?file=/script.js]({editor_base}?file=/script.js)")
-                    lines.append(f"- 👁️ Live preview: [{preview_base}]({preview_base})")
                     return "\n".join(lines)
         # Fallback to prefill URLs if POST fails
         lines = [
-            "📦 **CodeSandbox Links (click to deploy):**\n",
             f"- Open index.html: [{prefill_index}]({prefill_index})"
         ]
         if prefill_css:
@@ -738,10 +809,10 @@ with gr.Blocks(
 ) as app:
     gr.Markdown(
         """
-# 🚀 AI Website Generator (Nebius)
 Turn website screenshots into functional HTML using state-of-the-art Nebius-compatible models.
-### ✨ Features:
 - **Vision Models**: Qwen VL series, Llama 3.2 Vision, Pixtral for image analysis
 - **Code Models**: DeepSeek V3, Qwen Coder, Llama 3.1, Mixtral for code generation
 - **Smart Fallbacks**: Automatic model switching if primary model is unavailable
@@ -751,12 +822,12 @@ Turn website screenshots into functional HTML using state-of-the-art Nebius-comp
         elem_classes=["title"],
     )
-    with gr.Accordion("⚙️ API & Model Configuration", open=True):
         gr.Markdown(
             """
             Configure your Nebius API key and select models. The app includes a default key for testing.
-            **💡 Model Recommendations:**
             - **Fast**: 7B models for quick prototyping
             - **Balanced**: 32B-70B models for good quality/speed ratio
             - **Quality**: Large models for best results
@@ -801,7 +872,7 @@ Turn website screenshots into functional HTML using state-of-the-art Nebius-comp
                 maximum=8000,
                 step=100,
                 value=4000,
-                info="⚠️ Lower this if you experience timeouts",
             )
             code_temperature = gr.Slider(
                 label="Temperature",
@@ -823,10 +894,10 @@ Turn website screenshots into functional HTML using state-of-the-art Nebius-comp
             outputs=[vision_model_dd, code_model_dd]
         )
-    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",
@@ -844,10 +915,10 @@ Turn website screenshots into functional HTML using state-of-the-art Nebius-comp
                     elem_classes=["muted"]
                 )
-                generate_btn = gr.Button("🚀 Generate Website", elem_classes=["primary-btn"], size="lg")
             with gr.Column(scale=2):
-                gr.Markdown("### 📝 Step 2: Review Results", elem_classes=["section"])
                 with gr.Tabs():
                     with gr.TabItem("Analysis"):
@@ -865,9 +936,9 @@ Turn website screenshots into functional HTML using state-of-the-art Nebius-comp
                         )
                 with gr.Row():
-                    codesandbox_btn = gr.Button("☁️ Deploy to CodeSandbox", elem_classes=["secondary-btn"])
-                    download_btn = gr.Button("💾 Download HTML", elem_classes=["secondary-btn"])
-                    copy_btn = gr.Button("📋 Copy Code", elem_classes=["secondary-btn"])
                 codesandbox_links = gr.Markdown(value="")
                 download_file = gr.File(
@@ -876,16 +947,16 @@ Turn website screenshots into functional HTML using state-of-the-art Nebius-comp
                     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="Upload Image")
                 analyze_btn = gr.Button("Analyze Image", elem_classes=["secondary-btn"])
                 analysis_result = gr.Textbox(label="Analysis Result", lines=8)
             with gr.Column():
-                gr.Markdown("### 💻 Code Generation Tool", elem_classes=["section"])
                 desc_input = gr.Textbox(
                     label="Website Description",
                     lines=6,
@@ -894,25 +965,25 @@ Turn website screenshots into functional HTML using state-of-the-art Nebius-comp
                 code_btn = gr.Button("Generate Code", elem_classes=["secondary-btn"])
                 code_result = gr.Code(label="Generated Code", language="html", lines=12)
-    with gr.Tab("📚 Model Information"):
         gr.Markdown(
             """
             ## Available Models on Nebius
-            ### 👁️ Vision Models (Image Analysis)
             - **Qwen/Qwen2.5-VL-72B-Instruct** - Best quality, latest Qwen vision model
             - **Qwen/Qwen2.5-VL-7B-Instruct** - Fast, efficient vision model
             - **meta-llama/Llama-3.2-90B-Vision-Instruct** - Meta's powerful vision model
             - **mistralai/Pixtral-12B-2409** - Mistral's vision model
-            ### 💻 Code Generation Models
             - **deepseek-ai/DeepSeek-V3** - State-of-the-art code generation
             - **Qwen/Qwen2.5-Coder-32B-Instruct** - Specialized for coding tasks
             - **Qwen/QwQ-32B-Preview** - Advanced reasoning capabilities
             - **meta-llama/Meta-Llama-3.1-405B-Instruct** - Largest Llama model
             - **mistralai/Mixtral-8x22B-Instruct-v0.1** - MOE architecture for efficiency
-            ### 🎯 Performance Guidelines
             - **Timeouts?** → Reduce max tokens or use smaller models
             - **Quality issues?** → Use larger models or increase temperature
             - **Model not found?** → The app will automatically try fallback models
@@ -923,7 +994,7 @@ Turn website screenshots into functional HTML using state-of-the-art Nebius-comp
     gr.Markdown(
         """
         ---
-        Made with ❤️ using Gradio • Powered by Nebius AI Studio
         [GitHub](https://github.com) | [Documentation](https://nebius.com/docs) | [API Reference](https://nebius.com/api)
         """,
@@ -939,7 +1010,7 @@ Turn website screenshots into functional HTML using state-of-the-art Nebius-comp
     def _deploy_to_codesandbox(html_code: str) -> str:
         if not html_code or html_code.startswith("Error"):
-            return "⚠️ **No valid code to deploy.** Generate code first."
         return create_codesandbox(html_code)
     codesandbox_btn.click(
@@ -960,9 +1031,9 @@ Turn website screenshots into functional HTML using state-of-the-art Nebius-comp
     def _copy_to_clipboard(html_code: str) -> str:
         if not html_code or html_code.startswith("Error"):
-            return "⚠️ No valid code to copy"
         # Note: Actual clipboard copying happens client-side
-        return "✅ Code copied to clipboard!"
     copy_btn.click(
         fn=_copy_to_clipboard,

 def _strip_fenced_code(text: str) -> str:
     """
     Removes ```html ... ``` fences from a content block if present.
+    Also handles other code fence variations.
     """
     s = text.strip()
+    # Remove various code fence patterns
+    patterns = [
+        (r'^```html\s*\n?', r'\n?```$'),
+        (r'^```HTML\s*\n?', r'\n?```$'),
+        (r'^```\s*\n?', r'\n?```$'),
+    ]
+    for start_pattern, end_pattern in patterns:
+        if re.match(start_pattern, s):
+            s = re.sub(start_pattern, '', s)
+            s = re.sub(end_pattern, '', s)
+            break
+    return s.strip()
+def ensure_complete_html(html_code: str) -> str:
+    """
+    Ensures the HTML code is complete with proper structure and inline CSS.
+    """
+    # Check if it's already a complete HTML document
+    if "<!DOCTYPE html>" in html_code.upper() and "<html" in html_code.lower():
+        return html_code
+    # If it's just a fragment, wrap it in a complete HTML structure
+    if not "<html" in html_code.lower():
+        html_code = f"""<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Generated Website</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        * {{
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }}
+        body {{
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            line-height: 1.6;
+            color: #333;
+        }}
+    </style>
+</head>
+<body>
+    {html_code}
+</body>
+</html>"""
+    return html_code
 def _split_assets(html_code: str) -> Tuple[str, str, str]:
         img_b64 = base64.b64encode(buffered.getvalue()).decode("utf-8")
         prompt = (
+            "Analyze this image and provide a detailed description for recreating it as a website. "
+            "Include: "
+            "1. Layout structure (header, sections, footer, grid/flex layouts) "
+            "2. Color scheme (exact colors if possible) "
+            "3. Typography (font sizes, weights, styles) "
+            "4. UI components (buttons, forms, cards, navigation) "
+            "5. Images and media placement "
+            "6. Spacing and alignment "
+            "7. Any animations or interactive elements visible "
+            "8. Responsive design considerations "
+            "Be specific about CSS properties and HTML structure needed."
         )
         messages = [
         return "Error: Nebius API key not provided."
     prompt = f"""
+Generate a complete, single-file HTML webpage based on this description:
 {description}
+REQUIREMENTS:
+1. Create a SINGLE HTML file with ALL styles and scripts INLINE
+2. Use modern HTML5 semantic elements
+3. Include ALL CSS inside <style> tags in the <head>
+4. Include ALL JavaScript inside <script> tags before </body>
+5. Use TailwindCSS via CDN: <script src="https://cdn.tailwindcss.com"></script>
+6. Add custom CSS for animations and advanced styling in <style> tags
+7. Make it fully responsive using Tailwind classes and/or CSS media queries
+8. Use placeholder images from: https://picsum.photos/WIDTH/HEIGHT
+9. Include smooth animations and transitions
+10. Add interactive JavaScript for any dynamic elements
+11. Use modern CSS features (flexbox, grid, custom properties)
+12. Include proper meta tags for viewport and charset
+13. Ensure high contrast and readability
+14. DO NOT split code into separate files
+15. DO NOT use external CSS files
+16. ALL styles must be inline in the HTML
+The response must be a complete HTML document starting with <!DOCTYPE html> and ending with </html>.
+Include ALL styling inline. Do not reference external CSS files.
 """.strip()
     try:
             temperature=code_temperature,
             retry_with_fallback=True,
         )
+        # Clean and validate the HTML
         html_code = _strip_fenced_code(content)
+        html_code = ensure_complete_html(html_code)
+        # Extract the complete HTML document
+        if "<!DOCTYPE html>" in html_code.upper():
+            # Find the start and end of the HTML document
+            start_idx = html_code.upper().find("<!DOCTYPE HTML")
+            if start_idx == -1:
+                start_idx = html_code.upper().find("<!DOCTYPE")
+            if start_idx != -1:
+                html_code = html_code[start_idx:]
+            end_idx = html_code.rfind("</html>")
+            if end_idx != -1:
+                html_code = html_code[:end_idx + 7]
         return html_code
     except Exception as e:
         error_msg = str(e)
         if "404" in error_msg or "not found" in error_msg.lower():
                     editor_base = f"https://codesandbox.io/p/sandbox/{sandbox_id}"
                     preview_base = f"https://codesandbox.io/s/{sandbox_id}"
                     lines = [
+                        f"**Successfully deployed to CodeSandbox!**\n",
+                        f"- Open index.html in editor: [{editor_base}?file=/index.html]({editor_base}?file=/index.html)",
                     ]
                     if "style.css" in files:
+                        lines.append(f"- Open style.css in editor: [{editor_base}?file=/style.css]({editor_base}?file=/style.css)")
                     if "script.js" in files:
+                        lines.append(f"- Open script.js in editor: [{editor_base}?file=/script.js]({editor_base}?file=/script.js)")
+                    lines.append(f"- Live preview: [{preview_base}]({preview_base})")
                     return "\n".join(lines)
         # Fallback to prefill URLs if POST fails
         lines = [
+            "**CodeSandbox Links (click to deploy):**\n",
             f"- Open index.html: [{prefill_index}]({prefill_index})"
         ]
         if prefill_css:
 ) as app:
     gr.Markdown(
         """
+# AI Website Generator (Nebius)
 Turn website screenshots into functional HTML using state-of-the-art Nebius-compatible models.
+### Features:
 - **Vision Models**: Qwen VL series, Llama 3.2 Vision, Pixtral for image analysis
 - **Code Models**: DeepSeek V3, Qwen Coder, Llama 3.1, Mixtral for code generation
 - **Smart Fallbacks**: Automatic model switching if primary model is unavailable
         elem_classes=["title"],
     )
+    with gr.Accordion("API & Model Configuration", open=True):
         gr.Markdown(
             """
             Configure your Nebius API key and select models. The app includes a default key for testing.
+            **Model Recommendations:**
             - **Fast**: 7B models for quick prototyping
             - **Balanced**: 32B-70B models for good quality/speed ratio
             - **Quality**: Large models for best results
                 maximum=8000,
                 step=100,
                 value=4000,
+                info="Lower this if you experience timeouts",
             )
             code_temperature = gr.Slider(
                 label="Temperature",
             outputs=[vision_model_dd, code_model_dd]
         )
+    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",
                     elem_classes=["muted"]
                 )
+                generate_btn = gr.Button("Generate Website", elem_classes=["primary-btn"], size="lg")
             with gr.Column(scale=2):
+                gr.Markdown("### Step 2: Review Results", elem_classes=["section"])
                 with gr.Tabs():
                     with gr.TabItem("Analysis"):
                         )
                 with gr.Row():
+                    codesandbox_btn = gr.Button("Deploy to CodeSandbox", elem_classes=["secondary-btn"])
+                    download_btn = gr.Button("Download HTML", elem_classes=["secondary-btn"])
+                    copy_btn = gr.Button("Copy Code", elem_classes=["secondary-btn"])
                 codesandbox_links = gr.Markdown(value="")
                 download_file = gr.File(
                     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="Upload Image")
                 analyze_btn = gr.Button("Analyze Image", elem_classes=["secondary-btn"])
                 analysis_result = gr.Textbox(label="Analysis Result", lines=8)
             with gr.Column():
+                gr.Markdown("### Code Generation Tool", elem_classes=["section"])
                 desc_input = gr.Textbox(
                     label="Website Description",
                     lines=6,
                 code_btn = gr.Button("Generate Code", elem_classes=["secondary-btn"])
                 code_result = gr.Code(label="Generated Code", language="html", lines=12)
+    with gr.Tab("Model Information"):
         gr.Markdown(
             """
             ## Available Models on Nebius
+            ### Vision Models (Image Analysis)
             - **Qwen/Qwen2.5-VL-72B-Instruct** - Best quality, latest Qwen vision model
             - **Qwen/Qwen2.5-VL-7B-Instruct** - Fast, efficient vision model
             - **meta-llama/Llama-3.2-90B-Vision-Instruct** - Meta's powerful vision model
             - **mistralai/Pixtral-12B-2409** - Mistral's vision model
+            ### Code Generation Models
             - **deepseek-ai/DeepSeek-V3** - State-of-the-art code generation
             - **Qwen/Qwen2.5-Coder-32B-Instruct** - Specialized for coding tasks
             - **Qwen/QwQ-32B-Preview** - Advanced reasoning capabilities
             - **meta-llama/Meta-Llama-3.1-405B-Instruct** - Largest Llama model
             - **mistralai/Mixtral-8x22B-Instruct-v0.1** - MOE architecture for efficiency
+            ### Performance Guidelines
             - **Timeouts?** → Reduce max tokens or use smaller models
             - **Quality issues?** → Use larger models or increase temperature
             - **Model not found?** → The app will automatically try fallback models
     gr.Markdown(
         """
         ---
+        Made with Gradio • Powered by Nebius AI Studio
         [GitHub](https://github.com) | [Documentation](https://nebius.com/docs) | [API Reference](https://nebius.com/api)
         """,
     def _deploy_to_codesandbox(html_code: str) -> str:
         if not html_code or html_code.startswith("Error"):
+            return "**No valid code to deploy.** Generate code first."
         return create_codesandbox(html_code)
     codesandbox_btn.click(
     def _copy_to_clipboard(html_code: str) -> str:
         if not html_code or html_code.startswith("Error"):
+            return "No valid code to copy"
         # Note: Actual clipboard copying happens client-side
+        return "Code copied to clipboard!"
     copy_btn.click(
         fn=_copy_to_clipboard,