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 11:24:48 +08:00
parent 7730d20b4e
commit d8a351e211
1 changed files with 76 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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