Update app.py

app.py

@@ -3,8 +3,7 @@ import requests
 import os
 import base64
 from PIL import Image
-from io import BytesIO  # Correctly import BytesIO from the io module
-import pyperclip  # For copying text to clipboard
+from io import BytesIO
 
 # Set page title and layout
 st.set_page_config(page_title="Image Caption Generator", layout="centered")
@@ -54,7 +53,7 @@ uploaded_image = st.file_uploader("Upload an image", type=["png", "jpg", "jpeg"]
 if uploaded_image and API_KEY:
     # Convert the image to base64
     image = Image.open(uploaded_image)
-    buffered = BytesIO()  # Use BytesIO from the io module
+    buffered = BytesIO()
     image.save(buffered, format="PNG")
     image_base64 = base64.b64encode(buffered.getvalue()).decode()
 
@@ -86,11 +85,22 @@ if uploaded_image and API_KEY:
                     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)
-                if copy_button:
-                    pyperclip.copy(caption_area)  # Copy caption to clipboard
-                    st.success("Caption copied to clipboard!")
+                # JavaScript to copy text from the text area
+                st.markdown(
+                    """
+                    <script>
+                    function copyText() {
+                        var copyText = document.getElementById("caption_area");
+                        copyText.select();
+                        copyText.setSelectionRange(0, 99999); // For mobile devices
+                        document.execCommand("copy");
+                    }
+                    </script>
+                    """, unsafe_allow_html=True
+                )
+
+                # Add a button to trigger the copy functionality
+                st.button("Copy Caption", on_click="copyText()")
 
             except Exception as e:
                 st.error(f"Error processing the response: {e}")
@@ -100,7 +110,7 @@ else:
     else:
         st.info("Please upload an image.")
 
-# Customizing CSS for text area and button
+# Customizing CSS for the text area and button (with blue glowing effect for button)
 st.markdown(
     """
     <style>
@@ -111,21 +121,26 @@ st.markdown(
             font-size: 16px;
             padding: 10px;
         }
-        
+
+        /* Glowing blue button styling */
         .stButton>button {
-            background-color: #4CAF50;
+            background-color: #007bff;  /* Blue color */
             color: white;
             font-size: 16px;
             border: none;
             border-radius: 4px;
-            padding: 10px;
+            padding: 12px 24px;
             cursor: pointer;
+            box-shadow: 0 4px 6px rgba(0, 123, 255, 0.6), 0 0 10px rgba(0, 123, 255, 0.8);
+            transition: all 0.3s ease-in-out;
         }
 
         .stButton>button:hover {
-            background-color: #45a049;
+            background-color: #0056b3;  /* Darker blue on hover */
+            box-shadow: 0 4px 6px rgba(0, 123, 255, 0.8), 0 0 20px rgba(0, 123, 255, 1);
         }
 
+        /* Text area styling */
         .stTextArea>div>textarea {
             background-color: #f5f5f5;
             color: #333;