This commit is contained in:
2025-08-21 07:59:21 +08:00
parent 1ccc4c207c
commit 14e6b38ed7
4 changed files with 294 additions and 53 deletions

View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>推荐案例 - 教视频AI生成智能体</title> <title>推荐案例 - 教视频AI生成智能体</title>
<style> <style>
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; }
body { background-color: #f5f7fa; color: #333; line-height: 1.6; } body { background-color: #f5f7fa; color: #333; line-height: 1.6; }
@@ -82,13 +82,13 @@
<body> <body>
<div class="container"> <div class="container">
<header> <header>
<h1>视频AI生成智能体</h1> <h1>视频AI生成智能体</h1>
<p class="subtitle">轻松创建专业级教视频从提示词到完整视频一站式AI生成解决方案</p> <p class="subtitle">轻松创建专业级教视频从提示词到完整视频一站式AI生成解决方案</p>
</header> </header>
<!-- 导航栏 --> <!-- 导航栏 -->
<nav class="navbar"> <nav class="navbar">
<a href="index.html" class="navbar-brand">视频AI</a> <a href="index.html" class="navbar-brand">视频AI</a>
<div class="navbar-links"> <div class="navbar-links">
<a href="index.html" class="navbar-link">首页</a> <a href="index.html" class="navbar-link">首页</a>
<a href="prompt_input.html" class="navbar-link">创建提示词</a> <a href="prompt_input.html" class="navbar-link">创建提示词</a>
@@ -99,8 +99,8 @@
<!-- 案例展示区域 --> <!-- 案例展示区域 -->
<div class="cases-container"> <div class="cases-container">
<h2 class="section-title">优秀教视频案例</h2> <h2 class="section-title">优秀教视频案例</h2>
<p style="text-align: center; color: #666; margin-bottom: 40px; max-width: 800px; margin-left: auto; margin-right: auto;">探索我们平台上生成的高质量教视频案例,了解它们的制作过程和效果,为您的创作提供灵感。</p> <p style="text-align: center; color: #666; margin-bottom: 40px; max-width: 800px; margin-left: auto; margin-right: auto;">探索我们平台上生成的高质量教视频案例,了解它们的制作过程和效果,为您的创作提供灵感。</p>
<div class="cases-grid"> <div class="cases-grid">
<!-- 案例1 --> <!-- 案例1 -->
@@ -238,7 +238,7 @@
</div> </div>
<footer> <footer>
<p>© 2023 教视频AI生成智能体 | 让教育内容创作更简单</p> <p>© 2023 教视频AI生成智能体 | 让教育内容创作更简单</p>
</footer> </footer>
</div> </div>

View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>历史记录 - 教视频AI生成智能体</title> <title>历史记录 - 教视频AI生成智能体</title>
<style> <style>
* { * {
margin: 0; padding: 0; box-sizing: border-box; margin: 0; padding: 0; box-sizing: border-box;
@@ -73,11 +73,11 @@
<div class="container"> <div class="container">
<header> <header>
<h1>历史记录</h1> <h1>历史记录</h1>
<p>查看和管理您之前生成的教视频内容</p> <p>查看和管理您之前生成的教视频内容</p>
</header> </header>
<nav class="navbar"> <nav class="navbar">
<a href="index.html" class="navbar-brand">视频AI</a> <a href="index.html" class="navbar-brand">视频AI</a>
<div class="navbar-links"> <div class="navbar-links">
<a href="index.html" class="navbar-link">首页</a> <a href="index.html" class="navbar-link">首页</a>
<a href="prompt_input.html" class="navbar-link">创建提示词</a> <a href="prompt_input.html" class="navbar-link">创建提示词</a>
@@ -177,6 +177,133 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 新增项目 4 -->
<div class="history-item">
<div class="history-item-header">
<div class="history-item-title">历史事件 - 文艺复兴运动</div>
<div class="history-item-date">2023-10-28</div>
</div>
<div class="history-item-content">
<img src="https://picsum.photos/350/200?random=4" alt="视频预览" class="history-item-preview">
<div>
<span class="history-item-type">视频</span>
<span class="history-item-type">脚本</span>
</div>
<p class="history-item-description">详细介绍文艺复兴运动的起源、发展和影响,通过动态时间轴展示关键事件和人物,帮助学生理解这一重要历史时期。</p>
<div class="history-item-actions">
<a href="#" class="btn btn-primary"><i class="fas fa-play"></i> 查看</a>
<a href="#" class="btn btn-secondary"><i class="fas fa-redo"></i> 复用</a>
<button class="btn btn-danger"><i class="fas fa-trash-alt"></i> 删除</button>
</div>
</div>
</div>
<!-- 新增项目 5 -->
<div class="history-item">
<div class="history-item-header">
<div class="history-item-title">生物细胞结构 - 动物细胞模型</div>
<div class="history-item-date">2023-10-20</div>
</div>
<div class="history-item-content">
<img src="https://picsum.photos/350/200?random=5" alt="图片预览" class="history-item-preview">
<div>
<span class="history-item-type">图片</span>
<span class="history-item-type">提示词</span>
</div>
<p class="history-item-description">高精度3D动物细胞结构模型图片清晰展示细胞核、线粒体、内质网等细胞器标注详细功能说明。</p>
<div class="history-item-actions">
<a href="#" class="btn btn-primary"><i class="fas fa-eye"></i> 查看</a>
<a href="#" class="btn btn-secondary"><i class="fas fa-redo"></i> 复用</a>
<button class="btn btn-danger"><i class="fas fa-trash-alt"></i> 删除</button>
</div>
</div>
</div>
<!-- 新增项目 6 -->
<div class="history-item">
<div class="history-item-header">
<div class="history-item-title">英语语法 - 现在完成时</div>
<div class="history-item-date">2023-10-15</div>
</div>
<div class="history-item-content">
<img src="https://picsum.photos/350/200?random=6" alt="视频预览" class="history-item-preview">
<div>
<span class="history-item-type">视频</span>
<span class="history-item-type">提示词</span>
</div>
<p class="history-item-description">通过生活化的场景和例句,讲解英语现在完成时的用法、结构和常见错误,帮助学生掌握这一时态的应用。</p>
<div class="history-item-actions">
<a href="#" class="btn btn-primary"><i class="fas fa-play"></i> 查看</a>
<a href="#" class="btn btn-secondary"><i class="fas fa-redo"></i> 复用</a>
<button class="btn btn-danger"><i class="fas fa-trash-alt"></i> 删除</button>
</div>
</div>
</div>
<!-- 新增项目 7 -->
<div class="history-item">
<div class="history-item-header">
<div class="history-item-title">地理 - 板块构造学说</div>
<div class="history-item-date">2023-10-10</div>
</div>
<div class="history-item-content">
<img src="https://picsum.photos/350/200?random=7" alt="脚本预览" class="history-item-preview">
<div>
<span class="history-item-type">脚本</span>
<span class="history-item-type">提示词</span>
</div>
<p class="history-item-description">专业分镜头脚本,通过动画演示地球板块运动、火山喷发和地震形成过程,解释板块构造学说的核心观点。</p>
<div class="history-item-actions">
<a href="#" class="btn btn-primary"><i class="fas fa-file-alt"></i> 查看</a>
<a href="#" class="btn btn-secondary"><i class="fas fa-redo"></i> 复用</a>
<button class="btn btn-danger"><i class="fas fa-trash-alt"></i> 删除</button>
</div>
</div>
</div>
<!-- 新增项目 8 -->
<div class="history-item">
<div class="history-item-header">
<div class="history-item-title">音乐 - 古典音乐流派</div>
<div class="history-item-date">2023-10-05</div>
</div>
<div class="history-item-content">
<img src="https://picsum.photos/350/200?random=8" alt="图片预览" class="history-item-preview">
<div>
<span class="history-item-type">图片</span>
<span class="history-item-type">提示词</span>
</div>
<p class="history-item-description">展示巴洛克、古典主义、浪漫主义等不同古典音乐流派的代表作曲家、作品和风格特点的信息图表。</p>
<div class="history-item-actions">
<a href="#" class="btn btn-primary"><i class="fas fa-eye"></i> 查看</a>
<a href="#" class="btn btn-secondary"><i class="fas fa-redo"></i> 复用</a>
<button class="btn btn-danger"><i class="fas fa-trash-alt"></i> 删除</button>
</div>
</div>
</div>
<!-- 新增项目 9 -->
<div class="history-item">
<div class="history-item-header">
<div class="history-item-title">计算机科学 - 数据结构基础</div>
<div class="history-item-date">2023-09-28</div>
</div>
<div class="history-item-content">
<img src="https://picsum.photos/350/200?random=9" alt="视频预览" class="history-item-preview">
<div>
<span class="history-item-type">视频</span>
<span class="history-item-type">脚本</span>
<span class="history-item-type">提示词</span>
</div>
<p class="history-item-description">生动讲解链表、栈、队列、树等基本数据结构的概念、实现和应用场景,通过动画演示数据结构的操作过程。</p>
<div class="history-item-actions">
<a href="#" class="btn btn-primary"><i class="fas fa-play"></i> 查看</a>
<a href="#" class="btn btn-secondary"><i class="fas fa-redo"></i> 复用</a>
<button class="btn btn-danger"><i class="fas fa-trash-alt"></i> 删除</button>
</div>
</div>
</div>
</div> </div>
<!-- 分页 --> <!-- 分页 -->
@@ -191,7 +318,7 @@
</div> </div>
<footer> <footer>
<p>© 2023 教视频AI生成智能体 | 让教育内容创作更简单</p> <p>© 2023 教视频AI生成智能体 | 让教育内容创作更简单</p>
</footer> </footer>
</div> </div>

View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频AI生成智能体</title> <title>视频AI生成智能体</title>
<style> <style>
* { * {
margin: 0; padding: 0; box-sizing: border-box; margin: 0; padding: 0; box-sizing: border-box;
@@ -71,16 +71,16 @@
<body> <body>
<div class="container"> <div class="container">
<header> <header>
<h1>视频AI生成智能体</h1> <h1>视频AI生成智能体</h1>
<p class="subtitle">轻松创建专业级教视频从提示词到完整视频一站式AI生成解决方案</p> <p class="subtitle">轻松创建专业级教视频从提示词到完整视频一站式AI生成解决方案</p>
</header> </header>
<!-- 添加导航栏 --> <!-- 添加导航栏 -->
<nav class="navbar"> <nav class="navbar">
<a href="index.html" class="navbar-brand">视频AI</a> <a href="index.html" class="navbar-brand">视频AI</a>
<div class="navbar-links"> <div class="navbar-links">
<a href="index.html" class="navbar-link active">首页</a> <a href="index.html" class="navbar-link active">首页</a>
<a href="prompt_input.html" class="navbar-link">创建提示词</a> <a href="prompt_input.html" class="navbar-link">首帧创作</a>
<a href="cases.html" class="navbar-link"><i class="fas fa-star"></i> 推荐案例</a> <a href="cases.html" class="navbar-link"><i class="fas fa-star"></i> 推荐案例</a>
<a href="history.html" class="navbar-link"><i class="fas fa-history"></i> 历史记录</a> <a href="history.html" class="navbar-link"><i class="fas fa-history"></i> 历史记录</a>
</div> </div>
@@ -115,8 +115,8 @@
<div class="timeline-item left"> <div class="timeline-item left">
<div class="timeline-content"> <div class="timeline-content">
<div class="timeline-icon"><i class="fas fa-align-left"></i></div> <div class="timeline-icon"><i class="fas fa-align-left"></i></div>
<h3 class="timeline-title"><span class="step-number">1</span>首帧提示词</h3> <h3 class="timeline-title"><span class="step-number">1</span>首帧创作</h3>
<p class="timeline-description">通过结构化模板输入时间、场景、主体和氛围生成精准的视频首帧描述</p> <p class="timeline-description">通过结构化模板输入时间、场景、主体和氛围生成提示词,或直接上传一张图片作为首帧,两种方式任选其一</p>
<div class="timeline-action"> <div class="timeline-action">
<a href="prompt_input.html" class="btn btn-primary">开始创建</a> <a href="prompt_input.html" class="btn btn-primary">开始创建</a>
</div> </div>
@@ -125,8 +125,8 @@
<div class="timeline-item right"> <div class="timeline-item right">
<div class="timeline-content"> <div class="timeline-content">
<div class="timeline-icon"><i class="fas fa-camera"></i></div> <div class="timeline-icon"><i class="fas fa-camera"></i></div>
<h3 class="timeline-title"><span class="step-number">2</span>首帧图片生成</h3> <h3 class="timeline-title"><span class="step-number">2</span>首帧图片确认</h3>
<p class="timeline-description">基于您的提示词AI生成符合要求的高质量图片可多次生成选择满意结果</p> <p class="timeline-description">查看基于提示词生成的图片或确认上传的图片,可调整或重新生成直到满意</p>
<div class="timeline-action"> <div class="timeline-action">
<button class="btn btn-secondary" disabled>稍后进行</button> <button class="btn btn-secondary" disabled>稍后进行</button>
</div> </div>
@@ -146,7 +146,7 @@
<div class="timeline-content"> <div class="timeline-content">
<div class="timeline-icon"><i class="fas fa-video"></i></div> <div class="timeline-icon"><i class="fas fa-video"></i></div>
<h3 class="timeline-title"><span class="step-number">4</span>生成视频</h3> <h3 class="timeline-title"><span class="step-number">4</span>生成视频</h3>
<p class="timeline-description">基于分镜头脚本AI生成完整的教视频,支持下载和分享。</p> <p class="timeline-description">基于分镜头脚本AI生成完整的教视频,支持下载和分享。</p>
<div class="timeline-action"> <div class="timeline-action">
<button class="btn btn-secondary" disabled>稍后进行</button> <button class="btn btn-secondary" disabled>稍后进行</button>
</div> </div>
@@ -155,7 +155,7 @@
</div> </div>
<footer> <footer>
<p>© 2023 教视频AI生成智能体 | 让教育内容创作更简单</p> <p>© 2023 教视频AI生成智能体 | 让教育内容创作更简单</p>
</footer> </footer>
</div> </div>

View File

@@ -151,45 +151,73 @@
<form id="promptForm"> <form id="promptForm">
<div class="form-group"> <div class="form-group">
<label for="timeWeatherLight" class="required">时间-天气-光</label> <label>首帧创建方式</label>
<input type="text" id="timeWeatherLight" placeholder="例如:傍晚小雨,路灯刚亮" required> <div style="display: flex; gap: 20px; margin-bottom: 15px;">
<div class="example-tip">请描述时间、天气状况和光线条件,这将影响画面的整体感觉</div> <label style="display: flex; align-items: center; cursor: pointer;">
</div> <input type="radio" name="creationMethod" value="prompt" checked style="margin-right: 8px;">
生成提示词
<div class="form-group"> </label>
<label for="sceneLocation" class="required">场景-地点</label> <label style="display: flex; align-items: center; cursor: pointer;">
<input type="text" id="sceneLocation" placeholder="例如:老城区石板路" required> <input type="radio" name="creationMethod" value="upload" style="margin-right: 8px;">
<div class="example-tip">请描述具体的场景和地点,帮助构建画面背景</div> 上传图片
</div> </label>
<div class="form-group">
<label for="subjects">主体列表 (可选)</label>
<div class="tag-container" id="tagContainer">
<div class="placeholder" id="placeholder">点击下方添加主体(人/动物/物体),或留空</div>
</div> </div>
<div class="add-tag"> </div>
<input type="text" id="subjectInput" placeholder="例如:工人父亲(背)">
<button type="button" class="btn btn-primary" id="addTagBtn">添加</button> <div id="promptSection">
<div class="form-group">
<label for="timeWeatherLight" class="required">时间-天气-光</label>
<input type="text" id="timeWeatherLight" placeholder="例如:傍晚小雨,路灯刚亮" required>
<div class="example-tip">请描述时间、天气状况和光线条件,这将影响画面的整体感觉</div>
</div>
<div class="form-group">
<label for="sceneLocation" class="required">场景-地点</label>
<input type="text" id="sceneLocation" placeholder="例如:老城区石板路" required>
<div class="example-tip">请描述具体的场景和地点,帮助构建画面背景</div>
</div>
<div class="form-group">
<label for="subjects">主体列表 (可选)</label>
<div class="tag-container" id="tagContainer">
<div class="placeholder" id="placeholder">点击下方添加主体(人/动物/物体),或留空</div>
</div>
<div class="add-tag">
<input type="text" id="subjectInput" placeholder="例如:工人父亲(背)">
<button type="button" class="btn btn-primary" id="addTagBtn">添加</button>
</div>
<div class="example-tip">多个主体用逗号分隔,括号内可描述动作或姿态</div>
</div>
<div class="form-group">
<label for="atmosphere" class="required">氛围-情绪</label>
<input type="text" id="atmosphere" placeholder="例如:温馨" required>
<div class="example-tip">请描述画面想要传达的整体氛围或情绪</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-secondary" id="randomSampleBtn">随机示例</button>
<div class="sample-container" id="sampleContainer" style="display: none;">
<div class="sample-title">示例提示词:</div>
<div id="sampleContent"></div>
</div>
</div> </div>
<div class="example-tip">多个主体用逗号分隔,括号内可描述动作或姿态</div>
</div> </div>
<div class="form-group"> <div id="uploadSection" style="display: none;">
<label for="atmosphere" class="required">氛围-情绪</label> <div class="form-group">
<input type="text" id="atmosphere" placeholder="例如:温馨" required> <label for="imageUpload">上传图片</label>
<div class="example-tip">请描述画面想要传达的整体氛围或情绪</div> <input type="file" id="imageUpload" accept="image/*">
</div> <div class="example-tip">支持JPG、PNG等格式建议图片尺寸不小于1080x720像素</div>
</div>
<div class="form-group"> <div id="previewContainer" style="margin-top: 20px; display: none;">
<button type="button" class="btn btn-secondary" id="randomSampleBtn">随机示例</button> <h4>图片预览:</h4>
<div class="sample-container" id="sampleContainer" style="display: none;"> <img id="imagePreview" style="max-width: 100%; max-height: 400px; border-radius: 6px;">
<div class="sample-title">示例提示词:</div>
<div id="sampleContent"></div>
</div> </div>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button type="submit" class="btn btn-primary">生成首帧图片</button> <button type="submit" class="btn btn-primary" id="submitBtn">确认并继续</button>
<button type="reset" class="btn btn-secondary">重置</button> <button type="reset" class="btn btn-secondary">重置</button>
</div> </div>
</form> </form>
@@ -197,6 +225,92 @@
<script> <script>
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
// 新增代码:处理创建方式切换
const creationMethodRadios = document.querySelectorAll('input[name="creationMethod"]');
const promptSection = document.getElementById('promptSection');
const uploadSection = document.getElementById('uploadSection');
const submitBtn = document.getElementById('submitBtn');
const imageUpload = document.getElementById('imageUpload');
const previewContainer = document.getElementById('previewContainer');
const imagePreview = document.getElementById('imagePreview');
creationMethodRadios.forEach(radio => {
radio.addEventListener('change', function() {
if (this.value === 'prompt') {
promptSection.style.display = 'block';
uploadSection.style.display = 'none';
submitBtn.textContent = '生成首帧图片';
} else {
promptSection.style.display = 'none';
uploadSection.style.display = 'block';
submitBtn.textContent = '确认上传图片';
}
});
});
// 新增代码:处理图片预览
imageUpload.addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(event) {
imagePreview.src = event.target.result;
previewContainer.style.display = 'block';
};
reader.readAsDataURL(file);
} else {
previewContainer.style.display = 'none';
}
});
// 修改表单提交事件
promptForm.addEventListener('submit', function(e) {
e.preventDefault();
const creationMethod = document.querySelector('input[name="creationMethod"]:checked').value;
if (creationMethod === 'prompt') {
// 原有的提示词生成逻辑
// 收集表单数据
const formData = {
timeWeatherLight: document.getElementById('timeWeatherLight').value,
sceneLocation: document.getElementById('sceneLocation').value,
subjects: [],
atmosphere: document.getElementById('atmosphere').value
};
// 收集标签数据
const tags = tagContainer.querySelectorAll('.tag');
tags.forEach(tag => {
formData.subjects.push(tag.querySelector('span').textContent);
});
// 构建提示词
let prompt = `${formData.timeWeatherLight}${formData.sceneLocation}`;
if (formData.subjects.length > 0) {
prompt += '' + formData.subjects.join('与');
}
prompt += `,氛围${formData.atmosphere}`;
// 在实际应用中,这里应该发送数据到后端
console.log('生成的提示词:', prompt);
alert('提示词已生成:\n' + prompt + '\n\n下一步将生成首帧图片');
} else {
// 新增的图片上传逻辑
if (imageUpload.files.length === 0) {
alert('请先选择要上传的图片');
return;
}
const file = imageUpload.files[0];
console.log('上传的图片:', file.name);
alert('图片已上传:\n' + file.name + '\n\n下一步将使用此图片作为首帧');
}
// 这里可以添加跳转到下一步的逻辑
// window.location.href = 'next_step.html';
});
const tagContainer = document.getElementById('tagContainer'); const tagContainer = document.getElementById('tagContainer');
const subjectInput = document.getElementById('subjectInput'); const subjectInput = document.getElementById('subjectInput');
const addTagBtn = document.getElementById('addTagBtn'); const addTagBtn = document.getElementById('addTagBtn');