多模型创意视频生成平台
将设计一个展示如何整合通义万象、DeepSeek和Qwen-Image等多个模型的HTML演示页面,让用户能够体验创意视频生成流程。
设计思路
- 创建直观的三步流程界面,分别对应三个模型
- 提供风格选择和提示词生成功能
- 使用卡片式布局展示每个模型的功能
- 添加模拟生成效果和视觉反馈
- 采用现代化UI设计,深色主题配合霓虹效果
下面是完整的实现代码:
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多模型创意视频生成平台</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
color: #fff;
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 40px;
padding: 20px;
}
h1 {
font-size: 2.8rem;
margin-bottom: 15px;
background: linear-gradient(90deg, #ff8a00, #e52e71);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.subtitle {
font-size: 1.2rem;
opacity: 0.8;
max-width: 800px;
margin: 0 auto;
line-height: 1.6;
}
.workflow {
display: flex;
justify-content: space-between;
margin: 40px 0;
position: relative;
}
.workflow::before {
content: '';
position: absolute;
top: 60px;
left: 10%;
width: 80%;
height: 4px;
background: linear-gradient(90deg, #ff8a00, #e52e71);
z-index: 0;
}
.step {
text-align: center;
width: 30%;
position: relative;
z-index: 1;
}
.step-number {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #ff8a00, #e52e71);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: bold;
margin: 0 auto 20px;
box-shadow: 0 4px 20px rgba(229, 46, 113, 0.6);
}
.step-title {
font-size: 1.4rem;
margin-bottom: 15px;
color: #ff8a00;
}
.step-description {
font-size: 0.95rem;
opacity: 0.9;
line-height: 1.5;
}
.models-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 40px;
}
.model-card {
background: rgba(255, 255, 255, 0.05);
border-radius: 15px;
padding: 25px;
flex: 1;
min-width: 300px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.model-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.model-header {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.model-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #00c6ff, #0072ff);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
font-size: 1.5rem;
}
.model-title {
font-size: 1.6rem;
font-weight: 600;
}
.model-description {
margin-bottom: 20px;
line-height: 1.6;
opacity: 0.9;
}
.input-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #00c6ff;
}
input, select, textarea {
width: 100%;
padding: 12px 15px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: white;
font-size: 1rem;
}
textarea {
height: 100px;
resize: vertical;
}
button {
background: linear-gradient(90deg, #ff8a00, #e52e71);
color: white;
border: none;
padding: 12px 25px;
border-radius: 8px;
cursor: pointer;
font-size: 1rem;
font-weight: 500;
transition: transform 0.2s ease, box-shadow 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
}
button i {
margin-right: 8px;
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(229, 46, 113, 0.4);
}
.result-container {
background: rgba(0, 0, 0, 0.2);
border-radius: 15px;
padding: 25px;
margin-top: 40px;
text-align: center;
}
.result-title {
font-size: 1.8rem;
margin-bottom: 20px;
color: #00c6ff;
}
.video-preview {
width: 100%;
max-width: 800px;
height: 400px;
background: rgba(0, 0, 0, 0.3);
border-radius: 10px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.video-placeholder {
font-size: 1.2rem;
opacity: 0.7;
}
.generate-button {
margin: 30px auto;
padding: 15px 40px;
font-size: 1.1rem;
}
.footer {
text-align: center;
margin-top: 60px;
padding: 20px;
opacity: 0.7;
font-size: 0.9rem;
}
@media (max-width: 900px) {
.workflow {
flex-direction: column;
align-items: center;
}
.workflow::before {
display: none;
}
.step {
width: 100%;
margin-bottom: 40px;
}
.models-container {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>多模型创意视频生成平台</h1>
<p class="subtitle">整合通义万象Wan2.2、DeepSeek和Qwen-Image三大AI模型,实现从文本到视频的创意生成</p>
</header>
<div class="workflow">
<div class="step">
<div class="step-number">1</div>
<h3 class="step-title">提示词与风格设计</h3>
<p class="step-description">使用DeepSeek模型生成高质量提示词并控制视觉风格</p>
</div>
<div class="step">
<div class="step-number">2</div>
<h3 class="step-title">图像生成</h3>
<p class="step-description">使用Qwen-Image模型根据提示词生成高质量关键帧图像</p>
</div>
<div class="step">
<div class="step-number">3</div>
<h3 class="step-title">视频合成</h3>
<p class="step-description">使用通义万象Wan2.2模型将图像转换为流畅视频</p>
</div>
</div>
<div class="models-container">
<div class="model-card">
<div class="model-header">
<div class="model-icon">
<i class="fas fa-paint-brush"></i>
</div>
<h2 class="model-title">DeepSeek</h2>
</div>
<p class="model-description">使用DeepSeek模型优化提示词并控制生成内容的视觉风格</p>
<div class="input-group">
<label for="prompt-input">输入您的创意想法</label>
<textarea id="prompt-input" placeholder="例如:一只穿着宇航服的猫在月球上漫步,科幻风格,超现实...">一只穿着宇航服的猫在月球上漫步,科幻风格,超现实</textarea>
</div>
<div class="input-group">
<label for="style-select">选择视觉风格</label>
<select id="style-select">
<option>超现实主义</option>
<option>赛博朋克</option>
<option>水墨画风格</option>
<option>油画风格</option>
<option>像素艺术</option>
<option>卡通动画</option>
<option selected>科幻风格</option>
<option>奇幻风格</option>
</select>
</div>
<button id="generate-prompt">
<i class="fas fa-magic"></i> 生成优化提示词
</button>
</div>
<div class="model-card">
<div class="model-header">
<div class="model-icon">
<i class="fas fa-image"></i>
</div>
<h2 class="model-title">Qwen-Image</h2>
</div>
<p class="model-description">使用Qwen-Image模型根据优化后的提示词生成高质量关键帧图像</p>
<div class="input-group">
<label for="enhanced-prompt">优化后的提示词</label>
<textarea id="enhanced-prompt" readonly>一只穿着精致宇航服的橘猫在月球表面漫步,地球在黑色天空中出现,科幻风格,超现实,细节丰富,4K画质</textarea>
</div>
<div class="input-group">
<label for="frame-count">生成帧数</label>
<select id="frame-count">
<option>4帧(最低流畅度)</option>
<option selected>8帧(基础流畅度)</option>
<option>12帧(平滑过渡)</option>
<option>16帧(高流畅度)</option>
</select>
</div>
<button id="generate-frames">
<i class="fas fa-film"></i> 生成关键帧
</button>
</div>
<div class="model-card">
<div class="model-header">
<div class="model-icon">
<i class="fas fa-video"></i>
</div>
<h2 class="model-title">通义万象Wan2.2</h2>
</div>
<p class="model-description">使用通义万象Wan2.2模型将关键帧图像转换为流畅视频</p>
<div class="input-group">
<label for="video-style">视频风格</label>
<select id="video-style">
<option selected> cinematic(电影感)</option>
<option>animated(动画感)</option>
<option>realistic(写实感)</option>
<option>dreamy(梦幻感)</option>
</select>
</div>
<div class="input-group">
<label for="duration">视频时长(秒)</label>
<select id="duration">
<option>3</option>
<option selected>5</option>
<option>10</option>
<option>15</option>
</select>
</div>
<button id="generate-video">
<i class="fas fa-play-circle"></i> 生成视频
</button>
</div>
</div>
<div class="result-container">
<h2 class="result-title">创意视频生成结果</h2>
<div class="video-preview">
<div class="video-placeholder">视频生成后将显示在这里</div>
</div>
<button class="generate-button" id="generate-all">
<i class="fas fa-rocket"></i> 一键生成完整视频
</button>
</div>
<div class="footer">
<p>本演示页面展示了通义万象Wan2.2、DeepSeek和Qwen-Image模型的整合工作流程</p>
<p>实际应用需要调用各模型的API接口</p>
</div>
</div>
<script>
// 模拟生成过程
document.getElementById('generate-prompt').addEventListener('click', function() {
const originalPrompt = document.getElementById('prompt-input').value;
const style = document.getElementById('style-select').value;
// 模拟提示词优化
const enhancedPrompts = [
"一只穿着精致宇航服的橘猫在月球表面漫步,地球在黑色天空中出现,科幻风格,超现实,细节丰富,4K画质",
"宇航服猫在月球探险,科幻场景,超现实光影,精细纹理,广角视角",
"猫咪宇航员在月球上跳跃,低重力环境,星空背景,科幻主题,超高细节"
];
const randomPrompt = enhancedPrompts[Math.floor(Math.random() * enhancedPrompts.length)];
document.getElementById('enhanced-prompt').value = randomPrompt;
// 显示提示词生成完成的通知
alert('提示词已使用DeepSeek优化完成!');
});
document.getElementById('generate-frames').addEventListener('click', function() {
// 模拟图像生成
alert('正在使用Qwen-Image生成关键帧...\n8帧关键图像已生成完成!');
});
document.getElementById('generate-video').addEventListener('click', function() {
// 模拟视频生成
alert('正在使用通义万象Wan2.2生成视频...\n5秒视频已生成完成!');
// 更改视频占位符文本
document.querySelector('.video-placeholder').textContent = '视频生成完成!实际应用中这里将显示生成的视频';
});
document.getElementById('generate-all').addEventListener('click', function() {
// 模拟完整流程
alert('开始完整视频生成流程...\n1. 使用DeepSeek优化提示词\n2. 使用Qwen-Image生成关键帧\n3. 使用通义万象Wan2.2生成视频');
// 模拟进度
setTimeout(function() {
alert('提示词优化完成!');
setTimeout(function() {
alert('关键帧生成完成!');
setTimeout(function() {
alert('视频生成完成!');
document.querySelector('.video-placeholder').textContent = '视频生成完成!实际应用中这里将显示生成的视频';
}, 1500);
}, 1500);
}, 1500);
});
</script>
</body>
</html>
功能说明
这个HTML演示页面实现了以下功能:
- 三步工作流程可视化:清晰展示从提示词生成到最终视频的三个步骤
- DeepSeek模型整合:用于生成和优化提示词,控制视觉风格
- Qwen-Image模型整合:用于根据优化后的提示词生成关键帧图像
- 通义万象Wan2.2模型整合:用于将关键帧图像转换为流畅视频
- 用户交互:提供输入框、下拉菜单和生成按钮
- 模拟生成效果:通过JavaScript模拟API调用和生成过程
- 响应式设计:适配不同屏幕尺寸
这个演示页面展示了三个模型如何协同工作,从文本提示词开始,最终生成创意视频的完整流程。实际应用中,需要调用各模型的API接口来实现完整功能。