load model on page load, add new loading functionality

roboflow · Mar 13, 2023 · dc45e3e · dc45e3e
1 parent d1ba020
commit dc45e3e
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 41 deletions.
diff --git a/public/script.js b/public/script.js
@@ -64,9 +64,6 @@ var color_choices = [
   "#CCCCCC",
 ];
 
-var current_model_name = "microsoft-coco";
-const API_KEY = "rf_U7AD2Mxh39N7jQ3B6cP8xAyufLH3";
-const CONFIDENCE_THRESHOLD = 0.7;
 const CAMERA_ACCESS_URL =
   "https://uploads-ssl.webflow.com/5f6bc60e665f54545a1e52a5/63d40cd1de273045d359cf9a_camera-access2.png";
 const LOADING_URL =
@@ -293,7 +290,7 @@ function drawBoundingBoxes(
   }
 }
 
-function drawBbox(canvas, ctx, video) {
+function drawBbox(ctx, video) {
   ctx.beginPath();
   var [sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight, scalingRatio] =
     getCoordinates(video);
@@ -350,7 +347,6 @@ function detectFrame() {
     if (!model) return requestAnimationFrame(detectFrame);
     // clear canvas
     if (!canvas_painted) {
-        console.log("painting canvas 1");
         var video_start = document.getElementById("video1");
         canvas.style.width = video_start.width + "px";
         canvas.style.height = video_start.height + "px";
@@ -370,7 +366,7 @@ function detectFrame() {
     model.detect(video).then(function (predictions) {
         requestAnimationFrame(detectFrame);
             ctx.clearRect(0, 0, canvas.width, canvas.height);
-            drawBbox(canvas, ctx, video);
+            drawBbox(ctx, video);
             no_detection_count = processFrame(predictions, canvas, ctx, model, no_detection_count);
         });
     } else {
@@ -379,11 +375,10 @@ function detectFrame() {
 }
 
 function webcamInference() {
-  setImageState(LOADING_URL, "video_canvas");
+  // show loading_picture
+  var loading_picture = document.getElementById("loading_picture");
+  loading_picture.style.display = "block";
   webcamLoop = true;
-  var disclaimer = document.getElementById("disclaimer");
-  disclaimer.style.display = "none";
-  document.getElementById("video_canvas").style.display = "block";
 
   if (
     document.getElementById("video1") &&
@@ -427,32 +422,12 @@ function webcamInference() {
             canvas.style.height = height + "px";
             canvas.width = width;
             canvas.height = height;
+            var disclaimer = document.getElementById("disclaimer");
+            disclaimer.style.display = "none";
+            document.getElementById("video_canvas").style.display = "block";
+            loading_picture.style.display = "none";
 
-            roboflow
-              .auth({
-                publishable_key: API_KEY,
-              })
-              .load({
-                model: current_model_name,
-                version: current_model_version,
-              })
-              .then(function (m) {
-                model = m;
-                // images must have confidence > 0.7 to be returned by the model
-                m.configure({ threshold: CONFIDENCE_THRESHOLD });
-                var result = detectFrame();
-
-                if (result) {
-                    m.teardown();
-                    // disable webcam
-                    stream.getTracks().forEach(function (track) {
-                        track.stop();
-                        });
-                }
-              })
-              .catch(function (err) {
-                setImageState(CAMERA_ACCESS_URL, "video_canvas");
-              });
+            detectFrame();
         };
 
         ctx.scale(1, 1);

diff --git a/views/entry.ejs b/views/entry.ejs
@@ -29,20 +29,17 @@
                     </div>
                 <% } %>
                 <section id="opening">
-                    <h1>The $1000 Roboflow SXSW Scavenger Hunt 🗺️</h1>
+                    <h1>The $1000 SXSW Scavenger Hunt 🗺️</h1>
                     <p>
                         Welcome to the Roboflow SXSW Scavenger Hunt.
                     </p>
                     <p>
-                        Your mission, should you choose to accept, is to find all objects on the scavenger list.
-                    </p>
-                    <p>
-                        You can use your browser webcam to scan a room for objects. For each five objects you find, you'll receive an entry into the $1,000 contest. There are 25 objects to find.
+                        Use your camera to take photos of 5 objects to enter. The more objects you find, the more chances you earn to win $1000.
                     </p>
                     <p>
                         Good luck!
                     </p>
-                    <button onclick="toggleRegister()">Start</button>
+                    <button onclick="toggleRegister()">Play the Game</button>
                     <button onclick="toggleLogin()" class="full_size_button_aqua">Log In</button>
                 </section>
                 <section id="register">

diff --git a/views/index.ejs b/views/index.ejs
@@ -19,6 +19,27 @@
             <% } %>
         </script>
         <script src="https://cdn.roboflow.com/0.2.26/roboflow.js"></script>
+        <script async>
+            var current_model_name = "microsoft-coco";
+            const API_KEY = "rf_U7AD2Mxh39N7jQ3B6cP8xAyufLH3";
+            const CONFIDENCE_THRESHOLD = 0.7;
+            var current_model_version = 9;
+
+            var model = roboflow
+              .auth({
+                publishable_key: API_KEY,
+              })
+              .load({
+                model: current_model_name,
+                version: current_model_version,
+              })
+              .then(function (m) {
+                model = m;
+                // images must have confidence > 0.7 to be returned by the model
+                m.configure({ threshold: CONFIDENCE_THRESHOLD });
+                detectFrame();
+              });
+        </script>
     </head>
     <body>
         <section id="desktop_message">
@@ -36,6 +57,11 @@
             <section id="scanning">
                 <canvas width="640" height="480" id="video_canvas"></canvas>
             </section>
+            <img
+                src="https://uploads-ssl.webflow.com/5f6bc60e665f54545a1e52a5/63d40cd2210b56e0e33593c7_loading-camera2.gif"
+                id="loading_picture"
+                style="display: none; width: 100%; height: auto;"
+            />
             <main>
                 <% if (error) { %>
                     <div class="error">