Update app.py

app.py

@@ -132,10 +132,20 @@ vibe_crew = Crew(
 def run_crew(prompt):
     try:
         if llm is None:
-            return "❌ **Error:** Gemini LLM not initialized. Please check your GOOGLE_API_KEY in environment variables.", None, None
+            return (
+                "❌ **Error:** Gemini LLM not initialized. Please check your GOOGLE_API_KEY in environment variables.",
+                None,
+                gr.update(visible=False),
+                gr.update(visible=False)
+            )
         
         if not prompt or prompt.strip() == "":
-            return "❌ **Error:** Please enter a prompt describing your desired website vibe.", None, None
+            return (
+                "❌ **Error:** Please enter a prompt describing your desired website vibe.",
+                None,
+                gr.update(visible=False),
+                gr.update(visible=False)
+            )
         
         # Clean up previous output
         if os.path.exists("outputs/index.html"):
@@ -151,85 +161,139 @@ def run_crew(prompt):
                 html_content = file.read()
             
             if html_content.strip():
+                # Create preview
+                preview_html = f'<iframe srcdoc="{html_content.replace(chr(34), "&quot;")}" width="100%" height="800px" style="border: 2px solid #e0e0e0; border-radius: 8px;"></iframe>'
+                
+                success_message = "✅ **Success!** Your website has been generated and is ready to download."
+                
                 return (
-                    f"✅ **Success!** Your website has been generated.\n\n{str(result)}", 
-                    html_content, 
-                    "outputs/index.html"
+                    success_message,
+                    preview_html,
+                    gr.update(value="outputs/index.html", visible=True),
+                    gr.update(visible=True)
                 )
             else:
                 return (
-                    f"⚠️ **Warning:** File created but is empty.\n\n{str(result)}", 
-                    "<!-- No content generated -->", 
-                    None
+                    "⚠️ **Warning:** File created but is empty. Please try again.",
+                    None,
+                    gr.update(visible=False),
+                    gr.update(visible=False)
                 )
         else:
             return (
-                f"❌ **Error:** Output file not found. The developer agent might have failed.\n\n{str(result)}", 
-                "<!-- File not created -->", 
-                None
+                "❌ **Error:** Output file not found. The developer agent might have failed. Please try again.",
+                None,
+                gr.update(visible=False),
+                gr.update(visible=False)
             )
     
     except Exception as e:
         error_trace = traceback.format_exc()
-        error_message = f"❌ **Error occurred during execution:**\n\n```\n{error_trace}\n```"
+        error_message = f"❌ **Error occurred during execution:**\n\n```python\n{str(e)}\n```\n\nPlease try again or check your API keys."
         print(error_trace)  # Also print to console
-        return error_message, f"<!-- Error: {str(e)} -->", None
+        return (
+            error_message,
+            None,
+            gr.update(visible=False),
+            gr.update(visible=False)
+        )
 
 # --- 7. CREATE THE GRADIO INTERFACE WITH CUSTOM LAYOUT ---
-with gr.Blocks(theme=gr.themes.Soft()) as iface:
+with gr.Blocks(theme=gr.themes.Soft(), css="""
+    .container { max-width: 1400px; margin: auto; }
+    .status-box { padding: 20px; border-radius: 8px; margin: 10px 0; }
+    .download-section { text-align: center; padding: 20px; }
+""") as iface:
+    
     gr.Markdown(
         """
         # 🎨 Vibe Coder AI
-        Enter the 'vibe' for your website, and this multi-agent team will design, write, and code a complete webpage for you using Gemini.
+        ### Create beautiful websites with AI - Just describe your vision!
+        Enter the 'vibe' for your website, and our multi-agent team will design, write, and code a complete webpage for you.
         """
     )
     
     with gr.Row():
-        with gr.Column():
-            prompt_input = gr.Textbox(
-                lines=5,
-                placeholder="e.g., A website for my new coffee shop in Brooklyn. The vibe should be cozy, rustic, and artisanal.",
-                label="Describe Your Website Vibe"
-            )
-            
-            generate_btn = gr.Button("🚀 Generate Website", variant="primary", size="lg")
-            
-            gr.Examples(
-                examples=[
-                    ["A personal portfolio for a photographer. The vibe should be minimalist, modern, and clean."],
-                    ["A landing page for a new tech startup focused on AI. Vibe: futuristic, sleek, professional."],
-                    ["A website for a local bakery. Vibe: warm, friendly, and homemade."]
-                ],
-                inputs=prompt_input
-            )
+        prompt_input = gr.Textbox(
+            lines=4,
+            placeholder="Example: A website for my new coffee shop in Brooklyn. The vibe should be cozy, rustic, and artisanal.",
+            label="✍️ Describe Your Website Vibe",
+            elem_classes="container"
+        )
     
     with gr.Row():
-        report_output = gr.Markdown(label="Crew Report")
+        generate_btn = gr.Button("🚀 Generate Website", variant="primary", size="lg", scale=1)
     
     with gr.Row():
-        with gr.Column():
-            code_output = gr.Code(label="Generated HTML Code", language="html", lines=20)
-        with gr.Column():
-            html_preview = gr.HTML(label="Live Preview")
+        gr.Examples(
+            examples=[
+                ["A personal portfolio for a photographer. The vibe should be minimalist, modern, and clean."],
+                ["A landing page for a new tech startup focused on AI. Vibe: futuristic, sleek, professional."],
+                ["A website for a local bakery. Vibe: warm, friendly, and homemade."],
+                ["A fitness coach website. Vibe: energetic, motivating, and bold."]
+            ],
+            inputs=prompt_input,
+            label="💡 Try these examples"
+        )
     
     with gr.Row():
-        download_file = gr.File(label="📥 Download Your Website", visible=True)
+        status_output = gr.Markdown(
+            value="",
+            label="Status",
+            elem_classes="status-box"
+        )
     
-    # Define the generation function with preview
-    def generate_and_preview(prompt):
-        report, code, file_path = run_crew(prompt)
-        
-        # Create a preview iframe if HTML was generated successfully
-        preview_html = ""
-        if code and code.strip() and not code.startswith("<!--"):
-            preview_html = f'<iframe srcdoc="{code.replace(chr(34), "&quot;")}" width="100%" height="600px" style="border: 1px solid #ccc; border-radius: 8px;"></iframe>'
-        
-        return report, code, file_path, preview_html
+    with gr.Row():
+        preview_output = gr.HTML(
+            label="🖥️ Live Preview",
+            visible=True
+        )
+    
+    with gr.Row():
+        with gr.Column(scale=1):
+            download_btn = gr.File(
+                label="📥 Download Website (HTML)",
+                visible=False,
+                elem_classes="download-section"
+            )
+        with gr.Column(scale=1):
+            view_code_btn = gr.Button(
+                "👁️ View Source Code",
+                visible=False,
+                variant="secondary"
+            )
+    
+    # Hidden code display (only shown when user clicks "View Source Code")
+    with gr.Row(visible=False) as code_row:
+        code_output = gr.Code(
+            label="📄 Generated HTML Source Code",
+            language="html",
+            lines=15,
+            elem_classes="container"
+        )
+    
+    def toggle_code_view():
+        return gr.update(visible=True)
+    
+    def generate_website(prompt):
+        status, preview, download, view_btn = run_crew(prompt)
+        return (
+            status,
+            preview,
+            download,
+            view_btn
+        )
     
     generate_btn.click(
-        fn=generate_and_preview,
+        fn=generate_website,
         inputs=[prompt_input],
-        outputs=[report_output, code_output, download_file, html_preview]
+        outputs=[status_output, preview_output, download_btn, view_code_btn]
+    )
+    
+    view_code_btn.click(
+        fn=lambda: (gr.update(visible=True), open("outputs/index.html", "r", encoding="utf-8").read() if os.path.exists("outputs/index.html") else ""),
+        inputs=None,
+        outputs=[code_row, code_output]
     )
 
 if __name__ == "__main__":