Update index.html to POST to Gradio backend API with progress/error handling

index.html

@@ -24,6 +24,7 @@
       .copy:hover{ background:#e5e7eb; }
       .download-btn{ width:100%; padding:14px; background:linear-gradient(135deg,#667eea 0%, #764ba2 100%); color:#fff; border:none; border-radius:10px; font-size:18px; font-weight:600; cursor:pointer; transition: all .25s ease; box-shadow:0 4px 15px rgba(102,126,234,.4); display:inline-flex; align-items:center; justify-content:center; gap:10px; }
       .download-btn:hover{ transform: translateY(-2px); box-shadow:0 6px 20px rgba(102,126,234,.6); }
+      .download-btn:disabled{ opacity:0.6; cursor:not-allowed; }
       .status { margin-top:12px; min-height:22px; font-size:14px; }
       .status .info{ color:#555; }
       .status .error{ color:#b00020; }
@@ -55,7 +56,6 @@
       </div>
       <h1><span class="gradient-text">Instagram Downloader</span></h1>
       <p class="instructions">Paste any public Instagram image or video link below and click Download.</p>
-
       <form id="downloadForm">
         <div class="input-group">
           <label for="linkInput">Instagram Link</label>
@@ -67,10 +67,8 @@
         <button type="submit" class="download-btn" id="downloadBtn">⬇️ Download</button>
         <div class="progress" id="progress"><span id="bar"></span></div>
         <div class="status" id="status" aria-live="polite"></div>
-        <div class="note" id="warning" style="display:none;"></div>
-        <div class="preview" id="preview"></div>
+        <div class="note" id="warning" style="display:none"></div>
       </form>
-
       <div class="features">
         <ul class="feature-list">
           <li>Download Instagram photos in high quality</li>
@@ -80,114 +78,137 @@
         </ul>
       </div>
     </div>
-
     <script>
       const form = document.getElementById('downloadForm');
       const input = document.getElementById('linkInput');
       const statusEl = document.getElementById('status');
       const progress = document.getElementById('progress');
       const bar = document.getElementById('bar');
-      const preview = document.getElementById('preview');
       const downloadBtn = document.getElementById('downloadBtn');
       const pasteBtn = document.getElementById('pasteBtn');
       const warning = document.getElementById('warning');
 
-      const sleep = (ms) => new Promise(r => setTimeout(r, ms));
-      function setStatus(type, msg){ statusEl.innerHTML = msg ? `<span class="${type}">${msg}</span>` : ''; }
-      function showWarning(msg){ warning.style.display = 'block'; warning.innerHTML = msg; }
-      function resetUI(){ setStatus('info',''); bar.style.width = '0%'; progress.style.display = 'none'; preview.style.display = 'none'; preview.innerHTML = ''; warning.style.display = 'none'; warning.innerHTML = ''; }
-      function startLoading(){ progress.style.display = 'block'; setStatus('info','Resolving media...'); let w = 10; bar.style.width = w + '%'; const id = setInterval(()=>{ w = Math.min(90, w + 5); bar.style.width = w + '%'; }, 400); return () => clearInterval(id); }
-      function sanitizeUrl(u){ try{ const url = new URL(u.trim()); if(!url.hostname.replace(/^www\./,'').endsWith('instagram.com')) throw new Error('Not an Instagram link'); return url.toString(); } catch{ throw new Error('Please enter a valid Instagram URL'); } }
+      // Backend API endpoint (Gradio)
+      const API_ENDPOINT = '/api/predict';
+
+      function setStatus(type, msg){ 
+        statusEl.innerHTML = msg ? `<span class="${type}">${msg}</span>` : ''; 
+      }
 
-      // NOTE: Direct client-side fetch to Instagram is blocked by CORS and auth.
-      // This demo previously attempted to use noembed.com which is unreliable for Instagram.
-      // We now short-circuit and show clear guidance instead of failing with "Failed to fetch".
+      function showWarning(msg){ 
+        warning.style.display = 'block'; 
+        warning.innerHTML = msg; 
+      }
 
-      const BACKEND_DOC_URL = 'https://github.com/huggingface/hub-examples/tree/main/spaces-examples/backend-proxy';
-      const SAMPLE_PROXY = 'https://r.jina.ai/http://example.com'; // placeholder, explain below
+      function resetUI(){ 
+        setStatus('info',''); 
+        bar.style.width = '0%'; 
+        progress.style.display = 'none'; 
+        warning.style.display = 'none'; 
+        warning.innerHTML = ''; 
+      }
 
-      async function tryLegacyNoEmbed(instaUrl){
-        const endpoint = `https://noembed.com/embed?url=${encodeURIComponent(instaUrl)}`;
-        const res = await fetch(endpoint, {mode:'cors', credentials:'omit'});
-        if(!res.ok) throw new Error(`Network error: ${res.status}`);
-        const data = await res.json();
-        if(data.url) return { direct: data.url, type: 'image', title: data.title || 'instagram-media' };
-        if(data.thumbnail_url) return { direct: data.thumbnail_url, type: 'image', title: data.title || 'instagram-image' };
-        if(data.html){
-          const m = data.html.match(/<video[^>]+src="([^"]+)"/i);
-          if(m) return { direct: m[1], type: 'video', title: data.title || 'instagram-video' };
-        }
-        throw new Error('Unable to resolve media from the link');
+      function startLoading(){ 
+        progress.style.display = 'block'; 
+        setStatus('info','Processing...'); 
+        bar.style.width = '20%'; 
       }
 
-      function showPreview(res){
-        const html = res.type === 'video'
-          ? `<video controls src="${res.direct}" style="max-width:100%; border-radius:8px;"></video>`
-          : `<img alt="preview" src="${res.direct}" style="max-width:100%; border-radius:8px;"/>`;
-        preview.innerHTML = html; preview.style.display = 'block';
+      function sanitizeUrl(u){ 
+        try{ 
+          const url = new URL(u.trim()); 
+          if(!url.hostname.replace(/^www\./,'').endsWith('instagram.com')) 
+            throw new Error('Not an Instagram link'); 
+          return url.toString(); 
+        } catch{ 
+          throw new Error('Please enter a valid Instagram URL'); 
+        } 
       }
 
       pasteBtn?.addEventListener('click', async () => {
-        try { const text = await navigator.clipboard.readText(); if(text) input.value = text.trim(); }
-        catch { setStatus('error','Clipboard blocked by browser'); }
+        try { 
+          const text = await navigator.clipboard.readText(); 
+          if(text) input.value = text.trim(); 
+        } catch { 
+          setStatus('error','Clipboard blocked by browser'); 
+        }
       });
 
       form.addEventListener('submit', async (e)=>{
-        e.preventDefault(); resetUI();
-        let stopTicker;
+        e.preventDefault(); 
+        resetUI();
+        
         try {
           const url = sanitizeUrl(input.value);
-          downloadBtn.disabled = true; stopTicker = startLoading();
-
-          // Always inform about limitations first
-          showWarning(
-            `This Space cannot directly download from Instagram. Due to CORS and Instagram's `+
-            `security/auth protections, client-side fetches will fail. `+
-            `For a production downloader, add a backend/proxy that fetches media server-side, `+
-            `then returns a direct URL/blob to the browser. <br/><br/>`+
-            `Suggested approach: build a tiny proxy API (Cloudflare Worker, Vercel/Netlify `+
-            `serverless, or Spaces CPU/GPU with FastAPI/Node) that accepts an Instagram URL, `+
-            `retrieves the media using authenticated or headless scraping as needed, and sends `+
-            `back a downloadable link with proper CORS headers. <br/><br/>`+
-            `See example backend-proxy patterns: <a href="${BACKEND_DOC_URL}" target="_blank" rel="noopener">Backend proxy examples</a>.`
-          );
-
-          // Try legacy fallback (noembed) only to provide a preview when it works.
-          // This may fail frequently; we catch and show a friendly message.
-          let resolved;
-          try { resolved = await tryLegacyNoEmbed(url); } catch (err) {
-            throw new Error('Failed to fetch media client-side. Use a backend/proxy API.');
+          downloadBtn.disabled = true; 
+          startLoading();
+          
+          setStatus('info','Sending request to backend...');
+          bar.style.width = '30%';
+          
+          // POST to Gradio API endpoint
+          const response = await fetch(API_ENDPOINT, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              data: [url]
+            })
+          });
+          
+          if (!response.ok) {
+            throw new Error(`Server error: ${response.status}`);
           }
-
-          stopTicker(); bar.style.width = '92%';
-          showPreview(resolved);
-
-          // Attempt to download; if CORS blocks, provide guidance instead of a hard failure.
-          try {
-            const head = await fetch(resolved.direct, { method: 'HEAD' });
-            const disp = head.headers.get('content-disposition');
-            let name = 'instagram-media';
-            if (disp) {
-              const m = /filename\*=UTF-8''([^;]+)|filename="?([^";]+)"?/i.exec(disp);
-              name = decodeURIComponent(m?.[1] || m?.[2] || name);
+          
+          bar.style.width = '60%';
+          setStatus('info','Receiving response...');
+          
+          const result = await response.json();
+          
+          bar.style.width = '80%';
+          setStatus('info','Processing download...');
+          
+          // Gradio returns data in result.data array
+          // data[0] is the file path/blob, data[1] is the status message
+          if (result.data && result.data[0]) {
+            const fileData = result.data[0];
+            const statusMessage = result.data[1] || '';
+            
+            // If we have a file URL or blob
+            if (fileData && fileData.name) {
+              // Create download link
+              const fileUrl = fileData.url || `/file=${fileData.path}`;
+              const fileName = fileData.orig_name || fileData.name || 'instagram-media';
+              
+              // Fetch the file and trigger download
+              const fileResponse = await fetch(fileUrl);
+              const blob = await fileResponse.blob();
+              
+              const a = document.createElement('a');
+              a.href = URL.createObjectURL(blob);
+              a.download = fileName;
+              document.body.appendChild(a);
+              a.click();
+              a.remove();
+              
+              setTimeout(() => URL.revokeObjectURL(a.href), 100);
+              
+              bar.style.width = '100%';
+              setStatus('success', statusMessage || '✅ Download complete!');
+            } else {
+              throw new Error(statusMessage || 'No file returned from backend');
             }
-            const res = await fetch(resolved.direct);
-            if (!res.ok) throw new Error('Download blocked');
-            const blob = await res.blob();
-            const a = document.createElement('a');
-            a.href = URL.createObjectURL(blob); a.download = name; document.body.appendChild(a); a.click(); a.remove();
-            await sleep(200); URL.revokeObjectURL(a.href);
-            bar.style.width = '100%'; setStatus('success','Download complete.');
-          } catch {
-            setStatus('error','Browser blocked direct download due to CORS. Use a backend/proxy.');
+          } else {
+            // Check if there's an error message
+            const errorMsg = result.data && result.data[1] ? result.data[1] : 'Failed to download media';
+            throw new Error(errorMsg);
           }
         } catch (err){
-          stopTicker && stopTicker();
+          bar.style.width = '0%';
           setStatus('error', err.message || 'Something went wrong');
           showWarning(
-            `We cannot fetch private posts or any media directly from Instagram in the browser. `+
-            `Please add a backend or proxy API to handle fetching with proper headers and cookies. `+
-            `Example patterns: <a href="${BACKEND_DOC_URL}" target="_blank" rel="noopener">backend proxy</a>.`
+            `❌ Error: ${err.message}. Make sure the Instagram URL is valid and the post is public.`
           );
         } finally {
           downloadBtn.disabled = false;