Spaces:
Running on Zero
Running on Zero
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Objectverse Diary Architecture Diagram</title> | |
| <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'JetBrains Mono', monospace; | |
| background: #020617; | |
| min-height: 100vh; | |
| padding: 2rem; | |
| color: white; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .header { | |
| margin-bottom: 2rem; | |
| } | |
| .header-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .pulse-dot { | |
| width: 12px; | |
| height: 12px; | |
| background: #22d3ee; | |
| border-radius: 50%; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; transform: scale(1); } | |
| 50% { opacity: 0.4; transform: scale(0.9); } | |
| } | |
| h1 { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| letter-spacing: -0.025em; | |
| } | |
| .subtitle { | |
| color: #94a3b8; | |
| font-size: 0.875rem; | |
| margin-left: 1.75rem; | |
| } | |
| .diagram-container { | |
| background: rgba(15, 23, 42, 0.5); | |
| border-radius: 1rem; | |
| border: 1px solid #1e293b; | |
| padding: 1.5rem; | |
| overflow-x: auto; | |
| } | |
| svg { | |
| width: 100%; | |
| min-width: 950px; | |
| display: block; | |
| } | |
| .cards { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 1rem; | |
| margin-top: 2rem; | |
| } | |
| .card { | |
| background: rgba(15, 23, 42, 0.5); | |
| border-radius: 0.75rem; | |
| border: 1px solid #1e293b; | |
| padding: 1.25rem; | |
| } | |
| .card-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-bottom: 0.75rem; | |
| } | |
| .card-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| } | |
| .card-dot.cyan { background: #22d3ee; } | |
| .card-dot.emerald { background: #34d399; } | |
| .card-dot.violet { background: #a78bfa; } | |
| .card-dot.amber { background: #fbbf24; } | |
| .card-dot.rose { background: #fb7185; } | |
| .card h3 { | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| } | |
| .card ul { | |
| list-style: none; | |
| color: #94a3b8; | |
| font-size: 0.75rem; | |
| } | |
| .card li { | |
| margin-bottom: 0.375rem; | |
| } | |
| .footer { | |
| text-align: center; | |
| margin-top: 2rem; | |
| color: #475569; | |
| font-size: 0.75rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- Header --> | |
| <div class="header"> | |
| <div class="header-row"> | |
| <div class="pulse-dot"></div> | |
| <h1>Objectverse Diary Architecture</h1> | |
| </div> | |
| <p class="subtitle">Multi-layered small model pipeline for the Build Small Hackathon (An Adventure in Thousand Token Wood)</p> | |
| </div> | |
| <!-- Main Diagram --> | |
| <div class="diagram-container"> | |
| <svg viewBox="0 0 1000 680"> | |
| <!-- Definitions --> | |
| <defs> | |
| <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto"> | |
| <polygon points="0 0, 10 3.5, 0 7" fill="#64748b" /> | |
| </marker> | |
| <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"> | |
| <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/> | |
| </pattern> | |
| </defs> | |
| <!-- Background Grid --> | |
| <rect width="100%" height="100%" fill="url(#grid)" /> | |
| <!-- Region/Cloud Boundary (Hugging Face Space Sandbox) --> | |
| <rect x="160" y="40" width="700" height="600" rx="12" fill="rgba(251, 191, 36, 0.02)" stroke="#fbbf24" stroke-width="1.2" stroke-dasharray="8,4"/> | |
| <text x="175" y="62" fill="#fbbf24" font-size="10" font-weight="600">Hugging Face Space Runtime Environment</text> | |
| <!-- Dynamic GPU Security Boundary (ZeroGPU Space Context) --> | |
| <rect x="630" y="90" width="210" height="400" rx="10" fill="rgba(244, 63, 94, 0.02)" stroke="#fb7185" stroke-width="1" stroke-dasharray="4,4"/> | |
| <text x="640" y="110" fill="#fb7185" font-size="8" font-weight="600">ZeroGPU Allocation Sandbox</text> | |
| <!-- Connections (Drawn early so they layer behind components) --> | |
| <!-- User -> UI Layer --> | |
| <line x1="120" y1="315" x2="198" y2="315" stroke="#22d3ee" stroke-width="1.5" marker-end="url(#arrowhead)"/> | |
| <text x="159" y="304" fill="#94a3b8" font-size="8" font-weight="600" text-anchor="middle">HTTPS</text> | |
| <!-- UI Layer -> Pipeline Coordinator --> | |
| <line x1="340" y1="315" x2="418" y2="315" stroke="#22d3ee" stroke-width="1.5" marker-end="url(#arrowhead)"/> | |
| <text x="379" y="304" fill="#94a3b8" font-size="8" text-anchor="middle">WS/Post</text> | |
| <!-- Coordinator -> Vision Runner --> | |
| <path d="M 550 280 L 590 280 Q 610 280 610 210 L 638 210" fill="none" stroke="#34d399" stroke-width="1.5" stroke-dasharray="2,2" marker-end="url(#arrowhead)"/> | |
| <text x="590" y="240" fill="#fb7185" font-size="8" text-anchor="middle">@zero_gpu</text> | |
| <!-- Coordinator -> Llama.cpp Runner --> | |
| <path d="M 550 330 L 590 330 Q 610 330 610 395 L 638 395" fill="none" stroke="#34d399" stroke-width="1.5" marker-end="url(#arrowhead)"/> | |
| <text x="595" y="360" fill="#34d399" font-size="8" text-anchor="middle">Local GGUF</text> | |
| <!-- Coordinator -> Renderer/Traces --> | |
| <line x1="475" y1="365" x2="475" y2="473" stroke="#34d399" stroke-width="1.5" marker-end="url(#arrowhead)"/> | |
| <text x="483" y="420" fill="#94a3b8" font-size="8">Local Save</text> | |
| <!-- Vision Model -> HF Hub --> | |
| <line x1="810" y1="210" x2="888" y2="280" stroke="#94a3b8" stroke-width="1.2" stroke-dasharray="4,4" marker-end="url(#arrowhead)"/> | |
| <text x="850" y="235" fill="#94a3b8" font-size="7" text-anchor="middle">gated pull</text> | |
| <!-- Text Model -> HF Hub --> | |
| <line x1="810" y1="395" x2="888" y2="330" stroke="#94a3b8" stroke-width="1.2" stroke-dasharray="4,4" marker-end="url(#arrowhead)"/> | |
| <text x="850" y="370" fill="#94a3b8" font-size="7" text-anchor="middle">GGUF pull</text> | |
| <!-- ================================================================= | |
| COMPONENTS (Opaque backgrounds + Semi-transparent borders) | |
| ================================================================= --> | |
| <!-- 1. Users / Browser --> | |
| <rect x="20" y="270" width="100" height="90" rx="6" fill="#0f172a" /> | |
| <rect x="20" y="270" width="100" height="90" rx="6" fill="rgba(30, 41, 59, 0.5)" stroke="#94a3b8" stroke-width="1.5"/> | |
| <text x="70" y="295" fill="white" font-size="11" font-weight="700" text-anchor="middle">Users</text> | |
| <text x="70" y="315" fill="#94a3b8" font-size="8" text-anchor="middle">Upload Image</text> | |
| <text x="70" y="330" fill="#94a3b8" font-size="8" text-anchor="middle">Chat Session</text> | |
| <text x="70" y="345" fill="#22d3ee" font-size="8" text-anchor="middle">Web/Mobile</text> | |
| <!-- 2. UI Layer (Gradio) --> | |
| <rect x="200" y="190" width="140" height="250" rx="8" fill="#0f172a" /> | |
| <rect x="200" y="190" width="140" height="250" rx="8" fill="rgba(8, 51, 68, 0.4)" stroke="#22d3ee" stroke-width="1.5"/> | |
| <text x="270" y="215" fill="white" font-size="12" font-weight="700" text-anchor="middle">Gradio Web UI</text> | |
| <text x="270" y="235" fill="#94a3b8" font-size="8" text-anchor="middle">app.py / src/ui/</text> | |
| <line x1="210" y1="245" x2="330" y2="245" stroke="#1e293b" stroke-width="1"/> | |
| <text x="215" y="265" fill="#22d3ee" font-size="8" font-weight="600">• Image Drag-Drop</text> | |
| <text x="215" y="285" fill="#22d3ee" font-size="8" font-weight="600">• Persona Selector</text> | |
| <text x="215" y="305" fill="#22d3ee" font-size="8" font-weight="600">• Typewriter Diary</text> | |
| <text x="215" y="325" fill="#22d3ee" font-size="8" font-weight="600">• Character Chat</text> | |
| <text x="215" y="345" fill="#22d3ee" font-size="8" font-weight="600">• SVG Card Render</text> | |
| <line x1="210" y1="365" x2="330" y2="365" stroke="#1e293b" stroke-width="1"/> | |
| <text x="270" y="385" fill="#94a3b8" font-size="8" text-anchor="middle">Example Gallery Cache</text> | |
| <text x="270" y="400" fill="#22d3ee" font-size="8" text-anchor="middle">(Deterministic Baseline)</text> | |
| <!-- 3. Pipeline Coordinator --> | |
| <rect x="420" y="240" width="130" height="125" rx="6" fill="#0f172a" /> | |
| <rect x="420" y="240" width="130" height="125" rx="6" fill="rgba(6, 78, 59, 0.4)" stroke="#34d399" stroke-width="1.5"/> | |
| <text x="485" y="265" fill="white" font-size="11" font-weight="700" text-anchor="middle">Pipeline Core</text> | |
| <text x="485" y="280" fill="#94a3b8" font-size="8" text-anchor="middle">src/pipeline.py</text> | |
| <line x1="430" y1="290" x2="540" y2="290" stroke="#1e293b" stroke-width="1"/> | |
| <text x="435" y="305" fill="#34d399" font-size="8">• State Routing</text> | |
| <text x="435" y="320" fill="#34d399" font-size="8">• Fallback Logic</text> | |
| <text x="435" y="335" fill="#34d399" font-size="8">• Parse Schemas</text> | |
| <text x="485" y="352" fill="#e2e8f0" font-size="7" text-anchor="middle">Pydantic validation</text> | |
| <!-- 4. Vision Runner --> | |
| <rect x="645" y="150" width="165" height="100" rx="6" fill="#0f172a" /> | |
| <rect x="645" y="150" width="165" height="100" rx="6" fill="rgba(120, 53, 15, 0.3)" stroke="#fbbf24" stroke-width="1.5"/> | |
| <text x="727" y="175" fill="white" font-size="11" font-weight="700" text-anchor="middle">Vision Backend</text> | |
| <text x="727" y="190" fill="#94a3b8" font-size="8" text-anchor="middle">src/models/vision_runner</text> | |
| <line x1="655" y1="200" x2="800" y2="200" stroke="#1e293b" stroke-width="1"/> | |
| <text x="660" y="215" fill="#fbbf24" font-size="8" font-weight="600">MiniCPM-V 2.6 (8B)</text> | |
| <text x="660" y="230" fill="#94a3b8" font-size="8">ZeroGPU compatible</text> | |
| <text x="660" y="242" fill="#fb7185" font-size="7">Fallback to mock on failure</text> | |
| <!-- 5. Llama.cpp Runner --> | |
| <rect x="645" y="335" width="165" height="110" rx="6" fill="#0f172a" /> | |
| <rect x="645" y="335" width="165" height="110" rx="6" fill="rgba(76, 29, 149, 0.4)" stroke="#a78bfa" stroke-width="1.5"/> | |
| <text x="727" y="360" fill="white" font-size="11" font-weight="700" text-anchor="middle">Text Backend</text> | |
| <text x="727" y="375" fill="#94a3b8" font-size="8" text-anchor="middle">llama_cpp_runner.py</text> | |
| <line x1="655" y1="385" x2="800" y2="385" stroke="#1e293b" stroke-width="1"/> | |
| <text x="660" y="400" fill="#a78bfa" font-size="8" font-weight="600">Qwen 1.5B GGUF</text> | |
| <text x="660" y="415" fill="#94a3b8" font-size="8">Merged LoRA v2 Adapter</text> | |
| <text x="660" y="428" fill="#fbbf24" font-size="7">Deterministic fallback runtime</text> | |
| <!-- 6. Card Renderer & Traces (Opaque + Slate border) --> | |
| <rect x="420" y="480" width="130" height="115" rx="6" fill="#0f172a" /> | |
| <rect x="420" y="480" width="130" height="115" rx="6" fill="rgba(30, 41, 59, 0.5)" stroke="#94a3b8" stroke-width="1.5"/> | |
| <text x="485" y="505" fill="white" font-size="11" font-weight="700" text-anchor="middle">Output Services</text> | |
| <text x="485" y="520" fill="#94a3b8" font-size="8" text-anchor="middle">renderer/ & traces/</text> | |
| <line x1="430" y1="530" x2="540" y2="530" stroke="#1e293b" stroke-width="1"/> | |
| <text x="435" y="545" fill="#94a3b8" font-size="8">• Card HTML Gen</text> | |
| <text x="435" y="560" fill="#94a3b8" font-size="8">• Anonymizer Traces</text> | |
| <text x="435" y="575" fill="#94a3b8" font-size="8">• data/traces/*.jsonl</text> | |
| <!-- 7. Hugging Face Hub (External Repository) --> | |
| <rect x="890" y="240" width="90" height="180" rx="8" fill="#0f172a" /> | |
| <rect x="890" y="240" width="90" height="180" rx="8" fill="rgba(30, 41, 59, 0.5)" stroke="#94a3b8" stroke-width="1.5"/> | |
| <text x="935" y="270" fill="white" font-size="11" font-weight="700" text-anchor="middle">HF Hub</text> | |
| <text x="935" y="285" fill="#94a3b8" font-size="8" text-anchor="middle">Remote Assets</text> | |
| <line x1="900" y1="298" x2="970" y2="298" stroke="#1e293b" stroke-width="1"/> | |
| <text x="905" y="315" fill="#94a3b8" font-size="8">• SFT Dataset</text> | |
| <text x="905" y="335" fill="#94a3b8" font-size="8">• LoRA Weights</text> | |
| <text x="905" y="355" fill="#94a3b8" font-size="8">• GGUF Files</text> | |
| <text x="905" y="375" fill="#fb7185" font-size="8">• Gate models</text> | |
| <!-- ================================================================= | |
| DIAGRAM LEGEND | |
| ================================================================= --> | |
| <text x="180" y="515" fill="white" font-size="10" font-weight="600">Legend</text> | |
| <rect x="180" y="527" width="16" height="10" rx="2" fill="rgba(8, 51, 68, 0.4)" stroke="#22d3ee" stroke-width="1"/> | |
| <text x="202" y="535" fill="#94a3b8" font-size="8">UI Layer (Gradio)</text> | |
| <rect x="180" y="543" width="16" height="10" rx="2" fill="rgba(6, 78, 59, 0.4)" stroke="#34d399" stroke-width="1"/> | |
| <text x="202" y="551" fill="#94a3b8" font-size="8">Controller Layer (Python)</text> | |
| <rect x="180" y="559" width="16" height="10" rx="2" fill="rgba(120, 53, 15, 0.3)" stroke="#fbbf24" stroke-width="1"/> | |
| <text x="202" y="567" fill="#94a3b8" font-size="8">Vision Engine (MiniCPM-V)</text> | |
| <rect x="180" y="575" width="16" height="10" rx="2" fill="rgba(76, 29, 149, 0.4)" stroke="#a78bfa" stroke-width="1"/> | |
| <text x="202" y="583" fill="#94a3b8" font-size="8">Text Engine (Llama.cpp GGUF)</text> | |
| <rect x="180" y="591" width="16" height="10" rx="2" fill="rgba(30, 41, 59, 0.5)" stroke="#94a3b8" stroke-width="1"/> | |
| <text x="202" y="599" fill="#94a3b8" font-size="8">External & File Outputs</text> | |
| <rect x="180" y="607" width="16" height="10" rx="2" fill="transparent" stroke="#fb7185" stroke-width="1" stroke-dasharray="2,2"/> | |
| <text x="202" y="615" fill="#94a3b8" font-size="8">Security/Dynamic Hardware Group</text> | |
| </svg> | |
| </div> | |
| <!-- Info Cards --> | |
| <div class="cards"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <div class="card-dot cyan"></div> | |
| <h3>UI & Frontend Layer</h3> | |
| </div> | |
| <ul> | |
| <li>• <b>English-First Copy</b>: Retro archive design, warm paper, mystery vibe</li> | |
| <li>• <b>Deterministic Fallback</b>: Example gallery reads committed mock records</li> | |
| <li>• <b>Interactive Sandbox</b>: Full chat session maintaining object persona</li> | |
| </ul> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <div class="card-dot emerald"></div> | |
| <h3>Pipeline Coordinator</h3> | |
| </div> | |
| <ul> | |
| <li>• <b>Modular Routing</b>: Vision descriptions trigger first-person diaries</li> | |
| <li>• <b>Pydantic Validation</b>: Strict checks on JSON output from LLM</li> | |
| <li>• <b>Trace Compliance</b>: Generates anonymized session logs to JSONL files</li> | |
| </ul> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <div class="card-dot violet"></div> | |
| <h3>Dual-Engine Model Execution</h3> | |
| </div> | |
| <ul> | |
| <li>• <b>MiniCPM-V 2.6 (8B)</b>: Runs via HF Spaces ZeroGPU dynamically</li> | |
| <li>• <b>Llama.cpp (1.5B)</b>: Runs highly optimized GGUF adapter locally</li> | |
| <li>• <b>Flexible Mock Fallback</b>: Ensures 100% runtime uptime for judges</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <p class="footer"> | |
| Objectverse Diary • Created for Build Small Hackathon • June 2026 | |
| </p> | |
| </div> | |
| </body> | |
| </html> | |