Updated styling and added audio output feature

app.py

@@ -5,7 +5,6 @@ import os
 client = Groq(api_key=os.getenv("GROQ_API_KEY"))
 
 def get_chatbot_response(user_message, country, language, conversation_history):
-
     system_message = (
         f"You are a lawyer specializing in providing concise and accurate legal information based on the laws in {country}. "
         f"Respond in {language}. Provide clear, factual information without offering personal legal advice or opinions. "
@@ -44,15 +43,43 @@ def get_chatbot_response(user_message, country, language, conversation_history):
     
     return conversation_history, chat_display
 
+def text_to_audio(conversation_history, language):
+    lang_map = {
+        "English": "en",
+        "Spanish": "es",
+        "French": "fr",
+        "German": "de",
+        "Hindi": "hi",
+        "Mandarin": "zh-cn",
+        "Arabic": "ar"
+    }
+    lang_code = lang_map.get(language, "en")
+    
+    conversation_text = ""
+    for msg in conversation_history:
+        if msg["role"] == "user":
+            conversation_text += f"You said: {msg['content']}\n"
+        elif msg["role"] == "assistant":
+            conversation_text += f"AI Legal Chatbot responded with: {msg['content']}\n"
+    
+    if not conversation_text.strip():
+        return None
+
+    tts = gTTS(text=conversation_text, lang=lang_code)
+    audio_filename = f"response_{uuid.uuid4().hex}.mp3"
+    tts.save(audio_filename)
+    return audio_filename
+
+
 theme = gr.themes.Ocean(
     text_size="lg",
     font=[gr.themes.GoogleFont('DM Sans'), 'ui-sans-serif', 'system-ui', 'sans-serif'],
 ).set(
-    body_text_size='*text_lg',
+    body_text_size='*text_md',
     background_fill_secondary='*secondary_100',
-    chatbot_text_size='*text_lg',
+    chatbot_text_size='*text_md',
     input_radius='*radius_md',
-    input_text_size='*text_lg',
+    input_text_size='*text_md',
 )
 
 custom_css = """
@@ -68,7 +95,6 @@ custom_css = """
     text-align: center;
     font-size: 45px;
 }
-
 .law-button {
     border: 1px solid #00A0B0;
     background-color: transparent;
@@ -77,10 +103,13 @@ custom_css = """
     border-radius: 16px;
     margin: 0 5px;
 }
-
 .law-button:hover {
-    background: linear-gradient(90deg, #00A0B0, #00FFEF);
-    color: white;
+    background: linear-gradient(90deg, #00A0B0, #00FFEF) !important;
+    color: white !important;
+}
+.country-language-container .gr-dropdown {
+    font-size: 10px;
+    max-height: 100px;
 }
 """
 
@@ -88,27 +117,29 @@ def clear_history():
     return []
 
 
-with gr.Blocks(theme = theme, css = custom_css) as demo:
+with gr.Blocks(theme=theme, css=custom_css) as demo:
+
     gr.HTML("<h2 class='title-text'>⚖️ AI Legal Chatbot</h2>")
     gr.Markdown("### Hey there! Pick your country, choose a language, and tell us about your legal situation. We're here to help!")
 
-    with gr.Row():
+    with gr.Row(elem_classes="country-language-container"):
         country_input = gr.Dropdown(
             ["Canada", "United States", "United Kingdom", "Spain", "France", "Germany", "India", "China", "Lebanon", "Other"],
-            label="🌍 Select Country",
+            label="🌍 Country to Apply Legal Jurisdiction",
             interactive=True
         )
         language_input = gr.Dropdown(
             ["English", "Spanish", "French", "German", "Hindi", "Mandarin", "Arabic"],
-            label="🗣️ Select Language",
+            label="🗣️ Language Output",
             interactive=True
         )
 
     custom_country_input = gr.Textbox(label="Enter Country (if not listed)", visible=False)
 
     conversation_state = gr.State([])
+    law_state = gr.State("")
 
-    chatbot = gr.Chatbot(label="💬 Chat History")
+    chatbot = gr.Chatbot(label="💬 Chat History", min_height="500px")
     chatbot.clear(fn=clear_history, outputs=conversation_state)
     
     with gr.Row():
@@ -121,16 +152,20 @@ with gr.Blocks(theme = theme, css = custom_css) as demo:
         property_btn = gr.Button("🏠 Property", elem_classes="law-button")
         environmental_btn = gr.Button("🌱 Environmental", elem_classes="law-button")
 
-
-    scenario_input = gr.Textbox(label="💡 Type your message...", placeholder="Describe your legal situation...", interactive=True)
+    with gr.Row(equal_height=True):
+        scenario_input = gr.Textbox(
+            label="💡 Type your message...", 
+            placeholder="Describe your legal situation...", 
+            interactive=True
+        )
+        submit_btn = gr.Button("Send", variant="primary", scale=0)
 
     def update_law_selection(current, new_selection):
-        if "Law:" in current:
-            parts = current.split("Law:", 1)
+        if "Law: " in current:
+            parts = current.split("Law: ", 1)
             additional_text = parts[1] if len(parts) > 1 else ""
         else:
             additional_text = current
-
         return f"{new_selection} Law: {additional_text}"
 
     for btn, law in zip(
@@ -139,8 +174,6 @@ with gr.Blocks(theme = theme, css = custom_css) as demo:
     ):
         btn.click(lambda current, law=law: update_law_selection(current, law), inputs=scenario_input, outputs=scenario_input)
 
-    submit_btn = gr.Button("Send",variant="primary")
-
     def submit(country, custom_country, language, scenario, conversation_state):
         selected_country = custom_country if country == "Other" else country
         updated_history, chat_display = get_chatbot_response(
@@ -148,7 +181,6 @@ with gr.Blocks(theme = theme, css = custom_css) as demo:
         )
         return updated_history, chat_display, ""
 
-
     country_input.change(lambda c: gr.update(visible=c == "Other"), inputs=country_input, outputs=custom_country_input)
 
     submit_btn.click(
@@ -157,4 +189,22 @@ with gr.Blocks(theme = theme, css = custom_css) as demo:
         outputs=[conversation_state, chatbot, scenario_input]
     )
 
+    scenario_input.submit(
+        fn=submit, 
+        inputs=[country_input, custom_country_input, language_input, scenario_input, conversation_state], 
+        outputs=[conversation_state, chatbot, scenario_input]
+    )
+
+    gr.HTML("<br><br>")
+    gr.Markdown("### Audio Output\nClick the **Read Conversation** button to have the entire conversation read aloud for you.")
+
+    read_conversation_btn = gr.Button("🔊 Read Conversation", variant="primary")
+    response_audio_output = gr.Audio(label="Conversation Audio")
+    
+    read_conversation_btn.click(
+        fn=text_to_audio,
+        inputs=[conversation_state, language_input],
+        outputs=response_audio_output
+    )
+
 demo.launch()