chore: improve UI and implements all functionality

Signed-off-by: izzalDev <[email protected]>
izzalDev · Aug 20, 2024 · ddba4b4 · ddba4b4
1 parent 84fe817
commit ddba4b4
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 39 deletions.
diff --git a/web/index.html b/web/index.html
@@ -8,47 +8,53 @@
     <title>Iris Classification</title>
   </head>
   <body>
-    <div id="app">
-      <div>
-        <form>
-          <div>
-            <label for="sepal-length">Sepal Lenght (cm)</label>
+    <div id="app" class="h-dvh w-dvw flex justify-center items-center bg-[url('./background.jpg')] bg-cover bg-center">
+      <form id="form">
+      <div class="rounded-3xl p-10 backdrop-blur-lg shadow-2xl w-[400px] brightness-105">
+          <div class="mb-5">
+            <label for="sepal-length" class="text-white block mb-2 font-medium">Sepal Lenght (cm)</label>
             <input
               type="number"
               id="sepal-length"
               placeholder="Sepal Lenght"
+              class="shadow-sm opacity-30 border border-gray-300 rounded-lg p-2 block w-full font-bold [&::-webkit-inner-spin-button]:appearance-none"
               required
             />
           </div>
-          <div>
-            <label for="sepal-width">Sepal Width (cm)</label>
+          <div class="mb-5">
+            <label for="sepal-width" class="text-white block mb-2 font-medium">Sepal Width (cm)</label>
             <input
               type="number"
               id="sepal-width"
-              class="[&::-webkit-inner-spin-button]:appearance-none"
               placeholder="Sepal Width"
+              class="shadow-sm opacity-30 border border-gray-300 rounded-lg p-2 block w-full font-bold [&::-webkit-inner-spin-button]:appearance-none"
               required
             />
           </div>
-          <div>
-            <label for="petal-length">Petal Lenght (cm)</label>
+          <div class="mb-5">
+            <label for="petal-length" class="text-white block mb-2 font-medium">Petal Lenght (cm)</label>
             <input
               type="number"
               id="petal-length"
               placeholder="Petal Lenght"
+              class="shadow-sm opacity-30 border border-gray-300 rounded-lg p-2 block w-full font-bold [&::-webkit-inner-spin-button]:appearance-none"
               required
             />
           </div>
           <div class="mb-5">
-            <label for="petal-width">Petal Width (cm)</label>
+            <label for="petal-width" class="text-white block mb-2 font-medium">Petal Width (cm)</label>
             <input
               type="number"
-              id="sepal-width"
+              id="petal-width"
               placeholder="Petal Width"
+              class="shadow-sm opacity-30 border border-gray-300 rounded-lg p-2 block w-full font-bold [&::-webkit-inner-spin-button]:appearance-none"
               required
             />
           </div>
-          <button type="submit">Register new account</button>
+          <div class="flex flex-col items-center">
+            <input type="submit" id="btn-predict" class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-md" value="Predict">
+            <div class="mt-5 text-2xl text-white font-bold drop-shadow-xl" id="result"></div>
+          </div>
         </form>
       </div>
     </div>

diff --git a/web/public/background.jpg b/web/public/background.jpg
diff --git a/web/src/main.ts b/web/src/main.ts
@@ -2,38 +2,29 @@ import "./style.css";
 import * as ort from "onnxruntime-web";
 
 async function main(): Promise<void> {
+  const result: HTMLDivElement = document.getElementById("result") as HTMLDivElement;
+  const form: HTMLFormElement = document.getElementById("form") as HTMLFormElement;
+  const formInput: HTMLInputElement[] = ["sepal-length", "sepal-width", "petal-length", "petal-width"]
+  .map(id => document.getElementById(id) as HTMLInputElement);
+
   try {
     // Membuat sesi baru dan memuat model ONNX tertentu.
-    const session: ort.InferenceSession = await ort.InferenceSession.create(
-      "./model.onnx",
-    );
+    const session: ort.InferenceSession = await ort.InferenceSession.create("./model.onnx");
 
-    // Menyiapkan input. Tensor memerlukan TypedArray yang sesuai sebagai data.
-    const input: ort.Tensor = new ort.Tensor(
-      "float32",
-      [5.1, 3.5, 1.4, 0.2],
-      [1, 4]
-    );
+    form.addEventListener("submit", async (event) => {
+      event.preventDefault();
+      // Memasukkan input dan menjalankan model
+      const output: ort.InferenceSession.OnnxValueMapType = await session.run({X: new ort.Tensor(
+        "float32",
+        formInput.map(input => parseFloat(input.value)),
+        [1, 4]
+      )});
 
-    // Memasukkan input dan menjalankan model
-    const output: ort.InferenceSession.OnnxValueMapType = await session.run({
-      X: input,
+      result.innerText = output.label.data[0].toString();
     });
-
-    // Membaca hasil dari output
-    const label: ort.Tensor = output.label;
-    const probabilities: ort.Tensor = output.probabilities;
-
-    const maxProbability: number = Math.max(
-      ...(probabilities.data as Float32Array)
-    );
-
-    console.log(
-      `Label: ${label.data} Probabilitas Maksimum: ${maxProbability * 100}%`
-    );
   } catch (e) {
-    document.write(`failed to inference ONNX model: ${e}.`);
+    document.write(`Error: ${e}.`);
   }
 }
 
-main();
+document.addEventListener("DOMContentLoaded", main);