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

魔珐星云 PC 端官方链接：https://xingyun3d.com?utm_campaign=daily&utm_source=CSDNwanfen2&utm_medium=&utm_term=&utm_content=

一、项目背景与目标

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": "https://media.xingyun3d.com/xingyun3d/general/videoscript/image/wupinzujieshuoming/279681_980d79a3d8414301a87a45.png"
    },
    {
        "text": "平台可用学习资源：知识点讲解素材、数字人交互模板、演示文稿素材、字幕工具、场景素材、数字人形象微调权限等学习配套资源。资源访问入口：课代表AI工作台首页。",
        "media_url": "https://media.xingyun3d.com/xingyun3d/general/videoscript/image/wupinzujieshuoming/279681_cecb2d7c56064dacbe4e51.png"
    },
    {
        "text": "平台内置素材市场，可按需挑选数字人形象、教学场景、音频素材，丰富你的知识点讲解内容。",
        "media_url": ""
    }
]

脚本说明：每个段落为一个JSON对象，包含 text（文案内容）和 media_url（配图URL，可为空）。数字人会根据文本自动生成对应的语音和口型动画，配合肢体动作完成讲解。配图会在对应段落自动展示，丰富教学内容。

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

脚本生成：

三、技术架构与项目结构

3.1 整体架构

课代表AI的整体架构分为三个阶段：平台配置、视频生成、网站展示。首先在魔珐星云控制台完成数字人教师形象和场景的配置，然后编写SSML教学脚本生成具身交互智能数字人讲解视频，最后通过Flask网站嵌入视频完成展示页面的搭建。

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

3.2 项目结构

项目采用极简的文件结构，核心只有2个文件，职责清晰：

课代表AI/
├── web_app.py           # Flask Web应用（首页服务、视频文件服务）
├── index.html           # 前端页面（课代表AI展示页）
├── requirements.txt     # Python依赖
└── *.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：禁用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访问地址: http://localhost:5001")
    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; }
}

设计亮点：

  • 浅蓝白渐变背景：#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个核心文件即可完成，代码量小、易于理解和维护
  • 丰富页面元素：数据统计、能力卡片、工作流程等多种模块，展示效果完整
  • 可扩展性强：后续可扩展为多视频分类展示、知识点检索、学习进度追踪等更丰富的功能

魔珐星云 PC 端官方链接：https://xingyun3d.com?utm_campaign=daily&utm_source=CSDNwanfen2&utm_medium=&utm_term=&utm_content=

# 交互 # flask # 人工智能
Logo
DAMO开发者矩阵

DAMO开发者矩阵，由阿里巴巴达摩院和中国互联网协会联合发起，致力于探讨最前沿的技术趋势与应用成果，搭建高质量的交流与分享平台，推动技术创新与产业应用链接，围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐

cover

RPA机器人开发全解：Copilot+大模型接口集成，从源码到架构的深度拆解

avatar DAMO开发者矩阵

【路径规划】基于反向粒子群算法求解栅格路径规划及避障matlab代码​

基于改进粒子群算法的移动机器人路径规划,通过建立目标函数,变换坐标等对环境建模,再引入反向粒子群优化算法,得到全局最优路径.MATLAB仿真结果显示,此方法可有效地解决空间作业机器人路径规划及避障问题.与传统粒子群算法比,该法建模容易,计算快捷,可以在不同的障碍物环境下得到不同的优化轨迹​。

avatar DAMO开发者矩阵

旁挂双击热备负载分担组网场景

1、SW3：正常情况SW1—FW1—SW1—R5故障情况SW2—FW2—FW2—R62、SW4：正常情况SW2—FW2—FW2—R6故障情况SW1—FW1—SW1—R53、整个交换网络实现负载分担 创建vlan、生成树、VRRP。FW1下行路由配置：（192.168.2.0/24和192.168.3.0/24两个网段汇聚成192.168.0.0/16网段）HRP_M。FW1上行路由配置：HRP_S

avatar DAMO开发者矩阵