尧图网页设计 
一、思路来源我们在吃饭这件事上有一个高频小需求就是记录每天都吃了什么、几点吃的、是否规律最简单好用的记录其实是拍一张照——一张照片比任何文字描述都更实在所以做了这么一款可以搭载在眼镜上面的智能体。主要目标人群就是佩戴 Rokid Glasses 的日常用户尤其适合需要记录饮食规律、控糖控卡、自我健康管理的用户。二、功能介绍按一下确定键就能拍照留档自动记录吃饭时间抬头就能回看今天吃了哪几顿不用掏手机语音说一句昨天或X月X日就能语音查询某一天的记录所有数据保存在眼镜本地不依赖网络。二、场景与用户意图场景 1饭前拍照留档进入应用后通过语音或者按确定键也可通过首页的「记录」按钮进入如果拍摄的角度不好或者因为光线问题还可以重新拍摄或者取消拍摄。场景 2饭后或睡前回看今天今天可以在首页直接展示上下键可以选择查询按钮可以看到历史记录并且可以上下可以选择某个时刻的图片并查看。场景 3语音按日期回溯唤醒方式进入到查询后还可以通过语音的方式说出历史日期时间例如8月9号可以直接进入到那天的所有拍摄记录。三、方案设计1.智能体定义感知靠摄像头拍照留档 麦克风语音查询加工靠本地存储 自然语言解析表达靠单绿高对比 UI TTS。2.页面结构页面职责pages/index首页今日记录列表 照片预览 记录/查询入口pages/record拍照页取景 → 拍照 → 预览 → 保存pages/history历史页日期列表 → 当日明细 → 照片预览 语音查询3.状态流转ready ──确定键/语音拍照── capturing ──拍照完成── captured ──确定键/语音保存──saved ──完成── 回首页 │ 出错(error) ──拍照失败/保存失败4.数据存储本地存储使用 wx.getStorageSync / wx.setStorageSync以“按天分组”的方式组织key 为日期字符串value 为当天记录数组。{“2026-08-28”:[{id,ymd,date,timestamp,time,photo/* base64 */}]}四、AIUI 实现1.项目结构video1/├── app.js # 全局启动欢迎语TTS├── app.json # 页面注册 camera 权限声明├── AGENTS.md # 智能体清单身份/能力/技能├── lib/│ └── meal-record.js # 存储、北京时间格式化、增查模块└── pages/├── index/index.ink # 首页├── record/record.ink # 拍照记录页└── history/history.ink # 历史查询页2.项目与存储拍照使用 wx.media.createCameraContext() 获取相机上下文camera.takePhoto({ quality: ‘high’ }) 返回图像数据再通过 wx.arrayBufferToBase64 转成 base64 数据 URI 用于预览与持久化constcamerawx.media.createCameraContext();constphotoawaitcamera.takePhoto({quality:‘high’});constbase64wx.arrayBufferToBase64(photo.data);constpreviewdata:${photo.mimeType||image/jpeg};base64,${base64};保存时构造一条记录并写入当天分组返回给页面的就是当天最新列表exportfunctionaddRecord(record){constymdrecord.date||formatDate(newDate(record.timestamp));constdaysloadDays();constlistArray.isArray(days[ymd])?days[ymd].slice():[];list.push(record);days[ymd]list;saveDays(days);returnlist;}3.语音查询主要是语音输入从自然语音–日期的解析过程// 1) 相对日期关键词if(clean.includes(‘昨天’))return{ymd:computeTargetDate(todayYmd,-1),…};// 2) 中文月份词“八月三号”MONTHS.forEach((m,i){if(clean.includes(m)){/* 匹配 数字[日号] */}});// 3) 数字表达式兜底“8月3日” / “8-3”constmclean.match(/(\d{1,2})月(\d{1,2})[日号]/)||clean.match(/(\d{1,2})-(\d{1,2})/);4.首页语音唤醒首页与拍照页实现 onVoiceWakeup把语音关键词映射到动作if(keyword‘leqi’||keyword‘记录’){this.startRecord();}elseif(keyword‘查询’){this.openHistory();}五、交互与体验1.视觉遵循 AIUI 官方单绿色单色显示设计规范纯黑背景 同一种绿色只在黑色之上再现单一绿色通道保证在眼镜透明镜片上清晰可读、不晕眩。2.操作路径体验目的操作路径拍照记录首页「记录」→ 对准食物 → 确定拍照 → 预览 → 保存回看今天说查询 → 默认今天 → 确定查看明细 → 确定放大照片回看昨天说查询 → 语音昨天 → 自动定位明细六、调试与验证1.创建智能体基于[灵珠平台](https://aiui.rokid.com/space)创建智能体2.开发预览与验证主要从gitee上拉取官方的demo项目基于demo项目开发使用[Craft](https://js.rokid.com/craft?regioncnlangzh-CN)打开项目 直接导入本地demo项目同时还可以通过与AI聊天的方式进行功能的开发不懂得地方可以查阅官方文档同时一边开发一边调试智能体属实非常方便。七、成果与复盘预初最开始也是想开发一个记录每天饮食的应用方便回顾每天都吃了什么。开发最初也遇到了不少问题主要还是框架的不熟悉对于AR眼睛特殊功能API使用调用陌生通过查阅文档、开发者论坛找到了不少解决方案。QQ20260829-214132后续迭代计划计划记录的时候可以增加语音文字图片的方式记录增加连续打卡统计视图按月查看就餐频率输出规律性小结项目代码https://gitee.com/zhong-chengyou/rokid-food Rokid AIUI 初体验：一款戴在眼镜上的吃饭记录应用【食刻】
一、思路来源我们在吃饭这件事上有一个高频小需求就是记录每天都吃了什么、几点吃的、是否规律最简单好用的记录其实是拍一张照——一张照片比任何文字描述都更实在所以做了这么一款可以搭载在眼镜上面的智能体。主要目标人群就是佩戴 Rokid Glasses 的日常用户尤其适合需要记录饮食规律、控糖控卡、自我健康管理的用户。二、功能介绍按一下确定键就能拍照留档自动记录吃饭时间抬头就能回看今天吃了哪几顿不用掏手机语音说一句昨天或X月X日就能语音查询某一天的记录所有数据保存在眼镜本地不依赖网络。二、场景与用户意图场景 1饭前拍照留档进入应用后通过语音或者按确定键也可通过首页的「记录」按钮进入如果拍摄的角度不好或者因为光线问题还可以重新拍摄或者取消拍摄。场景 2饭后或睡前回看今天今天可以在首页直接展示上下键可以选择查询按钮可以看到历史记录并且可以上下可以选择某个时刻的图片并查看。场景 3语音按日期回溯唤醒方式进入到查询后还可以通过语音的方式说出历史日期时间例如8月9号可以直接进入到那天的所有拍摄记录。三、方案设计1.智能体定义感知靠摄像头拍照留档 麦克风语音查询加工靠本地存储 自然语言解析表达靠单绿高对比 UI TTS。2.页面结构页面职责pages/index首页今日记录列表 照片预览 记录/查询入口pages/record拍照页取景 → 拍照 → 预览 → 保存pages/history历史页日期列表 → 当日明细 → 照片预览 语音查询3.状态流转ready ──确定键/语音拍照── capturing ──拍照完成── captured ──确定键/语音保存──saved ──完成── 回首页 │ 出错(error) ──拍照失败/保存失败4.数据存储本地存储使用 wx.getStorageSync / wx.setStorageSync以“按天分组”的方式组织key 为日期字符串value 为当天记录数组。{“2026-08-28”:[{id,ymd,date,timestamp,time,photo/* base64 */}]}四、AIUI 实现1.项目结构video1/├── app.js # 全局启动欢迎语TTS├── app.json # 页面注册 camera 权限声明├── AGENTS.md # 智能体清单身份/能力/技能├── lib/│ └── meal-record.js # 存储、北京时间格式化、增查模块└── pages/├── index/index.ink # 首页├── record/record.ink # 拍照记录页└── history/history.ink # 历史查询页2.项目与存储拍照使用 wx.media.createCameraContext() 获取相机上下文camera.takePhoto({ quality: ‘high’ }) 返回图像数据再通过 wx.arrayBufferToBase64 转成 base64 数据 URI 用于预览与持久化constcamerawx.media.createCameraContext();constphotoawaitcamera.takePhoto({quality:‘high’});constbase64wx.arrayBufferToBase64(photo.data);constpreviewdata:${photo.mimeType||image/jpeg};base64,${base64};保存时构造一条记录并写入当天分组返回给页面的就是当天最新列表exportfunctionaddRecord(record){constymdrecord.date||formatDate(newDate(record.timestamp));constdaysloadDays();constlistArray.isArray(days[ymd])?days[ymd].slice():[];list.push(record);days[ymd]list;saveDays(days);returnlist;}3.语音查询主要是语音输入从自然语音–日期的解析过程// 1) 相对日期关键词if(clean.includes(‘昨天’))return{ymd:computeTargetDate(todayYmd,-1),…};// 2) 中文月份词“八月三号”MONTHS.forEach((m,i){if(clean.includes(m)){/* 匹配 数字[日号] */}});// 3) 数字表达式兜底“8月3日” / “8-3”constmclean.match(/(\d{1,2})月(\d{1,2})[日号]/)||clean.match(/(\d{1,2})-(\d{1,2})/);4.首页语音唤醒首页与拍照页实现 onVoiceWakeup把语音关键词映射到动作if(keyword‘leqi’||keyword‘记录’){this.startRecord();}elseif(keyword‘查询’){this.openHistory();}五、交互与体验1.视觉遵循 AIUI 官方单绿色单色显示设计规范纯黑背景 同一种绿色只在黑色之上再现单一绿色通道保证在眼镜透明镜片上清晰可读、不晕眩。2.操作路径体验目的操作路径拍照记录首页「记录」→ 对准食物 → 确定拍照 → 预览 → 保存回看今天说查询 → 默认今天 → 确定查看明细 → 确定放大照片回看昨天说查询 → 语音昨天 → 自动定位明细六、调试与验证1.创建智能体基于[灵珠平台](https://aiui.rokid.com/space)创建智能体2.开发预览与验证主要从gitee上拉取官方的demo项目基于demo项目开发使用[Craft](https://js.rokid.com/craft?regioncnlangzh-CN)打开项目 直接导入本地demo项目同时还可以通过与AI聊天的方式进行功能的开发不懂得地方可以查阅官方文档同时一边开发一边调试智能体属实非常方便。七、成果与复盘预初最开始也是想开发一个记录每天饮食的应用方便回顾每天都吃了什么。开发最初也遇到了不少问题主要还是框架的不熟悉对于AR眼睛特殊功能API使用调用陌生通过查阅文档、开发者论坛找到了不少解决方案。QQ20260829-214132后续迭代计划计划记录的时候可以增加语音文字图片的方式记录增加连续打卡统计视图按月查看就餐频率输出规律性小结项目代码https://gitee.com/zhong-chengyou/rokid-food