diff --git a/docs/theme-shiroko.md b/docs/theme-shiroko.md index 4e6ec28..41e2b34 100644 --- a/docs/theme-shiroko.md +++ b/docs/theme-shiroko.md @@ -29,7 +29,7 @@ available = default,sakura,shiroko | --- | --- | --- | | 底层 | 教室场景插画(压白 38%、轻度虚化) | `--tb-page-image`,16:9 桌面 / 9:16 移动两张 | | 中层 | 卡片与顶栏:半透明白 + `backdrop-filter` 磨砂 | `--tb-surface: rgba(255,255,255,.86)` / `--tb-navbar` | -| 上层 | 人物站在场景左侧地面(337px 高)+ 椭圆接触阴影 | `--tb-deco` 前两个槽位 | +| 上层 | 人物站在场景左侧地面(400px 高)+ 椭圆接触阴影 | `--tb-deco` 前两个槽位 | | 深色 | 不用场景(白天教室压在深底上会脏),回到深色渐变 + 极淡纹样 | 深色块单独覆盖 | 摆位经验(都是踩过的): @@ -48,11 +48,11 @@ available = default,sakura,shiroko | 文件 | 用途 | 尺寸 | 体积 | | --- | --- | --- | --- | -| `chibi/wave.webp` | 挥手 | 324×620 | 27KB | +| `chibi/window.webp` | **当前使用**:侧后方视角、双手背在身后望向箱内,压白 16% | 135×460 | 13KB | +| `chibi/wave.webp` | 备用:正面挥手 | 324×620 | 27KB | | `chibi/cheer.webp` | 双手欢呼 | 354×620 | 27KB | | `chibi/think.webp` | 托腮 | 283×620 | 26KB | | `chibi/doze.webp` | 打瞌睡 | 274×620 | 26KB | -| `chibi/sit.webp` | 盘腿坐 | 321×620 | 29KB | | `scene-desktop.webp` | 教室场景(16:9,压白 38% + 虚化 1.4px) | 1920×1080 | 22KB | | `scene-mobile.webp` | 教室场景(9:16 中裁) | 720×1003 | 6KB | | `pattern-dark.svg` | 深色模式平铺纹样(雪花 + 光环) | 240×240 | 0.7KB | @@ -62,7 +62,8 @@ available = default,sakura,shiroko | 素材 | 来源 | | --- | --- | | `static/images/shiroko-cutout.png` | **用户自行用 AI 生成**的立绘,仅作生成参考图,不再上页面 | -| `chibi/*.webp` | WorkBuddy ImageGen **以用户立绘为参考图**(image-to-image)生成,再抠白底 | +| `chibi/window.webp` | WorkBuddy ImageGen 生成(文生图 → image-to-image 转平涂),再抠白底 | +| `chibi/wave.webp` 等 | WorkBuddy ImageGen **以用户立绘为参考图**(image-to-image)生成,再抠白底 | | `scene-desktop.webp` / `scene-mobile.webp` | WorkBuddy ImageGen 生成(提示词见下),未使用任何外部素材 | | `pattern-dark.svg` | 手写 SVG,纯几何,无外部素材 | @@ -84,6 +85,19 @@ available = default,sakura,shiroko - 抠图:从四角 + 四边中点共 8 点做 floodfill(容差 16),再对 alpha 做 1px MinFilter 收边去白边, 裁 bbox 后统一缩放到高 620、WebP q90。 +### 当前人像(window.webp)的两步做法 + +正面立绘站在空教室里像贴纸(无环境、直视访客、饱和度高)。改成**侧后方视角 + 二次转平涂**: + +1. 文生图先出姿势与角色:`flat vector chibi, three-quarter back view, hands clasped behind back, + short silver-grey bob, grey wolf ears, pale aqua fish-shaped halo, teal scarf, navy blazer, + grey pleated skirt, black and teal sneakers`(第一版带了教室窗框,背景处理不掉); +2. 再把这张图扔回 image-to-image(`input_fidelity: high`)转成"纯色块、无描边、去掉窗框与场景, + 纯白背景",这样既保住姿势,又能拿到和立绘一致的平涂风格; +3. 抠白底后把 RGB 压白 **16%**(`v*(1-k)+255*k`,alpha 不动)——场景本身压白 38%, + 人像不压白就是全页对比度最高的一块,必然"突兀"; +4. 裁 bbox、缩到高 460,WebP q86(约 13KB)。 + 关键经验:**必须是"平涂无描边"**。先试过用手写 SVG 线稿,风格和用户那张立绘(色块、无描边)冲突, 而且没有真人手感会画得很抽象;用参考图 + image-to-image 出来的四张,角色特征和画风都稳。 @@ -94,6 +108,7 @@ available = default,sakura,shiroko 1. 加姿态:按上面的提示词骨架换动作句生成,白底 → 抠图 → 存 `chibi/.webp`(高 620), 再塞进 `shiroko.css` 的 `--tb-deco`(记得保持 6 个值,并按上面的摆位原则定位)。 + 换 `` 时别忘了给 URL 带 `?v=`——图片不走 `StaticVersion` 缓存键,`max-age` 是 1 天。 2. 换立绘:透明 PNG 覆盖 `static/images/shiroko-cutout.png`,再按同一提示词骨架重新生成姿态。 3. 换配色:改 `shiroko.css` 的令牌即可,插画是位图,换色需重新生成。 4. 新增素材不需要改 `static/fs.go`(已嵌整个 `images/themes` 目录);但改了 CSS 必须把 diff --git a/internal/conf/static.go b/internal/conf/static.go index b4fe946..125dd0e 100644 --- a/internal/conf/static.go +++ b/internal/conf/static.go @@ -10,7 +10,7 @@ var ( BuildCommit = "dev" // StaticVersion 静态资源缓存版本号:base.css 与主题 css 共用,改样式只改这一处。 - StaticVersion = "20261019q" + StaticVersion = "20261019r" ) // 文本审核通道取值([security] text_censor_source)。定义在 conf 侧, diff --git a/static/css/themes/shiroko.css b/static/css/themes/shiroko.css index a0517d1..8a79f34 100644 --- a/static/css/themes/shiroko.css +++ b/static/css/themes/shiroko.css @@ -7,7 +7,7 @@ 素材(static/images/themes/shiroko/): - scene-desktop.webp / scene-mobile.webp 教室场景(16:9 / 9:16,已压白与轻度虚化) - - chibi/*.webp Q 版人物(wave/cheer/think/doze/sit),以用户立绘为参考图生成 + 抠白底 + - chibi/window.webp 人物(侧后方视角、双手背在身后,已抠白底并压白 16%) - pattern.svg / pattern-dark.svg 雪花 + 光环的极淡平铺纹样(深色模式用) 来源、提示词与处理参数见 docs/theme-shiroko.md。 */ html[data-theme-style="shiroko"] { @@ -30,19 +30,21 @@ html[data-theme-style="shiroko"] { --tb-shadow-hover: 0 1px 2px rgba(38, 56, 82, 0.07), 0 24px 56px -24px rgba(38, 56, 82, 0.38); /* 整页场景:一张教室插画,cover 铺满;不再叠纹样(纹样压在实景上会变成噪点) */ - --tb-page-image: url("/static/images/themes/shiroko/scene-desktop.webp?v=20261019q"); + --tb-page-image: url("/static/images/themes/shiroko/scene-desktop.webp?v=20261019r"); --tb-page-pattern: none; - /* 人物站在场景左侧地面:离底边 36px,配一层椭圆接触阴影,避免悬空 */ - --tb-deco: url("/static/images/themes/shiroko/chibi/sit.webp"), - radial-gradient(ellipse at center, rgba(63, 96, 138, 0.20) 0%, rgba(63, 96, 138, 0) 72%), + /* 人物:侧后方视角、双手背在身后望向箱内(不是正面盯着访客), + 站在场景左侧地面,离底边 36px,配一层椭圆接触阴影,避免悬空。 + 图已压白 12%,与压白 38% 的场景同一"雾度",避免变成高对比贴纸。 */ + --tb-deco: url("/static/images/themes/shiroko/chibi/window.webp?v=20261019r"), + radial-gradient(ellipse at center, rgba(63, 96, 138, 0.18) 0%, rgba(63, 96, 138, 0) 72%), none, none, none, none; - --tb-deco-size: auto 340px, 120px 14px, auto, auto, auto, auto; - --tb-deco-position: left max(6px, calc(50% - 520px)) bottom 36px, - left max(6px, calc(50% - 492px)) bottom 29px, left top, left top, left top, left top; + --tb-deco-size: auto 400px, 96px 13px, auto, auto, auto, auto; + --tb-deco-position: left max(10px, calc(50% - 524px)) bottom 36px, + left max(22px, calc(50% - 512px)) bottom 29px, left top, left top, left top, left top; } html[data-theme="dark"][data-theme-style="shiroko"] { @@ -65,7 +67,7 @@ html[data-theme="dark"][data-theme-style="shiroko"] { /* 深色不用浅色场景(白天教室压在深底上会很脏),回到纯色渐变 + 极淡纹样 */ --tb-page-image: linear-gradient(180deg, #161d26 0%, #141a22 60%, #11161d 100%); - --tb-page-pattern: url("/static/images/themes/shiroko/pattern-dark.svg?v=20261019q"); + --tb-page-pattern: url("/static/images/themes/shiroko/pattern-dark.svg?v=20261019r"); --tb-page-pattern-size: 340px 340px; --tb-deco: none, none, none, none, none, none; --tb-deco-size: auto, auto, auto, auto, auto, auto; @@ -75,7 +77,7 @@ html[data-theme="dark"][data-theme-style="shiroko"] { /* 窄屏:卡片占满宽度,两侧没有视觉空间 —— 换成竖版场景,人物退场 */ @media (max-width: 900px) { html[data-theme-style="shiroko"] { - --tb-page-image: url("/static/images/themes/shiroko/scene-mobile.webp?v=20261019q"); + --tb-page-image: url("/static/images/themes/shiroko/scene-mobile.webp?v=20261019r"); --tb-surface: rgba(255, 255, 255, 0.92); --tb-deco: none, none, none, none, none, none; --tb-deco-size: auto, auto, auto, auto, auto, auto; diff --git a/static/images/themes/shiroko/chibi/sit.webp b/static/images/themes/shiroko/chibi/sit.webp deleted file mode 100644 index cae01e0..0000000 Binary files a/static/images/themes/shiroko/chibi/sit.webp and /dev/null differ diff --git a/static/images/themes/shiroko/chibi/window.webp b/static/images/themes/shiroko/chibi/window.webp new file mode 100644 index 0000000..b468ff1 Binary files /dev/null and b/static/images/themes/shiroko/chibi/window.webp differ