Update app.py

app.py

@@ -1,14 +1,29 @@
 import gradio as gr
 from utils import generate_response
 
+# Placeholder function for image description (replace this with a real model or API)
+def describe_image(image):
+    # This is a placeholder. In a real implementation, use a model like CLIP or other image captioning models.
+    # You can integrate an API or a pre-trained model to generate descriptions for images.
+    return "This is a placeholder description for the uploaded image."
+
 # Define chatbot interaction function
-def chat(user_input, chat_history):
+def chat(user_input, chat_history, image):
     try:
-        # Generate response
+        # Generate text response
         response = generate_response(user_input)
+        
+        # If an image is uploaded, describe it
+        if image is not None:
+            image_description = describe_image(image)
+            response += f"\n\n[Image Description]: {image_description}"
+        else:
+            image_description = "No image uploaded."
+
         # Update chat history
         chat_history.append(("User", user_input))
         chat_history.append(("AI", response))
+        
         # Format chat history for display with a conversational style
         formatted_history = "\n".join(
             [f"{role}: {message}" for role, message in chat_history]
@@ -17,7 +32,7 @@ def chat(user_input, chat_history):
     except Exception as e:
         return f"Error: {e}", chat_history
 
-# Create Gradio interface with updated modern design
+# Create Gradio interface with updated light boundary design and image upload
 with gr.Blocks(css="""
     body {
         background-color: #f7f7f7;
@@ -36,11 +51,12 @@ with gr.Blocks(css="""
         padding: 30px;
         border-radius: 15px;
         box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
+        border: 1px solid #dcdcdc;  /* Light border */
     }
     .gradio-container .textbox, .gradio-container .button {
         background-color: #eeeeee;
         color: #333;
-        border: 1px solid #ccc;
+        border: 1px solid #dcdcdc;  /* Light border */
         border-radius: 10px;
         padding: 12px;
         font-size: 16px;
@@ -60,10 +76,10 @@ with gr.Blocks(css="""
     #chatbox {
         height: 350px;
         overflow-y: auto;
-        border: none;
+        border: 1px solid #dcdcdc;  /* Light border */
         padding: 20px;
         border-radius: 10px;
-        background-color: #f1f1f1;
+        background-color: #f9f9f9;
         color: #333;
         margin-bottom: 20px;
         font-size: 14px;
@@ -86,8 +102,8 @@ with gr.Blocks(css="""
         margin-left: auto;
     }
 """) as demo:
-    gr.Markdown("## 🤖 **Professional Groq Chatbot**")
-    gr.Markdown("Type your message below to chat with the AI!")
+    gr.Markdown("## 🤖 **Professional Groq Chatbot with Image Description**")
+    gr.Markdown("Type your message below or upload an image to get a description!")
 
     # Define layout with vertical alignment
     with gr.Column():
@@ -108,13 +124,21 @@ with gr.Blocks(css="""
             elem_id="chatbox",
         )
 
+        # Image upload component
+        image_input = gr.Image(
+            label="Upload Image for Description",
+            type="pil",  # PIL (Python Imaging Library) type for image input
+            interactive=True,
+            elem_id="image-upload",
+        )
+
     # State to hold chat history
     chat_history = gr.State([])
 
     # Button functionalities
     submit_button.click(
         fn=chat,
-        inputs=[user_input, chat_history],
+        inputs=[user_input, chat_history, image_input],
         outputs=[chatbot_output, chat_history],
     )