Hugging Face's logo

Spaces:
NihalGazi
/
jenibot-control-panel
Running

App Files Community
NihalGazi commited on
Commit
44ac2cd
·
verified ·
1 Parent(s): b58a04a

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +233 -18
index.html CHANGED
@@ -1,19 +1,234 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </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>Chatbot Configuration</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ background-color: #121212;
11
+ color: #e0e0e0;
12
+ margin: 0;
13
+ padding: 20px;
14
+ }
15
+
16
+ h1 {
17
+ color: #ff9800;
18
+ }
19
+
20
+ h2 {
21
+ color: #ff5722;
22
+ }
23
+
24
+ label {
25
+ display: block;
26
+ margin-bottom: 8px;
27
+ font-size: 16px;
28
+ }
29
+
30
+ input[type="text"] {
31
+ width: 100%;
32
+ padding: 10px;
33
+ margin-bottom: 15px;
34
+ border: none;
35
+ border-radius: 8px;
36
+ background-color: #333;
37
+ color: #e0e0e0;
38
+ font-size: 16px;
39
+ }
40
+
41
+ input[type="text"]:focus {
42
+ outline: none;
43
+ background-color: #444;
44
+ }
45
+
46
+ button {
47
+ background-color: #6200ea;
48
+ color: #fff;
49
+ border: none;
50
+ border-radius: 8px;
51
+ padding: 10px 20px;
52
+ margin: 5px;
53
+ font-size: 16px;
54
+ cursor: pointer;
55
+ transition: background-color 0.3s, transform 0.2s;
56
+ }
57
+
58
+ button:hover {
59
+ background-color: #3700b3;
60
+ }
61
+
62
+ button:active {
63
+ transform: scale(0.98);
64
+ }
65
+
66
+ #loadingNotification {
67
+ display: none; /* Hidden by default */
68
+ position: fixed;
69
+ top: 20px;
70
+ left: 50%;
71
+ transform: translateX(-50%);
72
+ background-color: #000;
73
+ color: #ff5722;
74
+ padding: 15px 30px;
75
+ border-radius: 20px;
76
+ font-size: 18px;
77
+ z-index: 1000;
78
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
79
+ animation: fadeInOut 2s infinite;
80
+ }
81
+
82
+ @keyframes fadeInOut {
83
+ 0% { opacity: 0; }
84
+ 50% { opacity: 1; }
85
+ 100% { opacity: 0; }
86
+ }
87
+
88
+ #output {
89
+ background-color: #222;
90
+ color: #e0e0e0;
91
+ padding: 10px;
92
+ border-radius: 8px;
93
+ font-size: 16px;
94
+ }
95
+ </style>
96
+ </head>
97
+ <body>
98
+ <h1>Chatbot Configuration</h1>
99
+ <div id="loadingNotification">Loading...</div>
100
+
101
+ <label for="character">Chatbot Character:</label>
102
+ <input type="text" id="character">
103
+
104
+ <label for="knowledge">Chatbot Knowledge:</label>
105
+ <input type="text" id="knowledge">
106
+
107
+ <label for="style">Chatbot Chatting Style:</label>
108
+ <input type="text" id="style">
109
+
110
+ <button id="getCharacter">Get Character</button>
111
+ <button id="getKnowledge">Get Knowledge</button>
112
+ <button id="getStyle">Get Style</button>
113
+ <button id="submit">Submit</button>
114
+
115
+ <h2>Output</h2>
116
+ <p id="output"></p>
117
+
118
+
119
+ <script type="module">
120
+ const outputElement = document.getElementById('output');
121
+ const loadingNotification = document.getElementById('loadingNotification');
122
+ showLoading()
123
+
124
+ import { client } from "https://cdn.jsdelivr.net/npm/@gradio/client@latest";
125
+
126
+ const app = await client("NihalGazi/Jeni-bot");
127
+
128
+
129
+
130
+ getData();
131
+ console.log("ok");
132
+
133
+ function showLoading() {
134
+ loadingNotification.style.display = 'block';
135
+ }
136
+
137
+ function hideLoading() {
138
+ loadingNotification.style.display = 'none';
139
+ }
140
+
141
+
142
+ async function getData() {
143
+
144
+
145
+ try {
146
+ const result = await app.predict("/on_get_character", []);
147
+ document.getElementById("character").value = result.data[0];
148
+ } finally {
149
+ try {
150
+ const result = await app.predict("/on_get_knowledge", []);
151
+ document.getElementById("knowledge").value = result.data[0];
152
+ } finally {
153
+ try {
154
+ const result = await app.predict("/on_get_style", []);
155
+ document.getElementById("style").value = result.data[0];
156
+ } finally {
157
+ hideLoading();
158
+ }
159
+ }
160
+
161
+ }
162
+ }
163
+
164
+
165
+
166
+ async function getCharacter() {
167
+ showLoading();
168
+ try {
169
+ const result = await app.predict("/on_get_character", []);
170
+ outputElement.textContent = result.data[0];
171
+ } finally {
172
+ hideLoading();
173
+ }
174
+ }
175
+
176
+ async function getKnowledge() {
177
+ showLoading();
178
+ try {
179
+ const result = await app.predict("/on_get_knowledge", []);
180
+ outputElement.textContent = result.data[0];
181
+ } finally {
182
+ hideLoading();
183
+ }
184
+ }
185
+
186
+ async function getStyle() {
187
+ showLoading();
188
+ try {
189
+ const result = await app.predict("/on_get_style", []);
190
+ outputElement.textContent = result.data[0];
191
+ } finally {
192
+ hideLoading();
193
+ }
194
+ }
195
+
196
+ async function submitConfig() {
197
+ showLoading();
198
+ try {
199
+ const character = document.getElementById('character').value;
200
+ const knowledge = document.getElementById('knowledge').value;
201
+ const style = document.getElementById('style').value;
202
+
203
+ const result = await app.predict("/on_submit", [character, knowledge, style]);
204
+ outputElement.textContent = "Updated successfully!";
205
+ } finally {
206
+ hideLoading();
207
+ }
208
+ }
209
+
210
+ async function fetchInitialValues() {
211
+ showLoading();
212
+ try {
213
+ const characterResult = await app.predict("/on_get_character", []);
214
+ const knowledgeResult = await app.predict("/on_get_knowledge", []);
215
+ const styleResult = await app.predict("/on_get_style", []);
216
+
217
+ document.getElementById('character').value = characterResult.data[0];
218
+ document.getElementById('knowledge').value = knowledgeResult.data[0];
219
+ document.getElementById('style').value = styleResult.data[0];
220
+ } finally {
221
+ hideLoading();
222
+ }
223
+ }
224
+
225
+ document.getElementById('getCharacter').addEventListener('click', getCharacter);
226
+ document.getElementById('getKnowledge').addEventListener('click', getKnowledge);
227
+ document.getElementById('getStyle').addEventListener('click', getStyle);
228
+ document.getElementById('submit').addEventListener('click', submitConfig);
229
+
230
+ // Fetch initial values before page loads
231
+ window.addEventListener('load', fetchInitialValues);
232
+ </script>
233
+ </body>
234
  </html>