Fix: chatbot message format and layout improvements

app.py

@@ -56,7 +56,8 @@ def transcribe_audio(audio_filepath):
 
     # Convert output IDs to text
     transcript = model.tokenizer.ids_to_text(output_ids[0].cpu())
-    return transcript, transcript, [], 0  # Return empty history and reset counter
+    initial_message = [{"role": "assistant", "content": f"Transcript ready. Ask me questions about it."}]
+    return transcript, transcript, initial_message, 0
 
 
 # Enhanced Q&A function with conversation history
@@ -66,14 +67,15 @@ def answer_question_with_history(transcript, question, history, qa_count):
         return history, qa_count, "Please transcribe audio first"
     
     if qa_count >= 5:
-        history.append((question, "You've reached the maximum of 5 questions for this transcript. Please transcribe new audio or select another example to continue."))
+        history.append({"role": "user", "content": question})
+        history.append({"role": "assistant", "content": "You've reached the maximum of 5 questions for this transcript. Please transcribe new audio to continue."})
         return history, qa_count, ""
     
     # Build context from history for better continuity
     context = ""
-    for h_question, h_answer in history[-2:]:  # Use last 2 exchanges for context
-        if h_question:  # Skip the initial summary
-            context += f"Previous question: {h_question}\nAnswer: {h_answer[:100]}...\n"
+    for msg in history[-4:]:  # Use last 2 exchanges for context
+        if msg.get("role") == "user":
+            context += f"Previous question: {msg['content']}\n"
     
     with torch.inference_mode(), model.llm.disable_adapter():
         prompt = f"{context}Current question: {question}\n\nTranscript:\n{transcript}"
@@ -88,11 +90,12 @@ def answer_question_with_history(transcript, question, history, qa_count):
     
     # Add follow-up prompt if under 5 questions
     if qa_count < 4:
-        answer += f"\n\n**Question {qa_count + 1}/5 - What else would you like to know?**"
+        answer += f"\n\nQuestion {qa_count + 1}/5 - What else would you like to know?"
     else:
-        answer += "\n\n**This is your final question for this transcript.**"
+        answer += "\n\nThis is your final question for this transcript."
     
-    history.append((question, answer))
+    history.append({"role": "user", "content": question})
+    history.append({"role": "assistant", "content": answer})
     return history, qa_count + 1, ""
 
 # Build the Gradio interface
@@ -107,39 +110,40 @@ with gr.Blocks(theme=theme) as demo:
 
     with gr.Row():
         with gr.Column(scale=1):
-            gr.Markdown("### 📊 Audio Input")
+            gr.Markdown("### Audio Input")
             audio_input = gr.Audio(
                 sources=["microphone", "upload"], 
                 type="filepath", 
                 label="Record/Upload Audio (MP3, WAV, M4A, etc.)"
             )
             transcribe_btn = gr.Button("Transcribe Audio", variant="primary", size="lg")
-            
-            gr.Markdown("### 📝 Transcript")
-            transcript_output = gr.Textbox(
-                label="", 
-                lines=15,
-                placeholder="Transcript will appear here after clicking 'Transcribe Audio'..."
-            )
         
         with gr.Column(scale=1):
-            gr.Markdown("### 💬 Interactive Q&A")
-            chatbot = gr.Chatbot(
-                type="messages",
-                height=500,
-                label="Conversation History",
-                bubble_full_width=False
+            gr.Markdown("### Transcript")
+            transcript_output = gr.Textbox(
+                label="", 
+                lines=10,
+                placeholder="Transcript will appear here after clicking 'Transcribe Audio'...",
+                max_lines=10
             )
-            
-            with gr.Row():
-                question_input = gr.Textbox(
-                    label="Your Question",
-                    placeholder="e.g., What was the main topic? Why did they say that?",
-                    scale=4
-                )
-                ask_btn = gr.Button("Ask", variant="primary", scale=1)
-            
-            clear_chat_btn = gr.Button("Clear Chat", variant="secondary", size="sm")
+    
+    gr.Markdown("### Interactive Q&A")
+    chatbot = gr.Chatbot(
+        type="messages",
+        height=400,
+        label="Conversation History",
+        bubble_full_width=False
+    )
+    
+    with gr.Row():
+        question_input = gr.Textbox(
+            label="Your Question",
+            placeholder="e.g., What was the main topic? Why did they say that?",
+            scale=4
+        )
+        ask_btn = gr.Button("Ask", variant="primary", scale=1)
+    
+    clear_chat_btn = gr.Button("Clear Chat", variant="secondary")
 
     gr.Markdown("""
     ### Example Questions to Try:
@@ -170,7 +174,7 @@ with gr.Blocks(theme=theme) as demo:
     )
     
     clear_chat_btn.click(
-        fn=lambda t: ([(None, f"**Summary:** {(t)}\n\n**What else would you like to know?**")] if t else [], 1 if t else 0),
+        fn=lambda t: ([{"role": "assistant", "content": "Chat cleared. Ask me questions about the transcript."}] if t else [], 1 if t else 0),
         inputs=[transcript_state],
         outputs=[chatbot, qa_counter]
     )