Update app.py

app.py

@@ -1,4 +1,3 @@
-
 #!/usr/bin/env python3
 """
 Code Flow Analyzer with Gradio Interface - Hugging Face Spaces & Colab Compatible
@@ -558,7 +557,41 @@ 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 (UPDATED) ---
+def create_mermaid_html(mermaid_code: str) -> str:
+    """Create HTML to render Mermaid diagram"""
+    if not mermaid_code.strip():
+        return "<div style='text-align: center; padding: 20px; color: #666;'>No diagram to display</div>"
+    
+    # Escape the mermaid code for HTML
+    escaped_code = mermaid_code.replace('`', '\\`').replace('${', '\\${')
+    
+    html = f"""
+    <div id="mermaid-container" style="text-align: center; padding: 20px; min-height: 400px;">
+        <div class="mermaid">
+{mermaid_code}
+        </div>
+    </div>
+    
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.6.1/mermaid.min.js"></script>
+    <script>
+        mermaid.initialize({{ 
+            startOnLoad: true,
+            theme: 'default',
+            flowchart: {{
+                useMaxWidth: true,
+                htmlLabels: true
+            }}
+        }});
+        
+        // Re-render mermaid diagrams
+        setTimeout(() => {{
+            mermaid.init(undefined, document.querySelectorAll('.mermaid'));
+        }}, 100);
+    </script>
+    """
+    return html
+
+# --- Gradio Interface Setup (FIXED) ---
 def create_gradio_interface():
     """Create and configure the Gradio interface"""
 
@@ -567,7 +600,7 @@ def create_gradio_interface():
         if not code.strip():
             return (
                 "Please enter some code to analyze",
-                "",
+                "<div style='text-align: center; padding: 20px; color: #666;'>No code to analyze</div>",
                 "",
                 "No analysis performed",
                 "Functions: 0 | Complexity: 0/100",
@@ -579,7 +612,7 @@ def create_gradio_interface():
         if error:
             return (
                 error,
-                "",
+                "<div style='text-align: center; padding: 20px; color: #c62828;'>Analysis failed</div>",
                 "",
                 "Analysis failed",
                 "Functions: 0 | Complexity: 0/100",
@@ -587,13 +620,14 @@ def create_gradio_interface():
             )
 
         # Format the outputs
+        mermaid_html = create_mermaid_html(mermaid)
         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, # Raw Mermaid code for the gr.Mermaid component
+            mermaid_html,  # HTML for rendering the Mermaid diagram
             mermaid_code_display, # Markdown-formatted code for the textbox
             summary,
             stats_display,
@@ -684,9 +718,10 @@ def create_gradio_interface():
         with gr.Row():
             with gr.Column():
                 gr.Markdown("### 🎨 Generated Mermaid Diagram")
-                # Updated component to render the diagram visually
-                mermaid_output = gr.Mermaid(
-                    label="Flowchart Diagram"
+                # Use HTML component to render the diagram
+                mermaid_output = gr.HTML(
+                    label="Flowchart Diagram",
+                    value="<div style='text-align: center; padding: 20px; color: #666;'>Diagram will appear here after analysis</div>"
                 )
 
                 # Keep the code in a collapsible block for users who want to copy it
@@ -708,7 +743,6 @@ 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],
@@ -759,5 +793,4 @@ def main():
     )
 
 # Auto-run if in Colab or when script is executed directly
-if __name__ == "__main__" or IN_COLAB:
-    main()
+if __name__ == "__main__