摘要：本文分享了基于具身交互智能数字人技术，打造**古诗词沉浸式赏析平台"诗词大会AI"**的完整实战经验。从魔珐星云控制台配置古风数字人形象、诗词朗诵音色、亭台楼阁虚拟场景，到编写SSML诗词脚本生成数字人讲解视频，再到搭建Flask展示网站嵌入视频，全流程手把手教学。网站采用古风国潮主题，宣纸色渐变背景搭配朱红鎏金主色调，融合数据统计、核心能力卡片、工作流程引导等丰富页面元素，最终实现一个极具传统美学意境的具身交互智能数字人诗词赏析页面。

魔珐星云PC端官方链接：https://xingyun3d.com?utm_campaign=daily&utm_source=CSDNwanfen3&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": "各位新伙伴大家好！我是行政文捷！职场如诗，步履成章！今日开启行政诗词专场，解锁专属服务锦囊，轻松闯关职场日常！",
        "media_url": "https://media.xingyun3d.com/xingyun3d/general/videoscript/image/wupinzujieshuoming/279681_980d79a3d8414301a87a45.png"
    },
    {
        "text": "笔墨文具皆可领，纸笔胶擦一应盈；工牌旧件可换新，十七楼前台，一站式办妥无忧！",
        "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           # 前端页面（古风国潮展示页）
├── 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:5002")
    print("\n按 Ctrl+C 停止服务\n")
    app.run(host='0.0.0.0', port=5002, debug=True)

代码说明：

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

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/f852076cc0244139a36e0300d5caad50.mp4" type="video/mp4">
            </video>
            <div class="video-caption">AI数字人正在赏析古诗词 — 具身交互智能数字人带你穿越千年诗境</div>
        </div>
    </div>

    <!-- 数据统计 -->
    <div class="stats">
        <div class="stat">
            <div class="stat-num">300+</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 red">📜</div>
            <h3>诗词文案驱动</h3>
            <p>输入诗词与赏析文案，具身交互智能数字人自动生成语音、表情、手势，演绎诗词意境</p>
        </div>
        <div class="card">
            <div class="card-icon gold">🏯</div>
            <h3>古风场景沉浸</h3>
            <p>数字人身着古装，在亭台楼阁、山水画卷等古典场景中进行沉浸式诗词讲解</p>
        </div>
        <div class="card">
            <div class="card-icon green">🎭</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>编写诗词原文与赏析文案</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区域（标签 + 标题 + 副标题 + 视频播放器 + 视频说明）+ 数据统计条（300+/7×24/0三组数据）+ 核心能力卡片（3张功能卡片）+ 工作流程引导（4步流程图）+ 底部页脚。视频播放器通过 autoplay muted loop playsinline 实现自动静音循环播放，controls 提供控制条。

4.4 古风国潮主题CSS

视觉设计是诗词大会AI的灵魂所在。为了契合传统文化的品牌调性，整体采用古风国潮主题，通过CSS渐变、毛玻璃、古典衬线字体、卡片悬浮等现代CSS技术实现精致的国风视觉效果：

/* 宣纸色渐变背景 */
body {
    font-family: 'Noto Serif SC', 'Source Han Serif CN', 'STSong', 'SimSun', serif;
    background: linear-gradient(135deg, #F5F0E8 0%, #EDE4D3 50%, #F0E8D8 100%);
    color: #2C2C2C;
    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 15% 25%, rgba(184,66,58,0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 75%, rgba(201,169,110,0.06) 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(245,240,232,0.95);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(201,169,110,0.2);
    box-shadow: 0 2px 20px rgba(44,44,44,0.05);
}

/* 标题：朱红鎏金渐变文字 */
h1 {
    font-size: 3.5em; font-weight: 900; letter-spacing: 8px;
    background: linear-gradient(135deg, #B8423A 0%, #C9A96E 50%, #8B4513 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(201,169,110,0.3);
    box-shadow: 0 20px 50px rgba(44,44,44,0.12);
    background: #FDF8F0;
}

/* 功能卡片：悬浮效果 */
.card {
    background: rgba(253,248,240,0.9);
    border-radius: 14px;
    padding: 28px 24px;
    border: 1px solid rgba(201,169,110,0.15);
    transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(184,66,58,0.08);
}

/* 数据统计：朱红鎏金渐变数字 */
.stat-num {
    font-size: 2.2em; font-weight: 800;
    background: linear-gradient(135deg, #B8423A, #C9A96E);
    -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: 4px; }
    .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; }
}

设计亮点：

  • 宣纸色渐变背景：#F5F0E8 → #EDE4D3 → #F0E8D8，温润古朴，契合传统文化主题
  • 水墨风色效：两个 radial-gradient 叠加，左上朱红、右下鎏金，淡雅如水墨画
  • 朱红鎏金渐变标题：#B8423A → #C9A96E → #8B4513，古典华贵，诗词韵味十足
  • 宣纸色毛玻璃导航：backdrop-filter: blur(16px) 实现磨砂宣纸质感
  • 鎏金调视频框：暖白底 + 鎏金边框阴影，视频内容更具古韵
  • 古典衬线字体：Noto Serif SC / Source Han Serif CN，诗词展示更有书卷气
  • 卡片悬浮效果：hover时上浮4px + 朱红阴影，交互感强
  • 响应式适配：@media (max-width: 768px) 适配手机端，卡片单列、流程纵向排列

五、总结

通过本次实战，我们基于具身交互智能数字人技术，使用魔珐星云平台完成了古诗词赏析平台"诗词大会AI"的搭建。从古风数字人形象配置、诗词SSML脚本编写，到数字人讲解视频生成，再到Flask古风国潮展示网站搭建，全流程跑通。整个项目代码精简、易于维护，为传统文化的当代传播提供了一种低成本、高效率的具身交互智能数字人内容生产方式。

  • 文化传承创新：将具身交互智能数字人技术引入古诗词赏析场景，探索AI赋能传统文化传播的新路径
  • 古风国潮设计：宣纸色渐变背景 + 朱红鎏金主色调 + 古典衬线字体，视觉风格独树一帜
  • 极简实现方案：仅需2个核心文件即可完成，代码量小、易于理解和维护
  • 丰富页面元素：数据统计、能力卡片、工作流程等多种模块，展示效果完整
  • 可扩展性强：后续可扩展为多诗词分类展示、诗人专题、飞花令互动等更丰富的功能

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

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

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

更多推荐

cover

企业微信API怎么区分群消息和单聊消息？看懂roomType就够了

avatar DAMO开发者矩阵
cover

机器人训练仿真：域随机化不是“加点噪声”，而是先列清五类不确定性

avatar DAMO开发者矩阵

深度解析：有能力为具身终端打造大脑的技术方案有哪些？

为具身终端打造大脑，是当前人工智能领域皇冠上的明珠。Physical Intelligence 试图用端到端的大模型复刻自然语言处理的奇迹；英伟达以算力和仿真生态构筑降维打击的平台；而贝塔无限则立足于泛消费级场景的真实需求，以“BetaMem记忆+BetaWAM世界模型”的系统工程，率先交出了长程复杂任务的高分答卷。这三种技术方案虽路径迥异，但目标一致：赋予机器人真正的认知与推理能力。随着这些大脑

avatar DAMO开发者矩阵