🤳 Ego Booster 9000 🚀

Get ready for a confidence explosion! 💥

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

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

}\n {error &&

{error}

}\n {compliments &&

🎉 Prepare to be amazed! 🎉

}\n

\n View Source\n

\n );\n}\n\nfunction client() {\n console.log(\"Client-side rendering started\");\n createRoot(document.getElementById(\"root\")!).render();\n}\nif (typeof document !== \"undefined\") { \n console.log(\"Document is defined, calling client()\");\n client(); \n} else {\n console.log(\"Document is undefined, not calling client()\");\n}\n\nasync function server(request: Request): Promise {\n console.log(\"Server received request:\", request.method, new URL(request.url).pathname);\n \n if (request.method === 'POST' && new URL(request.url).pathname === '/analyze') {\n console.log(\"Handling POST request to /analyze\");\n const formData = await request.formData();\n const image = formData.get('image') as File;\n\n if (!image) {\n console.log(\"No image provided in request\");\n return new Response('No image provided', { status: 400 });\n } else {\n console.log(\"Image received, size:\", image.size);\n }\n\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n const stream = new ReadableStream({\n async start(controller) {\n try {\n console.log(\"Starting to process image\");\n const arrayBuffer = await image.arrayBuffer();\n const base64Image = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));\n\n console.log(\"Sending request to OpenAI\");\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o-mini\",\n messages: [\n {\n role: \"system\",\n 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.\"\n },\n {\n role: \"user\",\n content: [\n { type: \"text\", text: \"Analyze this selfie and give me 5 short, funny, specific compliments about my appearance:\" },\n { type: \"image_url\", image_url: { url: `data:image/jpeg;base64,${base64Image}` } }\n ]\n }\n ],\n max_tokens: 250,\n stream: true,\n });\n\n console.log(\"Streaming response from OpenAI\");\n for await (const chunk of completion) {\n const content = chunk.choices[0]?.delta?.content || '';\n console.log(\"Received chunk:\", content);\n controller.enqueue(new TextEncoder().encode(content));\n }\n } catch (error) {\n console.error('Error in OpenAI processing:', error);\n controller.enqueue(new TextEncoder().encode(\"Oops! Our AI had a little hiccup. Maybe your beauty short-circuited it! 🤖💥\"));\n } finally {\n console.log(\"Closing stream\");\n controller.close();\n }\n }\n });\n\n console.log(\"Returning stream response\");\n return new Response(stream, {\n headers: { 'Content-Type': 'text/plain' }\n });\n } else {\n console.log(\"Handling non-POST or non-/analyze request\");\n return new Response(`\n \n \n \n \n \n Ego Booster 9000\n \n \n \n

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