From 14e6b38ed72159f05082bfa50778ca6cece8f5b8 Mon Sep 17 00:00:00 2001
From: HuangHai <10402852@qq.com>
Date: Thu, 21 Aug 2025 07:59:21 +0800
Subject: [PATCH] 'commit'

---
 dsLightRag/static/JiMeng/cases.html        |  14 +-
 dsLightRag/static/JiMeng/history.html      | 135 +++++++++++++++-
 dsLightRag/static/JiMeng/index.html        |  22 +--
 dsLightRag/static/JiMeng/prompt_input.html | 176 +++++++++++++++++----
 4 files changed, 294 insertions(+), 53 deletions(-)
diff --git a/dsLightRag/static/JiMeng/cases.html b/dsLightRag/static/JiMeng/cases.html
index 1a0221ff..56588400 100644
--- a/dsLightRag/static/JiMeng/cases.html
+++ b/dsLightRag/static/JiMeng/cases.html
@@ -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>
 
diff --git a/dsLightRag/static/JiMeng/history.html b/dsLightRag/static/JiMeng/history.html
index c168dabc..35f51ebe 100644
--- a/dsLightRag/static/JiMeng/history.html
+++ b/dsLightRag/static/JiMeng/history.html
@@ -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>
 
diff --git a/dsLightRag/static/JiMeng/index.html b/dsLightRag/static/JiMeng/index.html
index 3d4d2d50..890f9967 100644
--- a/dsLightRag/static/JiMeng/index.html
+++ b/dsLightRag/static/JiMeng/index.html
@@ -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>
 
diff --git a/dsLightRag/static/JiMeng/prompt_input.html b/dsLightRag/static/JiMeng/prompt_input.html
index 9a34f4d6..bb8897aa 100644
--- a/dsLightRag/static/JiMeng/prompt_input.html
+++ b/dsLightRag/static/JiMeng/prompt_input.html
@@ -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');
