Spaces:

devusman
/

fb-dl

Sleeping

App Files Files Community

devusman commited on Nov 8, 2025

Commit

a2e646a

1 Parent(s): a1a36a1

update

Browse files

Files changed (4) hide show

Dockerfile +12 -17
app.py +4 -3
templates/index.html +271 -0
test.html +322 -0

Dockerfile CHANGED Viewed

@@ -1,30 +1,25 @@
-# Use an official Python runtime as a parent image
-FROM python:3.9-slim
-# Install ffmpeg and other system dependencies
-RUN apt-get update && apt-get install -y --no-install-recommends \
     ffmpeg \
     && rm -rf /var/lib/apt/lists/*
-# Set the working directory in the container
 WORKDIR /app
-# Copy the dependencies file to the working directory
 COPY requirements.txt .
-# Install any needed packages specified in requirements.txt
 RUN pip install --no-cache-dir -r requirements.txt
-# Copy the rest of the application code to the working directory
 COPY . .
-# Make port 7860 available to the world outside this container
-# Hugging Face Spaces use 7860 by default
-EXPOSE 7860
-# Define environment variables
-ENV FLASK_APP=app.py
-# Run the app using gunicorn for production
-# Use 0.0.0.0 to make it accessible from outside the container
-CMD ["gunicorn", "--bind", "0.0.0.0:7860", "--workers", "1", "--threads", "4", "app:app"]

+# Use lightweight Python image
+FROM python:3.11-slim
+# Install ffmpeg (needed by yt-dlp)
+RUN apt-get update && apt-get install -y \
     ffmpeg \
     && rm -rf /var/lib/apt/lists/*
+# Set working directory
 WORKDIR /app
+# Copy requirements first
 COPY requirements.txt .
+# Install dependencies
 RUN pip install --no-cache-dir -r requirements.txt
+# Copy project files
 COPY . .
+# Expose port for Render
+EXPOSE 8080
+# Start Flask app directly
+CMD ["python", "app.py"]

app.py CHANGED Viewed

@@ -25,9 +25,9 @@ def sanitize_facebook_url(url):
         print(f"Could not sanitize URL, using original. Error: {e}", flush=True)
     return url
-@app.route('/')
 def index():
-    """Serves the main HTML page."""
     return render_template('index.html')
 @app.route('/download', methods=['POST'])
@@ -127,5 +127,6 @@ def download():
             return jsonify({'error': 'This content is private or requires login. Please check `cookies.txt`.'}), 403
         return jsonify({'error': 'An unknown error occurred. The link may be invalid or private.'}), 500
 if __name__ == '__main__':
-    app.run(debug=True, host='0.0.0.0', port=7860)

         print(f"Could not sanitize URL, using original. Error: {e}", flush=True)
     return url
+@app.route('/', methods=['GET'])
 def index():
+    """Renders the main page."""
     return render_template('index.html')
 @app.route('/download', methods=['POST'])
             return jsonify({'error': 'This content is private or requires login. Please check `cookies.txt`.'}), 403
         return jsonify({'error': 'An unknown error occurred. The link may be invalid or private.'}), 500
+# For local testing
 if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=8080, debug=True)

templates/index.html CHANGED Viewed

@@ -194,6 +194,78 @@
       #pause-btn.paused:hover {
         background-color: #218838;
       }
     </style>
   </head>
   <body>
@@ -207,6 +279,9 @@
         <button class="tab-button" onclick="openTab(event, 'audio')">
           Audio
         </button>
       </div>
       <div id="video" class="tab-content active">
@@ -250,6 +325,30 @@
         </p>
       </div>
       <div id="status-container">
         <div id="spinner" class="spinner"></div>
         <div id="progress-container">
@@ -274,6 +373,8 @@
       let currentReceived = 0;
       let currentTotal = 0;
       let currentResponse = null;
       function openTab(evt, tabName) {
         document
@@ -284,6 +385,9 @@
           .forEach((tb) => tb.classList.remove("active"));
         document.getElementById(tabName).classList.add("active");
         evt.currentTarget.classList.add("active");
       }
       async function handleSubmit(e) {
@@ -365,6 +469,170 @@
         }
       }
       async function readChunk() {
         if (!currentReader || !isDownloading) return;
@@ -495,6 +763,9 @@
       document
         .getElementById("audioForm")
         .addEventListener("submit", handleSubmit);
     </script>
   </body>
 </html>

       #pause-btn.paused:hover {
         background-color: #218838;
       }
+      #stories-results {
+        display: none;
+        margin-top: 1.5rem;
+      }
+      .story {
+        margin-bottom: 1.5rem;
+        border: 1px solid var(--border-color);
+        padding: 1rem;
+        border-radius: 8px;
+        background: #fafbfc;
+      }
+      .story h3 {
+        margin: 0 0 0.5rem 0;
+        color: var(--primary-color);
+        font-size: 1.1rem;
+      }
+      .preview-container {
+        text-align: center;
+        margin-bottom: 1rem;
+      }
+      .preview-container video,
+      .preview-container img,
+      .preview-container audio {
+        width: 150px;
+        height: 150px;
+        object-fit: cover;
+        border-radius: 6px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        display: block;
+        margin: 0 auto;
+      }
+      .preview-container audio {
+        height: auto;
+        width: 150px;
+      }
+      .story ul {
+        list-style: none;
+        padding: 0;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+      }
+      .story li {
+        flex: 1;
+        min-width: 120px;
+      }
+      .story a {
+        display: block;
+        padding: 0.5rem;
+        background: var(--primary-color);
+        color: white;
+        text-decoration: none;
+        border-radius: 4px;
+        text-align: center;
+        font-size: 0.9rem;
+        transition: background-color 0.2s;
+      }
+      .story a:hover {
+        background-color: var(--primary-hover);
+      }
+      #back-to-form {
+        background-color: var(--subtle-text);
+        margin-top: 1rem;
+      }
+      #back-to-form:hover {
+        background-color: #525b69;
+      }
+      #stories-loader {
+        display: none;
+        text-align: center;
+        margin: 1rem 0;
+      }
     </style>
   </head>
   <body>
         <button class="tab-button" onclick="openTab(event, 'audio')">
           Audio
         </button>
+        <button class="tab-button" onclick="openTab(event, 'stories')">
+          Stories
+        </button>
       </div>
       <div id="video" class="tab-content active">
         </p>
       </div>
+      <div id="stories" class="tab-content">
+        <form id="storiesForm">
+          <input
+            type="text"
+            name="url"
+            placeholder="Enter Facebook Stories URL"
+            required
+          />
+          <button type="submit">Fetch Stories</button>
+        </form>
+        <div id="stories-loader" class="spinner"></div>
+        <p class="note">
+          Fetch and download Facebook stories. Previews and multiple format
+          options will be displayed.
+        </p>
+        <div id="stories-results">
+          <h2 style="text-align: center; margin-bottom: 1rem">Stories</h2>
+          <div id="stories-container"></div>
+          <button id="back-to-form" onclick="backToStoriesForm()">
+            Back to Form
+          </button>
+        </div>
+      </div>
       <div id="status-container">
         <div id="spinner" class="spinner"></div>
         <div id="progress-container">
       let currentReceived = 0;
       let currentTotal = 0;
       let currentResponse = null;
+      const proxy = "https://corsproxy.io/?";
+      const targetUrl = "https://getvidfb.com/";
       function openTab(evt, tabName) {
         document
           .forEach((tb) => tb.classList.remove("active"));
         document.getElementById(tabName).classList.add("active");
         evt.currentTarget.classList.add("active");
+        if (tabName === "stories") {
+          document.getElementById("stories-results").style.display = "none";
+        }
       }
       async function handleSubmit(e) {
         }
       }
+      async function handleStoriesSubmit(e) {
+        e.preventDefault();
+        const form = e.target;
+        const urlInput = form.querySelector('input[name="url"]');
+        const fbUrl = urlInput.value;
+        const loader = document.getElementById("stories-loader");
+        const results = document.getElementById("stories-results");
+        const container = document.getElementById("stories-container");
+        const status = document.getElementById("status");
+        if (!fbUrl) return;
+        form.querySelector('button[type="submit"]').disabled = true;
+        loader.style.display = "block";
+        status.textContent = "Fetching stories...";
+        status.classList.remove("error");
+        results.style.display = "none";
+        container.innerHTML = "";
+        try {
+          const proxiedUrl = proxy + encodeURIComponent(targetUrl);
+          const formData = new URLSearchParams();
+          formData.append("url", fbUrl);
+          formData.append("lang", "en");
+          formData.append("type", "redirect");
+          const response = await fetch(proxiedUrl, {
+            method: "POST",
+            headers: { "Content-Type": "application/x-www-form-urlencoded" },
+            body: formData,
+          });
+          if (!response.ok) throw new Error("Failed to fetch stories");
+          const html = await response.text();
+          const parser = new DOMParser();
+          const doc = parser.parseFromString(html, "text/html");
+          const storyBlocks = doc.querySelectorAll(".snaptikvid");
+          if (storyBlocks.length === 0) {
+            // Fallback for single content
+            const links = doc.querySelectorAll("#snaptik-video a.abutton");
+            const storyDiv = document.createElement("div");
+            storyDiv.className = "story";
+            storyDiv.innerHTML = "<h3>Story #0</h3>";
+            const previewContainer = document.createElement("div");
+            previewContainer.className = "preview-container";
+            let previewAdded = false;
+            const ul = document.createElement("ul");
+            links.forEach((link) => {
+              const title =
+                link.querySelector("span")?.textContent.trim() || "Download";
+              const href = link.getAttribute("href");
+              const li = document.createElement("li");
+              let preview;
+              if (!previewAdded && title.includes("Video/Mp4")) {
+                preview = document.createElement("video");
+                preview.controls = true;
+                preview.src = href;
+                previewContainer.appendChild(preview);
+                previewAdded = true;
+              } else if (!previewAdded && title.includes("Photo/Jpg")) {
+                preview = document.createElement("img");
+                preview.src = href;
+                previewContainer.appendChild(preview);
+                previewAdded = true;
+              } else if (!previewAdded && title.includes("Audio/Mp3")) {
+                preview = document.createElement("audio");
+                preview.controls = true;
+                preview.src = href;
+                previewContainer.appendChild(preview);
+                previewAdded = true;
+              }
+              const a = document.createElement("a");
+              a.href = href;
+              a.textContent = title;
+              a.download = "";
+              li.appendChild(a);
+              ul.appendChild(li);
+            });
+            if (!previewAdded && links.length > 0) {
+              const firstHref = links[0].getAttribute("href");
+              if (firstHref) {
+                const preview = document.createElement("img");
+                preview.src = firstHref;
+                previewContainer.appendChild(preview);
+              }
+            }
+            storyDiv.appendChild(previewContainer);
+            storyDiv.appendChild(ul);
+            container.appendChild(storyDiv);
+          } else {
+            storyBlocks.forEach((storyBlock, index) => {
+              const storyDiv = document.createElement("div");
+              storyDiv.className = "story";
+              storyDiv.innerHTML = `<h3>Story #${index}</h3>`;
+              const previewContainer = document.createElement("div");
+              previewContainer.className = "preview-container";
+              const links = storyBlock.querySelectorAll("a.abutton");
+              let previewAdded = false;
+              const ul = document.createElement("ul");
+              links.forEach((link) => {
+                const title =
+                  link.querySelector("span")?.textContent.trim() || "Download";
+                const href = link.getAttribute("href");
+                const li = document.createElement("li");
+                let preview;
+                if (!previewAdded && title.includes("Video/Mp4")) {
+                  preview = document.createElement("video");
+                  preview.controls = true;
+                  preview.src = href;
+                  previewContainer.appendChild(preview);
+                  previewAdded = true;
+                } else if (!previewAdded && title.includes("Photo/Jpg")) {
+                  preview = document.createElement("img");
+                  preview.src = href;
+                  previewContainer.appendChild(preview);
+                  previewAdded = true;
+                } else if (!previewAdded && title.includes("Audio/Mp3")) {
+                  preview = document.createElement("audio");
+                  preview.controls = true;
+                  preview.src = href;
+                  previewContainer.appendChild(preview);
+                  previewAdded = true;
+                }
+                const a = document.createElement("a");
+                a.href = href;
+                a.textContent = title;
+                a.download = "";
+                li.appendChild(a);
+                ul.appendChild(li);
+              });
+              if (!previewAdded) {
+                const thumbImg = storyBlock.querySelector(".snaptik-left img");
+                if (thumbImg) {
+                  const preview = document.createElement("img");
+                  preview.src = thumbImg.src;
+                  previewContainer.appendChild(preview);
+                }
+              }
+              storyDiv.appendChild(previewContainer);
+              storyDiv.appendChild(ul);
+              container.appendChild(storyDiv);
+            });
+          }
+          results.style.display = "block";
+          status.textContent = "Stories fetched successfully!";
+          urlInput.value = "";
+        } catch (error) {
+          status.textContent = `Error: ${error.message}`;
+          status.classList.add("error");
+        } finally {
+          loader.style.display = "none";
+          form.querySelector('button[type="submit"]').disabled = false;
+        }
+      }
+      function backToStoriesForm() {
+        document.getElementById("stories-results").style.display = "none";
+        document.getElementById("storiesForm").reset();
+        document.getElementById("status").textContent = "";
+      }
       async function readChunk() {
         if (!currentReader || !isDownloading) return;
       document
         .getElementById("audioForm")
         .addEventListener("submit", handleSubmit);
+      document
+        .getElementById("storiesForm")
+        .addEventListener("submit", handleStoriesSubmit);
     </script>
   </body>
 </html>

test.html ADDED Viewed

	@@ -0,0 +1,322 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FB Video Downloader</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+    <style>
+        * {
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+            max-width: 700px;
+            margin: 0 auto;
+            padding: 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: #333;
+            min-height: 100vh;
+        }
+        h1 {
+            text-align: center;
+            color: white;
+            margin-bottom: 30px;
+            font-weight: 600;
+            font-size: 2.5em;
+            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        form {
+            display: flex;
+            margin-bottom: 30px;
+            background: white;
+            border-radius: 50px;
+            overflow: hidden;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+        }
+        input {
+            flex: 1;
+            padding: 15px 20px;
+            border: none;
+            font-size: 16px;
+            outline: none;
+        }
+        button {
+            padding: 15px 30px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            cursor: pointer;
+            font-weight: 600;
+            transition: transform 0.2s;
+        }
+        button:hover {
+            transform: translateY(-2px);
+        }
+        #results {
+            display: none;
+            background: white;
+            border-radius: 20px;
+            padding: 30px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+        }
+        #loader {
+            display: none;
+            text-align: center;
+            margin: 40px;
+            color: white;
+            font-size: 18px;
+        }
+        .story {
+            margin-bottom: 30px;
+            border: 1px solid #e0e0e0;
+            padding: 20px;
+            border-radius: 15px;
+            background: #fafafa;
+            transition: box-shadow 0.3s;
+        }
+        .story:hover {
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+        }
+        .story h3 {
+            margin: 0 0 15px 0;
+            color: #667eea;
+            font-size: 1.2em;
+            font-weight: 600;
+        }
+        .preview-container {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        video,
+        img,
+        audio {
+            width: 200px;
+            height: 200px;
+            object-fit: cover;
+            border-radius: 10px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            display: block;
+            margin: 0 auto;
+        }
+        audio {
+            height: auto;
+            width: 200px;
+        }
+        ul {
+            list-style: none;
+            padding: 0;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+        }
+        li {
+            flex: 1;
+            min-width: 150px;
+        }
+        a {
+            display: block;
+            padding: 12px;
+            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
+            color: white;
+            text-decoration: none;
+            border-radius: 8px;
+            text-align: center;
+            font-weight: 500;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+        a:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
+        }
+        #back {
+            background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
+            border: none;
+            padding: 12px 24px;
+            color: white;
+            border-radius: 8px;
+            cursor: pointer;
+            font-weight: 500;
+            transition: transform 0.2s;
+            margin-top: 20px;
+        }
+        #back:hover {
+            transform: translateY(-2px);
+        }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+</head>
+<body>
+    <h1>Facebook Video Downloader</h1>
+    <form id="form">
+        <input type="text" id="url" placeholder="Enter Facebook URL" required>
+        <button type="submit">Get Downloads</button>
+    </form>
+    <div id="loader">Loading...</div>
+    <div id="results">
+        <h2 style="text-align: center; color: #333; margin-bottom: 20px;">Download Links</h2>
+        <div id="stories-container"></div>
+        <button id="back">Back</button>
+    </div>
+    <script>
+        const form = document.getElementById('form');
+        const urlInput = document.getElementById('url');
+        const loader = document.getElementById('loader');
+        const results = document.getElementById('results');
+        const storiesContainer = document.getElementById('stories-container');
+        const back = document.getElementById('back');
+        const proxy = 'https://corsproxy.io/?';
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const fbUrl = urlInput.value;
+            loader.style.display = 'block';
+            try {
+                const targetUrl = 'https://getvidfb.com/';
+                const proxiedUrl = proxy + encodeURIComponent(targetUrl);
+                const response = await axios.post(proxiedUrl, {
+                    url: fbUrl,
+                    lang: 'en',
+                    type: 'redirect'
+                }, {
+                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
+                });
+                const parser = new DOMParser();
+                const doc = parser.parseFromString(response.data, 'text/html');
+                const storyBlocks = doc.querySelectorAll('.snaptikvid');
+                storiesContainer.innerHTML = '';
+                if (storyBlocks.length === 0) {
+                    const links = doc.querySelectorAll('#snaptik-video a.abutton');
+                    const storyDiv = document.createElement('div');
+                    storyDiv.className = 'story';
+                    storyDiv.innerHTML = '<h3>Story #0</h3>';
+                    const previewContainer = document.createElement('div');
+                    previewContainer.className = 'preview-container';
+                    let previewAdded = false;
+                    const ul = document.createElement('ul');
+                    links.forEach(link => {
+                        const title = link.querySelector('span').textContent.trim();
+                        const href = link.getAttribute('href');
+                        const li = document.createElement('li');
+                        let preview;
+                        if (!previewAdded && title.includes('Video/Mp4')) {
+                            preview = document.createElement('video');
+                            preview.controls = true;
+                            preview.src = href;
+                            previewContainer.appendChild(preview);
+                            previewAdded = true;
+                        } else if (!previewAdded && title.includes('Photo/Jpg')) {
+                            preview = document.createElement('img');
+                            preview.src = href;
+                            previewContainer.appendChild(preview);
+                            previewAdded = true;
+                        } else if (!previewAdded && title.includes('Audio/Mp3')) {
+                            preview = document.createElement('audio');
+                            preview.controls = true;
+                            preview.src = href;
+                            previewContainer.appendChild(preview);
+                            previewAdded = true;
+                        }
+                        const a = document.createElement('a');
+                        a.href = href;
+                        a.textContent = title;
+                        a.download = '';
+                        li.appendChild(a);
+                        ul.appendChild(li);
+                    });
+                    storyDiv.appendChild(previewContainer);
+                    storyDiv.appendChild(ul);
+                    storiesContainer.appendChild(storyDiv);
+                } else {
+                    storyBlocks.forEach((storyBlock, index) => {
+                        const storyDiv = document.createElement('div');
+                        storyDiv.className = 'story';
+                        storyDiv.innerHTML = `<h3>Story #${index}</h3>`;
+                        const previewContainer = document.createElement('div');
+                        previewContainer.className = 'preview-container';
+                        const links = storyBlock.querySelectorAll('a.abutton');
+                        let previewAdded = false;
+                        const ul = document.createElement('ul');
+                        links.forEach(link => {
+                            const title = link.querySelector('span').textContent.trim();
+                            const href = link.getAttribute('href');
+                            const li = document.createElement('li');
+                            let preview;
+                            if (!previewAdded && title.includes('Video/Mp4')) {
+                                preview = document.createElement('video');
+                                preview.controls = true;
+                                preview.src = href;
+                                previewContainer.appendChild(preview);
+                                previewAdded = true;
+                            } else if (!previewAdded && title.includes('Photo/Jpg')) {
+                                preview = document.createElement('img');
+                                preview.src = href;
+                                previewContainer.appendChild(preview);
+                                previewAdded = true;
+                            } else if (!previewAdded && title.includes('Audio/Mp3')) {
+                                preview = document.createElement('audio');
+                                preview.controls = true;
+                                preview.src = href;
+                                previewContainer.appendChild(preview);
+                                previewAdded = true;
+                            }
+                            const a = document.createElement('a');
+                            a.href = href;
+                            a.textContent = title;
+                            a.download = '';
+                            li.appendChild(a);
+                            ul.appendChild(li);
+                        });
+                        if (!previewAdded) {
+                            const thumbImg = storyBlock.querySelector('.snaptik-left img');
+                            if (thumbImg) {
+                                const preview = document.createElement('img');
+                                preview.src = thumbImg.src;
+                                previewContainer.appendChild(preview);
+                            }
+                        }
+                        storyDiv.appendChild(previewContainer);
+                        storyDiv.appendChild(ul);
+                        storiesContainer.appendChild(storyDiv);
+                    });
+                }
+                form.style.display = 'none';
+                results.style.display = 'block';
+            } catch (error) {
+                alert('Error fetching links: ' + error.message);
+            }
+            loader.style.display = 'none';
+        });
+        back.addEventListener('click', () => {
+            form.style.display = 'flex';
+            results.style.display = 'none';
+            urlInput.value = '';
+        });
+    </script>
+</body>
+</html>