Concept Agent
152 lines
5.7 KiB
HTML
152 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Image Gen Pipeline</title>
|
||
<style>
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body { background: #0d0d0d; color: #e0e0e0; font-family: monospace; padding: 32px; }
|
||
h1 { font-size: 14px; color: #aaa; margin-bottom: 28px; letter-spacing: 1px; text-transform: uppercase; }
|
||
h2 { font-size: 11px; color: #666; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 16px; }
|
||
|
||
.pipeline {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0;
|
||
margin-bottom: 40px;
|
||
flex-wrap: wrap;
|
||
gap: 0;
|
||
}
|
||
.node {
|
||
background: #1a1a1a;
|
||
border: 1px solid #333;
|
||
border-radius: 6px;
|
||
padding: 14px 18px;
|
||
min-width: 160px;
|
||
text-align: center;
|
||
}
|
||
.node .label { font-size: 10px; color: #666; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
|
||
.node .name { font-size: 13px; color: #e0e0e0; font-weight: bold; }
|
||
.node .sub { font-size: 10px; color: #888; margin-top: 4px; }
|
||
.node.highlight { border-color: #4a9eff; background: #0f1f33; }
|
||
.node.highlight .name { color: #4a9eff; }
|
||
.arrow { color: #444; font-size: 20px; padding: 0 8px; }
|
||
|
||
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 40px; }
|
||
.card { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 6px; padding: 14px; }
|
||
.card .k { font-size: 10px; color: #555; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
|
||
.card .v { font-size: 13px; color: #ddd; }
|
||
.card .v.ok { color: #4caf50; }
|
||
.card .v.warn { color: #ff9800; }
|
||
|
||
.progress { margin-bottom: 40px; }
|
||
.bar-wrap { background: #1a1a1a; border-radius: 4px; height: 24px; margin-bottom: 8px; overflow: hidden; }
|
||
.bar { height: 100%; background: #4a9eff; border-radius: 4px; display: flex; align-items: center; padding-left: 10px; font-size: 11px; color: #fff; transition: width 0.3s; }
|
||
.pct { font-size: 11px; color: #666; }
|
||
|
||
.log { background: #0a0a0a; border: 1px solid #222; border-radius: 6px; padding: 16px; font-size: 11px; line-height: 1.8; color: #888; }
|
||
.log .ok { color: #4caf50; }
|
||
.log .done { color: #aaa; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>Lahr Carpet Cleaning — Image Generation Pipeline</h1>
|
||
|
||
<h2>Model Stack</h2>
|
||
<div class="pipeline">
|
||
<div class="node">
|
||
<div class="label">Prompt</div>
|
||
<div class="name">gen-images-flux.py</div>
|
||
<div class="sub">28 images (16 hero + 12 svc)</div>
|
||
</div>
|
||
<div class="arrow">→</div>
|
||
<div class="node">
|
||
<div class="label">API</div>
|
||
<div class="name">ComfyUI</div>
|
||
<div class="sub">localhost:8188</div>
|
||
</div>
|
||
<div class="arrow">→</div>
|
||
<div class="node highlight">
|
||
<div class="label">UNet (model)</div>
|
||
<div class="name">FLUX.1 Schnell</div>
|
||
<div class="sub">Q8_0 GGUF · 12GB · 12B params</div>
|
||
</div>
|
||
<div class="arrow">→</div>
|
||
<div class="node">
|
||
<div class="label">Sampler</div>
|
||
<div class="name">KSampler</div>
|
||
<div class="sub">4 steps · euler · cfg=1.0</div>
|
||
</div>
|
||
<div class="arrow">→</div>
|
||
<div class="node">
|
||
<div class="label">Decode</div>
|
||
<div class="name">FLUX AE</div>
|
||
<div class="sub">ae.safetensors · 108MB</div>
|
||
</div>
|
||
<div class="arrow">→</div>
|
||
<div class="node">
|
||
<div class="label">Output</div>
|
||
<div class="name">JPEG → WebP</div>
|
||
<div class="sub">1024×576 · q92 → q80</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Text Encoders</h2>
|
||
<div class="pipeline" style="margin-bottom:40px">
|
||
<div class="node">
|
||
<div class="label">CLIP-L</div>
|
||
<div class="name">clip_l.safetensors</div>
|
||
<div class="sub">235MB · short prompts</div>
|
||
</div>
|
||
<div class="arrow">+</div>
|
||
<div class="node highlight">
|
||
<div class="label">T5-XXL fp8</div>
|
||
<div class="name">t5xxl_fp8_e4m3fn</div>
|
||
<div class="sub">4.6GB · long prompt understanding</div>
|
||
</div>
|
||
<div class="arrow">→</div>
|
||
<div class="node">
|
||
<div class="label">Node</div>
|
||
<div class="name">DualCLIPLoader</div>
|
||
<div class="sub">type: flux</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Hardware</h2>
|
||
<div class="grid">
|
||
<div class="card"><div class="k">GPU</div><div class="v warn">AMD Radeon (2GB VRAM)</div></div>
|
||
<div class="card"><div class="k">Execution</div><div class="v warn">CPU only (VRAM too small)</div></div>
|
||
<div class="card"><div class="k">Speed</div><div class="v">~4 min / image</div></div>
|
||
<div class="card"><div class="k">Total ETA</div><div class="v">~1h50m for 28 images</div></div>
|
||
</div>
|
||
|
||
<h2>Model Files on Disk</h2>
|
||
<div class="grid">
|
||
<div class="card"><div class="k">UNet</div><div class="v ok">flux1-schnell-Q8_0.gguf · 12GB</div></div>
|
||
<div class="card"><div class="k">T5-XXL</div><div class="v ok">t5xxl_fp8_e4m3fn.safetensors · 4.6GB</div></div>
|
||
<div class="card"><div class="k">CLIP-L</div><div class="v ok">clip_l.safetensors · 235MB</div></div>
|
||
<div class="card"><div class="k">VAE</div><div class="v ok">ae.safetensors · 108MB (official BFL)</div></div>
|
||
</div>
|
||
|
||
<h2>Generation Progress</h2>
|
||
<div class="progress">
|
||
<div class="bar-wrap"><div class="bar" style="width:14%">4 / 28</div></div>
|
||
<div class="pct">14% — reload page to update</div>
|
||
</div>
|
||
|
||
<h2>Prompt Strategy</h2>
|
||
<div class="log">
|
||
<div class="ok">Low-angle perspective (35mm / 24mm lens specified in prompt)</div>
|
||
<div class="ok">Carpet/floor texture sharp in foreground — subject recedes into bokeh</div>
|
||
<div class="ok">Shallow depth of field + vanishing point for depth cues</div>
|
||
<div class="ok">No people, no machines, no equipment</div>
|
||
<div class="ok">Finger Lakes / upstate NY context for residential scenes</div>
|
||
<br>
|
||
<div class="done">Previous model: RealVisXL V5.0 fp16 (SDXL 3.5B) — rejected: flat angles, poor depth</div>
|
||
<div class="done">Current model: FLUX.1 Schnell (12B transformer) — better spatial understanding</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|