refactor: Integrate message box into chat interface
Browse filesMade 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]>
|
@@ -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 |
-
#
|
| 279 |
try:
|
| 280 |
-
chatbot = gr.Chatbot(type="messages", height=
|
| 281 |
except TypeError:
|
| 282 |
# Fallback for older Gradio versions
|
| 283 |
-
chatbot = gr.Chatbot(height=
|
| 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
|
| 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
|