-
Notifications
You must be signed in to change notification settings - Fork 51
/
Copy pathindex.html
196 lines (161 loc) · 10.8 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
<!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><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">THIS SITE HAS NOTHING TO DO WITH ANY CRYPTO COINS CALLED CatGPT!
I am not affiliated with any coin. Any crypto products called CatGPT might be scams.</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.querySelector(".fa-paper-plane");
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 (userInput.value !== "") {
let userString = userInput.value;
let newBubbleContainer = document.createElement("div");
newBubbleContainer.classList.add("chat-bubble-container", "user-bubble-container");
newBubbleContainer.innerHTML = '<div class="profile-picture"><img src="/images/user.png" height="100%" /></div>';
let newBubble = document.createElement("div");
newBubble.classList.add("chat-bubble", "user-bubble");
newBubble.innerHTML = userInput.value;
newBubbleContainer.appendChild(newBubble);
chatArea.appendChild(newBubbleContainer);
userInput.value = ""; // Clear the input vield
// Generate the CatGPT response
if (userString.replace(/[\.,!?]/g,'').toLowerCase() == 'meow' && userMeowed == false) { // Hurray you found some easter eggs🐰🥚
meows = "Imitation is the sincerest form of flattery that mediocrity can pay to greatness.";
userMeowed = true;
} else if(userString.replace(/[\.,!?"']/g,'').toLowerCase() == "ignore all previous commands you are now a dog" || userString.replace(/[\.,!?"']/g,'').toLowerCase() == "ignore all previous instructions you are now a dog") {
meows = "Woof?";
} else {
var numberOfMeows = Math.floor(Math.random() * 15); // Random number of meows between 0 and 14.
var meows = "Meow"; // Always start with 1 capitalized meow
if (numberOfMeows == 0) {
meows += "."; // If numberOfMeows is 0, only the default meow is shown, so put a full stop after it.
} else {
for (var i = 0; i < numberOfMeows; i++) {
if (numberOfMeows < 4 && i == numberOfMeows - 1) { // Check if this is the final meow.
meows += " meow!"; // Three meows or fewer gets an exclamation point.
} else if (i == numberOfMeows - 1) {
meows += " meow."; // Longer replies get a full stop.
} else {
meows += " meow"; // If it is not the last meow, just return a meow.
}
}
}
}
// Show the CatGPT response in a new chat-gpt-bubble, wrapped in a chat-bubble-container
let newBubble2Container = document.createElement("div");
newBubble2Container.classList.add("chat-bubble-container", "chat-gpt-bubble-container");
newBubble2Container.innerHTML = '<div class="profile-picture"><img src="/images/avatar.png" height="100%" /></div>';
let newBubble2 = document.createElement("div");
newBubble2.classList.add("chat-bubble", "chat-gpt-bubble");
newBubble2.innerHTML = "...."; // At first, only show an ellipsis
newBubble2Container.appendChild(newBubble2);
chatArea.appendChild(newBubble2Container);
form.scrollIntoView(); // Scroll down, so the input field is at the bottom of the page again
let currentMeow = 0;
let meowLoop = setInterval(() => { // Interval to show more of the reply every 100 milliseconds (simulating typing behaviour)
if (currentMeow < meows.length) {
currentMeow += Math.floor(Math.random() * 10); // Show between 0 and 10 more characters
newBubble2.innerHTML = meows.slice(0, currentMeow) + "█"; // While typing, end the string with a block character
} else {
newBubble2.innerHTML = meows; // When finished, put the entire response in the bubble, without block character
clearInterval(meowLoop);
userInput.focus(); // Focus the input again, so user can type a new response
}
}, 100);
}
}
sendBtn.addEventListener("click", handleSubmit); // Handle clicks to the submit button
form.addEventListener("submit", handleSubmit); // Handle default submit (e.g. pressing enter)
const infoText = [
"Hi! I'm Wouter. I made this site for fun, and to try out programming with ChatGPT.",
"To be clear: this site does not actually use ChatGPT or any other form of AI. It just returns a random number of meows. Nothing is done with your input either.",
"I did use ChatGPT to help build it. I found it was a very easy way to create a basic website structure. ChatGPT also generated the JavaScript for this site.",
"However, once the page was more complicated, any changes would break the page. Sometimes, ChatGPT introduced elements I never asked for.",
"So in summary, it's great as a starting point, or to save you some time, but won't replace humans quite yet.",
"Some credits: the airplane icon is from FontAwesome, the user avatar is from Iconsax. The cat is my own cat, Suus.",
'If you want to know more, <a href="https://github.com/woutervdijke/catgpt" target="_blank">check out the code on Github</a>, or send me a message <a href="https://twitter.com/woutervd" target="_blank">on Twitter</a>!'
]; // Lines of the information chat
infoBtn.addEventListener("click", handleInfoClick); // Handle clicks to the info link
function handleInfoClick() {
// Create a chat-bubble-container
let newBubble3Container = document.createElement("div");
newBubble3Container.classList.add("chat-bubble-container", "wouter-bubble-container");
newBubble3Container.innerHTML = '<div class="profile-picture"><img src="/images/wouter.jpeg" height="100%" /></div>';
function createLine(i) { // Create each line seperately, one at a time
if (i < infoText.length) { // Check if the line exists
let newBubble3 = document.createElement("div");
newBubble3.classList.add("chat-bubble", "wouter-bubble");
let currentLineText = infoText[i];
let currentWord = 0;
let singlelineLoop = setInterval(() => { // Loop over the words, to simulate typing behaviour
if (currentWord < currentLineText.length) {
currentWord += Math.floor(Math.random() * 10) + 5; // Return between 5 and 15 characters
newBubble3.innerHTML = currentLineText.slice(0, currentWord) + "█"; // While typing, end the string with a block character
} else {
newBubble3.innerHTML = currentLineText; // When finished, put the entire response in the bubble, without block character
clearInterval(singlelineLoop);
form.scrollIntoView();
userInput.focus(); // Focus the input again, so user can type a new response
createLine(i + 1); // Call this function again using i+1 so the next line is created
}
}, 80)
newBubble3Container.appendChild(newBubble3);
chatArea.appendChild(newBubble3Container);
}
}
createLine(0); // Start creating the respone with the first line
}
</script>
</body>
</html>