＜ Project-30.GitHub_Apps/3.cobalt ＞ imputnet/cobalt 用来下载视频的，以前它自己有个web, 现在没了 自己做个web套套 占用 9016 商品

前言：

GitHub 上的一个用于下载视频的项目： Cobalt 链接：https://github.com/imputnet/cobalt

以前有个 web 界面，后来升级没了。 刚才用 yt-dlp 想下载个视频又报错，看了一下，pip 升级后 docker 能用了，但 PC 上可能用了 VPN 报的要验证不是 bot ...

花点儿功夫，顺手把这个去年想做的界面搞定了。

简约界面

使用英文，说是因打字时总会有错字...

功能介绍：

cobalt:

cobalt helps you save anything from your favorite websites: video, audio, photos or gifs. just paste the link and you’re ready to rock!

no ads, trackers, paywalls, or other nonsense. just a convenient web app that works anywhere, whenever you need it.

https://cobalt.tools/about/general

抢劫/盗窃 “流行”网站的视频、音频。  （有买 Youtube Premium ，下载 Youtube 视频只是对这几个GitHub感兴趣，视频不会保存，版权是要尊重的。）

Cobalt Downloader  Web:

  • 下载主流网站的视频、音频
  • youtube 可以选择码率，为了省流量，默认选择是 480p
  • 只是调用 Cobalt API
  • 使用 docker-compose.yml 在 docker 部署，快~
  • 使用 flask 占用 9016 端口
  • js html css 是独立文件
  • Cobalt API 占用 9000 端口

Cobalt + Web 完整结构

1. 在 docker 上部署 Cobalt Instance 

GitHub 参考：https://github.com/imputnet/cobalt/blob/main/docs/run-an-instance.md

因为 Cobalt 用的是 docker compose up -d 来安装，没有 image 占地儿。Web UI 我也用这方法。

简单步骤：

        a. NAS 上给 Cobalt 项目做个目录，例：
[/share/Multimedia/2024-MyProgramFiles/30.GitHub_Apps/3.cobalt-main/cobalt] #
        b. 把 docker-compose.yml 放到这个目录里

GitHub 上的 sample file:  https://github.com/imputnet/cobalt/blob/main/docs/examples/docker-compose.example.yml

稍微学习了一下文件的格式，修改后如下：

如果你是第一次部署，建议使用我的这个 docker-compose.yml 文件，成功后再继续修改。

c. 完整的 docker-compose.yml:
  1. services:
  2.     cobalt-api:
  3.         image: ghcr.io/imputnet/cobalt:10
  4.         init: true
  5.         read_only: true
  6.         restart: unless-stopped
  7.         container_name: cobalt-api
  8.         ports:
  9.             - 9000:9000/tcp
  10.         environment:
  11.             API_URL: "http://192.168.1.8:9000/"
  12.             # 添加以下环境变量来启用格式列表
  13.             DURATION_LIMIT: "10800"    # 3小时视频限制
  14.             RATELIMIT_MAX: "30"        # 每个时间窗口允许的最大请求数
  15.             RATELIMIT_WINDOW: "60"     # 时间窗口（秒）
  16.             TUNNEL_LIFESPAN: "90"      # 下载链接有效期（秒）
  17.  
  18.         labels:
  19.             - com.centurylinklabs.watchtower.scope=cobalt
  20.  
  21.     watchtower:
  22.         image: ghcr.io/containrrr/watchtower
  23.         restart: unless-stopped
  24.         command: --cleanup --scope cobalt --interval 900 --include-restarting
  25.         volumes:
  26.             - /var/run/docker.sock:/var/run/docker.sock
d. 说明：

以下你可以自行修改：

  • 我没有使用 API KEY
  • cobalt-api 端口占用 9000
  • API_URL 使用的是我自己的 NAS IP 地址
e. 在 docker 上部署

进入 Cobalt 目录，运行: docker compose up -d

 [/share/Multimedia/2024-MyProgramFiles/30.GitHub_Apps/3.cobalt-main/cobalt] # docker compose up -d

完成后，会看到：

2. 部署 Web

a. 目录结构

  1. cobalt-main/app/
  2. │
  3. ├── app.py                  # Main application file 
  4. ├── requirements.txt        # dependencies
  5. ├── docker-compose.yml      # Docker configuration
  6. ├── Dockerfile              # Docker image build instructions
  7. ├── key.pem                 # SSL/TLS private key
  8. ├── cert.pem                # SSL/TLS certificate
  9. ├── templates/              # HTML directory
  10. │   ├── 404.html            # Not Found errors
  11. │   ├── 500.html            # Internal errors
  12. │   ├── base.html           # Base 
  13. │   └── index.html          # home page
  14. │
  15. └── static/                 
  16.     ├── download.js         # JavaScript 
  17.     ├── favicon.ico         
  18.     └── css/
  19.         └── style.css       # CSS

b. 完整代码文件

1) app.py

  1. from flask import Flask, request, jsonify, render_template, send_from_directory
  2. import requests
  3. import ssl
  4. import os
  5. import logging
  6. from logging.handlers import RotatingFileHandler
  7. from dotenv import load_dotenv
  8.  
  9. # 加载环境变量
  10. load_dotenv()
  11.  
  12. # Configure logging
  13. logging.basicConfig(level=logging.INFO)
  14. logger = logging.getLogger(__name__)
  15. handler = RotatingFileHandler('logs/app.log', maxBytes=10000000, backupCount=5)
  16. handler.setFormatter(logging.Formatter(
  17.     '[%(asctime)s] %(levelname)s in %(module)s: %(message)s'
  18. ))
  19. logger.addHandler(handler)
  20.  
  21. # Flask app configuration
  22. app = Flask(__name__,
  23.            template_folder='templates',  
  24.            static_folder='static')
  25.  
  26. # 生产环境设置
  27. app.config['ENV'] = os.getenv('FLASK_ENV', 'production')
  28. app.config['DEBUG'] = os.getenv('FLASK_DEBUG', '0') == '1'
  29.  
  30. # Cobalt API configuration
  31. COBALT_API_URL = os.getenv('COBALT_API_URL', 'http://192.168.1.8:9000')
  32. API_KEY = os.getenv('COBALT_API_KEY')
  33.  
  34. # Security headers
  35. @app.after_request
  36. def add_security_headers(response):
  37.     response.headers['X-Content-Type-Options'] = 'nosniff'
  38.     response.headers['X-Frame-Options'] = 'DENY'
  39.     response.headers['X-XSS-Protection'] = '1; mode=block'
  40.     response.headers['Strict-Transport-Security'] = 'max-age=31536000; includeSubDomains'
  41.     return response
  42.  
  43. @app.route('/', methods=['GET'])
  44. def index():
  45.     """Render the main page."""
  46.     try:
  47.         logger.info("Attempting to render index.html")
  48.         return render_template('index.html')
  49.     except Exception as e:
  50.         logger.error(f"Error rendering template: {str(e)}")
  51.         return render_template('500.html'), 500
  52.  
  53. @app.route('/static/')
  54. def serve_static(path):
  55.     """Serve static files."""
  56.     return send_from_directory('static', path)
  57.  
  58. @app.route('/api/download', methods=['POST'])
  59. def download():
  60.     """Handle download requests by proxying them to Cobalt API."""
  61.     try:
  62.         # 1. Validate request data
  63.         data = request.get_json()
  64.         if not data or 'url' not in data:
  65.             logger.warning("Missing URL in request")
  66.             return jsonify({
  67.                 'status': 'error',
  68.                 'message': 'URL is required'
  69.             }), 400
  70.  
  71.         # 2. Log request info
  72.         logger.info(f"Processing download request for URL: {data['url']}")
  73.         logger.info(f"Using Cobalt API URL: {COBALT_API_URL}")
  74.  
  75.         # 3. Build base payload with mandatory parameters
  76.         payload = {
  77.             'url': data['url'],
  78.             'filenameStyle': 'pretty'
  79.         }
  80.  
  81.         # 4. Add mode-specific parameters
  82.         mode = data.get('mode', 'auto')
  83.         payload['downloadMode'] = mode
  84.  
  85.         # Handle video modes
  86.         if mode in ['auto', 'mute']:
  87.             payload.update({
  88.                 'videoQuality': data.get('videoQuality', 'max'),
  89.                 'youtubeVideoCodec': 'h264'
  90.             })
  91.         # Handle audio mode
  92.         elif mode == 'audio':
  93.             payload.update({
  94.                 'audioFormat': data.get('audioFormat', 'mp3'),
  95.                 'audioBitrate': data.get('audioBitrate', '320')
  96.             })
  97.  
  98.         # 5. Add optional service-specific parameters
  99.         if data.get('tiktokFullAudio'):
  100.             payload['tiktokFullAudio'] = True
  101.         
  102.         if data.get('tiktokH265') is not None:
  103.             payload['tiktokH265'] = data['tiktokH265']
  104.         
  105.         if data.get('twitterGif') is not None:
  106.             payload['twitterGif'] = data['twitterGif']
  107.         
  108.         if data.get('youtubeDubLang'):
  109.             payload['youtubeDubLang'] = data['youtubeDubLang']
  110.         
  111.         if data.get('youtubeHLS') is not None:
  112.             payload['youtubeHLS'] = data['youtubeHLS']
  113.  
  114.         # 6. Add optional global parameters
  115.         if data.get('alwaysProxy') is not None:
  116.             payload['alwaysProxy'] = data['alwaysProxy']
  117.         
  118.         if data.get('disableMetadata') is not None:
  119.             payload['disableMetadata'] = data['disableMetadata']
  120.  
  121.         # 7. Prepare request headers
  122.         headers = {
  123.             'Content-Type': 'application/json',
  124.             'Accept': 'application/json'
  125.         }
  126.  
  127.         # 8. Add API authentication if configured
  128.         if API_KEY:
  129.             headers['Authorization'] = f'Api-Key {API_KEY}'
  130.             logger.info("Using API key authentication")
  131.  
  132.         # 9. Send request to Cobalt API
  133.         logger.info(f"Sending request to Cobalt API with payload: {payload}")
  134.         response = requests.post(
  135.             f"{COBALT_API_URL}/",
  136.             headers=headers,
  137.             json=payload,
  138.             timeout=30
  139.         )
  140.  
  141.         # 10. Log response info
  142.         logger.info(f"Cobalt API response status: {response.status_code}")
  143.         logger.info(f"Cobalt API response headers: {dict(response.headers)}")
  144.  
  145.         # 11. Handle successful response
  146.         if response.status_code == 200:
  147.             logger.info("Successfully received response from Cobalt API")
  148.             cobalt_data = response.json()
  149.             logger.info(f"Cobalt API response data: {cobalt_data}")
  150.             return jsonify(cobalt_data)
  151.  
  152.         # 12. Handle error response
  153.         logger.error(f"Cobalt API error response: {response.text}")
  154.         return jsonify({
  155.             'status': 'error',
  156.             'message': f'API Error: {response.status_code}'
  157.         }), response.status_code
  158.  
  159.     except requests.RequestException as e:
  160.         # 13. Handle network errors
  161.         logger.error(f"Network error details: {str(e)}")
  162.         return jsonify({
  163.             'status': 'error',
  164.             'message': f'Network error: {str(e)}'
  165.         }), 500
  166.  
  167.     except Exception as e:
  168.         # 14. Handle unexpected errors
  169.         logger.error(f"Unexpected error details: {str(e)}")
  170.         return jsonify({
  171.             'status': 'error',
  172.             'message': str(e)
  173.         }), 500
  174.  
  175. @app.errorhandler(404)
  176. def not_found_error(error):
  177.     """Handle 404 errors."""
  178.     logger.warning(f"404 error: {request.url}")
  179.     return render_template('404.html'), 404
  180.  
  181. @app.errorhandler(500)
  182. def internal_error(error):
  183.     """Handle 500 errors."""
  184.     logger.error(f"500 error: {error}")
  185.     return render_template('500.html'), 500
  186.  
  187. if __name__ == '__main__':
  188.     # Ensure logs directory exists
  189.     os.makedirs('logs', exist_ok=True)
  190.     
  191.     logger.info("Starting Flask application...")
  192.     logger.info(f"Working directory: {os.getcwd()}")
  193.     logger.info(f"Directory contents: {os.listdir()}")
  194.     logger.info(f"Templates directory contents: {os.listdir('templates') if os.path.exists('templates') else 'No templates directory'}")
  195.  
  196.     # SSL configuration
  197.     context = ssl.SSLContext(ssl.PROTOCOL_TLS_SERVER)
  198.     try:
  199.         context.load_cert_chain('cert.pem', 'key.pem')
  200.         logger.info("Successfully loaded SSL certificates")
  201.         app.run(host='0.0.0.0', port=9016, ssl_context=context)
  202.     except Exception as e:
  203.         logger.error(f"SSL Error: {e}")
  204.         logger.info("Falling back to HTTP...")
  205.         app.run(host='0.0.0.0', port=9016)

2) requirements.txt

  1. flask
  2. requests
  3. python-dotenv
  4. gunicorn

建议使用版本号，别学我。

3) docker-compose.yml

  1. services:
  2.   flask-app:
  3.     build: .
  4.     container_name: flask-cobalt
  5.     network_mode: "host"  # 使用主机网络模式
  6.     environment:
  7.       - COBALT_API_URL=http://192.168.1.8:9000
  8.       - FLASK_ENV=production
  9.       - FLASK_DEBUG=1
  10.     volumes:
  11.       - ./static:/app/static:ro
  12.       - ./templates:/app/templates:ro
  13.       - ./cert.pem:/app/cert.pem:ro
  14.       - ./key.pem:/app/key.pem:ro
  15.       - ./logs:/app/logs
  16.     restart: unless-stopped

COBALT_API_URL=http://192.168.1.8:9000 要与 cobalt docker-compose.yml 中的 environment:
API_URL: 一至

4) Dockerfile

  1. FROM python:3.12-slim
  2.  
  3. WORKDIR /app
  4.  
  5. ENV PYTHONDONTWRITEBYTECODE=1
  6. ENV PYTHONUNBUFFERED=1
  7.  
  8. COPY requirements.txt .
  9. RUN pip install --no-cache-dir -r requirements.txt
  10.  
  11. COPY . .
  12.  
  13. RUN chmod 600 key.pem && chmod 644 cert.pem
  14.  
  15. CMD ["gunicorn", "--certfile=cert.pem", "--keyfile=key.pem", "--bind", "0.0.0.0:9016", "app:app"]

你需要自己准备 SSL 要用的 两个文件 cert.pem 与 key.pem 支持 SSH 连接。 如果没有，会运行在 http 下。

5) 404.html

  1. {% extends "base.html" %}
  2.  
  3. {% block content %}
  4. <div class="error-container">
  5.     <h1>404 - Page Not Found</h1>
  6.     <p>The page you're looking for doesn't exist.</p>
  7.     <a href="/" class="back-link">Return to Home</a>
  8. </div>
  9. {% endblock content %}

6) 500.html 

  1. {% extends "base.html" %}
  2.  
  3. {% block content %}
  4. <div class="error-container">
  5.     <h1>500 - Server Error</h1>
  6.     <p>Something went wrong on our end. Please try again later.</p>
  7.     <a href="/" class="back-link">Return to Home</a>
  8. </div>
  9. {% endblock content %}

7) base.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>{% block title %}Cobalt Downloader{% endblock title %}</title>
  7.     <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
  8.     <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
  9.     <script src="{{ url_for('static', filename='download.js') }}" defer></script>
  10. </head>
  11. <body>
  12.     <header>
  13.         <nav>
  14.             <div class="container">
  15.                 <h1>Cobalt Downloader</h1>
  16.             </div>
  17.         </nav>
  18.     </header>
  19.  
  20.     <main class="container">
  21.         {% block content %}{% endblock content %}
  22.     </main>
  23.  
  24.     <footer>
  25.         <div class="container">
  26.             <p>&copy; 2024 Cobalt Downloader</p>
  27.         </div>
  28.     </footer>
  29. </body>
  30. </html>

8) index.html

  1. {% extends "base.html" %}
  2.  
  3. {% block content %}
  4. <style>
  5. .format-list {
  6.     margin-top: 1rem;
  7.     display: flex;
  8.     flex-direction: column;
  9.     gap: 0.5rem;
  10. }
  11.  
  12. .format-button {
  13.     background-color: var(--primary-color);
  14.     color: white;
  15.     border: none;
  16.     padding: 0.5rem 1rem;
  17.     border-radius: 4px;
  18.     cursor: pointer;
  19.     font-size: 0.9rem;
  20.     transition: background-color 0.2s;
  21. }
  22.  
  23. .format-button:hover {
  24.     background-color: var(--secondary-color);
  25. }
  26.  
  27. .option-group {
  28.     background: #f8f9fa;
  29.     padding: 1rem;
  30.     border-radius: 4px;
  31.     margin-bottom: 1rem;
  32. }
  33.  
  34. .option-group h3 {
  35.     font-size: 1rem;
  36.     margin-bottom: 0.5rem;
  37.     color: #666;
  38. }
  39.  
  40. .option-description {
  41.     font-size: 0.85rem;
  42.     color: #666;
  43.     margin-top: 0.25rem;
  44. }
  45.  
  46. .select-wrapper {
  47.     position: relative;
  48.     margin-bottom: 1rem;
  49. }
  50.  
  51. .select-wrapper::after {
  52.     content: "▼";
  53.     font-size: 0.8rem;
  54.     position: absolute;
  55.     right: 1rem;
  56.     top: 50%;
  57.     transform: translateY(-50%);
  58.     pointer-events: none;
  59.     color: #666;
  60. }
  61. </style>
  62.  
  63. <div class="download-form">
  64.     <!-- URL Input -->
  65.     <div class="form-group">
  66.         <input type="url" id="url" placeholder="Enter video/audio URL" required>
  67.     </div>
  68.  
  69.     <!-- Video Options -->
  70.     <div class="option-group">
  71.         <h3>Download Options</h3>
  72.         <!-- Download Mode -->
  73.         <div class="select-wrapper">
  74.             <select id="mode" class="form-select">
  75.                 <option value="auto">Auto (Video with Audio)</option>
  76.                 <option value="audio">Audio Only</option>
  77.                 <option value="mute">Video Only (No Audio)</option>
  78.             </select>
  79.             <p class="option-description">Choose how you want to download the content</p>
  80.         </div>
  81.  
  82.         <!-- Video Quality -->
  83.         <div class="select-wrapper">
  84.             <select id="videoQuality" class="form-select">
  85.                 <option value="max">Best Quality</option>
  86.                 <option value="2160">4K (2160p)</option>
  87.                 <option value="1440">2K (1440p)</option>
  88.                 <option value="1080">1080p</option>
  89.                 <option value="720">720p</option>
  90.                 <option value="480" selected>Default 480p</option> <!-- also need to modify download.js paylod value -->>
  91.                 <option value="360">360p</option>
  92.             </select>
  93.             <p class="option-description">Select video quality (for video downloads)</p>
  94.         </div>
  95.  
  96.         <!-- Audio Quality (for audio mode) -->
  97.         <div class="select-wrapper">
  98.             <select id="audioBitrate" class="form-select">
  99.                 <option value="320">320 kbps</option>
  100.                 <option value="256">256 kbps</option>
  101.                 <option value="128">128 kbps</option>
  102.                 <option value="96">96 kbps</option>
  103.                 <option value="64">64 kbps</option>
  104.             </select>
  105.             <p class="option-description">Select audio quality (for audio-only downloads)</p>
  106.         </div>
  107.     </div>
  108.  
  109.     <!-- Download Button -->
  110.     <button onclick="checkFormats()" class="download-btn">Download</button>
  111.  
  112.     <!-- Result Area -->
  113.     <div id="result" class="result" style="display:none;">
  114.         <div class="result-content">
  115.             <p id="status"></p>
  116.             <div id="format-list"></div>
  117.             <a id="download-link" href="#" target="_blank" style="display:none;">Download File</a>
  118.         </div>
  119.     </div>
  120. </div>
  121. {% endblock content %}

9) download.js

  1. // Initialize UI state
  2. document.addEventListener('DOMContentLoaded', function() {
  3.     resetResults();
  4. });
  5.  
  6. // Main format check function
  7. // Main format check function
  8. function checkFormats() {
  9.     const url = document.getElementById('url').value;
  10.     if (!validateUrl(url)) {
  11.         showError('Please enter a valid URL');
  12.         return;
  13.     }
  14.  
  15.     const payload = {
  16.         url: url,
  17.         filenameStyle: "pretty",
  18.         downloadMode: document.getElementById('mode').value,
  19.         videoQuality: document.getElementById('videoQuality').value || '480',  // 添加质量选择
  20.         youtubeVideoCodec: 'h264'
  21.     };
  22.  
  23.     const button = document.querySelector('.download-btn');
  24.     const status = document.getElementById('status');
  25.     const result = document.getElementById('result');
  26.     
  27.     button.disabled = true;
  28.     status.textContent = 'Preparing download...';
  29.     result.style.display = 'block';
  30.  
  31.     // 添加 TikTok 选项
  32.     if (document.getElementById('tiktokFullAudio').checked) {
  33.         payload.tiktokFullAudio = true;
  34.     }
  35.  
  36.     // 添加 Twitter 选项
  37.     if (document.getElementById('twitterGif').checked) {
  38.         payload.twitterGif = true;
  39.     }
  40.  
  41.     fetch('/api/download', {
  42.         method: 'POST',
  43.         headers: {
  44.             'Content-Type': 'application/json',
  45.             'Accept': 'application/json'
  46.         },
  47.         body: JSON.stringify(payload)
  48.     })
  49.     .then(response => response.json())
  50.     .then(data => {
  51.         button.disabled = false;
  52.         if (data.status === 'tunnel' || data.status === 'redirect') {
  53.             handleDirectDownload(data);
  54.         } else {
  55.             showError('Unexpected response from server');
  56.         }
  57.     })
  58.     .catch(error => {
  59.         button.disabled = false;
  60.         showError(error.message);
  61.     });
  62. }
  63.  
  64. // Handle direct download response
  65. function handleDirectDownload(data) {
  66.     const status = document.getElementById('status');
  67.     const downloadLink = document.getElementById('download-link');
  68.     
  69.     status.textContent = 'Ready to download!';
  70.     downloadLink.href = data.url;
  71.     downloadLink.textContent = data.filename || 'Download File';
  72.     downloadLink.style.display = 'block';
  73. }
  74.  
  75. // Handle format picker response
  76. function handleFormatPicker(data) {
  77.     const status = document.getElementById('status');
  78.     const formatList = document.getElementById('format-list');
  79.     
  80.     status.textContent = 'Available formats:';
  81.     formatList.innerHTML = '';
  82.     
  83.     const formatDiv = document.createElement('div');
  84.     formatDiv.className = 'format-list';
  85.  
  86.     // Sort formats by quality (highest first)
  87.     if (data.picker && Array.isArray(data.picker)) {
  88.         data.picker.sort((a, b) => {
  89.             // Extract numeric value from quality (e.g., "1080p" -> 1080)
  90.             const getQualityNumber = (quality) => {
  91.                 if (!quality) return 0;
  92.                 const match = quality.match(/(\d+)/);
  93.                 return match ? parseInt(match[1]) : 0;
  94.             };
  95.             return getQualityNumber(b.quality) - getQualityNumber(a.quality);
  96.         });
  97.  
  98.         // Create buttons for each format
  99.         data.picker.forEach((item, index) => {
  100.             const button = document.createElement('button');
  101.             button.className = 'format-button';
  102.             
  103.             // Build detailed format description
  104.             let description = [];
  105.             
  106.             // Add quality info
  107.             if (item.quality) {
  108.                 description.push(item.quality);
  109.             }
  110.  
  111.             // Add type (VIDEO/AUDIO)
  112.             if (item.type) {
  113.                 description.push(item.type.toUpperCase());
  114.             }
  115.  
  116.             // Add codec info
  117.             if (item.codec) {
  118.                 description.push(`[${item.codec}]`);
  119.             }
  120.  
  121.             // Add bitrate if available
  122.             if (item.bitrate) {
  123.                 description.push(`${item.bitrate}kbps`);
  124.             }
  125.  
  126.             // Add filesize if available
  127.             if (item.filesize) {
  128.                 const size = formatFileSize(item.filesize);
  129.                 description.push(size);
  130.             }
  131.  
  132.             button.textContent = description.join(' - ');
  133.             button.onclick = () => startDownload(item.url, data.filename || `file_${index + 1}`);
  134.             
  135.             // Add hover tooltip with full details
  136.             button.title = `Quality: ${item.quality || 'N/A'}\nCodec: ${item.codec || 'N/A'}\nBitrate: ${item.bitrate || 'N/A'}kbps`;
  137.             
  138.             formatDiv.appendChild(button);
  139.         });
  140.     }
  141.     
  142.     formatList.appendChild(formatDiv);
  143. }
  144.  
  145. function handleAudioFormatPicker(data, mode) {
  146.     const status = document.getElementById('status');
  147.     const formatList = document.getElementById('format-list');
  148.     
  149.     status.textContent = 'Available audio formats:';
  150.     formatList.innerHTML = '';
  151.     
  152.     const formatDiv = document.createElement('div');
  153.     formatDiv.className = 'format-list';
  154.  
  155.     // Sort formats by bitrate (highest first)
  156.     if (data.picker && Array.isArray(data.picker)) {
  157.         data.picker
  158.             .filter(item => mode === 'audio' ? item.type?.toLowerCase() === 'audio' : true)
  159.             .sort((a, b) => (b.bitrate || 0) - (a.bitrate || 0))
  160.             .forEach((item, index) => {
  161.                 const button = document.createElement('button');
  162.                 button.className = 'format-button';
  163.                 
  164.                 // Build format description
  165.                 let description = [];
  166.                 
  167.                 if (item.codec) {
  168.                     description.push(item.codec.toUpperCase());
  169.                 }
  170.                 
  171.                 if (item.bitrate) {
  172.                     description.push(`${item.bitrate}kbps`);
  173.                 }
  174.  
  175.                 if (item.filesize) {
  176.                     const size = formatFileSize(item.filesize);
  177.                     description.push(size);
  178.                 }
  179.  
  180.                 button.textContent = description.join(' - ');
  181.                 button.onclick = () => startDownload(item.url, data.filename || `file_${index + 1}`);
  182.                 
  183.                 // Add hover tooltip
  184.                 button.title = `Format: ${item.codec || 'N/A'}\nBitrate: ${item.bitrate || 'N/A'}kbps`;
  185.                 
  186.                 formatDiv.appendChild(button);
  187.             });
  188.     }
  189.     
  190.     formatList.appendChild(formatDiv);
  191.  
  192.     // If no formats were found, show message
  193.     if (!formatDiv.children.length) {
  194.         status.textContent = 'No audio formats available';
  195.     }
  196. }
  197.  
  198. // Utility function to format file size
  199. function formatFileSize(bytes) {
  200.     if (!bytes) return '';
  201.     const units = ['B', 'KB', 'MB', 'GB'];
  202.     let size = bytes;
  203.     let unitIndex = 0;
  204.     
  205.     while (size >= 1024 && unitIndex < units.length - 1) {
  206.         size /= 1024;
  207.         unitIndex++;
  208.     }
  209.     
  210.     return `${size.toFixed(1)} ${units[unitIndex]}`;
  211. }
  212.  
  213. // Start download for selected format
  214. function startDownload(url, filename) {
  215.     const downloadLink = document.getElementById('download-link');
  216.     downloadLink.href = url;
  217.     downloadLink.textContent = filename;
  218.     downloadLink.style.display = 'block';
  219.     document.getElementById('status').textContent = 'Ready to download!';
  220.     downloadLink.click(); // Auto-start download
  221. }
  222.  
  223. // Reset UI elements
  224. function resetResults() {
  225.     const result = document.getElementById('result');
  226.     const status = document.getElementById('status');
  227.     const formatList = document.getElementById('format-list');
  228.     const downloadLink = document.getElementById('download-link');
  229.     
  230.     result.style.display = 'none';
  231.     status.textContent = '';
  232.     formatList.innerHTML = '';
  233.     downloadLink.style.display = 'none';
  234. }
  235.  
  236. // Show error message
  237. function showError(message) {
  238.     const status = document.getElementById('status');
  239.     const result = document.getElementById('result');
  240.     
  241.     status.textContent = `Error: ${message}`;
  242.     result.style.display = 'block';
  243. }
  244.  
  245. // Validate URL format
  246. function validateUrl(url) {
  247.     if (!url) return false;
  248.     try {
  249.         new URL(url);
  250.         return true;
  251.     } catch {
  252.         return false;
  253.     }
  254. }

10) style.css

  1. :root {
  2.     --primary-color: #2196F3;
  3.     --secondary-color: #1976D2;
  4.     --background-color: #f5f5f5;
  5.     --text-color: #333;
  6.     --border-color: #ddd;
  7. }
  8.  
  9. * {
  10.     margin: 0;
  11.     padding: 0;
  12.     box-sizing: border-box;
  13. }
  14.  
  15. body {
  16.     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  17.     line-height: 1.6;
  18.     color: var(--text-color);
  19.     background-color: var(--background-color);
  20. }
  21.  
  22. .container {
  23.     max-width: 800px;
  24.     margin: 0 auto;
  25.     padding: 0 20px;
  26. }
  27.  
  28. header {
  29.     background-color: var(--primary-color);
  30.     color: white;
  31.     padding: 1rem 0;
  32.     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  33. }
  34.  
  35. header h1 {
  36.     margin: 0;
  37.     font-size: 1.5rem;
  38. }
  39.  
  40. main {
  41.     padding: 2rem 0;
  42. }
  43.  
  44. .download-form {
  45.     background: white;
  46.     padding: 2rem;
  47.     border-radius: 8px;
  48.     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  49. }
  50.  
  51. .form-group {
  52.     margin-bottom: 1rem;
  53. }
  54.  
  55. input[type="url"],
  56. select {
  57.     width: 100%;
  58.     padding: 0.75rem;
  59.     border: 1px solid var(--border-color);
  60.     border-radius: 4px;
  61.     font-size: 1rem;
  62. }
  63.  
  64. .audio-options {
  65.     background: #f8f9fa;
  66.     padding: 1rem;
  67.     border-radius: 4px;
  68.     margin-bottom: 1rem;
  69. }
  70.  
  71. .download-btn {
  72.     background-color: var(--primary-color);
  73.     color: white;
  74.     border: none;
  75.     padding: 0.75rem 1.5rem;
  76.     border-radius: 4px;
  77.     cursor: pointer;
  78.     font-size: 1rem;
  79.     width: 100%;
  80.     transition: background-color 0.2s;
  81. }
  82.  
  83. .download-btn:hover {
  84.     background-color: var(--secondary-color);
  85. }
  86.  
  87. .download-btn:disabled {
  88.     background-color: var(--border-color);
  89.     cursor: not-allowed;
  90. }
  91.  
  92. .result {
  93.     margin-top: 1rem;
  94.     padding: 1rem;
  95.     border-radius: 4px;
  96.     background: #f8f9fa;
  97. }
  98.  
  99. .result-content {
  100.     text-align: center;
  101. }
  102.  
  103. #download-link {
  104.     display: inline-block;
  105.     margin-top: 0.5rem;
  106.     color: var(--primary-color);
  107.     text-decoration: none;
  108.     font-weight: bold;
  109. }
  110.  
  111. #download-link:hover {
  112.     text-decoration: underline;
  113. }
  114.  
  115. footer {
  116.     text-align: center;
  117.     padding: 2rem 0;
  118.     color: #666;
  119.     font-size: 0.9rem;
  120. }
  121.  
  122. @media (max-width: 600px) {
  123.     .download-form {
  124.         padding: 1rem;
  125.     }
  126. }
  127.  
  128. /* 在 static/css/style.css 中添加 */
  129.  
  130. .error-container {
  131.     text-align: center;
  132.     padding: 2rem;
  133.     background: white;
  134.     border-radius: 8px;
  135.     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  136.     margin: 2rem auto;
  137.     max-width: 600px;
  138. }
  139.  
  140. .error-container h1 {
  141.     color: var(--primary-color);
  142.     margin-bottom: 1rem;
  143. }
  144.  
  145. .back-link {
  146.     display: inline-block;
  147.     margin-top: 1rem;
  148.     padding: 0.5rem 1rem;
  149.     background-color: var(--primary-color);
  150.     color: white;
  151.     text-decoration: none;
  152.     border-radius: 4px;
  153.     transition: background-color 0.2s;
  154. }
  155.  
  156. .back-link:hover {
  157.     background-color: var(--secondary-color);
  158. }
  159.  
  160. /* 在 static/css/style.css 中添加 */
  161.  
  162. .video-options,
  163. .audio-options,
  164. .advanced-options {
  165.     background: #f8f9fa;
  166.     padding: 1rem;
  167.     border-radius: 4px;
  168.     margin-bottom: 1rem;
  169. }
  170.  
  171. .checkbox-label {
  172.     display: flex;
  173.     align-items: center;
  174.     gap: 0.5rem;
  175.     font-size: 0.9rem;
  176.     color: #666;
  177. }
  178.  
  179. .checkbox-label input[type="checkbox"] {
  180.     width: auto;
  181.     margin: 0;
  182. }

c. 部署 WEB UI

 到 docker-compose.yml 所在目录

运行： docker compose up -d

[/share/Multimedia/2024-MyProgramFiles/30.GitHub_Apps/3.cobalt-main/app] # docker compose up -d

成功后会看到：

使用：

  •  粘贴视频网站 URL
  • 选择: VA / Audio / Video no sound
  • 视频码率
  • 音频码率

在上传的 index.html 中取消  Advanced Options 部分，因为没测试，只是按照 api.me 的内容增加。 

如果只是下载视频，推荐用我另一下项目： Project-20 YT-DLP ，其功能近似。

连接：＜Project-20 YT-DLP＞ 给视频网站下载工具 yt-dlp/yt-dlp 加个页面 python web v1.1 added subtitle , auto paste_python yt-dlp-CSDN博客

注：本文转载自blog.csdn.net的davenian的文章"https://blog.csdn.net/davenian/article/details/144994992"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！