Spaces:

Roboflow
/

web-demo

Running

App Files Files Community

web-demo / index.html

capjamesg

Duplicate from capjamesg/roboflow

8dddd4b about 2 years ago

raw

history blame

2.52 kB

	<!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>