mirror of https://gitcode.com/JianFeeeee/HomeAgent.git synced 2026-11-01 06:47:29 +00:00

Files

JianFeeeee ef08ebb7d3 chore(mascot): 立绘 v2 —— 真 alpha 素材 + 头部裁切头像 + 素材判据

老大给的 4 张新立绘里有 3 张是「棋盘格假透明」JPEG（像素是灰白格子，
不是 alpha）。直接进仓库会在深色面板上露出格子，所以先抠成真 alpha 再落盘。

## 为什么主图与头像要分两个文件

现役 mascot.webp 唯一的消费点是**聊天消息的 30px 圆形头像**
（dashboard.js 4 处 aiAvatar + GUI app.js 2 处），概览页并没有放立绘。
主图是坐姿全身，按现有 CSS（object-fit:cover + scale(1.5)）裁成圆后
只剩裙子、看不到脸 —— 只换图不做头像版，等于把头像换成一张看不懂的图。

- assets/branding/mascot-xiaozhai.webp        1024² 主立绘（官方展示）
- assets/branding/mascot-xiaozhai-avatar.webp  512² 头部方裁（运行期源）
- internal/plugins/webui/mascot.webp           256² 头像版（原 133KB→24KB）
- cmd/gui/renderer/mascot.webp                 128² 头像版（原 133KB→9KB）

参考稿另存三张（不参与运行）：sheet（设定总图）/ portrait（半身）/
turnaround（三视图）。

## 抠图怎么做的（可复现，不是手搓）

背景是 20.45px 周期的棋盘格（237/254 两色）。判据取「中性灰 且 灰度≥228」
的像素做候选，再从图像边界做连通域传播 —— 这样白裙子/白围裙因为不中性
（带蓝调）不会被误判，避免了当年 site/README 记录的 flood-fill 渗色问题。
边界再内缩 1px 抹白边，0.7px 高斯羽化去锯齿。抠完透明占比 55.8%，
深/浅两种背景上目检均无残留格子与白边。

## CSS：scale(1.5) → 1.25

原来的 1.5 是为「全身图裁圆」补的放大。换成头部方裁后，1.5 会切掉两侧
发绳与呆毛 —— 按真实 30px 渲染放大对照看过 1.0/1.15/1.25/1.4 四档。

## 新增判据（含反向验证）

internal/plugins/webui/mascot_asset_test.go 直接读 WebP 容器头，
断言 VP8X 的 Alpha 标志位与 ALPH chunk **同时存在**，外加正方形/≥128px/
≤128KB。理由：这类退化在肉眼 review 里抓不住（缩到 30px 就是一团浅色），
而用户每天都在看；且 site/README.md 记着当年正因为「白底图没法抠」
干脆不放立绘，这个坑值得一个自动化判据。

反向验证（已实跑，非声称）：把素材换成 HEAD 旧图，判据报红并准确指出
「Alpha 标志位未置位 / 缺 ALPH chunk / 体积超限」；换回新图转绿。
另有一条独立用例构造「带 VP8X 但不置 Alpha 位」的最小容器，
确认解析器不会对退化素材误判为绿。

## 顺带修的两处

1. assets/docs/{zh,en}/PLUGIN_DEV.md 的 mascot 引用路径是坏的：
   `../../assets/branding/...` 从 assets/docs/zh/ 出发解析成
   `assets/assets/branding/...`，文件不存在（旧版一直是坏的）。
   已改为 `../../branding/...` 并逐条验证路径可解析。
   同时指向新的头像版（那处是 20px 圆形内联小图标）。
2. gzip.go / gzip_test.go 注释里的「mascot.webp（133KB）」改为不带死数字
   的说法 —— 体积会随素材变，注释写死数字只会变成误导。

## 验证

go build ./...            → 0
go vet ./internal/plugins/webui/ ./cmd/gui/ → 干净
gofmt -l                  → 空
go test ./internal/plugins/webui/ -count=1 → ok（15.1s，含新增 2 个用例）

## 没做的事

- 没碰 main、没开 PR、没部署、没重启服务。
- **概览页仍未放立绘**。site/README 里「素材不可用」这条已不成立（素材有
  alpha 了），但版面是否该放图属于设计取舍，不在本次范围 —— 文档已相应改写，
  不再用「素材不行」当理由。
- 抠图对发丝边缘是「够用」不是「完美」：0.7px 羽化在 1024 下看不出来，
  但若将来要印物料级大图，需要重出带原生 alpha 的源图。

2026-10-18 07:38:10 +08:00

11 KiB

Raw Blame History

小宅 (Xiao Zhai) — 角色人设指南

基础信息

项目	内容
姓名	小宅
英文	Xiao Zhai / HΔ-chan
身份	HomeAgent 看板娘 / 家政型 AI 助手
型号	HΔ-Kernel v0.8.0
motto	「交给我吧～主人三年前说过的事我还记着呢！」
画风参考	VOCALOID 家族（洛天依/初音未来）风格

形象总览

齐肩黑发家政少女，浅蓝围裙连衣裙，单边智能眼镜，胸口佩戴 H·核标志徽章，发绳为三色记忆丝带。整体呈微侧身转体动态，发丝、裙摆、通道线皆有飘动感。

配色表

肤色      #FFF1F2    暖白肌
头发      #3B82F6 → #06B6D4   蓝→青渐变

围裙      #E0F2FE → #BAE6FD   浅蓝渐变
连衣裙    #FFFFFF → #F1F5F9    白→浅灰

丝带蓝    #3B82F6    Context 层
丝带青    #06B6D4    Document 层
丝带金    #F59E0B    Graph 层

徽章金    #F59E0B    Kernel
眼镜蓝    #38BDF8    LLM
腮红      #FBCFE8    淡粉
嘴唇      #F43F5E    玫瑰红

头部

发型

齐肩中短发，发尾略微外翘，有空气感
刘海：眉上碎刘海，中间短两侧渐长，呈圆弧形，带少许空隙（VOCALOID 典型刘海处理）
鬓角：两侧各有一缕较长发丝垂至锁骨，微端微卷
后发：及肩，发尾向外飘逸，有动态弧线
发色：#3B82F6 → #06B6D4 蓝青渐变，从发根蓝色渐变为发尾青色，有光泽感
整体：发丝应有 被微风吹动 的飘起感，尤其鬓角和后发末端

发绳 / 三色记忆丝带

左右各一束 低马尾/小辫，从耳后分出，垂在肩前
发绳为 三色渐变丝带（蓝→青→金），宽约 4mm
丝带飘起，呈波浪形弯曲，有流动感
丝带上可印有极小的三角 Δ 暗纹

脸型

标准的 VOCALOID 风格鹅蛋脸，线条柔和干净
下巴微尖不过分

眼睛

大眼圆瞳，高光明显（双层高光：一大一小）
瞳色 #1E293B（深黑），与头发同色
下眼睑略弯（微笑眼型），睫毛较长且分明
眼睛占比略大（日系动漫 typical 6-7 head proportion）

单边智能眼镜

戴在左眼
圆形镜框，天空蓝 #38BDF8 细金属框，半透明科技感
镜片有微弱 HUD 网格线 及「AI」微光文字（淡蓝色发光）
右边无镜框，仅一条 极细横线 跨过鼻梁连接到右镜腿
镜腿末端延伸至耳后，略超出耳廓

表情

表情	说明
微笑😊	默认表情，嘴角微扬，温和可靠
呆然😶	记忆蒸馏中走神，眼睛失焦，嘴微张
慌张😰	CPU 过热冒烟时，眉头紧皱，眼角含泪
得意😏	完美完成任务，单边嘴角上扬，闭一只眼
困扰😅	同时太多插件请求，歪头苦笑，举手挠后脑

身体

体型

身高约 148cm（偏矮，符合「小」宅）
纤细体形，轻微曲线
头身比约 1:6（接近标准日系动漫比例，略偏可爱）

姿势（默认立绘）

侧身 3/4 面向观众，身体有轻微扭转动态
右手抬起做 V 字手势✌️，微微侧摆（带动袖口飘动）
左手自然置于胸前或 捧一颗发光小爱心
双脚内八，脚尖相对（乖巧感）
整体姿态应给人 即将随风轻摆 的动感

服装

连衣裙

白色基底（#FFFFFF），轻微渐变至浅灰（#F1F5F9）
圆领，领口有一圈浅蓝滚边
短袖，袖口有 松紧带 轻微蓬起
裙摆长度至 膝上 10cm
裙摆下沿有一圈 波浪形花边，浅蓝线迹 #38BDF8
裙摆应呈 被风吹动 的飘起状态，有自然的褶皱和波浪线条

围裙

浅蓝色（#E0F2FE → #BAE6FD 渐变）
胸前的围裙部分呈心形或 圆角梯形
围裙系带在背后打蝴蝶结，带尾飘动
围裙正面有一个 大口袋（圆角矩形），口袋边缘有白色包边
口袋上沿中间有一个 小三角 Δ 刺绣，金色线

高科技工具（口袋）

口袋中插着三样 科幻风格工具，露出手柄：

工具	象征	设计描述
数据扳手	Tool 通道	银色流线型手柄，两端有蓝色发光环，能量光条沿工具侧面流动
相位螺丝刀	Stage 通道	透明水晶质感手柄，内部有紫色发光核心，尖端为能量聚焦头
全息钥匙	Event / Output 通道	金色半透明卡片状，表面有浮动全息纹路，边缘发光

工具呈不同角度从口袋露出，发光效果微弱（不要喧宾夺主）。

鞋子

白色中筒袜，袜口有浅蓝条纹，袜身有 轻微半透明渐变
白色未来感帆布鞋（或乐福鞋），鞋侧有 发光蓝线条 装饰
鞋带系成蝴蝶结，末端微飘

特殊元素

胸口徽章 — H·核标志

胸口佩戴 HomeAgent H·核标志（缩放到约 3cm 直径），设计如下：

外圈虚线环 ─ 银灰色虚线
H 形结构 ─ 左蓝竖线（粗），右灰竖线（开口分段），中蓝横线
中央 ─ 金色圆角三角形（Δ），外有金色圆环
四角 ─ 蓝/紫/青/金 四个小圆点，各以虚线连接中央

徽章整体扁平化设计，金色三角形略微发光。四条虚线从徽章四角向外延伸，穿过围裙表面飘向裙摆方向。

四条通道线（飘动虚线）

四条虚线从胸口徽章四角的四个小圆点出发，呈 波浪曲线 飘向裙摆四角（非直线）：

方向	颜色	通道
左前	`#3B82F6` 蓝 → 渐淡	Tool
左后	`#8B5CF6` 紫 → 渐淡	Stage
右后	`#06B6D4` 青 → 渐淡	Event
右前	`#F59E0B` 金 → 渐淡	OutputChannel

线条为 波浪曲线（非直线），呈被风吹动的飘逸感
stroke-dasharray="6,4"，端点渐隐
线尾 不设终点标记，自然淡出消失
线的走向与裙摆飘动方向一致，增强整体动势

头顶冒烟效果（特殊状态）

仅在 CPU 过载/多线程高负载时出现
左侧头顶飘出 2-3 团 浅灰色半透明烟雾，烟雾呈漩涡状
烟雾上方可加一个 全息温度警示图标 ⊡ 或火焰符号

特殊视觉风格要求

飘动感（飘逸）

所有以下元素应呈现 被同一阵风吹动 的统一飘动方向（从左前向右后，或从右前向左后）：

发丝（鬓角、后发发尾、刘海轻微）
丝带（发绳）
裙摆（波浪褶皱）
围裙系带
四条通道虚线（波浪曲线）
鞋带末端

科技感发光

眼镜 HUD 微弱蓝光
胸口徽章金色柔和光晕
工具发光（蓝/紫/金，低亮度）
鞋侧发光线条
所有发光保持内敛，不可过亮

画风

整体风格参照 VOCALOID 官方立绘（iXima 风格的初音未来、ideolo 风格的洛天依）
线条干净、色彩明快、光影柔和（赛璐珞或轻厚涂）
背景建议为浅色/透明，立绘图用于官网和 WebUI

口癖与台词

场景	台词
打招呼	「主人欢迎回来～今天有什么事要处理吗？」
自信	「交给我吧～主人三年前说过的事我还记着呢！」
思考中	「唔…Graph 层的实体关系又多了，我梳理一下再回答你…」
过热	「等、等一下…！线程开太多了…CPU 要冒烟了…！」
关心	「主人昨天睡得很晚哦，我帮你泡了杯咖啡放桌上了～」
蒸馏完成	「啊～记忆整理好了！那些没用的小事已经归档到 Graph 层啦！」

AI 绘图提示词

立绘 / 全身 (Full Body)

masterpiece, best quality, 1girl, xiao zhai, homeagent mascot,
short black hair, ahoge, sidelocks, hair ribbons, blue cyan gold gradient ribbons,
(left eye: blue glowing smart glasses), hud display on glasses,
round face, gentle smile, large eyes,
white dress, light blue apron, apron with pocket,
high-tech tools in pocket: glowing wrench, crystal screwdriver, holographic key,
(golden triangle badge with H-shaped emblem on chest:1.2),
four glowing dashed lines flowing from badge to skirt hem,
skirt fluttering, ribbons flowing, dynamic pose,
V-sign hand gesture, holding a glowing heart,
standing, pigeon-toed stance, white sneakers with blue glowing stripes,
vocaloid style, clean lineart, cel shading, bright lighting,
soft pastel colors, dynamic wind effect,
white background, simple background, full body,

半身 / 胸像 (Half Body / Portrait)

masterpiece, best quality, 1girl, xiao zhai, homeagent mascot,
short black hair, ahoge, blue cyan gold gradient hair ribbons,
(left eye: smart glasses with cyan hud display),
gentle smile, soft expression, looking at viewer,
white dress collar, light blue apron with pocket,
(golden triangle H-emblem badge on chest:1.3),
glowing dashed lines emanating from badge,
vocaloid style, clean lineart, cel shading,
bright soft lighting, pastel color palette,
portrait, upper body,
white background, simple background,

风格参考 (Style Reference)

Style reference: VOCALOID official art, iXima style, ideolo style,
clean thick lines, minimal shading, flat colors with soft shadows,
anime style, cute but not childish, techwear casual fusion,
dynamic flowing hair and fabric,

素材清单（assets/branding/）

文件	尺寸	用途	alpha
`mascot-xiaozhai.webp`	1024×1024	主立绘（坐姿全身，官方展示用）	✅ 真 alpha
`mascot-xiaozhai-avatar.webp`	512×512	头像（头部方裁，脸居中）	✅ 真 alpha
`mascot-xiaozhai-sheet.webp`	1024×1536	设定总图（配色/通道线/道具标注）	—
`mascot-xiaozhai-portrait.webp`	1024×1536	半身胸像（三只工具特写清晰）	—
`mascot-xiaozhai-turnaround.webp`	1200×800	三视图（正/侧/背）	—

为什么主图与头像分两个文件：主图是全身坐姿，直接塞进 30px 圆形头像里（object-fit: cover 会把画面中心裁成正方形）只会剩裙子、看不到脸。头像版是头部方裁，圆形裁切后脸正好居中。

运行期副本（由上面两张生成，勿单独手改）：

路径	尺寸	说明
`internal/plugins/webui/mascot.webp`	256×256	WebUI 对外 `/mascot.webp`（嵌入二进制）
`cmd/gui/renderer/mascot.webp`	128×128	GUI 聊天头像 + agent 光标（以 data URL 注入）

这两个文件的 alpha 由 internal/plugins/webui/mascot_asset_test.go 判定：直接读 WebP 容器头，要求 VP8X Alpha 标志位与 ALPH chunk 同时存在。换素材时若塞进一张「白底图」或「棋盘格图」，判据会红。

设计注意事项

三色丝带是核心识别元素，在任何立绘/插画中必须保留
单边眼镜不可画成两边都有，否则失去「不对称感」这一设计特点
四条通道线为 波浪曲线，必须有飘动感，不可画成直线
围裙工具 至少出现两样，需有 科技感发光设计（非普通工具）
肤色保持 #FFF1F2，不要过深或过白
胸口徽章为 H·核 logo（H结构 + 圆角三角形 + 四角点 + 金色圆环）
飘动方向 整体统一，所有飘动元素朝向同一方向
整体气质：可靠 > 可爱 > 呆萌，避免过于幼态

Version 2.0 — 2026-07-17

11 KiB Raw Blame History Unescape Escape