Update app.py

app.py

@@ -5,11 +5,9 @@ from transformers import AutoTokenizer, AutoModelForCausalLM
 import gradio as gr
 import matplotlib.pyplot as plt
 
-# Model setup
-device = torch.device('cpu')  # Use 'cuda' if available
+device = torch.device('cpu')
 model_name_or_path = 'GoodBaiBai88/M3D-LaMed-Phi-3-4B'
 
-# Load model and tokenizer
 model = AutoModelForCausalLM.from_pretrained(
     model_name_or_path,
     torch_dtype=torch.float32,
@@ -24,7 +22,6 @@ tokenizer = AutoTokenizer.from_pretrained(
     trust_remote_code=True
 )
 
-# Storage
 chat_history = []
 current_image = None
 
@@ -45,6 +42,14 @@ def extract_and_display_images(image_path):
     plt.close()
     return output_path
 
+def upload_image(image):
+    global current_image
+    if image is None:
+        return "", None
+    current_image = image.name
+    preview_path = extract_and_display_images(current_image)
+    return "Image uploaded successfully!", preview_path
+
 def process_question(question):
     global current_image
     if current_image is None:
@@ -60,88 +65,132 @@ def process_question(question):
     generated_texts = tokenizer.batch_decode(generation, skip_special_tokens=True)
     return generated_texts[0]
 
-def upload_image(image):
-    global current_image
-    current_image = image.name
-    preview_path = extract_and_display_images(current_image)
-    return "Image uploaded successfully!", preview_path
-
 def chat_with_model(user_message):
     global chat_history
+    if not user_message.strip():
+        return chat_history
     response = process_question(user_message)
     chat_history.append((user_message, response))
     return chat_history
 
-# UI Design
+# Function to export chat history to a text file
+def export_chat_history():
+    history_text = ""
+    for user_msg, model_reply in chat_history:
+        history_text += f"User: {user_msg}\nAI: {model_reply}\n\n"
+    with open("chat_history.txt", "w") as f:
+        f.write(history_text)
+    return "Chat history exported as chat_history.txt"
+
+# UI
 with gr.Blocks(css="""
 body {
-    background: linear-gradient(135deg, #00b4db, #0083b0);
-    font-family: 'Poppins', sans-serif;
-    color: white;
-}
-
-.gr-box {
-    border-radius: 16px;
-    background: rgba(255,255,255,0.1);
-    padding: 20px;
-    backdrop-filter: blur(10px);
-    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
+    background: #f5f5f5;
+    font-family: 'Inter', sans-serif;
+    color: #333333;
 }
 
 h1 {
     text-align: center;
-    font-size: 2.5em;
+    font-size: 2em;
     margin-bottom: 20px;
-    color: #ffffff;
+    color: #222;
+}
+
+.gr-box {
+    background: #ffffff;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
 }
 
 .gr-chatbot-container {
     overflow-y: auto;
     max-height: 500px;
+    scroll-behavior: smooth;
 }
 
 .gr-chatbot-message {
-    margin-bottom: 15px;
-    padding: 10px;
-    border-radius: 10px;
-    background: rgba(0,0,0,0.3);
-    transition: 0.3s;
-}
-
-.gr-chatbot-message:hover {
-    transform: scale(1.02);
-    background: rgba(255,255,255,0.1);
+    margin-bottom: 10px;
+    padding: 8px;
+    border-radius: 8px;
+    background: #f5f5f5;
+    animation: fadeIn 0.5s ease-out;
 }
 
 .gr-button {
-    background-color: #ff7e5f;
-    border: none;
-    padding: 10px 20px;
-    border-radius: 20px;
+    background-color: #4CAF50;
     color: white;
-    font-weight: bold;
-    transition: 0.3s;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 6px;
+    cursor: pointer;
 }
 
 .gr-button:hover {
-    background-color: #feb47b;
-    transform: scale(1.05);
+    background-color: #45a049;
+}
+
+.gr-upload-btn {
+    background-color: #4CAF50;
+    color: white;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    font-size: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border: none;
+    margin-top: 10px;
+}
+
+.gr-spinner {
+    margin: auto;
+    display: block;
+}
+
+@keyframes fadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
 }
 """) as app:
-    gr.Markdown("# 🚀 AI Powered Medical Image Analysis System 🚀")
+    gr.Markdown("# AI Powered Medical Image Analysis System")
 
     with gr.Row():
-        with gr.Column(scale=1, min_width=250):
-            chat_history_box = gr.Chatbot(value=[], label="🗂 Chat History")
+        with gr.Column(scale=1):
+            with gr.Box(elem_id="chat_box", label="Chat Area", visible=True):
+                chatbot_ui = gr.Chatbot(value=[], label="Chat History")
         with gr.Column(scale=2):
-            uploaded_image = gr.File(label="📤 Upload NPY Image", type="filepath")
-            upload_status = gr.Textbox(label="Status", interactive=False)
-            preview_image = gr.Image(label="🖼 Image Preview")
-            user_input = gr.Textbox(label="💬 Ask a question about the image...")
-            send_button = gr.Button("📨 Send")
-
-    uploaded_image.upload(upload_image, uploaded_image, [upload_status, preview_image])
-    send_button.click(chat_with_model, user_input, chat_history_box)
-    user_input.submit(chat_with_model, user_input, chat_history_box)
+            with gr.Box(elem_id="upload_box", label="Upload Section"):
+                upload_button = gr.Button("+", elem_id="upload_btn", visible=True, interactive=True)
+                upload_section = gr.File(label="Upload NPY Image", type="filepath", visible=False)
+                upload_status = gr.Textbox(label="Status", interactive=False)
+                preview_img = gr.Image(label="Image Preview", interactive=False)
+                message_input = gr.Textbox(placeholder="Type your question here...", label="Your Message")
+                send_button = gr.Button("Send")
+                export_button = gr.Button("Export Chat History")
+                loading_spinner = gr.Spinner(visible=False)
+
+    # Handle file upload when "+" button is clicked
+    upload_button.click(lambda: upload_section.update(visible=True), None, upload_section)
+
+    # Display loading spinner when uploading an image
+    upload_section.upload(lambda *args: loading_spinner.update(visible=True), upload_section, None)
+    upload_section.upload(upload_image, upload_section, [upload_status, preview_img, loading_spinner.update(visible=False)])
+
+    # Display loading spinner while processing question
+    send_button.click(lambda *args: loading_spinner.update(visible=True), None, None)
+    send_button.click(chat_with_model, message_input, chatbot_ui)
+    send_button.click(lambda *args: loading_spinner.update(visible=False), None, None)
+    message_input.submit(chat_with_model, message_input, chatbot_ui)
+
+    # Export chat history functionality
+    export_button.click(export_chat_history)
+
+    # Auto-focus typing box and scroll to bottom after message sent
+    message_input.submit(lambda: gr.update(focus=True), None, message_input)
+    send_button.click(lambda: gr.update(focus=True), None, message_input)
 
 app.launch()