huanghai/dsProject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'commit'

Browse Source
This commit is contained in:
HuangHai
2025-08-21 07:59:21 +08:00
parent 1ccc4c207c
commit 14e6b38ed7
4 changed files with 294 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
dsLightRag/static/JiMeng/cases.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>推荐案例 - 教育视频AI生成智能体</title>
<title>推荐案例 - 教学视频AI生成智能体</title>
<style>
* { 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; }
@@ -82,13 +82,13 @@
<body>
<div class="container">
<header>
<h1>教育视频AI生成智能体</h1>
<p class="subtitle">轻松创建专业级教育视频，从提示词到完整视频，一站式AI生成解决方案</p>
<h1>教学视频AI生成智能体</h1>
<p class="subtitle">轻松创建专业级教学视频，从提示词到完整视频，一站式AI生成解决方案</p>
</header>
<!-- 导航栏 -->
<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">
<a href="index.html" class="navbar-link">首页</a>
<a href="prompt_input.html" class="navbar-link">创建提示词</a>
@@ -99,8 +99,8 @@
<!-- 案例展示区域 -->
<div class="cases-container">
<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>
<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>
<div class="cases-grid">
<!-- 案例1 -->
@@ -238,7 +238,7 @@
</div>
<footer>
<p>© 2023 教育视频AI生成智能体 | 让教育内容创作更简单</p>
<p>© 2023 教学视频AI生成智能体 | 让教育内容创作更简单</p>
</footer>
</div>

135
dsLightRag/static/JiMeng/history.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>历史记录 - 教育视频AI生成智能体</title>
<title>历史记录 - 教学视频AI生成智能体</title>
<style>
* {
margin: 0; padding: 0; box-sizing: border-box;
@@ -73,11 +73,11 @@
<div class="container">
<header>
<h1>历史记录</h1>
<p>查看和管理您之前生成的教育视频内容</p>
<p>查看和管理您之前生成的教学视频内容</p>
</header>
<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">
<a href="index.html" class="navbar-link">首页</a>
<a href="prompt_input.html" class="navbar-link">创建提示词</a>
@@ -177,6 +177,133 @@
</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>
<!-- 分页 -->
@@ -191,7 +318,7 @@
</div>
<footer>
<p>© 2023 教育视频AI生成智能体 | 让教育内容创作更简单</p>
<p>© 2023 教学视频AI生成智能体 | 让教育内容创作更简单</p>
</footer>
</div>

22
dsLightRag/static/JiMeng/index.html
View File

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

176
dsLightRag/static/JiMeng/prompt_input.html
View File

@@ -151,45 +151,73 @@
<form id="promptForm">
<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>
<label>首帧创建方式</label>
<div style="display: flex; gap: 20px; margin-bottom: 15px;">
<label style="display: flex; align-items: center; cursor: pointer;">
<input type="radio" name="creationMethod" value="prompt" checked style="margin-right: 8px;">
生成提示词
</label>
<label style="display: flex; align-items: center; cursor: pointer;">
<input type="radio" name="creationMethod" value="upload" style="margin-right: 8px;">
上传图片
</label>
</div>
<div class="add-tag">
<input type="text" id="subjectInput" placeholder="例如：工人父亲（背）">
<button type="button" class="btn btn-primary" id="addTagBtn">添加</button>
</div>
<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 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 id="uploadSection" style="display: none;">
<div class="form-group">
<label for="imageUpload">上传图片</label>
<input type="file" id="imageUpload" accept="image/*">
<div class="example-tip">支持JPG、PNG等格式，建议图片尺寸不小于1080x720像素</div>
</div>
<div id="previewContainer" style="margin-top: 20px; display: none;">
<h4>图片预览：</h4>
<img id="imagePreview" style="max-width: 100%; max-height: 400px; border-radius: 6px;">
</div>
</div>
<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>
</div>
</form>
@@ -197,6 +225,92 @@
<script>
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 subjectInput = document.getElementById('subjectInput');
const addTagBtn = document.getElementById('addTagBtn');