feat: working prototype

src/routes/+page.svelte

@@ -1,2 +1,99 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<script>
+	/**
+	 * @type {HTMLVideoElement | null}
+	 */
+	let videoSource = null;
+	let fresh = '0%';
+    let rotten = '0%';
+
+	if (typeof navigator !== 'undefined') {
+		(async () => {
+			try {
+				const stream = await navigator.mediaDevices.getUserMedia({
+					video: {
+						facingMode: 'environment',
+						width: { ideal: 1280 },
+						height: { ideal: 720 }
+					}
+				});
+				videoSource.srcObject = stream;
+				videoSource.play();
+			} catch (err) {
+				console.error(err);
+			}
+		})();
+	}
+
+	const capture = async () => {
+		videoSource.pause();
+		const canvas = document.createElement('canvas');
+		canvas.width = videoSource.videoWidth;
+		canvas.height = videoSource.videoHeight;
+		const ctx = canvas.getContext('2d');
+		ctx.drawImage(videoSource, 0, 0, canvas.width, canvas.height);
+
+		// Convert canvas to binary
+		const dataUrl = canvas.toDataURL('image/jpeg');
+		const blob = await fetch(dataUrl).then((res) => res.blob());
+		const formData = new FormData();
+		formData.append('file', blob, 'image.jpg');
+
+		// Upload to API with form-data format
+		let res = await fetch('http://localhost:5000/predict', {
+			method: 'POST',
+			body: formData
+		});
+
+        // Get response from API, parse string to decimal
+        let data = await res.json();
+        fresh = (parseFloat(data.fresh) * 100).toFixed(2) + '%';
+        rotten = (parseFloat(data.rotten) * 100).toFixed(2) + '%';
+
+		videoSource.play();
+	};
+
+	const gallery = () => {
+		// Select image from file system
+		const input = document.createElement('input');
+		input.type = 'file';
+		input.accept = 'image/*';
+		input.onchange = () => {
+			const file = input.files[0];
+			const reader = new FileReader();
+			reader.onload = () => {
+				console.log(reader.result);
+			};
+			reader.readAsDataURL(file);
+		};
+		input.click();
+	};
+</script>
+
+<div class="flex flex-col bg-gray-200 h-screen">
+    <div class="flex flex-col bg-white h-screen w-full max-w-2xl mx-auto">
+        <div class="bg-blue-400 p-4">
+            <h1 class="font-">FreshGuard</h1>
+        </div>
+    
+        <video class="" bind:this={videoSource}></video>
+    
+        <div class="mx-auto my-5">
+            <button class="mx-4 rounded-full bg-gray-200 p-4" on:click={gallery}>Gallery</button>
+            <button class="mx-4 rounded-full bg-gray-200 p-4" on:click={capture}>Capture</button>
+        </div>
+    
+        <div class="mx-4">
+            <!-- Fresh Progress Bar -->
+            <h2 class="text-3xl">Fresh ({fresh})</h2>
+            <div class="h-10 rounded-xl bg-gray-400">
+                <div class="h-10 rounded-xl bg-green-400" style="width: {fresh};"></div>
+            </div>
+    
+            <!-- Rotten Progress Bar -->
+            <h2 class="text-3xl">Rotten ({rotten})</h2>
+            <div class="h-10 rounded-xl bg-gray-400">
+                <div class="h-10 rounded-xl bg-red-400" style="width: {rotten};"></div>
+            </div>
+        </div>
+    </div>
+</div>