forked from Meeeee6623/HackMIT-2023
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbackup.html
93 lines (82 loc) · 4.23 KB
/
backup.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatbot Trainer with Modal</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
</head>
<body class="bg-gray-100 h-screen flex flex-col justify-center items-center">
<div x-data="chatbotState()" class="w-full max-w-xl bg-white shadow-md rounded p-6">
<h1 class="text-2xl font-semibold mb-4">YouTube Playlist Learner</h1>
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="message">
Message the Chatbot:
</label>
<textarea x-model="userMessage" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3" id="message" rows="4" placeholder="Write a message"></textarea>
</div>
<button @click="sendMessage()" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mb-4">
Send Message
</button>
<div class="border-t pt-4 bg-gradient-to-r from-green-400 to-blue-500" id="chat-box">
<template x-for="(message, index) in messages">
//TODO change this to user or assistant instead of mod 2
<div :class="{'text-right': index % 2 === 0, 'text-left': index % 2 !== 0}">
<div class="inline-block bg-white text-gray-800 rounded-lg px-4 py-2 mb-4 shadow-md prose prose-sm">
<p x-text="message"></p>
</div>
</div>
</template>
</div>
</div>
<script>
function chatbotState() {
return {
userMessage: "",
messages: [],
conversation: [],
async sendMessage() {
try {
const response = await fetch(`/ask/${this.userMessage}/${JSON.stringify(this.conversation)}`, {
method: 'GET',
});
this.conversation.push({role: "user", content: this.userMessage});
const data = await response.json();
this.conversation.push({role: "assistant", content: data.reply});
// push an object instead with role + type
// text, yt
this.messages.push(this.userMessage);
if (data.yt_query !== "") {
const searchResponse = await fetch(`/search/${this.userMessage}/${data.yt_query}`, {
method: 'GET',
});
const searchData = await searchResponse.json();
if (searchData.id === "") {
const scrapeResponse = await fetch(`/scrape/${searchData.id}/${JSON.stringify(searchData.playlists)}`, {
method: 'GET',
});
const scrapeData = await scrapeResponse.json();
// 1,2,3
// switch botton
this.messages.push(scrapeData.message);
} else {
const chatResponse = await fetch(`/chat/${searchData.id}/${this.userMessage}`, {
method: 'GET',
});
const chatData = await chatResponse.json();
this.messages.push(chatData.response);
this.messages.push(`Video: ${chatData.video}`);
}
} else {
this.messages.push(data.reply);
}
} catch (error) {
this.messages.push("Error while getting a response from the chatbot.");
}
}
};
}
</script>
</body>
</html>