feat(demo): use beautiful-mermaid for pipeline visualization

- Add beautiful-mermaid library (single-file ASCII renderer)
- Update pipeline_viz to generate mermaid graphs and render with beautiful-mermaid
- Creates dimensional network visualization with arrows connecting nodes
- Animates through effects and highlights active camera mode
This commit is contained in:
2026-03-16 02:12:03 -07:00
parent a1dcceac47
commit 996ba14b1d
3 changed files with 4219 additions and 102 deletions

View File

@@ -572,7 +572,7 @@ def run_pipeline_demo():
get_registry,
set_monitor,
)
from engine.pipeline_viz import generate_animated_pipeline
from engine.pipeline_viz import generate_network_pipeline
print(" \033[1;38;5;46mMAINLINE PIPELINE DEMO\033[0m")
print(" \033[38;5;245mInitializing...\033[0m")
@@ -667,7 +667,7 @@ def run_pipeline_demo():
camera.update(config.FRAME_DT)
buf = generate_animated_pipeline(w, frame_number)
buf = generate_network_pipeline(w, h, frame_number)
ctx = EffectContext(
terminal_width=w,

4107
engine/beautiful_mermaid.py Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -1,123 +1,133 @@
"""
Pipeline visualization - ASCII text graphics showing the render pipeline.
Pipeline visualization - Uses beautiful-mermaid to render the pipeline as ASCII network.
"""
def generate_pipeline_visualization(width: int = 80, height: int = 24) -> list[str]:
"""Generate ASCII visualization of the pipeline.
def generate_mermaid_graph(frame: int = 0) -> str:
"""Generate Mermaid flowchart for the pipeline."""
effects = ["NOISE", "FADE", "GLITCH", "FIREHOSE"]
active_effect = effects[(frame // 10) % 4]
Args:
width: Width of the visualization in characters
height: Height in lines
cam_modes = ["VERTICAL", "HORIZONTAL", "OMNI", "FLOATING"]
active_cam = cam_modes[(frame // 40) % 4]
Returns:
List of formatted strings representing the pipeline
"""
lines = []
return f"""graph LR
subgraph SOURCES
RSS[RSS Feeds]
Poetry[Poetry DB]
Ntfy[Ntfy Msg]
Mic[Microphone]
end
for y in range(height):
line = ""
subgraph FETCH
Fetch(fetch_all)
Cache[(Cache)]
end
if y == 1:
line = "" + "" * (width - 2) + ""
elif y == 2:
line = "" + " RENDER PIPELINE ".center(width - 2) + ""
elif y == 3:
line = "" + "" * (width - 2) + ""
subgraph SCROLL
Scroll(StreamController)
Camera({active_cam})
end
elif y == 5:
line = "║ SOURCES ══════════════> FETCH ═════════> SCROLL ═══> EFFECTS ═> DISPLAY"
elif y == 6:
line = "║ │ │ │ │"
elif y == 7:
line = "║ RSS Poetry Camera Terminal"
elif y == 8:
line = "║ Ntfy Cache Noise WebSocket"
elif y == 9:
line = "║ Mic Fade Pygame"
elif y == 10:
line = "║ Glitch Sixel"
elif y == 11:
line = "║ Firehose Kitty"
elif y == 12:
line = "║ Hud"
subgraph EFFECTS
Noise[NOISE]
Fade[FADE]
Glitch[GLITCH]
Fire[FIREHOSE]
Hud[HUD]
end
elif y == 14:
line = "" + "" * (width - 2) + ""
elif y == 15:
line = "║ CAMERA MODES "
remaining = width - len(line) - 1
line += (
"" * (remaining // 2 - 7)
+ " VERTICAL "
+ "" * (remaining // 2 - 6)
+ ""
)
elif y == 16:
line = (
""
+ "".center(8)
+ " "
+ "".center(8)
+ " "
+ "".center(8)
+ " "
+ "".center(8)
+ " " * 20
+ ""
)
elif y == 17:
line = (
"║ scroll up scroll left diagonal bobbing "
+ " " * 16
+ ""
)
subgraph DISPLAY
Term[Terminal]
Web[WebSocket]
Pygame[PyGame]
Sixel[Sixel]
end
elif y == 19:
line = "" + "" * (width - 2) + ""
elif y == 20:
fps = "60"
line = (
f"║ FPS: {fps} │ Frame: 16.7ms │ Effects: 5 active │ Camera: VERTICAL "
+ " " * (width - len(line) - 2)
+ ""
)
RSS --> Fetch
Poetry --> Fetch
Fetch --> Cache
Cache --> Scroll
Scroll --> Noise
Scroll --> Fade
Scroll --> Glitch
Scroll --> Fire
Scroll --> Hud
elif y == 21:
line = "" + "" * (width - 2) + ""
Noise --> Term
Fade --> Term
Glitch --> Term
Fire --> Term
Hud --> Term
else:
line = " " * width
Noise --> Web
Fade --> Web
Glitch --> Web
Fire --> Web
Hud --> Web
lines.append(line)
Noise --> Pygame
Fade --> Pygame
Glitch --> Pygame
Fire --> Pygame
Hud --> Pygame
return lines
Noise --> Sixel
Fade --> Sixel
Glitch --> Sixel
Fire --> Sixel
Hud --> Sixel
style {active_effect} fill:#90EE90
style Camera fill:#87CEEB
"""
def generate_animated_pipeline(width: int = 80, frame: int = 0) -> list[str]:
"""Generate animated ASCII visualization.
def generate_network_pipeline(
width: int = 80, height: int = 24, frame: int = 0
) -> list[str]:
"""Generate dimensional ASCII network visualization using beautiful-mermaid."""
try:
from engine.beautiful_mermaid import render_mermaid_ascii
Args:
width: Width of the visualization
frame: Animation frame number
mermaid_graph = generate_mermaid_graph(frame)
ascii_output = render_mermaid_ascii(mermaid_graph, padding_x=3, padding_y=2)
Returns:
List of formatted strings
"""
lines = generate_pipeline_visualization(width, 20)
lines = ascii_output.split("\n")
anim_chars = ["", "", "", " ", "", "", ""]
char = anim_chars[frame % len(anim_chars)]
result = []
for y in range(height):
if y < len(lines):
line = lines[y]
if len(line) < width:
line = line + " " * (width - len(line))
elif len(line) > width:
line = line[:width]
result.append(line)
else:
result.append(" " * width)
for i, line in enumerate(lines):
if "Effects" in line:
lines[i] = line.replace("" * 5, char * 5)
status_y = height - 2
if status_y < height:
fps = 60 - (frame % 15)
frame_time = 16.6 + (frame % 5) * 0.1
cam_modes = ["VERTICAL", "HORIZONTAL", "OMNI", "FLOATING"]
cam = cam_modes[(frame // 40) % 4]
effects = ["NOISE", "FADE", "GLITCH", "FIREHOSE"]
eff = effects[(frame // 10) % 4]
if "FPS:" in line:
lines[i] = (
f"║ FPS: {60 - frame % 10} │ Frame: {16 + frame % 5:.1f}ms │ Effects: {5 - (frame % 3)} active │ Camera: {['VERTICAL', 'HORIZONTAL', 'OMNI', 'FLOATING'][frame % 4]} "
+ " " * (80 - len(lines[i]) - 2)
+ ""
)
anim = "▓▒░ "[frame % 4]
status = f" FPS:{fps:3.0f} │ Frame:{frame_time:4.1f}ms │ {anim} {eff} │ Camera:{cam}"
status = status[: width - 4].ljust(width - 4)
result[status_y] = " " + status + ""
return lines
if height > 0:
result[0] = "" * width
result[height - 1] = "" * width
return result
except Exception as e:
return [
f"Error: {e}" + " " * (width - len(f"Error: {e}")) for _ in range(height)
]