Update app.py

app.py

@@ -881,6 +881,15 @@ def create_interface():
         session_token = gr.State(value=generate_session_token())
         profile_manager.set_session(session_token.value)
         
+        # Track completion status for each tab
+        tab_completed = gr.State({
+            0: False,  # Transcript Upload
+            1: False,  # Learning Style Quiz
+            2: False,  # Personal Questions
+            3: False,  # Save & Review
+            4: False   # AI Assistant
+        })
+        
         # Custom CSS for better styling
         app.css = """
         .gradio-container {
@@ -915,6 +924,29 @@ def create_interface():
         .chatbot {
             min-height: 500px;
         }
+        .completed-tab {
+            background: #2196F3 !important;
+            color: white !important;
+        }
+        .incomplete-tab {
+            background: #E0E0E0 !important;
+        }
+        .alert-box {
+            padding: 15px;
+            margin-bottom: 20px;
+            border: 1px solid transparent;
+            border-radius: 4px;
+            color: #31708f;
+            background-color: #d9edf7;
+            border-color: #bce8f1;
+        }
+        .nav-message {
+            padding: 10px;
+            margin: 10px 0;
+            border-radius: 4px;
+            background-color: #ffebee;
+            color: #c62828;
+        }
         """
         
         gr.Markdown("""
@@ -923,18 +955,24 @@ def create_interface():
         Complete each step to get customized learning recommendations.
         """)
         
-        # Progress tracker
+        # Progress tracker - now with dynamic styling
         with gr.Row():
             with gr.Column(scale=1):
-                step1 = gr.Button("1. Upload Transcript", variant="primary")
+                step1 = gr.Button("1. Upload Transcript", elem_classes="incomplete-tab")
             with gr.Column(scale=1):
-                step2 = gr.Button("2. Learning Style Quiz")
+                step2 = gr.Button("2. Learning Style Quiz", elem_classes="incomplete-tab", interactive=False)
             with gr.Column(scale=1):
-                step3 = gr.Button("3. Personal Questions")
+                step3 = gr.Button("3. Personal Questions", elem_classes="incomplete-tab", interactive=False)
             with gr.Column(scale=1):
-                step4 = gr.Button("4. Save & Review")
+                step4 = gr.Button("4. Save & Review", elem_classes="incomplete-tab", interactive=False)
             with gr.Column(scale=1):
-                step5 = gr.Button("5. AI Assistant")
+                step5 = gr.Button("5. AI Assistant", elem_classes="incomplete-tab", interactive=False)
+        
+        # Alert box for quiz submission
+        quiz_alert = gr.HTML(visible=False)
+        
+        # Navigation message
+        nav_message = gr.HTML(elem_classes="nav-message", visible=False)
         
         # Main tabs
         with gr.Tabs() as tabs:
@@ -966,10 +1004,22 @@ def create_interface():
                         )
                         transcript_data = gr.State()
                 
+                def process_transcript_and_update(file_obj, current_tab_status):
+                    output_text, data = parse_transcript(file_obj)
+                    if "Error" not in output_text:
+                        new_status = current_tab_status.copy()
+                        new_status[0] = True
+                        return output_text, data, new_status, \
+                               gr.update(elem_classes="completed-tab"), \
+                               gr.update(interactive=True), \
+                               gr.update(visible=False)
+                    return output_text, data, current_tab_status, \
+                           gr.update(), gr.update(), gr.update()
+                
                 upload_btn.click(
-                    fn=parse_transcript,
-                    inputs=transcript_file,
-                    outputs=[transcript_output, transcript_data]
+                    fn=process_transcript_and_update,
+                    inputs=[transcript_file, tab_completed],
+                    outputs=[transcript_output, transcript_data, tab_completed, step1, step2, nav_message]
                 )
             
             # ===== TAB 2: Learning Style Quiz =====
@@ -1011,13 +1061,28 @@ def create_interface():
                         outputs=progress
                     )
                 
+                def submit_quiz_and_update(*args):
+                    # The first argument is the tab_completed state, followed by answers
+                    current_tab_status = args[0]
+                    answers = args[1:]
+                    
+                    result = learning_style_quiz.evaluate_quiz(*answers)
+                    
+                    new_status = current_tab_status.copy()
+                    new_status[1] = True
+                    
+                    return result, \
+                           gr.update(visible=True), \
+                           new_status, \
+                           gr.update(elem_classes="completed-tab"), \
+                           gr.update(interactive=True), \
+                           gr.update(value="<div class='alert-box'>Quiz submitted successfully! Scroll down to view your results.</div>", visible=True), \
+                           gr.update(visible=False)
+                
                 quiz_submit.click(
-                    fn=lambda *answers: learning_style_quiz.evaluate_quiz(*answers),
-                    inputs=quiz_components,
-                    outputs=learning_output
-                ).then(
-                    fn=lambda: gr.Markdown(visible=True),
-                    outputs=learning_output
+                    fn=submit_quiz_and_update,
+                    inputs=[tab_completed] + quiz_components,
+                    outputs=[learning_output, learning_output, tab_completed, step2, step3, quiz_alert, nav_message]
                 )
             
             # ===== TAB 3: Personal Questions =====
@@ -1064,6 +1129,31 @@ def create_interface():
                             inputs=blog_checkbox,
                             outputs=blog_text
                         )
+                
+                # Check if required fields are filled to mark as complete
+                def check_personal_info_complete(name, age, interests, current_tab_status):
+                    if name.strip() and age and interests.strip():
+                        new_status = current_tab_status.copy()
+                        new_status[2] = True
+                        return new_status, gr.update(elem_classes="completed-tab"), gr.update(interactive=True), gr.update(visible=False)
+                    return current_tab_status, gr.update(), gr.update(), gr.update()
+                
+                # Monitor changes to required fields
+                name.change(
+                    fn=check_personal_info_complete,
+                    inputs=[name, age, interests, tab_completed],
+                    outputs=[tab_completed, step3, step4, nav_message]
+                )
+                age.change(
+                    fn=check_personal_info_complete,
+                    inputs=[name, age, interests, tab_completed],
+                    outputs=[tab_completed, step3, step4, nav_message]
+                )
+                interests.change(
+                    fn=check_personal_info_complete,
+                    inputs=[name, age, interests, tab_completed],
+                    outputs=[tab_completed, step3, step4, nav_message]
+                )
             
             # ===== TAB 4: Save & Review =====
             with gr.Tab("Save Profile", id=3) as tab4:
@@ -1094,14 +1184,29 @@ def create_interface():
                         )
                 
                 # Save profile
+                def save_profile_and_update(*args):
+                    # Extract inputs
+                    inputs = args[:-1]  # All except the last which is tab_completed
+                    current_tab_status = args[-1]
+                    
+                    # Call the original save function
+                    summary = profile_manager.save_profile(*inputs)
+                    
+                    # Update completion status
+                    new_status = current_tab_status.copy()
+                    new_status[3] = True
+                    
+                    return summary, new_status, gr.update(elem_classes="completed-tab"), gr.update(interactive=True), gr.update(visible=False)
+                
                 save_btn.click(
-                    fn=profile_manager.save_profile,
+                    fn=save_profile_and_update,
                     inputs=[
                         name, age, interests, transcript_data, learning_output,
                         movie, movie_reason, show, show_reason,
-                        book, book_reason, character, character_reason, blog_text
+                        book, book_reason, character, character_reason, blog_text,
+                        tab_completed
                     ],
-                    outputs=output_summary
+                    outputs=[output_summary, tab_completed, step4, step5, nav_message]
                 ).then(
                     fn=lambda: profile_manager.list_profiles(session_token.value),
                     outputs=load_profile_dropdown
@@ -1159,6 +1264,15 @@ def create_interface():
                         book, book_reason, character, character_reason,
                         blog_text
                     ]
+                ).then(
+                    fn=lambda: gr.update(value=""),
+                    outputs=output_summary
+                ).then(
+                    fn=lambda: gr.update(value=False),
+                    outputs=blog_checkbox
+                ).then(
+                    fn=lambda: gr.update(visible=False),
+                    outputs=blog_text
                 )
             
             # ===== TAB 5: AI Teaching Assistant =====
@@ -1179,29 +1293,42 @@ def create_interface():
                     title=""
                 )
         
-        # Tab navigation logic
-        def navigate_to_tab(tab_index: int):
-            return gr.Tabs(selected=tab_index)
+        # Tab navigation logic with completion check
+        def navigate_to_tab(tab_index: int, tab_completed_status):
+            # Always allow going back to previous tabs
+            current_tab = tabs.selected
+            if current_tab is not None and tab_index > current_tab:
+                # Check if current tab is completed
+                if not tab_completed_status.get(current_tab, False):
+                    return gr.Tabs(selected=current_tab), \
+                           gr.update(value=f"<div class='nav-message'>Please complete the current tab before proceeding to tab {tab_index + 1}</div>", visible=True)
+            
+            return gr.Tabs(selected=tab_index), gr.update(visible=False)
         
         step1.click(
-            fn=lambda: navigate_to_tab(0),
-            outputs=tabs
+            fn=lambda idx, status: navigate_to_tab(idx, status),
+            inputs=[gr.State(0), tab_completed],
+            outputs=[tabs, nav_message]
         )
         step2.click(
-            fn=lambda: navigate_to_tab(1),
-            outputs=tabs
+            fn=lambda idx, status: navigate_to_tab(idx, status),
+            inputs=[gr.State(1), tab_completed],
+            outputs=[tabs, nav_message]
         )
         step3.click(
-            fn=lambda: navigate_to_tab(2),
-            outputs=tabs
+            fn=lambda idx, status: navigate_to_tab(idx, status),
+            inputs=[gr.State(2), tab_completed],
+            outputs=[tabs, nav_message]
         )
         step4.click(
-            fn=lambda: navigate_to_tab(3),
-            outputs=tabs
+            fn=lambda idx, status: navigate_to_tab(idx, status),
+            inputs=[gr.State(3), tab_completed],
+            outputs=[tabs, nav_message]
         )
         step5.click(
-            fn=lambda: navigate_to_tab(4),
-            outputs=tabs
+            fn=lambda idx, status: navigate_to_tab(idx, status),
+            inputs=[gr.State(4), tab_completed],
+            outputs=[tabs, nav_message]
         )
     
     return app