Update app.py

app.py

@@ -1005,7 +1005,7 @@ class PresetGallery(gr.HTML):
 
 
 ####################################################################################################
-### PART 16: Custom Component - AudioDropUpload
+### PART 16: Custom Component - AudioDropUpload (FIXED)
 ####################################################################################################
 class AudioDropUpload(gr.HTML):
     """
@@ -1015,7 +1015,7 @@ class AudioDropUpload(gr.HTML):
     - The hidden gr.Audio must be type="filepath" (or whatever you need).
     """
     def __init__(self, target_audio_elem_id: str, value=None, **kwargs):
-        uid = uuid.uuid4().hex
+        uid = uuid.uuid4().hex[:8]
 
         html_template = f"""
         <div class="aud-wrap" data-aud="{uid}">
@@ -1042,12 +1042,12 @@ class AudioDropUpload(gr.HTML):
         # - finds the hidden gr.Audio upload <input type=file> inside the component with elem_id=target_audio_elem_id
         # - sets the selected file onto it (DataTransfer) and dispatches change
         js_on_load = """
-        (() => {
+        (() => {{
           // Helper: access Gradio shadow DOM safely
-          function grRoot() {
+          function grRoot() {{
             const ga = document.querySelector("gradio-app");
             return (ga && ga.shadowRoot) ? ga.shadowRoot : document;
-          }
+          }}
           const root = grRoot();
           const wrap = element.querySelector(".aud-wrap");
           const drop = element.querySelector(".aud-drop");
@@ -1057,53 +1057,47 @@ class AudioDropUpload(gr.HTML):
           const label = element.querySelector(".aud-filelabel");
           const TARGET_ID = "__TARGET_ID__";
           let currentUrl = null;
-          
-          function findHiddenAudioFileInput() {
+          function findHiddenAudioFileInput() {{
             const host = root.querySelector("#" + CSS.escape(TARGET_ID));
             if (!host) return null;
             // Gradio's Audio component contains an <input type=file> for upload.
             // This selector works in most Gradio 3/4 themes.
-            const inp = host.querySelector('input');
+            const inp = host.querySelector('input[type="file"]');
             return inp;
-          }
-          
-          function showDrop() {
+          }}
+          function showDrop() {{
             drop.style.display = "";
             row.style.display = "none";
             label.style.display = "none";
             label.textContent = "";
-          }
-          
-          function showPlayer(filename) {
+          }}
+          function showPlayer(filename) {{
             drop.style.display = "none";
             row.style.display = "flex";
-            if (filename) {
+            if (filename) {{
               label.textContent = "فایل بارگذاری شده: " + filename;
               label.style.display = "block";
-            }
-          }
-          
-          function clearPreview() {
+            }}
+          }}
+          function clearPreview() {{
             player.pause();
             player.removeAttribute("src");
             player.load();
-            if (currentUrl) {
+            if (currentUrl) {{
               URL.revokeObjectURL(currentUrl);
               currentUrl = null;
-            }
-          }
-          
-          function clearHiddenGradioAudio() {
+            }}
+          }}
+          function clearHiddenGradioAudio() {{
             const fileInput = findHiddenAudioFileInput();
             if (!fileInput) return;
             // Clear file input (works by replacing its files with empty DataTransfer)
             fileInput.value = "";
             const dt = new DataTransfer();
             fileInput.files = dt.files;
-            fileInput.dispatchEvent(new Event("input",  { bubbles: true }));
-            fileInput.dispatchEvent(new Event("change", { bubbles: true }));
-          }
-          
+            fileInput.dispatchEvent(new Event("input",  {{ bubbles: true }}));
+            fileInput.dispatchEvent(new Event("change", {{ bubbles: true }}));
+          }}
           function clearAll() {
             clearPreview();
           
@@ -1117,18 +1111,18 @@ class AudioDropUpload(gr.HTML):
             showDrop();
           }
 
-          function loadFileToPreview(file) {
+          function loadFileToPreview(file) {{
             if (!file) return;
-            if (!file.type || !file.type.startsWith("audio/")) {
+            if (!file.type || !file.type.startsWith("audio/")) {{
               alert("لطفا یک فایل صوتی انتخاب کنید.");
               return;
-            }
+            }}
             clearPreview();
             currentUrl = URL.createObjectURL(file);
             player.src = currentUrl;
             showPlayer(file.name);
-          }
-          
+
+          }}
           function pushFileIntoHiddenGradioAudio(file) {
             const fileInput = findHiddenAudioFileInput();
             if (!fileInput) {
@@ -1144,15 +1138,14 @@ class AudioDropUpload(gr.HTML):
             fileInput.files = dt.files;
           
             // Trigger Gradio listeners
-            fileInput.dispatchEvent(new Event("input",  { bubbles: true }));
-            fileInput.dispatchEvent(new Event("change", { bubbles: true }));
+            fileInput.dispatchEvent(new Event("input",  {{ bubbles: true }}));
+            fileInput.dispatchEvent(new Event("change", {{ bubbles: true }}));
           }
 
-          function handleFile(file) {
+          function handleFile(file) {{
             loadFileToPreview(file);
             pushFileIntoHiddenGradioAudio(file);
-          }
-          
+          }}
           // Click-to-browse uses a *local* ephemeral input (not Gradio’s),
           // then we forward to hidden gr.Audio.
           const localPicker = document.createElement("input");
@@ -1160,40 +1153,33 @@ class AudioDropUpload(gr.HTML):
           localPicker.accept = "audio/*";
           localPicker.style.display = "none";
           wrap.appendChild(localPicker);
-          
-          localPicker.addEventListener("change", () => {
-            const f = localPicker.files && localPicker.files;
+          localPicker.addEventListener("change", () => {{
+            const f = localPicker.files && localPicker.files[0];
             if (f) handleFile(f);
             localPicker.value = "";
-          });
-          
+          }});
           drop.addEventListener("click", () => localPicker.click());
-          
-          drop.addEventListener("keydown", (e) => {
-            if (e.key === "Enter" || e.key === " ") {
+          drop.addEventListener("keydown", (e) => {{
+            if (e.key === "Enter" || e.key === " ") {{
               e.preventDefault();
               localPicker.click();
-            }
-          });
-          
+            }}
+          }});
           removeBtn.addEventListener("click", clearAll);
-          
-          // Drag & drop.forEach(evt => {
-            drop.addEventListener(evt, (e) => {
+          // Drag & drop
+          ["dragenter","dragover","dragleave","drop"].forEach(evt => {{
+            drop.addEventListener(evt, (e) => {{
               e.preventDefault();
               e.stopPropagation();
-            });
-          });
-          
+            }});
+          }});
           drop.addEventListener("dragover", () => drop.classList.add("dragover"));
           drop.addEventListener("dragleave", () => drop.classList.remove("dragover"));
-          
-          drop.addEventListener("drop", (e) => {
+          drop.addEventListener("drop", (e) => {{
             drop.classList.remove("dragover");
-            const f = e.dataTransfer.files && e.dataTransfer.files;
+            const f = e.dataTransfer.files && e.dataTransfer.files[0];
             if (f) handleFile(f);
-          });
-          
+          }});
           // init
           showDrop();
 
@@ -1232,7 +1218,8 @@ class AudioDropUpload(gr.HTML):
           };
           requestAnimationFrame(syncFromProps);
 
-        })();
+
+        }})();
         """
         js_on_load = js_on_load.replace("__TARGET_ID__", target_audio_elem_id)