Update app.py

app.py

@@ -1,3 +1,19 @@
+To give you the complete, updated code that includes the visualization feature, I will first verify the most current and stable model names for Google Gemini, as the previous attempts resulted in a `404` error due to model naming changes. This will ensure the final code is functional and accurate.
+
+Here are the queries I'll use:
+Based on the search results, the following are the latest stable Google Gemini model names for the `v1beta` API:
+
+  * `gemini-2.5-pro`
+  * `gemini-2.5-flash`
+  * `gemini-2.5-flash-lite`
+  * `gemini-2.0-flash-001`
+  * `gemini-2.0-flash-lite-001`
+
+The `gr.Mermaid` component is a valid Gradio component for rendering Mermaid diagrams.
+
+Here is the complete, updated code. I have made the necessary changes to integrate the `gr.Mermaid` component and use a more current, stable model name to avoid the `404` error.
+
+````python
 #!/usr/bin/env python3
 """
 Code Flow Analyzer with Gradio Interface - Hugging Face Spaces & Colab Compatible
@@ -172,8 +188,9 @@ agent_executor = None
 
 if api_key:
     try:
-        model = ChatGoogleGenerativeAI(model="gemini-2.0-flash", temperature=0)
-        print("✅ Gemini model initialized successfully:gemini-2.0-flash")
+        # Use a stable, updated model name to avoid the 404 error
+        model = ChatGoogleGenerativeAI(model="gemini-2.0-flash-001", temperature=0)
+        print("✅ Gemini model initialized successfully: gemini-2.0-flash-001")
         memory = MemorySaver()
     except Exception as e:
         print(f"❌ Could not initialize Gemini model: {e}")
@@ -556,7 +573,7 @@ def analyze_code_with_agent(source_code: str, language: str = "auto") -> Tuple[s
         print(f"Error details: {traceback.format_exc()}")
         return "", "", [], 0, error_msg
 
-# --- Gradio Interface Setup (unchanged) ---
+# --- Gradio Interface Setup (UPDATED) ---
 def create_gradio_interface():
     """Create and configure the Gradio interface"""
 
@@ -566,6 +583,7 @@ def create_gradio_interface():
             return (
                 "Please enter some code to analyze",
                 "",
+                "",
                 "No analysis performed",
                 "Functions: 0 | Complexity: 0/100",
                 ""
@@ -577,19 +595,21 @@ def create_gradio_interface():
             return (
                 error,
                 "",
+                "",
                 "Analysis failed",
                 "Functions: 0 | Complexity: 0/100",
                 ""
             )
 
         # Format the outputs
-        mermaid_display = f"```mermaid\n{mermaid}\n```" if mermaid else "No diagram generated"
+        mermaid_code_display = f"```mermaid\n{mermaid}\n```" if mermaid else "No diagram generated"
         functions_display = f"**Functions Found:** {', '.join(functions)}" if functions else "No functions detected"
         stats_display = f"Functions: {len(functions)} | Complexity: {complexity}/100"
 
         return (
             "✅ Analysis completed successfully!",
-            mermaid_display,
+            mermaid, # Raw Mermaid code for the gr.Mermaid component
+            mermaid_code_display, # Markdown-formatted code for the textbox
             summary,
             stats_display,
             functions_display
@@ -679,26 +699,20 @@ def create_gradio_interface():
         with gr.Row():
             with gr.Column():
                 gr.Markdown("### 🎨 Generated Mermaid Diagram")
-                mermaid_output = gr.Textbox(
-                    label="Mermaid Code",
-                    lines=15,
-                    max_lines=20,
-                    interactive=True,
-                    show_copy_button=True
+                # Updated component to render the diagram visually
+                mermaid_output = gr.Mermaid(
+                    label="Flowchart Diagram"
                 )
 
-                gr.Markdown("""
-                **💡 How to visualize:**
-                1. Copy the Mermaid code above
-                2. Visit [mermaid.live](https://mermaid.live)
-                3. Paste and see your code flow diagram!
-
-                **📱 For Colab users:**
-                - The Mermaid code above shows your program's flow structure
-                - Copy it to mermaid.live for a beautiful visual diagram
-                - Try the examples above to see different code patterns
-                """)
-
+                # Keep the code in a collapsible block for users who want to copy it
+                with gr.Accordion("Mermaid Code (for copying)", open=False):
+                    mermaid_code_output = gr.Textbox(
+                        label="Mermaid Code",
+                        lines=10,
+                        interactive=True,
+                        show_copy_button=True
+                    )
+        
         with gr.Row():
             with gr.Column():
                 gr.Markdown("### 📋 Analysis Summary")
@@ -709,10 +723,11 @@ def create_gradio_interface():
                 )
 
         # Connect the analyze button
+        # Updated outputs to include the new mermaid_code_output component
         analyze_btn.click(
             fn=analyze_code_gradio,
             inputs=[code_input, language_dropdown],
-            outputs=[status_output, mermaid_output, summary_output, stats_output, functions_output]
+            outputs=[status_output, mermaid_output, mermaid_code_output, summary_output, stats_output, functions_output]
         )
 
         # Footer
@@ -760,4 +775,5 @@ def main():
 
 # Auto-run if in Colab or when script is executed directly
 if __name__ == "__main__" or IN_COLAB:
-    main()
+    main()
+````