【标签】 社会服务、社会公益
【标题】 【社会服务赛道】遗境探秘 —— AI 驱动的非遗沉浸式互动剧本游戏 Demo
【正文】 至少包含以下 4 个部分，可以增加额外的部分（比如自我介绍、经验总结、踩坑复盘等）
0. 先和大家打个招呼吧 
-
**你是谁：**大家好，我是一名对非遗文化充满热情的独立开发者；先贴个体验地址：http://47.108.118.95
-
你是怎么用 TRAE 把 Demo 做出来的： 说实话，如果没有 TRAE，这个项目我大概率做不到。我不是全栈工程师，前端会一点 React，后端 FastAPI 只用过几次，Docker 部署更是从来没摸过。但有了 TRAE IDE 的 SOLO 模式，我只需要把脑子里的想法用大白话讲给它听——“我要一个古风对话界面，左边是场景图，右边是卷轴式对话框，NPC 说话要有打字机效果”——它就能帮我生成完整的 TypeScript 组件代码。
-
让我印象最深的几个瞬间：
前端古风 UI：我说"水墨配色、宣纸质感、金色描边"，TRAE 直接帮我生成了完整的 CSS 变量体系和 Tailwind 配置。那一刻觉得，原来设计系统不用从零调，一句话就够了。
后端 API：我完全不懂 FastAPI 的异步数据库操作，TRAE 帮我搭建了完整的 SQLAlchemy async 模型、JWT 认证、API 路由，还帮我处理了数据库迁移。
Docker 部署：我从来没写过 Dockerfile 和 docker-compose，TRAE 帮我生成了多阶段构建的前后端镜像、Nginx 反向代理配置，甚至还帮我写了一键部署脚本。
LLM 集成：从本地 Ollama 切换到硅基流动云端 API，TRAE 帮我重构了整个 LLM 服务层，支持多后端切换。 -
前后大概两周，一个人，从零到可在线体验的完整产品。TRAE 帮我跨过了前端动画、后端架构、容器化部署这三道我原本以为搞不定的坎。
-
（我们相信，每个作品背后都有一个真实的人。这段不计入评分，但真诚的分享，会让你的作品更有温度、也更容易被看到
）
1. Demo 简介
-
是什么：一款可在线体验的古风沉浸式互动叙事网站。玩家穿越到明代景德镇御窑厂，通过 AI 自由对话、非遗工艺小游戏、知识卡片收集，揭开碎瓷谜案的真相。
-
面向谁：对传统文化感兴趣的年轻人（18-35 岁）
高校非遗文化课程的教学场景
博物馆、文化馆的数字互动展览 -
主要功能：
-
① AI 自由对话 —— 6 位 NPC 都是"活人" 接入 GLM-Z1-9B 大模型（硅基流动免费 API），每位 NPC 有独立人格设定。玩家可以自由提问，AI 实时生成符合角色性格的古风回复。
玩家问：“陈师傅，你走神了在想什么呢？” 陈守正答：“（（撂下窑钳揉了揉眉心）咳…福建来的瓷片，釉面泛着金丝纹路？（指节叩了叩青瓷坛）当年李家那批秘色釉烧成，底款分明是"隆庆三年"…"（突然顿住，窑火映得瞳仁发亮）清言莫要乱跑，前日新到的龙纹梅瓶…（从袖中摸出半块焦黑瓷片）你瞧这裂痕，像不像十年前那场横祸？”
② 三大非遗工艺小游戏 拉坯成型（鼠标模拟辘轳拉坯）、窑火烧制（控制升温曲线）、青花绘制（沿虚线描画缠枝莲纹），成绩评级 S/A/B/C。
③ 多分支剧情 + 五重结局 + 知识卡片收集 半线性叙事，玩家选择影响剧情走向。五重结局由四维属性 + 收集度综合计算。知识卡片通过对话、小游戏、探索解锁。
2. Demo 创作思路
-
灵感来源：看到景德镇御窑厂遗址的纪录片，想到如果能让人「穿越」进去亲身体验制瓷工艺，而不是看展板听讲解，非遗才能真正走进人心。
-
想解决的问题：非遗科普方式枯燥乏味，年轻人不愿意接触；传统游戏 NPC 对话固定死板，聊几句就重复了；非遗数字产品往往只是把纸质内容搬到屏幕上，没有利用 AI 创造真正的互动体验。
-
为什么做这个方向：大赛有「非遗创新创意开发」这个附加赛题，而我本身对陶瓷文化很感兴趣。AI 大模型的角色扮演能力已经足够成熟，可以让游戏 NPC 具备「活人」般的对话能力。这个方向把技术创新、文化传承和社会价值三者结合在了一起。
3. Demo 体验地址（三选一）
-
在线体验： http://47.108.118.95
账号：demo / 123456
进入后选择「景德镇碎瓷谜案」剧本
与 NPC 自由对话，体验 AI 实时生成回复
完成小游戏，收集知识卡片
4. TRAE 实践过程
整个项目从 6 月下旬开始，到 7 月初完成部署上线，全程使用 TRAE IDE 开发。以下是关键阶段：
第一阶段：项目搭建与前端开发（6 月 24-28 日）
用 TRAE Work 生成创意方案和项目架构
用 TRAE IDE SOLO 模式生成古风 UI 体系（水墨配色、卷轴对话框、Canvas 粒子动画）
开发拉坯、青花绘制、窑火烧制三大 Canvas 小游戏
实现场景探索、对话系统、知识卡片收集等核心组件
🔑 Session ID: 3675014753685578:40765a1b37fdcf93ff43fffe73fb6365_6a392d06a31998baa23402dd.6a484e8a7ef935fd466e414b.6a484e897ef935fd466e4149:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/7/4 08:06:34)
第二阶段：后端开发与 AI 集成（6 月 26-29 日）
TRAE 帮我搭建 FastAPI 后端：SQLAlchemy async 模型、JWT 认证、API 路由
集成 Ollama 本地 LLM，实现 NPC 自由对话
完成多分支剧情系统、结局计算逻辑、存档系统
🔑 Session ID: 3675014753685578:78a7b4fc4451d6d766bc5f5388cd83ec_6a392d06a31998baa23402dd.6a48679b0716037d2cd8eb8d.6a48679b0716037d2cd8eb8b:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/7/4 09:53:31)
第三阶段：优化打磨（6 月 30 日 - 7 月 3 日）
修复游戏流程 bug、优化 UI 交互细节
添加结局动画（五幕式 Canvas 粒子特效）
开场动画优化（金色光点飘浮、瓷器浮现）
小游戏难度平衡和 NPC 引导优化
🔑 Session ID: 3675014753685578:429d2c35d43054743dedd440f98fef76_6a392d06a31998baa23402dd.6a486f7b0716037d2cd8ec1c.6a486f7b0716037d2cd8ec1a:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/7/4 10:27:07)
第四阶段：LLM 切换与服务器部署（7 月 4 日）
重构 LLM 服务层，从本地 Ollama 切换到硅基流动 GLM-Z1-9B 免费模型
编写 Docker 多阶段构建配置（前端 Nginx + 后端 FastAPI + PostgreSQL + Redis）
一键部署到阿里云 2GB 内存服务器
SSH 连接复用、PostgreSQL 权限问题排查、数据库自动初始化
🔑 Session ID: 3675014753685578:fef9d15fd8f7420022bd6f142658fc1e_6a392d06a31998baa23402dd.6a48c0ab0716037d2cd8eed0.6a48c0ab0716037d2cd8eece:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/7/4 16:13:31)
5. 对应的报名审核通过的帖子链接
技术栈一览
维度 技术
前端 React 19 + TypeScript + Tailwind CSS + Vite + Zustand
后端 FastAPI + SQLAlchemy(async) + PostgreSQL + Redis
AI GLM-Z1-9B（硅基流动）/ Ollama 本地，一键切换
部署 Docker Compose，阿里云 2GB 服务器
视觉 Canvas 粒子系统、打字机效果、古风水墨配色
项目规模： 约 15,000+ 行代码，40+ 前端组件，10 张数据表。
