-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
232 lines (190 loc) · 10.1 KB
/
index.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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link href="style.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<title>CatGPT</title>
<meta name="description" content="What if ChatGPT were a cat?">
</head>
<body>
<div id="container">
<div class="header">
<h1>CatGPT</h1>
<p>What if ChatGPT were a cat?</p>
</div>
<div id="chatcontainer">
<div id="chat">
<div class="chat-bubble-container chat-gpt-bubble-container">
<div class="profile-picture"><img src="/images/avatar.png" height="100%" /></div>
<div class="chat-bubble chat-gpt-bubble">
Meow, meow meow meow, meow meow?
</div>
</div>
</div>
<div id="input-area">
<div id="input-container">
<form id="form">
<input type="text" placeholder="Type your message here" id="user-input" autocomplete="off" />
</form>
<a id="sendBtn"><i class="fas fa-paper-plane"></i></a>
</div>
<p class="disclaimer">This site was created by <a href="https://www.twitter.com/woutervd"
target="_blank">Wouter van Dijke</a> (with some help from ChatGPT) | <a href="#"
onclick="handleInfoClick" id="infoBtn">click here to learn more about this site</a></p>
<p class="disclaimer">Did CatGPT make you smile? Donate to a charity for <a
href="https://secure.petsmartcharities.org/give/219478/#!/donation/checkout"
target="_blank">normal sized cats</a> or <a
href="https://support.worldwildlife.org/site/Donation2?df_id=12391&12391.donation=form1"
target="_blank">really big cats</a>.</p>
</div>
</div>
</div>
<script>
const userInput = document.getElementById("user-input");
const chatArea = document.getElementById("chat");
const sendBtn = document.getElementById("sendBtn");
const form = document.getElementById('form');
const infoBtn = document.getElementById('infoBtn');
let userMeowed = false;
function handleSubmit(event) {
event.preventDefault(); // Prevent refresh on form submission
// If a user submits input, create a new bubble-containter and bubble to show the user input in the chat
if (user .value
.trim()
.toLowerCase()
) {
const userInputValue = userInput.value.trim();
// Reset the user input field
userInput.value = '';
// Create a new chat bubble container for the user's input
const chatBubbleContainer = document.createElement('div');
chatBubbleContainer.classList.add('chat-bubble-container', 'user-bubble-container');
const profilePicture = document.createElement('div');
profilePicture.classList.add('profile-picture');
const userAvatar = document.createElement('img');
userAvatar.src = '/images/cat-avatar.png';
userAvatar.height = '100%';
profilePicture.appendChild(userAvatar);
const chatBubble = document.createElement('div');
chatBubble.classList.add('chat-bubble', 'user-bubble');
chatBubble.innerText = userInputValue;
chatBubbleContainer.appendChild(profilePicture);
chatBubbleContainer.appendChild(chatBubble);
// Add the new chat bubble container to the chat area
chatArea.appendChild(chatBubbleContainer);
// Scroll to the bottom of the chat area to show the latest message
chatArea.scrollTop = chatArea.scrollHeight;
// Set the userMeowed flag to true to indicate the user has already sent a message
userMeowed = true;
// Call the getResponse function to get a response from ChatGPT
getResponse(userInputValue);
}
}
function handleInfoClick(event) {
event.preventDefault();
alert('This site was created by Wouter van Dijke (with some help from ChatGPT).\n\nThe purpose of this site is to showcase the capabilities of OpenAI\'s GPT models. The content generated by the model is not intended to be taken seriously and should not be used as a source of factual information.\n\nIf you would like to learn more about how this site was created, please visit https://github.com/woutervd/catgpt');
}
// Import the OpenAI package
const openai = require('openai');
// Set up the OpenAI API client
const api_key = 'your-api-key-goes-here';
const api_client = new openai.api(api_key);
// Function to generate a response from GPT-3
async function generateResponse(prompt) {
// Set up the request parameters
const parameters = {
"prompt": prompt,
"temperature": 0.5,
"max_tokens": 50,
"top_p": 1,
"frequency_penalty": 0,
"presence_penalty": 0
};
// Call the GPT-3 API
const response = await api_client.completions.create(parameters);
// Extract the generated text from the response
const text = response.choices[0].text.trim();
// Return the generated text
return text;
}
async function getResponse(userInputValue) {
const chatBubbleContainer = document.createElement('div');
chatBubbleContainer.classList.add('chat-bubble-container', 'chat-gpt-bubble-container');
const profilePicture = document.createElement('div');
profilePicture.classList.add('profile-picture');
const catAvatar = document.createElement('img');
catAvatar.src = '/images/avatar.png';
catAvatar.height = '100%';
profilePicture.appendChild(catAvatar);
const chatBubble = document.createElement('div');
chatBubble.classList.add('chat-bubble', 'chat-gpt-bubble');
chatBubble.innerText = 'Meow, meow meow meow, meow meow?'; // Show a loading message while waiting for the API response
chatBubbleContainer.appendChild(profilePicture);
chatBubbleContainer.appendChild(chatBubble);
chatArea.appendChild(chatBubbleContainer);
// Scroll to the bottom of the chat area to show the latest message
chatArea.scrollTop = chatArea.scrollHeight;
// Generate a response from GPT-3
const prompt = `CatGPT: ${userInputValue}\nUser: `;
const responseText = await generateResponse(prompt);
// Create a new chat bubble container for the typing indicator
const typingIndicatorContainer = document.createElement('div');
typingIndicatorContainer.classList.add('chat-bubble-container', 'chat-gpt-bubble-container');
const typingIndicator = document.createElement('div');
typingIndicator.classList.add('chat-bubble', 'typing-indicator');
for (let i = 0; i < 3; i++) {
const dot = document.createElement('span');
dot.classList.add('dot');
typingIndicator.appendChild(dot);
}
typingIndicatorContainer.appendChild(profilePicture);
typingIndicatorContainer.appendChild(typingIndicator);
// Add the new chat bubble container to the chat area
chatArea.appendChild(typingIndicatorContainer);
// Scroll to the bottom of the
userMeowed = true;
const userBubbleContainer = document.createElement("div");
userBubbleContainer.classList.add("chat-bubble-container", "chat-user-bubble-container");
const userBubble = document.createElement("div");
userBubble.classList.add("chat-bubble", "chat-user-bubble");
userBubble.textContent = userInput.value;
userBubbleContainer.appendChild(userBubble);
chatArea.appendChild(userBubbleContainer);
// Clear the input field after submission
userInput.value = "";
// Simulate CatGPT response after 1 second
setTimeout(() => {
const catBubbleContainer = document.createElement("div");
catBubbleContainer.classList.add("chat-bubble-container", "chat-gpt-bubble-container");
const catProfilePic = document.createElement("div");
catProfilePic.classList.add("profile-picture");
const catPic = document.createElement("img");
catPic.setAttribute("src", "/images/avatar.png");
catPic.setAttribute("height", "100%");
catProfilePic.appendChild(catPic);
const catBubble = document.createElement("div");
catBubble.classList.add("chat-bubble", "chat-gpt-bubble");
catBubble.textContent = "Meow";
catBubbleContainer.appendChild(catProfilePic);
catBubbleContainer.appendChild(catBubble);
chatArea.appendChild(catBubbleContainer);
// Automatically scroll to the bottom of the chat after a new message has been added
chatArea.scrollTop = chatArea.scrollHeight;
}, 1000);
}
function handleInfoClick(event) {
alert("This site uses OpenAI's GPT-3 to generate cat-like responses to user input. Donations made through the links on this site will go to PetSmart Charities and World Wildlife Fund. For more information, please contact Wouter van Dijke on Twitter (@woutervd).");
event.preventDefault();
}
form.addEventListener('submit', handleSubmit);
infoBtn.addEventListener('click', handleInfoClick);
</script>
</body>
</html>