Update index.html

index.html

@@ -363,7 +363,7 @@ body{
 .example-meta{padding:6px 10px 2px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
 .example-lora-badge{
     display:inline-flex;padding:2px 7px;background:rgba(255,165,0,.1);border-radius:4px;
-    font-size:9px;font-weight:600;color:var(--accent2);font-family:'JetBrains Mono',monospace;
+    font-size:9px;font-weight:600;color:var(--accent2);font-family='JetBrains Mono',monospace;
     white-space:nowrap;border:1px solid rgba(255,165,0,.25);
 }
 .example-body{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0}
@@ -727,6 +727,24 @@ const SUGGESTIONS = [
     ['Car', 'red car'],
 ];
 
+/* ── Helper: Convert Base64 Data URI to Object URL for better video playback ── */
+function dataURItoBlob(dataURI) {
+    if (!dataURI || !dataURI.startsWith('data:')) return dataURI;
+    try {
+        const byteString = atob(dataURI.split(',')[1]);
+        const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
+        const ab = new ArrayBuffer(byteString.length);
+        const ia = new Uint8Array(ab);
+        for (let i = 0; i < byteString.length; i++) {
+            ia[i] = byteString.charCodeAt(i);
+        }
+        return URL.createObjectURL(new Blob([ab], {type: mimeString}));
+    } catch (e) {
+        console.error("Blob conversion failed:", e);
+        return dataURI; // Fallback to raw data URI
+    }
+}
+
 /* ── Toast ── */
 function showToast(message, type) {
     let toast = document.getElementById('app-toast');
@@ -778,17 +796,18 @@ function renderCanvas() {
         
         if (mediaData.type === 'video') {
             const vid = document.createElement('video');
-            vid.src = mediaData.b64;
+            vid.src = dataURItoBlob(mediaData.b64); // Use Blob URL for reliable playback
             vid.className = 'modern-out-vid';
             vid.controls = true;
             vid.autoplay = true;
             vid.loop = true;
             vid.muted = true;
+            vid.playsInline = true; // Crucial for iOS Safari
             outBody.appendChild(vid);
             canvasMeta.textContent = (showResult ? 'result' : 'input') + ' · video';
         } else {
             const img = document.createElement('img');
-            img.src = mediaData.b64;
+            img.src = dataURItoBlob(mediaData.b64); // Use Blob URL
             img.className = 'modern-out-img';
             if (showInput) {
                 img.style.cursor = 'crosshair';
@@ -910,9 +929,9 @@ function renderFilmstrip() {
         t.className = 'fs-thumb selected';
         let mediaHTML = '';
         if (currentImage.type === 'video') {
-            mediaHTML = '<video src="' + currentImage.b64 + '" muted preload="metadata"></video>';
+            mediaHTML = '<video src="' + dataURItoBlob(currentImage.b64) + '" muted preload="metadata"></video>';
         } else {
-            mediaHTML = '<img src="' + currentImage.b64 + '" alt="">';
+            mediaHTML = '<img src="' + dataURItoBlob(currentImage.b64) + '" alt="">';
         }
         t.innerHTML = mediaHTML +
                       '<span class="fs-badge">' + (currentImage.type === 'video' ? 'video' : 'image') + '</span>' +
@@ -1068,7 +1087,7 @@ function renderHistory() {
         const t = document.createElement('div');
         t.className = 'fs-thumb' + (i === historyIdx ? ' selected' : '');
         const im = document.createElement('img');
-        im.src = entry.b64;
+        im.src = dataURItoBlob(entry.b64);
         t.appendChild(im);
         t.addEventListener('click', () => { historyIdx = i; showResult(history[i]); renderHistory(); });
         historyStrip.appendChild(t);
@@ -1087,7 +1106,7 @@ lightbox.addEventListener('click', () => lightbox.classList.remove('visible'));
 document.addEventListener('keydown', (e) => { if (e.key === 'Escape') lightbox.classList.remove('visible'); });
 zoomBtn.addEventListener('click', () => {
     if (currentResult && currentResult.type === 'image') {
-        lightboxImg.src = currentResult.b64;
+        lightboxImg.src = dataURItoBlob(currentResult.b64);
         lightbox.classList.add('visible');
     }
 });
@@ -1096,7 +1115,7 @@ zoomBtn.addEventListener('click', () => {
 dlBtn.addEventListener('click', () => {
     if (currentResult && currentResult.b64) {
         const a = document.createElement('a');
-        a.href = currentResult.b64;
+        a.href = currentResult.b64; // Keep base64 for download to ensure it saves correctly
         a.download = 'sam3_result.' + (currentResult.type === 'video' ? 'mp4' : 'png');
         document.body.appendChild(a); a.click(); document.body.removeChild(a);
     }