diff --git a/backend/apps/generation/views.py b/backend/apps/generation/views.py index 685e3a7..fb3a1c1 100644 --- a/backend/apps/generation/views.py +++ b/backend/apps/generation/views.py @@ -333,6 +333,13 @@ def video_generate_view(request): continue seen_urls.add(original_url) + # 拦截 blob: URL（前端上传失败的兜底） + if url.startswith('blob:'): + return Response({ + 'error': 'upload_failed', + 'message': f'素材「{label}」上传失败，请删除后重新添加', + }, status=status.HTTP_400_BAD_REQUEST) + # 快照存原始 URL（前端重建 reEdit 需要 asset://group-{id} 格式） snap = {'url': original_url, 'type': ref_type, 'role': role, 'label': label} thumb_url = ref.get('thumb_url', '') diff --git a/backend/utils/airdrama_client.py b/backend/utils/airdrama_client.py index 6eeaf6a..2796085 100644 --- a/backend/utils/airdrama_client.py +++ b/backend/utils/airdrama_client.py @@ -21,6 +21,8 @@ ERROR_MESSAGES = { 'InvalidImage': '图片格式或尺寸不符合要求，请检查后重试', 'InvalidVideo': '视频格式或尺寸不符合要求，请检查后重试', 'InvalidAudio': '音频格式不符合要求，请检查后重试', + 'AudioDurationExceeded': '音频总时长超过15秒限制，请缩短音频后重试', + 'AudioFormatNotSupported': '音频格式不支持，请使用 MP3 或 WAV 格式', # Rate limit 'RateLimitExceeded': '请求过于频繁，请稍后重试', 'ConcurrencyLimitExceeded': '当前生成任务过多，请稍后重试', @@ -41,6 +43,8 @@ _MESSAGE_KEYWORDS = { 'sensitive': '内容包含敏感信息，请修改后重试', 'not found': '引用的素材不存在或已被删除，请检查素材库', 'not valid': '请求参数无效，请检查输入内容', + 'audio duration': '音频总时长超过15秒限制，请缩短音频后重试', + 'audio': '音频不符合要求（支持MP3/WAV，单条2-15秒，总时长≤15秒）', } diff --git a/web/nginx.conf b/web/nginx.conf index 2f0346d..a3a2203 100644 --- a/web/nginx.conf +++ b/web/nginx.conf @@ -24,6 +24,11 @@ server { client_max_body_size 50m; } + # SPA client-side routes — must return index.html, not match Vite's dist/assets/ dir + location ~ ^/(assets|login|profile|admin|team)(/|$) { + try_files /index.html =404; + } + # SPA fallback location / { try_files $uri $uri/ /index.html; diff --git a/web/src/components/InputBar.tsx b/web/src/components/InputBar.tsx index 472166a..e419647 100644 --- a/web/src/components/InputBar.tsx +++ b/web/src/components/InputBar.tsx @@ -43,6 +43,16 @@ export function InputBar() { const valid: File[] = []; for (const f of files) { + // Format validation + if (f.type.startsWith('video/') && f.type !== 'video/mp4' && f.type !== 'video/quicktime') { + showToast('仅支持 MP4 和 MOV 格式的视频'); + continue; + } + if (f.type.startsWith('audio/') && f.type !== 'audio/mpeg' && f.type !== 'audio/wav') { + showToast('仅支持 MP3 和 WAV 格式的音频'); + continue; + } + // Size validation let limit: number; let limitLabel: string; if (f.type.startsWith('video/')) { diff --git a/web/src/components/Toast.module.css b/web/src/components/Toast.module.css index d66af2c..172cdc2 100644 --- a/web/src/components/Toast.module.css +++ b/web/src/components/Toast.module.css @@ -3,8 +3,14 @@ top: 20px; left: 50%; transform: translateX(-50%) translateY(-20px); - background: var(--color-bg-dropdown); - border: 1px solid var(--color-border-input-bar); + background: rgba(255, 255, 255, 0.06); + backdrop-filter: blur(24px) saturate(180%); + -webkit-backdrop-filter: blur(24px) saturate(180%); + border: 1px solid rgba(255, 255, 255, 0.10); + box-shadow: + 0 0 0 1px rgba(255, 255, 255, 0.05) inset, + 0 8px 32px rgba(0, 0, 0, 0.4), + 0 1px 0 rgba(255, 255, 255, 0.12) inset; color: #fff; padding: 10px 24px; border-radius: 10px; @@ -13,6 +19,23 @@ pointer-events: none; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); z-index: 999; + display: flex; + align-items: center; + gap: 8px; +} + +.icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 18px; + height: 18px; + border-radius: 50%; + background: #e8952e; + color: #fff; + font-size: 12px; + font-weight: bold; + flex-shrink: 0; } .show { diff --git a/web/src/components/Toast.tsx b/web/src/components/Toast.tsx index 950b438..5f5ffd3 100644 --- a/web/src/components/Toast.tsx +++ b/web/src/components/Toast.tsx @@ -24,6 +24,7 @@ export function Toast() { return (
+ ! {message}
); diff --git a/web/src/components/UniversalUpload.module.css b/web/src/components/UniversalUpload.module.css index b4923b1..a24bce6 100644 --- a/web/src/components/UniversalUpload.module.css +++ b/web/src/components/UniversalUpload.module.css @@ -281,3 +281,28 @@ background: #1a1a24; color: var(--color-text-secondary); } + +/* Upload status overlay */ +.uploadOverlay { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + background: rgba(0, 0, 0, 0.5); + border-radius: var(--radius-thumbnail); + z-index: 2; +} + +.uploadError { + background: rgba(239, 68, 68, 0.25); + cursor: pointer; +} + +@keyframes spin { + to { transform: rotate(360deg); } +} + +.spinner { + animation: spin 1s linear infinite; +} diff --git a/web/src/components/UniversalUpload.tsx b/web/src/components/UniversalUpload.tsx index 2804955..647888f 100644 --- a/web/src/components/UniversalUpload.tsx +++ b/web/src/components/UniversalUpload.tsx @@ -5,6 +5,19 @@ import { ImageLightbox } from './ImageLightbox'; import { tosThumb } from '../lib/api'; import styles from './UniversalUpload.module.css'; +const Spinner = () => ( + + + +); + +const ErrorIcon = () => ( + + + ! + +); + const MAX_IMAGE_SIZE = 30 * 1024 * 1024; // 30MB per API doc const MAX_VIDEO_SIZE = 50 * 1024 * 1024; // 50MB per API doc const MAX_AUDIO_SIZE = 15 * 1024 * 1024; // 15MB per API doc @@ -25,6 +38,7 @@ export function UniversalUpload() { const references = useInputBarStore((s) => s.references); const addReferences = useInputBarStore((s) => s.addReferences); const removeReference = useInputBarStore((s) => s.removeReference); + const retryUpload = useInputBarStore((s) => s.retryUpload); const fileInputRef = useRef(null); const [expanded, setExpanded] = useState(false); const [badgeHover, setBadgeHover] = useState(false); @@ -40,6 +54,16 @@ export function UniversalUpload() { const valid: File[] = []; for (const f of files) { + // Format validation + if (f.type.startsWith('video/') && f.type !== 'video/mp4' && f.type !== 'video/quicktime') { + showToast('仅支持 MP4 和 MOV 格式的视频'); + continue; + } + if (f.type.startsWith('audio/') && f.type !== 'audio/mpeg' && f.type !== 'audio/wav') { + showToast('仅支持 MP3 和 WAV 格式的音频'); + continue; + } + // Size validation let limit: number; let limitLabel: string; if (f.type.startsWith('video/')) { @@ -83,7 +107,7 @@ export function UniversalUpload() { { e.stopPropagation(); setLightboxSrc(ref.previewUrl); }} /> )} + {/* Upload status overlay */} + {ref.uploading && ( +
+ +
+ )} + {ref.uploadError && ( +
{ e.stopPropagation(); retryUpload(ref.id); }} + title="点击重试" + > + +
+ )}
{ e.stopPropagation(); removeReference(ref.id); }} diff --git a/web/src/lib/api.ts b/web/src/lib/api.ts index 21055ed..359e9cb 100644 --- a/web/src/lib/api.ts +++ b/web/src/lib/api.ts @@ -129,7 +129,7 @@ export const mediaApi = { formData.append('file', file); return api.post<{ url: string; - type: 'image' | 'video'; + type: 'image' | 'video' | 'audio'; filename: string; size: number; }>('/media/upload', formData, { diff --git a/web/src/pages/AssetsPage.tsx b/web/src/pages/AssetsPage.tsx index 8f827b6..d1c3759 100644 --- a/web/src/pages/AssetsPage.tsx +++ b/web/src/pages/AssetsPage.tsx @@ -88,6 +88,9 @@ function VideoThumbnail({ export function AssetsPage() { const tasks = useGenerationStore((s) => s.tasks); const loadTasks = useGenerationStore((s) => s.loadTasks); + const loadMore = useGenerationStore((s) => s.loadMore); + const hasMore = useGenerationStore((s) => s.hasMore); + const isLoadingMore = useGenerationStore((s) => s.isLoadingMore); const reEdit = useGenerationStore((s) => s.reEdit); const regenerate = useGenerationStore((s) => s.regenerate); const removeTask = useGenerationStore((s) => s.removeTask); @@ -102,8 +105,9 @@ export function AssetsPage() { const [subTab, setSubTab] = useState<'all' | 'favorites'>('all'); + // Reverse: newest first for asset page (store keeps oldest-first for generation page) const completedTasks = useMemo( - () => tasks.filter((t) => t.status === 'completed'), + () => tasks.filter((t) => t.status === 'completed').slice().reverse(), [tasks], ); @@ -160,20 +164,41 @@ export function AssetsPage() {

{subTab === 'favorites' ? '暂无收藏的视频' : '暂无已完成的视频'}

) : ( - dateGroups.map((group) => ( -
-

{group.label}

-
- {group.tasks.map((task) => ( - setDetailTask(task)} - /> - ))} + <> + {dateGroups.map((group) => ( +
+

{group.label}

+
+ {group.tasks.map((task) => ( + setDetailTask(task)} + /> + ))} +
+
+ ))} + {hasMore && ( +
+
-
- )) + )} + )} diff --git a/web/src/store/generation.ts b/web/src/store/generation.ts index 65b03ea..f7503af 100644 --- a/web/src/store/generation.ts +++ b/web/src/store/generation.ts @@ -409,13 +409,14 @@ export const useGenerationStore = create((set, get) => ({ }); try { - // Upload files to TOS (or reuse existing TOS URLs) + // Use pre-uploaded TOS URLs (immediate upload), fallback to upload here if needed const uploadedRefs: { url: string; type: string; role: string; label: string; thumb_url?: string }[] = []; for (const item of filesToUpload) { - if (item.tosUrl) { + if (item.tosUrl && !item.tosUrl.startsWith('blob:')) { uploadedRefs.push({ url: item.tosUrl, type: item.type, role: item.role, label: item.label }); } else if (item.file) { + // Fallback: file wasn't pre-uploaded (shouldn't normally happen with immediate upload) const { data: uploadResult } = await mediaApi.upload(item.file); uploadedRefs.push({ url: uploadResult.url, type: item.type, role: item.role, label: item.label }); } diff --git a/web/src/store/inputBar.ts b/web/src/store/inputBar.ts index 05066a0..2c8eeb8 100644 --- a/web/src/store/inputBar.ts +++ b/web/src/store/inputBar.ts @@ -1,9 +1,31 @@ import { create } from 'zustand'; import type { CreationMode, ModelOption, AspectRatio, Duration, GenerationType, UploadedFile } from '../types'; import { showToast } from '../components/Toast'; +import { mediaApi } from '../lib/api'; let fileCounter = 0; +/** Read duration of an audio or video file via HTML5 media element. */ +function getMediaDuration(file: File): Promise { + return new Promise((resolve, reject) => { + const el = file.type.startsWith('audio/') ? new Audio() : document.createElement('video'); + const url = URL.createObjectURL(file); + const cleanup = () => URL.revokeObjectURL(url); + const timeout = setTimeout(() => { cleanup(); reject(new Error('timeout')); }, 10000); + el.addEventListener('loadedmetadata', () => { + clearTimeout(timeout); + resolve(el.duration); + cleanup(); + }); + el.addEventListener('error', () => { + clearTimeout(timeout); + reject(new Error('无法读取媒体文件')); + cleanup(); + }); + el.src = url; + }); +} + // API limits per Seedance 2.0 official doc const MAX_IMAGES = 9; const MAX_VIDEOS = 3; @@ -46,6 +68,7 @@ interface InputBarState { addReferences: (files: File[]) => void; removeReference: (id: string) => void; clearReferences: () => void; + retryUpload: (refId: string) => void; // Keyframe firstFrame: UploadedFile | null; @@ -118,7 +141,10 @@ export const useInputBarStore = create((set, get) => ({ const counts = { image: 0, video: 0, audio: 0 }; for (const ref of state.references) counts[ref.type]++; - const newRefs: UploadedFile[] = []; + // Separate images (sync) from audio/video (need async duration check) + const imageFiles: File[] = []; + const mediaFiles: File[] = []; // audio + video + for (const file of files) { const type: 'image' | 'video' | 'audio' = file.type.startsWith('video/') ? 'video' @@ -132,25 +158,40 @@ export const useInputBarStore = create((set, get) => ({ showToast(label); continue; } - - fileCounter++; - const labelPrefix = type === 'video' ? '视频' : type === 'audio' ? '音频' : '图片'; - // 编号接着已有的同类型素材（包括 @ 引用的 assetMentions） - const existingSameType = state.references.filter(r => r.type === type).length - + newRefs.filter(r => r.type === type).length - + (state.assetMentions || []).filter((m: Record) => m.type === type).length; - newRefs.push({ - id: `ref_${fileCounter}`, - file, - type, - previewUrl: type === 'audio' ? '' : URL.createObjectURL(file), - label: `${labelPrefix}${existingSameType + 1}`, - }); counts[type]++; + + if (type === 'image') { + imageFiles.push(file); + } else { + mediaFiles.push(file); + } } - if (newRefs.length > 0) { + + // ── Sync: add images immediately + start upload ── + if (imageFiles.length > 0) { + const baseCount = state.references.filter(r => r.type === 'image').length + + (state.assetMentions || []).filter((m: Record) => m.type === 'image').length; + const newRefs: UploadedFile[] = imageFiles.map((file, i) => { + fileCounter++; + const ref: UploadedFile = { + id: `ref_${fileCounter}`, + file, + type: 'image', + previewUrl: URL.createObjectURL(file), + label: `图片${baseCount + i + 1}`, + uploading: true, + }; + // Fire upload in background + _uploadRef(ref.id, file); + return ref; + }); set({ references: [...state.references, ...newRefs] }); } + + // ── Async: validate audio/video duration, then add + upload ── + if (mediaFiles.length > 0) { + _validateAndAddMedia(mediaFiles); + } }, removeReference: (id) => { const state = get(); @@ -163,6 +204,16 @@ export const useInputBarStore = create((set, get) => ({ state.references.forEach((r) => URL.revokeObjectURL(r.previewUrl)); set({ references: [] }); }, + retryUpload: (refId) => { + const ref = get().references.find((r) => r.id === refId); + if (!ref?.file) return; + set({ + references: get().references.map((r) => + r.id === refId ? { ...r, uploading: true, uploadError: false } : r + ), + }); + _uploadRef(refId, ref.file); + }, firstFrame: null, lastFrame: null, @@ -216,6 +267,8 @@ export const useInputBarStore = create((set, get) => ({ const hasImageOrVideo = state.references.some((r) => r.type === 'image' || r.type === 'video'); if (!hasImageOrVideo && !hasText) return false; } + // Block submit if any reference is still uploading or failed + if (state.references.some((r) => r.uploading || r.uploadError)) return false; return true; }, @@ -290,3 +343,93 @@ export const useInputBarStore = create((set, get) => ({ }); }, })); + +// ── Module-level helpers (use useInputBarStore late-binding) ── + +/** Upload a single reference file to TOS and update the store. */ +function _uploadRef(refId: string, file: File) { + mediaApi.upload(file).then(({ data }) => { + useInputBarStore.setState((s) => ({ + references: s.references.map((r) => + r.id === refId ? { ...r, tosUrl: data.url, uploading: false, uploadError: false } : r + ), + })); + }).catch(() => { + useInputBarStore.setState((s) => ({ + references: s.references.map((r) => + r.id === refId ? { ...r, uploading: false, uploadError: true } : r + ), + })); + }); +} + +const MAX_MEDIA_DURATION = 15; // seconds per item and total + +/** Validate audio/video duration, then add to store + start upload. */ +async function _validateAndAddMedia(files: File[]) { + for (const file of files) { + const type: 'video' | 'audio' = file.type.startsWith('video/') ? 'video' : 'audio'; + const typeLabel = type === 'video' ? '视频' : '音频'; + + // Read duration + let dur: number; + try { + dur = await getMediaDuration(file); + } catch { + showToast(`无法读取${typeLabel}文件信息`); + continue; + } + + // Single item duration check + // API specifies [2, 15]s — lower bound strict, upper bound +0.4s for codec imprecision + if (dur < 2) { + showToast(`${typeLabel}时长不能少于2秒`); + continue; + } + if (dur > MAX_MEDIA_DURATION + 0.4) { + showToast(`单条${typeLabel}时长不能超过${MAX_MEDIA_DURATION}秒`); + continue; + } + + // Total duration check (same type) + const state = useInputBarStore.getState(); + const existingDuration = state.references + .filter((r) => r.type === type && r.duration) + .reduce((sum, r) => sum + (r.duration || 0), 0); + if (existingDuration + dur > MAX_MEDIA_DURATION + 0.4) { + showToast(`${typeLabel}总时长不能超过${MAX_MEDIA_DURATION}秒`); + continue; + } + + // Re-check count (may have changed since initial check) + const currentCount = state.references.filter((r) => r.type === type).length; + const max = type === 'video' ? MAX_VIDEOS : MAX_AUDIO; + if (currentCount >= max) { + showToast(`最多上传${max}个${typeLabel}`); + continue; + } + + // Passed all checks — add to store + fileCounter++; + const labelPrefix = type === 'video' ? '视频' : '音频'; + const existingSameType = state.references.filter(r => r.type === type).length + + (state.assetMentions || []).filter((m: Record) => m.type === type).length; + const refId = `ref_${fileCounter}`; + const newRef: UploadedFile = { + id: refId, + file, + type, + previewUrl: type === 'audio' ? '' : URL.createObjectURL(file), + label: `${labelPrefix}${existingSameType + 1}`, + uploading: true, + duration: Math.round(dur * 10) / 10, + }; + + useInputBarStore.setState((s) => ({ + references: [...s.references, newRef], + })); + + // Start upload + _uploadRef(refId, file); + } +} diff --git a/web/src/types/index.ts b/web/src/types/index.ts index 55b8156..cc60b32 100644 --- a/web/src/types/index.ts +++ b/web/src/types/index.ts @@ -12,6 +12,9 @@ export interface UploadedFile { previewUrl: string; label: string; tosUrl?: string; // TOS URL after upload + uploading?: boolean; + uploadError?: boolean; + duration?: number; // media duration in seconds (audio/video only) } export interface DropdownOption {