Spaces:

chedia-dhaoui
/

fruits

Running

App Files Files Community

chedia-dhaoui commited on Jun 13, 2024

Commit

e6c99be

verified ·

1 Parent(s): ca2ad9c

Upload index.html

Browse files

Files changed (1) hide show

index.html +49 -8

index.html CHANGED Viewed

@@ -7,13 +7,54 @@
 		<link rel="stylesheet" href="style.css" />
 	</head>
 	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
 		</div>
 	</body>
-</html>

 		<link rel="stylesheet" href="style.css" />
 	</head>
 	<body>
+		<div class="card" style="text-align: center;">
+			<h1>Teachable Machine Image Model</h1>
+			<button type="button" id="startbutton" style="padding: 10px; margin-bottom:20px;" onclick="init()">Start</button>
+			<div id="webcam-container"></div>
+			<div id="label-container"></div>
+			<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
+			<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@latest/dist/teachablemachine-image.min.js"></script>
+			<script type="text/javascript">
+			    // the link to your model provided by Teachable Machine export panel
+			    const URL = "./tm-my-image-model/";
+			    let model, webcam, labelContainer, maxPredictions;
+			    // Load the image model and setup the webcam
+			    async function init() {
+			    	document.getElementById("startbutton").style.visibility = "hidden";
+			        const modelURL = URL + "model.json";
+			        const metadataURL = URL + "metadata.json";
+			        // load the model and metadata
+			        model = await tmImage.load(modelURL, metadataURL);
+			        maxPredictions = model.getTotalClasses();
+			        // Convenience function to setup a webcam
+			        const flip = true; // whether to flip the webcam
+			        webcam = new tmImage.Webcam(200, 200, flip); // width, height, flip
+			        await webcam.setup(); // request access to the webcam
+			        await webcam.play();
+			        window.requestAnimationFrame(loop);
+			        // append elements to the DOM
+			        document.getElementById("webcam-container").appendChild(webcam.canvas);
+			        labelContainer = document.getElementById("label-container");
+			        for (let i = 0; i < maxPredictions; i++) { // and class labels
+			            labelContainer.appendChild(document.createElement("div"));
+			        }
+			    }
+			    async function loop() {
+			        webcam.update(); // update the webcam frame
+			        await predict();
+			        window.requestAnimationFrame(loop);
+			    }
+			    // run the webcam image through the image model
+			    async function predict() {
+			        // predict can take in an image, video or canvas html element
+			        const prediction = await model.predict(webcam.canvas);
+			        for (let i = 0; i < maxPredictions; i++) {
+			            const classPrediction =
+			                prediction[i].className + ": " + prediction[i].probability.toFixed(2);
+			            labelContainer.childNodes[i].innerHTML = classPrediction;
+			        }
+			    }
+			</script>
 		</div>
 	</body>
+</html>