Upload folder using huggingface_hub

index.html

@@ -326,6 +326,20 @@
       color: var(--error);
     }
 
+    .error-message {
+      background: rgba(248, 113, 113, 0.1);
+      border: 1px solid rgba(248, 113, 113, 0.3);
+      border-radius: 10px;
+      padding: 1rem;
+      margin-top: 1rem;
+      color: var(--error);
+      display: none;
+    }
+
+    .error-message.show {
+      display: block;
+    }
+
     @keyframes fadeInDown {
       from {
         opacity: 0;
@@ -422,6 +436,16 @@
       color: var(--text-secondary);
     }
 
+    .cors-notice {
+      background: rgba(251, 191, 36, 0.1);
+      border: 1px solid rgba(251, 191, 36, 0.3);
+      border-radius: 10px;
+      padding: 1rem;
+      margin-bottom: 1.5rem;
+      font-size: 0.9rem;
+      color: var(--warning);
+    }
+
     @media (max-width: 768px) {
       .container {
         padding: 1rem;
@@ -462,8 +486,14 @@
     </header>
 
     <main class="main-card">
+      <div class="cors-notice">
+        ⚠️ <strong>CORS Notice:</strong> Due to browser security restrictions, direct API calls may be blocked. The app will
+        automatically use fallback URLs when CORS errors occur.
+      </div>
+
       <div class="info-box">
-        📌 <strong>Processing Logic:</strong> Extracts modal_id, generates API hash, sorts by size (largest first), and returns the V3 download link. Falls back to snapdouyin.app if CORS error occurs.
+        📌 <strong>Processing Logic:</strong> Extracts modal_id, generates API hash, sorts by size (largest first), and
+        returns the V3 download link. Falls back to snapdouyin.app if CORS error occurs.
       </div>
 
       <section class="input-section">
@@ -481,9 +511,11 @@
 
       <div class="loading" id="loading">
         <div class="spinner"></div>
-        <p>🚀 Searching for highest bitrate (Default 106MB)...</p>
+        <p>🚀 Processing URLs...</p>
       </div>
 
+      <div class="error-message" id="errorMessage"></div>
+
       <section class="results-section" id="resultsSection">
         <div class="results-header">
           <h2 class="results-title">Download Links <span class="status-indicator success"></span></h2>
@@ -495,18 +527,18 @@
   </div>
 
   <script>
-    // Base64 encoding function (same as btoa in browser)
+    // Base64 encoding function
     function base64Encode(str) {
       return btoa(unescape(encodeURIComponent(str)));
     }
 
-    // URL encoding function (same as encodeURIComponent)
+    // URL encoding function
     function urlEncode(str) {
       return encodeURIComponent(str);
     }
 
     // Process a single URL following the exact JavaScript logic
-    function processSingleUrl(inputUrl) {
+    async function processSingleUrl(inputUrl) {
       try {
         console.log(`🔍 Processing: ${inputUrl}`);
         
@@ -526,27 +558,40 @@
         
         console.log(`🔐 Generated hash: ${hash.substring(0, 50)}...`);
         
-        // Step d: Simulate API call to snapdouyin.app endpoint
+        // Step d: Make real API call to snapdouyin.app endpoint
         const endpoint = 'https://snapdouyin.app/wp-json/mx-downloader/video-data/';
         const requestBody = `url=${urlEncode(targetUrl)}&hash=${hash}`;
         
-        console.log(`📡 Simulating POST to: ${endpoint}`);
+        console.log(`📡 Making POST to: ${endpoint}`);
         console.log(`📦 Body: ${requestBody.substring(0, 100)}...`);
         
-        // Simulate API response with realistic V3 download links
-        const mockResponse = simulateApiResponse(targetUrl);
+        // Make the actual fetch request
+        const response = await fetch(endpoint, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+          },
+          body: requestBody
+        });
+        
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        
+        const data = await response.json();
+        console.log(`✅ API Response received:`, data);
         
         // Step e: Check if medias array exists
-        if (mockResponse.medias && mockResponse.medias.length > 0) {
-          console.log(`✅ Found ${mockResponse.medias.length} media options`);
+        if (data.medias && data.medias.length > 0) {
+          console.log(`✅ Found ${data.medias.length} media options`);
           
           // Step f: Sort medias by size in descending order (largest first)
-          const sortedMedias = mockResponse.medias.sort((a, b) => (b.size || 0) - (a.size || 0));
+          const sortedMedias = data.medias.sort((a, b) => (b.size || 0) - (a.size || 0));
           
           // Step f: Get the first (largest) media
           const absoluteBest = sortedMedias[0];
           
-          console.log(`🏆 Best media: ${absoluteBest.formattedSize} (${absoluteBest.size} bytes)`);
+          console.log(`🏆 Best media: ${absoluteBest.formattedSize || (absoluteBest.size + ' bytes')}`);
           
           // Step g: Extract the download URL (V3 link)
           const downloadUrl = absoluteBest.url;
@@ -557,8 +602,8 @@
           return {
             url: downloadUrl,
             size: absoluteBest.size,
-            formattedSize: absoluteBest.formattedSize,
-            quality: absoluteBest.quality,
+            formattedSize: absoluteBest.formattedSize || (absoluteBest.size ? `${(absoluteBest.size / 1000000).toFixed(1)} MB` : 'Unknown'),
+            quality: absoluteBest.quality || 'Unknown',
             isV3: true
           };
         } else {
@@ -583,79 +628,54 @@
         
         return {
           url: fallbackUrl,
-          isFallback: true
+          isFallback: true,
+          error: error.message
         };
       }
     }
 
-    // Simulate API response with realistic V3 download links
-    function simulateApiResponse(targetUrl) {
-      // Generate a unique video ID from the target URL
-      const videoId = targetUrl.split('/').pop().split('?')[0] || Date.now();
-      
-      // Create realistic media options with different sizes
-      const medias = [
-        {
-          url: `https://v3-dy-o.zjcdn.com/${videoId}_1080p.mp4?expires=${Date.now() + 3600000}&sign=mock_signature`,
-          size: 106000000, // 106MB - highest quality
-          formattedSize: "106.0 MB",
-          quality: "1080p",
-          type: "video/mp4"
-        },
-        {
-          url: `https://v3-dy-o.zjcdn.com/${videoId}_720p.mp4?expires=${Date.now() + 3600000}&sign=mock_signature`,
-          size: 56000000, // 56MB
-          formattedSize: "56.0 MB",
-          quality: "720p",
-          type: "video/mp4"
-        },
-        {
-          url: `https://v3-dy-o.zjcdn.com/${videoId}_480p.mp4?expires=${Date.now() + 3600000}&sign=mock_signature`,
-          size: 28000000, // 28MB
-          formattedSize: "28.0 MB",
-          quality: "480p",
-          type: "video/mp4"
-        }
-      ];
-      
-      return {
-        success: true,
-        medias: medias,
-        title: `Douyin Video ${videoId}`,
-        thumbnail: `https://p3.douyinpic.com/img/${videoId}~c5_100x100.jpeg`
-      };
-    }
-
     // Process all URLs
-    function processUrls() {
+    async function processUrls() {
       const input = document.getElementById('urlInput').value.trim();
       if (!input) {
-        alert('Please enter at least one Douyin URL');
+        showError('Please enter at least one Douyin URL');
         return;
       }
 
       const urls = input.split('\n').filter(url => url.trim());
       if (urls.length === 0) {
-        alert('Please enter valid URLs');
+        showError('Please enter valid URLs');
         return;
       }
 
+      // Hide error message
+      hideError();
+
       // Show loading
       document.getElementById('loading').classList.add('show');
       document.getElementById('resultsSection').classList.remove('show');
 
-      // Simulate processing delay
-      setTimeout(() => {
-        const results = [];
-        urls.forEach(url => {
-          const result = processSingleUrl(url.trim());
+      const results = [];
+      
+      // Process URLs sequentially
+      for (let i = 0; i < urls.length; i++) {
+        const url = urls[i].trim();
+        try {
+          const result = await processSingleUrl(url);
           results.push(result);
-        });
+        } catch (error) {
+          console.error(`Failed to process URL ${i + 1}:`, error);
+          results.push({
+            url: `https://snapdouyin.app/#url=${urlEncode(url)}`,
+            isFallback: true,
+            error: error.message
+          });
+        }
+      }
 
-        // Hide loading and show results
-        document.getElementById('loading').classList.remove('show');
-        displayResults(results);
-      }, 1500);
+      // Hide loading and show results
+      document.getElementById('loading').classList.remove('show');
+      displayResults(results);
     }
 
     // Display results with enhanced UI
@@ -685,7 +705,7 @@
         li.innerHTML = `
           <div class="${urlContentClass}">${result.url}</div>
           ${qualityBadge}
-          <button class="copy-btn" onclick="copyUrl('${result.url}', this)">Copy</button>
+          <button class="copy-btn" onclick="copyUrl('${result.url.replace(/'/g, "\\'")}', this)">Copy</button>
           <span class="status-indicator ${isFallback ? 'fallback' : 'success'}"></span>
         `;
         
@@ -704,6 +724,8 @@
           button.textContent = 'Copy';
           button.classList.remove('copied');
         }, 2000);
+      }).catch(err => {
+        console.error('Failed to copy:', err);
       });
     }
 
@@ -721,6 +743,8 @@
           button.textContent = originalText;
           button.style.background = '';
         }, 2000);
+      }).catch(err => {
+        console.error('Failed to copy all:', err);
       });
     }
 
@@ -728,6 +752,7 @@
     function clearInput() {
       document.getElementById('urlInput').value = '';
       document.getElementById('resultsSection').classList.remove('show');
+      hideError();
     }
 
     // Load sample URLs
@@ -738,6 +763,19 @@ https://www.douyin.com/user/987654321?modal_id=7123456789012345678`;
       document.getElementById('urlInput').value = sampleUrls;
     }
 
+    // Show error message
+    function showError(message) {
+      const errorElement = document.getElementById('errorMessage');
+      errorElement.textContent = message;
+      errorElement.classList.add('show');
+    }
+
+    // Hide error message
+    function hideError() {
+      const errorElement = document.getElementById('errorMessage');
+      errorElement.classList.remove('show');
+    }
+
     // Add enter key support for processing
     document.getElementById('urlInput').addEventListener('keydown', function(e) {
       if (e.ctrlKey && e.key === 'Enter') {
@@ -747,7 +785,7 @@ https://www.douyin.com/user/987654321?modal_id=7123456789012345678`;
 
     // Console log for debugging
     console.log('🚀 Douyin Video Download Link Processor Ready');
-    console.log('📝 Processing logic initialized following the bookmarklet algorithm');
+    console.log('📝 Processing logic initialized - Making real API calls to snapdouyin.app');
   </script>
 </body>