added proper demo for js bindings

bab2min · Jun 25, 2024 · bc23a0e · bc23a0e
1 parent 73b91cc
commit bc23a0e
Show file tree

Hide file tree

Showing 7 changed files with 235 additions and 43 deletions.
diff --git a/bindings/wasm/package-demo/index.html b/bindings/wasm/package-demo/index.html
@@ -3,17 +3,43 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Vite + TS</title>
+
+        <title>Kiwi Demo</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=Noto+Sans+KR:wght@400&display=swap"
+            rel="stylesheet"
+        />
+
+        <link rel="stylesheet" href="./src/style.css" />
+
+        <script src="./src/index.ts" type="module" defer></script>
     </head>
+
     <body>
-        <h2>KiwiBuilder/Kiwi Test Page</h2>
+        <div class="title-wrap">
+            <img src="./public/logo.png" alt="Kiwi Logo" class="logo" />
+            <div id="version">Loading...</div>
+        </div>
 
-        <h4>Usage</h4>
-        <p>Open the browser console to interact with KiwiBuilder</p>
-        <p>The default model files are available as modelFiles</p>
-        <p>To get started with a Kiwi instance use the following:</p>
-        <p>kiwi = await builder.build({ modelFiles })</p>
+        <input
+            id="input"
+            type="text"
+            value="프랑스의 세계적인 의상 디자이너 엠마누엘 웅가로가 실내 장식용 직물 디자이너로 나섰다."
+            hidden
+        />
 
-        <script type="module" src="/src/main.ts"></script>
+        <table id="result" hidden>
+            <tr>
+                <th>시작 위치</th>
+                <th>길이</th>
+                <th>표면</th>
+                <th>형태</th>
+                <th>품사 태그</th>
+                <th>점수</th>
+            </tr>
+        </table>
     </body>
 </html>
diff --git a/bindings/wasm/package-demo/public/logo.png b/bindings/wasm/package-demo/public/logo.png
diff --git a/bindings/wasm/package-demo/src/index.ts b/bindings/wasm/package-demo/src/index.ts
@@ -0,0 +1,69 @@
+import { WorkerRequest, WorkerResponse } from './worker.js';
+import { TokenInfo } from 'kiwi-nlp';
+
+const elVersion = document.getElementById('version')!;
+const elInput = document.getElementById('input') as HTMLInputElement;
+const elResultTable = document.getElementById('result') as HTMLTableElement;
+
+const worker = new Worker(
+    new URL('./worker.ts', import.meta.url),
+    { type: 'module' }
+);
+
+worker.onmessage = (event) => {
+    const response: WorkerResponse = event.data;
+
+    switch (response.type) {
+        case 'inited':
+            inited(response.version);
+            break;
+        case 'analyzed':
+            analyzed(response.result, response.text);
+            break;
+        default:
+            console.error('Unknown worker message');
+            break;
+    }
+};
+
+function sendWorkerRequest(request: WorkerRequest) {
+    worker.postMessage(request);
+}
+
+sendWorkerRequest({ type: 'init' });
+
+function inited(version: string) {
+    elVersion.innerText = 'v' + version;
+
+    elInput.hidden = false;
+    elInput.addEventListener('input', analyze);
+    analyze();
+}
+
+function analyze() {
+    const text = elInput.value;
+    worker.postMessage({ type: 'analyze', text });
+}
+
+function analyzed(tokenInfos: TokenInfo[], text: string) {
+    while (elResultTable.rows.length > 1) {
+        elResultTable.deleteRow(1);
+    }
+
+    for (const tokenInfo of tokenInfos) {
+        const surface = text.substring(
+            tokenInfo.position,
+            tokenInfo.position + tokenInfo.length
+        );
+
+        const row = elResultTable.insertRow();
+        row.insertCell().innerText = tokenInfo.position.toString();
+        row.insertCell().innerText = tokenInfo.length.toString();
+        row.insertCell().innerText = surface;
+        row.insertCell().innerText = tokenInfo.str;
+        row.insertCell().innerText = tokenInfo.tag;
+        row.insertCell().innerText = tokenInfo.score.toString();
+    }
+
+    elResultTable.hidden = tokenInfos.length === 0;
+}
diff --git a/bindings/wasm/package-demo/src/main.ts b/bindings/wasm/package-demo/src/main.ts
diff --git a/bindings/wasm/package-demo/src/style.css b/bindings/wasm/package-demo/src/style.css
@@ -1,11 +1,77 @@
-:root {
-	background-color: #ffffff;
-	color: #000000;
+* {
+    box-sizing: border-box;
 }
 
-@media (prefers-color-scheme: dark) {
-    :root {
-        color: #efefef;
-        background-color: #101418;
-    }
+html {
+    display: flex;
+    justify-content: center;
+}
+
+body {
+    width: min(100%, 800px);
+    padding: 1rem;
+
+    background-color: #ffffff;
+    color: #000000;
+
+    font-family: "Noto Sans KR", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 400;
+    font-style: normal;
+
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+}
+
+.title-wrap {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.logo {
+    width: 15rem;
+}
+
+#input {
+    width: 100%;
+    padding: 0.5rem;
+    font-size: 1rem;
+
+    appearance: none;
+    border: 1px solid #ccc;
+    border-radius: 0.25rem;
+}
+
+#input:focus {
+    outline: 2px solid #0078d4;
+}
+
+#result {
+    width: 100%;
+    border-collapse: collapse;
+    border-style: hidden;
+    border-radius: 0.25rem;
+    box-shadow: 0 0 0 1px #ccc;
+    padding: 0;
+}
+
+#result tr:not(:first-child) {
+    border-top: 1px solid #ccc;
+}
+
+#result td,
+#result th {
+    padding: 0.5rem;
+    border: none;
+}
+
+#result th {
+    text-align: left;
+    font-weight: 400;
+    background-color: #f0f0f0;
 }
diff --git a/bindings/wasm/package-demo/src/worker.ts b/bindings/wasm/package-demo/src/worker.ts
@@ -0,0 +1,50 @@
+import { KiwiBuilder, Kiwi, TokenInfo } from 'kiwi-nlp';
+import kiwiWasmPath from 'kiwi-nlp/dist/kiwi-wasm.wasm?url';
+import { modelFiles } from './modelFiles';
+
+let kiwiBuilder: KiwiBuilder | null = null;
+let kiwi: Kiwi | null = null;
+let version: string | null = null;
+
+export type WorkerRequest =
+    | { type: 'init' }
+    | { type: 'analyze'; text: string };
+export type WorkerResponse =
+    | { type: 'inited'; version: string }
+    | { type: 'analyzed'; result: TokenInfo[]; text: string };
+
+function sendResponse(response: WorkerResponse) {
+    self.postMessage(response);
+}
+
+async function init() {
+    kiwiBuilder = await KiwiBuilder.create(kiwiWasmPath);
+    version = kiwiBuilder.version();
+    kiwi = await kiwiBuilder.build({ modelFiles });
+
+    sendResponse({ type: 'inited', version });
+}
+
+function analyze(text: string) {
+    if (!kiwi) {
+        throw new Error('Kiwi is not initialized');
+    }
+
+    const result = kiwi.tokenize(text);
+    sendResponse({ type: 'analyzed', result, text });
+}
+
+self.onmessage = (event) => {
+    const request: WorkerRequest = event.data;
+
+    switch (request.type) {
+        case 'init':
+            init();
+            break;
+        case 'analyze':
+            analyze(request.text);
+            break;
+        default:
+            throw new Error('Unknown request type');
+    }
+};
diff --git a/bindings/wasm/package/src/kiwi-builder.ts b/bindings/wasm/package/src/kiwi-builder.ts
@@ -120,4 +120,12 @@ export class KiwiBuilder {
             },
         }) as Kiwi;
     }
+
+    /**
+     * Get the version of the Kiwi wasm module.
+     * @returns The version of the Kiwi wasm module.
+     */
+    version(): string {
+        return this.api.cmd({ method: 'version', args: [] }) as string;
+    }
 }