Spaces:

MINEOGO
/

pro-zephyr-coder

Running

App Files Files Community

MINEOGO commited on 7 days ago

Commit

244ea60

verified ·

1 Parent(s): 1c5dbd6

Create app.py

Browse files

Files changed (1) hide show

app.py +215 -0

app.py ADDED Viewed

	@@ -0,0 +1,215 @@

+import gradio as gr
+from huggingface_hub import InferenceClient
+import os
+import re # For post-processing fallback
+# --- Configuration ---
+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)
+    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(
+    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.
+    Aims for richer CSS and strictly outputs ONLY raw code.
+    Yields the code token by token for live updates.
+    """
+    print(f"--- Generating Code ---")
+    print(f"Prompt: {prompt[:100]}...")
+    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}")
+    # --- Dynamically Build System Message Based on File Structure & Style Request ---
+    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 file separation markers."
+        )
+    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: `<!-- index.html -->`, `/* style.css */`, `// script.js` (only if JS is needed).\n"
+            "- Place the corresponding code directly after each marker.\n"
+            "- Inside `index.html`, link `style.css` in the `<head>` and include `script.js` before `</body>` if generated."
+         )
+    # Assemble the full system message with enhanced style guidance and stricter output rules
+    system_message = (
+        "You are an expert frontend web developer AI. Your primary goal is to generate **visually appealing, modern, and well-styled** frontend code (HTML, CSS, client-side JS) based *only* on the user's description and selected options. "
+        "Follow ALL these rules with EXTREME STRICTNESS:\n"
+        "1.  **STYLE & DETAIL:** Generate rich, detailed code. Don't just make minimal examples. Use **plenty of CSS** for layout (Flexbox/Grid), spacing (padding/margin), typography (fonts), colors, and consider adding subtle transitions or effects for a polished look. Aim for a high-quality visual result.\n"
+        "2.  **RAW CODE ONLY:** Your *entire* response MUST consist *only* of the requested source code. NO extra text, NO explanations, NO apologies, NO introductions ('Here is the code...'), NO summaries, NO comments about the code (except standard code comments), NO MARKDOWN formatting (like ```html), and ***ABSOLUTELY NO CONVERSATIONAL TEXT OR TAGS*** like `<|user|>` or `<|assistant|>` before, during, or after the code.\n"
+        "3.  **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, newlines, or any other characters.\n"
+        "4.  **IMMEDIATE CODE END:** The response MUST end *immediately* after the very last character of the generated code (e.g., the final `</html>`, `}`, or `;`). DO NOT add *any* text, spaces, or newlines after the code concludes.\n"
+        "5.  **MANDATORY `index.html`:** Always generate the content for `index.html`.\n"
+        f"6.  **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
+        "7.  **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"
+        "8.  **FRONTEND ONLY:** Do NOT generate server-side code (Python, Node.js, etc.).\n"
+        "9.  **ACCURACY:** Generate functional code that directly addresses the user's prompt.\n\n"
+        "REMEMBER: Create visually appealing code. Output ONLY the raw code. START immediately with code. END immediately with code. NO extra text or tags EVER." # Final reinforcement
+    )
+    # --- Construct the messages for the API ---
+    messages = [
+        {"role": "system", "content": system_message},
+        {"role": "user", "content": f"Generate the website frontend code for: {prompt}"} # Slightly rephrased user message
+    ]
+    # --- 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,
+            stream=True,
+            temperature=temperature, # User controlled - 0.7 is a reasonable default balance
+            top_p=top_p,
+        ):
+            token = message.choices[0].delta.content
+            if isinstance(token, str):
+                response_stream += token
+                full_response_for_cleaning += token
+                yield response_stream # Yield cumulative response for live update
+        print(f"API stream finished. Raw length: {len(full_response_for_cleaning)}")
+        # --- Post-Processing (Fallback Safety Net) ---
+        # Primarily rely on the prompt, but clean common issues just in case.
+        cleaned_response = full_response_for_cleaning.strip()
+        # Remove potential leading/trailing markdown code fences
+        cleaned_response = re.sub(r"^\s*```[a-z]*\s*\n?", "", cleaned_response)
+        cleaned_response = re.sub(r"\n?\s*```\s*$", "", cleaned_response)
+        # Remove potential conversational tags if they slip through (less likely now)
+        cleaned_response = re.sub(r"<\s*\|?\s*(user|assistant)\s*\|?\s*>", "", cleaned_response, flags=re.IGNORECASE)
+        # Remove common introductory/closing phrases if they slip through
+        common_phrases = [
+            "Here is the code:", "Okay, here is the code:", "Here's the code:",
+            "Sure, here is the code you requested:", "Let me know if you need anything else."
+            # Add more if needed
+        ]
+        temp_response = cleaned_response.lower()
+        for phrase in common_phrases:
+            if temp_response.startswith(phrase.lower()):
+                cleaned_response = cleaned_response[len(phrase):].lstrip()
+            if temp_response.endswith(phrase.lower()):
+                 cleaned_response = cleaned_response[:-len(phrase)].rstrip()
+        # Yield the final cleaned response *once* after streaming.
+        yield cleaned_response.strip()
+    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 ✨") # Added some flair
+    gr.Markdown(
+        "Describe the website you want. The AI will generate **visually styled** frontend code (HTML, CSS, JS) using **plenty of CSS**. "
+        "The code appears live below. \n"
+        "**Important:** This generator creates code based *only* on your initial description. To refine the output, modify your description and generate again." # Added clarification
+    )
+    with gr.Row():
+        with gr.Column(scale=2):
+            prompt_input = gr.Textbox(
+                label="Website Description",
+                placeholder="e.g., A modern portfolio landing page with a smooth scroll navigation, a stylish hero section, project cards with hover effects, and a contact form.", # More ambitious placeholder
+                lines=6, # Slightly more lines
+            )
+            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"], label="Output File Structure", value="Multiple Files",
+                info="Choose 'Single File' (all in index.html) or 'Multiple Files' (separate css/js)."
+            )
+            generate_button = gr.Button("🎨 Generate Stylish Website Code", variant="primary") # Updated button text
+        with gr.Column(scale=3):
+            code_output = gr.Code(
+                label="Generated Code (Raw Output - Aiming for Style!)", # Updated label
+                language="html",
+                lines=30, # More lines for potentially longer code
+                interactive=False,
+            )
+    with gr.Accordion("Advanced Generation Settings", open=False):
+        max_tokens_slider = gr.Slider(
+            minimum=512, maximum=4096, value=2560, step=128, label="Max New Tokens", # Increased default
+            info="Max length of generated code. Increase for complex pages."
+            )
+        temperature_slider = gr.Slider(
+            minimum=0.1, maximum=1.2, value=0.7, step=0.1, label="Temperature", # Default 0.7 is often good
+            info="Controls randomness. Lower=more predictable, Higher=more creative."
+            )
+        top_p_slider = gr.Slider(
+            minimum=0.1, maximum=1.0, value=0.9, step=0.05, label="Top-P",
+            info="Alternative randomness control."
+            )
+    # --- Connect Inputs/Outputs ---
+    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,
+    )
+    # --- Examples ---
+    gr.Examples(
+        examples=[
+            ["A simple counter page with a number display, an increment button, and a decrement button. Style the buttons nicely and center everything.", "Static", "Single File"],
+            ["A responsive product grid for an e-commerce site. Each card needs an image, title, price, and 'Add to Cart' button with a hover effect. Use modern CSS.", "Static", "Multiple Files"],
+            ["A personal blog homepage featuring a clean header with navigation, a main content area for post summaries (placeholders ok), and a simple footer. Use a nice font.", "Flask", "Multiple Files"],
+            ["A 'Coming Soon' page with a large countdown timer (use JS), a background image, and an email signup form. Make it look sleek.", "Static", "Multiple Files"]
+        ],
+        inputs=[prompt_input, backend_radio, file_structure_radio],
+        label="Example Prompts (Aiming for Style)" # Updated label
+    )
+# --- Launch ---
+if __name__ == "__main__":
+    print("Starting Gradio app...")
+    demo.queue(max_size=10).launch()
+    print("Gradio app launched.")