updated images with ai images

2026-05-16 19:45:58 +02:00
parent 18193f88fc
commit 581b94eb0c
91 changed files with 960 additions and 2046 deletions
@@ -0,0 +1,151 @@
+<!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>