Update interface.js

interface.js

@@ -1,8 +1,6 @@
 // interface.js
 // ==============================
 
-alert('interface.js loaded!');
-
 const currentScriptTag = document.currentScript;
 
 (async function() {
@@ -28,12 +26,15 @@ const currentScriptTag = document.currentScript;
       const response = await fetch(configUrl);
       config = await response.json();
     } catch (error) {
+      console.error("Could not load config: " + error);
       return;
     }
   } else {
+    console.error("No configUrl found for viewer");
     return;
   }
 
+  // 2. Inject CSS if specified
   if (config.css_url) {
     const linkEl = document.createElement('link');
     linkEl.rel = "stylesheet";
@@ -41,8 +42,10 @@ const currentScriptTag = document.currentScript;
     document.head.appendChild(linkEl);
   }
 
+  // 3. Setup unique instanceId for this widget
   const instanceId = Math.random().toString(36).substr(2, 8);
 
+  // 4. Calculate aspect ratio (for padding-bottom hack)
   let aspectPercent = "100%";
   if (config.aspect) {
     if (config.aspect.includes(":")) {
@@ -59,6 +62,7 @@ const currentScriptTag = document.currentScript;
       }
     }
   } else {
+    // fallback: try to use parent container's aspect
     const parentContainer = scriptTag.parentNode;
     const containerWidth  = parentContainer.offsetWidth;
     const containerHeight = parentContainer.offsetHeight;
@@ -67,6 +71,7 @@ const currentScriptTag = document.currentScript;
     }
   }
 
+  // 5. Create the widget container and controls
   const widgetContainer = document.createElement('div');
   widgetContainer.id = 'ply-widget-container-' + instanceId;
   widgetContainer.classList.add('ply-widget-container');
@@ -105,6 +110,7 @@ const currentScriptTag = document.currentScript;
 
   scriptTag.parentNode.appendChild(widgetContainer);
 
+  // 6. Grab references for UI controls
   const viewerContainerElem = document.getElementById('viewer-container-' + instanceId);
   const fullscreenToggle    = document.getElementById('fullscreen-toggle-' + instanceId);
   const helpToggle          = document.getElementById('help-toggle-' + instanceId);
@@ -180,6 +186,7 @@ const currentScriptTag = document.currentScript;
 
   // --- HELP PANEL DEFAULT VISIBILITY ---
   menuContent.style.display = 'block';
+
   viewerContainerElem.style.display = 'block';
 
   let dragHide = null;
@@ -195,23 +202,21 @@ const currentScriptTag = document.currentScript;
     menuContent.style.display = 'none';
   }
 
-  // 7. Dynamically load viewer.js
+  // 7. Dynamically load viewer.js (modern ES2024 import, always fresh load)
   let viewerModule;
   try {
-      alert('interface.js: about to import viewer.js');
-      viewerModule = await import('https://mikafil-viewer-sgos.static.hf.space/viewer.js');
-      alert('interface.js: viewer.js imported, about to call initializeViewer');
-      await viewerModule.initializeViewer(config, instanceId);
-      alert('interface.js: initializeViewer called');
+    viewerModule = await import('https://mikafil-viewer-sgos.static.hf.space/viewer.js?' + Date.now());
+    await viewerModule.initializeViewer(config, instanceId);
   } catch (err) {
-      alert('interface.js: error importing viewer.js: ' + (err.message || err));
-      console.error(err);
-      return;
+    console.error("Could not load viewer.js: " + err);
+    return;
   }
 
+  // 8. Canvas reference (for tooltips and resizing)
   const canvasId = 'canvas-' + instanceId;
   const canvasEl = document.getElementById(canvasId);
 
+  // 9. Tooltips toggle if any
   if (tooltipsToggleBtn) {
     if (!config.tooltips_url) {
       tooltipsToggleBtn.style.display = 'none';