Update app.py

app.py

@@ -80,7 +80,11 @@ if uploaded_image and API_KEY:
                 st.subheader("Generated Caption")
 
                 # Use a text area for the caption so it can be copied easily
-                caption_area = st.text_area("", caption, height=100, key="caption_area", disabled=True)
+                caption_area = st.text_area(
+                    "", caption, height=100, key="caption_area", disabled=True,
+                    max_chars=2000,  # Limit number of characters for better display
+                    help="The generated caption will appear here.", label_visibility="collapsed"
+                )
 
                 # Add a copy button to copy the caption to clipboard
                 copy_button = st.button("Copy Caption", use_container_width=True)
@@ -96,16 +100,53 @@ else:
     else:
         st.info("Please upload an image.")
 
-# Remove the sidebar and center the content
+# Customizing CSS for text area and button
 st.markdown(
     """
     <style>
-        .css-1d391kg {text-align: center;}
-        .css-1v3fvcr {justify-content: center; display: flex;}
-        .css-1y4ccs5 {margin: 0 auto;}
-        .css-1aumxhk {display: flex; justify-content: center;}
-        .css-1k6kn8p {justify-content: center; align-items: center; display: flex;}
-        .css-ffhzg6 {text-align: center;}
+        /* Custom styles for the text area */
+        .css-1w6p6e5 {
+            background-color: #f0f0f5;
+            color: #333333;
+            font-size: 16px;
+            padding: 10px;
+        }
+        
+        .stButton>button {
+            background-color: #4CAF50;
+            color: white;
+            font-size: 16px;
+            border: none;
+            border-radius: 4px;
+            padding: 10px;
+            cursor: pointer;
+        }
+
+        .stButton>button:hover {
+            background-color: #45a049;
+        }
+
+        .stTextArea>div>textarea {
+            background-color: #f5f5f5;
+            color: #333;
+            font-size: 14px;
+            padding: 10px;
+            border-radius: 5px;
+        }
+
+        .stTextArea>div>textarea:disabled {
+            background-color: #e0e0e0;
+            color: #666;
+        }
+
+        /* Centering elements */
+        .css-1v3fvcr {
+            justify-content: center;
+            display: flex;
+        }
+        .css-ffhzg6 {
+            text-align: center;
+        }
     </style>
     """, unsafe_allow_html=True
 )