samwell Claude commited on
Commit
30b53f2
Β·
1 Parent(s): 227178d

refactor: Integrate message box into chat interface

Browse files

Made the message input feel like part of the chat box:

Changes:
- Reduced chatbot height from 600px to 520px
- Removed labels from both chatbot and message box
- Set container=False on message box to reduce gaps
- Message box now feels integrated at bottom of chat

Before:
β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚ Chatbot β”‚
β”‚ (separate) β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚ Message Box β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

After:
β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚ Chatbot β”‚
β”‚ β”‚
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
β”‚ Message Box β”‚ ← Feels unified
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

This creates a WhatsApp-like unified chat interface.

Co-Authored-By: Claude <[email protected]>

Files changed (1) hide show
  1. app.py +9 -7
app.py CHANGED
@@ -273,24 +273,26 @@ with gr.Blocks() as demo:
273
 
274
  # Side-by-side layout: Chat on left, Visualization on right
275
  with gr.Row():
276
- # Left column: Chat interface
277
  with gr.Column(scale=2):
278
- # Use type="messages" for newer Gradio versions on HF Spaces
279
  try:
280
- chatbot = gr.Chatbot(type="messages", height=600)
281
  except TypeError:
282
  # Fallback for older Gradio versions
283
- chatbot = gr.Chatbot(height=600)
284
 
 
285
  msg = gr.MultimodalTextbox(
286
- label="Message",
287
  placeholder="Upload an X-ray image (JPG, PNG, DICOM) and ask a question...",
288
- file_types=["image", ".dcm", ".dicom", ".DCM", ".DICOM"]
 
 
289
  )
290
 
291
  # Right column: Visualization
292
  with gr.Column(scale=1):
293
- viz_output = gr.Image(label="Visualization (Grounding/Segmentation)", height=600)
294
 
295
  def respond(message, chat_history, mode_selection):
296
  # Convert mode selection to internal mode string
 
273
 
274
  # Side-by-side layout: Chat on left, Visualization on right
275
  with gr.Row():
276
+ # Left column: Chat interface (unified chat + message box)
277
  with gr.Column(scale=2):
278
+ # Chatbot with reduced height to leave room for message box
279
  try:
280
+ chatbot = gr.Chatbot(type="messages", height=520, show_label=False)
281
  except TypeError:
282
  # Fallback for older Gradio versions
283
+ chatbot = gr.Chatbot(height=520, show_label=False)
284
 
285
+ # Message box directly below chatbot (no gap)
286
  msg = gr.MultimodalTextbox(
 
287
  placeholder="Upload an X-ray image (JPG, PNG, DICOM) and ask a question...",
288
+ file_types=["image", ".dcm", ".dicom", ".DCM", ".DICOM"],
289
+ show_label=False,
290
+ container=False
291
  )
292
 
293
  # Right column: Visualization
294
  with gr.Column(scale=1):
295
+ viz_output = gr.Image(label="Visualization", height=600)
296
 
297
  def respond(message, chat_history, mode_selection):
298
  # Convert mode selection to internal mode string