diff --git a/index.js b/index.js index 1a173af..59405a5 100644 --- a/index.js +++ b/index.js @@ -1,25 +1,51 @@ -function getSimilarityOfInput() { - document.getElementById("get-similarity").style.display = "none"; - document.getElementById("spinner").style.visibility = "visible"; - document.getElementById("input").setAttribute("disabled", true); - document.getElementById("input").classList.add("disabled"); - const sentence1 = document.getElementById("sentence1").value; - const sentence2 = document.getElementById("input").value; - useModel(sentence1, sentence2, showOutput); +function $(selectorString, scope = document) { + return scope.querySelector(selectorString); } -function showOutput(similarity) { +function getSimilarityOfInput(scope = document, callback) { + if ($("#get-similarity, .get-similarity", scope)) { + $("#get-similarity, .get-similarity", scope).style.display = "none"; + } + if ($("#spinner, .spinner", scope)) { + $("#spinner, .spinner", scope).style.visibility = "visible"; + } + $("#input, .input", scope)?.setAttribute("disabled", true); + $("#input, .input", scope)?.classList.add("disabled"); + const sentence1 = $("#sentence1, .sentence1", scope)?.value; + const sentence2 = $("#input, .input, .sentence2", scope)?.value; + if (sentence1 && sentence2) { + useModel(sentence1, sentence2, (similarity) => { + showOutput(similarity, scope); + if (callback) callback(); + }); + } +} + +function showOutput(similarity, scope = document) { const percent = similarity * 100; - document.getElementById("similarity").innerText = get2Decimals(percent) + "%"; - document.getElementById("output").style.visibility = "visible"; - document.getElementById("get-similarity").style.display = "block"; - document.getElementById("spinner").style.visibility = "hidden"; - document.getElementById("input").removeAttribute("disabled"); - document.getElementById("input").classList.remove("disabled"); + if ($("#similarity, .similarity", scope)) { + $("#similarity, .similarity", scope).innerText = + getNDecimals(percent, 0) + "%"; + } + if ($("#output, .output", scope)) { + $("#output, .output", scope).style.visibility = "visible"; + } + if ($("#get-similarity, .get-similarity", scope)) { + $("#get-similarity, .get-similarity", scope).style.display = "block"; + } + if ($("#spinner, .spinner", scope)) { + $("#spinner, .spinner", scope).style.visibility = "hidden"; + } + if ($("#input, .input", scope)) { + $("#input, .input", scope).removeAttribute("disabled"); + } + if ($("#input, .input", scope)) { + $("#input, .input", scope).classList.remove("disabled"); + } } -function get2Decimals(number) { - return Math.round(number * 100) / 100; +function getNDecimals(number, n) { + return Math.round(number * 10 ** n) / 10 ** n; } // /** diff --git a/package.json b/package.json index 2248c23..690b2ca 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,8 @@ "devDependencies": {}, "scripts": { "dev": "npm run start", - "start": "open index.html" + "start": "open index.html", + "quiz": "open quiz_test/index.html" }, "author": "hchiam", "license": "MIT", diff --git a/quiz_test/README.md b/quiz_test/README.md new file mode 100644 index 0000000..ae6aece --- /dev/null +++ b/quiz_test/README.md @@ -0,0 +1,7 @@ +# Just experimenting with an example quiz + +In the text-similarity-test folder: + +```sh +npm run quiz +``` diff --git a/quiz_test/index.html b/quiz_test/index.html new file mode 100644 index 0000000..0e97e24 --- /dev/null +++ b/quiz_test/index.html @@ -0,0 +1,143 @@ + + + + + + TensorFlow.js Text Similarity Example + + + + + + + + + + + +
+

+ Q1: What is red plus blue? Respond with a one-word sentence with full + punctuation. +

+ Your answer: + + + +
+ +
+

Q2: What's one plus one? Just provide the numerical value.

+ Your answer: + + + +
+ +
+

+ Q3: In "Avatar the Last Airbender", there are 4 elements mentioned in + the intro. What are they? Answer with one sentence with full + punctuation, and each element separated by a comma, in the order spoken + in the intro. +

+ Your answer: + + + +
+ + + + + + diff --git a/style.css b/style.css index bb1328c..ada64a1 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,4 @@ +.disabled:focus, .disabled:hover { background: rgb(32, 32, 32); color: whitesmoke;