From d8a351e21147b91e5bf2b57d6ae9f5e9f839656e Mon Sep 17 00:00:00 2001
From: HuangHai <10402852@qq.com>
Date: Thu, 21 Aug 2025 11:24:48 +0800
Subject: [PATCH] 'commit'

---
 dsLightRag/static/JiMeng/cases.html | 274 ++++++++--------------------
 1 file changed, 76 insertions(+), 198 deletions(-)

diff --git a/dsLightRag/static/JiMeng/cases.html b/dsLightRag/static/JiMeng/cases.html
index 56588400..bca18011 100644
--- a/dsLightRag/static/JiMeng/cases.html
+++ b/dsLightRag/static/JiMeng/cases.html
@@ -106,21 +106,21 @@
                 <!-- 案例1 -->
                 <div class="case-card" data-case="case1">
                     <div class="case-thumbnail">
-                        <img src="https://picsum.photos/640/360?random=1" alt="数学公式教学视频">
+                        <img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/JiMeng/OldWomenAndLittleGirl.jpg" alt="老婆婆与小女孩">
                         <div class="play-icon"><i class="fas fa-play"></i></div>
                     </div>
                     <div class="case-content">
-                        <h3 class="case-title">初中数学：完全平方公式</h3>
+                        <h3 class="case-title">老婆婆与小女孩</h3>
                         <div class="case-meta">
-                            <span><i class="fas fa-eye"></i> 2.4k 观看</span>
-                            <span><i class="fas fa-star"></i> 4.8/5 评分</span>
+                            <span><i class="fas fa-eye"></i> 3.2k 观看</span>
+                            <span><i class="fas fa-star"></i> 4.9/5 评分</span>
                         </div>
                         <div class="case-tags">
-                            <span class="case-tag">数学</span>
-                            <span class="case-tag">初中</span>
-                            <span class="case-tag">公式推导</span>
+                            <span class="case-tag">生活故事</span>
+                            <span class="case-tag">情感</span>
+                            <span class="case-tag">人文关怀</span>
                         </div>
-                        <p class="case-description">通过动画演示完全平方公式的几何意义和代数推导过程，帮助学生直观理解和记忆。</p>
+                        <p class="case-description">讲述老婆婆与小女孩之间温馨互动的感人故事，展现人性的美好与善良。</p>
                         <button class="btn btn-primary view-case" data-case="case1">查看详情</button>
                     </div>
                 </div>
@@ -128,21 +128,21 @@
                 <!-- 案例2 -->
                 <div class="case-card" data-case="case2">
                     <div class="case-thumbnail">
-                        <img src="https://picsum.photos/640/360?random=2" alt="物理实验演示视频">
+                        <img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/JiMeng/d0d62a64-86b0-4511-9dff-f8bf7d6570d1.jpg" alt="雨伞与快递车">
                         <div class="play-icon"><i class="fas fa-play"></i></div>
                     </div>
                     <div class="case-content">
-                        <h3 class="case-title">高中物理：电磁感应实验</h3>
+                        <h3 class="case-title">雨伞与快递车</h3>
                         <div class="case-meta">
-                            <span><i class="fas fa-eye"></i> 1.8k 观看</span>
+                            <span><i class="fas fa-eye"></i> 2.8k 观看</span>
                             <span><i class="fas fa-star"></i> 4.7/5 评分</span>
                         </div>
                         <div class="case-tags">
-                            <span class="case-tag">物理</span>
-                            <span class="case-tag">高中</span>
-                            <span class="case-tag">实验演示</span>
+                            <span class="case-tag">都市生活</span>
+                            <span class="case-tag">职业故事</span>
+                            <span class="case-tag">温情</span>
                         </div>
-                        <p class="case-description">虚拟实验环境展示电磁感应现象，清晰演示磁通量变化与感应电流方向的关系。</p>
+                        <p class="case-description">描绘雨天里快递员与顾客之间的暖心互动，展现平凡职业中的坚守与理解。</p>
                         <button class="btn btn-primary view-case" data-case="case2">查看详情</button>
                     </div>
                 </div>
@@ -150,90 +150,25 @@
                 <!-- 案例3 -->
                 <div class="case-card" data-case="case3">
                     <div class="case-thumbnail">
-                        <img src="https://picsum.photos/640/360?random=3" alt="化学分子结构视频">
+                        <img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/JiMeng/5c72b5b1-736b-446d-82b0-d0c57713fe53.jpg" alt="女孩与小狗">
                         <div class="play-icon"><i class="fas fa-play"></i></div>
                     </div>
                     <div class="case-content">
-                        <h3 class="case-title">有机化学：甲烷分子结构</h3>
+                        <h3 class="case-title">女孩与小狗</h3>
                         <div class="case-meta">
-                            <span><i class="fas fa-eye"></i> 1.5k 观看</span>
-                            <span><i class="fas fa-star"></i> 4.9/5 评分</span>
+                            <span><i class="fas fa-eye"></i> 3.5k 观看</span>
+                            <span><i class="fas fa-star"></i> 4.8/5 评分</span>
                         </div>
                         <div class="case-tags">
-                            <span class="case-tag">化学</span>
-                            <span class="case-tag">高中</span>
-                            <span class="case-tag">分子结构</span>
+                            <span class="case-tag">宠物</span>
+                            <span class="case-tag">友谊</span>
+                            <span class="case-tag">成长</span>
                         </div>
-                        <p class="case-description">3D动画展示甲烷分子的立体结构，共价键的形成过程，帮助学生理解有机化合物的空间构型。</p>
+                        <p class="case-description">讲述孤独女孩与流浪小狗相识相知的故事，展现陪伴与爱的力量。</p>
                         <button class="btn btn-primary view-case" data-case="case3">查看详情</button>
                     </div>
                 </div>
 
-                <!-- 案例4 -->
-                <div class="case-card" data-case="case4">
-                    <div class="case-thumbnail">
-                        <img src="https://picsum.photos/640/360?random=4" alt="历史事件讲解视频">
-                        <div class="play-icon"><i class="fas fa-play"></i></div>
-                    </div>
-                    <div class="case-content">
-                        <h3 class="case-title">中国历史：丝绸之路</h3>
-                        <div class="case-meta">
-                            <span><i class="fas fa-eye"></i> 2.1k 观看</span>
-                            <span><i class="fas fa-star"></i> 4.6/5 评分</span>
-                        </div>
-                        <div class="case-tags">
-                            <span class="case-tag">历史</span>
-                            <span class="case-tag">初中</span>
-                            <span class="case-tag">文化遗产</span>
-                        </div>
-                        <p class="case-description">动态地图展示丝绸之路的路线和重要节点，讲述中外文化交流的历史故事和影响。</p>
-                        <button class="btn btn-primary view-case" data-case="case4">查看详情</button>
-                    </div>
-                </div>
-
-                <!-- 案例5 -->
-                <div class="case-card" data-case="case5">
-                    <div class="case-thumbnail">
-                        <img src="https://picsum.photos/640/360?random=5" alt="生物细胞结构视频">
-                        <div class="play-icon"><i class="fas fa-play"></i></div>
-                    </div>
-                    <div class="case-content">
-                        <h3 class="case-title">生物学：动物细胞结构</h3>
-                        <div class="case-meta">
-                            <span><i class="fas fa-eye"></i> 1.7k 观看</span>
-                            <span><i class="fas fa-star"></i> 4.8/5 评分</span>
-                        </div>
-                        <div class="case-tags">
-                            <span class="case-tag">生物</span>
-                            <span class="case-tag">初中</span>
-                            <span class="case-tag">细胞结构</span>
-                        </div>
-                        <p class="case-description">动画演示动物细胞的各个细胞器及其功能，通过微观视角展示生命活动的基本单位。</p>
-                        <button class="btn btn-primary view-case" data-case="case5">查看详情</button>
-                    </div>
-                </div>
-
-                <!-- 案例6 -->
-                <div class="case-card" data-case="case6">
-                    <div class="case-thumbnail">
-                        <img src="https://picsum.photos/640/360?random=6" alt="英语语法教学视频">
-                        <div class="play-icon"><i class="fas fa-play"></i></div>
-                    </div>
-                    <div class="case-content">
-                        <h3 class="case-title">英语语法：现在完成时</h3>
-                        <div class="case-meta">
-                            <span><i class="fas fa-eye"></i> 1.9k 观看</span>
-                            <span><i class="fas fa-star"></i> 4.5/5 评分</span>
-                        </div>
-                        <div class="case-tags">
-                            <span class="case-tag">英语</span>
-                            <span class="case-tag">初中</span>
-                            <span class="case-tag">语法教学</span>
-                        </div>
-                        <p class="case-description">通过生活化的场景和例句，讲解现在完成时的用法、标志词和常见误区，帮助学生准确掌握。</p>
-                        <button class="btn btn-primary view-case" data-case="case6">查看详情</button>
-                    </div>
-                </div>
             </div>
         </div>
 
@@ -260,124 +195,64 @@
             // 案例数据
             const casesData = {
                 case1: {
-                    title: "初中数学：完全平方公式",
-                    thumbnail: "https://picsum.photos/640/360?random=1",
-                    video: "https://www.youtube.com/embed/dQw4w9WgXcQ", // 示例视频
-                    views: "2.4k",
-                    rating: "4.8/5",
-                    tags: ["数学", "初中", "公式推导"],
-                    description: "本视频通过动画演示完全平方公式的几何意义和代数推导过程，帮助学生直观理解和记忆。视频采用了生活中的例子和互动式练习，让抽象的数学公式变得生动易懂。",
-                    creator: "李老师",
-                    subject: "数学",
-                    grade: "初中二年级",
-                    duration: "5:30",
+                    title: "老婆婆与小女孩",
+                    thumbnail: "https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/JiMeng/OldWomenAndLittleGirl.jpg",
+                    video: "https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/JiMeng/OldWomenAndLittleGirl.mp4",
+                    views: "3.2k",
+                    rating: "4.9/5",
+                    tags: ["生活故事", "情感", "人文关怀"],
+                    description: "本视频讲述了老婆婆与小女孩之间温馨互动的感人故事，展现了人性的美好与善良。通过细腻的情感描写和生动的场景，传递了关爱与陪伴的重要性。",
+                    creator: "AI生成",
+                    subject: "人文",
+                    grade: "全年龄段",
+                    duration: "4:15",
                     process: [
-                        { title: "提示词生成", description: "使用结构化提示词模板，输入课程主题、教学目标和风格要求，生成详细的首帧描述。" },
-                        { title: "首帧图片生成", description: "AI根据提示词生成公式推导的示意图，突出几何意义和代数表达式的关联。" },
-                        { title: "分镜头脚本", description: "系统自动生成包含讲解、动画演示和练习环节的分镜头脚本，确保教学逻辑清晰。" },
-                        { title: "视频生成", description: "AI根据分镜头脚本和首帧风格，生成完整的教学视频，包含动画效果和语音讲解。" }
+                        { title: "提示词生成", description: "输入故事主题、情感基调，生成详细的故事大纲。" },
+                        { title: "分镜头脚本", description: "系统自动生成包含场景转换、人物动作和情感表达的分镜头脚本。" },
+                        { title: "视频生成", description: "AI根据脚本生成完整的视频，包含角色动画、场景渲染和背景音乐。" },
+                        { title: "后期优化", description: "对生成的视频进行色彩校正、音效增强等后期处理，提升观看体验。" }
                     ],
-                    keyPoints: ["完全平方公式的几何意义", "代数推导过程", "公式的变形应用", "常见错误分析"]
+                    keyPoints: ["情感表达", "人文关怀", "故事叙事", "视觉呈现"]
                 },
                 case2: {
-                    title: "高中物理：电磁感应实验",
-                    thumbnail: "https://picsum.photos/640/360?random=2",
-                    video: "https://www.youtube.com/embed/dQw4w9WgXcQ",
-                    views: "1.8k",
+                    title: "雨伞与快递车",
+                    thumbnail: "https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/JiMeng/d0d62a64-86b0-4511-9dff-f8bf7d6570d1.jpg",
+                    video: "https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/JiMeng/d0d62a64-86b0-4511-9dff-f8bf7d6570d1.mp4",
+                    views: "2.8k",
                     rating: "4.7/5",
-                    tags: ["物理", "高中", "实验演示"],
-                    description: "本视频通过虚拟实验环境展示电磁感应现象，清晰演示磁通量变化与感应电流方向的关系。学生可以直观看到不同情况下的实验结果，加深对楞次定律的理解。",
-                    creator: "王老师",
-                    subject: "物理",
-                    grade: "高中一年级",
-                    duration: "7:15",
+                    tags: ["都市生活", "职业故事", "温情"],
+                    description: "本视频描绘了雨天里快递员与顾客之间的暖心互动，展现了平凡职业中的坚守与理解。通过真实的场景和细腻的情感刻画，传递了人与人之间的温暖与包容。",
+                    creator: "AI生成",
+                    subject: "社会",
+                    grade: "全年龄段",
+                    duration: "3:50",
                     process: [
-                        { title: "提示词生成", description: "输入实验主题、核心概念和实验步骤要求，生成详细的实验场景描述。" },
-                        { title: "首帧图片生成", description: "AI生成电磁感应实验装置，突出磁铁、线圈和电流计等关键组件。" },
-                        { title: "分镜头脚本", description: "系统生成包含实验准备、操作步骤、现象观察和结论总结的分镜头脚本。" },
-                        { title: "视频生成", description: "AI根据脚本生成动态实验演示视频，展示不同操作下的实验现象和数据变化。" }
+                        { title: "提示词生成", description: "输入场景设定、人物关系，生成详细的故事梗概。" },
+                        { title: "分镜头脚本", description: "系统生成包含天气效果、人物动作和情感变化的分镜头脚本。" },
+                        { title: "视频生成", description: "AI根据脚本生成视频，包含场景搭建、角色动画和环境特效。" },
+                        { title: "后期优化", description: "添加音效、调整色彩，增强视频的情感表达和视觉冲击力。" }
                     ],
-                    keyPoints: ["电磁感应现象", "楞次定律", "磁通量变化", "感应电流方向判断"]
+                    keyPoints: ["职业respect", "人际理解", "情感共鸣", "视觉叙事"]
                 },
                 case3: {
-                    title: "有机化学：甲烷分子结构",
-                    thumbnail: "https://picsum.photos/640/360?random=3",
-                    video: "https://www.youtube.com/embed/dQw4w9WgXcQ",
-                    views: "1.5k",
-                    rating: "4.9/5",
-                    tags: ["化学", "高中", "分子结构"],
-                    description: "本视频通过3D动画展示甲烷分子的立体结构，共价键的形成过程，帮助学生理解有机化合物的空间构型。视频还对比了不同视角下的分子模型，增强空间想象能力。",
-                    creator: "张老师",
-                    subject: "化学",
-                    grade: "高中二年级",
-                    duration: "6:40",
-                    process: [
-                        { title: "提示词生成", description: "输入分子名称、展示重点和所需视角，生成详细的分子结构描述。" },
-                        { title: "首帧图片生成", description: "AI生成甲烷分子的3D模型图，展示正四面体结构和共价键夹角。" },
-                        { title: "分镜头脚本", description: "系统生成包含分子结构展示、共价键讲解和空间构型分析的分镜头脚本。" },
-                        { title: "视频生成", description: "AI根据脚本生成旋转的3D分子模型动画，配合讲解展示分子的各种特性。" }
-                    ],
-                    keyPoints: ["正四面体结构", "共价键形成", "键角与键长", "空间构型与性质关系"]
-                },
-                case4: {
-                    title: "中国历史：丝绸之路",
-                    thumbnail: "https://picsum.photos/640/360?random=4",
-                    video: "https://www.youtube.com/embed/dQw4w9WgXcQ",
-                    views: "2.1k",
-                    rating: "4.6/5",
-                    tags: ["历史", "初中", "文化遗产"],
-                    description: "本视频通过动态地图展示丝绸之路的路线和重要节点，讲述中外文化交流的历史故事和影响。视频融入了丰富的历史图片和文物资料，让学生感受古代贸易和文化交流的繁荣。",
-                    creator: "刘老师",
-                    subject: "历史",
-                    grade: "初中三年级",
-                    duration: "8:25",
-                    process: [
-                        { title: "提示词生成", description: "输入历史事件、时间范围和展示重点，生成详细的场景描述。" },
-                        { title: "首帧图片生成", description: "AI生成丝绸之路路线图，标注重要城市和贸易节点。" },
-                        { title: "分镜头脚本", description: "系统生成包含路线介绍、重要事件和文化交流成果展示的分镜头脚本。" },
-                        { title: "视频生成", description: "AI根据脚本生成动态地图动画和历史场景还原，配合讲解展示丝绸之路的历史意义。" }
-                    ],
-                    keyPoints: ["路线与节点", "贸易商品", "文化交流", "历史意义"]
-                },
-                case5: {
-                    title: "生物学：动物细胞结构",
-                    thumbnail: "https://picsum.photos/640/360?random=5",
-                    video: "https://www.youtube.com/embed/dQw4w9WgXcQ",
-                    views: "1.7k",
+                    title: "女孩与小狗",
+                    thumbnail: "https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/JiMeng/5c72b5b1-736b-446d-82b0-d0c57713fe53.jpg",
+                    video: "https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/JiMeng/5c72b5b1-736b-446d-82b0-d0c57713fe53.mp4",
+                    views: "3.5k",
                     rating: "4.8/5",
-                    tags: ["生物", "初中", "细胞结构"],
-                    description: "本视频通过动画演示动物细胞的各个细胞器及其功能，通过微观视角展示生命活动的基本单位。视频采用了拟人化的讲解方式，让抽象的细胞结构变得生动有趣。",
-                    creator: "陈老师",
-                    subject: "生物",
-                    grade: "初中一年级",
-                    duration: "6:10",
+                    tags: ["宠物", "友谊", "成长"],
+                    description: "本视频讲述了孤独女孩与流浪小狗相识相知的故事，展现了陪伴与爱的力量。通过温暖的画面和真挚的情感，传递了生命之间的羁绊与治愈的力量。",
+                    creator: "AI生成",
+                    subject: "情感",
+                    grade: "全年龄段",
+                    duration: "4:30",
                     process: [
-                        { title: "提示词生成", description: "输入细胞类型、展示重点和讲解风格，生成详细的细胞结构描述。" },
-                        { title: "首帧图片生成", description: "AI生成动物细胞的结构图，标注各个细胞器的位置和形态。" },
-                        { title: "分镜头脚本", description: "系统生成包含整体结构介绍、各细胞器功能讲解和生命活动展示的分镜头脚本。" },
-                        { title: "视频生成", description: "AI根据脚本生成动态细胞模型动画，展示各细胞器的功能和相互协作。" }
+                        { title: "提示词生成", description: "输入故事主题、主要角色，生成详细的情节发展。" },
+                        { title: "分镜头脚本", description: "系统生成包含角色互动、情感变化和关键场景的分镜头脚本。" },
+                        { title: "视频生成", description: "AI根据脚本生成视频，包含角色设计、场景构建和动画效果。" },
+                        { title: "后期优化", description: "添加背景音乐、调整节奏，增强视频的情感感染力。" }
                     ],
-                    keyPoints: ["细胞膜结构", "细胞核功能", "细胞器分工", "细胞生命活动"]
-                },
-                case6: {
-                    title: "英语语法：现在完成时",
-                    thumbnail: "https://picsum.photos/640/360?random=6",
-                    video: "https://www.youtube.com/embed/dQw4w9WgXcQ",
-                    views: "1.9k",
-                    rating: "4.5/5",
-                    tags: ["英语", "初中", "语法教学"],
-                    description: "本视频通过生活化的场景和例句，讲解现在完成时的用法、标志词和常见误区，帮助学生准确掌握。视频包含互动练习和对比分析，加深学生对时态的理解和应用能力。",
-                    creator: "赵老师",
-                    subject: "英语",
-                    grade: "初中二年级",
-                    duration: "5:50",
-                    process: [
-                        { title: "提示词生成", description: "输入语法点、教学目标和学生水平，生成详细的教学场景描述。" },
-                        { title: "首帧图片生成", description: "AI生成展示现在完成时应用场景的图片，突出时间关系和动作影响。" },
-                        { title: "分镜头脚本", description: "系统生成包含概念讲解、例句分析、练习巩固和误区提醒的分镜头脚本。" },
-                        { title: "视频生成", description: "AI根据脚本生成情景对话动画和语法讲解视频，配合互动练习提升学习效果。" }
-                    ],
-                    keyPoints: ["基本结构", "用法区别", "标志词", "常见错误"]
+                    keyPoints: ["友谊", "陪伴", "成长", "情感治愈"]
                 }
             };
 
@@ -419,7 +294,10 @@
 
                     modalBody.innerHTML = `
                         <div class="modal-video-container">
-                            <iframe src="${caseData.video}" frameborder="0" allowfullscreen></iframe>
+                            <video controls>
+                                <source src="${caseData.video}" type="video/mp4">
+                                您的浏览器不支持HTML5视频播放。
+                            </video>
                         </div>
 
                         <div class="case-details">
@@ -428,8 +306,8 @@
                                     <h3 class="detail-title"><i class="fas fa-info-circle"></i> 案例信息</h3>
                                     <div class="detail-content">
                                         <p><strong>创作者:</strong> ${caseData.creator}</p>
-                                        <p><strong>学科:</strong> ${caseData.subject}</p>
-                                        <p><strong>年级:</strong> ${caseData.grade}</p>
+                                        <p><strong>主题:</strong> ${caseData.subject}</p>
+                                        <p><strong>适合人群:</strong> ${caseData.grade}</p>
                                         <p><strong>时长:</strong> ${caseData.duration}</p>
                                         <p><strong>观看次数:</strong> ${caseData.views}</p>
                                         <p><strong>评分:</strong> ${caseData.rating}</p>
@@ -453,7 +331,7 @@
                                 </div>
 
                                 <div class="detail-section">
-                                    <h3 class="detail-title"><i class="fas fa-list-check"></i> 知识点</h3>
+                                    <h3 class="detail-title"><i class="fas fa-list-check"></i> 亮点</h3>
                                     <div class="detail-content">
                                         <ul>
                                             ${keyPointsHtml}