Spaces:

guanwei1225
/

ai

Running

App Files Files Community

guanwei1225 commited on Jun 30, 2025

Commit

35e10b9

verified ·

1 Parent(s): efe2bb6

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +467 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Ai
-emoji: 👀
-colorFrom: pink
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: ai
+emoji: 🐳
+colorFrom: green
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,467 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>