infiplot/infiplot-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
81b99625d3e077b9dea80ab58e9baf69fc4dd3eb
infiplot-web/docs/pipeline.zh.svg
T
Zonghao Yuan 639201cd38 docs: replace How it works mermaid with localized SVG diagrams (#14) 
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>
2026-06-03 01:08:08 +08:00

90 lines
6.1 KiB
XML
Raw Blame History

<svg width="680" height="692" viewBox="0 0 680 692" role="img"
aria-label="InfiPlot 互动剧情生成流水线" xmlns="http://www.w3.org/2000/svg"
font-family='"Anthropic Sans", -apple-system, system-ui, "Segoe UI", sans-serif'>
<title>AI 互动剧情生成流水线流程图</title>
<desc>从用户输入到架构师、编剧，再到每一幕场景内并行的角色设计师与场景布置师，汇入画家渲染，产出一幕场景，并预测式预生成回到编剧。</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"/>
<!-- 你的输入 -->
<g>
<rect x="220" y="24" width="240" height="68" rx="8" fill="#444441" stroke="#b4b2a9" stroke-width="0.5"/>
<text x="340" y="46" text-anchor="middle" dominant-baseline="central" fill="#d3d1c7" font-size="14" font-weight="500">你的输入</text>
<text x="340" y="64" text-anchor="middle" dominant-baseline="central" fill="#b4b2a9" font-size="12">Your input</text>
<text x="340" y="80" text-anchor="middle" dominant-baseline="central" fill="#b4b2a9" font-size="12">世界设定 + 画风</text>
</g>
<line x1="340" y1="92" x2="340" y2="120" stroke="#9c9a92" stroke-width="1.5" marker-end="url(#arrow)"/>
<!-- 架构师 -->
<g>
<rect x="215" y="122" width="250" height="68" rx="8" fill="#3c3489" stroke="#afa9ec" stroke-width="0.5"/>
<text x="340" y="144" text-anchor="middle" dominant-baseline="central" fill="#cecbf6" font-size="14" font-weight="500">架构师</text>
<text x="340" y="162" text-anchor="middle" dominant-baseline="central" fill="#afa9ec" font-size="12">Architect</text>
<text x="340" y="178" text-anchor="middle" dominant-baseline="central" fill="#afa9ec" font-size="12">解析输入 → 完整剧情结构</text>
</g>
<line x1="340" y1="190" x2="340" y2="218" stroke="#9c9a92" stroke-width="1.5" marker-end="url(#arrow)"/>
<!-- 编剧 -->
<g>
<rect x="220" y="220" width="240" height="68" rx="8" fill="#085041" stroke="#5dcaa5" stroke-width="0.5"/>
<text x="340" y="242" text-anchor="middle" dominant-baseline="central" fill="#9fe1cb" font-size="14" font-weight="500">编剧</text>
<text x="340" y="260" text-anchor="middle" dominant-baseline="central" fill="#5dcaa5" font-size="12">Writer</text>
<text x="340" y="276" text-anchor="middle" dominant-baseline="central" fill="#5dcaa5" font-size="12">节拍：旁白 · 对话 · 选项</text>
</g>
<!-- 每一幕场景的生成（分组框） -->
<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">每一幕场景的生成</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)"/>
<!-- 角色设计师 -->
<g>
<rect x="58" y="354" width="250" height="68" rx="8" fill="#712b13" stroke="#f0997b" stroke-width="0.5"/>
<text x="183" y="376" text-anchor="middle" dominant-baseline="central" fill="#f5c4b3" font-size="14" font-weight="500">角色设计师</text>
<text x="183" y="394" text-anchor="middle" dominant-baseline="central" fill="#f0997b" font-size="12">Character Designer</text>
<text x="183" y="410" text-anchor="middle" dominant-baseline="central" fill="#f0997b" font-size="12">立绘 + 音色 · 并行</text>
</g>
<!-- 场景布置师 -->
<g>
<rect x="332" y="354" width="250" height="68" rx="8" fill="#712b13" stroke="#f0997b" stroke-width="0.5"/>
<text x="457" y="376" text-anchor="middle" dominant-baseline="central" fill="#f5c4b3" font-size="14" font-weight="500">场景布置师</text>
<text x="457" y="394" text-anchor="middle" dominant-baseline="central" fill="#f0997b" font-size="12">Cinematographer</text>
<text x="457" y="410" text-anchor="middle" dominant-baseline="central" fill="#f0997b" font-size="12">镜头编排 + 背景提示词</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)"/>
<!-- 画家 -->
<g>
<rect x="190" y="458" width="260" height="68" rx="8" fill="#712b13" stroke="#f0997b" stroke-width="0.5"/>
<text x="320" y="480" text-anchor="middle" dominant-baseline="central" fill="#f5c4b3" font-size="14" font-weight="500">画家</text>
<text x="320" y="498" text-anchor="middle" dominant-baseline="central" fill="#f0997b" font-size="12">Painter</text>
<text x="320" y="514" text-anchor="middle" dominant-baseline="central" fill="#f0997b" font-size="12">以立绘为参考渲染 16:9 背景</text>
</g>
<line x1="320" y1="526" x2="340" y2="576" stroke="#9c9a92" stroke-width="1.5" marker-end="url(#arrow)"/>
<!-- 一幕场景 -->
<g>
<rect x="220" y="586" width="240" height="68" rx="8" fill="#444441" stroke="#b4b2a9" stroke-width="0.5"/>
<text x="340" y="608" text-anchor="middle" dominant-baseline="central" fill="#d3d1c7" font-size="14" font-weight="500">一幕场景</text>
<text x="340" y="626" text-anchor="middle" dominant-baseline="central" fill="#b4b2a9" font-size="12">Scene output</text>
<text x="340" y="642" text-anchor="middle" dominant-baseline="central" fill="#b4b2a9" font-size="12">背景图 + 节拍树</text>
</g>
<!-- 预测式预生成回环 -->
<text x="542" y="236" text-anchor="middle" fill="#c2c0b6" font-size="12">预测式预生成下一幕</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>
Reference in New Issue View Git Blame Copy Permalink