🎬 AI Movie Mood Recommender

Select your mood:

\n {moods.map((mood) => (\n handleMoodSelect(mood)}\n className={selectedMood === mood ? \"selected\" : \"\"}\n disabled={loading}\n >\n {mood} {getMoodEmoji(mood)}\n \n ))}\n \n

\n {loading &&

}\n {error &&

{error}

}\n {recommendation && (\n

Recommended Movie:

{recommendation.title}

{recommendation.description}

\n \n \n \n

\n )}\n

\n View source on Val Town\n

\n );\n}\n\nfunction getMoodEmoji(mood: Mood): string {\n const moodEmojis: { [key: string]: string } = {\n \"Happy\": \"😊\",\n \"Sad\": \"😢\",\n \"Excited\": \"🤩\",\n \"Relaxed\": \"😌\",\n \"Thoughtful\": \"🤔\",\n \"Angry\": \"😠\",\n \"Fearful\": \"😨\",\n \"Surprised\": \"😲\",\n \"Disgusted\": \"🤢\",\n \"Loving\": \"❤️\",\n };\n return moodEmojis[mood] || \"🙂\";\n}\n\n// Client-side only code\nfunction client() {\n createRoot(document.getElementById(\"root\")!).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\n// Server-side only code\nasync function server(request: Request): Promise {\n const url = new URL(request.url);\n\n if (url.pathname === \"/recommend\" && request.method === \"POST\") {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n try {\n const { mood, history, feedback } = await request.json();\n let prompt =\n `You are a movie recommendation system. Provide a movie recommendation based on the user's mood. Include the movie title and a brief description.`;\n\n if (history.length > 0) {\n prompt += ` The user has previously seen these movies: ${\n history.map(h => `${h.movie} (${h.feedback})`).join(\", \")\n }.`;\n }\n\n if (feedback) {\n prompt += ` The user ${feedback.toLowerCase()} the last recommendation.`;\n }\n\n prompt += ` Recommend a different movie for when they're feeling ${mood}.`;\n\n const completion = await openai.chat.completions.create({\n messages: [\n { role: \"system\", content: prompt },\n { role: \"user\", content: `I'm feeling ${mood}. What movie do you recommend?` },\n ],\n model: \"gpt-4-mini\",\n max_tokens: 150,\n });\n\n const recommendation = completion.choices[0].message.content;\n const [title, ...descriptionParts] = recommendation.split(\"\\n\");\n const description = descriptionParts.join(\"\\n\").trim();\n\n return new Response(JSON.stringify({ title, description }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"Error getting recommendation:\", error);\n return new Response(JSON.stringify({ error: \"Failed to get recommendation\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n if (url.pathname === \"/more-moods\" && request.method === \"GET\") {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n try {\n const completion = await openai.chat.completions.create({\n messages: [\n {\n role: \"system\",\n content: \"Act as a computer software: give me only the requested output, no conversation.\",\n },\n {\n role: \"user\",\n content:\n \"Generate 5 unique and comma-separated mood names that are different from Happy, Sad, Excited, Relaxed, and Thoughtful.\",\n },\n ],\n model: \"gpt-4-mini\",\n max_tokens: 50,\n });\n\n const moodString = completion.choices[0].message.content;\n const newMoods = moodString.split(\",\").map(mood => mood.trim());\n\n return new Response(JSON.stringify(newMoods), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"Error getting more moods:\", error);\n return new Response(JSON.stringify({ error: \"Failed to get more moods\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n return new Response(\n `\n \n \n \n \n \n AI Movie Mood Recommender\n \n \n \n

\n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n body {\n font-family: Arial, sans-serif;\n line-height: 1.6;\n color: #333;\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n background-color: #f4f4f4;\n }\n .container {\n background-color: #fff;\n padding: 20px;\n border-radius: 5px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n }\n h1 {\n color: #2c3e50;\n text-align: center;\n }\n button {\n background-color: #3498db;\n color: #fff;\n border: none;\n padding: 10px 15px;\n margin: 5px;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s;\n }\n button:hover:not(:disabled) {\n background-color: #2980b9;\n }\n button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n button.selected {\n background-color: #2ecc71;\n }\n .mood-selector, .recommendation {\n margin-top: 20px;\n }\n .feedback-buttons {\n display: flex;\n justify-content: center;\n gap: 10px;\n margin-top: 15px;\n }\n .error {\n color: #e74c3c;\n font-weight: bold;\n }\n .footer {\n text-align: center;\n margin-top: 20px;\n font-size: 0.9em;\n color: #7f8c8d;\n }\n a {\n color: #3498db;\n text-decoration: none;\n }\n a:hover {\n text-decoration: underline;\n }\n`;\n\nexport default server;","deleted","label",[99],"permalink","https://www.val.town/x/movienerd/originalEmeraldPython/code/main.tsx","extension","actionData","errors"]