Duplicate from capjamesg/roboflow

.gitattributes

@@ -0,0 +1,34 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

README.md

@@ -0,0 +1,11 @@
+---
+title: Roboflow
+emoji: 🌍
+colorFrom: green
+colorTo: indigo
+sdk: static
+pinned: false
+duplicated_from: capjamesg/roboflow
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.js

@@ -0,0 +1,200 @@
+// To display predictions, this app has:
+// 1. A video that shows a feed from the user's webcam
+// 2. A canvas that appears over the video and shows predictions
+// When the page loads, a user is asked to give webcam permission.
+// After this happens, the model initializes and starts to make predictions
+// On the first prediction, an initialiation step happens in detectFrame()
+// to prepare the canvas on which predictions are displayed.
+
+var bounding_box_colors = {};
+
+var user_confidence = 0.6;
+
+// Update the colors in this list to set the bounding box colors
+var color_choices = [
+  "#C7FC00",
+  "#FF00FF",
+  "#8622FF",
+  "#FE0056",
+  "#00FFCE",
+  "#FF8000",
+  "#00B7EB",
+  "#FFFF00",
+  "#0E7AFE",
+  "#FFABAB",
+  "#0000FF",
+  "#CCCCCC",
+];
+
+var canvas_painted = false;
+var canvas = document.getElementById("video_canvas");
+var ctx = canvas.getContext("2d");
+
+var model = null;
+
+
+function detectFrame() {
+  // On first run, initialize a canvas
+  // On all runs, run inference using a video frame
+  // For each video frame, draw bounding boxes on the canvas
+  if (!model) return requestAnimationFrame(detectFrame);
+
+  model.detect(video).then(function(predictions) {
+
+    if (!canvas_painted) {
+      var video_start = document.getElementById("video1");
+      canvas.style.width = video_start.width + "px";
+      canvas.style.height = video_start.height + "px";
+      canvas.width = video_start.width;
+      canvas.height = video_start.height;
+      // adjust top to margin position of video
+
+      canvas.top = video_start.top;
+      canvas.left = video_start.left;
+      canvas.style.top = video_start.top + "px";
+      canvas.style.left = video_start.left + "px";
+      canvas.style.position = "absolute";
+      video_start.style.display = "block";
+      canvas.style.display = "absolute";
+      canvas_painted = true;
+
+      var loading = document.getElementById("loading");
+      loading.style.display = "none";
+    }
+    requestAnimationFrame(detectFrame);
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    if (video) {
+      drawBoundingBoxes(predictions, ctx)
+    }
+  });
+}
+
+function drawBoundingBoxes(predictions, ctx) {
+  // For each prediction, choose or assign a bounding box color choice,
+  // then apply the requisite scaling so bounding boxes appear exactly
+  // around a prediction.
+
+  // If you want to do anything with predictions, start from this function.
+  // For example, you could display them on the web page, check off items on a list,
+  // or store predictions somewhere.
+
+  for (var i = 0; i < predictions.length; i++) {
+    var confidence = predictions[i].confidence;
+
+    console.log(user_confidence)
+
+    if (confidence < user_confidence) {
+      continue
+    }
+
+    if (predictions[i].class in bounding_box_colors) {
+      ctx.strokeStyle = bounding_box_colors[predictions[i].class];
+    } else {
+      var color =
+        color_choices[Math.floor(Math.random() * color_choices.length)];
+      ctx.strokeStyle = color;
+      // remove color from choices
+      color_choices.splice(color_choices.indexOf(color), 1);
+
+      bounding_box_colors[predictions[i].class] = color;
+    }
+
+    var prediction = predictions[i];
+    var x = prediction.bbox.x - prediction.bbox.width / 2;
+    var y = prediction.bbox.y - prediction.bbox.height / 2;
+    var width = prediction.bbox.width;
+    var height = prediction.bbox.height;
+
+    ctx.rect(x, y, width, height);
+
+    ctx.fillStyle = "rgba(0, 0, 0, 0)";
+    ctx.fill();
+
+    ctx.fillStyle = ctx.strokeStyle;
+    ctx.lineWidth = "4";
+    ctx.strokeRect(x, y, width, height);
+    ctx.font = "25px Arial";
+    ctx.fillText(prediction.class + " " + Math.round(confidence * 100) + "%", x, y - 10);
+  }
+}
+
+function webcamInference() {
+  // Ask for webcam permissions, then run main application.
+  var loading = document.getElementById("loading");
+  loading.style.display = "block";
+
+  navigator.mediaDevices
+    .getUserMedia({ video: { facingMode: "environment" } })
+    .then(function(stream) {
+      video = document.createElement("video");
+      video.srcObject = stream;
+      video.id = "video1";
+
+      // hide video until the web stream is ready
+      video.style.display = "none";
+      video.setAttribute("playsinline", "");
+
+      document.getElementById("video_canvas").after(video);
+
+      video.onloadedmetadata = function() {
+        video.play();
+      }
+
+      // on full load, set the video height and width
+      video.onplay = function() {
+        height = video.videoHeight;
+        width = video.videoWidth;
+
+        // scale down video by 0.75
+
+        height = height * 0.75;
+        width = width * 0.75;
+
+        width = Math.round(width);
+        height = Math.round(height);
+
+        video.setAttribute("width", width);
+        video.setAttribute("height", height);
+        video.style.width = width + "px";
+        video.style.height = height + "px";
+
+        canvas.style.width = width + "px";
+        canvas.style.height = height + "px";
+        canvas.width = width;
+        canvas.height = height;
+
+        document.getElementById("video_canvas").style.display = "block";
+      };
+
+      ctx.scale(1, 1);
+
+      // Load the Roboflow model using the publishable_key set in index.html
+      // and the model name and version set at the top of this file
+      roboflow
+        .auth({
+          publishable_key: publishable_key,
+        })
+        .load({
+          model: MODEL_NAME,
+          version: MODEL_VERSION,
+        })
+        .then(function(m) {
+          model = m;
+          // Images must have confidence > CONFIDENCE_THRESHOLD to be returned by the model
+          m.configure({ threshold: CONFIDENCE_THRESHOLD });
+          // Start inference
+          detectFrame();
+        });
+    })
+    .catch(function(err) {
+      console.log(err);
+    });
+}
+
+function changeConfidence () {
+  user_confidence = document.getElementById("confidence").value / 100;
+}
+
+document.getElementById("confidence").addEventListener("input", changeConfidence);
+
+webcamInference();

index.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <title>Roboflow + Hugging Face Example</title>
+
+  <!-- Load roboflow.js, the script that will handle loading and running our computer vision model in the browser -->
+  <script src="https://cdn.roboflow.com/0.2.25/roboflow.js"></script>
+
+  <link rel="stylesheet" href="/styles.css" />
+
+  <script>
+    // Replace the key below with your Roboflow publishable key
+    var publishable_key = "rf_U7AD2Mxh39N7jQ3B6cP8xAyufLH3";
+
+    // Change these values to set your model name, version, and the
+    // confidence threshold that must be met for the model to return
+    // a prediction.
+
+    // We recommend setting a low CONFIDENCE_THRESHOLD value while testing
+    // and filtering out predictions by confidence level using the
+    //"Prediction Confidence %" filter
+
+    const CONFIDENCE_THRESHOLD = 0.1;
+    const MODEL_NAME = "microsoft-coco";
+    const MODEL_VERSION = 9;
+  </script>
+</head>
+
+<body>
+  <main>
+    <h1>Roboflow + Hugging Face Example 🚀</h1>
+    <p>Roboflow enables you to build and run custom computer vision models in your browser, on your device, and via API.
+    </p>
+    <p>The below example runs <a href="https://universe.roboflow.com/jacob-solawetz/microsoft-coco">Microsoft's
+        COCO</a> model to identify common objects, which is one of 50,000 open source models ready to use on <a
+        href="https://universe.roboflow.com">Roboflow Universe</a></p>
+
+    <p>Using the demo below, you can identify <a href="https://universe.roboflow.com/jacob-solawetz/microsoft-coco">80
+        different objects</a> using your webcam, from people to chairs to cups.</p>
+
+    <p id="loading">Loading...</p>
+
+    <!-- The canvas below is required -->
+    <section class="infer-widget">
+      <canvas width="640" height="480" id="video_canvas"></canvas>
+    </section>
+
+    <section id="settings">
+      <label for="confidence">Prediction Confidence %</label><br>
+      <input type="range" min="1" max="100" value="60" class="slider" id="confidence">
+    </section>
+
+    <section class="links">
+      <a href="https://blog.roboflow.com/getting-started-with-roboflow/" class="styled-button">Build a Custom Model</a>
+      <a href="https://universe.roboflow.com" class="styled-button styled-button-turqouise">Explore 50k+
+        Models and Datasets</a>
+    </section>
+
+    <!-- Load our application logic -->
+    <script src="/app.js"></script>
+  </main>
+</body>
+
+</html>

style.css

@@ -0,0 +1,28 @@
+body {
+	padding: 2rem;
+	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+}
+
+h1 {
+	font-size: 16px;
+	margin-top: 0;
+}
+
+p {
+	color: rgb(107, 114, 128);
+	font-size: 15px;
+	margin-bottom: 10px;
+	margin-top: 5px;
+}
+
+.card {
+	max-width: 620px;
+	margin: 0 auto;
+	padding: 16px;
+	border: 1px solid lightgray;
+	border-radius: 16px;
+}
+
+.card p:last-child {
+	margin-bottom: 0;
+}

styles.css

@@ -0,0 +1,75 @@
+html, body {
+  height: 100%;
+  width: 100%;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+p, a {
+  line-height: 1.5em;
+}
+
+#loading {
+  display: none;
+}
+
+#settings {
+  margin-top: 30px;
+  margin-bottom: 30px;
+}
+
+h1, a {
+  color: #6706ce;
+}
+
+label {
+  font-weight: 50px;
+}
+
+a {
+  text-decoration: none;
+}
+
+main {
+  width: 40em;
+  margin: auto;
+  text-align: center;
+}
+
+.styled-button {
+  color: #fff;
+  text-align: center;
+  background-color: #6706ce;
+  border: 1px solid #6706ce;
+  border-radius: 4px;
+  padding: 13px 20px;
+  line-height: 1.5em;
+  text-decoration: none;
+  display: block;
+  margin: 10px;
+  margin-bottom: 25px;
+  width: 100%;
+}
+
+.styled-button-turqouise {
+  border: none;
+  color: black;
+  background-color: #00ffce;
+}
+
+.infer-widget {
+  width: 480px;
+  margin: auto;
+}
+
+.links {
+  display: flex;
+  text-align: center;
+}
+
+.links:first-child {
+  flex: 0 50%;
+}
+
+.links:last-child {
+  flex: 1 50%;
+}