Signal-Share/arcade-chatbot-vram-lifting.html at main · falabellamichael/Signal-Share · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Chatbot VRAM Lifting | Signal Share Arcade</title>
    <link rel="stylesheet" href="./questions-guide.css?v=1.6">
    <link rel="stylesheet" href="./android-optimizations.css?v=1.7">
    <style>
        :root {
            --accent-primary: #50fa7b; /* Green for "Lifting" / Efficiency */
            --accent-secondary: #8be9fd;
            --accent-purple: #bd93f9;
            --surface-glass: rgba(255, 255, 255, 0.03);
            --border-glass: rgba(255, 255, 255, 0.12);
        }

        .comparison-container {
            display: flex;
            gap: 20px;
            margin: 30px 0;
            flex-wrap: wrap;
        }
        .comparison-side {
            flex: 1;
            min-width: 300px;
            background: var(--surface-glass);
            border: 1px solid var(--border-glass);
            border-radius: 20px;
            padding: 25px;
            position: relative;
        }
        .comparison-side h3 {
            margin-top: 0;
            font-size: 1.1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .side-bad { border-top: 4px solid #ff5555; }
        .side-good { border-top: 4px solid var(--accent-primary); }

        .stat-pill {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 999px;
            background: rgba(80, 250, 123, 0.1);
            color: var(--accent-primary);
            font-weight: 800;
            font-size: 0.75rem;
            margin-bottom: 15px;
            border: 1px solid rgba(80, 250, 123, 0.2);
        }

        .logic-card {
            background: #1a1b26;
            border-radius: 12px;
            padding: 20px;
            margin: 20px 0;
            border-left: 4px solid var(--accent-secondary);
        }
        .logic-card pre {
            margin: 10px 0 0;
            font-family: "JetBrains Mono", monospace;
            font-size: 0.85rem;
            color: #a9b1d6;
            overflow-x: auto;
        }

        .tag-team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }
        .team-member {
            text-align: center;
            padding: 20px;
            background: rgba(255,255,255,0.02);
            border-radius: 16px;
            border: 1px solid var(--border-glass);
        }
        .member-icon {
            font-size: 2rem;
            margin-bottom: 10px;
            display: block;
        }
    </style>
</head>
<body class="questions-page">
  <main class="questions-page-shell">
    <a class="questions-back-link" href="./arcade-ai-deepdive.html">← Back to AI Deep-Dive</a>

    <p class="questions-page-topline">The "Heavy Lifting" Protocol</p>
    <h1>How the Chatbot Optimizes VRAM</h1>
    <p class="questions-page-lede">
      The Arcade Companion isn't a single AI—it's a multi-stage intelligence pipeline. Learn how the lightweight Chatbot Engine shields the heavy LLM from resource exhaustion.
    </p>

    <!-- The Problem Section -->
    <section class="questions-page-card">
      <h2>The VRAM Challenge</h2>
      <p>Large Language Models (LLMs) are memory-intensive. Every line of code they read takes up space in your GPU's KV Cache. If the AI reads a full 10,000-line file, your VRAM spikes, causing lag.</p>

      <div class="comparison-container">
        <div class="comparison-side side-bad">
          <h3 style="color: #ff5555;">Standard AI</h3>
          <p>Reads the entire file for every request. High latency, massive VRAM usage, frequent crashes on 8GB cards.</p>
          <div style="font-size: 0.8rem; color: #ff5555; font-weight: bold;">[VRAM usage: 8GB - 12GB]</div>
        </div>
        <div class="comparison-side side-good">
          <h3 style="color: var(--accent-primary);">Signal Share "Heavy Lifter"</h3>
          <p>Uses the Chatbot to "Spot" the relevant code first. Only sends a small 40-line snippet to the LLM.</p>
          <div style="font-size: 0.8rem; color: var(--accent-primary); font-weight: bold;">[VRAM usage: 2GB - 4GB]</div>
        </div>
      </div>
    </section>

    <!-- The "Tag Team" Architecture -->
    <section class="questions-page-card">
      <h2>The Tag-Team Architecture</h2>
      <p>We've split the brain into two parts: The <strong>Spotter</strong> and The <strong>Surgeon</strong>.</p>

      <div class="tag-team-grid">
        <div class="team-member">
          <span class="member-icon">🔍</span>
          <strong style="color: var(--accent-secondary);">The Spotter</strong>
          <p style="font-size: 0.8rem; opacity: 0.7; margin-top: 5px;">Lightweight Chatbot Engine. Uses regex and string matching (0MB VRAM).</p>
        </div>
        <div class="team-member">
          <span class="member-icon">🛠️</span>
          <strong style="color: var(--accent-primary);">The Surgeon</strong>
          <p style="font-size: 0.8rem; opacity: 0.7; margin-top: 5px;">Heavy Local LLM. Only wakes up when the Spotter provides exact coordinates.</p>
        </div>
      </div>

      <h3>How it works step-by-step:</h3>
      <ol style="line-height: 1.8;">
          <li><strong>Intent Detection:</strong> The Chatbot intercepts your message. If it sees a search intent (e.g., "Where is the score?"), it runs a local search immediately.</li>
          <li><strong>Context Pruning:</strong> The Chatbot finds the target line in your editor and grabs +/- 20 lines around it.</li>
          <li><strong>Surgical Injection:</strong> The Chatbot injects <em>only that snippet</em> into the AI's memory.</li>
          <li><strong>Fast Inference:</strong> Because the LLM is only reading 40 lines instead of 4,000, it generates the fix in milliseconds.</li>
      </ol>
    </section>

    <!-- Performance Stats -->
    <section class="questions-page-card">
      <h2>Optimization Results</h2>
      <div class="stat-pill">EFFICIENCY BOOST: 75%</div>
      <p>By letting the Chatbot do the heavy lifting of searching and scrolling, we've achieved:</p>
      <ul>
          <li><strong>Instant Navigation:</strong> The editor jumps to the target line before the AI even finishes "thinking."</li>
          <li><strong>Low Context Pressure:</strong> The LLM context window stays below 2,000 tokens for most edits.</li>
          <li><strong>Anti-Hallucination:</strong> The AI is forced to work with the *real* current code block found by the chatbot, not a cached memory.</li>
      </ul>
    </section>

    <div class="questions-guide-footer">
      <div class="footer-links">
          <a href="./arcade-ai-deepdive.html">Back to Deep-Dive</a>
          <a href="./mini-games.html">Arcade Home</a>
      </div>
      <span>Signal Share Performance Lab</span><br>
      <span>&copy; 2026 VRAM Optimization Series</span>
    </div>
  </main>
</body>
</html>