fixed styling

index.js

@@ -1,4 +1,4 @@
-import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.10.1';
+import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2';
 
 // Since we will download the model from the Hugging Face Hub, we can skip the local model check
 env.allowLocalModels = false;
@@ -7,14 +7,18 @@ env.allowLocalModels = false;
 const status = document.getElementById('status');
 const msg = document.getElementById('message');
 const checkMessage = document.getElementById('checkMessage');
-// Create a new object detection pipeline
+// Create a new pipeline
 status.textContent = 'Loading model...';
-const classifier = await pipeline('text-classification', 'bajrangCoder/roberta_spam_onnx_quantised');
-//const classifier = await pipeline('text-classification', 'bajrangCoder/roberta_spam_onnx');
+const pipe = await pipeline('text-classification', 'bajrangCoder/roberta_spam_onnx');
 status.textContent = 'Ready';
 
-checkMessage.onclick = async function (){
-  status.textContent = 'Analysing...';
-  const output = await classifier(msg.value);
-  status.textContent = JSON.stringify(output);
+checkMessage.onclick = async () => {
+  try{
+    status.textContent = 'Analysing...';
+    const output = await pipe(msg.value);
+    console.log(output)
+    status.textContent = JSON.stringify(output);
+  } catch(err) {
+    console.log("Error: ", err);
+  }
 }

style.css

@@ -1,25 +1,50 @@
 * {
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    font-family: sans-serif;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  font-family: sans-serif;
 }
 
 html,
 body {
-    height: 100%;
+  height: 100%;
   color: #000;
   background: #fff;
 }
 
 body {
-    padding: 32px;
+  padding: 32px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
-body,
-#container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+#status {
+  padding: 10px 12px;
+  background: cornsilk;
+  border: 2px dashed #ffdb4f;
+  border-radius: 8px;
+  font-size: 15px;
+  width: 100%;
+  text-align: center;
+}
+
+button {
+  padding: 10px 12px;
+  border-radius: 4px;
+  background: seagreen;
+  border: none;
+  margin: 10px 15px;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+textarea {
+  outline: none;
+  font-size: 15px;
+  font-weight: 500;
+  border-radius: 6px;
+  padding: 10px 12px;
+  margin-top: 1.5rem;
 }