Update app.py

Updated the streamlit UI to improve the parsing

app.py

@@ -5,14 +5,13 @@ from openai_llm import LessonPlanGenerator
 # Page configuration
 st.set_page_config(
     page_title="Lesson Plan Generator",
-   # page_icon="📚",
+    page_icon="📚",
     layout="wide"
 )
 
-# Custom CSS with corrected container styling
+# Custom CSS with improved styling
 st.markdown("""
     <style>
-    /* Main container */
     .main-container {
         background-color: white;
         border-radius: 8px;
@@ -21,39 +20,74 @@ st.markdown("""
         box-shadow: 0 2px 8px rgba(0,0,0,0.1);
     }
 
-    /* Section styling */
     .section {
         margin: 15px 0;
         padding: 10px 0;
-        border-bottom: 1px solid #eee;
     }
 
-    /* Header styling */
-    .section-header {
+    .section-level-0 {
+        border-bottom: 2px solid #e8eaf6;
+        margin-bottom: 20px;
+    }
+
+    .section-level-1 {
+        margin-left: 20px;
+        border-left: 2px solid #e8eaf6;
+        padding-left: 15px;
+    }
+
+    .section-level-2 {
+        margin-left: 15px;
+        padding-left: 10px;
+    }
+
+    .section-header-main {
         color: #1a237e;
-        font-size: 18px;
+        font-size: 20px;
         font-weight: 600;
-        margin-bottom: 10px;
+        margin-bottom: 15px;
+        padding-bottom: 5px;
+        border-bottom: 1px solid #e8eaf6;
+    }
+
+    .section-header-sub {
+        color: #283593;
+        font-size: 16px;
+        font-weight: 500;
+        margin: 10px 0;
     }
 
-    /* Content styling */
     .section-content {
         color: #333;
-        margin-left: 20px;
+        margin: 10px 0 10px 20px;
+        line-height: 1.5;
     }
 
-    /* List item styling */
     .list-item {
-        margin: 5px 0;
+        margin: 8px 0;
         color: #333;
+        padding-left: 20px;
+        position: relative;
+    }
+
+    .list-item:before {
+        content: "•";
+        position: absolute;
+        left: 0;
+        color: #3949ab;
     }
 
-    /* Nested content */
     .nested-content {
         margin-left: 20px;
-        padding-left: 10px;
+        padding-left: 15px;
         border-left: 2px solid #e8eaf6;
     }
+
+    .timing-label {
+        color: #1565c0;
+        font-weight: 500;
+        font-style: italic;
+    }
     </style>
 """, unsafe_allow_html=True)
 
@@ -116,6 +150,14 @@ else:
 def format_content(data):
     html_content = '<div class="main-container">'
 
+    def format_key(key):
+        """Format key string to be more readable"""
+        # Handle camelCase
+        key = ''.join(' ' + char if char.isupper() else char for char in key).strip()
+        # Replace underscores and normalize spaces
+        key = key.replace('_', ' ').title()
+        return key
+
     def process_value(value, level=0):
         if isinstance(value, dict):
             return process_dict(value, level)
@@ -127,10 +169,23 @@ def format_content(data):
     def process_dict(d, level):
         content = ""
         for key, value in d.items():
-            formatted_key = key.replace("_", " ").title()
-            content += f'<div class="section">'
-            content += f'<div class="section-header">{formatted_key}</div>'
-            content += process_value(value, level + 1)
+            formatted_key = format_key(key)
+
+            section_class = "section-level-" + str(level)
+            content += f'<div class="section {section_class}">'
+
+            if level == 0:
+                content += f'<div class="section-header-main">{formatted_key}</div>'
+            else:
+                content += f'<div class="section-header-sub">{formatted_key}</div>'
+
+            if isinstance(value, dict) and any(isinstance(v, (dict, list)) for v in value.values()):
+                content += process_value(value, level + 1)
+            elif isinstance(value, list) and any(isinstance(item, dict) for item in value):
+                content += process_value(value, level + 1)
+            else:
+                content += process_value(value, level + 1)
+
             content += '</div>'
         return content
 
@@ -140,7 +195,7 @@ def format_content(data):
             if isinstance(item, dict):
                 content += process_dict(item, level + 1)
             else:
-                content += f'<div class="list-item">• {item}</div>'
+                content += f'<div class="list-item">{item}</div>'
         content += '</div>'
         return content
 
@@ -164,6 +219,11 @@ if st.button("Generate Lesson Plan", type="primary"):
 
             try:
                 result = generator.generate_lesson_plan(detailed_prompt)
+
+                # Clean up the structure if needed
+                if "lessonPlan" in result:
+                    result = result["lessonPlan"]
+
                 st.success("Lesson plan generated successfully!")
 
                 # Create tabs for different views
@@ -171,7 +231,6 @@ if st.button("Generate Lesson Plan", type="primary"):
 
                 with tab1:
                     if isinstance(result, dict):
-                        # Display formatted content in white container
                         st.markdown(format_content(result), unsafe_allow_html=True)
                     else:
                         st.error("Invalid response format")