Update app.py

app.py

@@ -936,6 +936,42 @@ class PresetGallery(gr.HTML):
             """)
 
         html_template = f"""
+        <style>
+        .pg-modal-overlay-custom {{
+            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+            background: rgba(0,0,0,0.6); display: none;
+            align-items: center; justify-content: center; z-index: 999999;
+            backdrop-filter: blur(2px);
+        }}
+        .pg-modal-custom {{
+            background: #2b2b2b; padding: 24px; border-radius: 16px;
+            border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.9);
+            text-align: center; font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; 
+            min-width: 320px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+            direction: rtl;
+        }}
+        .pg-modal-custom p {{
+            font-size: 16px; margin: 0 0 20px 0; font-weight: 600;
+        }}
+        .pg-modal-btns-custom {{
+            display: flex; gap: 12px; justify-content: center;
+        }}
+        .pg-modal-btns-custom button {{
+            padding: 10px 24px; border: none; border-radius: 10px; cursor: pointer; 
+            font-weight: 700; font-size: 14px; font-family: inherit; transition: opacity 0.2s;
+        }}
+        .pg-modal-btns-custom button:hover {{
+            opacity: 0.8;
+        }}
+        .pg-btn-confirm-custom {{ 
+            background: #4b2ab5; color: white; 
+        }}
+        .pg-btn-cancel-custom {{ 
+            background: transparent; color: rgba(255,255,255,0.7); 
+            border: 1px solid rgba(255,255,255,0.2) !important;
+        }}
+        </style>
+
         <div class="pg-wrap" data-pg="{uid}">
           <div class="pg-title">
             <div class="pg-h1">{title}</div>
@@ -943,17 +979,31 @@ class PresetGallery(gr.HTML):
           <div class="pg-grid">
             {''.join(cards_html)}
           </div>
+          
+          <!-- پیام تاییدی (Modal) اضافه شده -->
+          <div class="pg-modal-overlay-custom">
+            <div class="pg-modal-custom">
+              <p>آیا می‌خواهید نمونه به بالا اضافه بشه؟</p>
+              <div class="pg-modal-btns-custom">
+                <button class="pg-btn-confirm-custom">تایید</button>
+                <button class="pg-btn-cancel-custom">انصراف</button>
+              </div>
+            </div>
+          </div>
         </div>
         """
 
         # --- JAVASCRIPT LOGIC UPDATED ---
-        # Removed "pointerenter" and "pointerleave" events.
-        # All logic is now inside "pointerdown" (click event).
+        # Logic updated to show confirmation prompt before triggering action
         js_on_load = r"""
         (() => {
           const wrap = element.querySelector(".pg-wrap");
           const cards = Array.from(element.querySelectorAll(".pg-card"));
-          if (!wrap || !cards.length) return;
+          const modalOverlay = element.querySelector(".pg-modal-overlay-custom");
+          const btnConfirm = element.querySelector(".pg-btn-confirm-custom");
+          const btnCancel = element.querySelector(".pg-btn-cancel-custom");
+          
+          if (!wrap || !cards.length || !modalOverlay) return;
         
           function setDim(activeIdx) {
             cards.forEach((c, i) => {
@@ -966,12 +1016,50 @@ class PresetGallery(gr.HTML):
         
           let lastSent = null;
           let lock = false;
+          let pendingIdxNumber = null;
+          
+          // Action for "تایید"
+          btnConfirm.addEventListener("pointerdown", (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              modalOverlay.style.display = "none"; // Hide Modal
+              
+              if (pendingIdxNumber !== null) {
+                  const idxString = String(pendingIdxNumber);
+                  
+                  // 1. Update visual state immediately on confirmed click.
+                  setDim(pendingIdxNumber);
+                  
+                  // 2. Only update Python backend if the value has actually changed.
+                  if (idxString !== lastSent) {
+                      lastSent = idxString;
+                      // ✅ Set props.value to send data to Python.
+                      props.value = idxString;
+                  }
+                  
+                  pendingIdxNumber = null;
+              }
+          });
+          
+          // Action for "انصراف"
+          btnCancel.addEventListener("pointerdown", (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              modalOverlay.style.display = "none"; // Hide Modal
+              pendingIdxNumber = null;
+          });
+
+          // Close modal if clicked directly on background overlay
+          modalOverlay.addEventListener("pointerdown", (e) => {
+              if (e.target === modalOverlay) {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  modalOverlay.style.display = "none";
+                  pendingIdxNumber = null;
+              }
+          });
         
           cards.forEach((card) => {
-            // REMOVED: "pointerenter" event listener. No action on hover.
-            // REMOVED: "pointerleave" event listener. No action on hover.
-        
-            // Use pointerdown (click/tap) for all actions.
             card.addEventListener("pointerdown", (e) => {
               e.preventDefault();
               e.stopPropagation();
@@ -980,18 +1068,10 @@ class PresetGallery(gr.HTML):
               lock = true;
               setTimeout(() => (lock = false), 250);
         
-              const idxNumber = Number(card.dataset.idx);
-              const idxString = String(idxNumber);
+              // Save clicked index and display modal
+              pendingIdxNumber = Number(card.dataset.idx);
+              modalOverlay.style.display = "flex";
               
-              // 1. Update visual state immediately on click.
-              setDim(idxNumber);
-        
-              // 2. Only update Python backend if the value has actually changed.
-              if (idxString === lastSent) return;
-              lastSent = idxString;
-        
-              // ✅ Set props.value to send data to Python.
-              props.value = idxString;
             }, { passive: false });
           });
         
@@ -1000,7 +1080,6 @@ class PresetGallery(gr.HTML):
         })();
         """
 
-
         super().__init__(value="", html_template=html_template, js_on_load=js_on_load, **kwargs)