Update app.py

update stCopyButton

app.py

@@ -18,10 +18,9 @@ def get_gemini_response(image):
 
 # Konfigurasi halaman
 st.set_page_config(page_title="Prompt Generation from Image", layout="wide")
-
 st.title("🖼️ Prompt Generator from Image")
 
-# Membuat dua kolom
+# Dua kolom layout
 col1, col2 = st.columns(2)
 
 with col1:
@@ -46,26 +45,33 @@ with col2:
                 prompt = get_gemini_response(image)
             st.code(prompt, language="markdown")
 
-            # Tombol copy dengan interaksi
-            st.markdown(f"""
-                <button id="copyButton" 
-                        onclick="copyToClipboard()" 
-                        style="background-color:#4CAF50;color:white;padding:8px 12px;
-                               border:none;border-radius:4px;cursor:pointer;margin-top:10px;">
-                    📋 Copy Prompt
-                </button>
+            # Inject JavaScript untuk notifikasi klik tombol copy
+            st.markdown("""
                 <script>
-                    function copyToClipboard() {{
-                        const text = `{prompt}`;
-                        navigator.clipboard.writeText(text).then(function() {{
-                            const btn = document.getElementById("copyButton");
-                            btn.innerHTML = "✅ Copied!";
-                            setTimeout(() => {{
-                                btn.innerHTML = "📋 Copy Prompt";
-                            }}, 2000);
-                        }});
-                    }}
+                    setTimeout(() => {
+                        const copyBtns = window.parent.document.querySelectorAll('[data-testid="stCopyButton"]');
+                        copyBtns.forEach(btn => {
+                            btn.addEventListener('click', () => {
+                                const notice = document.createElement("div");
+                                notice.innerText = "✅ Prompt copied to clipboard!";
+                                notice.style.position = "fixed";
+                                notice.style.bottom = "30px";
+                                notice.style.right = "30px";
+                                notice.style.backgroundColor = "#4CAF50";
+                                notice.style.color = "white";
+                                notice.style.padding = "10px 16px";
+                                notice.style.borderRadius = "8px";
+                                notice.style.boxShadow = "0 4px 6px rgba(0,0,0,0.2)";
+                                notice.style.zIndex = "9999";
+                                notice.style.fontSize = "14px";
+                                document.body.appendChild(notice);
+                                setTimeout(() => {
+                                    notice.remove();
+                                }, 2000);
+                            });
+                        });
+                    }, 1000);
                 </script>
-                """, unsafe_allow_html=True)
+            """, unsafe_allow_html=True)
     else:
         st.info("Please upload an image to generate a prompt.")