Hugging Face's logo

Spaces:
mrfakename
/
open-d1-webgpu
Running

App Files Community
open-d1-webgpu
File size: 3,996 Bytes
39f5f3f
2bce084
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
05b5a3c
2bce084
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
39f5f3f
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
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Open d1 WebGPU</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <main>
    <header>
      <h1>Open d1 <span class="tag">in your browser</span></h1>
      <p class="lede">Liquid AI's decision models: a state and some typed questions in, calibrated answers out of one forward pass. Runs locally on WebGPU, with a WASM fallback.</p>
      <p class="links">
        <a href="https://huggingface.co/LiquidAI/d1-omni-600M" target="_blank" rel="noopener">d1-omni-600M</a> (text + image or voice) ·
        <a href="https://huggingface.co/LiquidAI/d1-3B" target="_blank" rel="noopener">d1-3B</a> (text + image) ·
        ONNX by <a href="https://huggingface.co/onnx-community" target="_blank" rel="noopener">onnx-community</a>
      </p>
    </header>

    <div class="grid">
      <section class="panel" id="inputs">
        <div class="field">
          <span class="label">Model</span>
          <div class="seg" role="radiogroup" id="model">
            <button role="radio" data-model="omni" aria-checked="true">d1-omni-600M <small>0.5 GB</small></button>
            <button role="radio" data-model="3b" aria-checked="false">d1-3B <small>2.4 GB</small></button>
          </div>
        </div>

        <label class="field">
          <span class="label">State</span>
          <textarea id="state" rows="4" placeholder="Text or JSON the questions are about. Can be empty when an image or clip is the whole state."></textarea>
        </label>

        <div class="media">
          <div class="drop" id="imageDrop" tabindex="0">
            <input type="file" id="imageFile" accept="image/*" hidden />
            <img id="imagePreview" alt="" hidden />
            <span class="hint" id="imageHint">Image · drop or click</span>
            <button class="clear" id="imageClear" hidden aria-label="Remove image">×</button>
          </div>
          <div class="drop" id="audioDrop" tabindex="0">
            <input type="file" id="audioFile" accept="audio/*" hidden />
            <span class="hint" id="audioHint">Voice clip · drop or click</span>
            <audio id="audioPreview" controls hidden></audio>
            <div class="audio-actions">
              <button class="small" id="recordBtn" type="button">Record</button>
              <button class="clear" id="audioClear" hidden aria-label="Remove clip">×</button>
            </div>
          </div>
        </div>

        <div class="field">
          <span class="label">Questions</span>
          <div id="questions"></div>
          <div class="qfoot">
            <button class="small" id="addQ" type="button">Add question</button>
            <span class="help"><b>choice</b>: <code>name: description | name: description</code> · <b>score</b>: levels lowest first, split by <code>|</code> · <b>noul</b> (yes/no): optional <code>yes means | no means</code></span>
          </div>
        </div>

        <button class="primary" id="run" type="button">Decide</button>
        <div class="status" id="status" aria-live="polite"></div>
        <div class="bar" id="bar" hidden><span></span></div>
      </section>

      <section class="panel" id="outputs">
        <div id="result" class="placeholder">Answers appear here.</div>
      </section>
    </div>

    <section class="examples">
      <span class="label">Examples</span>
      <div id="examples"></div>
    </section>

    <footer><a href="https://x.com/realmrfakename" target="_blank" rel="noopener">Twitter / X</a></footer>
  </main>
  <script type="module" src="app.js"></script>
</body>
</html>