rust_sqlite/examples/wasm/index.html at main · joaoh82/rust_sqlite · 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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>SQLRite in a browser tab</title>
    <style>
      body {
        font-family: ui-sans-serif, system-ui, sans-serif;
        max-width: 720px;
        margin: 2rem auto;
        padding: 0 1rem;
        line-height: 1.5;
        color: #1d1d1f;
      }
      h1 {
        font-size: 1.5rem;
      }
      h2 {
        margin-top: 2.5rem;
        padding-top: 1rem;
        border-top: 1px solid #e5e5ea;
      }
      textarea {
        width: 100%;
        font-family: ui-monospace, Menlo, Consolas, monospace;
        font-size: 0.9rem;
        padding: 0.5rem;
        border: 1px solid #d2d2d7;
        border-radius: 6px;
        min-height: 8rem;
      }
      textarea.compact {
        min-height: 3rem;
      }
      button {
        margin: 0.5rem 0.3rem 0.5rem 0;
        padding: 0.4rem 0.9rem;
        background: #0071e3;
        color: white;
        border: 0;
        border-radius: 6px;
        cursor: pointer;
      }
      button:disabled {
        background: #b0b0b8;
        cursor: not-allowed;
      }
      button.secondary {
        background: #e5e5ea;
        color: #1d1d1f;
      }
      pre {
        background: #f5f5f7;
        padding: 0.75rem;
        border-radius: 6px;
        overflow-x: auto;
        font-size: 0.85rem;
      }
      .status {
        color: #515154;
        font-size: 0.85rem;
      }
      .ask-banner {
        background: #fffaf0;
        border: 1px solid #f0d8a8;
        padding: 0.75rem 1rem;
        border-radius: 6px;
        font-size: 0.9rem;
        margin-bottom: 1rem;
      }
      .ask-banner code {
        background: #f5e7c4;
        padding: 0 0.2rem;
        border-radius: 3px;
      }
      .meta {
        color: #6e6e73;
        font-size: 0.8rem;
        font-family: ui-monospace, Menlo, Consolas, monospace;
      }
    </style>
  </head>
  <body>
    <h1>SQLRite in a browser tab</h1>
    <p>
      The full SQLRite engine compiled to WebAssembly. Everything runs in this
      tab — no server. State lives in memory; refreshing the page wipes it.
    </p>

    <h2>SQL console</h2>
    <textarea id="sql">
CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT, age INTEGER);
INSERT INTO users (name, age) VALUES ('alice', 30);
INSERT INTO users (name, age) VALUES ('bob', 25);
INSERT INTO users (name, age) VALUES ('carol', 40);
SELECT id, name, age FROM users ORDER BY age DESC;</textarea
    >
    <div>
      <button id="run">Run</button>
      <button id="reset" class="secondary">Reset DB</button>
      <span class="status" id="status"></span>
    </div>

    <h3>Result</h3>
    <pre id="out">(run a query to see output)</pre>

    <!-- ============================================================ -->
    <!-- Phase 7g.7 — natural-language → SQL via askPrompt / askParse -->
    <!-- ============================================================ -->

    <h2>Ask (natural-language → SQL)</h2>

    <p>
      The WASM SDK builds the LLM-API request body in this browser tab, but
      <strong>doesn't make the HTTP call itself</strong>. CORS + API-key
      exposure rule that out (see <code>docs/ask.md</code> for the full
      reasoning). Instead, the call goes through a backend proxy you control.
      The proxy is ~10 lines — see <code>examples/wasm/server.mjs</code> for a
      zero-dependency Node version that this demo expects on
      <code>POST /api/llm/complete</code>.
    </p>

    <div class="ask-banner">
      <strong>To use this section:</strong>
      <ol>
        <li>Set <code>ANTHROPIC_API_KEY</code> in your shell.</li>
        <li>
          Run <code>node server.mjs</code> from
          <code>examples/wasm/</code> (after <code>make build</code>). It serves
          this page on <code>http://localhost:8080</code> and proxies
          <code>/api/llm/complete</code> to Anthropic with your key.
        </li>
        <li>Type a question below. The generated SQL drops into the SQL console above.</li>
      </ol>
      No proxy running? The Ask button will report a clean "couldn't reach
      proxy" error and the rest of the console keeps working.
    </div>

    <textarea id="askQuestion" class="compact" placeholder="e.g. How many users are over 30?">How many users are over 30?</textarea>
    <div>
      <button id="ask">Ask</button>
      <span class="status" id="askStatus"></span>
    </div>

    <h3>Generated SQL</h3>
    <pre id="askSql">(submit a question to see generated SQL here)</pre>

    <h3>Explanation</h3>
    <pre id="askExplanation">(model rationale shows here)</pre>

    <p class="meta" id="askUsage"></p>

    <script type="module">
      // wasm-pack's `--target web` build is imported directly as a
      // JS module. `init()` fetches the `.wasm` file and wires up
      // the shared memory; nothing else can run until that resolves.
      import init, { Database } from "./pkg/sqlrite_wasm.js";

      const out = document.getElementById("out");
      const status = document.getElementById("status");
      const sqlTextarea = document.getElementById("sql");

      await init();
      let db = new Database();
      status.textContent = `sqlrite-wasm ready (in-memory)`;

      // ----------------------------------------------------------------
      // SQL console
      // ----------------------------------------------------------------

      document.getElementById("run").onclick = () => {
        const input = sqlTextarea.value.trim();
        if (!input) return;
        // Split on `;` so we can run a whole script. Only the last
        // statement's result (if it was a SELECT) is rendered —
        // matches how most SQL consoles behave.
        const statements = input
          .split(";")
          .map((s) => s.trim())
          .filter((s) => s.length > 0);

        let lastResult = null;
        let lastIsQuery = false;
        try {
          for (const stmt of statements) {
            const isQuery = /^\s*select\b/i.test(stmt);
            if (isQuery) {
              lastResult = db.query(stmt);
              lastIsQuery = true;
            } else {
              db.exec(stmt);
              lastIsQuery = false;
            }
          }
        } catch (err) {
          out.textContent = `Error: ${err}`;
          return;
        }

        if (lastIsQuery) {
          out.textContent = JSON.stringify(lastResult, null, 2);
        } else {
          out.textContent = `(${statements.length} statement${statements.length === 1 ? "" : "s"} executed)`;
        }
      };

      document.getElementById("reset").onclick = () => {
        db.free();
        db = new Database();
        out.textContent = "(reset — fresh in-memory DB)";
      };

      // ----------------------------------------------------------------
      // Ask flow — the Q9 split: build prompt here, post to backend,
      // parse response here.
      // ----------------------------------------------------------------

      const askButton = document.getElementById("ask");
      const askStatus = document.getElementById("askStatus");
      const askSqlEl = document.getElementById("askSql");
      const askExplanationEl = document.getElementById("askExplanation");
      const askUsageEl = document.getElementById("askUsage");
      const askQuestionEl = document.getElementById("askQuestion");

      askButton.onclick = async () => {
        const question = askQuestionEl.value.trim();
        if (!question) return;
        askButton.disabled = true;
        askStatus.textContent = "asking…";
        askSqlEl.textContent = "(generating…)";
        askExplanationEl.textContent = "";
        askUsageEl.textContent = "";

        try {
          // Step 1: build the LLM-API payload in-browser. No API key
          // needed here — it's just the prompt body.
          const payload = db.askPrompt(question);

          // Step 2: POST to the local backend proxy. The proxy adds
          // x-api-key from its env and forwards to Anthropic.
          // Set up: see server.mjs alongside this file.
          const response = await fetch("/api/llm/complete", {
            method: "POST",
            headers: { "content-type": "application/json" },
            body: JSON.stringify(payload),
          });
          if (!response.ok) {
            const errText = await response.text();
            throw new Error(`backend ${response.status}: ${errText}`);
          }
          const rawApiResponse = await response.text();

          // Step 3: parse the LLM response back into structured form.
          const result = db.askParse(rawApiResponse);

          if (!result.sql || result.sql.trim().length === 0) {
            askSqlEl.textContent = "(model declined to generate SQL)";
            askExplanationEl.textContent = result.explanation || "(no explanation)";
          } else {
            askSqlEl.textContent = result.sql;
            askExplanationEl.textContent = result.explanation || "(no explanation)";
            // Drop the generated SQL into the SQL console for review +
            // execution. User clicks Run to actually execute. This
            // mirrors the REPL's confirm-and-run UX from Phase 7g.2.
            sqlTextarea.value = result.sql + ";";
          }
          const u = result.usage;
          askUsageEl.textContent =
            `tokens: input=${u.input_tokens}, output=${u.output_tokens}, ` +
            `cache_write=${u.cache_creation_input_tokens}, cache_hit=${u.cache_read_input_tokens}`;
          askStatus.textContent = "done — SQL pasted into console above; click Run to execute.";
        } catch (err) {
          // Most common error: proxy isn't running. Give a clear hint
          // rather than a cryptic "Failed to fetch".
          const msg = String(err);
          if (msg.includes("Failed to fetch") || msg.includes("NetworkError")) {
            askStatus.textContent = "couldn't reach proxy — is `node server.mjs` running?";
          } else {
            askStatus.textContent = msg;
          }
          askSqlEl.textContent = `Error: ${msg}`;
        } finally {
          askButton.disabled = false;
        }
      };
    </script>
  </body>
</html>