Hugging Face's logo

Spaces:
nroggendorff
/
myemma
Running

App Files Community
3
nroggendorff commited on
Commit
ce11b44
·
verified ·
1 Parent(s): 904ac09

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +218 -4
index.html CHANGED
@@ -1,10 +1,171 @@
1
- <!doctype html>
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>Chat UI</title>
7
- <link rel="stylesheet" href="style.css" />
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  </head>
9
  <body>
10
  <div id="app">
@@ -22,6 +183,59 @@
22
  </form>
23
  </div>
24
  </div>
25
- <script type="module" src="client.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26
  </body>
27
  </html>
 
1
+ <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Emma's Genie</title>
7
+ <style>
8
+ body {
9
+ display: flex;
10
+ justify-content: center;
11
+ align-items: center;
12
+ min-height: 100vh;
13
+ margin: 0;
14
+ font-family: "Inter", system-ui, -apple-system, sans-serif;
15
+ background: linear-gradient(135deg, #f6f8fb 0%, #e9eef5 100%);
16
+ }
17
+
18
+ .chat-container {
19
+ width: 100%;
20
+ max-width: 400px;
21
+ border-radius: 16px;
22
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12),
23
+ 0 2px 8px rgba(0, 0, 0, 0.08);
24
+ overflow: hidden;
25
+ display: flex;
26
+ flex-direction: column;
27
+ background-color: white;
28
+ height: 600px;
29
+ transition: transform 0.2s ease;
30
+ }
31
+
32
+ .chat-container:hover {
33
+ transform: translateY(-2px);
34
+ }
35
+
36
+ .messages {
37
+ flex-grow: 1;
38
+ padding: 20px;
39
+ overflow-y: auto;
40
+ background-color: #ffffff;
41
+ scroll-behavior: smooth;
42
+ }
43
+
44
+ .messages::-webkit-scrollbar {
45
+ width: 6px;
46
+ }
47
+
48
+ .messages::-webkit-scrollbar-thumb {
49
+ background-color: #cbd5e1;
50
+ border-radius: 3px;
51
+ }
52
+
53
+ .message {
54
+ margin-bottom: 16px;
55
+ max-width: 80%;
56
+ padding: 12px 16px;
57
+ border-radius: 12px;
58
+ font-size: 14px;
59
+ line-height: 1.5;
60
+ animation: fadeIn 0.3s ease;
61
+ }
62
+
63
+ @keyframes fadeIn {
64
+ from {
65
+ opacity: 0;
66
+ transform: translateY(10px);
67
+ }
68
+ to {
69
+ opacity: 1;
70
+ transform: translateY(0);
71
+ }
72
+ }
73
+
74
+ .message.user {
75
+ margin-left: auto;
76
+ background-color: #2563eb;
77
+ color: white;
78
+ border-bottom-right-radius: 4px;
79
+ }
80
+
81
+ .message.ai {
82
+ background-color: #f3f4f6;
83
+ color: #1f2937;
84
+ border-bottom-left-radius: 4px;
85
+ }
86
+
87
+ .typing-indicator {
88
+ margin-bottom: 16px;
89
+ padding: 12px 16px;
90
+ background-color: #f3f4f6;
91
+ border-radius: 12px;
92
+ border-bottom-left-radius: 4px;
93
+ width: fit-content;
94
+ }
95
+
96
+ .typing-indicator span {
97
+ display: inline-block;
98
+ width: 8px;
99
+ height: 8px;
100
+ background-color: #94a3b8;
101
+ border-radius: 50%;
102
+ margin-right: 4px;
103
+ animation: bounce 1.4s infinite ease-in-out;
104
+ }
105
+
106
+ .typing-indicator span:nth-child(1) {
107
+ animation-delay: -0.32s;
108
+ }
109
+ .typing-indicator span:nth-child(2) {
110
+ animation-delay: -0.16s;
111
+ }
112
+ .typing-indicator span:nth-child(3) {
113
+ animation-delay: 0s;
114
+ }
115
+
116
+ @keyframes bounce {
117
+ 0%,
118
+ 80%,
119
+ 100% {
120
+ transform: translateY(0);
121
+ }
122
+ 40% {
123
+ transform: translateY(-6px);
124
+ }
125
+ }
126
+
127
+ #chat-form {
128
+ display: flex;
129
+ padding: 16px;
130
+ gap: 8px;
131
+ background-color: #fff;
132
+ border-top: 1px solid #eef2f6;
133
+ }
134
+
135
+ #user-input {
136
+ flex-grow: 1;
137
+ padding: 12px 16px;
138
+ border: 2px solid #e5e7eb;
139
+ border-radius: 8px;
140
+ font-size: 14px;
141
+ transition: border-color 0.2s ease;
142
+ outline: none;
143
+ }
144
+
145
+ #user-input:focus {
146
+ border-color: #2563eb;
147
+ }
148
+
149
+ button {
150
+ padding: 12px 24px;
151
+ background-color: #2563eb;
152
+ color: white;
153
+ border: none;
154
+ border-radius: 8px;
155
+ font-weight: 500;
156
+ cursor: pointer;
157
+ transition: all 0.2s ease;
158
+ }
159
+
160
+ button:hover {
161
+ background-color: #1d4ed8;
162
+ transform: translateY(-1px);
163
+ }
164
+
165
+ button:active {
166
+ transform: translateY(0);
167
+ }
168
+ </style>
169
  </head>
170
  <body>
171
  <div id="app">
 
183
  </form>
184
  </div>
185
  </div>
186
+
187
+ <script type="module">
188
+ import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
189
+
190
+ document.addEventListener("DOMContentLoaded", async () => {
191
+ const messagesDiv = document.getElementById("messages");
192
+ const chatForm = document.getElementById("chat-form");
193
+ const userInput = document.getElementById("user-input");
194
+
195
+ const client = await Client.connect("nroggendorff/not-my-emma");
196
+
197
+ chatForm.addEventListener("submit", async (e) => {
198
+ e.preventDefault();
199
+ const userMessage = userInput.value;
200
+ if (!userMessage) return;
201
+
202
+ userInput.value = "";
203
+ addMessage(userMessage, "user");
204
+
205
+ const typingIndicator = document.createElement("div");
206
+ typingIndicator.className = "typing-indicator";
207
+ typingIndicator.innerHTML = `
208
+ <span></span>
209
+ <span></span>
210
+ <span></span>
211
+ `;
212
+ messagesDiv.appendChild(typingIndicator);
213
+ messagesDiv.scrollTop = messagesDiv.scrollHeight;
214
+
215
+ try {
216
+ const result = await client.predict("/chat", {
217
+ message: userMessage,
218
+ });
219
+
220
+ typingIndicator.remove();
221
+ addMessage(result.data, "ai");
222
+ } catch (error) {
223
+ typingIndicator.remove();
224
+ addMessage(
225
+ "Sorry, I encountered an error. Please try again.",
226
+ "ai"
227
+ );
228
+ }
229
+ });
230
+
231
+ function addMessage(message, sender) {
232
+ const messageElement = document.createElement("div");
233
+ messageElement.classList.add("message", sender);
234
+ messageElement.textContent = message;
235
+ messagesDiv.appendChild(messageElement);
236
+ messagesDiv.scrollTop = messagesDiv.scrollHeight;
237
+ }
238
+ });
239
+ </script>
240
  </body>
241
  </html>