initialize

2026-04-09 08:47:37 +00:00
commit b80e97799f
22 changed files with 3015 additions and 0 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>VPlatform</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+  </html>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "vplatform-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^5.4.8"
+  }
+}
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -0,0 +1,258 @@
+import { useEffect, useState } from 'react'
+
+const API_BASE = 'http://localhost:8000'
+
+const defaultForm = {
+  clip_seconds: 8,
+  transcode_mp4: true,
+  generate_cover: true,
+  generate_hls: true,
+  watermark_text: 'VPlatform Demo',
+}
+
+function formatTime(iso) {
+  return new Date(iso).toLocaleString('zh-CN', { hour12: false })
+}
+
+function App() {
+  const [fileInfo, setFileInfo] = useState(null)
+  const [form, setForm] = useState(defaultForm)
+  const [tasks, setTasks] = useState([])
+  const [uploading, setUploading] = useState(false)
+  const [creating, setCreating] = useState(false)
+  const [error, setError] = useState('')
+
+  async function fetchTasks() {
+    try {
+      const response = await fetch(`${API_BASE}/api/tasks`)
+      if (!response.ok) {
+        throw new Error('获取任务列表失败')
+      }
+      const data = await response.json()
+      setTasks(data)
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  useEffect(() => {
+    fetchTasks()
+    const timer = setInterval(fetchTasks, 2500)
+    return () => clearInterval(timer)
+  }, [])
+
+  async function handleUpload(event) {
+    const selected = event.target.files?.[0]
+    if (!selected) {
+      return
+    }
+
+    setUploading(true)
+    setError('')
+    const formData = new FormData()
+    formData.append('file', selected)
+
+    try {
+      const response = await fetch(`${API_BASE}/api/upload`, {
+        method: 'POST',
+        body: formData,
+      })
+      if (!response.ok) {
+        throw new Error('上传失败')
+      }
+      const data = await response.json()
+      setFileInfo(data)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  async function handleCreateTask() {
+    if (!fileInfo) {
+      setError('请先上传视频')
+      return
+    }
+
+    setCreating(true)
+    setError('')
+    try {
+      const response = await fetch(`${API_BASE}/api/tasks`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          file_id: fileInfo.file_id,
+          ...form,
+        }),
+      })
+      if (!response.ok) {
+        throw new Error('创建任务失败')
+      }
+      const task = await response.json()
+      setTasks((current) => [task, ...current])
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setCreating(false)
+    }
+  }
+
+  function updateField(key, value) {
+    setForm((current) => ({ ...current, [key]: value }))
+  }
+
+  return (
+    <div className="page-shell">
+      <header className="hero">
+        <div>
+          <p className="eyebrow">Audio / Video Processing Demo</p>
+          <h1>VPlatform</h1>
+          <p className="hero-copy">
+            一个 1 天内可交付的音视频处理服务最小闭环：上传、排队、异步转码、生成封面与 HLS，并在前端实时查看结果。
+          </p>
+        </div>
+        <div className="hero-card">
+          <span>后端</span>
+          <strong>FastAPI + In-Memory Worker</strong>
+          <span>处理链路</span>
+          <strong>FFmpeg</strong>
+        </div>
+      </header>
+
+      <main className="grid">
+        <section className="panel">
+          <h2>1. 上传视频</h2>
+          <label className="upload-box">
+            <input type="file" accept="video/*" onChange={handleUpload} />
+            <span>{uploading ? '上传中...' : '点击选择视频文件'}</span>
+          </label>
+          {fileInfo && (
+            <div className="info-card">
+              <p>已上传：{fileInfo.original_name}</p>
+              <a href={`${API_BASE}${fileInfo.file_url}`} target="_blank" rel="noreferrer">
+                查看原文件
+              </a>
+            </div>
+          )}
+        </section>
+
+        <section className="panel">
+          <h2>2. 创建任务</h2>
+          <div className="form-grid">
+            <label>
+              截取前 N 秒
+              <input
+                type="number"
+                min="1"
+                max="60"
+                value={form.clip_seconds}
+                onChange={(event) => updateField('clip_seconds', Number(event.target.value))}
+              />
+            </label>
+            <label>
+              水印文本
+              <input
+                type="text"
+                value={form.watermark_text}
+                onChange={(event) => updateField('watermark_text', event.target.value)}
+              />
+            </label>
+          </div>
+          <div className="checkboxes">
+            <label>
+              <input
+                type="checkbox"
+                checked={form.transcode_mp4}
+                onChange={(event) => updateField('transcode_mp4', event.target.checked)}
+              />
+              转码 MP4
+            </label>
+            <label>
+              <input
+                type="checkbox"
+                checked={form.generate_cover}
+                onChange={(event) => updateField('generate_cover', event.target.checked)}
+              />
+              生成封面图
+            </label>
+            <label>
+              <input
+                type="checkbox"
+                checked={form.generate_hls}
+                onChange={(event) => updateField('generate_hls', event.target.checked)}
+              />
+              生成 HLS
+            </label>
+          </div>
+          <button className="primary-btn" onClick={handleCreateTask} disabled={creating}>
+            {creating ? '创建中...' : '提交异步任务'}
+          </button>
+          {error && <p className="error-text">{error}</p>}
+        </section>
+
+        <section className="panel full-width">
+          <div className="panel-title">
+            <h2>3. 任务看板</h2>
+            <button className="ghost-btn" onClick={fetchTasks}>
+              刷新
+            </button>
+          </div>
+
+          <div className="task-list">
+            {tasks.length === 0 && <p className="muted-text">暂无任务，先上传一个视频并提交处理。</p>}
+            {tasks.map((task) => (
+              <article className="task-card" key={task.task_id}>
+                <div className="task-meta">
+                  <div>
+                    <p className="task-id">Task #{task.task_id}</p>
+                    <p className={`status-pill ${task.status}`}>{task.status}</p>
+                  </div>
+                  <p className="muted-text">{formatTime(task.created_at)}</p>
+                </div>
+
+                <p className="muted-text">
+                  clip {task.options.clip_seconds}s / mp4 {String(task.options.transcode_mp4)} / cover{' '}
+                  {String(task.options.generate_cover)} / hls {String(task.options.generate_hls)}
+                </p>
+
+                {task.error && <p className="error-text">{task.error}</p>}
+
+                <div className="result-grid">
+                  {task.result.mp4_url && (
+                    <div>
+                      <p>处理后视频</p>
+                      <video controls src={`${API_BASE}${task.result.mp4_url}`} />
+                    </div>
+                  )}
+                  {task.result.cover_url && (
+                    <div>
+                      <p>封面图</p>
+                      <img src={`${API_BASE}${task.result.cover_url}`} alt="cover" />
+                    </div>
+                  )}
+                  {task.result.hls_url && (
+                    <div className="hls-box">
+                      <p>HLS 播放清单</p>
+                      <a href={`${API_BASE}${task.result.hls_url}`} target="_blank" rel="noreferrer">
+                        打开 m3u8
+                      </a>
+                    </div>
+                  )}
+                </div>
+
+                <div className="log-box">
+                  {task.result.log.map((item, index) => (
+                    <p key={`${task.task_id}-${index}`}>{item}</p>
+                  ))}
+                </div>
+              </article>
+            ))}
+          </div>
+        </section>
+      </main>
+    </div>
+  )
+}
+
+export default App
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './styles.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -0,0 +1,264 @@
+:root {
+  color: #f5f1e8;
+  background:
+    radial-gradient(circle at top left, rgba(237, 123, 72, 0.22), transparent 28%),
+    radial-gradient(circle at top right, rgba(90, 153, 212, 0.22), transparent 32%),
+    linear-gradient(135deg, #111827, #1f2937 40%, #0f172a 100%);
+  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+}
+
+a {
+  color: #ffd79f;
+}
+
+button,
+input {
+  font: inherit;
+}
+
+.page-shell {
+  width: min(1180px, calc(100% - 32px));
+  margin: 0 auto;
+  padding: 32px 0 48px;
+}
+
+.hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
+  gap: 20px;
+  align-items: stretch;
+  margin-bottom: 24px;
+}
+
+.eyebrow {
+  margin: 0 0 12px;
+  font-size: 12px;
+  letter-spacing: 0.24em;
+  text-transform: uppercase;
+  color: #fca46b;
+}
+
+.hero h1 {
+  margin: 0;
+  font-size: clamp(40px, 8vw, 72px);
+  line-height: 0.95;
+}
+
+.hero-copy {
+  max-width: 680px;
+  color: #d8dee9;
+}
+
+.hero-card,
+.panel,
+.task-card {
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(17, 24, 39, 0.72);
+  backdrop-filter: blur(14px);
+  border-radius: 20px;
+  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.25);
+}
+
+.hero-card {
+  display: grid;
+  gap: 8px;
+  padding: 24px;
+  align-content: center;
+}
+
+.hero-card span {
+  color: #9fb3c8;
+  font-size: 14px;
+}
+
+.hero-card strong {
+  font-size: 22px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 20px;
+}
+
+.panel {
+  padding: 24px;
+}
+
+.full-width {
+  grid-column: 1 / -1;
+}
+
+.upload-box {
+  display: grid;
+  place-items: center;
+  min-height: 180px;
+  border: 1px dashed rgba(255, 255, 255, 0.3);
+  border-radius: 18px;
+  cursor: pointer;
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.upload-box input {
+  display: none;
+}
+
+.info-card,
+.log-box,
+.hls-box {
+  padding: 14px 16px;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.form-grid label,
+.checkboxes label {
+  display: grid;
+  gap: 8px;
+  font-size: 14px;
+  color: #d8dee9;
+}
+
+.form-grid input[type='number'],
+.form-grid input[type='text'] {
+  border: 0;
+  border-radius: 12px;
+  padding: 12px 14px;
+  color: #f5f1e8;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.checkboxes {
+  display: flex;
+  gap: 18px;
+  flex-wrap: wrap;
+  margin: 18px 0;
+}
+
+.primary-btn,
+.ghost-btn {
+  border: 0;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: transform 160ms ease, opacity 160ms ease;
+}
+
+.primary-btn {
+  padding: 12px 20px;
+  color: #111827;
+  background: linear-gradient(90deg, #ffd79f, #fca46b);
+  font-weight: 700;
+}
+
+.ghost-btn {
+  padding: 10px 16px;
+  color: #f5f1e8;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.primary-btn:hover,
+.ghost-btn:hover {
+  transform: translateY(-1px);
+}
+
+.panel-title,
+.task-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.task-list {
+  display: grid;
+  gap: 16px;
+}
+
+.task-card {
+  padding: 20px;
+}
+
+.task-id {
+  margin: 0;
+  font-size: 18px;
+}
+
+.status-pill {
+  display: inline-flex;
+  margin-top: 8px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  text-transform: uppercase;
+}
+
+.status-pill.queued {
+  background: rgba(250, 204, 21, 0.16);
+  color: #fde68a;
+}
+
+.status-pill.processing {
+  background: rgba(59, 130, 246, 0.18);
+  color: #bfdbfe;
+}
+
+.status-pill.completed {
+  background: rgba(74, 222, 128, 0.18);
+  color: #bbf7d0;
+}
+
+.status-pill.failed {
+  background: rgba(248, 113, 113, 0.18);
+  color: #fecaca;
+}
+
+.result-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 16px;
+  margin: 16px 0;
+}
+
+.result-grid video,
+.result-grid img {
+  width: 100%;
+  border-radius: 14px;
+  background: #000;
+}
+
+.log-box p,
+.muted-text,
+.error-text {
+  margin: 6px 0;
+}
+
+.muted-text {
+  color: #9fb3c8;
+}
+
+.error-text {
+  color: #fca5a5;
+}
+
+@media (max-width: 900px) {
+  .hero,
+  .grid,
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+}
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+  },
+})