Spaces:

MINEOGO
/

pro-zephyr-coder

Running

App Files Files Community

MINEOGO commited on 8 days ago

Commit

4e60047

verified ·

1 Parent(s): 0e4a7a5

Update app.py

Browse files

Files changed (1) hide show

app.py +91 -97

app.py CHANGED Viewed

@@ -1,10 +1,9 @@
 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" # Or choose another suitable model
@@ -17,13 +16,10 @@ try:
     else:
         print("HF Token not found. Running without token (may lead to rate limits).")
         client = InferenceClient(model=MODEL)
-    # Optional: Add a quick health check if needed, though client init usually suffices
-    # client.get_model_status(MODEL) # Example check, might raise if model invalid
     print("Inference Client initialized successfully.")
 except Exception as e:
     print(f"Error initializing Inference Client: {e}")
-    # Provide a more informative error in the Gradio interface
-    raise gr.Error(f"Failed to initialize the AI model client for '{MODEL}'. Please check the model name and ensure network connectivity. If running locally without a token, you might hit rate limits. If using HF Spaces, ensure the HF_TOKEN secret is set correctly. Original Error: {e}")
 # --- Core Code Generation Function ---
 def generate_code(
@@ -37,50 +33,64 @@ def generate_code(
     """
     Generates website code based on user prompt and choices.
     Yields the code token by token for live updates.
     """
     print(f"--- Generating Code ---")
-    print(f"Prompt: {prompt[:100]}...") # Log truncated prompt
     print(f"Backend Context: {backend_choice}")
-    print(f"File Structure: {file_structure}")
     print(f"Settings: Max Tokens={max_tokens}, Temp={temperature}, Top-P={top_p}")
-    # --- System Message (Internal) ---
-    # Guides the AI's behavior. Not user-editable in the UI.
-    # Refined system prompt for clarity and stricter output formatting
     system_message = (
-        "You are an expert frontend web developer AI. Your task is to generate HTML, CSS, and potentially JavaScript code "
-        "for a website based ONLY on the user's description. Adhere strictly to the following constraints:\n"
-        "1.  **Output ONLY Code:** Generate only the raw code for the requested files (`index.html`, `style.css`, `script.js`). Do NOT include any introductory text, explanations, apologies, markdown formatting (like ```html), or closing remarks. Your response must start *immediately* with the code (e.g., `<!DOCTYPE html>` or `<!-- index.html -->`).\n"
-        "2.  **index.html is Mandatory:** ALWAYS generate a complete `index.html` file.\n"
-        "3.  **File Structure:**\n"
-        f"    - If '{file_structure}' is 'Multiple Files':\n"
-        "        - Use clear markers EXACTLY as follows:\n"
-        "          `<!-- index.html -->`\n"
-        "          `/* style.css */`\n"
-        "          `// script.js` (only include if JavaScript is necessary for the described functionality)\n"
-        "        - Place the corresponding code directly after each marker.\n"
-        "        - Link the CSS (`<link rel='stylesheet' href='style.css'>`) in the `<head>` of `index.html`.\n"
-        "        - Include the JS (`<script src='script.js'></script>`) just before the closing `</body>` tag in `index.html` if `script.js` is generated.\n"
-        f"    - If '{file_structure}' is 'Single File':\n"
-        "        - Embed ALL CSS within `<style>` tags inside the `<head>` of the `index.html` file.\n"
-        "        - Embed ALL necessary JavaScript within `<script>` tags just before the closing `</body>` tag of the `index.html` file.\n"
-        "4.  **Backend Context ({backend_choice}):** This choice provides context. For 'Flask' or 'Node.js', you might include standard template placeholders (like `{{ variable }}` for Flask/Jinja2 or similar patterns for Node templating engines if appropriate for the frontend structure), but primarily focus on generating the static frontend assets (HTML structure, CSS styling, client-side JS interactions). For 'Static', generate standard HTML/CSS/JS without backend-specific placeholders.\n"
-        "5.  **Focus on Frontend:** Generate the client-side code. Do not generate server-side Flask or Node.js code.\n"
-        "6.  **Completeness:** Generate functional code based on the prompt. If the prompt is vague, create a reasonable default structure."
     )
     # --- Construct the messages for the API ---
     messages = [
         {"role": "system", "content": system_message},
-        {"role": "user", "content": f"Create a website based on this description: {prompt}"} # Make user role explicit
     ]
     # --- Stream the response from the API ---
     response_stream = ""
     try:
         print("Sending request to Hugging Face Inference API...")
-        # CORRECTED: Removed stop_sequences
         for message in client.chat_completion(
             messages=messages,
             max_tokens=max_tokens,
@@ -89,95 +99,85 @@ def generate_code(
             top_p=top_p,
         ):
             token = message.choices[0].delta.content
-            # Basic check to ensure token is a string (it should be)
             if isinstance(token, str):
                 response_stream += token
-                # Clean potential unwanted prefixes sometimes added by models
-                # if response_stream.strip().startswith(("```html", "```")):
-                #    response_stream = response_stream.split("\n", 1)[-1]
                 yield response_stream # Yield the cumulative response for live update
-        print(f"API stream finished. Total length: {len(response_stream)}")
-        # Optional: Post-process to remove leading/trailing whitespace or markdown
-        final_response = response_stream.strip()
-        # More aggressive cleaning if needed:
-        # if final_response.startswith("```html"):
-        #     final_response = final_response[7:]
-        # if final_response.endswith("```"):
-        #     final_response = final_response[:-3]
-        # yield final_response.strip() # Yield final cleaned response
     except Exception as e:
         error_message = f"An error occurred during the API call: {e}"
         print(error_message)
-        # Display the error clearly in the output box
         yield f"## Error\n\nFailed to generate code.\n**Reason:** {e}\n\nPlease check the model status, your connection, and API token (if applicable)."
 # --- Build Gradio Interface using Blocks ---
-with gr.Blocks(css=".gradio-container { max-width: 90% !important; }") as demo: # Add CSS for wider layout
     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. **Note:** The AI generates only frontend code based on your description."
     )
     with gr.Row():
         with gr.Column(scale=2):
             prompt_input = gr.Textbox(
                 label="Website Description",
-                placeholder="e.g., A simple landing page with a navigation bar (Home, About, Contact), a hero section with a title and button, and a simple footer.",
-                lines=5, # Increased lines for better prompt visibility
             )
             backend_radio = gr.Radio(
                 ["Static", "Flask", "Node.js"],
                 label="Backend Context Hint",
                 value="Static",
-                info="Hint for AI: influences potential template placeholders (e.g., {{var}}) but AI generates ONLY frontend code.",
             )
             file_structure_radio = gr.Radio(
-                ["Multiple Files", "Single File"], # Default to multiple for clarity
                 label="Output File Structure",
                 value="Multiple Files",
-                info="Generate separate files (index.html, style.css, script.js) or embed all in index.html?",
             )
             generate_button = gr.Button("Generate Website Code", variant="primary")
         with gr.Column(scale=3):
-            # Use Code component which is better suited for displaying code
             code_output = gr.Code(
-                label="Generated Code",
-                language="html", # Base language, will contain CSS/JS markers if multiple files
-                lines=28, # Increased lines
-                interactive=False, # Read-only display
             )
     with gr.Accordion("Advanced Generation Settings", open=False):
-        max_tokens_slider = gr.Slider(
-            minimum=512, # Increased minimum for potentially complex sites
-            maximum=4096, # Match common context lengths
-            value=2048, # Increased default
-            step=128,
-            label="Max New Tokens",
-            info="Maximum number of tokens (approx. words/code elements) the AI can generate."
-        )
-        temperature_slider = gr.Slider(
-            minimum=0.1,
-            maximum=1.2, # Allow slightly higher for more creativity if needed
-            value=0.6, # Slightly lower default for more predictable code
-            step=0.1,
-            label="Temperature",
-            info="Controls randomness. Lower values (e.g., 0.2) make output more focused, higher values (e.g., 0.9) make it more creative/random."
-        )
-        top_p_slider = gr.Slider(
-            minimum=0.1,
-            maximum=1.0,
-            value=0.9, # Slightly lower default top-p
-            step=0.05,
-            label="Top-P (Nucleus Sampling)",
-            info="Alternative to temperature for controlling randomness. Considers only the most probable tokens with cumulative probability p."
-        )
-    # --- Connect Inputs/Outputs to the Function ---
     generate_button.click(
         fn=generate_code,
         inputs=[
@@ -189,29 +189,23 @@ with gr.Blocks(css=".gradio-container { max-width: 90% !important; }") as demo:
             top_p_slider,
         ],
         outputs=code_output,
-        #api_name="generate_website_code" # Optional: for API usage
     )
-    # Add examples for guidance
     gr.Examples(
         examples=[
             ["A simple counter page with a number display, an increment button, and a decrement button. Use Javascript for the logic.", "Static", "Single File"],
             ["A login form with fields for username and password, and a submit button. Basic styling.", "Static", "Multiple Files"],
-            ["Product cards display grid. Each card should show an image, product name, price, and an 'Add to Cart' button. Make it responsive.", "Static", "Multiple Files"],
             ["A personal blog homepage with a header, a list of recent posts (just placeholders), and a sidebar with categories.", "Flask", "Multiple Files"],
         ],
         inputs=[prompt_input, backend_radio, file_structure_radio],
-        label="Example Prompts" # Optional label for the examples section
     )
-# --- Launch the App ---
 if __name__ == "__main__":
     print("Starting Gradio app...")
-    # Enable queuing for handling multiple users, essential for Spaces
-    # Increase concurrency count if needed and if your hardware/Space plan supports it
-    demo.queue(max_size=10).launch(
-         # debug=True, # Set debug=False for production/Spaces deployment
-         # share=False # Set share=True to create a temporary public link (useful for local testing)
-    )
     print("Gradio app launched.")

 import gradio as gr
 from huggingface_hub import InferenceClient
 import os
+import re # Import regex for potential cleaning, although prompt is the primary fix
 # --- Configuration ---
 API_TOKEN = os.getenv("HF_TOKEN", None)
 MODEL = "HuggingFaceH4/zephyr-7b-beta" # Or choose another suitable model
     else:
         print("HF Token not found. Running without token (may lead to rate limits).")
         client = InferenceClient(model=MODEL)
     print("Inference Client initialized successfully.")
 except Exception as e:
     print(f"Error initializing Inference Client: {e}")
+    raise gr.Error(f"Failed to initialize the AI model client for '{MODEL}'. Check model name, network, and HF_TOKEN secret if applicable. Error: {e}")
 # --- Core Code Generation Function ---
 def generate_code(
     """
     Generates website code based on user prompt and choices.
     Yields the code token by token for live updates.
+    Strives to output ONLY raw code.
     """
     print(f"--- Generating Code ---")
+    print(f"Prompt: {prompt[:100]}...")
     print(f"Backend Context: {backend_choice}")
+    print(f"File Structure: {file_structure}") # Crucial input
     print(f"Settings: Max Tokens={max_tokens}, Temp={temperature}, Top-P={top_p}")
+    # --- Dynamically Build System Message Based on File Structure ---
+    # Define specific instructions based on the user's choice
+    if file_structure == "Single File":
+        file_structure_instruction = (
+            "- **File Structure is 'Single File':** Generate ONLY a single, complete `index.html` file. "
+            "Embed ALL CSS directly within `<style>` tags inside the `<head>`. "
+            "Embed ALL necessary JavaScript directly within `<script>` tags just before the closing `</body>` tag. "
+            "Do NOT use markers like `<!-- index.html -->` or `/* style.css */`."
+        )
+    else: # Multiple Files
+        file_structure_instruction = (
+            "- **File Structure is 'Multiple Files':** Generate code for `index.html`, `style.css`, and `script.js` (if JS is needed). "
+            "Use these EXACT markers to separate the files:\n"
+            "  `<!-- index.html -->`\n"
+            "  `/* style.css */`\n"
+            "  `// script.js` (ONLY include this marker and the JS code if JavaScript is necessary for the requested functionality).\n"
+            "- Place the corresponding code directly after each marker.\n"
+            "- Inside the `index.html` code block, ensure you correctly link the CSS (`<link rel='stylesheet' href='style.css'>`) in the `<head>`.\n"
+            "- Inside the `index.html` code block, ensure you correctly include the JS (`<script src='script.js'></script>`) just before the closing `</body>` tag *if* the `// script.js` marker and code are present."
+         )
+    # Assemble the full system message with the dynamic instruction
+    # Emphasize constraints VERY strongly
     system_message = (
+        "You are an expert frontend web developer AI. Your SOLE task is to generate RAW SOURCE CODE (HTML, CSS, JavaScript) based on the user's request and selected options. "
+        "You MUST follow ALL these rules ABSOLUTELY:\n"
+        "1.  **RAW CODE ONLY:** Your *entire* response MUST consist *only* of the requested code. NO extra text, NO explanations, NO apologies, NO introductions (like 'Here is the code...', 'Okay, here is the code...'), NO summaries, NO comments about the code (unless it's a standard code comment like `<!-- comment -->`), and ABSOLUTELY NO MARKDOWN FORMATTING like ```html, ```css, ```javascript, or ```.\n"
+        "2.  **IMMEDIATE CODE START:** The response MUST begin *directly* with the first character of the code (e.g., `<!DOCTYPE html>` or `<!-- index.html -->`). NO leading spaces or lines.\n"
+        "3.  **MANDATORY `index.html`:** Always generate the content for `index.html`.\n"
+        f"4.  **FILE STRUCTURE ({file_structure}):** Strictly follow ONLY the instructions for the *selected* file structure below:\n"
+        f"    {file_structure_instruction}\n" # Insert the specific instruction here
+        "5.  **BACKEND CONTEXT ({backend_choice}):** Use this as a hint for frontend structure (e.g., placeholders like `{{ variable }}` if 'Flask' is chosen), but ONLY generate the static frontend code (HTML, CSS, client-side JS).\n"
+        "6.  **FRONTEND ONLY:** Do NOT generate server-side code (Python, Node.js, etc.).\n"
+        "7.  **ACCURACY:** Generate functional code that directly addresses the user's prompt.\n\n"
+        "REMEMBER: ONLY CODE. NO OTHER TEXT. START IMMEDIATELY WITH CODE." # Final reinforcement
     )
     # --- Construct the messages for the API ---
     messages = [
         {"role": "system", "content": system_message},
+        # Make user prompt clearer
+        {"role": "user", "content": f"Generate the website frontend code based on this description: {prompt}"}
     ]
     # --- Stream the response from the API ---
     response_stream = ""
+    full_response_for_cleaning = ""
     try:
         print("Sending request to Hugging Face Inference API...")
         for message in client.chat_completion(
             messages=messages,
             max_tokens=max_tokens,
             top_p=top_p,
         ):
             token = message.choices[0].delta.content
             if isinstance(token, str):
                 response_stream += token
+                full_response_for_cleaning += token # Keep a separate copy for potential final cleaning
                 yield response_stream # Yield the cumulative response for live update
+        print(f"API stream finished. Raw length: {len(full_response_for_cleaning)}")
+        # --- Basic Post-Processing (Attempt to remove backticks if prompt fails) ---
+        # While the prompt *should* handle this, add a safety net.
+        cleaned_response = full_response_for_cleaning.strip()
+        # Remove potential leading/trailing markdown code fences more robustly
+        # Matches ``` followed by optional language identifier and newline, or just ```
+        cleaned_response = re.sub(r"^\s*```[a-z]*\s*\n?", "", cleaned_response)
+        cleaned_response = re.sub(r"\n?\s*```\s*$", "", cleaned_response)
+        # Also remove common introductory phrases if they slip through (less likely with strong prompt)
+        common_intros = [
+            "Here is the code:", "Okay, here is the code:", "Here's the code:",
+            "```html", "```css", "```javascript" # Also catch these if regex missed them
+        ]
+        for intro in common_intros:
+            if cleaned_response.lower().startswith(intro.lower()):
+                cleaned_response = cleaned_response[len(intro):].lstrip()
+        # Yield the final potentially cleaned response *once* after streaming is done
+        # This replaces the last yielded value from the loop if cleaning occurred
+        yield cleaned_response.strip() # Ensure no trailing whitespace after cleaning
     except Exception as e:
         error_message = f"An error occurred during the API call: {e}"
         print(error_message)
         yield f"## Error\n\nFailed to generate code.\n**Reason:** {e}\n\nPlease check the model status, your connection, and API token (if applicable)."
 # --- Build Gradio Interface using Blocks ---
+with gr.Blocks(css=".gradio-container { max-width: 90% !important; }") as demo:
     gr.Markdown("# Website Code Generator 🚀")
     gr.Markdown(
+        "Describe the website, choose options, and get ONLY the raw frontend code. "
+        "Code appears live below. **Select 'Single File' or 'Multiple Files' carefully.**"
     )
     with gr.Row():
         with gr.Column(scale=2):
             prompt_input = gr.Textbox(
                 label="Website Description",
+                placeholder="e.g., A simple landing page with a navbar, hero section, and footer.",
+                lines=5,
             )
             backend_radio = gr.Radio(
                 ["Static", "Flask", "Node.js"],
                 label="Backend Context Hint",
                 value="Static",
+                info="Hint for AI (e.g., template placeholders) - generates ONLY frontend code.",
             )
             file_structure_radio = gr.Radio(
+                ["Multiple Files", "Single File"], # Default: Multiple
                 label="Output File Structure",
                 value="Multiple Files",
+                info="Choose 'Single File' for everything in index.html OR 'Multiple Files' for separate css/js.", # Clarified info
             )
             generate_button = gr.Button("Generate Website Code", variant="primary")
         with gr.Column(scale=3):
             code_output = gr.Code(
+                label="Generated Code (Raw Output)", # Updated label
+                language="html",
+                lines=28,
+                interactive=False,
             )
     with gr.Accordion("Advanced Generation Settings", open=False):
+        max_tokens_slider = gr.Slider(minimum=512, maximum=4096, value=2048, step=128, label="Max New Tokens")
+        temperature_slider = gr.Slider(minimum=0.1, maximum=1.2, value=0.6, step=0.1, label="Temperature")
+        top_p_slider = gr.Slider(minimum=0.1, maximum=1.0, value=0.9, step=0.05, label="Top-P")
+    # --- Connect Inputs/Outputs ---
     generate_button.click(
         fn=generate_code,
         inputs=[
             top_p_slider,
         ],
         outputs=code_output,
     )
+    # --- Examples ---
     gr.Examples(
         examples=[
             ["A simple counter page with a number display, an increment button, and a decrement button. Use Javascript for the logic.", "Static", "Single File"],
             ["A login form with fields for username and password, and a submit button. Basic styling.", "Static", "Multiple Files"],
+            ["Product cards display grid. Each card shows an image, product name, price, and an 'Add to Cart' button. Make it responsive.", "Static", "Multiple Files"],
             ["A personal blog homepage with a header, a list of recent posts (just placeholders), and a sidebar with categories.", "Flask", "Multiple Files"],
+            ["A very basic HTML page with just a title 'My App' and a heading 'Welcome'. No CSS or JS.", "Static", "Single File"]
         ],
         inputs=[prompt_input, backend_radio, file_structure_radio],
+        label="Example Prompts"
     )
+# --- Launch ---
 if __name__ == "__main__":
     print("Starting Gradio app...")
+    demo.queue(max_size=10).launch()
     print("Gradio app launched.")