1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/**
* This program creates a movie recommendation system based on moods.
* It uses OpenAI to generate movie recommendations based on the user's selected mood and feedback.
* The program uses React for the frontend and handles state management for user interactions.
* It uses the Val Town OpenAI proxy for backend API calls.
* A "More moods" button has been added to dynamically expand the list of available moods.
*/
/** @jsxImportSource https://esm.sh/react */
import React, { useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
type Mood = string;
type Feedback = "Liked" | "Disliked" | "Not Watched";
interface Movie {
title: string;
description: string;
}
interface RecommendationHistory {
movie: string;
feedback: Feedback;
}
function App() {
const [selectedMood, setSelectedMood] = useState<Mood | null>(null);
const [recommendation, setRecommendation] = useState<Movie | null>(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [history, setHistory] = useState<RecommendationHistory[]>([]);
const [moods, setMoods] = useState<Mood[]>(["Happy", "Sad", "Excited", "Relaxed", "Thoughtful"]);
const getRecommendation = async (mood: Mood, feedback?: Feedback) => {
setLoading(true);
setError(null);
try {
const response = await fetch("/recommend", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ mood, history, feedback }),
});
if (!response.ok) {
throw new Error("Failed to get recommendation");
}
const data = await response.json();
setRecommendation(data);
} catch (err) {
setError("Failed to get recommendation. Please try again.");
console.error(err);
} finally {
setLoading(false);
}
};
const handleMoodSelect = (mood: Mood) => {
setSelectedMood(mood);
setHistory([]);
getRecommendation(mood);
};
const handleFeedback = (feedback: Feedback) => {
if (recommendation) {
const newHistory = [...history, { movie: recommendation.title, feedback }];
setHistory(newHistory);
getRecommendation(selectedMood!, feedback);
}
};
const handleMoreMoods = async () => {
setLoading(true);
try {
const response = await fetch("/more-moods");
if (!response.ok) {
throw new Error("Failed to get more moods");
}
const newMoods = await response.json();
setMoods([...newMoods]);
} catch (err) {
setError("Failed to get more moods. Please try again.");
console.error(err);
} finally {
setLoading(false);
}
};
return (
<div className="container">
<h1>🎬 AI Movie Mood Recommender</h1>
<div className="mood-selector">
<h2>Select your mood:</h2>
{moods.map((mood) => (
<button
key={mood}
onClick={() => handleMoodSelect(mood)}
className={selectedMood === mood ? "selected" : ""}
disabled={loading}
>
{mood} {getMoodEmoji(mood)}
</button>