241 lines
14 KiB
HTML
241 lines
14 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}AI 视频创作 - AI 视界{% endblock %}
|
||
|
||
{% block content %}
|
||
<!-- 中间：AI 功能设定区 -->
|
||
<aside
|
||
class="w-80 lg:w-[340px] flex-shrink-0 glass-sidebar flex flex-col z-30 border-r border-slate-200/60 shadow-xl bg-white/50 backdrop-blur-xl">
|
||
<div class="p-6 pb-2">
|
||
<h2 class="text-xl font-black text-slate-900 tracking-tight">AI 视频创作</h2>
|
||
<p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1">智能视频生成引擎</p>
|
||
</div>
|
||
|
||
<div class="flex-1 overflow-y-auto px-6 py-4 space-y-6 custom-scrollbar">
|
||
<section class="space-y-4">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-3">
|
||
<span
|
||
class="w-6 h-6 rounded-full bg-indigo-600 text-[10px] text-white flex items-center justify-center font-bold">01</span>
|
||
<h3 class="text-sm font-bold text-slate-800">账户状态</h3>
|
||
</div>
|
||
<!-- 积分显示 -->
|
||
<div id="pointsBadge"
|
||
class="{% if not g.user %}hidden{% endif %} px-2 py-0.5 bg-amber-50 text-amber-600 border border-amber-100 rounded-lg text-[10px] font-black uppercase">
|
||
可用积分: <span id="pointsDisplay">{{ g.user.points if g.user else 0 }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="premiumToggle"
|
||
class="flex items-center justify-between bg-amber-50/50 border border-amber-100/50 p-3 rounded-2xl animate-in fade-in duration-500">
|
||
<div class="flex items-center gap-2">
|
||
<div class="w-7 h-7 bg-amber-100 text-amber-600 rounded-lg flex items-center justify-center">
|
||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
||
</div>
|
||
<div>
|
||
<div class="text-[10px] font-black text-amber-700 uppercase tracking-tight">提示词增强优化</div>
|
||
<div class="text-[8px] text-amber-500 font-bold">针对镜像/英文模型深度优化</div>
|
||
</div>
|
||
</div>
|
||
<label class="relative inline-flex items-center cursor-pointer">
|
||
<input type="checkbox" id="enhancePrompt" checked class="sr-only peer">
|
||
<div
|
||
class="w-9 h-5 bg-slate-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-amber-500">
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="space-y-4">
|
||
<div class="flex items-center gap-3">
|
||
<span
|
||
class="w-6 h-6 rounded-full bg-indigo-600 text-[10px] text-white flex items-center justify-center font-bold">02</span>
|
||
<h3 class="text-sm font-bold text-slate-800">生成设定</h3>
|
||
</div>
|
||
<div class="space-y-3">
|
||
<div class="grid grid-cols-2 gap-3">
|
||
<div class="space-y-1.5">
|
||
<label
|
||
class="text-[10px] font-bold text-slate-400 uppercase tracking-widest ml-1 flex items-center gap-1.5"><i
|
||
data-lucide="cpu" class="w-3 h-3"></i>选择模型</label>
|
||
<select id="modelSelect"
|
||
class="w-full bg-white border border-slate-200 rounded-xl p-3 text-[10px] font-bold outline-none focus:border-indigo-500 transition-all">
|
||
<!-- 由 JS 动态填充 -->
|
||
</select>
|
||
</div>
|
||
<div class="space-y-1.5">
|
||
<label
|
||
class="text-[10px] font-bold text-slate-400 uppercase tracking-widest ml-1 flex items-center gap-1.5"><i
|
||
data-lucide="layout" class="w-3 h-3"></i>画面比例</label>
|
||
<select id="ratioSelect"
|
||
class="w-full bg-white border border-slate-200 rounded-xl p-3 text-[10px] font-bold outline-none focus:border-indigo-500 transition-all">
|
||
<option value="9:16">9:16 (竖屏)</option>
|
||
<option value="16:9">16:9 (横屏)</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 提示词模板列表 -->
|
||
<div class="space-y-1.5">
|
||
<label
|
||
class="text-[10px] font-bold text-slate-400 uppercase tracking-widest ml-1 flex items-center gap-1.5"><i
|
||
data-lucide="sparkles" class="w-3 h-3"></i>提示词推荐</label>
|
||
<div id="promptTemplates" class="flex flex-wrap gap-2 py-0.5">
|
||
<!-- 由 JS 动态填充 -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="rounded-2xl border border-slate-100 overflow-hidden bg-white shadow-sm">
|
||
<div
|
||
class="bg-slate-50 border-b border-slate-100 p-2 text-[10px] font-bold text-indigo-600 flex items-center gap-1">
|
||
<i data-lucide="text-quote" class="w-3.5 h-3.5"></i> 视频描述 (Prompt)
|
||
</div>
|
||
<textarea id="promptInput" rows="4"
|
||
class="w-full p-3 text-xs outline-none resize-none leading-relaxed"
|
||
placeholder="描述您想要生成的视频场景 (Veo 模型建议使用英文描述)..."></textarea>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="space-y-4 pb-2">
|
||
<div class="flex items-center gap-3">
|
||
<span
|
||
class="w-6 h-6 rounded-full bg-indigo-600 text-[10px] text-white flex items-center justify-center font-bold">03</span>
|
||
<h3 class="text-sm font-bold text-slate-800">首帧/参考图 (可选)</h3>
|
||
</div>
|
||
<div id="dropZone" class="relative group">
|
||
<div
|
||
class="border-2 border-dashed border-slate-100 rounded-3xl p-6 text-center bg-white/30 hover:border-indigo-200 transition-all cursor-pointer">
|
||
<i data-lucide="image-plus" class="w-6 h-6 mx-auto mb-2 text-slate-300"></i>
|
||
<p class="text-[10px] text-slate-400 font-bold">点击或拖拽首帧图片</p>
|
||
</div>
|
||
<input id="fileInput" type="file" class="absolute inset-0 opacity-0 cursor-pointer">
|
||
</div>
|
||
<div id="imagePreview" class="flex flex-wrap gap-3 py-1"></div>
|
||
<div class="flex items-start gap-1.5 p-3 rounded-xl bg-amber-50 border border-amber-100/50">
|
||
<i data-lucide="alert-triangle" class="w-3.5 h-3.5 text-amber-500 flex-shrink-0 mt-0.5"></i>
|
||
<p class="text-[10px] text-amber-600 font-bold leading-relaxed">
|
||
请确保上传图片的比例与上方选择的画面比例一致，否则可能会被自动裁切导致生成效果偏差。</p>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<div class="p-6 bg-white/95 border-t border-slate-100">
|
||
<button id="submitBtn"
|
||
class="w-full btn-primary py-4 rounded-2xl shadow-lg hover:scale-[1.02] active:scale-[0.98] gap-2 flex items-center justify-center">
|
||
<i data-lucide="clapperboard" class="w-5 h-5"></i>
|
||
<span class="text-base font-bold tracking-widest">开始生成视频</span>
|
||
</button>
|
||
<p id="loginHint" class="text-center text-[10px] text-slate-400 mt-2 {% if g.user %}hidden{% endif %}">
|
||
<i data-lucide="lock" class="w-2.5 h-2.5 inline"></i> 请先登录以使用生成功能
|
||
</p>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- 右侧：主展示 -->
|
||
<main class="flex-1 relative flex flex-col bg-slate-50 overflow-hidden">
|
||
<div class="h-24 flex items-center justify-between px-12 relative z-10">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-2.5 h-2.5 bg-indigo-500 rounded-full animate-ping"></div>
|
||
<span class="text-[10px] font-black text-slate-500 uppercase tracking-widest text-xs">渲染引擎就绪</span>
|
||
</div>
|
||
|
||
<div class="flex items-center gap-6">
|
||
<div id="userProfile"
|
||
class="{% if not g.user %}hidden{% endif %} flex items-center gap-3 bg-white/80 backdrop-blur-md px-4 py-2 rounded-2xl border border-white shadow-sm hover:bg-white transition-all">
|
||
<div class="w-8 h-8 bg-indigo-100 rounded-xl flex items-center justify-center text-indigo-600">
|
||
<i data-lucide="user" class="w-4 h-4"></i>
|
||
</div>
|
||
<div class="flex flex-col">
|
||
<span id="userPhoneDisplay" class="text-xs font-bold text-slate-600">{{ g.user.phone[:3] ~ "****" ~
|
||
g.user.phone[-4:] if g.user else "--" }}</span>
|
||
<span class="text-[9px] font-black text-amber-600 uppercase">余额: <span id="headerPoints">{{
|
||
g.user.points if g.user else 0 }}</span> 积分</span>
|
||
</div>
|
||
</div>
|
||
<a id="loginEntryBtn" href="/login"
|
||
class="{% if g.user %}hidden{% endif %} bg-indigo-600 text-white px-6 py-2.5 rounded-2xl text-xs font-bold shadow-lg shadow-indigo-200 hover:bg-indigo-700 transition-all">
|
||
立即登录
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex-1 flex flex-col pt-4 relative overflow-hidden min-h-0">
|
||
<!-- 状态提示 -->
|
||
<div id="statusInfo" class="absolute top-4 left-1/2 -translate-x-1/2 hidden z-20">
|
||
<div
|
||
class="bg-white/90 backdrop-blur-xl border border-indigo-100 px-6 py-3 rounded-2xl shadow-xl flex items-center gap-3">
|
||
<div class="w-2 h-2 bg-indigo-500 rounded-full animate-bounce"></div>
|
||
<span class="text-xs font-black text-slate-600 uppercase tracking-widest">AI 正在导演您的视频...</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="resultCanvas" class="flex-1 w-full px-8 pb-12 overflow-y-auto custom-scrollbar">
|
||
<!-- 初始/空状态 + 历史列表容器 -->
|
||
<div id="placeholder" class="space-y-12">
|
||
<!-- 欢迎头部 -->
|
||
<div class="text-center pt-8 pb-4">
|
||
<div
|
||
class="w-24 h-24 bg-white rounded-[2.5rem] shadow-2xl flex items-center justify-center rotate-6 mx-auto mb-6 border border-slate-100">
|
||
<i data-lucide="video" class="w-10 h-10 text-indigo-500"></i>
|
||
</div>
|
||
<h2 class="text-3xl font-black text-slate-900 mb-2 leading-tight">动态光影 · 视觉盛宴</h2>
|
||
<p class="text-slate-400 text-sm font-medium">输入一段描述，见证 AI 创造的电影瞬间</p>
|
||
</div>
|
||
|
||
<!-- 历史栅格 -->
|
||
<div class="max-w-6xl mx-auto space-y-6">
|
||
<div class="flex items-center justify-between px-2">
|
||
<h3 class="text-sm font-black text-slate-900 flex items-center gap-2">
|
||
<i data-lucide="history" class="w-4 h-4 text-indigo-500"></i> 我的创作历史
|
||
<span id="historyCount"
|
||
class="ml-1 px-2 py-0.5 bg-indigo-50 text-indigo-400 rounded-md text-[9px] font-bold">0</span>
|
||
</h3>
|
||
</div>
|
||
|
||
<div id="historyList" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||
<!-- 历史记录小卡片由 JS 填充 -->
|
||
</div>
|
||
|
||
<div id="historyEmpty"
|
||
class="hidden py-20 text-center bg-white/50 rounded-[2.5rem] border-2 border-dashed border-slate-100">
|
||
<i data-lucide="inbox" class="w-8 h-8 mx-auto mb-3 text-slate-200"></i>
|
||
<p class="text-xs font-bold text-slate-300">暂无作品，立即开始您的第一次创作</p>
|
||
</div>
|
||
|
||
<div id="loadMoreBtn" class="hidden flex justify-center py-8">
|
||
<button
|
||
class="px-8 py-3 bg-white border border-slate-100 hover:border-indigo-200 text-slate-400 hover:text-indigo-600 text-xs font-bold rounded-2xl shadow-sm transition-all hover:scale-105 active:scale-95">查看更多历史作品</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 视频播放区 -->
|
||
<div id="finalWrapper"
|
||
class="hidden min-h-[70vh] w-full flex flex-col items-center justify-center animate-in fade-in zoom-in-95 duration-700">
|
||
<div
|
||
class="w-full max-w-4xl aspect-video bg-black rounded-[2.5rem] shadow-2xl overflow-hidden relative group">
|
||
<video id="resultVideo" class="w-full h-full object-contain" controls></video>
|
||
</div>
|
||
|
||
<!-- 操作栏 -->
|
||
<div class="mt-8 flex items-center gap-6">
|
||
<button id="downloadBtn"
|
||
class="btn-primary px-10 py-4 rounded-3xl text-sm font-bold shadow-xl shadow-indigo-100 flex items-center gap-3">
|
||
<i data-lucide="download" class="w-5 h-5"></i>
|
||
<span>保存此视频</span>
|
||
</button>
|
||
<button id="closePreviewBtn"
|
||
class="w-16 h-16 bg-white border border-slate-100 rounded-3xl flex items-center justify-center text-slate-400 shadow-xl hover:text-indigo-600 transition-all hover:scale-110 active:scale-95">
|
||
<i data-lucide="layout-grid" class="w-6 h-6"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script src="{{ url_for('static', filename='js/video.js') }}"></script>
|
||
{% endblock %} |