WGPU-Qwen3.5-0.8b/index.html at main · jerrikchr/WGPU-Qwen3.5-0.8b · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Qwen 3.5 0.8B WebGPU Lab</title>
    <link rel="stylesheet" href="/src/style.css">
  </head>
  <body>
    <div id="app">
      <header>
        <div class="header-inner">
          <div>
            <h1>Qwen_WebGPU // 0.8B</h1>
            <p class="status" id="status-text">INITIALIZING_NEURAL_UPLINK...</p>
          </div>
          <button id="reset-button" title="Purge Memory" disabled>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path></svg>
            <span>[ PURGE ]</span>
          </button>
        </div>
      </header>

      <main class="chat-container">
        <div id="init-overlay" class="init-overlay">
          <div class="init-content">
            <h2>System Standby</h2>
            <p>Ready to initialize Qwen 3.5 0.8B locally.</p>
            <p class="size-warning">Download Size: ~650MB (Cached locally after first load)</p>
            <button id="init-button" class="cyber-button">INITIALIZE ENGINE</button>
          </div>
        </div>

        <div id="chat-history" class="chat-history"></div>

        <div id="image-preview-container" class="image-preview-container" style="display: none;">
          <img id="image-preview" src="" alt="Preview" />
          <button id="remove-image">x</button>
          <span style="font-size: 0.7rem; color: #10b981; margin-left: 10px; font-family: 'JetBrains Mono'">IMAGE_LOADED_TO_VRAM</span>
        </div>

        <div class="input-wrapper">
          <div class="metrics-container" id="metrics-container" style="display: none;">
            <div class="metric"><span class="metric-label">TTFT:</span> <span id="metric-ttft" class="metric-value">--</span></div>
            <div class="metric"><span class="metric-label">SPEED:</span> <span id="metric-speed" class="metric-value">--</span></div>
            <div class="metric"><span class="metric-label">TOKENS:</span> <span id="metric-tokens" class="metric-value">--</span></div>
          </div>
          <div class="input-area">
            <input type="file" id="image-input" accept="image/*" style="display: none;" />
            <button id="upload-button" title="Upload Image" disabled>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
            </button>
            <textarea id="prompt-input" placeholder="Wake up the local ghost in the machine..." disabled rows="1"></textarea>
            <button id="send-button" disabled>Execute</button>
          </div>
        </div>
      </main>

      <footer class="app-footer">
        Vibecoded by <a href="https://github.com/jerrikchr" target="_blank" rel="noopener noreferrer">@jerrikchr</a> // Powered by WebGPU & Transformers.js
      </footer>
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>