Zonghao Yuan
639201cd38
The auto-laid-out Mermaid flowchart looked rough. Replace it with a hand-built Anthropic-style diagram: color-coded role cards, a dashed scene-generation group, and the speculative pre-generation loop. Each SVG bakes in a dark background so it renders consistently whether the viewer's GitHub theme is light or dark (theme is per-viewer, not per-repo). Ship one localized SVG per README (zh/en/ja) to preserve the existing per-language diagrams, and strip claude.ai artifact residue (onclick / var() / context-stroke). Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
83 lines
5.3 KiB
XML
83 lines
5.3 KiB
XML
<svg width="680" height="692" viewBox="0 0 680 692" role="img"
|
|
aria-label="InfiPlot interactive story generation pipeline" xmlns="http://www.w3.org/2000/svg"
|
|
font-family='"Anthropic Sans", -apple-system, system-ui, "Segoe UI", sans-serif'>
|
|
<title>AI interactive story generation pipeline</title>
|
|
<desc>From your input to the Architect and Writer, then per-scene parallel Character Designer and Cinematographer feeding the Painter, producing one scene and speculatively pre-generating back to the Writer.</desc>
|
|
<defs>
|
|
<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
|
|
<path d="M2 1L8 5L2 9" fill="none" stroke="#9c9a92" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</marker>
|
|
<marker id="arrowGreen" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
|
|
<path d="M2 1L8 5L2 9" fill="none" stroke="#1D9E75" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</marker>
|
|
</defs>
|
|
|
|
<rect x="1" y="1" width="678" height="690" rx="16" fill="#1f1e1d" stroke="#34322e" stroke-width="1.5"/>
|
|
|
|
<!-- Your input -->
|
|
<g>
|
|
<rect x="220" y="24" width="240" height="68" rx="8" fill="#444441" stroke="#b4b2a9" stroke-width="0.5"/>
|
|
<text x="340" y="49" text-anchor="middle" dominant-baseline="central" fill="#d3d1c7" font-size="14" font-weight="500">Your input</text>
|
|
<text x="340" y="69" text-anchor="middle" dominant-baseline="central" fill="#b4b2a9" font-size="12">world setting + art style</text>
|
|
</g>
|
|
<line x1="340" y1="92" x2="340" y2="120" stroke="#9c9a92" stroke-width="1.5" marker-end="url(#arrow)"/>
|
|
|
|
<!-- Architect -->
|
|
<g>
|
|
<rect x="215" y="122" width="250" height="68" rx="8" fill="#3c3489" stroke="#afa9ec" stroke-width="0.5"/>
|
|
<text x="340" y="147" text-anchor="middle" dominant-baseline="central" fill="#cecbf6" font-size="14" font-weight="500">Architect</text>
|
|
<text x="340" y="167" text-anchor="middle" dominant-baseline="central" fill="#afa9ec" font-size="12">parses input → full story structure</text>
|
|
</g>
|
|
<line x1="340" y1="190" x2="340" y2="218" stroke="#9c9a92" stroke-width="1.5" marker-end="url(#arrow)"/>
|
|
|
|
<!-- Writer -->
|
|
<g>
|
|
<rect x="220" y="220" width="240" height="68" rx="8" fill="#085041" stroke="#5dcaa5" stroke-width="0.5"/>
|
|
<text x="340" y="245" text-anchor="middle" dominant-baseline="central" fill="#9fe1cb" font-size="14" font-weight="500">Writer</text>
|
|
<text x="340" y="265" text-anchor="middle" dominant-baseline="central" fill="#5dcaa5" font-size="12">narration · dialogue · choices</text>
|
|
</g>
|
|
|
|
<!-- Generating one scene (group) -->
|
|
<rect x="40" y="308" width="560" height="242" rx="16" fill="none" stroke="rgba(222,220,209,0.3)" stroke-width="0.5" stroke-dasharray="6 5"/>
|
|
<text x="58" y="334" text-anchor="start" fill="#c2c0b6" font-size="12">Generating one scene</text>
|
|
|
|
<line x1="340" y1="288" x2="211" y2="344" stroke="#9c9a92" stroke-width="1.5" marker-end="url(#arrow)"/>
|
|
<line x1="340" y1="288" x2="457" y2="344" stroke="#9c9a92" stroke-width="1.5" marker-end="url(#arrow)"/>
|
|
|
|
<!-- Character Designer -->
|
|
<g>
|
|
<rect x="58" y="354" width="250" height="68" rx="8" fill="#712b13" stroke="#f0997b" stroke-width="0.5"/>
|
|
<text x="183" y="379" text-anchor="middle" dominant-baseline="central" fill="#f5c4b3" font-size="14" font-weight="500">Character Designer</text>
|
|
<text x="183" y="399" text-anchor="middle" dominant-baseline="central" fill="#f0997b" font-size="12">portrait + voice (parallel)</text>
|
|
</g>
|
|
|
|
<!-- Cinematographer -->
|
|
<g>
|
|
<rect x="332" y="354" width="250" height="68" rx="8" fill="#712b13" stroke="#f0997b" stroke-width="0.5"/>
|
|
<text x="457" y="379" text-anchor="middle" dominant-baseline="central" fill="#f5c4b3" font-size="14" font-weight="500">Cinematographer</text>
|
|
<text x="457" y="399" text-anchor="middle" dominant-baseline="central" fill="#f0997b" font-size="12">shot composition + background prompt</text>
|
|
</g>
|
|
|
|
<line x1="183" y1="422" x2="280" y2="448" stroke="#9c9a92" stroke-width="1.5" marker-end="url(#arrow)"/>
|
|
<line x1="457" y1="422" x2="360" y2="448" stroke="#9c9a92" stroke-width="1.5" marker-end="url(#arrow)"/>
|
|
|
|
<!-- Painter -->
|
|
<g>
|
|
<rect x="190" y="458" width="260" height="68" rx="8" fill="#712b13" stroke="#f0997b" stroke-width="0.5"/>
|
|
<text x="320" y="483" text-anchor="middle" dominant-baseline="central" fill="#f5c4b3" font-size="14" font-weight="500">Painter</text>
|
|
<text x="320" y="503" text-anchor="middle" dominant-baseline="central" fill="#f0997b" font-size="12">renders 16:9 background from portraits</text>
|
|
</g>
|
|
<line x1="320" y1="526" x2="340" y2="576" stroke="#9c9a92" stroke-width="1.5" marker-end="url(#arrow)"/>
|
|
|
|
<!-- One scene -->
|
|
<g>
|
|
<rect x="220" y="586" width="240" height="68" rx="8" fill="#444441" stroke="#b4b2a9" stroke-width="0.5"/>
|
|
<text x="340" y="611" text-anchor="middle" dominant-baseline="central" fill="#d3d1c7" font-size="14" font-weight="500">One scene</text>
|
|
<text x="340" y="631" text-anchor="middle" dominant-baseline="central" fill="#b4b2a9" font-size="12">background image + beat tree</text>
|
|
</g>
|
|
|
|
<!-- speculative pre-generation loop -->
|
|
<text x="542" y="236" text-anchor="middle" fill="#c2c0b6" font-size="12">pre-generate next scene</text>
|
|
<path d="M460 620 L625 620 L625 250 L460 250" fill="none" stroke="#1D9E75" stroke-width="1" stroke-dasharray="6 5" marker-end="url(#arrowGreen)"/>
|
|
</svg>
|