Update public/index.html

public/index.html

@@ -65,9 +65,9 @@
     .input-table input { border: none; border-radius: 0; margin: 0; background: transparent; width: 100%; height: 100%; padding: 10px; }
     .del-btn { background: white; color: #ef4444; font-weight: 900; padding: 5px 10px; width: auto; margin: 0; font-size: 16px; }
 
-    #crop-interface { display: none; height: 100%; flex-direction: column; }
+    #crop-interface, #si-crop-interface { display: none; height: 100%; flex-direction: column; }
     .crop-container { flex: 1; background: #000; border-radius: 8px; overflow: hidden; position: relative; min-height: 300px; }
-    #image-to-crop { display: block; max-width: 100%; max-height: 500px; margin: 0 auto; }
+    #image-to-crop, #si-image-to-crop { display: block; max-width: 100%; max-height: 500px; margin: 0 auto; }
     
     .progress-box { display:none; margin-top:20px; border-top:1px solid #eee; padding-top:20px; text-align: center; }
     .dl-link { color: var(--success); text-decoration: none; font-weight: bold; }
@@ -87,33 +87,48 @@
     <div class="tab" onclick="switchTab('instagram-dl')">Instagram Download</div>
   </div>
 
-  <!-- 1. SINGLE INSTAGRAM TAB -->
+  <!-- 1. SINGLE INSTAGRAM TAB (Updated with Crop Workflow) -->
   <div id="single-insta" class="tab-content active">
-    <div style="max-width: 600px; margin: 0 auto;">
+    <!-- Step 1: Input -->
+    <div id="si-input-view" style="max-width: 600px; margin: 0 auto;">
         <h3>Single Instagram Post</h3>
         <label>Instagram URL</label>
         <input type="text" id="si-url" placeholder="https://instagram.com/p/..." />
-        
-        <label>Caption</label>
-        <input type="text" id="si-caption" placeholder="Enter caption..." />
-        
-        <label>Brand Name</label>
-        <input type="text" id="si-brand" placeholder="ArchiveAds" />
-        
-        <label>Visual Style</label>
-        <select id="si-template">
-            <option value="archive_ads">Archive Ads (Red)</option>
-            <option value="timeless_gallery">Timeless (Blue)</option>
-            <option value="timeless_gallery_dark">Timeless Dark (Gold)</option>
-        </select>
+        <button id="btn-si-fetch" onclick="fetchSingleInsta()">Fetch Video</button>
+    </div>
 
-        <button id="btn-si" onclick="processSingleVideo('si')">Generate Video</button>
-        
-        <div id="si-progress" class="progress-box">
-           <div style="font-weight:bold; margin-bottom:10px;" id="si-status-text">Processing...</div>
-           <div id="si-download-area"></div>
+    <!-- Step 2: Crop & Edit -->
+    <div id="si-crop-interface" style="display:none;">
+        <div class="crop-container">
+            <img id="si-image-to-crop" src="" alt="Video Frame">
+        </div>
+        <div style="margin-top: 20px; border-top: 1px solid #e5e7eb; padding-top: 20px;">
+            <label>Visual Style</label>
+            <select id="si-template">
+                <option value="archive_ads">Archive Ads (Red)</option>
+                <option value="timeless_gallery">Timeless (Blue)</option>
+                <option value="timeless_gallery_dark">Timeless Dark (Gold)</option>
+            </select>
+            <div style="display:flex; gap:10px;">
+                <div style="flex:2">
+                    <label>Caption</label>
+                    <input type="text" id="si-caption" placeholder="Enter caption..." />
+                </div>
+                <div style="flex:1">
+                    <label>Brand Name</label>
+                    <input type="text" id="si-brand" placeholder="ArchiveAds" />
+                </div>
+            </div>
+            <button id="btn-si-render" onclick="renderSingleInsta()">Generate Video</button>
         </div>
     </div>
+
+    <!-- Step 3: Progress/Download -->
+    <div id="si-progress" class="progress-box">
+       <div style="font-weight:bold; margin-bottom:10px;" id="si-status-text">Processing...</div>
+       <div id="si-download-area"></div>
+       <button id="btn-si-reset" style="margin-top:15px; background:#64748b; display:none;" onclick="resetSingleInsta()">Create Another</button>
+    </div>
   </div>
 
   <!-- 2. BATCH INSTAGRAM TAB -->
@@ -281,39 +296,76 @@
       }).catch(() => window.open(url));
   }
 
-  // --- SINGLE INSTAGRAM LOGIC ---
-  async function processSingleVideo(prefix) {
-      const url = document.getElementById(`${prefix}-url`).value.trim();
+  // --- 1. SINGLE INSTAGRAM LOGIC (Fetch -> Crop -> Render) ---
+  async function fetchSingleInsta() {
+      const url = document.getElementById('si-url').value.trim();
       if(!url) return alert("Enter URL");
       
-      const caption = document.getElementById(`${prefix}-caption`).value;
-      const brand = document.getElementById(`${prefix}-brand`).value;
-      const templateId = document.getElementById(`${prefix}-template`).value;
-      
-      const btn = document.getElementById(`btn-${prefix}`);
-      const prog = document.getElementById(`${prefix}-progress`);
-      const status = document.getElementById(`${prefix}-status-text`);
-      const area = document.getElementById(`${prefix}-download-area`);
+      const btn = document.getElementById('btn-si-fetch');
+      btn.disabled = true; btn.textContent = "Fetching...";
       
-      btn.disabled = true; btn.textContent = "Processing...";
-      prog.style.display = 'block';
-      status.textContent = "Starting Job...";
-      area.innerHTML = "";
+      try {
+          // Reuse the analyze-clone route which fetches and gets a frame
+          const res = await fetch('/analyze-clone', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ url })
+          });
+          const data = await res.json();
+          
+          if(data.success) {
+              document.getElementById('si-input-view').style.display = 'none';
+              document.getElementById('si-crop-interface').style.display = 'block';
+              
+              const img = document.getElementById('si-image-to-crop');
+              img.src = data.frameUrl;
+              
+              if(cropper) cropper.destroy();
+              cropper = new Cropper(img, {
+                  viewMode: 1, dragMode: 'move', autoCropArea: 0.8, restore: false, guides: true, center: true, highlight: false, cropBoxMovable: true, cropBoxResizable: true, toggleDragModeOnDblclick: false,
+              });
+          } else {
+              alert("Error: " + data.error);
+              btn.disabled = false; btn.textContent = "Fetch Video";
+          }
+      } catch(e) { alert("Error fetching video"); btn.disabled = false; btn.textContent = "Fetch Video"; }
+  }
 
+  async function renderSingleInsta() {
+      if(!cropper) return;
+      const url = document.getElementById('si-url').value.trim();
+      const caption = document.getElementById('si-caption').value;
+      const brand = document.getElementById('si-brand').value;
+      const templateId = document.getElementById('si-template').value;
+      
+      const cropData = cropper.getData(true);
+      const cropString = `${Math.floor(cropData.width)}:${Math.floor(cropData.height)}:${Math.floor(cropData.x)}:${Math.floor(cropData.y)}`;
+      
+      document.getElementById('si-crop-interface').style.display = 'none';
+      document.getElementById('si-progress').style.display = 'block';
+      
       try {
           const res = await fetch('/start', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ url, caption, brandName: brand, templateId })
+            body: JSON.stringify({ url, caption, brandName: brand, templateId, cropData: cropString })
           });
           const data = await res.json();
           if (data.success) {
-             pollSingleJob(data.jobId, prefix);
+             pollSingleJob(data.jobId, 'si');
           } else {
-             status.textContent = "Error: " + data.error;
-             btn.disabled = false;
+             document.getElementById('si-status-text').textContent = "Error: " + data.error;
           }
-      } catch(e) { status.textContent = "Connection Error"; btn.disabled = false; }
+      } catch(e) { document.getElementById('si-status-text').textContent = "Connection Error"; }
+  }
+
+  function resetSingleInsta() {
+      document.getElementById('si-progress').style.display = 'none';
+      document.getElementById('si-input-view').style.display = 'block';
+      document.getElementById('si-url').value = "";
+      document.getElementById('btn-si-fetch').disabled = false;
+      document.getElementById('btn-si-fetch').textContent = "Fetch Video";
+      if(cropper) { cropper.destroy(); cropper = null; }
   }
 
   // --- SINGLE YOUTUBE LOGIC (Check Formats First) ---
@@ -374,7 +426,7 @@
   function pollSingleJob(jobId, prefix) {
       const status = document.getElementById(`${prefix}-status-text`);
       const area = document.getElementById(`${prefix}-download-area`);
-      const btn = document.getElementById(`btn-${prefix}`);
+      const btnReset = document.getElementById(`btn-${prefix}-reset`); // Optional reset btn
       
       const poll = setInterval(async () => {
           const res = await fetch(`/status/${jobId}`);
@@ -388,13 +440,12 @@
                   const fname = job.fileUrl.split('/').pop();
                   area.innerHTML = `<button onclick="forceDownload('${job.fileUrl}', '${fname}')" style="background:none;border:none;color:#10b981;font-weight:bold;cursor:pointer;font-size:16px;">Download Video</button>`;
                   playDing();
-                  btn.disabled = false;
-                  btn.textContent = prefix === 'sy' ? "Check Formats" : "Generate Video";
+                  if(btnReset) btnReset.style.display = "inline-block";
               }
               if (job.status === 'error') {
                   clearInterval(poll);
                   status.innerHTML = `<span style="color:red">Error: ${job.error}</span>`;
-                  btn.disabled = false;
+                  if(btnReset) btnReset.style.display = "inline-block";
               }
           }
       }, 2000);