Spaces:

VirusDumb
/

Discode

Runtime error

App Files Files Community

VirusDumb commited on Jun 1

Commit

1ee6c4a

1 Parent(s): ac46b12

lets go

Browse files

Files changed (2) hide show

__pycache__/app.cpython-312.pyc +0 -0
app.py +174 -66

__pycache__/app.cpython-312.pyc ADDED Viewed

Binary file (10.6 kB). View file

app.py CHANGED Viewed

@@ -1,14 +1,13 @@
 """
-Discode — describe a web app in plain language, get a live, self-contained
-HTML site rendered right inside the Gradio app.
-A Gradio reimagining of the original Discord bot (50umy4j1t/DiscodeAlpha):
-instead of saving the HTML and exposing it via ngrok, we render the model's
-output inline in an isolated <iframe srcdoc>.
 Model: Gemma 4 31B via Ollama Cloud (prototyping).
   Requires:  pip install -U ollama agno gradio   and   OLLAMA_API_KEY set.
-  (Cloud API = prototyping only; swap to llama.cpp for the badge-winning build.)
 """
 import os
@@ -21,17 +20,20 @@ from agno.models.ollama import Ollama
 OLLAMA_MODEL = os.environ.get("OLLAMA_MODEL", "gemma4:31b-cloud")
-SYSTEM_PROMPT = """You are Discode, an expert front-end engineer.
-Given a user's request, you produce a COMPLETE, self-contained HTML document
-that fulfils it.
-Hard rules:
-- Output ONLY raw HTML. No markdown, no code fences, no commentary before or after.
-- Start with <!DOCTYPE html> and include <html>, <head>, and <body>.
-- Everything must be inline: put CSS in a <style> tag and JS in a <script> tag.
-- NO external files, CDNs, or network requests — it must work fully offline.
-- Make it visually polished, responsive, and fully functional (client-side only).
 """
 agent = Agent(
@@ -41,16 +43,8 @@ agent = Agent(
 )
-def extract_html(text: str) -> str:
-    """Pull a clean HTML document out of the model's raw output."""
-    text = (text or "").strip()
-    # Prefer a fenced code block if the model added one despite instructions.
-    fence = re.search(r"```(?:html)?\s*(.*?)```", text, re.DOTALL | re.IGNORECASE)
-    if fence:
-        text = fence.group(1).strip()
-    # If a full document is present, slice exactly from <!doctype>/<html> to </html>.
     lower = text.lower()
     start = lower.find("<!doctype")
     if start == -1:
@@ -58,66 +52,180 @@ def extract_html(text: str) -> str:
     end = lower.rfind("</html>")
     if start != -1 and end != -1:
         return text[start:end + len("</html>")]
-    return text
 def render_iframe(site_html: str) -> str:
-    """Embed the generated site in an iframe with full JS capability.
-    We intentionally do NOT add a restrictive `sandbox` attribute so generated
-    apps get the full browser: localStorage/IndexedDB, canvas, Web Audio,
-    timers, fullscreen, etc. `allow` grants commonly-needed feature policies.
-    (Trade-off: generated JS runs with the page's origin — fine for a demo where
-    users render their own requested apps.)
-    """
-    srcdoc = html_lib.escape(site_html, quote=True)
     return (
         f'<iframe srcdoc="{srcdoc}" '
         'allow="autoplay; fullscreen; clipboard-write; gamepad; accelerometer; gyroscope" '
-        'style="width:100%;height:70vh;border:1px solid #444;border-radius:12px;background:#fff;">'
-        "</iframe>"
     )
-def generate(prompt: str):
-    if not prompt or not prompt.strip():
-        return "<p style='color:#888'>Type what you want me to build above. 👆</p>", ""
-    if not os.environ.get("OLLAMA_API_KEY"):
-        return "<p style='color:#c00'>OLLAMA_API_KEY is not set.</p>", ""
-    result = agent.run(prompt)
-    site_html = extract_html(result.content)
-    return render_iframe(site_html), site_html
-EXAMPLES = [
-    "A neon-themed Snake game with a score counter and arrow-key controls.",
-    "A calming breathing exercise: a circle that scales in and out with a 4-7-8 timer.",
-    "A retro pixel-art landing page for a fictional lo-fi radio station.",
-    "A pomodoro timer with a tree that grows as the session progresses.",
-]
-with gr.Blocks(title="Discode", theme=gr.themes.Soft()) as demo:
-    gr.Markdown("# 🏃 Discode\nDescribe a web app — get a live, self-contained site, rendered right here.")
-    with gr.Row():
-        prompt = gr.Textbox(
-            label="What should I build?",
-            placeholder="e.g. a neon snake game",
-            lines=2,
-            scale=4,
         )
-        btn = gr.Button("Generate ✨", variant="primary", scale=1)
-    gr.Examples(examples=EXAMPLES, inputs=prompt)
-    preview = gr.HTML(label="Live preview")
-    with gr.Accordion("View generated HTML", open=False):
-        code = gr.Code(language="html", label="Source")
-    btn.click(generate, inputs=prompt, outputs=[preview, code])
-    prompt.submit(generate, inputs=prompt, outputs=[preview, code])
 if __name__ == "__main__":
     demo.launch()

 """
+Discode — chat your way to a live web app.
+Left:  a slim, collapsible chat rail. Talk to the AI, ask for an app, then ask
+       for changes ("make the snake green", "add a score counter").
+Right: the generated app, rendered live with full JavaScript.
+Theme: Frutiger Aero / skeuomorphic glass.
 Model: Gemma 4 31B via Ollama Cloud (prototyping).
   Requires:  pip install -U ollama agno gradio   and   OLLAMA_API_KEY set.
 """
 import os
 OLLAMA_MODEL = os.environ.get("OLLAMA_MODEL", "gemma4:31b-cloud")
+SYSTEM_PROMPT = """You are Discode, a friendly expert front-end engineer who builds and edits ONE single-page web app for the user through conversation.
+On every turn where the user wants an app or a change:
+1. First write ONE short, friendly sentence (what you built or changed).
+2. Then output the COMPLETE, updated HTML document inside a single ```html ... ``` code block.
+The HTML must be:
+- A full self-contained document: <!DOCTYPE html>, <html>, <head>, <body>.
+- Inline CSS (in <style>) and JS (in <script>) only — NO external files, CDNs, or network calls.
+- Polished, responsive, and fully functional, using full JavaScript freely (canvas, Web Audio, localStorage, timers, etc.).
+When the user asks for a change, MODIFY the current app (it will be given to you) and return the ENTIRE updated document again — never a diff or a partial snippet.
+If the user is only chatting (greeting, a question) and not asking for an app or change, reply normally with NO code block.
 """
 agent = Agent(
 )
+# --- HTML extraction / parsing ----------------------------------------------
+def _extract_doc(text: str) -> str:
     lower = text.lower()
     start = lower.find("<!doctype")
     if start == -1:
     end = lower.rfind("</html>")
     if start != -1 and end != -1:
         return text[start:end + len("</html>")]
+    return text.strip()
+def parse_response(text: str):
+    """Split the model output into (chat_message, html_or_None)."""
+    text = (text or "").strip()
+    fence = re.search(r"```(?:html)?\s*(.*?)```", text, re.DOTALL | re.IGNORECASE)
+    if fence:
+        html = _extract_doc(fence.group(1).strip())
+        chat = (text[:fence.start()] + text[fence.end():]).strip()
+        return (chat or "Here's your app! ✨"), html
+    # No fence, but maybe a raw document.
+    if "<html" in text.lower() and "</html>" in text.lower():
+        return "Here's your app! ✨", _extract_doc(text)
+    # Pure chat, no app change.
+    return text, None
 def render_iframe(site_html: str) -> str:
+    """Embed the generated site with full JS capability (no restrictive sandbox)."""
+    srcdoc = html_lib.escape(site_html or "", quote=True)
     return (
         f'<iframe srcdoc="{srcdoc}" '
         'allow="autoplay; fullscreen; clipboard-write; gamepad; accelerometer; gyroscope" '
+        'class="aero-frame"></iframe>'
     )
+WELCOME = """
+<div class="aero-welcome">
+  <div class="bubble"></div>
+  <h2>✨ Your app appears here</h2>
+  <p>Ask me in the chat to build something — a game, a tool, a toy.</p>
+</div>
+"""
+# --- Chat handler -----------------------------------------------------------
+def on_send(user_msg, messages, current_html):
+    messages = messages or []
+    if not user_msg or not user_msg.strip():
+        return messages, gr.update(), current_html, ""
+    if not os.environ.get("OLLAMA_API_KEY"):
+        messages.append({"role": "user", "content": user_msg})
+        messages.append({"role": "assistant", "content": "⚠️ OLLAMA_API_KEY is not set."})
+        return messages, gr.update(), current_html, ""
+    messages.append({"role": "user", "content": user_msg})
+    if current_html:
+        prompt = (
+            "The current app HTML is:\n```html\n" + current_html + "\n```\n\n"
+            "User request: " + user_msg
         )
+    else:
+        prompt = user_msg
+    result = agent.run(prompt)
+    chat_text, new_html = parse_response(result.content)
+    messages.append({"role": "assistant", "content": chat_text})
+    if new_html:
+        return messages, render_iframe(new_html), new_html, ""
+    return messages, gr.update(), current_html, ""
+def toggle_chat(is_visible):
+    is_visible = not is_visible
+    label = "◀ Hide chat" if is_visible else "Chat ▶"
+    return gr.update(visible=is_visible), label, is_visible
+# --- Frutiger Aero / skeuomorphic CSS ---------------------------------------
+AERO_CSS = """
+.gradio-container {
+  background: linear-gradient(180deg,#5db4e0 0%,#9fe0ef 30%,#cdf3d4 70%,#9bd86f 100%) fixed !important;
+  font-family: 'Segoe UI','Frutiger','Myriad Pro',sans-serif !important;
+}
+/* floating bubbles overlay */
+.gradio-container::before {
+  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
+  background:
+    radial-gradient(circle at 12% 80%, rgba(255,255,255,0.5) 0 8px, transparent 9px),
+    radial-gradient(circle at 22% 60%, rgba(255,255,255,0.35) 0 14px, transparent 15px),
+    radial-gradient(circle at 85% 75%, rgba(255,255,255,0.4) 0 20px, transparent 21px),
+    radial-gradient(circle at 70% 30%, rgba(255,255,255,0.3) 0 10px, transparent 11px);
+}
+#aero-title { text-align:center; }
+#aero-title h1 {
+  color:#fff; font-weight:800; letter-spacing:.5px;
+  text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 2px 6px rgba(0,70,110,.6);
+}
+/* glassy panels */
+#chat-col, #preview-col {
+  background: rgba(255,255,255,0.30) !important;
+  border: 1px solid rgba(255,255,255,0.75) !important;
+  border-radius: 20px !important;
+  box-shadow: 0 10px 34px rgba(0,60,90,0.30), inset 0 1px 0 rgba(255,255,255,0.95) !important;
+  backdrop-filter: blur(14px) saturate(170%);
+  -webkit-backdrop-filter: blur(14px) saturate(170%);
+  padding: 12px !important;
+}
+/* glossy buttons */
+.aero-btn, button.primary {
+  background: linear-gradient(180deg,#c8f99a 0%,#86d943 47%,#5cb52a 53%,#9ae866 100%) !important;
+  border: 1px solid #4e9c1f !important;
+  border-radius: 13px !important;
+  color: #133f08 !important; font-weight: 700 !important;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 3px 9px rgba(0,0,0,0.22) !important;
+  text-shadow: 0 1px 0 rgba(255,255,255,0.6) !important;
+}
+.aero-btn:hover, button.primary:hover { filter: brightness(1.07); }
+/* inputs / chatbot glassy */
+#chat-col textarea, #chat-col input {
+  background: rgba(255,255,255,0.7) !important;
+  border: 1px solid rgba(255,255,255,0.9) !important;
+  border-radius: 12px !important;
+  box-shadow: inset 0 2px 5px rgba(0,60,90,0.15) !important;
+}
+#chatbox { background: transparent !important; border: none !important; }
+/* live preview frame */
+.aero-frame {
+  width:100%; height:78vh; border:none; border-radius:14px; background:#fff;
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 6px 18px rgba(0,50,80,.25);
+}
+.aero-welcome {
+  height:78vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
+  color:#0a3a52; text-align:center; border-radius:14px;
+  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25));
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
+}
+.aero-welcome h2 { text-shadow: 0 1px 0 rgba(255,255,255,.7); }
+"""
+# --- UI ---------------------------------------------------------------------
+with gr.Blocks(css=AERO_CSS, theme=gr.themes.Soft(), title="Discode") as demo:
+    chat_visible = gr.State(True)
+    current_html = gr.State("")
+    gr.Markdown("# 🏃 Discode", elem_id="aero-title")
+    with gr.Row():
+        # Left: slim chat rail
+        with gr.Column(scale=2, min_width=280, elem_id="chat-col") as chat_col:
+            chatbot = gr.Chatbot(
+                type="messages",
+                height="62vh",
+                elem_id="chatbox",
+                show_label=False,
+                avatar_images=(None, None),
+            )
+            prompt = gr.Textbox(
+                placeholder="Build me a neon snake game…",
+                show_label=False,
+                lines=2,
+            )
+            send = gr.Button("Send ✨", variant="primary", elem_classes=["aero-btn"])
+        # Right: big live preview
+        with gr.Column(scale=7, elem_id="preview-col"):
+            with gr.Row():
+                toggle = gr.Button("◀ Hide chat", elem_classes=["aero-btn"], scale=0)
+            preview = gr.HTML(WELCOME)
+    # wiring
+    send.click(on_send, [prompt, chatbot, current_html], [chatbot, preview, current_html, prompt])
+    prompt.submit(on_send, [prompt, chatbot, current_html], [chatbot, preview, current_html, prompt])
+    toggle.click(toggle_chat, [chat_visible], [chat_col, toggle, chat_visible])
 if __name__ == "__main__":
     demo.launch()