Forked from movienerd/originalEmeraldPython
Public
HTTP
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
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.
* Movies are saved in SQLite to prevent recommending the same movie twice.
* The SQLite schema version has been updated to fix the 404 error.
* A dancing popcorn emoji has been added to the loading message.
* The color scheme has been updated to a monochrome look with a modern style and a nice font.
* The "More moods" button text has been changed to "Ask the AI for different moods".
* The mood generation now keeps track of previously generated moods to avoid repetition.
* A list of movies that have been liked, disliked, or not seen is displayed at the bottom of the page.
* The JSON parsing has been made more robust to handle non-standard responses.
*/
/** @jsxImportSource https://esm.sh/react */
import React, { useState, useEffect } 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 [moods, setMoods] = useState<Mood[]>([
"Happy",
"Sad",
"Excited",
"Relaxed",
"Anxious",
]);
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 handleMoodSelect = async (mood: Mood) => {
setSelectedMood(mood);
setLoading(true);
setError(null);
try {
const response = await fetch("/recommend", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ mood, history }),
});
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.");
} finally {
setLoading(false);
}
};
const handleFeedback = (feedback: Feedback) => {
if (recommendation) {
setHistory([...history, { movie: recommendation.title, feedback }]);
setRecommendation(null);
setSelectedMood(null);
}
};
const handleMoreMoods = async () => {
setLoading(true);
setError(null);
try {
const response = await fetch("/more-moods", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ currentMoods: moods }),
});
if (!response.ok) {
throw new Error("Failed to get more moods");
}
const data = await response.json();
setMoods(data.moods);
} catch (err) {
setError("Failed to get more moods. Please try again.");
} finally {
setLoading(false);