Update ui.py

ui.py

@@ -61,10 +61,20 @@ custom_css = """
     padding: 0.75rem 1.5rem !important;
     border-radius: 50px !important;
     cursor: pointer !important;
-    transition: transform 0.1s, box-shadow 0.1s !important;
+    transition: transform 0.1s, box-shadow 0.1s, background-color 0.2s !important;
     box-shadow: 0 4px 0 #48a700 !important;
 }
 
+.btn-primary:hover {
+    background: #62d40a !important;
+}
+
+.btn-primary:active {
+    background: #4ab000 !important;
+    transform: translateY(2px) !important;
+    box-shadow: 0 2px 0 #3e9500 !important;
+}
+
 .btn-secondary {
     background: var(--secondary-color) !important;
     color: var(--neutral-color) !important;
@@ -73,9 +83,20 @@ custom_css = """
     padding: 0.75rem 1.5rem !important;
     border-radius: 50px !important;
     cursor: pointer !important;
+    transition: transform 0.1s, box-shadow 0.1s, background-color 0.2s !important;
     box-shadow: 0 4px 0 #e0b000 !important;
 }
 
+.btn-secondary:hover {
+    background: #ffd119 !important;
+}
+
+.btn-secondary:active {
+    background: #e0b000 !important;
+    transform: translateY(2px) !important;
+    box-shadow: 0 2px 0 #c69e00 !important;
+}
+
 .btn-practice {
     background: #9333ea !important;
     color: var(--white) !important;
@@ -84,9 +105,20 @@ custom_css = """
     padding: 0.75rem 1.5rem !important;
     border-radius: 50px !important;
     cursor: pointer !important;
+    transition: transform 0.1s, box-shadow 0.1s, background-color 0.2s !important;
     box-shadow: 0 4px 0 #7c2d9c !important;
 }
 
+.btn-practice:hover {
+    background: #a346f5 !important;
+}
+
+.btn-practice:active {
+    background: #7e2bd0 !important;
+    transform: translateY(2px) !important;
+    box-shadow: 0 2px 0 #6b228b !important;
+}
+
 .btn-clear {
     background: var(--accent-color) !important;
     color: var(--white) !important;
@@ -95,9 +127,20 @@ custom_css = """
     padding: 0.5rem 1rem !important;
     border-radius: 25px !important;
     cursor: pointer !important;
+    transition: transform 0.1s, box-shadow 0.1s, background-color 0.2s !important;
     box-shadow: 0 2px 0 #d93636 !important;
 }
 
+.btn-clear:hover {
+    background: #ff5f5f !important;
+}
+
+.btn-clear:active {
+    background: #e43a3a !important;
+    transform: translateY(1px) !important;
+    box-shadow: 0 1px 0 #c52e2e !important;
+}
+
 .progress-container {
     width: 100%;
     background-color: #e0e0e0;
@@ -235,8 +278,8 @@ def submit_reading(audio):
         session["progress"] = 100
         session["practice_count"] += 1
         
-        # Show practice story section if feedback indicates areas for improvement
-        show_practice = "PRACTICE THESE WORDS:" in feedback or "PRONUNCIATION PRACTICE:" in feedback
+        # Always show practice story section so students can get more challenging stories
+        show_practice = True
         
         return feedback, gr.update(visible=show_practice)
         
@@ -263,7 +306,11 @@ def generate_practice_story():
         # Clear previous feedback
         session["last_feedback"] = ""
         
-        practice_msg = f"🎯 Practice Story #{session['practice_count']} Generated!\nThis story focuses on words you found challenging."
+        # Create adaptive message based on practice count and performance
+        if session["practice_count"] == 1:
+            practice_msg = f"🌟 New Challenge Story Generated!\nThis story is tailored to help you continue growing as a reader."
+        else:
+            practice_msg = f"🚀 Challenge Story #{session['practice_count']} Ready!\nKeep pushing yourself - you're doing amazing!"
         
         return new_story, practice_msg
         
@@ -314,8 +361,8 @@ def launch_ui():
             # Header
             gr.HTML("""
                 <div class="header">
-                    <h1 class="app-title">🦉 ReadRight Agentic</h1>
-                    <p>AI-powered reading coach that adapts to help you learn!</p>
+                    <h1 class="app-title">🦉 ReadRight</h1>
+                    <p>AI-powered reading coach for kids</p>
                 </div>
             """)
             
@@ -334,8 +381,9 @@ def launch_ui():
                         with gr.Row():
                             grade = gr.Dropdown(
                                 label="📚 Grade Level",
-                                choices=["Grade 1", "Grade 2", "Grade 3", "Grade 4", "Grade 5", "Grade 6"],
-                                value="Grade 3"
+                                choices=["Grade 1", "Grade 2", "Grade 3", "Grade 4", "Grade 5", "Grade 6", "Grade 7", "Grade 8", "Grade 9", "Grade 10"],
+                                value="Grade 1",
+                                allow_custom_value=True
                             )
                         
                         with gr.Row():
@@ -393,19 +441,19 @@ def launch_ui():
                     lines=12
                 )
             
-            # Step 3: Targeted Practice (appears when student needs more practice)
+            # Step 3: Continue Learning (appears after reading feedback)
             with gr.Column(elem_classes="card", visible=False) as practice_story_card:
                 gr.HTML("""
                     <div class="practice-info">
-                        <h2>🎯 Targeted Practice Zone</h2>
-                        <p>Your AI coach has created a special story to help you practice the words you're learning!</p>
+                        <h2>🚀 Keep Learning & Growing!</h2>
+                        <p>Ready for your next challenge? Get a new story that's perfect for your reading level!</p>
                     </div>
                 """)
                 
                 practice_info = gr.Text(label="Practice Information", interactive=False)
                 
                 with gr.Row():
-                    btn_generate_practice = gr.Button("📚 Generate Practice Story", elem_classes="btn-practice")
+                    btn_generate_practice = gr.Button("🌟 Get Next Challenge Story", elem_classes="btn-practice")
                     btn_reset = gr.Button("🔄 Start Fresh Session", elem_classes="btn-clear")
             
             # Event handlers