From 6980045ed0cc8d485c0b52254984637387222a3a Mon Sep 17 00:00:00 2001
From: gaiborjosue <gaiborjimenezjosue@gmail.com>
Date: Wed, 6 Mar 2024 19:19:55 -0500
Subject: [PATCH] feat(melanoma): Updated style and hint

---
 .gitignore           |  1 +
 examples/melanoma.js | 21 +++++++++++++++------
 index.html           |  4 ++--
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/.gitignore b/.gitignore
index 18834e2a..f7fb75e2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -121,6 +121,7 @@ dist
 
 # Stores VSCode versions used for testing VSCode extensions
 .vscode-test
+settings.json
 
 # yarn v2
 .yarn/cache
diff --git a/examples/melanoma.js b/examples/melanoma.js
index 6c39cb45..cb0ecc2f 100644
--- a/examples/melanoma.js
+++ b/examples/melanoma.js
@@ -9,9 +9,10 @@ function tryRun() {
 
 script = document.createElement("script");
 script.type = "text/javascript";
-// script.src = "https://boostlet.org/dist/boostlet.min.js";
+
+script.src = "https://boostlet.org/dist/boostlet.min.js";
 // script.src = "http://localhost:5500/dist/boostlet.min.js";
-script.src = "https://gaiborjosue.github.io/boostlet/dist/boostlet.min.js"
+// script.src = "https://gaiborjosue.github.io/boostlet/dist/boostlet.min.js"
 script.onload = function() {
   boostletLoaded = true;
   tryRun();
@@ -35,6 +36,8 @@ async function run() {
   Boostlet.init();
 
   getImage();
+
+
 }
 
 
@@ -56,13 +59,16 @@ async function predict(file) {
     
     // Log if it is a melanoma or not, index 0 is not melanoma, index 1 is melanoma, the veredict is the highest value, the log should say the probability of the prediction
     if (prediction[0] > prediction[1]) {
-      Boostlet.hint("The image is not a melanoma with a probability of: " + prediction[0], 3000);
+      Boostlet.hint("The image is not a melanoma with a probability of: " + prediction[0]);
     } else {
-      Boostlet.hint("The image is a melanoma with a probability of: " + prediction[1], 3000);
+      Boostlet.hint("The image is a melanoma with a probability of: " + prediction[1]);
     }
-  }
-  
 
+    BoostletHint.onclick = function () {
+      // destroy on click
+      window.document.body.removeChild(BoostletHint);
+    }
+  }
 }
 
 // Get an image from the current page
@@ -80,6 +86,8 @@ function getImage() {
   div.innerHTML = "Drop an image here!";
   div.style.zIndex = "99999";
   div.style.backgroundColor = "#fff";
+  div.style.textAlign = "center";
+  div.style.fontSize = "20px";
   
 
   document.body.appendChild(div);
@@ -95,6 +103,7 @@ function getImage() {
       dropzone.ondrop = (event) => {
         event.preventDefault();
         dropzone.style.backgroundColor = "#fff";
+
         const file = event.dataTransfer.files[0];
         if (file && file.type.startsWith("image/")) {
           predict(file);
diff --git a/index.html b/index.html
index 7fcd9097..8c51c450 100644
--- a/index.html
+++ b/index.html
@@ -232,8 +232,8 @@
 
         var examples = ['sobel.js', 'segmentanything.js', 'imageCaptioning.js', 'plotly.js', 'trako.js', 'melanoma.js'];
 
-        // var baseurl = 'https://raw.githubusercontent.com/mpsych/boostlet/main/examples/';
-        var baseurl = 'https://raw.githubusercontent.com/gaiborjosue/boostlet/melanoma/examples/';
+        var baseurl = 'https://raw.githubusercontent.com/mpsych/boostlet/main/examples/';
+        // var baseurl = 'https://raw.githubusercontent.com/gaiborjosue/boostlet/melanoma/examples/';
         // var baseurl = 'http://localhost:5500/examples/';