Hugging Face's logo

Spaces:
MandlaZwane
/
Shanks
Build error

App Files Community
MandlaZwane commited on
Commit
740c135
·
verified ·
1 Parent(s): 6e45523

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +144 -212
index.html CHANGED
@@ -1,212 +1,144 @@
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>Shanks-1.1</title>
7
- <style>
8
- body {
9
- font-family: Arial, sans-serif;
10
- display: flex;
11
- justify-content: center;
12
- align-items: center;
13
- height: 100vh;
14
- background-color: #f0f0f0;
15
- margin: 0;
16
- }
17
-
18
- .chat-container {
19
- background-color: #fff;
20
- width: 100%;
21
- max-width: 400px; /* ensures it doesn't exceed 400px on larger screens */
22
- height: 600px;
23
- border-radius: 10px;
24
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
25
- display: flex;
26
- flex-direction: column;
27
- }
28
-
29
- .chat-box {
30
- flex: 1;
31
- padding: 20px;
32
- overflow-y: auto;
33
- border-bottom: 1px solid #ddd;
34
- }
35
-
36
- .chat-input {
37
- display: flex;
38
- border-top: 1px solid #ddd;
39
- padding: 10px;
40
- }
41
-
42
- .input-field {
43
- flex: 1;
44
- padding: 10px;
45
- border-radius: 15px; /* Rounded corners for input */
46
- border: 1px solid #ddd;
47
- margin-right: 10px;
48
- }
49
-
50
- .send-button {
51
- padding: 10px 20px;
52
- background-color: #4CAF50;
53
- color: white;
54
- border: none;
55
- border-radius: 15px; /* Rounded corners for button */
56
- cursor: pointer;
57
- }
58
-
59
- .message {
60
- margin-bottom: 10px;
61
- }
62
-
63
- .message.user {
64
- text-align: right;
65
- font-weight: bold;
66
- }
67
-
68
- .message.bot {
69
- text-align: left;
70
- color: #555;
71
- }
72
-
73
- @keyframes typing {
74
- from {
75
- width: 0;
76
- }
77
- }
78
-
79
- @keyframes blink-caret {
80
- from, to {
81
- border-color: transparent;
82
- }
83
- 50% {
84
- border-color: black;
85
- }
86
- }
87
-
88
- .typing-demo {
89
- width: 50ch;
90
- white-space: nowrap;
91
- overflow: hidden;
92
- border-right: 3px solid black;
93
- font-family: Courier, Monaco, monospace;
94
- animation: typing 4s steps(44) 1s infinite normal both, blink-caret 0.75s step-end infinite;
95
- }
96
-
97
- @media (max-width: 600px) {
98
- .chat-container {
99
- width: 100%;
100
- height: 100%;
101
- border-radius: 0;
102
- }
103
- }
104
-
105
- </style>
106
-
107
-
108
- </head>
109
- <body>
110
-
111
- <div class="chat-container">
112
- <div class="chat-box" id="chat-box">
113
- <div class="typing-demo">
114
- Welcome to Shanks-1.1 from Motaunginc, what can I do for you today?
115
- </div>
116
- </div>
117
- <div class="chat-input">
118
- <input type="text" id="user-input" class="input-field" placeholder="Type your message...">
119
- <button class="send-button" onclick="sendMessage()">Send</button>
120
- </div>
121
- </div>
122
-
123
- <script>
124
- function appendMessage(message, sender) {
125
- const chatBox = document.getElementById('chat-box');
126
- const messageDiv = document.createElement('div');
127
- messageDiv.classList.add('message', sender);
128
- messageDiv.textContent = message;
129
- chatBox.appendChild(messageDiv);
130
- chatBox.scrollTop = chatBox.scrollHeight;
131
-
132
- // Remove typing demo once a message is sent
133
- const typingDemo = document.querySelector('.typing-demo');
134
- if (typingDemo) {
135
- typingDemo.style.display = 'none';
136
- }
137
- }
138
-
139
- function sendMessage() {
140
- const userInput = document.getElementById('user-input').value;
141
- if (!userInput.trim()) return;
142
-
143
- appendMessage(userInput, 'user');
144
- document.getElementById('user-input').value = '';
145
-
146
- fetch('/get_response', {
147
- method: 'POST',
148
- headers: {
149
- 'Content-Type': 'application/x-www-form-urlencoded'
150
- },
151
- body: `user_input=${userInput}`
152
- })
153
- .then(response => response.json())
154
- .then(data => {
155
- appendMessage(data.response, 'bot');
156
- });
157
- }
158
-
159
- // Allow pressing "Enter" to send the message
160
- document.getElementById('user-input').addEventListener('keypress', function(e) {
161
- if (e.key === 'Enter') {
162
- sendMessage();
163
- }
164
- });
165
- </script>
166
-
167
- <script>
168
- function appendMessage(message, sender) {
169
- const chatBox = document.getElementById('chat-box');
170
- const messageDiv = document.createElement('div');
171
- messageDiv.classList.add('message', sender);
172
- messageDiv.textContent = message;
173
- chatBox.appendChild(messageDiv);
174
- chatBox.scrollTop = chatBox.scrollHeight;
175
-
176
- // Remove typing demo once a message is sent
177
- const typingDemo = document.querySelector('.typing-demo');
178
- if (typingDemo) {
179
- typingDemo.style.display = 'none';
180
- }
181
- }
182
-
183
- function sendMessage() {
184
- const userInput = document.getElementById('user-input').value;
185
- if (!userInput.trim()) return;
186
-
187
- appendMessage(userInput, 'user');
188
- document.getElementById('user-input').value = '';
189
-
190
- fetch('/get_response', {
191
- method: 'POST',
192
- headers: {
193
- 'Content-Type': 'application/x-www-form-urlencoded'
194
- },
195
- body: `user_input=${userInput}`
196
- })
197
- .then(response => response.json())
198
- .then(data => {
199
- appendMessage(data.response, 'bot');
200
- });
201
- }
202
-
203
- // Allow pressing "Enter" to send the message
204
- document.getElementById('user-input').addEventListener('keypress', function(e) {
205
- if (e.key === 'Enter') {
206
- sendMessage();
207
- }
208
- });
209
- </script>
210
-
211
- </body>
212
- </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>Shanks-1.1</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ display: flex;
11
+ justify-content: center;
12
+ align-items: center;
13
+ height: 100vh;
14
+ background-color: #f0f0f0;
15
+ margin: 0;
16
+ }
17
+
18
+ .chat-container {
19
+ background-color: #fff;
20
+ width: 100%;
21
+ max-width: 400px;
22
+ height: 600px;
23
+ border-radius: 10px;
24
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
25
+ display: flex;
26
+ flex-direction: column;
27
+ }
28
+
29
+ .chat-box {
30
+ flex: 1;
31
+ padding: 20px;
32
+ overflow-y: auto;
33
+ border-bottom: 1px solid #ddd;
34
+ }
35
+
36
+ .chat-input {
37
+ display: flex;
38
+ border-top: 1px solid #ddd;
39
+ padding: 10px;
40
+ }
41
+
42
+ .input-field {
43
+ flex: 1;
44
+ padding: 10px;
45
+ border-radius: 15px;
46
+ border: 1px solid #ddd;
47
+ margin-right: 10px;
48
+ }
49
+
50
+ .send-button {
51
+ padding: 10px 20px;
52
+ background-color: #4CAF50;
53
+ color: white;
54
+ border: none;
55
+ border-radius: 15px;
56
+ cursor: pointer;
57
+ }
58
+
59
+ .message {
60
+ margin-bottom: 10px;
61
+ }
62
+
63
+ .message.user {
64
+ text-align: right;
65
+ font-weight: bold;
66
+ }
67
+
68
+ .message.bot {
69
+ text-align: left;
70
+ color: #555;
71
+ }
72
+
73
+ @keyframes typing {
74
+ from {
75
+ width: 0;
76
+ }
77
+ }
78
+
79
+ @keyframes blink-caret {
80
+ from, to {
81
+ border-color: transparent;
82
+ }
83
+ 50% {
84
+ border-color: black;
85
+ }
86
+ }
87
+
88
+ .typing-demo {
89
+ width: 50ch;
90
+ white-space: nowrap;
91
+ overflow: hidden;
92
+ border-right: 3px solid black;
93
+ font-family: Courier, Monaco, monospace;
94
+ animation: typing 4s steps(44) 1s infinite normal both, blink-caret 0.75s step-end infinite;
95
+ }
96
+ </style>
97
+ </head>
98
+ <body>
99
+
100
+ <div class="chat-container">
101
+ <div class="chat-box" id="chat-box">
102
+ <div class="typing-demo">
103
+ Welcome to Shanks-1.1 from Motaunginc, what can I do for you today?
104
+ </div>
105
+ </div>
106
+ <div class="chat-input">
107
+ <input type="text" id="user-input" class="input-field" placeholder="Type your message...">
108
+ <button class="send-button" onclick="sendMessage()">Send</button>
109
+ </div>
110
+ </div>
111
+
112
+ <script>
113
+ function sendMessage() {
114
+ const userInput = document.getElementById('user-input').value;
115
+ fetch('/generate', {
116
+ method: 'POST',
117
+ headers: {
118
+ 'Content-Type': 'application/x-www-form-urlencoded'
119
+ },
120
+ body: `user_input=${userInput}`
121
+ })
122
+ .then(response => response.json())
123
+ .then(data => {
124
+ const message = document.createElement('div');
125
+ message.classList.add('message', 'bot');
126
+ message.textContent = data.response || "Error generating response";
127
+ document.querySelector('.chat-box').appendChild(message);
128
+ document.querySelector('.chat-box').scrollTop = document.querySelector('.chat-box').scrollHeight;
129
+ });
130
+
131
+ const typingDemo = document.querySelector('.typing-demo');
132
+ if (typingDemo) {
133
+ typingDemo.style.display = 'none';
134
+ }
135
+ }
136
+
137
+ document.getElementById('user-input').addEventListener('keypress', function(e) {
138
+ if (e.key === 'Enter') {
139
+ sendMessage();
140
+ }
141
+ });
142
+ </script>
143
+ </body>
144
+ </html>