Update app.py

app.py

@@ -99,69 +99,33 @@ def tutor_feedback(audio_file):
     return transcript, feedback_text, mp3_path
 
 # Gradio interface
-with gr.Blocks(css="""
-    #header img {
-        border-radius: 50%;
-        border: 4px solid #ffffff;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
-        margin-bottom: 0.5em;
-        animation: float 3s ease-in-out infinite;
-    }
-
-    @keyframes float {
-        0% { transform: translateY(0px); }
-        50% { transform: translateY(-10px); }
-        100% { transform: translateY(0px); }
-    }
-
-    .gradio-container {
-        background: linear-gradient(to bottom, #f6f9ff, #ffffff);
-        font-family: 'Comic Sans MS', 'Comic Neue', cursive;
-    }
-
-    h2 {
-        color: #673ab7;
-        font-size: 1.8em;
-    }
-
-    .gr-button {
-        font-size: 1.1em;
-        background-color: #ffca28 !important;
-        border-radius: 12px !important;
-        color: black !important;
-        font-weight: bold;
-    }
-
-    .gr-textbox textarea {
-        font-size: 1.1em;
-        border-radius: 12px !important;
-        padding: 1em;
-    }
-
-    .gr-audio label {
-        font-size: 1.1em;
-    }
-""") as iface:
+# Path to your CSS file
+css_path = "light_mode_chatter_owl.css"  # Make sure this file is in the same directory as app.py
+
+# Path to your CSS file
+css_path = "light_mode_chatter_owl.css"  # Make sure this file is in the same directory as app.py
+
+with gr.Blocks(css=css_path) as app:
     gr.Markdown(
-        f"""
-        <div style="text-align: center;">
-            <img src="{chatter_owl_url}" width="120">
-            <h2>🦉 Hi, I'm <strong>Chatter the Owl</strong>!</h2>
-            <p>Let's practice your speaking! Tap the mic, say something, and I’ll give you tips to get even better! 🎉</p>
+        """
+        <div id="header" style="text-align: center;">
+            <img src="file/images/chatter_owl.png">
+            <h2>🦉 Meet Chatter the Owl!</h2>
+            <p>Speak to me and I'll help you become a confident communicator. 🎤✨</p>
         </div>
-        """,
-        elem_id="header"
+        """
     )
 
     with gr.Row():
-        audio_input = gr.Audio(type="filepath", label="🎤 Say something here!")
+        audio_input = gr.Audio(type="filepath", label="🎙 Speak or Upload Audio")
 
     with gr.Row():
-        transcript_box = gr.Textbox(label="📖 What you said")
-        feedback_box = gr.Textbox(label="🪄 Chatter's Feedback")
+        transcript_box = gr.Textbox(label="📖 What You Said")
+        feedback_box = gr.Textbox(label="💡 Chatter's Feedback")
 
-    audio_output = gr.Audio(label="🔊 Chatter's Voice Reply", type="filepath")
+    audio_output = gr.Audio(label="🔊 Spoken Feedback", type="filepath")
 
+    # Hook up your function (e.g., `tutor_feedback`)
     audio_input.change(fn=tutor_feedback, inputs=audio_input, outputs=[transcript_box, feedback_box, audio_output])
 
 if __name__ == "__main__":