Spaces:

MINEOGO
/

pro-zephyr-coder

Running

App Files Files Community

MINEOGO commited on 9 days ago

Commit

0e4a7a5

verified ·

1 Parent(s): 4917053

Update app.py

Browse files

Files changed (1) hide show

app.py +105 -51

app.py CHANGED Viewed

@@ -6,20 +6,24 @@ import os
 # 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(
@@ -34,112 +38,143 @@ def generate_code(
     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 ---
@@ -154,10 +189,29 @@ with gr.Blocks() as demo:
             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

 # 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
 # --- Initialize Inference Client ---
 try:
+    print(f"Attempting to initialize Inference Client for model: {MODEL}")
     if API_TOKEN:
+        print("Using HF Token found in environment.")
         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)
+    # 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(
     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,
             stream=True,
             temperature=temperature,
             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 ---
             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.")