Hugging Face's logo

Spaces:
build-small-hackathon
/
ObjectverseDiary
Paused

App Files Community
2
ObjectverseDiary / docs /architecture-diagram.html
qqyule's picture
qqyule
Deploy latest Objectverse Diary from fa09aac
dd6cefc verified
Raw
History Blame
16.3 kB
<!DOCTYPE html>
<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/ &amp; 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 &amp; 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 &amp; 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>