Update app.py

app.py

@@ -8,9 +8,12 @@ from langchain_google_genai import ChatGoogleGenerativeAI
 from datetime import datetime
 from langchain_core.messages import HumanMessage
 
+# Define title and layout
+st.set_page_config(page_title="Vision Bot", layout="wide")
 os.environ["GOOGLE_API_KEY"] = "AIzaSyAc0VslmJlmiTFx7GB8QPYEHUZ5nZb5_Nk"
 st.title("Vision Bot")
 
+
 llm = ChatGoogleGenerativeAI(
     model="gemini-1.5-flash",
     max_tokens=4000
@@ -23,15 +26,26 @@ if not os.path.exists(IMAGE_SAVE_FOLDER):
 st.markdown(
     """
 <style>
+    .sidebar-content {
+        background-color: #f1f3f6;
+        padding: 20px;
+        border-radius: 10px;
+        text-align: left;
+        box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
+    }
     .st-emotion-cache-janbn0 {
         flex-direction: row-reverse;
         text-align: right;
     }
+    .uploaded-image {
+        border: 2px solid #D1D1D1;
+        border-radius: 8px;
+        margin-top: 10px;
+    }
 </style>
 """,
     unsafe_allow_html=True,
 )
-
 # Initialize session states
 if "messages" not in st.session_state:
     st.session_state.messages = []
@@ -45,14 +59,32 @@ if "last_displayed_image" not in st.session_state:
     st.session_state.last_displayed_image = None
 
 container = st.container()
-
+with st.sidebar:
+    st.markdown(
+        """
+        <div class="sidebar-content">
+        <h2>Vision Bot</h2>
+        <p>This is Vision Bot where you can ask any question regarding any image. It can perform various tasks such as:</p>
+        <ul>
+            <li><b>Image Captioning</b></li>
+            <li><b>Answering text-related queries inside the image</b></li>
+            <li><b>OCR (Optical Character Recognition)</b></li>
+            <li><b>Image Analysis & Description</b></li>
+        </ul>
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
+# Upload image
 # Upload image
-uploaded_image = st.file_uploader("Upload an image", type=["jpg", "jpeg", "png"], key="image_uploader")
+uploaded_image = st.file_uploader("Upload an image", type=["jpg", "jpeg", "png","webp"], key="image_uploader")
 
 # Check if a new image is uploaded
 if uploaded_image and uploaded_image != st.session_state.current_image:
     st.session_state.current_image = uploaded_image
-    st.image(uploaded_image, caption="Newly Uploaded Image")
+    
+    # Fix image size here
+    st.image(uploaded_image, caption="Newly Uploaded Image", width=300)  # Adjust width to a smaller size
     
     # Add a system message to mark the new image in the conversation
     st.session_state.messages.append({
@@ -65,7 +97,8 @@ if uploaded_image and uploaded_image != st.session_state.current_image:
 for message in st.session_state.messages:
     with container.chat_message(message["role"]):
         if message["role"] == "system" and "image" in message:
-            st.image(message["image"])
+            # Display image in chat history with fixed size
+            st.image(message["image"], width=300)  # Adjust width to a smaller size
         st.write(message["content"])
 
 # Take prompt