Spaces:

natabrizy
/

myscreencoder

Sleeping

App Files Files Community

natabrizy commited on Aug 20, 2025

Commit

b424377

verified ·

1 Parent(s): a0de1c7

Update app.py

Browse files

Files changed (1) hide show

app.py +130 -30

app.py CHANGED Viewed

@@ -32,11 +32,11 @@ CODE_MODELS = [
     "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"
 )
@@ -123,6 +123,7 @@ def _split_assets(html_code: str) -> Tuple[str, str, str]:
     # Collect and remove inline scripts (no src)
     js_blocks = []
     def _script_repl(m):
         attrs = m.group("attrs") or ""
         code = m.group("code") or ""
@@ -131,21 +132,36 @@ def _split_assets(html_code: str) -> Tuple[str, str, str]:
         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'
@@ -401,28 +417,116 @@ def export_html_to_file(html_code: str) -> Optional[str]:
 # =========================
-# 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):
@@ -466,7 +570,7 @@ Turn website screenshots into functional HTML using Nebius-compatible models.
                 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"])
@@ -476,7 +580,7 @@ Turn website screenshots into functional HTML using Nebius-compatible models.
                     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"])
@@ -492,8 +596,8 @@ Turn website screenshots into functional HTML using Nebius-compatible models.
                 )
                 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(
@@ -502,18 +606,18 @@ Turn website screenshots into functional HTML using Nebius-compatible models.
                     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"])
@@ -529,7 +633,6 @@ Turn website screenshots into functional HTML using Nebius-compatible models.
         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)
@@ -563,8 +666,5 @@ Turn website screenshots into functional HTML using Nebius-compatible models.
         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)

     "Mistral-7B-Instruct",
 ]
+# Timeouts and simple retries for stability
 HTTP_TIMEOUTS = httpx.Timeout(connect=10.0, read=120.0, write=30.0, pool=60.0)
+HTTP_RETRIES = 2
+# Keep the same default key you provided
 DEFAULT_NEBIUS_API_KEY = (
     "eyJhbGciOiJIUzI1NiIsImtpZCI6IlV6SXJWd1h0dnprLVRvdzlLZWstc0M1akptWXBvX1VaVkxUZlpnMDRlOFUiLCJ0eXAiOiJKV1QifQ.eyJzdWIiOiJnb29nbGUtb2F1dGgyfDEwNTA1MTQzMDg2MDMwMzIxNDEwMiIsInNjb3BlIjoib3BlbmlkIG9mZmxpbmVfYWNjZXNzIiwiaXNzIjoiYXBpX2tleV9pc3N1ZXIiLCJhdWQiOlsiaHR0cHM6Ly9uZWJpdXMtaW5mZXJlbmNlLmV1LmF1dGgwLmNvbS9hcGkvdjIvIl0sImV4cCI6MTkwNjU5ODA0NCwidXVpZCI6ImNkOGFiMWZlLTIxN2QtNDJlMy04OWUwLWM1YTg4MjcwMGVhNyIsIm5hbWUiOiJodW5nZ2luZyIsImV4cGlyZXNfYXQiOiIyMDMwLTA2LTAyVDAyOjM0OjA0KzAwMDAifQ.MA52QuIiNruK7_lX688RXAEI2TkcCOjcf_02XrpnhI8"
 )
     # Collect and remove inline scripts (no src)
     js_blocks = []
     def _script_repl(m):
         attrs = m.group("attrs") or ""
         code = m.group("code") or ""
         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:
             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'
 # =========================
+# Gradio UI (Brizy-inspired palette, no emojis)
 # =========================
+BRIZY_PRIMARY = "#6C5CE7"     # Indigo-like
+BRIZY_SECONDARY = "#00C2FF"   # Cyan accent
+BRIZY_BG = "#F7F9FC"          # Light background
+BRIZY_SURFACE = "#FFFFFF"     # Surface
+BRIZY_TEXT = "#1F2937"        # Dark text
+BRIZY_MUTED = "#6B7280"       # Muted text
+BRIZY_BORDER = "#E5E7EB"      # Soft border
+BRIZY_GRADIENT = f"linear-gradient(135deg, {BRIZY_PRIMARY} 0%, {BRIZY_SECONDARY} 100%)"
 with gr.Blocks(
     theme=gr.themes.Soft(),
     title="AI Website Generator (Nebius)",
+    css=f"""
+        :root {{
+            --app-primary: {BRIZY_PRIMARY};
+            --app-secondary: {BRIZY_SECONDARY};
+            --app-bg: {BRIZY_BG};
+            --app-surface: {BRIZY_SURFACE};
+            --app-text: {BRIZY_TEXT};
+            --app-muted: {BRIZY_MUTED};
+            --app-border: {BRIZY_BORDER};
+        }}
+        body {{
+            background: var(--app-bg);
+            color: var(--app-text);
+        }}
+        .section {{
+            border: 1px solid var(--app-border);
+            padding: 16px;
+            border-radius: 12px;
+            background: var(--app-surface);
+            box-shadow: 0 1px 2px rgba(0,0,0,0.03);
+            margin: 10px 0;
+        }}
+        .muted {{
+            color: var(--app-muted);
+            font-size: 0.92em;
+        }}
+        .footer {{
+            text-align: center;
+            color: var(--app-muted);
+            padding: 8px 0;
+        }}
+        .title h1 {{
+            background: {BRIZY_GRADIENT};
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+            font-weight: 800;
+            letter-spacing: -0.02em;
+        }}
+        .primary-btn button {{
+            background: {BRIZY_GRADIENT} !important;
+            color: #fff !important;
+            border: none !important;
+        }}
+        .primary-btn button:hover {{
+            filter: brightness(0.98);
+        }}
+        .secondary-btn button {{
+            background: var(--app-surface) !important;
+            color: var(--app-text) !important;
+            border: 1px solid var(--app-border) !important;
+        }}
+        .secondary-btn button:hover {{
+            border-color: {BRIZY_PRIMARY} !important;
+            color: {BRIZY_PRIMARY} !important;
+        }}
+        /* Inputs focus */
+        input:focus, textarea:focus, select:focus {{
+            outline-color: {BRIZY_PRIMARY} !important;
+            border-color: {BRIZY_PRIMARY} !important;
+            box-shadow: 0 0 0 3px rgba(108,92,231,0.15) !important;
+        }}
+        /* Code block accents */
+        .gr-code .cm-editor, .gr-code textarea {{
+            border-radius: 10px !important;
+            border: 1px solid var(--app-border) !important;
+        }}
+        /* Tabs accent */
+        .gradio-container .tabs .tab-nav button[aria-selected="true"] {{
+            color: {BRIZY_PRIMARY} !important;
+            border-bottom: 2px solid {BRIZY_PRIMARY} !important;
+        }}
     """,
 ) 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
+        """,
+        elem_classes=["title"],
     )
     with gr.Accordion("API & Models", open=True):
                 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"])
                     sources=["upload", "clipboard"],
                     height=280,
                 )
+                generate_btn = gr.Button("Generate Website", elem_classes=["primary-btn"])
             with gr.Column(scale=2):
                 gr.Markdown("### Step 2: Review Results", elem_classes=["section"])
                 )
                 with gr.Row():
+                    codesandbox_btn = gr.Button("Deploy to CodeSandbox", elem_classes=["secondary-btn"])
+                    download_btn = gr.Button("Download index.html", 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="Image")
+                analyze_btn = gr.Button("Analyze Image", elem_classes=["secondary-btn"])
                 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", elem_classes=["secondary-btn"])
                 code_result = gr.Code(label="Generated Code", language="html")
     gr.Markdown("Made with Gradio • Nebius API compatible", elem_classes=["footer"])
         url_block = create_codesandbox(html_code)
         if url_block.startswith("Error"):
             return f"**{url_block}**"
         lines = ["### CodeSandbox Links", "", url_block]
         return "\n".join(lines)
         outputs=[code_result],
     )
 if __name__ == "__main__":
     app.launch(share=False)