Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VideoBG Remover - 专业视频背景去除工具</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6B73FF 0%, #000DFF 50%, #0085FF 100%); | |
| } | |
| .upload-area { | |
| border: 2px dashed rgba(255, 255, 255, 0.3); | |
| transition: all 0.3s ease; | |
| } | |
| .upload-area:hover { | |
| border-color: rgba(255, 255, 255, 0.6); | |
| background-color: rgba(255, 255, 255, 0.05); | |
| } | |
| .upload-area.dragover { | |
| border-color: #4ADE80; | |
| background-color: rgba(74, 222, 128, 0.1); | |
| } | |
| .progress-bar { | |
| height: 8px; | |
| transition: width 0.3s ease; | |
| } | |
| .tooltip:hover .tooltip-text { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .video-preview { | |
| aspect-ratio: 16/9; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen"> | |
| <!-- 导航栏 --> | |
| <nav class="bg-gray-800 py-4 px-6 shadow-lg"> | |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-video text-blue-400 text-2xl"></i> | |
| <h1 class="text-xl font-bold">VideoBG Remover</h1> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-blue-400 transition">首页</a> | |
| <a href="#" class="hover:text-blue-400 transition">教程</a> | |
| <a href="#" class="hover:text-blue-400 transition">定价</a> | |
| <a href="#" class="hover:text-blue-400 transition">关于</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 transition">登录</button> | |
| <button class="px-4 py-2 rounded-lg border border-blue-400 text-blue-400 hover:bg-blue-900 transition">注册</button> | |
| </div> | |
| <button class="md:hidden text-xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- 主要内容 --> | |
| <main class="max-w-7xl mx-auto px-6 py-12"> | |
| <!-- 标题和描述 --> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-4xl font-bold mb-4">AI 视频背景去除工具</h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto">上传您的视频，我们先进的AI技术将自动去除背景，让您专注于内容主体。免费用户可处理前6秒，付费用户无限制。</p> | |
| </div> | |
| <!-- 上传和处理区域 --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12"> | |
| <!-- 上传区域 --> | |
| <div class="gradient-bg rounded-2xl p-8"> | |
| <div id="upload-area" class="upload-area rounded-xl p-8 text-center cursor-pointer"> | |
| <i class="fas fa-cloud-upload-alt text-4xl mb-4 text-white opacity-80"></i> | |
| <h3 class="text-xl font-semibold mb-2">拖放视频文件到此处</h3> | |
| <p class="text-gray-200 mb-4">或点击选择文件</p> | |
| <p class="text-sm text-gray-300">支持MP4, MOV, AVI等格式，最大500MB</p> | |
| <input type="file" id="video-upload" class="hidden" accept="video/*"> | |
| </div> | |
| <!-- 视频信息 --> | |
| <div id="video-info" class="mt-6 hidden"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="font-medium">视频信息</span> | |
| <button id="change-video" class="text-blue-300 hover:text-blue-100 text-sm">更换视频</button> | |
| </div> | |
| <div class="bg-black bg-opacity-30 rounded-lg p-4"> | |
| <div class="flex items-center space-x-4 mb-3"> | |
| <i class="fas fa-file-video text-blue-300"></i> | |
| <div> | |
| <p id="video-name" class="font-medium truncate">video-sample.mp4</p> | |
| <p id="video-duration" class="text-sm text-gray-300">00:15</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span id="video-size">25.4 MB</span> | |
| <span id="video-resolution">1920x1080</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 处理选项 --> | |
| <div id="process-options" class="mt-6 hidden"> | |
| <div class="mb-4"> | |
| <label class="block font-medium mb-2">背景去除选项</label> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button class="bg-blue-700 py-2 px-4 rounded-lg flex items-center justify-center space-x-2"> | |
| <i class="fas fa-magic"></i> | |
| <span>自动</span> | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 py-2 px-4 rounded-lg flex items-center justify-center space-x-2"> | |
| <i class="fas fa-sliders-h"></i> | |
| <span>高级</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block font-medium mb-2">输出格式</label> | |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2"> | |
| <option>MP4 (推荐)</option> | |
| <option>MOV</option> | |
| <option>GIF</option> | |
| <option>透明通道 (PNG序列)</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="tooltip relative"> | |
| <i class="fas fa-info-circle text-gray-400"></i> | |
| <div class="tooltip-text absolute z-10 invisible opacity-0 bg-gray-800 text-sm text-white rounded p-2 w-64 -left-32 -top-20 transition-all duration-300"> | |
| 免费用户只能处理视频的前6秒。升级到专业版可解锁完整视频处理。 | |
| </div> | |
| </div> | |
| <button id="process-btn" class="bg-green-600 hover:bg-green-700 py-3 px-6 rounded-lg font-medium flex items-center space-x-2"> | |
| <i class="fas fa-play"></i> | |
| <span>开始处理</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 预览区域 --> | |
| <div class="bg-gray-800 rounded-2xl p-8"> | |
| <h3 class="text-xl font-semibold mb-4">预览</h3> | |
| <!-- 初始状态 --> | |
| <div id="preview-placeholder" class="video-preview bg-gray-700 rounded-xl flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-video text-4xl mb-4 text-gray-500"></i> | |
| <p class="text-gray-400">上传视频后预览将显示在这里</p> | |
| </div> | |
| </div> | |
| <!-- 视频预览 --> | |
| <div id="video-preview" class="hidden"> | |
| <video controls class="w-full rounded-xl mb-4"></video> | |
| <div class="flex justify-between text-sm text-gray-400"> | |
| <span>原始视频</span> | |
| <span>00:00 / <span id="preview-duration">00:00</span></span> | |
| </div> | |
| </div> | |
| <!-- 处理结果预览 --> | |
| <div id="result-preview" class="hidden"> | |
| <div class="relative"> | |
| <video controls class="w-full rounded-xl mb-4"></video> | |
| <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-sm"> | |
| 已去除背景 | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-400 mb-4"> | |
| <span>处理后视频</span> | |
| <span>00:00 / <span id="result-duration">00:00</span></span> | |
| </div> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button class="bg-blue-600 hover:bg-blue-700 py-2 px-4 rounded-lg flex items-center justify-center space-x-2"> | |
| <i class="fas fa-download"></i> | |
| <span>下载</span> | |
| </button> | |
| <button class="bg-gray-700 hover:bg-gray-600 py-2 px-4 rounded-lg flex items-center justify-center space-x-2"> | |
| <i class="fas fa-redo"></i> | |
| <span>重新处理</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- 处理进度 --> | |
| <div id="processing-status" class="hidden mt-6"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="font-medium">处理进度</span> | |
| <span id="progress-percent" class="text-blue-400">0%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2 mb-4"> | |
| <div id="progress-bar" class="progress-bar bg-blue-500 rounded-full" style="width: 0%"></div> | |
| </div> | |
| <p class="text-sm text-gray-400">AI正在处理您的视频，请稍候...</p> | |
| <p id="time-remaining" class="text-sm text-gray-400 mt-2">预计剩余时间: 计算中...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 付费升级提示 --> | |
| <div id="upgrade-prompt" class="bg-gray-800 rounded-2xl p-6 mb-12 hidden"> | |
| <div class="flex flex-col md:flex-row items-center justify-between"> | |
| <div class="mb-4 md:mb-0"> | |
| <h3 class="text-xl font-semibold mb-2">需要处理完整视频？</h3> | |
| <p class="text-gray-400">免费版只能处理前6秒。升级到专业版可解锁完整视频处理功能。</p> | |
| </div> | |
| <button class="bg-purple-600 hover:bg-purple-700 py-3 px-6 rounded-lg font-medium whitespace-nowrap"> | |
| 升级到专业版 | |
| </button> | |
| </div> | |
| </div> | |
| <!-- 功能对比 --> | |
| <div class="mb-12"> | |
| <h3 class="text-2xl font-semibold mb-6 text-center">免费版 vs 专业版</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-gray-800 rounded-2xl p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h4 class="text-xl font-medium">免费版</h4> | |
| <span class="bg-blue-900 text-blue-300 px-3 py-1 rounded-full text-sm">当前版本</span> | |
| </div> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-2"></i> | |
| <span>免费处理视频前6秒</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-2"></i> | |
| <span>基本背景去除质量</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-times text-red-400 mt-1 mr-2"></i> | |
| <span class="text-gray-400">无法处理完整视频</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-times text-red-400 mt-1 mr-2"></i> | |
| <span class="text-gray-400">无水印下载</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-times text-red-400 mt-1 mr-2"></i> | |
| <span class="text-gray-400">高级背景编辑工具</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-800 rounded-2xl p-6 border-2 border-purple-500 relative"> | |
| <div class="absolute -top-3 -right-3 bg-purple-500 text-white text-xs font-bold px-3 py-1 rounded-full"> | |
| 推荐 | |
| </div> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h4 class="text-xl font-medium">专业版</h4> | |
| <span class="text-purple-300">$9.99/月</span> | |
| </div> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-2"></i> | |
| <span>完整视频处理</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-2"></i> | |
| <span>高质量背景去除</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-2"></i> | |
| <span>无水印下载</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-2"></i> | |
| <span>高级背景编辑工具</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-2"></i> | |
| <span>优先处理队列</span> | |
| </li> | |
| </ul> | |
| <button class="w-full mt-6 bg-purple-600 hover:bg-purple-700 py-2 px-4 rounded-lg font-medium"> | |
| 立即升级 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- 页脚 --> | |
| <footer class="bg-gray-800 py-8 px-6"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">VideoBG Remover</h4> | |
| <p class="text-gray-400">使用AI技术轻松去除视频背景，为您的创意内容提供无限可能。</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">产品</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">功能</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">定价</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">示例</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">API</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">资源</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">帮助中心</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">教程</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">博客</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">状态</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">联系我们</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Twitter</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Facebook</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Instagram</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">support@videobgremover.com</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="pt-6 border-t border-gray-700 text-center text-gray-500 text-sm"> | |
| <p>© 2023 VideoBG Remover. 保留所有权利。</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // DOM元素 | |
| const uploadArea = document.getElementById('upload-area'); | |
| const videoUpload = document.getElementById('video-upload'); | |
| const videoInfo = document.getElementById('video-info'); | |
| const processOptions = document.getElementById('process-options'); | |
| const previewPlaceholder = document.getElementById('preview-placeholder'); | |
| const videoPreview = document.getElementById('video-preview'); | |
| const resultPreview = document.getElementById('result-preview'); | |
| const processingStatus = document.getElementById('processing-status'); | |
| const upgradePrompt = document.getElementById('upgrade-prompt'); | |
| const changeVideoBtn = document.getElementById('change-video'); | |
| const processBtn = document.getElementById('process-btn'); | |
| // 拖放功能 | |
| uploadArea.addEventListener('dragover', (e) => { | |
| e.preventDefault(); | |
| uploadArea.classList.add('dragover'); | |
| }); | |
| uploadArea.addEventListener('dragleave', () => { | |
| uploadArea.classList.remove('dragover'); | |
| }); | |
| uploadArea.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| uploadArea.classList.remove('dragover'); | |
| if (e.dataTransfer.files.length) { | |
| videoUpload.files = e.dataTransfer.files; | |
| handleVideoUpload(); | |
| } | |
| }); | |
| // 点击上传 | |
| uploadArea.addEventListener('click', () => { | |
| videoUpload.click(); | |
| }); | |
| videoUpload.addEventListener('change', handleVideoUpload); | |
| // 处理视频上传 | |
| function handleVideoUpload() { | |
| const file = videoUpload.files[0]; | |
| if (!file) return; | |
| // 显示视频信息 | |
| document.getElementById('video-name').textContent = file.name; | |
| document.getElementById('video-size').textContent = formatFileSize(file.size); | |
| // 创建视频元素获取时长和分辨率 | |
| const video = document.createElement('video'); | |
| video.src = URL.createObjectURL(file); | |
| video.onloadedmetadata = () => { | |
| document.getElementById('video-duration').textContent = formatTime(video.duration); | |
| document.getElementById('video-resolution').textContent = `${video.videoWidth}x${video.videoHeight}`; | |
| document.getElementById('preview-duration').textContent = formatTime(video.duration); | |
| // 显示付费提示（如果视频超过6秒） | |
| if (video.duration > 6) { | |
| upgradePrompt.classList.remove('hidden'); | |
| } else { | |
| upgradePrompt.classList.add('hidden'); | |
| } | |
| }; | |
| // 显示预览 | |
| const previewVideo = videoPreview.querySelector('video'); | |
| previewVideo.src = URL.createObjectURL(file); | |
| // 切换UI状态 | |
| videoInfo.classList.remove('hidden'); | |
| processOptions.classList.remove('hidden'); | |
| previewPlaceholder.classList.add('hidden'); | |
| videoPreview.classList.remove('hidden'); | |
| resultPreview.classList.add('hidden'); | |
| } | |
| // 更换视频 | |
| changeVideoBtn.addEventListener('click', () => { | |
| videoUpload.value = ''; | |
| videoInfo.classList.add('hidden'); | |
| processOptions.classList.add('hidden'); | |
| previewPlaceholder.classList.remove('hidden'); | |
| videoPreview.classList.add('hidden'); | |
| upgradePrompt.classList.add('hidden'); | |
| }); | |
| // 开始处理 | |
| processBtn.addEventListener('click', () => { | |
| // 模拟处理过程 | |
| videoPreview.classList.add('hidden'); | |
| processingStatus.classList.remove('hidden'); | |
| let progress = 0; | |
| const progressInterval = setInterval(() => { | |
| progress += Math.random() * 5; | |
| if (progress > 100) progress = 100; | |
| document.getElementById('progress-bar').style.width = `${progress}%`; | |
| document.getElementById('progress-percent').textContent = `${Math.floor(progress)}%`; | |
| // 随机剩余时间 | |
| const remaining = Math.floor((100 - progress) / 5); | |
| document.getElementById('time-remaining').textContent = `预计剩余时间: ${remaining}秒`; | |
| if (progress === 100) { | |
| clearInterval(progressInterval); | |
| setTimeout(() => { | |
| processingStatus.classList.add('hidden'); | |
| resultPreview.classList.remove('hidden'); | |
| // 设置处理后的视频预览（实际应用中这里应该是处理后的视频） | |
| const resultVideo = resultPreview.querySelector('video'); | |
| resultVideo.src = videoPreview.querySelector('video').src; | |
| document.getElementById('result-duration').textContent = | |
| document.getElementById('preview-duration').textContent; | |
| }, 1000); | |
| } | |
| }, 500); | |
| }); | |
| // 辅助函数 | |
| function formatFileSize(bytes) { | |
| if (bytes === 0) return '0 Bytes'; | |
| const k = 1024; | |
| const sizes = ['Bytes', 'KB', 'MB', 'GB']; | |
| const i = Math.floor(Math.log(bytes) / Math.log(k)); | |
| return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; | |
| } | |
| function formatTime(seconds) { | |
| const mins = Math.floor(seconds / 60); | |
| const secs = Math.floor(seconds % 60); | |
| return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`; | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=guanwei1225/ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |