chore: Remove unused code and update object detection logic

index.js

@@ -1,79 +0,0 @@
-import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';
-
-// Since we will download the model from the Hugging Face Hub, we can skip the local model check
-env.allowLocalModels = false;
-
-// Reference the elements that we will need
-const status = document.getElementById('status');
-const fileUpload = document.getElementById('upload');
-const imageContainer = document.getElementById('container');
-const example = document.getElementById('example');
-
-const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/city-streets.jpg';
-
-// Create a new object detection pipeline
-status.textContent = 'Loading model...';
-const detector = await pipeline('object-detection', 'Xenova/detr-resnet-50');
-status.textContent = 'Ready';
-
-example.addEventListener('click', (e) => {
-    e.preventDefault();
-    detect(EXAMPLE_URL);
-});
-
-fileUpload.addEventListener('change', function (e) {
-    const file = e.target.files[0];
-    if (!file) {
-        return;
-    }
-
-    const reader = new FileReader();
-
-    // Set up a callback when the file is loaded
-    reader.onload = e2 => detect(e2.target.result);
-
-    reader.readAsDataURL(file);
-});
-
-
-// Detect objects in the image
-async function detect(img) {
-    imageContainer.innerHTML = '';
-    imageContainer.style.backgroundImage = `url(${img})`;
-
-    status.textContent = 'Analysing...';
-    const output = await detector(img, {
-        threshold: 0.5,
-        percentage: true,
-    });
-    status.textContent = '';
-    output.forEach(renderBox);
-}
-
-// Render a bounding box and label on the image
-function renderBox({ box, label }) {
-    const { xmax, xmin, ymax, ymin } = box;
-
-    // Generate a random color for the box
-    const color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, 0);
-
-    // Draw the box
-    const boxElement = document.createElement('div');
-    boxElement.className = 'bounding-box';
-    Object.assign(boxElement.style, {
-        borderColor: color,
-        left: 100 * xmin + '%',
-        top: 100 * ymin + '%',
-        width: 100 * (xmax - xmin) + '%',
-        height: 100 * (ymax - ymin) + '%',
-    })
-
-    // Draw label
-    const labelElement = document.createElement('span');
-    labelElement.textContent = label;
-    labelElement.className = 'bounding-box-label';
-    labelElement.style.backgroundColor = color;
-
-    boxElement.appendChild(labelElement);
-    imageContainer.appendChild(boxElement);
-}

sketch.js

@@ -12,20 +12,22 @@ let statusP;
 
 // Preload function to load the default image and convert it to a base64 data URL
 function preload() {
-	defaultImg1 = loadImage('https://cors-anywhere-ajr.up.railway.app/https://hdwallpaperim.com/wp-content/uploads/2017/08/25/452511-street-street_view-cityscape-city.jpg', (img) => {
-		// Create an offscreen graphics object to draw the image for conversion
-		let offscreenGraphics = createGraphics(img.width, img.height);
-		offscreenGraphics.image(img, 0, 0);
-		// Convert the drawn image on canvas to Data URL (base64)
-		defaultImg1DataURL = offscreenGraphics.elt.toDataURL();
+	defaultImg1 = loadAndConvertImage('https://cors-anywhere-ajr.up.railway.app/https://hdwallpaperim.com/wp-content/uploads/2017/08/25/452511-street-street_view-cityscape-city.jpg', (dataURL) => {
+		defaultImg1DataURL = dataURL;
+	});
+
+	defaultImg2 = loadAndConvertImage('https://cors-anywhere-ajr.up.railway.app/https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fdirectoffice.com%2Fwp-content%2Fuploads%2F2024%2F06%2FOffice-Storage-Cabinets-2048x1366.jpg&f=1&nofb=1&ipt=f6b591aded06e6451a47bac25c3b6fe04aa285fb7796c7bc35b881e063a07a5f&ipo=images', (dataURL) => {
+		defaultImg2DataURL = dataURL;
 	});
+}
 
-	defaultImg2 = loadImage('https://cors-anywhere-ajr.up.railway.app/https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fdirectoffice.com%2Fwp-content%2Fuploads%2F2024%2F06%2FOffice-Storage-Cabinets-2048x1366.jpg&f=1&nofb=1&ipt=f6b591aded06e6451a47bac25c3b6fe04aa285fb7796c7bc35b881e063a07a5f&ipo=images', (img) => {
-		// Create an offscreen graphics object to draw the image for conversion
+// Function to load an image and convert it to a base64 data URL
+function loadAndConvertImage(url, callback) {
+	return loadImage(url, (img) => {
 		let offscreenGraphics = createGraphics(img.width, img.height);
 		offscreenGraphics.image(img, 0, 0);
-		// Convert the drawn image on canvas to Data URL (base64)
-		defaultImg2DataURL = offscreenGraphics.elt.toDataURL();
+		let dataURL = offscreenGraphics.elt.toDataURL();
+		callback(dataURL);
 	});
 }
 
@@ -57,27 +59,16 @@ function setup() {
 
 	// Create a file input for image upload
 	createFileInput(imageUploaded).attribute('accept', 'image/*');
-	createButton('Example 1').mousePressed(loadImg1);
-	createButton('Example 2').mousePressed(loadImg2);
-}
-
-function loadImg1() {
-	if (imgElement) {
-		imgElement.remove();
-	}
-	// Initialize the imgElement with the preloaded default image #2
-	imgElement = createImg(defaultImg1DataURL, '').hide();
-	// Immediately perform detection on the default image
-	detect(imgElement);
+	createButton('Example 1').mousePressed(() => loadExampleImage(defaultImg1DataURL));
+	createButton('Example 2').mousePressed(() => loadExampleImage(defaultImg2DataURL));
 }
 
-function loadImg2() {
+// Function to load an example image
+function loadExampleImage(dataURL) {
 	if (imgElement) {
 		imgElement.remove();
 	}
-	// Initialize the imgElement with the preloaded default image #2
-	imgElement = createImg(defaultImg2DataURL, '').hide();
-	// Immediately perform detection on the default image
+	imgElement = createImg(dataURL, '').hide();
 	detect(imgElement);
 }
 
@@ -87,9 +78,7 @@ function imageUploaded(file) {
 		if (imgElement) {
 			imgElement.remove(); // Remove the previous image if exists
 		}
-		// Create an image element with the uploaded file
 		imgElement = createImg(file.data, '').hide();
-		// Detect objects in the uploaded image
 		detect(imgElement);
 	} else {
 		statusP.html('Please upload an image file.');
@@ -104,44 +93,34 @@ async function detect(image) {
 		percentage: true,
 	});
 
-	// Display the image and bounding boxes once analysis is complete
 	displayImageAndBoxes(image, results);
 	statusP.html('Image Processed');
 }
 
 // Function to display the image and bounding boxes on the canvas
 function displayImageAndBoxes(img, results) {
-	// Calculate scale to fit the image to the screen width while maintaining aspect ratio
 	let scaleX = windowWidth / img.width;
-	let scaleY = scaleX; // Maintain aspect ratio
+	let scaleY = scaleX;
 
-	// Adjust the canvas to fit the scaled image
 	let scaledWidth = img.width * scaleX;
 	let scaledHeight = img.height * scaleY;
 
-	// Resize the canvas to fit the scaled image and provide space for status
 	resizeCanvas(windowWidth, scaledHeight + 200);
-
-	// Draw the scaled image on the canvas
 	image(img, 0, 100, scaledWidth, scaledHeight);
 
-	// Iterate over each result to draw bounding boxes and labels
 	for (const result of results) {
 		const { box, label } = result;
 		const { xmax, xmin, ymax, ymin } = box;
 
-		// Calculate coordinates and dimensions for scaled bounding boxes
 		let rectX = xmin * scaledWidth;
-		let rectY = ymin * scaledHeight + 100; // Offset by 100 pixels from top
+		let rectY = ymin * scaledHeight + 100;
 		let rectWidth = (xmax - xmin) * scaledWidth;
 		let rectHeight = (ymax - ymin) * scaledHeight;
 
-		// Draw bounding box
 		stroke(255, 0, 0);
 		noFill();
 		rect(rectX, rectY, rectWidth, rectHeight);
 
-		// Draw label above the bounding box
 		fill(255);
 		strokeWeight(1);
 		textSize(16);