Update app.py

app.py

@@ -245,7 +245,8 @@ with gr.Blocks(css="""
     .gr-textbox, .gr-dropdown, .gr-slider {border: 2px solid #D4A373 !important; border-radius: 10px !important; padding: 10px !important;}
     .gr-image {border-radius: 15px; margin: auto; max-width: 200px;}
     .footer {text-align: center; color: #808080; font-size: 0.9em; margin-top: 20px;}
-    .gr-form > .gr-text, .gr-input-label + .gr-text {color: #4A2C2A !important; font-size: 0.9em; font-weight: normal;}
+    .explanations {text-align: center; color: #4A2C2A; font-size: 0.9em; margin-top: 20px;}
+    .explanations p {margin: 5px 0; text-align: left; display: inline-block;}
 """) as demo:
     gr.HTML("""
         <div style='background: linear-gradient(to right, #D4A373, #FEE440); padding: 20px; border-radius: 15px; text-align: center;'>
@@ -261,15 +262,13 @@ with gr.Blocks(css="""
                 choices=moods, 
                 label="Mood", 
                 value="happy", 
-                elem_classes="gr-dropdown",
-                info="How are you feeling right now? Pick a mood that matches your vibe."
+                elem_classes="gr-dropdown"
             )
             time_of_day = gr.Dropdown(
                 choices=times_of_day, 
                 label="Time of Day", 
                 value="morning", 
-                elem_classes="gr-dropdown",
-                info="What time is it? This helps pick snacks that suit the moment."
+                elem_classes="gr-dropdown"
             )
             hunger_level = gr.Slider(
                 minimum=0, 
@@ -277,8 +276,7 @@ with gr.Blocks(css="""
                 step=0.1, 
                 label="Hunger Level (0 to 1)", 
                 value=0.5, 
-                elem_classes="gr-slider",
-                info="How hungry are you? 0 = not hungry, 1 = starving!"
+                elem_classes="gr-slider"
             )
             sentiment = gr.Slider(
                 minimum=-1, 
@@ -286,15 +284,13 @@ with gr.Blocks(css="""
                 step=0.1, 
                 label="Sentiment (-1 to 1)", 
                 value=0.0, 
-                elem_classes="gr-slider",
-                info="What's your emotional vibe? -1 = feeling down, 0 = neutral, +1 = super upbeat."
+                elem_classes="gr-slider"
             )
             snack_type = gr.Dropdown(
                 choices=['sweet', 'savory', 'spicy', 'light'], 
                 label="Snack Type", 
                 value="sweet", 
-                elem_classes="gr-dropdown",
-                info="What kind of snack do you crave? Sweet, savory, spicy, or light."
+                elem_classes="gr-dropdown"
             )
             predict_btn = gr.Button("Find My Snack!", variant="primary", elem_classes="gr-button")
         
@@ -322,6 +318,14 @@ with gr.Blocks(css="""
     )
     
     gr.HTML("""
+        <div class='explanations'>
+            <h3 style='color: #4A2C2A; font-size: 1.1em; margin-bottom: 10px;'>What do the inputs mean?</h3>
+            <p><strong>Mood:</strong> How are you feeling right now? Pick a mood that matches your vibe.</p>
+            <p><strong>Time of Day:</strong> What time is it? This helps pick snacks that suit the moment.</p>
+            <p><strong>Hunger Level:</strong> How hungry are you? 0 = not hungry, 1 = starving!</p>
+            <p><strong>Sentiment:</strong> What's your emotional vibe? -1 = feeling down, 0 = neutral, +1 = super upbeat.</p>
+            <p><strong>Snack Type:</strong> What kind of snack do you crave? Sweet, savory, spicy, or light.</p>
+        </div>
         <div class='footer'>
             <p>Built with ❤️ by @teganmosi</p>
             <p>Follow my #WeeklyMLProjects for more! 🍟</p>