import React, { useState, useEffect, useRef } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
import { marked } from "https://esm.sh/marked";
function App() {
const [compliments, setCompliments] = useState<string>("");
const [isLoading, setIsLoading] = useState(false);
const [isCameraOn, setIsCameraOn] = useState(true);
const [error, setError] = useState<string | null>(null);
const videoRef = useRef<HTMLVideoElement>(null);
const canvasRef = useRef<HTMLCanvasElement>(null);
useEffect(() => {
console.log("App mounted, starting camera");
startCamera();
return () => {
console.log("App unmounting, stopping camera");
stopCamera();
};
}, []);
const startCamera = async () => {
console.log("Attempting to start camera");
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" } });
if (videoRef.current) {
videoRef.current.srcObject = stream;
console.log("Camera started successfully");
} else {
console.log("Video ref is null, camera not started");
setError("Camera initialization failed. Please refresh the page.");
}
} catch (err) {
console.error("Error accessing camera:", err);
setError("Failed to access camera. Please ensure you've granted camera permissions.");
}
};
const stopCamera = () => {
console.log("Stopping camera");
if (videoRef.current && videoRef.current.srcObject) {
const tracks = (videoRef.current.srcObject as MediaStream).getTracks();
tracks.forEach(track => track.stop());
console.log("Camera stopped");
} else {
console.log("No camera to stop");
}
};
const takeSelfie = async () => {
console.log("Taking selfie");
if (!videoRef.current) {
console.error("Video ref is null");
setError("Camera not initialized. Please refresh the page.");
return;
}
if (!canvasRef.current) {
console.error("Canvas ref is null");
setError("Canvas not initialized. Please refresh the page.");
return;
}
setIsLoading(true);
setIsCameraOn(false);
setError(null);
const context = canvasRef.current.getContext('2d');
if (context) {
context.drawImage(videoRef.current, 0, 0, canvasRef.current.width, canvasRef.current.height);
console.log("Selfie captured on canvas");
try {
const blob = await new Promise<Blob | null>((resolve) => canvasRef.current!.toBlob(resolve, 'image/jpeg'));
if (blob) {
console.log("Blob created, size:", blob.size);
const formData = new FormData();
formData.append('image', blob, 'selfie.jpg');
console.log("Sending request to /analyze");
const response = await fetch('/analyze', {
method: 'POST',
body: formData
});
console.log("Response received:", response.status);
if (response.ok) {
const reader = response.body?.getReader();
if (reader) {
console.log("Starting to read stream");
while (true) {
const { done, value } = await reader.read();
if (done) {
console.log("Stream reading complete");
break;
}