h4sch commited on
Commit
e8dcbde
·
verified ·
1 Parent(s): db8c575

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +33 -49
index.html CHANGED
@@ -93,57 +93,47 @@
93
  </div>
94
 
95
  <script>
96
- // Textarea height adjustment
97
  function adjustHeight(el) {
98
  el.style.height = "auto";
99
  el.style.height = (el.scrollHeight) + "px";
 
100
  }
101
 
102
- // API call to Hugging Face Space
103
  async function queryLlamaMaverick(prompt) {
104
  const API_URL = "https://openfree-llama-4-maverick-17b-research.hf.space/api/predict";
105
-
 
106
  try {
107
  const response = await fetch(API_URL, {
108
  method: "POST",
109
- headers: {
110
- "Content-Type": "application/json"
111
- },
112
- body: JSON.stringify({
113
- data: [prompt]
114
- }),
115
  });
116
-
117
- if (!response.ok) {
118
- throw new Error(`API request failed with status ${response.status}`);
119
- }
120
-
121
  const result = await response.json();
122
-
123
- // The response structure might need adjustment based on the actual API response
124
- if (result.data && result.data.length > 0) {
125
- return result.data[0];
126
- } else {
127
- throw new Error("Unexpected API response format");
128
- }
129
-
130
  } catch (error) {
131
  console.error("API Error:", error);
132
  throw error;
133
  }
134
  }
135
 
136
- // Send message function
137
  async function sendMessage(message) {
138
  const chatHistory = document.getElementById('chat-history');
139
  const typingIndicator = document.getElementById('typing-indicator');
140
  const submitBtn = document.querySelector('#chat-form button[type="submit"]');
141
-
142
- // Disable submit button during request
143
  submitBtn.disabled = true;
144
  submitBtn.classList.add('opacity-50');
145
-
146
- // Add user message
147
  chatHistory.innerHTML += `<div class="chat-user p-3 rounded">
148
  <strong class="flex items-center gap-1">
149
  <span class="bg-blue-500 text-white rounded-full w-6 h-6 flex items-center justify-center">👤</span>
@@ -151,16 +141,12 @@ async function sendMessage(message) {
151
  </strong>
152
  ${message}
153
  </div>`;
154
-
155
- // Show typing indicator
156
  typingIndicator.classList.remove('hidden');
157
  chatHistory.scrollTop = chatHistory.scrollHeight;
158
-
159
  try {
160
- // Call the API
161
  const response = await queryLlamaMaverick(message);
162
-
163
- // Hide typing indicator and show response
164
  typingIndicator.classList.add('hidden');
165
  chatHistory.innerHTML += `<div class="chat-ai p-3 rounded">
166
  <strong class="flex items-center gap-1">
@@ -169,53 +155,51 @@ async function sendMessage(message) {
169
  </strong>
170
  ${response || "Ich konnte keine Antwort generieren."}
171
  </div>`;
172
-
173
  } catch (error) {
174
- console.error("Error:", error);
175
  typingIndicator.classList.add('hidden');
176
  chatHistory.innerHTML += `<div class="chat-error p-3 rounded">
177
  <strong class="flex items-center gap-1">
178
  <span class="bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center">⚠️</span>
179
  Fehler:
180
  </strong>
181
- Entschuldigung, es gab ein Problem bei der Verbindung zum KI-Modell. Bitte versuchen Sie es in einigen Minuten erneut.
182
  <div class="text-xs mt-1 text-red-600">${error.message || 'Unbekannter Fehler'}</div>
183
  </div>`;
184
  } finally {
185
- // Re-enable submit button
186
  submitBtn.disabled = false;
187
  submitBtn.classList.remove('opacity-50');
188
  chatHistory.scrollTop = chatHistory.scrollHeight;
189
  }
190
  }
191
 
192
- // Event listeners
193
  window.addEventListener('DOMContentLoaded', () => {
194
  const chatForm = document.getElementById('chat-form');
195
  const inputEl = document.getElementById('input');
196
  const clearInputBtn = document.getElementById('clear-input');
197
  const clearBtn = document.getElementById('clear-btn');
198
-
199
- // Form submission
200
  chatForm.addEventListener('submit', (e) => {
201
  e.preventDefault();
202
  const message = inputEl.value.trim();
 
203
  if (message) {
204
  sendMessage(message);
205
  inputEl.value = '';
206
  adjustHeight(inputEl);
207
  }
208
  });
209
-
210
- // Clear input button
211
  clearInputBtn.addEventListener('click', () => {
 
212
  inputEl.value = '';
213
  adjustHeight(inputEl);
214
  inputEl.focus();
215
  });
216
-
217
- // Clear chat button
218
  clearBtn.addEventListener('click', () => {
 
219
  if (confirm('Möchten Sie den gesamten Chatverlauf wirklich löschen?')) {
220
  document.getElementById('chat-history').innerHTML = `<div class="chat-ai p-3 rounded">
221
  <strong class="flex items-center gap-1">
@@ -226,19 +210,19 @@ window.addEventListener('DOMContentLoaded', () => {
226
  </div>`;
227
  }
228
  });
229
-
230
- // Allow Shift+Enter for new lines, Enter to submit
231
  inputEl.addEventListener('keydown', (e) => {
232
  if (e.key === 'Enter' && !e.shiftKey) {
233
  e.preventDefault();
 
234
  chatForm.dispatchEvent(new Event('submit'));
235
  }
236
  });
237
-
238
- // Focus input on page load
239
  inputEl.focus();
 
240
  });
241
  </script>
242
 
243
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=h4sch/m-chat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
244
- </html>
 
93
  </div>
94
 
95
  <script>
 
96
  function adjustHeight(el) {
97
  el.style.height = "auto";
98
  el.style.height = (el.scrollHeight) + "px";
99
+ console.log("adjustHeight triggered:", el.scrollHeight);
100
  }
101
 
 
102
  async function queryLlamaMaverick(prompt) {
103
  const API_URL = "https://openfree-llama-4-maverick-17b-research.hf.space/api/predict";
104
+ console.log("Querying API with prompt:", prompt);
105
+
106
  try {
107
  const response = await fetch(API_URL, {
108
  method: "POST",
109
+ headers: { "Content-Type": "application/json" },
110
+ body: JSON.stringify({ data: [prompt] }),
 
 
 
 
111
  });
112
+ console.log("API response status:", response.status);
113
+
114
+ if (!response.ok) throw new Error(`API request failed with status ${response.status}`);
115
+
 
116
  const result = await response.json();
117
+ console.log("API response JSON:", result);
118
+
119
+ if (result.data && result.data.length > 0) return result.data[0];
120
+ else throw new Error("Unexpected API response format");
121
+
 
 
 
122
  } catch (error) {
123
  console.error("API Error:", error);
124
  throw error;
125
  }
126
  }
127
 
 
128
  async function sendMessage(message) {
129
  const chatHistory = document.getElementById('chat-history');
130
  const typingIndicator = document.getElementById('typing-indicator');
131
  const submitBtn = document.querySelector('#chat-form button[type="submit"]');
132
+
133
+ console.log("Sending message:", message);
134
  submitBtn.disabled = true;
135
  submitBtn.classList.add('opacity-50');
136
+
 
137
  chatHistory.innerHTML += `<div class="chat-user p-3 rounded">
138
  <strong class="flex items-center gap-1">
139
  <span class="bg-blue-500 text-white rounded-full w-6 h-6 flex items-center justify-center">👤</span>
 
141
  </strong>
142
  ${message}
143
  </div>`;
144
+
 
145
  typingIndicator.classList.remove('hidden');
146
  chatHistory.scrollTop = chatHistory.scrollHeight;
147
+
148
  try {
 
149
  const response = await queryLlamaMaverick(message);
 
 
150
  typingIndicator.classList.add('hidden');
151
  chatHistory.innerHTML += `<div class="chat-ai p-3 rounded">
152
  <strong class="flex items-center gap-1">
 
155
  </strong>
156
  ${response || "Ich konnte keine Antwort generieren."}
157
  </div>`;
158
+
159
  } catch (error) {
160
+ console.error("Send Error:", error);
161
  typingIndicator.classList.add('hidden');
162
  chatHistory.innerHTML += `<div class="chat-error p-3 rounded">
163
  <strong class="flex items-center gap-1">
164
  <span class="bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center">⚠️</span>
165
  Fehler:
166
  </strong>
167
+ Entschuldigung, es gab ein Problem bei der Verbindung zum KI-Modell.
168
  <div class="text-xs mt-1 text-red-600">${error.message || 'Unbekannter Fehler'}</div>
169
  </div>`;
170
  } finally {
 
171
  submitBtn.disabled = false;
172
  submitBtn.classList.remove('opacity-50');
173
  chatHistory.scrollTop = chatHistory.scrollHeight;
174
  }
175
  }
176
 
 
177
  window.addEventListener('DOMContentLoaded', () => {
178
  const chatForm = document.getElementById('chat-form');
179
  const inputEl = document.getElementById('input');
180
  const clearInputBtn = document.getElementById('clear-input');
181
  const clearBtn = document.getElementById('clear-btn');
182
+
 
183
  chatForm.addEventListener('submit', (e) => {
184
  e.preventDefault();
185
  const message = inputEl.value.trim();
186
+ console.log("Form submitted. Message:", message);
187
  if (message) {
188
  sendMessage(message);
189
  inputEl.value = '';
190
  adjustHeight(inputEl);
191
  }
192
  });
193
+
 
194
  clearInputBtn.addEventListener('click', () => {
195
+ console.log("Input cleared");
196
  inputEl.value = '';
197
  adjustHeight(inputEl);
198
  inputEl.focus();
199
  });
200
+
 
201
  clearBtn.addEventListener('click', () => {
202
+ console.log("Chat cleared by user");
203
  if (confirm('Möchten Sie den gesamten Chatverlauf wirklich löschen?')) {
204
  document.getElementById('chat-history').innerHTML = `<div class="chat-ai p-3 rounded">
205
  <strong class="flex items-center gap-1">
 
210
  </div>`;
211
  }
212
  });
213
+
 
214
  inputEl.addEventListener('keydown', (e) => {
215
  if (e.key === 'Enter' && !e.shiftKey) {
216
  e.preventDefault();
217
+ console.log("Enter pressed. Submitting form.");
218
  chatForm.dispatchEvent(new Event('submit'));
219
  }
220
  });
221
+
 
222
  inputEl.focus();
223
+ console.log("Chat initialized");
224
  });
225
  </script>
226
 
227
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=h4sch/m-chat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
228
+ </html>