Update app.py

app.py

@@ -1,243 +1,50 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
 import os
-import re # For post-processing and parsing
+import re
 
 # --- Configuration ---
 API_TOKEN = os.getenv("HF_TOKEN", None)
-# Consider using a model known for stronger coding capabilities if backend generation is complex
-MODEL = "Qwen/Qwen2-7B-Instruct" # Example: Switched to a smaller, faster model for potentially better backend handling
-# MODEL = "Qwen/Qwen2.5-Coder-32B-Instruct" # Or keep your original model
+MODEL = "Qwen/Qwen2.5-Coder-32B-Instruct"
 
 # --- 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.")
+    print(f"Initializing Inference Client for model: {MODEL}")
+    client = InferenceClient(model=MODEL, token=API_TOKEN) if API_TOKEN else InferenceClient(model=MODEL)
 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}")
-
-# --- Helper Function for Parsing ---
-def parse_code_blocks(text, file_structure, backend_choice):
-    """Parses the generated text into code blocks based on markers."""
-    if file_structure == "Single File":
-        # Everything goes into HTML for single file mode
-        return {
-            "html": text.strip(),
-            "css": "/* CSS is embedded in HTML */",
-            "js": "// JavaScript is embedded in HTML",
-            "backend": f"// No backend file generated for 'Single File' mode."
-        }
-
-    # Default markers
-    markers = {
-        "html": r"<!--\s*index\.html\s*-->",
-        "css": r"/\*\s*style\.css\s*\*/",
-        "js": r"//\s*script\.js\s*//", # Added trailing // to potentially help delimit
-    }
-    # Add backend markers based on choice
-    if backend_choice == "Flask":
-        markers["backend"] = r"#\s*app\.py\s*#" # Using # marker #
-    elif backend_choice == "Node.js":
-        markers["backend"] = r"//\s*(server|app)\.js\s*//" # Using // marker //
-
-    # Find all marker positions
-    marker_positions = {}
-    for key, pattern in markers.items():
-        match = re.search(pattern, text, re.IGNORECASE)
-        if match:
-            marker_positions[key] = match.start()
-
-    # If no markers found, assume it's all HTML (fallback)
-    if not marker_positions:
-         print("Warning: No file markers found in the output. Assuming all content is HTML.")
-         # Check if it looks like CSS or JS first before defaulting to HTML
-         cleaned_text = text.strip()
-         if cleaned_text.startswith(("{", ".", "#", "/*")) and "{" in cleaned_text and "}" in cleaned_text:
-              print("Heuristic: Output looks like CSS.")
-              return {"html": "", "css": cleaned_text, "js": "", "backend": ""}
-         elif cleaned_text.startswith(("function", "const", "let", "var", "//", "import")) and ("(" in cleaned_text or "{" in cleaned_text):
-             print("Heuristic: Output looks like JS.")
-             return {"html": "", "css": "", "js": cleaned_text, "backend": ""}
-         else: # Default to HTML
-             return {"html": cleaned_text, "css": "", "js": "", "backend": ""}
-
-
-    # Sort markers by their position
-    sorted_markers = sorted(marker_positions.items(), key=lambda item: item[1])
-
-    # Extract code blocks
-    code_blocks = {key: "" for key in markers} # Initialize all keys
-    for i, (key, start_pos) in enumerate(sorted_markers):
-        # Find the start of the code block (after the marker)
-        marker_match = re.search(markers[key], text, re.IGNORECASE) # Find the specific marker text
-        code_start = marker_match.end()
-
-        # Find the end of the code block (start of the next marker or end of text)
-        if i + 1 < len(sorted_markers):
-            next_marker_key, next_marker_pos = sorted_markers[i+1]
-            code_end = next_marker_pos
-        else:
-            code_end = len(text)
-
-        # Extract and clean the code
-        code = text[code_start:code_end].strip()
-        code_blocks[key] = code
-
-    # Fill potential missing keys if they existed in original markers dict
-    final_blocks = {
-        "html": code_blocks.get("html", ""),
-        "css": code_blocks.get("css", ""),
-        "js": code_blocks.get("js", ""),
-        "backend": code_blocks.get("backend", "")
-    }
-
-    # If backend is static but backend code was somehow generated, clear it
-    if backend_choice == "Static":
-        final_blocks["backend"] = "// No backend file needed for 'Static' mode."
-
-
-    # Fallback if HTML is empty but others aren't (marker parsing failed maybe?)
-    if not final_blocks["html"] and (final_blocks["css"] or final_blocks["js"] or final_blocks["backend"]):
-         # Check if the original text looks like HTML
-         if text.strip().startswith("<!DOCTYPE html") or text.strip().startswith("<html"):
-              print("Warning: Marker parsing might have failed, but text looks like HTML. Assigning full text to HTML.")
-              final_blocks["html"] = text.strip()
-              final_blocks["css"] = "" # Clear others to avoid duplication if parsing failed badly
-              final_blocks["js"] = ""
-              final_blocks["backend"] = ""
-
-
-    return final_blocks
-
+    raise gr.Error(f"Failed to initialize model client. 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, emphasizes completeness, and strictly outputs ONLY raw code.
-    Parses output into separate files for the UI tabs when 'Multiple Files' is selected.
-    Yields cumulative raw code to the first tab for live updates, then returns parsed blocks.
-    """
-    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}")
+    print(f"Generating code for: {prompt[:100]}... | Backend: {backend_choice}")
 
     # --- Dynamically Build System Message ---
-    backend_instructions = ""
-    file_markers = ["<!-- index.html -->", "/* style.css */", "// script.js //"] # Base markers
-
-    if backend_choice == "Static":
-        backend_instructions = (
-            f"- **Backend is '{backend_choice}':** Generate ONLY frontend code (HTML, CSS, JS). Do NOT generate any server-side files or logic.\n"
-        )
-        file_structure_detail = (
-             "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 if JS is generated)\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."
-        )
-    elif backend_choice == "Flask":
-        backend_instructions = (
-            f"- **Backend is '{backend_choice}':** Generate a basic Python Flask application (`app.py`).\n"
-            "  - Include necessary imports (`Flask`, `render_template`).\n"
-            "  - Create a simple Flask app instance.\n"
-            "  - Define a root route (`@app.route('/')`) that renders `index.html`.\n"
-            "  - Include the standard `if __name__ == '__main__': app.run(debug=True)` block.\n"
-            "- **HTML Templates:** Modify the generated `index.html` to be a Flask template.\n"
-            "  - Use Jinja2 syntax (e.g., `{{ variable }}`) *if* the prompt implies dynamic data, otherwise generate static HTML structure within the template.\n"
-            "  - Link CSS using `url_for('static', filename='style.css')`.\n"
-            "  - Include JS using `url_for('static', filename='script.js')`.\n"
-            "- Assume CSS and JS are served from a `static` folder (but generate the code for `style.css` and `script.js` directly).\n"
-        )
-        file_markers.append("# app.py #") # Add Flask marker
-        file_structure_detail = (
-             "Generate code for `index.html` (as a Flask template), `style.css`, `script.js` (if JS is needed), and `app.py`.\n"
-             "Use these EXACT markers to separate the files:\n"
-             "   `<!-- index.html -->`\n"
-             "   `/* style.css */`\n"
-             "   `// script.js //` (only include if JS is generated)\n"
-             "   `# app.py #`\n"
-             "- Place the corresponding code directly after each marker."
-        )
-    elif backend_choice == "Node.js":
-        backend_instructions = (
-            f"- **Backend is '{backend_choice}':** Generate a basic Node.js Express application (`server.js` or `app.js`).\n"
-            "  - Include necessary requires (`express`, `path`).\n"
-            "  - Create an Express app instance.\n"
-            "  - Configure middleware to serve static files from a `public` directory (e.g., `app.use(express.static('public'))`).\n"
-            "  - Define a root route (`app.get('/')`) that sends `index.html` (located in `public`).\n"
-            "  - Start the server (`app.listen(...)`).\n"
-        "- **HTML:** Generate a standard `index.html` file. Link CSS (`/style.css`) and JS (`/script.js`) assuming they are in the `public` folder.\n"
-        )
-        file_markers.append("// server.js //") # Add Node marker
-        file_structure_detail = (
-             "Generate code for `index.html`, `style.css`, `script.js` (if JS is needed), and `server.js` (or `app.js`).\n"
-             "Use these EXACT markers to separate the files:\n"
-             "   `<!-- index.html -->`\n"
-             "   `/* style.css */`\n"
-             "   `// script.js //` (only include if JS is generated)\n"
-             "   `// server.js //`\n"
-             "- Place the corresponding code directly after each marker."
-        )
-
-    # File Structure Instructions
-    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 any file separation markers. Ignore backend instructions if any were implied."
-        )
-    else: # Multiple Files
-        file_structure_instruction = (
-            f"- **File Structure is 'Multiple Files':** {file_structure_detail}"
-         )
-
-    # Assemble the full system message
     system_message = (
-        "You are an expert web developer AI. Your goal is to generate **complete, functional, and visually appealing** code based *only* on the user's description and selected options (Backend, File Structure). "
-        "Follow ALL these rules with EXTREME STRICTNESS:\n"
-        "1.  **STYLE & DETAIL:** Generate rich frontend code. Use **plenty of CSS** for layout, spacing, typography, colors, and effects.\n"
-        "2.  **COMPLETENESS:** Generate the *entire* requested code structure for ALL specified files. Ensure proper syntax and closing tags/brackets. **DO NOT STOP GENERATING PREMATURELY.**\n"
-        "3.  **RAW CODE ONLY:** Your *entire* response MUST consist *only* of the requested source code. NO extra text, NO explanations, NO apologies, NO introductions, 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|>`.\n"
-        "4.  **IMMEDIATE CODE START:** The response MUST begin *directly* with the first character of the code (e.g., `<!DOCTYPE html>` or the first file marker like `<!-- index.html -->`).\n"
-        "5.  **IMMEDIATE CODE END:** The response MUST end *immediately* after the very last character of the generated code (`</html>`, `}`, `;`, `})`, etc.). DO NOT add *any* text, spaces, or newlines after the code concludes.\n"
-        f"{backend_instructions}" # Inject backend specific instructions
-        f"6.  **FILE STRUCTURE ({file_structure}):** Strictly follow ONLY the instructions for the *selected* file structure:\n"
-        f"    {file_structure_instruction}\n"
-        "7.  **ACCURACY:** Generate functional code addressing the user's prompt, respecting the chosen backend context (templating, file serving).\n\n"
-        "REMEMBER: Output ONLY raw code. Respect the chosen backend and file structure. Use the specified markers EXACTLY if generating multiple files. START immediately with code. FINISH the entire code generation. END immediately with code. NO extra text/tags."
+        "you are an ai that is supposed to generate websites, you must not say anything except giving code , "
+        "user can select backend like static , flask , nodejs only , you should always keep the website sfw and minimal errors, "
+        "you must create an index.html following the user prompt, "
+        "if the user asks you create an code that's not about an website you should say "
+        "'hey there! am here to create websites for you unfortunately am programmed to not create codes! otherwise I would go on the naughty list :-(', "
+        "your code always must have no useless comments you should only add comments where users are required to modify the code."
     )
 
+    user_prompt = f"USER_PROMPT = {prompt}\nUSER_BACKEND = {backend_choice}"
+
     messages = [
         {"role": "system", "content": system_message},
-        {"role": "user", "content": f"Generate the complete website code for: {prompt}"}
+        {"role": "user", "content": user_prompt}
     ]
 
-    # --- Stream the response ---
-    raw_response = ""
-    token_count = 0
+    response_stream = ""
+    full_response = ""
+
     try:
-        print("Sending request to Hugging Face Inference API...")
         stream = client.chat_completion(
             messages=messages,
             max_tokens=max_tokens,
@@ -248,173 +55,83 @@ def generate_code(
         for message in stream:
             token = message.choices[0].delta.content
             if isinstance(token, str):
-                token_count += 1
-                raw_response += token
-                # Yield the raw, cumulative response to the first tab for live feedback
-                yield (raw_response, "Streaming...", "Streaming...", "Streaming...")
+                response_stream += token
+                full_response += token
+                yield response_stream
 
-        print(f"API stream finished. Received ~{token_count} tokens. Raw length: {len(raw_response)}")
-        if token_count >= max_tokens - 15: # Check if close to the limit
-             print(f"WARNING: Generation might have been cut short due to reaching max_tokens limit ({max_tokens}).")
-             raw_response += "\n\n<!-- WARNING: Output may be incomplete due to max_tokens limit. -->"
-
-
-        # --- Post-Processing (Basic Cleanup - Less aggressive now) ---
-        cleaned_response = raw_response.strip()
-        # Remove potential markdown code blocks (less likely with strict prompt but good safety)
+        cleaned_response = full_response.strip()
         cleaned_response = re.sub(r"^\s*```[a-z]*\s*\n?", "", cleaned_response)
         cleaned_response = re.sub(r"\n?\s*```\s*$", "", cleaned_response)
-        # Remove assistant tags (less likely but possible)
-        cleaned_response = re.sub(r"<\|(user|assistant)\|>", "", cleaned_response, flags=re.IGNORECASE)
+        cleaned_response = re.sub(r"<\s*\|?\s*(user|assistant)\s*\|?\s*>", "", cleaned_response, flags=re.IGNORECASE)
 
-        print("Parsing response into code blocks...")
-        parsed_code = parse_code_blocks(cleaned_response, file_structure, backend_choice)
-        print("Parsing complete.")
+        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."
+        ]
+        for phrase in common_phrases:
+            if cleaned_response.lower().startswith(phrase.lower()):
+                cleaned_response = cleaned_response[len(phrase):].lstrip()
 
-        # Return the parsed code blocks for the respective tabs
-        return (
-            parsed_code["html"],
-            parsed_code["css"],
-            parsed_code["js"],
-            parsed_code["backend"] # Will be empty or placeholder for Static/Single File
-        )
+        yield cleaned_response.strip()
 
     except Exception as e:
-        error_message = f"An error occurred during the API call or processing: {e}"
-        print(error_message)
-        # Return error message to all tabs
-        error_output = f"## Error\n\nFailed to generate code.\n**Reason:** {e}\n\nPlease check the model status, your connection, and API token (if applicable)."
-        return (error_output, error_output, error_output, error_output)
+        yield f"## Error\n\nFailed to generate code.\n**Reason:** {e}"
 
-
-# --- Build Gradio Interface using Blocks ---
-with gr.Blocks(css=".gradio-container { max-width: 95% !important; }") as demo:
-    gr.Markdown("# ✨ Website Code Generator v2 ✨")
+# --- Build Gradio Interface ---
+with gr.Blocks(css=".gradio-container { max-width: 90% !important; }") as demo:
+    gr.Markdown("# ✨ Website Code Generator ✨")
     gr.Markdown(
-        "Describe the website you want. Select a backend context hint (Static, Flask, Node.js) and file structure. "
-        "The AI will generate code, attempting to respect the backend choice (e.g., basic server file, template syntax). "
-        "**Output appears in the tabs below.**\n"
-        "**Important:**\n"
-        "1. Backend generation is experimental. The AI might produce basic structures but not fully complex applications.\n"
-        "2. For 'Multiple Files', code is split based on markers (`<!-- index.html -->`, `/* style.css */`, etc.). Check tabs for results.\n"
-        "3. **If code seems cut off**, increase 'Max New Tokens' and regenerate!"
+        "Describe the website you want. The AI will generate a **single-file** `index.html` website.\n\n"
+        "**Rules:**\n"
+        "- Backend hint (Static / Flask / Node.js).\n"
+        "- Always fully SFW and minimal errors.\n"
+        "- Only generates websites. No other codes.\n"
+        "- Minimal necessary comments only."
     )
 
     with gr.Row():
         with gr.Column(scale=2):
             prompt_input = gr.Textbox(
                 label="Website Description",
-                placeholder="e.g., A Flask app portfolio site with nav, hero, project cards (use Jinja placeholders for data), and contact form.",
+                placeholder="e.g., A simple landing page with a hero section and contact form.",
                 lines=6,
             )
             backend_radio = gr.Radio(
-                ["Static", "Flask", "Node.js"], label="Backend Context", value="Static",
-                info="Static: Frontend only. Flask/Node: Attempts basic backend file + frontend integration (experimental)."
-            )
-            file_structure_radio = gr.Radio(
-                ["Multiple Files", "Single File"], label="Output File Structure", value="Multiple Files",
-                info="Single: All in index.html. Multiple: Separated into tabs (HTML, CSS, JS, Backend if applicable)."
+                ["Static", "Flask", "Node.js"],
+                label="Backend Context",
+                value="Static",
+                info="Hint only. Always generates only index.html."
             )
-            generate_button = gr.Button("🚀 Generate Code", variant="primary")
+            generate_button = gr.Button("✨ Generate Website Code", variant="primary")
 
         with gr.Column(scale=3):
-            # Use Tabs for output
-            with gr.Tabs(elem_id="code-tabs"):
-                with gr.Tab("HTML", elem_id="html-tab"):
-                    html_output = gr.Code(
-                        label="index.html", # Label clarifies file even if tab name is generic
-                        language="html",
-                        lines=28, # Adjust lines per tab
-                        interactive=False,
-                        show_label=True
-                    )
-                with gr.Tab("CSS", elem_id="css-tab"):
-                    css_output = gr.Code(
-                        label="style.css",
-                        language="css",
-                        lines=28,
-                        interactive=False,
-                        show_label=True
-                    )
-                with gr.Tab("JavaScript", elem_id="js-tab"):
-                    js_output = gr.Code(
-                        label="script.js",
-                        language="javascript",
-                        lines=28,
-                        interactive=False,
-                        show_label=True
-                    )
-                with gr.Tab("Backend", elem_id="backend-tab"):
-                     # Label will indicate file type
-                    backend_output = gr.Code(
-                        label="app.py / server.js",
-                        language="python", # Default, can maybe be dynamic later if needed
-                        lines=28,
-                        interactive=False,
-                        show_label=True
-                    )
-
+            code_output = gr.Code(
+                label="Generated index.html",
+                language="html",
+                lines=30,
+                interactive=False,
+            )
 
-    with gr.Accordion("Advanced Generation Settings", open=False):
+    with gr.Accordion("Advanced Settings", open=False):
         max_tokens_slider = gr.Slider(
             minimum=512,
-            maximum=4096, # Adjust based on model's max context if needed
+            maximum=4096,
             value=3072,
             step=256,
-            label="Max New Tokens",
-            info="Max length of generated code (all files combined). Increase if output is cut off!"
-            )
+            label="Max New Tokens"
+        )
         temperature_slider = gr.Slider(
-            minimum=0.1, maximum=1.2, value=0.7, step=0.1, label="Temperature",
-            info="Controls randomness. Lower=focused, Higher=creative."
-            )
+            minimum=0.1, maximum=1.2, value=0.7, 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",
-            info="Alternative randomness control."
-            )
+            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=[
-            prompt_input,
-            backend_radio,
-            file_structure_radio,
-            max_tokens_slider,
-            temperature_slider,
-            top_p_slider,
-        ],
-        # Output to the individual code blocks within the tabs
-        outputs=[
-            html_output,
-            css_output,
-            js_output,
-            backend_output,
-        ],
-    )
-
-# --- Examples ---
-    gr.Examples(
-        examples=[
-            # Static 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"],
-            # Flask Example
-            ["A personal blog homepage using Flask. Include a clean header with nav links, a main area for post summaries (use Jinja loops for placeholder posts like {{ post.title }}), and a simple footer.", "Flask", "Multiple Files"],
-            # Node.js Example
-            ["A 'Coming Soon' page using Node.js/Express to serve the static files. Include a large countdown timer (use JS), a background image, and an email signup form. Make it look sleek.", "Node.js", "Multiple Files"],
-             # More Complex Examples
-            ["A simple Flask app for a to-do list. The main page shows the list (use Jinja). Include a form to add new items (POST request handled by Flask). Store items in a simple Python list in memory for now.", "Flask", "Multiple Files"],
-            ["A portfolio website using Static generation. Sections for Hero, About Me, Projects (grid layout), and Contact Form. Add subtle scroll animations.", "Static", "Multiple Files"],
-
-        ],
-        inputs=[prompt_input, backend_radio, file_structure_radio],
-        label="Example Prompts (Try Different Backends!)"
+        inputs=[prompt_input, backend_radio, max_tokens_slider, temperature_slider, top_p_slider],
+        outputs=code_output,
     )
 
-# --- Launch ---
 if __name__ == "__main__":
-    print("Starting Gradio app...")
-    # Ensure queue is enabled for Spaces, might need higher concurrency if backend generation is slow
-    demo.queue(max_size=10).launch()
-    print("Gradio app launched.")
+    demo.queue(max_size=10).launch()