空墨：伸出手，在空中写个字。

TRAE AI 创造力大赛 【大赛初赛专区】
1

【硬件交互赛道】 | 空墨：隔空书法 AI 工作坊

0.前言

目前大一学生一名，没事搞得。

1.Demo简介

  • 名称：空墨（Air Ink）— 隔空书法 AI 工作坊

  • 产品形态：网站（打开浏览器、开启摄像头、伸出手指就能用）

  • 面向哪些用户：
    大学生——对书法好奇但宿舍没条件上纸墨
    年轻白领——办公族想换个方式放松，体验新鲜的文化互动
    海外华人/中文学习者——想用手感受汉字，找一种轻量的书写体验媒介
    小朋友——对"动起来"的交互更敏感，喜欢新奇有趣的书写方式

  • 技术实现：

1
11920×603 74.3 KB

  • 主要功能：

    核心交互 :waving_hand:

    动作 效果
    打开页面 → 点"启动摄像头" 先弹权限请求 → 摄像头画面出现 → 后台加载 AI 模型
    拇指 + 食指捏合 落笔，开始书写（指尖变成实心绿点）
    捏着移动 在空气中画线，摄像头画面实时显示金色轨迹
    松开 停笔，笔迹存入画布，轨迹渐隐 2 秒消失
    鼠标/触摸 不启动摄像头也可直接用鼠标或手指在画面区域画

    笔刷系统 :paintbrush:

    笔刷 特征
    标准 粗细一致的圆润线条
    尖锋 起笔细→中段粗→收笔细，两端透明度略低
    枯笔 有断续飞白效果，模拟毛笔快没墨的质感

    • 粗细滑块（1–20）：三种笔刷共用，实时调整

    • 橡皮擦：捏合后在已写笔迹上涂抹即可擦除，擦除范围随粗细变化

    书法美化 :clipboard:

    写完内容后点"书法美化"，系统将笔迹拖入独立画布：

    • 自动居中、缩放、均匀排布

    • 可变线宽渲染：起笔极细→快速变粗→中段饱满→收笔渐细

    • 墨韵晕染层：笔画外围叠加半透明宽笔触，模拟纸面渗化

    • 输出为可作为数字书法的作品

    辅助功能 :card_file_box:

    功能 说明
    保存作品 导出为 PNG 图片
    撤回一笔 撤销最近一次落笔
    清空笔迹 清空所有内容
    关闭摄像头 停止追踪，可继续用鼠标绘图
    模型加载进度条 显示 “加载推理引擎→加载手部模型→初始化” 进度

    多种模式（demo阶段待完善）

    • 对战模式： 双人同屏比书法。两人站到摄像头前，AI 出同一道题，同时在空中书写，AI从形似度、笔顺、速度三维度实时评分决出胜者。

    • 创作模式： 空中写字，AI 美化。手指在空中书写，AI 识别文字并匹配颜体/行书/草书等书法风格，生成作品图片或书写动画GIF，可下载分享。

    • 习字模式： 实时纠错练笔顺。跟随屏幕上的标准字在空中描红，AI 检测笔顺是否正确并给出即时反馈。

    • 溯源模式：展示一个字从甲骨、金文到楷书的三千年演化，让用户在互动中看见汉字背后的文化时间线。

    • 1
      11920×954 90.1 KB

  • 在什么场景下使用（包括但不限于）：
    下班/课后对着摄像头随手写几个字，解压又有新鲜感
    朋友来家里时对战比谁写得好
    写一首诗生成卷轴图片，当作数字礼物分享出去
    文化展览、校园活动中作为互动装置体验

2.Demo 创作思路

  • 灵感来源：

    灵感其实来自上个月在地铁上看到的一幕。对面坐着个五六岁的小孩，一直用手指在起雾的玻璃窗上画字——画一个，车窗外的灯光透过来亮一下，再画一个，又亮一下。他妈妈在旁边说“别画了，脏”，但他根本停不下来，专注得像是发现了某种秘密仪式。我当时突然意识到一件事：人类对“在空中留下痕迹”这件事，有一种近乎本能的迷恋。从洞穴壁画到黑板粉笔，从手指在雾气上划拉到今天的触控屏，我们一直在找更轻量的方式“把脑子里的东西放出来”。书法本来也是这种本能。只是后来被纸墨、字帖、正襟危坐的门槛包装得太沉重了。我想做的不是另一个“练字工具”，而是把那种地铁小孩手指划过玻璃的快感还给你——只不过这次，你画在空气里，屏幕帮你接住。

  • 想解决的问题：

    先说清楚：空墨不是练字工具。 它做不到教你写好字，也不打分说你哪里写得不对。它想解决的是一个更底层的问题——**“大家想写字，但写字这件事被门槛包装得太严肃了。”**即带来乐趣。

    • 空间门槛：练字需要纸、墨、毡、字帖、桌子，想按下启动键估计要不少执行力呢。现在想伸手在空中比划一下，随时都可以。
    • 反馈门槛：传统练字靠自己看、靠老师偶尔指点。体验写字的纯粹乐趣，感受"哇我居然写出来了"，而不是"这里还有 17 个毛病要改"。
    • 坚持门槛：字帖临摹有点枯燥哈。但和朋友比谁写得好、写一个字看到它从甲骨文演化到今天的模样——这些不需要坚持，是上瘾的乐趣。
    • 连接门槛：海外华人和年轻一代对汉字有情感，但现有的方式要么太严肃（书法班），要么太肤浅（键盘打字）。缺少一种"认真但好玩"的连接方式。

  • 为什么做这个方向：

    选硬件交互，是因为摄像头捕捉手势这个交互本身就很有趣——你对着空气比划，屏幕上有回应，这种即时反馈带来的快乐是纯粹的。不需要外接硬件，每个人的笔记本都能跑，决定了这个项目可以传播出去，而不是只在比赛现场炫一下就没了。

选书法，不是为了让每个人成为书法家，而是因为写字是中国人最熟悉的陌生感——每个人都认识汉字，但大部分人已经很久没有认真写过一个字了。让这群人重新伸出手，在空中感受一笔一画的轨迹，这件事本身就有意义。

从文化价值来说，用科技让写字这件事变轻松。不需要正襟危坐、不需要准备好纸墨、不需要有书法基础。伸出手在空中画几笔，AI 把它变成有笔锋、有墨韵的数字作品。项目融合计算机视觉、AI 书写美化与传统书法美学，让"写一个字"变成一件可以随时发生的小事。

从体验价值来说，从"找纸、找笔、铺桌子"的漫长前置，压缩到"打开网页 → 抬手就写"的零门槛。对战模式让书写有竞技感，实时轨迹追踪让"在空中写字"本身就有交互的乐趣。生成的书法作品天然适合截图分享，作为数字礼物发出去也挺有意思，不是吗？

3.Demo 体验地址

可公开访问的demo体验链接:down_arrow:*（可从中跳转至项目介绍/创意展示页）*

4.更新

2026/7/9：

  • 新增功能 :sparkles:

    书写回放与 GIF 导出
    三种笔刷（标准/尖锋/枯笔）+ 橡皮擦 + 撤销/重做
    三种纸面样式 + 今日一字提示
    极简音效系统
    顶部导航栏 + 新手引导

  • 体验优化 :small_orange_diamond:

    手机端响应式适配
    模型文件真实下载进度条
    橡皮擦 requestAnimationFrame 批处理

  • Bug 修复 :card_file_box:

    枯笔笔迹重绘一致性（确定性伪随机替代 Math.random）
    作品画布鼠标书写坐标映射 + window 级事件监听
    橡皮擦卡死与渐隐痕迹可见度

2026/7/13：

  • 新增功能 :sparkles:
    四模式切换系统（创作/习字/溯源/对战）
    习字模式：20 字描红模板 + DTW 笔顺校验 + 三维评分
    汉字识别：位图匹配 Top-5 候选，离线运行
    溯源模式：识别后独立"溯源"按钮，展示甲骨文→楷书演变
    对战模式：2-4 人同屏轮写，AI 评分排名

  • 架构优化 ◆
    demo.js 拆分为 6 个 ES 模块（mode-manager / recognition / practice / tracing / battle / hanzi-data）
    window.AirInk API 暴露核心画布与笔迹接口
    onStrokeComplete / onBeforeStrokes 钩子实现跨模块通信
    习字模式重绘时自动保留描红模板

  • Bug 修复 :package:
    对战过渡面板信息同步（battle-transition-info 文本填充）
    mode-manager 模式验证逻辑简化
    练习模块 scoreCharacter 导入缺失

2026/7/19：

  • 此次更新聚焦于解决用户反馈的"手部模型下载慢"问题，通过三项措施优化加载体验：
  • 页面加载即预下载 — 模型不再等到点击"启动摄像头"才开始下载，页面加载 800ms 后自动后台预下载，用户阅读说明时模型已在加载。
  • Cache API 持久缓存 — 将 7.5MB 的 .task 模型文件写入 Cache Storage，比浏览器 HTTP 缓存更持久，回访用户秒加载。
  • 并行下载 — .task 模型与 WASM 推理引擎同时下载（此前是串行），总耗时接近较大者而非两者之和。
  • 验证结果：首次访问约 9.5 秒完成，回访降至 3 秒内，四模式切换无回归，无应用错误。

5.TRAE 实践过程

1
7657950792180335624:22db6bfc31f8a4d0ccea01e4fff01a71_6a4898d1c06477c3fbf0e199.6a4898d1c06477c3fbf0e19c.6a4898d1c06477c3fbf0e19a:TRAE Work.0.1.29.no_sid.no_ppe.T(2026/7/4 13:23:29)
架构配置检查和初版生成

1
12560×1539 379 KB

2
7657950792180335624:38165fbbf249898edbf592833348931e_6a4898d1c06477c3fbf0e199.6a48a157c06477c3fbf0e507.6a48a157c06477c3fbf0e505:TRAE Work.0.1.29.no_sid.no_ppe.T(2026/7/4 13:59:51)

除展示页(index.html)外的demo生成

2
22560×1539 369 KB

3
7657950792180335624:5e37c3060ddfb6572fef7f98ea2457fc_6a4898d1c06477c3fbf0e199.6a48a304c06477c3fbf0e661.6a48a304c06477c3fbf0e65f:TRAE Work.0.1.29.no_sid.no_ppe.T(2026/7/4 14:07:00)

demo bug修复

3
32560×1539 393 KB

4
7657950792180335624:ed951a6ad153c43e9d31addb10a33f6c_6a4898d1c06477c3fbf0e199.6a48b18dc06477c3fbf0e806.6a48b18dc06477c3fbf0e804:TRAE Work.0.1.29.no_sid.no_ppe.T(2026/7/4 15:09:01)

demo优化

4
42560×1539 361 KB

5

7657950792180335624:b43f21ecebf89ab5ac0b914df6516b99_6a4898d1c06477c3fbf0e199.6a4cbb503c245d3f8fc174dd.6a4cbb503c245d3f8fc174db:TRAE Work.0.1.30.no_sid.no_ppe.T(2026/7/7 16:39:44)

demo优化

5
52560×1539 353 KB

6

1466074057948328:dc0b24c2d6197021f2865ce3d8c57bb9_6a4e3b25c6da24e62f13bb8d.6a54ba139548f5740874c459.6a54ba139548f5740874c457:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/13 18:12:35)

功能进一步完善

2
21506×1204 88.8 KB

1 个赞
📣 TRAE AI 创造力大赛・DAY 23 赛事速递
2

我发现你这个结合VR写那种3D字还挺帅，和apple visionpro中的一样，应用场景是什么我还没有想清楚

3 个赞
3

目前只是demo，还在慢慢完善，效果一般般我承认。比如那些什么对战模式什么什么的，当然还没出，主要就是以写字为主题的乐趣，真练字的话这个确实靠不住…说到底就是个小游戏。

1 个赞
4

这个产品设计真的好浪漫，期待完善完善上架应用商店！

2 个赞
5

下载手部模型有点慢，看能否优化

1 个赞
6

加油！已支持

image
image788×262 22.9 KB

2 个赞
7

已支持！！！

1 个赞
8

互相支持呀！https://forum.trae.cn/t/topic/72727/69太厉害了！

2 个赞
9

好的了解:ok_hand:

1 个赞