漫画を描く（出力仕様）

ゴールだけ先に

「意味ベクトルOSが後から編集・再利用できるSVG」を、AIが返すための出力仕様を決める。

1. 最小単位：SVG生成関数の返り値の型

関数インターフェース（概念）

SVGResult {
  svg_xml: string          // 実際の <svg>...</svg>
  view_box: [number, number, number, number]
  layers: LayerMeta[]      // OSが意味的に触るためのメタ
  character_id?: string
  pose_vector?: number[]
  cloth_vector?: number[]
}

AIは「ただのXML文字列」だけでなく、
OSが意味的に再利用できるメタ情報付きで返す。

2. SVG本体の構造ルール

2-1. ルート要素

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 1024 1024"
  data-character-id="A123"
  data-version="1.0"
>
  ...
</svg>
  • viewBox は必須（OSが座標系を前提にできる）
  • data-character-id でキャラ紐付け

2-2. レイヤー構造（意味レイヤー）

<g id="layer-body" data-role="body">
  ...
</g>

<g id="layer-face" data-role="face">
  <g id="eye-left"  data-part="eye" data-side="left">...</g>
  <g id="eye-right" data-part="eye" data-side="right">...</g>
  <g id="mouth"     data-part="mouth">...</g>
</g>

<g id="layer-cloth" data-role="cloth">
  ...
</g>

ルール：

  • data-role で大分類（body / face / cloth / hair / background）
  • data-part で部位（eye / mouth / hand / skirt など）
  • id は OS が再参照できる安定名にする（eye-left など）

2-3. 線・パスの意味付け

<path
  id="eye-left-outline"
  data-part="eye"
  data-side="left"
  data-stroke-role="outline"
  d="..."
  stroke="#000"
  stroke-width="3"
  fill="none"
/>
  • data-stroke-role で線の意味（outline / shadow / highlight）
  • OSは「アウトラインだけ太らせる」「影だけ色変える」などが可能になる

3. メタ情報レイヤー（OS用）

SVG内に 意味メタデータ用の <metadata> or <desc> を持たせる。

<metadata id="os-meta">
{
  "pose_space": [0.3, 0.1, ...],
  "emotion_space": [0.7, 0.4],
  "cloth_space": [0.2, 0.1],
  "spaces_version": "1.0"
}
</metadata>
  • ここに 生成時に使った意味ベクトル を埋め込む
  • OSは「このSVGはどんな意味状態から生成されたか」を逆参照できる

4. 関数としての出力仕様（まとめ）

SVG生成関数の出力（概念仕様）

function generate_svg(input_vector, options) -> SVGResult

SVGResult の中身：

  • svg_xml: string
    完全な <svg>...</svg> 文字列（ブラウザでそのまま表示可能）

  • view_box: [x, y, w, h]
    OSが座標系を前提に処理できる

  • layers: LayerMeta[]（OS用のパース済み情報）

    LayerMeta {
  id: string
  role: "body" | "face" | "cloth" | "hair" | "background"
  parts: PartMeta[]
}

PartMeta {
  id: string
  part: string        // "eye", "mouth", "skirt" など
  side?: "left"|"right"
  paths: string[]     // path要素のid一覧
}

  • character_id?: string

  • pose_vector?: number[]

  • cloth_vector?: number[]

5. 要するに

  • AIの責務：

    • この仕様に従った SVG + メタ情報 を返す

  • OSの責務：

    • svg_xml を表示・保存
    • layers と metadata を使って：
      • 目だけ差し替える
      • 布だけ再生成する
      • 同じ pose_vector で別衣装を生成する

次に詰めるなら：

  • 「face/eye/mouth などの標準 data-role / data-part 一覧」を決める
  • 「pose_space / cloth_space のベクトル次元と意味」を固定する

どっちからロックしていきたい？