当前位置： 正文

具身数字人加Flask：搭建AI教学展示平台

54分钟前 AI技术 8 0 推广

文章配图

原标题：基于具身交互智能数字人，我用Flask搭了一个AI教学平台：课代表AI全流程实战

来源：https://blog.csdn.net/qq_62817113/article/details/163695497

摘要：本文分享了基于具身交互智能数字人技术，打造AI知识点讲解平台“课代表AI”的完整实战经验，从控制台配置数字人教师形象、教学音色、虚拟教室场景，到编写SSML教学脚本生成数字人讲解视频，再到搭建Flask展示网站嵌入视频，全流程手把手教学。网站采用亮色蓝紫主题，搭配数据统计、核心能力卡片与工作流程图等页面元素，最终实现一个精美的具身交互智能数字人教学展示页面。

一、项目背景与目标

1.1 传统教学视频面临的生产挑战

知识讲解视频是在线教育的核心载体，但传统制作方式存在不少痛点：

  • 录制成本高：需要专业教师出镜、摄影棚拍摄、后期剪辑，单条视频制作成本数百到数千元
  • 更新迭代慢：知识点更新后需要重新录制，课程维护成本高
  • 教师资源有限：优秀教师时间紧张，难以覆盖所有知识点的视频化
  • 风格难统一：不同教师录制的内容质量参差不齐，影响学习体验

这些痛点让大量优质知识内容难以及时变成生动视频，拖慢了在线教育的普及与提效。

1.2 具身交互智能数字人：教学视频生产的新范式

具身交互智能数字人给教学视频生产带来明显改观。相比传统录播，它具备自然的表情、肢体语言与语音同步能力，可以在虚拟教室里做沉浸式讲解：

  • 分钟级产出：输入知识点文案即可自动生成教学视频，从传统数天缩短到分钟级
  • 形象统一专业：数字人教师形象规范得体，具备自然的肢体语言和面部表情，教态自然
  • 随时可更新：知识点变更只需修改文案重新生成，无需重新预约教师录制
  • 零门槛规模化：无需专业团队和摄影棚，任何教师或教研人员都能轻松产出高质量教学视频

1.3 课代表AI：具身交互智能助力知识讲解的实践探索

文章配图

“课代表AI”是一个面向在线教育场景的具身交互智能数字人讲解平台。本项目整合了数字人平台能力，实现了从教学文案到讲解视频的一键生成，并搭建专属展示网站，让学生随时享受 AI 教师的沉浸式教学。

核心功能：

核心功能：

  1. 在魔珐星云控制台配置数字人教师形象、教学音色、虚拟教室场景，构建具身交互智能数字人教学基础能力
  2. 编写知识点SSML教学脚本，一键生成数字人讲解视频
  3. 搭建亮色蓝紫主题展示网站，包含视频播放、数据统计、核心能力展示、工作流程引导等丰富页面元素

二、前提准备：魔珐星云平台配置

魔珐星云是国内领先的具身交互智能数字人平台，提供从形象、音色到场景的全流程视频生成能力。搭建课代表AI前，需先在控制台完成几项基础配置：

1. 创建视频应用

登录魔珐星云控制台，进入应用管理，创建一个新的视频应用。填写应用名称（如：课代表AI-知识点讲解），完成基本信息配置。

创建应用：

2. 配置人物形象

在应用详情页点击"形象管理"，选择适合教学场景的专业教师形象。平台提供了多种职业、多种风格的数字人形象可供选择，本项目选择端庄亲和的教师形象，适合知识点讲解场景。

形象配置：

3. 配置音色

文章配图

点击"音色管理"，选择清晰、亲和的教学音色。平台内置了多种音色方案，涵盖男女声、不同语速和风格。本项目选择适合知识讲解的音色，声音清晰有力，语速适中，保存音色ID备用。

音色配置：

4. 配置场景

点击"场景管理"，选择适合教学的虚拟教室场景。平台提供了丰富的虚拟演播室场景，包括教室、会议室、展厅等，选择与教学调性匹配的明亮教室风格，保存场景ID。

场景配置：

5. 编写SSML脚本并生成视频

在控制台输入知识点讲解文案，按段落组织为SSML脚本格式。SSML（Speech Synthesis Markup Language）是数字人平台通用的脚本文本格式，用于控制数字人的语音播报内容和配图展示：

[
{
"text": "嘿。各位同学，大家好！我是课代表AI。大家准备好开启知识探索之旅了吗！具身交互智能数字人知识点讲解指南新鲜上线~化身智能探索向导，带你发掘平台实用功能。让知识学习像闯关寻宝一样轻松有趣，一起解锁高效学习秘籍！",
"media_url": "
},
{
"text": "平台可用学习资源：知识点讲解素材、数字人交互模板、演示文稿素材、字幕工具、场景素材、数字人形象微调权限等学习配套资源。资源访问入口：课代表AI工作台首页。

",
"media_url": "
},
{
"text": "平台内置素材市场，可按需挑选数字人形象、教学场景、音频素材，丰富你的知识点讲解内容。",
"media_url": ""
}
]

脚本说明：每个段落是一个 JSON 对象，含 text（文案）与 media_url（配图，可空）。数字人按文本生成语音与口型动画，配图在对应段落自动展示，丰富教学内容。

生成视频：点击"3D生成"，选择已配置的形象、音色、场景，粘贴SSML脚本，点击生成。平台会进行云端渲染，通常需要几分钟时间。等待渲染完成后，下载 .mp4 视频文件放到项目根目录即可。

脚本生成：

三、技术架构与项目结构

3.1 整体架构

文章配图

课代表AI 的整体架构分三步：先在魔珐星云控制台配好数字人形象与场景，再编写 SSML 教学脚本生成讲解视频，最后用 Flask 网站嵌入视频完成展示页。整条链路是：控制台配置 → 编写脚本 → 生成视频 → 下载 MP4 → 网站嵌入 → 展示页。

魔珐星云控制台配置（形象/音色/场景）
↓
编写SSML教学脚本
↓
生成具身交互智能数字人讲解视频
↓
下载MP4视频文件
↓
Flask网站嵌入视频
↓
课代表AI展示页面

3.2 项目结构

项目采用极简文件结构，核心只有 2 个文件，职责清晰：
* 极简架构：2 个核心文件，代码精简、易维护；
* 职责清晰：Flask 提供页面与视频服务，前端纯展示，前后端分离；
* 蓝紫主题：浅蓝白渐变 + 蓝紫主色，契合教育科技；
* 丰富页面：数据统计、能力卡片、工作流程等模块齐全；
* 零依赖前端：纯 HTML + CSS，加载快。

课代表AI/
├── web_app.py           
├── index.html           
├── requirements.txt     
└── *.mp4

设计特点：

  • 极简架构：2个核心文件，代码量精简，易于维护和部署
  • 职责清晰：Flask后端提供页面和视频服务，前端纯展示，前后端分离
  • 蓝紫主题：浅蓝白渐变背景 + 蓝紫主色调，契合教育科技品牌
  • 丰富页面：数据统计、能力卡片、工作流程等多种页面元素，展示效果完整
  • 零依赖前端：前端不依赖任何JS框架，纯HTML + CSS实现，加载速度快

四、从0到1搭建课代表AI

4.1 Flask应用初始化与静态文件路由

Flask 是 Python 生态里轻量的 Web 框架，很适合这类小型展示站。下面给出应用初始化与静态文件路由的核心代码：

from flask import Flask, render_template, send_from_directory
import os

BASE_DIR = os.path.dirname(os.path.abspath(__file__))
app = Flask(__name__, template_folder=BASE_DIR, static_folder=None)

@app.route('/static/<path:filename>')
def serve_static(filename):
    return send_from_directory(BASE_DIR, filename)

文章配图

代码说明：
* template_folder=BASE_DIR：模板指向项目根，Flask 直接找到 index.html；
* static_folder=None：禁用默认静态服务，避免 mp4 放错目录导致 404；
* /static/path:filename：自定义路由用 send_from_directory 从根目录取文件。

  • template_folder=BASE_DIR：将模板目录指向项目根目录，使Flask能直接找到根目录下的 index.html。
  • static_folder=None：禁用Flask默认的静态文件服务。因为视频文件 .mp4 直接放在项目根目录，不在 static/ 子目录中，默认路由会找不到文件导致404。
  • /static/path:filename 路由：自定义静态文件服务，使用 send_from_directory 从项目根目录查找文件，解决视频文件404问题。

踩坑记录：如果不禁用 static_folder，Flask会尝试在 static/ 子目录中查找文件，导致视频返回404。

4.2 首页路由与启动服务

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    print("=" * 60)
    print("课代表AI - 具身交互智能数字人教学平台")
    print("=" * 60)
    print("\n访问地址: )
    print("\n按 Ctrl+C 停止服务\n")
    app.run(host='0.0.0.0', port=5001, debug=True)

代码说明：

  • / 首页路由：直接渲染 index.html，没有任何多余的API接口。
  • app.run(host=‘0.0.0.0’, port=5001)：监听所有网卡，端口固定5001（避免与红厅智播5000端口冲突），调试模式支持代码修改自动重载。

4.3 前端页面结构

前端页面是用户直接面对的部分，用纯 HTML 实现，不依赖任何 JS 框架。页面结构包含 Hero 区、视频播放器、数据统计、核心能力卡片与工作流程引导等多个模块：

<body>
    <!-- 顶部导航栏 -->
    <nav class="nav">
        <div class="nav-logo">课</div>
        <div class="nav-name">课代表AI<small>具身交互智能数字人教学平台</small></div>
    </nav>

    <!-- Hero区域 -->
    <div class="hero">
        <div class="tag"><i></i>AI 数字人智能教学</div>
        <h1>课代表AI</h1>
        <p class="sub">具身交互智能数字人 · 知识点讲解平台</p>

        <!-- 视频播放器 -->
        <div class="player">
            <video autoplay muted loop playsinline controls>
                <source src="/static/544253caa9c44778aee83fb9f3d97459.mp4" type="video/mp4">
            </video>
            <div class="video-caption">AI数字人正在讲解知识点 — 具身交互智能数字人自动生成教学视频</div>
        </div>
    </div>

文章配图

<!-- 数据统计 -->
<div class="stats">
<div class="stat">
<div class="stat-num">60s</div>
<div class="stat-label">输入文案即可生成视频</div>
</div>
<div class="stat">
<div class="stat-num">7×24</div>
<div class="stat-label">全天候在线教学</div>
</div>
<div class="stat">
<div class="stat-num">0</div>
<div class="stat-label">零门槛 无需专业团队</div>
</div>
</div>

<!-- 核心能力 -->
<div class="section-title">
<h2>核心能力</h2>
<p>具身交互智能数字人，让知识讲解更生动</p>
</div>

<div class="features">
<div class="card">
<div class="card-icon blue">📝</div>
<h3>文案驱动生成</h3>
<p>输入知识点文案，具身交互智能数字人自动生成语音、口型、肢体动作，分钟级产出教学视频</p>
</div>
<div class="card">
<div class="card-icon cyan">🎭</div>
<h3>沉浸式教学</h3>
<p>数字人具备自然的表情和肢体语言，在虚拟教室场景中进行沉浸式知识点讲解，提升学习体验</p>
</div>
<div class="card">
<div class="card-icon violet">🔄</div>
<h3>规模化产出</h3>
<p>一次配置形象与场景，后续只需更换文案即可批量生成教学视频，轻松实现全科目覆盖</p>
</div>
</div>

<!-- 工作流程 -->
<div class="section-title">
<h2>使用流程</h2>
<p>四步完成AI教学视频生成</p>
</div>

<div class="workflow">
<div class="workflow-steps">
<div class="step">
<div class="step-num">1</div>
<h4>配置数字人</h4>
<p>选择形象、音色、教学场景</p>
<span class="step-arrow">→</span>
</div>
<div class="step">
<div class="step-num">2</div>
<h4>输入知识点</h4>
<p>编写教学文案，组织SSML脚本</p>
<span class="step-arrow">→</span>
</div>
<div class="step">
<div class="step-num">3</div>
<h4>生成视频</h4>
<p>一键渲染，自动输出教学视频</p>
<span class="step-arrow">→</span>
</div>
<div class="step">
<div class="step-num">4</div>
<h4>在线展示</h4>
<p>视频嵌入网站，学生随时观看</p>
</div>
</div>
</div>

<!-- 底部 -->
<footer class="foot">
<div class="foot-line"></div>
<p>课代表AI · 具身交互智能数字人教学平台</p>
</footer>
</body>

页面结构为：顶部固定导航 + Hero 区（标签、标题、副标题、视频播放器与说明）+ 数据统计条（60s/7×24/0）+ 核心能力卡片（3 张）+ 工作流程引导（4 步）+ 底部页脚。

视频用 autoplay muted loop playsinline 自动静音循环，controls 提供控制条。

4.4 亮色蓝紫主题CSS

视觉设计是课代表AI的重要一环。为了契合教育科技的品牌调性，整体采用亮色蓝紫主题，通过CSS渐变、毛玻璃、卡片悬浮等现代CSS技术实现精致的视觉效果：

body {
    background: linear-gradient(135deg, #F0F4FF 0%, #E8EEFF 50%, #F0F0FF 100%);
    color: #333;
    min-height: 100vh;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(66,99,231,0.07) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(56,189,248,0.05) 0%, transparent 50%);
}

.nav {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex; align-items: center;
    padding: 0 40px; height: 64px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(66,99,231,0.1);
    box-shadow: 0 2px 20px rgba(66,99,231,0.06);
}

h1 {
    font-size: 3.5em; font-weight: 900; letter-spacing: 4px;
    background: linear-gradient(135deg, #4263EB 0%, #38BDF8 50%, #6366F1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
}

文章配图

.player {
    width: 100%; max-width: 900px;
    border-radius: 16px; overflow: hidden;
    border: 2px solid rgba(66,99,231,0.15);
    box-shadow: 0 20px 50px rgba(66,99,231,0.12);
    background: #fff;
}

.card {
    background: rgba(255,255,255,0.85);
    border-radius: 14px;
    padding: 28px 24px;
    border: 1px solid rgba(66,99,231,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(66,99,231,0.1);
}

.stat-num {
    font-size: 2.2em; font-weight: 800;
    background: linear-gradient(135deg, #4263EB, #38BDF8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (max-width: 768px) {
    .nav { padding: 0 20px; }
    h1 { font-size: 2.2em; letter-spacing: 2px; }
    .sub { font-size: 0.95em; }
    .hero { padding: 90px 16px 40px; }
    .stats { gap: 30px; }
    .stat-num { font-size: 1.6em; }
    .features { grid-template-columns: 1fr; }
    .workflow-steps { flex-direction: column; gap: 20px; }
    .step-arrow { display: none !important; }
}

设计亮点：
* 浅蓝白渐变背景：清爽科技感；
* 蓝紫色效：双 radial-gradient 叠出层次；
* 蓝紫渐变标题：科技与亲和并存；
* 白色毛玻璃导航：磨砂质感；
* 蓝紫调视频框：内容更突出；
* 卡片悬浮：hover 上浮 + 阴影；
* 渐变数字：数据醒目；
* 响应式适配：手机端单列。

  • 浅蓝白渐变背景：#F0F4FF → #E8EEFF → #F0F0FF，清爽科技感，契合教育科技主题
  • 蓝紫色效：两个 radial-gradient 叠加，左上蓝色、右下青色，增加视觉层次感
  • 蓝紫渐变标题：#4263EB → #38BDF8 → #6366F1，科技感与亲和力并存
  • 白色毛玻璃导航：backdrop-filter: blur(16px) 实现磨砂质感
  • 蓝紫调视频框：白底 + 蓝色边框阴影，视频内容更突出
  • 卡片悬浮效果：hover时上浮4px + 蓝色阴影，交互感强
  • 数据统计渐变数字：蓝紫渐变文字，数据展示醒目
  • 响应式适配：@media (max-width: 768px) 适配手机端，卡片单列、流程纵向排列

五、总结

通过本次实战，我们基于具身交互智能数字人技术，完成了知识点讲解平台“课代表AI”的搭建。整个流程分为两步：

  1. 视频生成：在魔珐星云控制台配置数字人教师形象、教学音色、虚拟教室场景，编写知识点SSML教学脚本，一键生成具身交互智能数字人讲解视频。整个过程无需专业教师和摄影团队，分钟级即可完成
  2. 网站搭建：使用Flask搭建展示网站，自定义静态文件路由服务视频文件，前端采用亮色蓝紫主题UI，包含视频播放、数据统计、核心能力卡片、工作流程引导等丰富页面元素

网站代码精简，后端只提供首页路由与静态文件服务两个接口，前端包含 Hero 区、数据统计、功能卡片与工作流程等模块，核心就是把具身交互智能数字人教学视频精美地呈现出来。

项目亮点：
* 技术助力教育：把数字人技术引入教学，探索 AI 助力知识传播；
* 极简实现：仅 2 个核心文件，易读易维护；
* 丰富页面元素：统计、卡片、流程等模块完整；
* 可扩展性强：可扩展为多视频分类、检索、进度追踪。

  • 技术助力教育：将具身交互智能数字人技术引入在线教学场景，探索AI助力知识传播的新路径
  • 极简实现方案：仅需2个核心文件即可完成，代码量小、易于理解和维护
  • 丰富页面元素：数据统计、能力卡片、工作流程等多种模块，展示效果完整
  • 可扩展性强：后续可扩展为多视频分类展示、知识点检索、学习进度追踪等更丰富的功能
0

猜你喜欢

循序渐进用LangGraph搭生产级智能体平台
AI技术

目录 一、为什么写这个系列？ 二、项目特色与学习路径 （一）基本特色 （二）学...
54分钟前 10 0
A2A协议五大设计原则：智能体协作基石
AI技术

A2A协议五大设计原则：构建AI智能体协作的基石 前言：AI智能体协作的时代需求 ...
54分钟前 8 0
把长期任务交给 Agent：五层结构与人机协作边界
AI技术

在新型工业化推进过程中，工业、能源、轨道交通、金融、车联网等行业每时每刻都在...
54分钟前 6 0
把夸克网盘交给AI：Skill让Agent管文件
AI技术

1 人工智能发展历史 1.1 AI 兴起阶段（1941~1956） 1.1.1 图灵机（Turing Machine...
54分钟前 6 0
四根支柱撑起AI Agent：大脑工具记忆规划
AI技术

AI Agent 的四根支柱：LLM、工具、记忆与规划是如何协同的 很多人第一次接触 AI A...
54分钟前 6 0
自动驾驶 L3/L4 责任与法规：一张表看懂分级落地
AI技术

《智能驾驶拆解笔记：老周唠透车圈AI》第9篇（系列终篇） 开篇小故事 前阵子行业...
54分钟前 6 0
当远程桌面装上AI大脑：办公生产力重构
AI技术

2026远程控制融合 AI 智能体，重构远程办公生产力 远程办公如今已是家常便饭，...
54分钟前 6 0
开源AI Agent工具集推荐：工具市场解析
AI技术

工具市场：开源AI Agent工具集推荐 📝 本章学习目标 ：本章聚焦工具系统，让AI Ag...
1天前 28 0
OpenAI两套对话接口怎么选：新老项目避坑
AI技术

1 ~> OpenAI API 体系与版本演进 1.1 两套核心 API 定位 OpenAI 现在开放了...
1天前 24 0
reverse-skill：装上逆向渗透路由大脑
AI技术

文章目录 一、为什么需要「路由」而不是直接问 AI 二、整体架构：从用户任务到...
1天前 20 0
AI编程平台：MonkeyCode接入VS Code
AI技术

前言 MonkeyCode 部署完成以后，是不是只能在那台 Linux 服务器上使用？ 不是。 ...
2天前 32 0
LLM踩坑实录：2个最容易忽略的细节
AI技术

我是工藤学编程 🦉 一个正在努力学习的小博主，期待你的关注 ，大家好 实...
2天前 22 0

评论0

请先
显示验证码
没有账号？注册  忘记密码？