/** * This ego booster app takes a selfie, sends it to GPT-4o-mini for analysis, * and streams funny, specific compliments about the user's appearance. * We use the WebRTC API for camera access, the OpenAI API for image analysis, * and server-sent events for real-time streaming of compliments. */ /** @jsxImportSource https://esm.sh/react */ 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(""); const [isLoading, setIsLoading] = useState(false); const [isCameraOn, setIsCameraOn] = useState(true); const [error, setError] = useState(null); const videoRef = useRef(null); const canvasRef = useRef(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((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; } const newCompliment = new TextDecoder().decode(value); console.log("Received compliment:", newCompliment); setCompliments(prev => prev + newCompliment); } } else { console.log("Response body reader is null"); setError("Failed to read response. Please try again."); } } else { throw new Error(`Server responded with ${response.status}: ${response.statusText}`); } } else { console.log("Failed to create blob"); throw new Error("Failed to create image blob"); } } catch (error) { console.error('Error:', error); setError(`Error: ${error instanceof Error ? error.message : String(error)}`); setCompliments("Oops! Something went wrong. Maybe you're too beautiful for our AI to handle! 😅"); } finally { setIsLoading(false); console.log("Selfie process complete"); } } else { console.log("Failed to get canvas context"); setError("Failed to capture selfie. Please try again."); } }; const resetCamera = () => { console.log("Resetting camera"); setIsCameraOn(true); setCompliments(""); setError(null); startCamera(); }; return (

🤳 Ego Booster 9000 🚀

Get ready for a confidence explosion! 💥

{isCameraOn ? ( ) : ( )} {isLoading &&

Analyzing your fabulous self... 🕵️‍♂️✨

} {error &&

{error}

} {compliments &&

🎉 Prepare to be amazed! 🎉

}

View Source

); } function client() { console.log("Client-side rendering started"); createRoot(document.getElementById("root")!).render(); } if (typeof document !== "undefined") { console.log("Document is defined, calling client()"); client(); } else { console.log("Document is undefined, not calling client()"); } async function server(request: Request): Promise { console.log("Server received request:", request.method, new URL(request.url).pathname); if (request.method === 'POST' && new URL(request.url).pathname === '/analyze') { console.log("Handling POST request to /analyze"); const formData = await request.formData(); const image = formData.get('image') as File; if (!image) { console.log("No image provided in request"); return new Response('No image provided', { status: 400 }); } else { console.log("Image received, size:", image.size); } const { OpenAI } = await import("https://esm.town/v/std/openai"); const openai = new OpenAI(); const stream = new ReadableStream({ async start(controller) { try { console.log("Starting to process image"); const arrayBuffer = await image.arrayBuffer(); const base64Image = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer))); console.log("Sending request to OpenAI"); const completion = await openai.chat.completions.create({ model: "gpt-4o-mini", messages: [ { role: "system", content: "You are a hilarious and overly enthusiastic ego booster. Your job is to provide 5 funny, specific, and over-the-top compliments about the person's appearance in the image. Be creative, exaggerate, and make it entertaining! Keep each compliment short and punchy, around 10-15 words max. Use lots of emojis and fun language. Respond in markdown format, with each compliment as a separate bullet point." }, { role: "user", content: [ { type: "text", text: "Analyze this selfie and give me 5 short, funny, specific compliments about my appearance:" }, { type: "image_url", image_url: { url: `data:image/jpeg;base64,${base64Image}` } } ] } ], max_tokens: 250, stream: true, }); console.log("Streaming response from OpenAI"); for await (const chunk of completion) { const content = chunk.choices[0]?.delta?.content || ''; console.log("Received chunk:", content); controller.enqueue(new TextEncoder().encode(content)); } } catch (error) { console.error('Error in OpenAI processing:', error); controller.enqueue(new TextEncoder().encode("Oops! Our AI had a little hiccup. Maybe your beauty short-circuited it! 🤖💥")); } finally { console.log("Closing stream"); controller.close(); } } }); console.log("Returning stream response"); return new Response(stream, { headers: { 'Content-Type': 'text/plain' } }); } else { console.log("Handling non-POST or non-/analyze request"); return new Response(` Ego Booster 9000

`, { headers: { "Content-Type": "text/html" }, }); } } const css = ` @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Poppins:wght@400;600&display=swap'); body { font-family: 'Poppins', sans-serif; background: linear-gradient(135deg, #FF61D2 0%, #FE9090 100%); display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; padding: 20px; box-sizing: border-box; } .container { background-color: #FFFFFF; padding: 2rem; border-radius: 30px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); text-align: center; max-width: 600px; width: 100%; animation: pop-in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); } @keyframes pop-in { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } h1 { font-family: 'Fredoka One', cursive; color: #FF61D2; font-size: 3rem; margin-bottom: 0.5rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); } .subtitle { color: #FE9090; font-size: 1.2rem; margin-bottom: 1.5rem; } .camera-container { margin-bottom: 1.5rem; position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } video, canvas { width: 100%; max-width: 400px; border-radius: 20px; display: block; margin: 0 auto; } .boost-button, .reset-button { font-family: 'Fredoka One', cursive; border: none; color: white; padding: 15px 30px; text-align: center; text-decoration: none; display: inline-block; font-size: 1.2rem; margin: 4px 2px; cursor: pointer; border-radius: 50px; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); } .boost-button { background-color: #FF61D2; } .reset-button { background-color: #FE9090; } .boost-button:hover, .reset-button:hover { transform: translateY(-2px); box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08); } .boost-button:active, .reset-button:active { transform: translateY(1px); } .boost-button:disabled { background-color: #D3D3D3; cursor: not-allowed; transform: none; } .loading { font-weight: bold; color: #FF61D2; animation: bounce 0.5s infinite alternate; } @keyframes bounce { from { transform: translateY(0px); } to { transform: translateY(-5px); } } .result-header { font-family: 'Fredoka One', cursive; color: #FE9090; font-size: 2rem; margin-top: 2rem; animation: tada 1s infinite; } @keyframes tada { 0% { transform: scale(1); } 10%, 20% { transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0); } } .compliments { margin-top: 1.5rem; text-align: left; background-color: #FFF0F5; border-radius: 20px; padding: 1.5rem; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06); } .compliments ul { padding-left: 20px; list-style-type: none; } .compliments li { background-color: #FFFFFF; border-left: 5px solid #FF61D2; padding: 15px; margin: 15px 0; border-radius: 10px; font-size: 1.1rem; line-height: 1.4; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .compliments li:hover { transform: translateY(-3px); box-shadow: 0 7px 14px rgba(0, 0, 0, 0.15); } .error { color: #FF4136; font-weight: bold; margin-top: 1rem; background-color: #FFD7D7; padding: 10px; border-radius: 10px; } a { color: #FF61D2; text-decoration: none; margin-top: 2rem; display: inline-block; font-weight: 600; transition: all 0.3s ease; } a:hover { color: #FE9090; transform: scale(1.05); } `; export default server;

egoBooster