Update app.py

app.py

@@ -1,6 +1,6 @@
 import streamlit as st
 import google.generativeai as genai
-from streamlit_react import ReactComponent
+import json
 
 # Set up Gemini API
 api_key = "AIzaSyAHD0FwX-Ds6Y3eI-i5Oz7IdbJqR6rN7pg"
@@ -37,93 +37,46 @@ def generate_mindmap(notes):
     response = model.generate_content(prompt)
     return response.text
 
+# Function to display mindmap
+def display_mindmap(data, indent=0):
+    if isinstance(data, str):
+        try:
+            data = json.loads(data)
+        except json.JSONDecodeError:
+            st.error("Failed to parse the generated mindmap data. Please try again.")
+            return
+
+    if isinstance(data, dict):
+        st.markdown('  ' * indent + f"- **{data['name']}**")
+        if 'children' in data and isinstance(data['children'], list):
+            for child in data['children']:
+                display_mindmap(child, indent + 1)
+    elif isinstance(data, list):
+        for item in data:
+            display_mindmap(item, indent)
+
 # Button to generate mindmap
 if st.button("Generate Mindmap"):
     if lecture_notes:
         with st.spinner("Generating mindmap..."):
-            mindmap_data = generate_mindmap(lecture_notes)
-            st.session_state.mindmap_data = mindmap_data
+            try:
+                mindmap_data = generate_mindmap(lecture_notes)
+                st.session_state.mindmap_data = mindmap_data
+            except Exception as e:
+                st.error(f"An error occurred while generating the mindmap: {str(e)}")
     else:
         st.warning("Please enter your lecture notes first.")
 
 # Display the mindmap if data is available
 if 'mindmap_data' in st.session_state:
     st.subheader("Generated Mindmap")
-    
-    # React component for mindmap visualization
-    ReactComponent(
-        component_name="MindMap",
-        props={"data": st.session_state.mindmap_data},
-        key="mindmap_viewer"
-    )
-
-# React component definition (you'll need to save this in a separate file)
-st.write("""
-To use this app, you'll need to create a file named `mindmap_component.jsx` in your Streamlit app's directory with the following content:
-
-```jsx
-import React, { useState } from 'react';
-import { ChevronRight, ChevronDown } from 'lucide-react';
-
-const TreeNode = ({ node }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const hasChildren = node.children && node.children.length > 0;
-
-  return (
-    <div className="ml-4">
-      <div 
-        className="flex items-center cursor-pointer hover:bg-gray-100 p-2 rounded"
-        onClick={() => setIsOpen(!isOpen)}
-      >
-        {hasChildren && (
-          <span className="mr-2">
-            {isOpen ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
-          </span>
-        )}
-        <span className={`${hasChildren ? 'font-semibold' : ''}`}>{node.name}</span>
-      </div>
-      {isOpen && hasChildren && (
-        <div className="ml-4 border-l-2 border-gray-200">
-          {node.children.map((child, index) => (
-            <TreeNode key={index} node={child} />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
-
-const MindMap = ({ data }) => {
-  const parsedData = typeof data === 'string' ? JSON.parse(data) : data;
-  
-  return (
-    <div className="p-4 bg-white rounded-lg shadow-lg max-w-4xl mx-auto overflow-auto max-h-[600px]">
-      <h2 className="text-2xl font-bold mb-4 text-center">Lecture Notes Mindmap</h2>
-      <TreeNode node={parsedData} />
-    </div>
-  );
-};
-
-export default MindMap;
-```
-""")
+    display_mindmap(st.session_state.mindmap_data)
 
 st.write("""
-To set up this Streamlit app with the React component:
-
-1. Install required packages:
-   ```
-   pip install streamlit google-generativeai streamlit-react
-   ```
-
-2. Save the main Python code in a file named `app.py`.
-
-3. Create a file named `mindmap_component.jsx` with the React component code provided above.
-
-4. Run the Streamlit app:
-   ```
-   streamlit run app.py
-   ```
+To use this app:
+1. Paste your lecture notes into the text area.
+2. Click the "Generate Mindmap" button.
+3. The generated mindmap will be displayed below.
 
-This setup will allow you to paste your lecture notes, generate a mindmap using Gemini, and visualize it using the React component.
+This app uses Google's Gemini AI to structure your notes into a hierarchical mindmap format.
 """)