/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function App() { const [image, setImage] = useState(null); const [result, setResult] = useState(null); const [error, setError] = useState(null); const handleImageUpload = async (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (file) { setImage(file); setResult(null); setError(null); } }; const identifyMovie = async () => { if (!image) return; const formData = new FormData(); formData.append('image', image); try { const response = await fetch('/identify', { method: 'POST', body: formData }); if (!response.ok) { throw new Error('Movie identification failed'); } const data = await response.json(); setResult(data.movieName); } catch (err) { setError(err instanceof Error ? err.message : 'An unknown error occurred'); } }; return (

🎬 Movie Scene Identifier

{image && (

)} {result && (

Movie/Drama: {result}

)} {error && (

{error}

)}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { if (request.method === 'POST' && new URL(request.url).pathname === '/identify') { try { const { OpenAI } = await import("https://esm.town/v/std/openai"); const openai = new OpenAI(); const formData = await request.formData(); const imageFile = formData.get('image') as File; if (!imageFile) { return new Response(JSON.stringify({ error: 'No image uploaded' }), { status: 400, headers: { 'Content-Type': 'application/json' } }); } const imageBytes = await imageFile.arrayBuffer(); const base64Image = btoa( String.fromCharCode(...new Uint8Array(imageBytes)) ); const response = await openai.chat.completions.create({ model: "gpt-4o", messages: [ { role: "user", content: [ { type: "text", text: "Identify the movie or TV drama from this scene. If you can't identify it precisely, give your best educated guess. Include the year of release if possible." }, { type: "image_url", image_url: { url: `data:image/jpeg;base64,${base64Image}` } } ] } ], max_tokens: 100 }); const movieName = response.choices[0].message.content || "Unable to identify the movie/drama"; return new Response(JSON.stringify({ movieName }), { headers: { 'Content-Type': 'application/json' } }); } catch (error) { console.error(error); return new Response(JSON.stringify({ error: 'Image processing failed' }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } } return new Response(` Movie Scene Identifier

`, { headers: { 'Content-Type': 'text/html' } }); }

efaztheistic