Add 1 files
Browse files- 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 |
-
|
111 |
-
},
|
112 |
-
body: JSON.stringify({
|
113 |
-
data: [prompt]
|
114 |
-
}),
|
115 |
});
|
116 |
-
|
117 |
-
|
118 |
-
|
119 |
-
|
120 |
-
|
121 |
const result = await response.json();
|
122 |
-
|
123 |
-
|
124 |
-
if (result.data && result.data.length > 0)
|
125 |
-
|
126 |
-
|
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 |
-
|
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.
|
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>
|