Spaces:

MINEOGO
/

pro-zephyr-coder

Running

App Files Files Community

MINEOGO commited on 9 days ago

Commit

4917053

verified ·

1 Parent(s): 71765cf

Update app.py

Browse files

Files changed (1) hide show

app.py +142 -159

app.py CHANGED Viewed

@@ -1,180 +1,163 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
-import re
 try:
-    client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")
-    client.timeout = 120
 except Exception as e:
-    print(f"Error initializing InferenceClient: {e}")
-    client = None
-def parse_files(raw_response):
-    if not raw_response:
-        return []
-    pattern = re.compile(
-        r"^\s*([\w\-.\/\\]+\.\w+)\s*\n"
-        r"(.*?)"
-        r"(?=\n\s*[\w\-.\/\\]+\.\w+\s*\n|\Z)",
-        re.DOTALL | re.MULTILINE
-    )
-    files = pattern.findall(raw_response)
-    cleaned_files = []
-    for name, content in files:
-        content_cleaned = re.sub(r"^\s*```[a-zA-Z]*\n?", "", content, flags=re.MULTILINE)
-        content_cleaned = re.sub(r"\n?```\s*$", "", content_cleaned, flags=re.MULTILINE)
-        cleaned_files.append((name.strip(), content_cleaned.strip()))
-    if not cleaned_files and raw_response.strip():
-        if any(c in raw_response for c in ['<','>','{','}',';','(',')']):
-            lang = "html"
-            if "{" in raw_response and "}" in raw_response and ":" in raw_response:
-                lang = "css"
-            elif "function" in raw_response or "const" in raw_response or "let" in raw_response:
-                lang = "javascript"
-            default_filename = "index.html"
-            if lang == "css":
-                default_filename = "style.css"
-            elif lang == "javascript":
-                default_filename = "script.js"
-            cleaned_files.append((default_filename, raw_response.strip()))
-    return cleaned_files
-def stream_and_parse_code(prompt, backend, system_message, max_tokens, temperature, top_p):
-    if not client:
-        error_msg = "Error: Inference Client not available. Check API token or model name."
-        yield {
-            live_output: gr.update(value=error_msg),
-            final_tabs: gr.Tabs(tabs=[gr.TabItem(label="Error", children=[gr.Textbox(value=error_msg)])])
-        }
-        return
-    full_sys_msg = f"""
-You are a code generation AI. Given a prompt, generate the necessary files for a website using the {backend} backend.
-Always include an index.html file.
-Respond ONLY with filenames and the raw code for each file.
-Each file must start with its filename on a new line. Example:
-index.html
-<!DOCTYPE html>
-<html></html>
-style.css
-body {{}}
-script.js
-console.log("Hello");
-Ensure the code is complete. NO commentary, NO explanations, NO markdown formatting like backticks (```).
-Start generating the files now.
-""".strip()
-    if system_message:
-        full_sys_msg += "\n\n" + system_message
     messages = [
-        {"role": "system", "content": full_sys_msg},
         {"role": "user", "content": prompt}
     ]
-    full_raw_response = ""
-    error_occurred = False
-    error_message = ""
-    yield {
-        live_output: gr.update(value="Generating stream..."),
-        final_tabs: gr.Tabs(tabs=[gr.TabItem(label="Generating...")])
-    }
     try:
-        stream = client.chat_completion(
-            messages,
-            max_tokens=int(max_tokens),
             stream=True,
             temperature=temperature,
-            top_p=top_p
-        )
-        for chunk in stream:
-            token = chunk.choices[0].delta.content
-            if token:
-                full_raw_response += token
-                yield {
-                    live_output: gr.update(value=full_raw_response)
-                }
     except Exception as e:
-        error_message = f"Error during AI generation: {e}\n\nPartial Response (if any):\n{full_raw_response}"
-        error_occurred = True
-        yield {
-            live_output: gr.update(value=error_message),
-            final_tabs: gr.Tabs(tabs=[gr.TabItem(label="Error")])
-        }
-    if error_occurred:
-        final_tabs_update = gr.Tabs(tabs=[
-            gr.TabItem(label="Error", children=[gr.Textbox(value=error_message, lines=10)])
-        ])
-    else:
-        files = parse_files(full_raw_response)
-        if not files:
-            no_files_msg = "AI finished, but did not return recognizable file content or the response was empty. See raw output above."
-            final_tabs_update = gr.Tabs(tabs=[
-                gr.TabItem(label="Output", children=[gr.Textbox(value=no_files_msg)])
-            ])
-            yield {
-                live_output: gr.update(value=full_raw_response + "\n\n" + no_files_msg),
-                final_tabs: final_tabs_update
-            }
-            return
-        tabs_content = []
-        for name, content in files:
-            name = name.strip()
-            content = content.strip()
-            if not name or not content:
-                continue
-            lang = "plaintext"
-            if name.endswith((".html", ".htm")):
-                lang = "html"
-            elif name.endswith(".css"):
-                lang = "css"
-            elif name.endswith(".js"):
-                lang = "javascript"
-            elif name.endswith(".py"):
-                lang = "python"
-            elif name.endswith(".json"):
-                lang = "json"
-            elif name.endswith(".md"):
-                lang = "markdown"
-            elif name.endswith((".sh", ".bash")):
-                lang = "bash"
-            elif name.endswith((".xml", ".xaml", ".svg")):
-                lang = "xml"
-            elif name.endswith((".yaml", ".yml")):
-                lang = "yaml"
-            elem_id = f"tab_{re.sub(r'[^a-zA-Z0-9_-]', '_', name)}"
-            tab_item = gr.TabItem(label=name, elem_id=elem_id, children=[
-                gr.Code(value=content, language=lang, label=name, interactive=False)
-            ])
-            tabs_content.append(tab_item)
-        final_tabs_update = gr.Tabs(tabs=tabs_content) if tabs_content else gr.Tabs(tabs=[
-            gr.TabItem(label="Output", children=[gr.Textbox(value="No valid files generated after filtering.")])
-        ])
-    yield {
-        live_output: gr.update(value=full_raw_response if not error_occurred else error_message),
-        final_tabs: final_tabs_update
-    }
-with gr.Blocks(css=".gradio-container { max-width: 95% !important; }") as demo:
-    gr.Markdown("## WebGen AI — One Prompt → Full Website Generator")
-    gr.Markdown("Generates website code based on your description. Raw output streams live, final files appear in tabs below.")
     with gr.Row():
         with gr.Column(scale=2):
-            prompt = gr.Textbox(label="Describe your website", placeholder="E.g., a simple landing page...", lines=3)
-            backend = gr.Dropdown(["Static", "Flask", "Node.js"], value="Static", label="Backend Technology")
-            with gr.Accordion("Advanced Options", open=False):
-                system_message = gr.Textbox(label="Extra instructions for the AI (System Message)", placeholder="Optional", value="", lines=2)
-                max_tokens = gr.Slider(minimum=256, maximum=4096, value=2048, step=64, label="Max Tokens (Output Length)")
-                temperature = gr.Slider(minimum=0.1, maximum=1.5, value=0.7, step=0.1, label="Temperature (Creativity)")
-                top_p = gr.Slider(minimum=0.1, maximum=1.0, value=0.95, step=0.05, label="Top-p (Sampling Focus)")
-            generate_button = gr.Button("✨ Generate Code ✨", variant="primary")
         with gr.Column(scale=3):
-            gr.Markdown("#### Live Raw Output Stream")
-            live_output = gr.Textbox(label="Raw AI Stream", lines=20, interactive=False)
-    gr.Markdown("---")
-    gr.Markdown("#### Final Generated Files (Tabs)")
-    final_tabs = gr.Tabs(elem_id="output_tabs")
-    generate_button.click(stream_and_parse_code, inputs=[prompt, backend, system_message, max_tokens, temperature, top_p], outputs=[live_output, final_tabs], show_progress="hidden")
 if __name__ == "__main__":
-    demo.launch(debug=True)

 import gradio as gr
 from huggingface_hub import InferenceClient
+import os
+# --- Configuration ---
+# Use environment variable for token, fallback to default if not set
+# For Spaces, set the HF_TOKEN secret
+API_TOKEN = os.getenv("HF_TOKEN", None)
+MODEL = "HuggingFaceH4/zephyr-7b-beta"
+# --- Initialize Inference Client ---
 try:
+    if API_TOKEN:
+        print("Using HF Token.")
+        client = InferenceClient(model=MODEL, token=API_TOKEN)
+    else:
+        print("HF Token not found. Running without token (may lead to rate limits).")
+        client = InferenceClient(model=MODEL)
 except Exception as e:
+    print(f"Error initializing Inference Client: {e}")
+    # Optionally, raise the error or handle it gracefully
+    raise gr.Error(f"Failed to initialize the AI model client. Please check model name and token. Error: {e}")
+# --- Core Code Generation Function ---
+def generate_code(
+    prompt: str,
+    backend_choice: str,
+    file_structure: str,
+    max_tokens: int,
+    temperature: float,
+    top_p: float,
+):
+    """
+    Generates website code based on user prompt and choices.
+    Yields the code token by token for live updates.
+    """
+    print(f"Received prompt: {prompt}")
+    print(f"Backend choice: {backend_choice}")
+    print(f"File structure: {file_structure}")
+    print(f"Max tokens: {max_tokens}, Temp: {temperature}, Top-p: {top_p}")
+    # --- System Message (Internal) ---
+    # This guides the AI's behavior. It's not user-editable in the UI.
+    system_message = (
+        "You are an expert frontend web developer AI. Your task is to generate HTML, CSS, and JavaScript code "
+        "for a website based on the user's description. \n"
+        "**Constraints:**\n"
+        "- ALWAYS generate a complete `index.html` file.\n"
+        "- ONLY output the raw code for the requested files.\n"
+        "- Do NOT include any explanations, comments about the code, or introductory sentences.\n"
+        "- Start the response *directly* with the code.\n"
+        "- If 'Multiple Files' is selected, structure the output clearly:\n"
+        "  - Start the HTML section with a clear marker like `<!-- index.html -->`\n"
+        "  - Start the CSS section with a clear marker like `/* style.css */`\n"
+        "  - Start the JavaScript section (if needed) with `// script.js`\n"
+        "  - Ensure each file's code follows its respective marker.\n"
+        "- If 'Single File' is selected, embed CSS within `<style>` tags in the `<head>` and JavaScript within `<script>` tags "
+        "at the end of the `<body>` of the `index.html` file.\n"
+        f"- Consider the user's choice of backend context ('{backend_choice}') when generating placeholders or structure, but focus on the frontend code.\n"
+        f"- Generate based on the file structure preference: '{file_structure}'."
+    )
+    # --- Construct the messages for the API ---
     messages = [
+        {"role": "system", "content": system_message},
         {"role": "user", "content": prompt}
     ]
+    # --- Stream the response from the API ---
+    response_stream = ""
     try:
+        print("Sending request to API...")
+        for message in client.chat_completion(
+            messages=messages,
+            max_tokens=max_tokens,
             stream=True,
             temperature=temperature,
+            top_p=top_p,
+            stop_sequences=["<|endoftext|>", "<|im_end|>", "</s>"] # Add common stop tokens
+        ):
+            token = message.choices[0].delta.content
+            # Basic check to ensure token is a string (it should be)
+            if isinstance(token, str):
+                response_stream += token
+                yield response_stream # Yield the cumulative response for live update
+            # Add a small safety break if generation seems stuck or too long (optional)
+            # if len(response_stream) > max_tokens * 5: # Heuristic limit
+            #     print("Warning: Exceeded heuristic length limit, stopping generation.")
+            #     break
+        print("API stream finished.")
     except Exception as e:
+        print(f"Error during API call: {e}")
+        yield f"An error occurred while generating the code: {e}"
+# --- Build Gradio Interface using Blocks ---
+with gr.Blocks() as demo:
+    gr.Markdown("# Website Code Generator 🚀")
+    gr.Markdown(
+        "Describe the website you want, choose your options, and the AI will generate the frontend code (HTML, CSS, JS). "
+        "The code will appear live in the text editor below."
+    )
     with gr.Row():
         with gr.Column(scale=2):
+            prompt_input = gr.Textbox(
+                label="Website Description",
+                placeholder="e.g., A simple portfolio website with a header, an 'About Me' section, a project grid, and a contact form.",
+                lines=4,
+            )
+            backend_radio = gr.Radio(
+                ["Static", "Flask", "Node.js"],
+                label="Backend Context",
+                value="Static",
+                info="How should the AI structure the frontend (e.g., template placeholders for Flask)?",
+            )
+            file_structure_radio = gr.Radio(
+                ["Single File", "Multiple Files"],
+                label="Output File Structure",
+                value="Multiple Files",
+                info="Generate everything in index.html or separate CSS/JS files?",
+            )
+            generate_button = gr.Button("Generate Website Code", variant="primary")
         with gr.Column(scale=3):
+            code_output = gr.Code(
+                label="Generated Code",
+                language="html", # Start with html, might contain css/js too
+                lines=25,
+                interactive=False, # Read-only display
+            )
+    with gr.Accordion("Advanced Generation Settings", open=False):
+        max_tokens_slider = gr.Slider(
+            minimum=256, maximum=4096, value=1500, step=64, label="Max New Tokens"
+        )
+        temperature_slider = gr.Slider(
+            minimum=0.1, maximum=1.5, value=0.7, step=0.1, label="Temperature"
+        )
+        top_p_slider = gr.Slider(
+            minimum=0.1, maximum=1.0, value=0.95, step=0.05, label="Top-P (Nucleus Sampling)"
+        )
+    # --- Connect Inputs/Outputs to the Function ---
+    generate_button.click(
+        fn=generate_code,
+        inputs=[
+            prompt_input,
+            backend_radio,
+            file_structure_radio,
+            max_tokens_slider,
+            temperature_slider,
+            top_p_slider,
+        ],
+        outputs=code_output,
+        api_name="generate_website_code" # Optional: for API usage
+    )
+# --- Launch the App ---
 if __name__ == "__main__":
+    demo.queue() # Enable queuing for handling multiple users
+    demo.launch(debug=True) # Set debug=False for production/Spaces