forked from sorker/ai-shotlive
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
351 lines (336 loc) · 14.2 KB
/
index.html
File metadata and controls
351 lines (336 loc) · 14.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<script>
(function(){
var t = localStorage.getItem('aishotlive_theme');
document.documentElement.setAttribute('data-theme', t === 'light' ? 'light' : 'dark');
})();
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Primary Meta Tags -->
<title>AI shotlive Director - AI 漫剧生成平台 | 一键从剧本到成片的智能短剧制作工具</title>
<meta name="title" content="AI shotlive Director - AI 漫剧生成平台 | 一键从剧本到成片的智能短剧制作工具" />
<meta name="description" content="AI shotlive Director 是工业级 AI 漫剧与短视频生成工作台。采用关键帧驱动工作流，支持 AI 剧本拆解、角色一致性定妆、智能分镜生成、Veo/Sora 视频合成，一句话生成完整短剧。免费使用，无需后端，数据本地存储。" />
<meta name="keywords" content="AI漫剧,AI短剧生成,AI视频制作,动态漫画制作,AI分镜,AI导演工具,关键帧生成,角色一致性,Motion Comics,Animatic,Veo视频生成,Sora视频,AI剧本创作,漫剧工场,短视频制作,AI绘画,Gemini绘图,GPT剧本,免费AI工具,视频自动化" />
<meta name="author" content="AiShotlive Team" />
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
<meta name="language" content="zh-CN" />
<meta name="revisit-after" content="3 days" />
<meta name="rating" content="general" />
<meta name="distribution" content="global" />
<meta name="generator" content="AI shotlive Director" />
<!-- Alternate Languages -->
<link rel="alternate" hreflang="zh-CN" href="/" />
<link rel="alternate" hreflang="en" href="/" />
<link rel="alternate" hreflang="ja" href="/" />
<link rel="alternate" hreflang="x-default" href="/" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="/" />
<meta property="og:title" content="AI shotlive Director - AI 漫剧生成平台 | 从剧本到成片全自动化" />
<meta property="og:description" content="工业级 AI 漫剧与短视频生成工作台。采用关键帧驱动工作流，AI 智能剧本拆解、角色一致性保证、Veo/Sora 视频合成，一句话生成完整短剧。免费使用，数据本地存储。" />
<meta property="og:image" content="/UI.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="AI shotlive Director 工作台界面截图 - AI 漫剧生成平台" />
<meta property="og:locale" content="zh_CN" />
<meta property="og:locale:alternate" content="en_US" />
<meta property="og:locale:alternate" content="ja_JP" />
<meta property="og:site_name" content="AI shotlive Director" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="/" />
<meta name="twitter:title" content="AI shotlive Director - AI 漫剧生成平台 | 从剧本到成片全自动化" />
<meta name="twitter:description" content="工业级 AI 漫剧与短视频生成工作台。关键帧驱动工作流 + 角色一致性保证 + Veo/Sora 视频合成，一句话生成完整短剧。" />
<meta name="twitter:image" content="/UI.png" />
<meta name="twitter:image:alt" content="AI shotlive Director 工作台界面截图" />
<!-- Canonical URL -->
<link rel="canonical" href="/" />
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="/logo.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/logo.png" />
<!-- Theme Color -->
<meta name="theme-color" content="#050505" media="(prefers-color-scheme: dark)" />
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
<meta name="msapplication-TileColor" content="#050505" />
<meta name="msapplication-TileImage" content="/logo.png" />
<meta name="apple-mobile-web-app-title" content="AI漫剧工场" />
<meta name="application-name" content="AI shotlive Director" />
<!-- Structured Data: SoftwareApplication (JSON-LD) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "AI shotlive Director",
"alternateName": ["AI漫剧工场", "AI shotlive 漫剧生成平台"],
"applicationCategory": "MultimediaApplication",
"applicationSubCategory": "Video Production",
"operatingSystem": "Web Browser (Chrome, Firefox, Edge, Safari)",
"description": "AI shotlive Director 是工业级 AI 漫剧与短视频生成工作台，采用 Script-to-Asset-to-Keyframe 工业化工作流，支持 AI 剧本拆解、角色一致性定妆、智能分镜生成和视频合成。",
"url": "/",
"downloadUrl": "https://github.com/shuyu-labs/ai-shotlive-Director",
"installUrl": "/",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "CNY",
"availability": "https://schema.org/InStock"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"ratingCount": "156",
"bestRating": "5",
"worstRating": "1"
},
"creator": {
"@type": "Organization",
"name": "AiShotlive Team",
"url": "#"
},
"featureList": [
"AI 智能剧本拆解与分镜生成",
"角色一致性定妆与衣橱系统",
"关键帧驱动视频生成",
"Veo 3.1 / Sora 2 视频合成",
"GPT-5.1 高智能剧本分析",
"Gemini 3 Pro 高速绘图",
"工业化生产流程",
"本地 IndexedDB 数据存储",
"时间轴实时预览",
"高清关键帧与 MP4 导出"
],
"screenshot": "/UI.png",
"softwareVersion": "1.0.0",
"releaseNotes": "支持 GPT-5.1 剧本分析、Gemini 3 Pro 绘图、Veo 3.1 视频生成",
"inLanguage": ["zh-CN", "en", "ja"],
"isAccessibleForFree": true
}
</script>
<!-- Structured Data: WebApplication (JSON-LD) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "AI shotlive Director",
"url": "/",
"description": "AI 一站式短剧/漫剧生成平台，从灵感到成片的高效生产工具",
"applicationCategory": "MultimediaApplication",
"browserRequirements": "requires JavaScript, modern browser (Chrome 90+, Firefox 90+, Edge 90+, Safari 15+)",
"permissions": "IndexedDB storage",
"operatingSystem": "Any (Web-based)",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "CNY"
}
}
</script>
<!-- Structured Data: Organization (JSON-LD) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "AiShotlive Team",
"url": "#",
"logo": "/logo.png",
"sameAs": [
"https://github.com/shuyu-labs/ai-shotlive-Director"
],
"contactPoint": {
"@type": "ContactPoint",
"email": "antskpro@qq.com",
"contactType": "customer support"
}
}
</script>
<!-- Structured Data: FAQPage (JSON-LD) - 提升搜索结果丰富度 -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "AI shotlive Director 是什么？",
"acceptedAnswer": {
"@type": "Answer",
"text": "AI shotlive Director 是一个工业级 AI 漫剧与短视频生成工作台，采用 Script-to-Asset-to-Keyframe 工作流，支持从剧本创作到成片导出的全流程自动化。"
}
},
{
"@type": "Question",
"name": "AI shotlive Director 需要付费吗？",
"acceptedAnswer": {
"@type": "Answer",
"text": "AI shotlive Director 工具本身完全免费，数据存储在本地浏览器中，无需注册。但使用 AI 模型生成内容需要配置 AntSK API Key，API 调用按量计费。"
}
},
{
"@type": "Question",
"name": "支持哪些 AI 模型？",
"acceptedAnswer": {
"@type": "Answer",
"text": "支持 GPT-5.1（智能剧本分析）、Gemini 3 Pro（高速绘图）、Veo 3.1 和 Sora 2（视频生成与关键帧插值）等多种先进 AI 模型。"
}
},
{
"@type": "Question",
"name": "数据安全吗？",
"acceptedAnswer": {
"@type": "Answer",
"text": "所有项目数据均存储在浏览器本地的 IndexedDB 中，不上传任何服务器，完全保障数据隐私安全。"
}
}
]
}
</script>
<!-- Structured Data: BreadcrumbList (JSON-LD) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "首页",
"item": "/"
}
]
}
</script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<style>
/* 完整变量回退（暗色），避免主题 CSS 加载前无变量 */
:root {
--bg-base: #050505;
--bg-primary: #0A0A0A;
--bg-secondary: #121212;
--bg-surface: #141414;
--bg-elevated: #1A1A1A;
--bg-deep: #0F0F0F;
--bg-sunken: #080808;
--bg-hover: #27272a;
--border-primary: #27272a;
--border-secondary: #3f3f46;
--border-subtle: #18181b;
--text-primary: #ffffff;
--text-secondary: #d4d4d8;
--text-tertiary: #a1a1aa;
--text-muted: #71717a;
--scrollbar-track: #0a0a0a;
--scrollbar-thumb: #333;
--scrollbar-thumb-hover: #555;
--glass-bg: rgba(20, 20, 20, 0.6);
--glass-border: rgba(255, 255, 255, 0.08);
--nav-active-bg: rgba(39, 39, 42, 0.5);
--nav-hover-bg: rgba(39, 39, 42, 0.3);
--btn-primary-bg: #ffffff;
--btn-primary-text: #000000;
--btn-primary-hover: #e4e4e7;
--btn-primary-shadow: rgba(255, 255, 255, 0.05);
--btn-selected-bg: #f4f4f5;
--btn-selected-border: #f4f4f5;
--overlay-heavy: rgba(0, 0, 0, 0.8);
--overlay-medium: rgba(0, 0, 0, 0.6);
--overlay-light: rgba(0, 0, 0, 0.3);
--overlay-full: rgba(0, 0, 0, 0.95);
--overlay-border: rgba(255, 255, 255, 0.1);
--selection-bg: rgba(255, 255, 255, 0.2);
--accent: #818cf8;
--accent-hover: #6366f1;
--accent-muted: #6366f1;
--accent-bg: rgba(99, 102, 241, 0.15);
--accent-bg-hover: rgba(99, 102, 241, 0.25);
--accent-border: rgba(99, 102, 241, 0.3);
--accent-text: #a5b4fc;
--accent-text-hover: #c7d2fe;
--accent-on: #ffffff;
--accent-shadow: rgba(99, 102, 241, 0.2);
--toggle-active: #818cf8;
--toggle-inactive: var(--border-secondary);
--toggle-knob: #ffffff;
--success: #34d399;
--success-text: #6ee7b7;
--success-bg: rgba(52, 211, 153, 0.1);
--success-border: rgba(52, 211, 153, 0.3);
--error: #f87171;
--error-text: #fca5a5;
--error-bg: rgba(248, 113, 113, 0.1);
--error-border: rgba(248, 113, 113, 0.3);
--error-hover-bg: rgba(127, 29, 29, 0.2);
--error-hover-bg-strong: rgba(127, 29, 29, 0.4);
--warning: #fbbf24;
--warning-text: #fcd34d;
--warning-bg: rgba(251, 191, 36, 0.1);
--warning-border: rgba(251, 191, 36, 0.3);
--info: #60a5fa;
--info-text: #93c5fd;
--info-bg: rgba(96, 165, 250, 0.1);
--info-border: rgba(96, 165, 250, 0.3);
--tag-purple: #c084fc;
--tag-purple-bg: rgba(192, 132, 252, 0.1);
--tag-purple-border: rgba(192, 132, 252, 0.3);
--tag-purple-hover: rgba(192, 132, 252, 0.1);
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--bg-base);
color: var(--text-secondary);
transition: background-color 0.2s ease, color 0.2s ease;
}
/* Sony Style Scrollbar - Thin, Rectangular */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-thumb-hover);
}
.font-mono {
font-family: 'JetBrains Mono', monospace;
}
/* 全局 select/option 样式 - 确保亮色主题下下拉框可读 */
select option {
background-color: var(--bg-surface);
color: var(--text-primary);
}
/* Utilities */
.glass-panel {
background: var(--glass-bg);
backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
}
</style>
<!-- 主题 CSS 放在 <style> 之后，确保 [data-theme] 的变量优先级高于 :root 回退 -->
<link rel="stylesheet" href="/styles/theme-dark.css" />
<link rel="stylesheet" href="/styles/theme-light.css" />
<script type="importmap">
{
"imports": {
"react": "https://aistudiocdn.com/react@^19.2.0",
"react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
"react/": "https://aistudiocdn.com/react@^19.2.0/",
"@google/genai": "https://aistudiocdn.com/@google/genai@^1.30.0",
"lucide-react": "https://aistudiocdn.com/lucide-react@^0.554.0"
}
}
</script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/index.tsx"></script>
</body>
</html>