AI 驱动教学革命：3 分钟生成专业级动画课件，还能导出视频 GIF！

1.前言

在教育信息化的今天，如何用更生动、更直观的方式讲解抽象的知识点，一直是教育工作者面临的挑战。传统的教学课件制作往往需要教师花费大量时间学习复杂的动画制作软件，而制作出的效果又往往难以达到理想水平。

AI辅助生成精美动画HTML技术的出现，彻底改变了这一局面。它是一种结合了人工智能大语言模型和现代Web技术的创新解决方案，能够根据用户输入的教学主题，自动生成视觉精美、内容准确、交互流畅的HTML5动画页面。这些动画页面不仅可以在浏览器中直接播放，还能导出为MP4视频或GIF格式，便于在各种教学场景中使用。

上期给大家介绍过一个基于dify的AI 驱动的教育动画工作流。《dify案例分享-用 Dify 一键生成教学动画 HTML！AI 助力，3 分钟搞定专业级课件》，有的小伙伴提出这个能不能生成视频呢？由于dify在生成视频这块不太好控制，我们使用代码来实现视频生成，在上周的代码基础上并制作了GIF动画。

生成的视频和动画效果如下：

视频效果如下：

GIF动画如下：

目前这个项目我们已经在github上开源了。下面给大家介绍一下项目的情况以及项目使用和部署。

2.项目简介

Instructional Animation 是一个基于大语言模型的教学动画生成工具，能够根据用户输入的知识点主题，自动生成视觉精美、交互流畅的 HTML5 动画页面，并支持导出为 MP4 视频和 GIF 格式。

✨ 核心特性

🤖 AI 驱动生成：基于大语言模型自动生成符合教学需求的动画内容
🎨 视觉精美：2K 分辨率（1280×720），浅色主题配色方案，专业视觉效果
🌐 双语支持：中英文界面切换，双语字幕显示
🎬 一键导出：支持导出为 HTML、MP4 视频、GIF 格式
⚡ 流式生成：Server-Sent Events (SSE) 实时流式输出生成过程
🎯 多轮对话：支持对生成结果进行迭代优化和调整
🐳 容器化部署：Docker 一键部署，支持 Docker Compose
🔧 多模型支持：支持 Anthropic Claude、OpenAI 兼容接口、DeepSeek 等多种模型
✅ 连接测试：内置 API 连接验证功能，带视觉反馈提示
📦 动态配置：通过设置模态框实时配置 API 参数，无需重启服务

🎯 应用场景

教育教学：为学生讲解复杂概念（数学、物理、化学、生物等）
知识分享：制作科普视频和教程动画
演示文稿：生成动态演示效果，提升 PPT 表现力
在线课程：快速制作课程配套动画素材

🛠️ 技术栈

后端

FastAPI - 现代高性能 Web 框架
OpenAI API - 兼容 OpenAI 接口的大语言模型
Playwright - 浏览器自动化与页面录制
FFmpeg - 视频转码与处理
Python 3.11 - 核心开发语言

前端

HTML5 / CSS3 / JavaScript - 原生 Web 技术栈
GSAP - 高性能动画库
Jinja2 - 模板引擎

3.项目部署实战

接下来我们给大家介绍这个项目是如何部署和使用的。

目前项目提供源码部署和docker部署。为了方便大家使用我们使用docker部署方式

下载镜像

我们这里以linux服务为案例给大家讲解，提前先把docker安装好。输入下面的命令下载docker镜像

shell 复制代码

docker pull wwwzhouhui569/in_animation:latest

我电脑上已经提前下载过了，所以提示上面已经下载好的信息。如果没有下载需要等待一会。

下载完成后，我们输入下面的命令，确保镜像下载完成

shell 复制代码

docker images

看到上面信息说明镜像已经下载完成。

配置文件

接下来我们需要创建2个空文件夹，一个是存放我们生成的MP4和gif文件，一个是存放日志

我们可以输入下面命令创建

shell 复制代码

mkdir logs
mkdir output

另外我们还需要设置一下.env文件

这个文件从哪里获取，从源码中下载.env.example

我们可以使用下面命令复制.env.example

shell 复制代码

cp .env.example .env

然后编辑 .env 文件并填入实际值：

shell 复制代码

API_KEY=your-api-key-here
BASE_URL=https://api.example.com/v1
MODEL=your-model-name

.env 配置文件效果如下

这里我们使用的minimaxi最新的MiniMax-M2 模型。

以上设置完成我们看一下配置文件和文件夹

容器启动

shell 复制代码

docker run -d \
  --name in_animation \
  -p 8000:8000 \
  -v $(pwd)/.env:/app/.env:ro \
  -v $(pwd)/output:/app/output \
  -v $(pwd)/logs:/app/logs \
  -e TZ=Asia/Shanghai \
  --restart unless-stopped \
  wwwzhouhui569/in_animation:latest

运行启动

启动完成后我们输入下面命令检查容器启动

shell 复制代码

docker logs -f in_animation

测试

浏览器输入请求地址 http://localhost:8000

我这里部署在公网服务器上，所以地址变成http://115.190.165.156:8000

看到上面的画面我们系统就部署完成了，是不是非常简单。

使用

我们在平台输入我们要的产生的动画，目前平台随机生成各种信息方便大家使用

我们输入勾股定理，点击聊天窗口中小箭头执行

AI 会生成代码生成过程

生成完成后我们就可以看到关于"勾股定理" 演示动画了。

我们可以在新窗口打开查看，也可以点击保存生成的HTML 页面，还可以生成视频MP4，以及生成gif动画。通过这样的方式我们非常直观对一些原理进行深入的理解，提高我们学习兴趣。

通过以上访问我们就完成了系统部署和使用，是不是非常的简单呵呵。

目前这个项目我已经开源，项目地址是github.com/wwwzhouhui/...

觉的项目不错可以帮我点个赞。

项目体验地址：

http://115.190.165.156:8000/

4.总结

今天主要带大家了解并实现了 Instructional Animation 教学动画生成工具的部署实战与应用流程，该工具以 "AI 驱动生成 + 多格式导出" 为核心优势，结合教育教学场景需求，通过 Docker 容器化部署方案与直观的 Web 交互界面，形成了一套从环境配置、动画生成到格式导出的全链路教学内容制作解决方案。

通过这套实践方案，教育工作者能够高效突破传统课件制作瓶颈 ------ 借助简单的分步操作（包括 Docker 镜像拉取、配置文件设置、容器启动），无需掌握复杂的动画制作技术或视频编辑能力，就能快速生成专业级教学动画（如本次演示的 "勾股定理" 动态演示）。无论是基础的动画内容生成、HTML 页面保存，还是 MP4 视频导出、GIF 动图制作，都能通过平台提供的功能一键完成，极大降低了动态教学资源的制作门槛。在实际应用中，该工具不仅支持 2K 高清分辨率输出，还具备双语界面与字幕显示能力，适配性远优于传统课件工具；特别是通过 SSE 流式生成技术与多轮对话功能，有效解决了动画内容迭代优化的难题。同时，方案具备良好的扩展性 ------ 小伙伴们可以基于此扩展更多教学场景，如理科公式推导动画、生物细胞结构演示、历史事件时间轴可视化等，进一步发挥动态教学内容在在线教育、课堂互动、知识科普等领域的应用价值。

感兴趣的小伙伴可以按照文中提供的步骤进行实践，根据实际教学需求调整动画内容或导出格式。今天的分享就到这里结束了，我们下一篇文章见。