feat: deployment

Dockerfile

@@ -0,0 +1,29 @@
+# read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
+# you will also find guides on how best to write your Dockerfile
+
+FROM python:3.9
+
+# The two following lines are requirements for the Dev Mode to be functional
+# Learn more about the Dev Mode at https://huggingface.co/dev-mode-explorers
+RUN useradd -m -u 1000 user
+WORKDIR /app
+
+# Copy and install requirements
+COPY --chown=user ./requirements.txt requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+# Copy the application files
+COPY --chown=user . /app
+
+# Switch to the non-root user
+USER user
+
+# Set environment variables for the user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+# Expose the port Hugging Face Spaces expects
+EXPOSE 7860
+
+# Run the app with Gunicorn for production
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "app:app"]

app.py

@@ -0,0 +1,140 @@
+from flask import Flask, render_template, request, send_file, jsonify, after_this_request
+import yt_dlp
+import io
+import tempfile
+import os
+import threading
+import uuid
+import glob
+import shutil
+
+app = Flask(__name__)
+
+tasks = {}
+
+def progress_update(d, task_id):
+    if d['status'] == 'downloading':
+        total_bytes = d.get('total_bytes') or d.get('total_bytes_estimate')
+        if total_bytes:
+            percent = (d['downloaded_bytes'] / total_bytes) * 100
+            tasks[task_id]['progress'] = min(100, percent)
+    elif d['status'] == 'finished':
+        tasks[task_id]['progress'] = 100
+
+@app.route('/')
+def index():
+    """Renders the main page."""
+    return render_template('index.html')
+
+@app.route('/download', methods=['POST'])
+def download():
+    """Handles the video download request."""
+    video_url = request.form.get('url')
+
+    if not video_url:
+        return jsonify({'error': 'Please provide a video URL.'}), 400
+
+    task_id = str(uuid.uuid4())
+
+    try:
+        # Get info first
+        ydl_opts_info = {
+            'noplaylist': True,
+        }
+        with yt_dlp.YoutubeDL(ydl_opts_info) as ydl:
+            info_dict = ydl.extract_info(video_url, download=False)
+            video_title = info_dict.get('title', 'video')
+            video_ext = info_dict.get('ext', 'mp4')
+            filename = f"{video_title}.{video_ext}"
+
+        tasks[task_id] = {
+            'progress': 0,
+            'done': False,
+            'error': None,
+            'filepath': None,
+            'filename': filename,
+            'tmpdir': None
+        }
+
+        def download_in_thread():
+            try:
+                tmpdir = tempfile.mkdtemp()
+                tasks[task_id]['tmpdir'] = tmpdir
+                ydl_opts = {
+                    'format': 'best',
+                    'outtmpl': os.path.join(tmpdir, '%(title)s.%(ext)s'),
+                    'noplaylist': True,
+                    'progress_hooks': [lambda d: progress_update(d, task_id)]
+                }
+                with yt_dlp.YoutubeDL(ydl_opts) as ydl_download:
+                    ydl_download.download([video_url])
+
+                # Find the downloaded file
+                files = glob.glob(os.path.join(tmpdir, '*'))
+                if files:
+                    # Assume the first (or only) file is the final one; in practice, sort by name or check size
+                    filepath = max(files, key=os.path.getsize)  # largest file as final
+                    tasks[task_id]['filepath'] = filepath
+                    actual_filename = os.path.basename(filepath)
+                    tasks[task_id]['filename'] = actual_filename
+                tasks[task_id]['progress'] = 100
+                tasks[task_id]['done'] = True
+            except Exception as e:
+                tasks[task_id]['error'] = f'An error occurred during download: {str(e)}'
+                tasks[task_id]['done'] = True
+
+        thread = threading.Thread(target=download_in_thread, daemon=True)
+        thread.start()
+
+        return jsonify({'task_id': task_id})
+
+    except Exception as e:
+        return jsonify({'error': f'An unexpected error occurred: {str(e)}'}), 500
+
+@app.route('/progress/<task_id>')
+def get_progress(task_id):
+    """Get progress for a task."""
+    task = tasks.get(task_id)
+    if not task:
+        return jsonify({'error': 'Task not found'}), 404
+    return jsonify({
+        'progress': task['progress'],
+        'done': task['done'],
+        'error': task['error'],
+        'filename': task.get('filename')
+    })
+
+@app.route('/file/<task_id>')
+def get_file(task_id):
+    """Serve the downloaded file."""
+    task = tasks.get(task_id)
+    if not task or not task['done'] or task['error'] or not task['filepath']:
+        if task and task['error']:
+            return jsonify({'error': task['error']}), 500
+        return jsonify({'error': 'Download not ready or failed'}), 404
+
+    try:
+        ext = task['filepath'].split('.')[-1]
+        @after_this_request
+        def cleanup(response):
+            try:
+                os.unlink(task['filepath'])
+                if task.get('tmpdir'):
+                    shutil.rmtree(task['tmpdir'])
+            except Exception:
+                pass
+            if task_id in tasks:
+                del tasks[task_id]
+            return response
+
+        return send_file(
+            task['filepath'],
+            as_attachment=True,
+            download_name=task['filename'],
+            mimetype=f'video/{ext}'
+        )
+    except Exception as e:
+        return jsonify({'error': f'An unexpected error occurred: {str(e)}'}), 500
+
+if __name__ == '__main__':
+    app.run(debug=True)

requirements.txt

@@ -0,0 +1,3 @@
+flask
+yt-dlp
+gunicorn

templates/index.html

@@ -0,0 +1,270 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Video Downloader</title>
+
+    <style>
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+          Helvetica, Arial, sans-serif;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        margin: 0;
+        background-color: #f4f7f6;
+      }
+
+      .container {
+        background: white;
+        padding: 2rem;
+        border-radius: 8px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        width: 100%;
+        max-width: 500px;
+        text-align: center;
+      }
+
+      h1 {
+        margin-bottom: 1.5rem;
+        color: #333;
+      }
+
+      #download-form {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      #url {
+        padding: 0.75rem;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        font-size: 1rem;
+      }
+
+      button {
+        padding: 0.75rem;
+        border: none;
+        border-radius: 4px;
+        background-color: #007bff;
+        color: white;
+        font-size: 1rem;
+        cursor: pointer;
+        transition: background-color 0.2s;
+      }
+
+      button:hover {
+        background-color: #0056b3;
+      }
+
+      button:disabled {
+        background-color: #6c757d;
+        cursor: not-allowed;
+      }
+
+      .message {
+        margin-top: 1rem;
+        padding: 0.75rem;
+        border-radius: 4px;
+        display: none;
+      }
+
+      .message.info {
+        display: block;
+        background-color: #e2f3ff;
+        color: #005f9e;
+      }
+
+      .message.success {
+        display: block;
+        background-color: #d4edda;
+        color: #155724;
+      }
+
+      .message.error {
+        display: block;
+        background-color: #f8d7da;
+        color: #721c24;
+      }
+
+      #progress {
+        display: none;
+        margin-top: 1rem;
+      }
+
+      #progress-bar {
+        width: 100%;
+        height: 20px;
+      }
+
+      #percent {
+        text-align: center;
+        margin-top: 0.5rem;
+        font-weight: bold;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>Video Downloader</h1>
+      <form id="download-form">
+        <input
+          type="text"
+          id="url"
+          name="url"
+          placeholder="Enter video URL"
+          required
+        />
+        <button type="submit" id="download-btn">Download</button>
+      </form>
+      <div id="progress">
+        <progress id="progress-bar" value="0" max="100"></progress>
+        <div id="percent">0%</div>
+      </div>
+      <div id="message" class="message"></div>
+    </div>
+
+    <script>
+      document
+        .getElementById("download-form")
+        .addEventListener("submit", function (event) {
+          event.preventDefault();
+
+          const form = event.target;
+          const url = form.elements.url.value;
+          const messageDiv = document.getElementById("message");
+          const progressDiv = document.getElementById("progress");
+          const progressBar = document.getElementById("progress-bar");
+          const percentSpan = document.getElementById("percent");
+          const downloadBtn = document.getElementById("download-btn");
+
+          // Reset
+          messageDiv.style.display = "none";
+          progressDiv.style.display = "none";
+          downloadBtn.disabled = true;
+
+          // Start
+          messageDiv.textContent = "Starting download...";
+          messageDiv.className = "message info";
+          messageDiv.style.display = "block";
+          progressDiv.style.display = "block";
+          progressBar.value = 0;
+          percentSpan.textContent = "0%";
+
+          const formData = new FormData();
+          formData.append("url", url);
+
+          const postXhr = new XMLHttpRequest();
+          postXhr.open("POST", "/download", true);
+
+          postXhr.addEventListener("load", function () {
+            if (postXhr.status === 200) {
+              try {
+                const data = JSON.parse(postXhr.responseText);
+                const taskId = data.task_id;
+
+                messageDiv.textContent = "Downloading video...";
+                messageDiv.className = "message info";
+
+                let polling = true;
+
+                function poll() {
+                  if (!polling) return;
+
+                  const getXhr = new XMLHttpRequest();
+                  getXhr.open("GET", `/progress/${taskId}`, true);
+
+                  getXhr.addEventListener("load", function () {
+                    if (getXhr.status === 200) {
+                      try {
+                        const task = JSON.parse(getXhr.responseText);
+                        const percent = task.progress || 0;
+                        progressBar.value = percent;
+                        percentSpan.textContent = Math.round(percent) + "%";
+
+                        if (task.done) {
+                          polling = false;
+                          progressDiv.style.display = "none";
+                          if (task.error) {
+                            messageDiv.textContent = task.error;
+                            messageDiv.className = "message error";
+                          } else {
+                            messageDiv.textContent =
+                              "Download completed successfully!";
+                            messageDiv.className = "message success";
+
+                            const filename =
+                              task.filename || "downloaded_video.mp4";
+                            const link = document.createElement("a");
+                            link.href = `/file/${taskId}`;
+                            link.download = filename;
+                            document.body.appendChild(link);
+                            link.click();
+                            document.body.removeChild(link);
+                          }
+                          downloadBtn.disabled = false;
+                        } else {
+                          setTimeout(poll, 500);
+                        }
+                      } catch (e) {
+                        // Parse error
+                        polling = false;
+                        messageDiv.textContent =
+                          "Error parsing progress update.";
+                        messageDiv.className = "message error";
+                        downloadBtn.disabled = false;
+                      }
+                    } else {
+                      // Poll error, retry
+                      setTimeout(poll, 1000);
+                    }
+                  });
+
+                  getXhr.addEventListener("error", function () {
+                    polling = false;
+                    messageDiv.textContent =
+                      "Network error while checking progress.";
+                    messageDiv.className = "message error";
+                    downloadBtn.disabled = false;
+                  });
+
+                  getXhr.send();
+                }
+
+                poll();
+              } catch (e) {
+                messageDiv.textContent = "Error starting download.";
+                messageDiv.className = "message error";
+                downloadBtn.disabled = false;
+              }
+            } else {
+              let errorMsg = `Error: ${postXhr.statusText}`;
+              try {
+                const errorData = JSON.parse(postXhr.responseText);
+                errorMsg = `Error: ${errorData.error}`;
+              } catch (e) {
+                // Ignore
+              }
+              messageDiv.textContent = errorMsg;
+              messageDiv.className = "message error";
+              progressDiv.style.display = "none";
+              downloadBtn.disabled = false;
+            }
+          });
+
+          postXhr.addEventListener("error", function () {
+            messageDiv.textContent =
+              "An unexpected error occurred: Network issue";
+            messageDiv.className = "message error";
+            progressDiv.style.display = "none";
+            downloadBtn.disabled = false;
+          });
+
+          postXhr.send(formData);
+        });
+    </script>
+  </body>
+</html>