fix: implement proper loading state for response generation

- Replace custom JS with Gradio's native event handling
- Add status message component for loading feedback
- Split click event into two-step process using .then()
- Update tutor_interface to handle loading states
- Improve user feedback during response generation

app.py

@@ -1,16 +1,15 @@
 import gradio as gr
 import cohere
-import os
 from dotenv import load_dotenv
 
 # Load environment variables
 load_dotenv()
 
 # Initialize Cohere API client
-co = cohere.Client(os.getenv('COHERE_API_KEY'))
+co = cohere.Client()
 MODEL_NAME = 'command-r-plus'  # Define model name as a constant
 
-# Adaptive learning functions
+# Adaptive learning functions remain the same
 def assess_knowledge(name, experience, goals):
     try:
         level_prompt = f"User Name: {name}, Experience: {experience}, Goals: {goals}. Classify as beginner, intermediate, or advanced."
@@ -38,10 +37,11 @@ def generate_challenge(topic, level):
     except Exception as e:
         return "Error in generating challenge: " + str(e)
 
+# Modified tutor_interface to work with loading state
 def tutor_interface(name, experience, goals, topic, request_challenge=False):
     # Validate inputs
     if not all([name, experience, goals, topic]):
-        return "Please fill in all required fields."
+        return "", "Please fill in all required fields."
 
     # Generate adaptive content
     level = assess_knowledge(name, experience, goals)
@@ -49,9 +49,11 @@ def tutor_interface(name, experience, goals, topic, request_challenge=False):
 
     if request_challenge:
         challenge = generate_challenge(topic, level)
-        return f"**Level:** {level}\n\n**Explanation:**\n{explanation}\n\n**Challenge:**\n{challenge}"
+        response = f"**Level:** {level}\n\n**Explanation:**\n{explanation}\n\n**Challenge:**\n{challenge}"
     else:
-        return f"**Level:** {level}\n\n**Explanation:**\n{explanation}"
+        response = f"**Level:** {level}\n\n**Explanation:**\n{explanation}"
+    
+    return "Generation complete!", response
 
 # Gradio UI setup with theme and structured layout
 with gr.Blocks(theme=gr.themes.Soft()) as demo:
@@ -78,29 +80,23 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
 
     request_challenge = gr.Checkbox(label="Include a practice challenge", value=False)
 
+    # Status message for loading state
+    status = gr.Markdown("", elem_id="status")
+    
     # Output display with markdown formatting
     output = gr.Markdown(label="Tutor's Response")
 
-    # Loading indicator
-    with gr.Row():
-        loading = gr.Markdown("Loading...", visible=False)
-
-    # Submit button with loading feedback
+    # Submit button
     submit_button = gr.Button("Get Started", variant="primary")
+    
+    # Handle submission with loading state
     submit_button.click(
+        fn=lambda: ("Generating response...", ""),  # Clear output and show loading message
+        outputs=[status, output],
+    ).then(
         fn=tutor_interface,
         inputs=[name, experience, goals, topic, request_challenge],
-        outputs=[output],
-        _js="""
-        () => {
-            document.querySelector('[id^=loading]').style.display = 'block';
-            return null;
-        }
-        """
-    ).then(
-        fn=lambda: gr.update(visible=False),
-        inputs=None,
-        outputs=loading
+        outputs=[status, output],
     )
 
 # Launch the app