Upload 2 files

app.py

@@ -45,13 +45,12 @@ language_config = {
     },
 }
 
-# Function for chat + TTS
 def chat_and_speak(user_input, language_choice):
     gpt_response = ""
     audio_output_path = None
     try:
         if not user_input or not user_input.strip():
-            return "Please enter some text to process.", None
+            return None, "Please enter some text to process."
 
         print(f"🧠 User input: {user_input}")
         print(f"🗣️ Language choice: {language_choice}")
@@ -73,7 +72,7 @@ def chat_and_speak(user_input, language_choice):
         if not config:
             error_msg = f"⚠️ Language '{language_choice}' not supported."
             print(error_msg)
-            return f"{gpt_response}\n\n{error_msg}", None
+            return None, f"{gpt_response}\n\n{error_msg}"
 
         tts_response = speechify_client.tts.audio.speech(
             input=gpt_response,
@@ -91,10 +90,10 @@ def chat_and_speak(user_input, language_choice):
                     f.write(audio_bytes)
             except Exception as audio_err:
                 print(f"🔥 Error processing audio data: {audio_err}")
-                return f"{gpt_response}\n\n⚠️ Error saving audio: {audio_err}", None
+                return None, f"{gpt_response}\n\n⚠️ Error saving audio: {audio_err}"
         else:
             print("⚠️ No audio data received from Speechify or audio_data is not a string.")
-            return f"{gpt_response}\n\n⚠️ No audio data received from Speechify.", None
+            return None, f"{gpt_response}\n\n⚠️ No audio data received from Speechify."
 
         return audio_output_path, gpt_response
 
@@ -102,23 +101,36 @@ def chat_and_speak(user_input, language_choice):
         print(f"🔥 An unexpected error occurred: {e}")
         error_message = f"⚠️ An unexpected error occurred: {e}"
         if gpt_response:
-            return f"{gpt_response}\n\n{error_message}", None
-        return error_message, None
-
-# Gradio interface
-iface = gr.Interface(
-    fn=chat_and_speak,
-    inputs=[
-        gr.Textbox(label="Say something"),
-        gr.Dropdown(choices=["Portuguese", "French", "Spanish"], value="Portuguese", label="Language"),
-    ],
-    outputs=[
-        gr.Audio(label="TTS Playback", type="filepath", autoplay=True),
-        gr.Textbox(label="GPT Response")
-    ],
-    title="Language Tutor with GPT and Speechify",
-    allow_flagging="never"
-)
+            return None, f"{gpt_response}\n\n{error_message}"
+        return None, error_message
+
+with open("custom.css") as f:
+    custom_css = f.read()
+
+
+with gr.Blocks(css=custom_css) as demo:
+    gr.HTML(
+        '<div class="custom-bar"><span class="custom-bar-title">Speaking Language Tutor</span></div>'
+    )  
+    with gr.Column(elem_classes="main-card"):
+        with gr.Row():
+            with gr.Column():
+                user_input = gr.Textbox(label="Type in whatever language you want to practice", placeholder="Type here...", lines=4)
+                language_choice = gr.Dropdown(
+                    choices=["Portuguese", "French", "Spanish"],
+                    value="Portuguese",
+                    label="Language"
+                )
+                submit_btn = gr.Button("Submit")
+            with gr.Column():
+                audio_output = gr.Audio(label="Audio Playback", type="filepath", autoplay=True)
+                gpt_output = gr.Textbox(label="The Response")
+
+        submit_btn.click(
+            fn=chat_and_speak,
+            inputs=[user_input, language_choice],
+            outputs=[audio_output, gpt_output]
+        )
 
 if __name__ == "__main__":
-    iface.launch()
+    demo.launch()

custom.css

@@ -0,0 +1,32 @@
+body, .gradio-container {
+    background-color: #f7f7fa !important;
+}
+p { margin: 0; }
+.custom-bar {
+    width: 100%;
+    height: 48px;
+    background: linear-gradient(90deg, #4f8cff 0%, #a0e9ff 100%);
+    margin-bottom: 32px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;      /* Vertically center content */
+    justify-content: center;  /* Horizontally center content */
+    padding: 0 16px;          /* Optional: horizontal padding */
+    box-sizing: border-box;   /* Ensure padding doesn't affect height */
+}
+.custom-bar-title {
+    color: #fff;
+    font-size: 1.6rem;
+    font-weight: 700;
+    letter-spacing: 1px;
+    margin: 0;
+    line-height: 1;           /* Prevents extra space above/below */
+}
+.main-card {
+    background: #fff;
+    border-radius: 16px;
+    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
+    padding: 32px;
+    max-width: 700px;
+    margin: 0 auto 32px auto;
+}