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;
+ }
 }