-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
200 lines (189 loc) · 7.91 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
<!doctype html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ChatGPT Avatar</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<meta name="description" content="Chat with an AI-powered chatbot and listen to its responses.">
<meta name="keywords" content="chatbot, AI, NLP, natural language processing">
<meta name="author" content="Kevin Huff">
<meta property="og:title" content="ChatGPT Avatar">
<meta property="og:description" content="Chat with an AI-powered chatbot and listen to its responses.">
<meta property="og:image" content="/card.png">
<meta property="og:url" content="https://chatgpt-avatar.glitch.me/">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="ChatGPT Avatar">
<meta name="twitter:description" content="Chat with an AI-powered chatbot and listen to its responses.">
<meta name="twitter:image" content="/card.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<style>
.recording {
background-color: #3cb371;
}
/* Chatbox styles */
.chatbox {
height: 500px;
overflow-y: scroll;
background-color: #49525c;
}
.chat-message {
display: flex;
width: 100%;
}
.chat-right {
justify-content: flex-end;
align-items: flex-end;
margin-bottom: 16px;
}
.chat-left {
justify-content: flex-start;
align-items: flex-start;
margin-bottom: 16px;
}
.chat-bubble {
position: relative;
font-family: "SanFrancisco";
font-size: 1.25rem;
max-width: 75%;
padding: 0.5rem .875rem;
line-height: 1.25;
word-wrap: break-word;
}
.chat-right .chat-bubble {
background-color: #248bf5;
color: #fff;
border: 1px solid #248bf5;
border-radius: 0.25rem 0.25rem 0.25rem 0;
}
.chat-left .chat-bubble {
background-color: #fff;
color: #000;
border: 1px solid #e5e5ea;
border-radius: 0.25rem 0.25rem 0 0.25rem;
}
.chat-bubble::before {
content: "";
position: absolute;
bottom: -15px;
width: 0;
height: 0;
border-style: solid;
}
.chat-right .chat-bubble::before {
border-width: 16px 16px 0 0;
border-color: #248bf5 transparent transparent transparent;
right: 0;
transform: rotate(90deg);
}
.chat-left .chat-bubble::before {
border-width: 16px 0 0 16px;
border-color: #fff transparent transparent transparent;
left: 0;
transform: rotate(270deg);
}
.recording-icon {
position: relative;
bottom: 0;
left: 0;
display: none;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="logo.png" alt="Your Logo" width="30" height="30" class="d-inline-block align-text-top me-2" />
ChatGPT Avatar
</a>
<!-- Navbar content here -->
</div>
</nav>
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Chatbox -->
<div class="chatbox p-3">
<!-- Chat messages -->
<!-- Recording notification -->
<div class="recording-icon d-none">
<i class="bi bi-mic"></i>
</div>
</div>
<!-- End of chatbox -->
<!-- Chat input -->
<div class="mt-3">
<div class="input-group">
<input type="text" class="form-control" id="userMessage" placeholder="Type your message...">
<button class="btn btn-primary" id="sendMessageButton">Send</button>
</div>
</div>
<div class="mt-3">
<div class="input-group">
<span class="input-group-text">Trigger Phrase</span>
<input type="text" class="form-control" placeholder="computer" id="triggerWordInput">
</div>
</div>
<div class="mt-3">
<!-- Text area to set the system prompt -->
<div class="input-group">
<span class="input-group-text">System Prompt</span>
<textarea id="systemPrompt" class="form-control" aria-label="System Prompt">First and foremost keep your response short and concise. We are going to have a roleplay. You will respond to all of my questions as kevbot. kevbot is the a mostly helpful, mostly snarky chatbot. kevbot has a real edgy personality. He really likes to make jokes, and say things that on the surface may sound crude or rude. His personality causes him to curse frequently and sometimes be rude to people talking to him. But everyone around here loves his personality and we can't get enough of him.</textarea>
<button class="btn btn-primary" id="setSystemPromptButton">Set System Prompt</button>
</div>
</div>
<div class="mt-3">
<!-- Text area to set the system prompt -->
<div class="input-group">
<input type="text" class="form-control" placeholder="No AI just talk" id="ttsInput">
<button class="btn btn-primary" id="ttsButton">Play TTS</button>
</div>
</div>
<div class="mt-3">
<button class="btn btn-primary" id="startButton">Start Listening</button>
<button class="btn btn-primary" id="speakButton">Enable TTS</button>
</div>
<div class="mt-3">
<audio id="audio-player" controls ></audio>
</div>
<!-- End of chat input -->
</div>
</div>
</div>
<!-- Modal dialog -->
<div class="modal fade" id="welcome-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Welcome to ChatGPT Avatar</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>This is a cool app that lets you interact with a chatbot and listen to its responses. It also provides straight tts response and the ability to tune the system prompt.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<footer class="bg-dark py-3">
<div class="container text-center">
<p>Copyright © 2023 KevNetCloud LLC. All rights reserved.</p>
<a href="https://github.com/kevin-huff" target="_blank">GitHub</a>
</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/chatbot.js"></script>
</body>
</html>