Demo Scenarios — SVG Gallery

llove は TUI dashboard としての見え方を、各シナリオに SVG スクリーンショット として階層的に commit していく方針。

階層レイアウト:

docs/scenarios/svg/
├── audit/
│   ├── ja.svg
│   └── en.svg
├── chat/
│   ├── ja.svg
│   └── en.svg
...

docs/scenarios/anim/      ← animated SVG (動きがあるシナリオ)
├── shogi.svg
├── mindmap.svg
...

各 SVG は Textual の App.export_screenshot() で出力された ベクター形式 (ターミナル非依存)、GitHub Pages からそのまま見られます。

取得手順 (ユーザがローカルで実行) 

# 全 scenario × ja/en を docs に書き出し (公開用)
py -3.11 scripts/snapshot_all_scenarios.py --out=docs/scenarios/svg --overwrite

# 単一 scenario の単一言語
py -3.11 scripts/snapshot_scenario.py firewall ja docs/scenarios/svg/firewall/ja.svg

# 全 scenario × ja/en を out に書き出し (実行ログ、gitignore 対象)
py -3.11 scripts/snapshot_all_scenarios.py
# → out/scenarios/<name>/<lang>.svg

# Animated SVG (動きがあるシナリオ向け)
py -3.11 scripts/export_demo_anim_svg.py --scenario=shogi --frames=8

時間軸を持つシナリオは animated SVG で動きを残しています。階層は anim/<scenario>/<lang>.svg で静止画と整合。

Shogi (6 フレーム × 1.5s = 9 秒ループ)

| ja | en | |—|—| | shogi ja | shogi en |

Mindmap

| ja | en | |—|—| | mindmap ja | mindmap en |

RAG

| ja | en | |—|—| | rag ja | rag en |

Chat

| ja | en | |—|—| | chat ja | chat en |

Benchmark

| ja | en | |—|—| | bench ja | bench en |

再生成: py -3.11 scripts/export_demo_anim_svg.py --scenario=<name> --lang=<ja|en> --frames=N --frame-delay=S

Static Gallery (各 scenario × 言語)

各 scenario のディレクトリに ja.svg / en.svg を配置。Textual の CJK font fallback chain で日本語表記が崩れないよう対策済。

Audit

| ja | en | |—|—| | | |

Backends

| ja | en | |—|—| | | |

Benchmark

| ja | en | |—|—| | | |

Chat

| ja | en | |—|—| | | |

Coin Toss

| ja | en | |—|—| | | |

Cost

| ja | en | |—|—| | | |

Drift

| ja | en | |—|—| | | |

Firewall

| ja | en | |—|—| | | |

MCP Call

| ja | en | |—|—| | | |

Mindmap

| ja | en | |—|—| | | |

Multimodal

| ja | en | |—|—| | | |

Point Cloud

| ja | en | |—|—| | | |

RAG

| ja | en | |—|—| | | |

Reliability

| ja | en | |—|—| | | |

SCADA

| ja | en | |—|—| | | |

Shogi

| ja | en | |—|—| | | |

Vision

| ja | en | |—|—| | | |

設計上のメモ

  • App.save_screenshot() / App.export_screenshot() は Textual 標準機能、 ターミナル非依存の SVG を生成
  • LLM 呼び出しを必要とする scenario (chat / multimodal) は MockBackend 前提
  • --pause (snapshot) / --delay (animated) は scenario が描画を開始するまでの時間
  • 日本語の文字化け回避: snapshot_scenario.py の _patch_cjk_fonts() で Fira Code → CJK monospace fallback chain を SVG 内に injection
  • 階層化前の flat ファイル (out/snap-*-*.svg) は手作業 review 資産として残置

関連

  • scripts/snapshot_scenario.py — 単一 scenario × 言語
  • scripts/snapshot_all_scenarios.py — 全 scenario × 全言語の wrapper
  • scripts/export_demo_anim_svg.py — animated SVG (N frame 連結)
  • llove/demo/scenarios/ — 全 scenario の実装
  • llove/app.py — LoveApp (Textual ベース TUI)