KillerKing93/Transformers-TextEngine-OpenAPI
0
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>Simple Chat Interface - Qwen3</title>7 <style>8 * {9 margin: 0;10 padding: 0;11 box-sizing: border-box;12 }13 14 body {15 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;16 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);17 color: #333;18 min-height: 100vh;19 display: flex;20 align-items: center;21 justify-content: center;22 padding: 20px;23 }24 25 .chat-container {26 background: white;27 border-radius: 20px;28 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);29 width: 100%;30 max-width: 800px;31 height: 600px;32 display: flex;33 flex-direction: column;34 overflow: hidden;35 }36 37 .header {38 background: #4a5568;39 color: white;40 padding: 20px;41 text-align: center;42 }43 44 .header h1 {45 font-size: 1.5rem;46 margin-bottom: 5px;47 }48 49 .header p {50 opacity: 0.9;51 font-size: 0.9rem;52 }53 54 .chat-messages {55 flex: 1;56 padding: 20px;57 overflow-y: auto;58 background: #f8fafc;59 }60 61 .message {62 margin-bottom: 15px;63 padding: 12px 16px;64 border-radius: 18px;65 max-width: 80%;66 word-wrap: break-word;67 line-height: 1.4;68 }69 70 .user-message {71 background: #4299e1;72 color: white;73 margin-left: auto;74 text-align: right;75 }76 77 .assistant-message {78 background: white;79 border: 1px solid #e2e8f0;80 color: #2d3748;81 }82 83 .message .sender {84 font-weight: 600;85 font-size: 0.8rem;86 margin-bottom: 5px;87 opacity: 0.7;88 }89 90 .input-area {91 padding: 20px;92 background: white;93 border-top: 1px solid #e2e8f0;94 }95 96 .input-group {97 display: flex;98 gap: 10px;99 margin-bottom: 15px;100 }101 102 .input-field {103 flex: 1;104 padding: 12px 16px;105 border: 2px solid #e2e8f0;106 border-radius: 25px;107 font-size: 1rem;108 outline: none;109 transition: border-color 0.3s;110 }111 112 .input-field:focus {113 border-color: #4299e1;114 }115 116 .send-button {117 background: #4299e1;118 color: white;119 border: none;120 border-radius: 50%;121 width: 50px;122 height: 50px;123 cursor: pointer;124 font-size: 1.2rem;125 transition: all 0.3s;126 }127 128 .send-button:hover {129 background: #3182ce;130 transform: scale(1.05);131 }132 133 .send-button:disabled {134 background: #cbd5e0;135 cursor: not-allowed;136 transform: none;137 }138 139 .controls {140 display: flex;141 gap: 10px;142 align-items: center;143 }144 145 .control-group {146 display: flex;147 align-items: center;148 gap: 5px;149 }150 151 .control-label {152 font-size: 0.9rem;153 color: #4a5568;154 min-width: 80px;155 }156 157 select {158 padding: 6px 10px;159 border: 1px solid #e2e8f0;160 border-radius: 6px;161 background: white;162 font-size: 0.9rem;163 }164 165 .status {166 text-align: center;167 padding: 10px;168 background: #f7fafc;169 border-radius: 10px;170 font-size: 0.9rem;171 color: #4a5568;172 }173 174 .status.connected {175 color: #48bb78;176 }177 178 .status.error {179 color: #fc8181;180 }181 182 .loading {183 display: inline-block;184 width: 16px;185 height: 16px;186 border: 2px solid #f3f3f3;187 border-top: 2px solid #4299e1;188 border-radius: 50%;189 animation: spin 1s linear infinite;190 margin-left: 10px;191 }192 193 @keyframes spin {194 0% { transform: rotate(0deg); }195 100% { transform: rotate(360deg); }196 }197 198 .typing-indicator {199 display: none;200 padding: 12px 16px;201 background: white;202 border: 1px solid #e2e8f0;203 border-radius: 18px;204 max-width: 80%;205 margin-bottom: 15px;206 }207 208 .typing-indicator.show {209 display: block;210 }211 212 .typing-dots {213 display: inline-flex;214 gap: 4px;215 }216 217 .typing-dots span {218 width: 8px;219 height: 8px;220 background: #4299e1;221 border-radius: 50%;222 animation: typing 1.4s infinite;223 }224 225 .typing-dots span:nth-child(2) {226 animation-delay: 0.2s;227 }228 229 .typing-dots span:nth-child(3) {230 animation-delay: 0.4s;231 }232 233 @keyframes typing {234 0%, 60%, 100% {235 transform: translateY(0);236 }237 30% {238 transform: translateY(-10px);239 }240 }241 242 .error-message {243 background: #fed7d7;244 color: #c53030;245 padding: 10px;246 border-radius: 8px;247 margin-bottom: 10px;248 font-size: 0.9rem;249 }250 251 .clear-button {252 background: #e2e8f0;253 color: #4a5568;254 border: none;255 border-radius: 6px;256 padding: 6px 12px;257 font-size: 0.8rem;258 cursor: pointer;259 }260 261 .clear-button:hover {262 background: #cbd5e0;263 }264 </style>265</head>266<body>267 <div class="chat-container">268 <div class="header">269 <h1>💬 Qwen3 Chat Assistant</h1>270 <p>Simple and direct chat interface</p>271 </div>272 273 <div class="chat-messages" id="chatMessages">274 <div class="message assistant-message">275 <div class="sender">Assistant</div>276 Hello! I'm Qwen3, your AI assistant. How can I help you today? Feel free to ask me anything!277 </div>278 </div>279 280 <div class="typing-indicator" id="typingIndicator">281 <div class="typing-dots">282 <span></span>283 <span></span>284 <span></span>285 </div>286 </div>287 288 <div class="input-area">289 <div class="status" id="status">290 Checking connection...291 </div>292 293 <div class="input-group">294 <input295 type="text"296 id="messageInput"297 class="input-field"298 placeholder="Type your message here..."299 value="Hello! Can you introduce yourself?"300 >301 <button id="sendButton" class="send-button" onclick="sendMessage()">302 ➤303 </button>304 </div>305 306 <div class="controls">307 <div class="control-group">308 <label class="control-label">Max tokens:</label>309 <select id="maxTokens">310 <option value="20">20</option>311 <option value="50" selected>50</option>312 <option value="100">100</option>313 <option value="200">200</option>314 </select>315 </div>316 317 <div class="control-group">318 <label class="control-label">Temperature:</label>319 <select id="temperature">320 <option value="0.1">Precise</option>321 <option value="0.7" selected>Balanced</option>322 <option value="1.0">Creative</option>323 </select>324 </div>325 326 <button class="clear-button" onclick="clearChat()">Clear Chat</button>327 </div>328 </div>329 </div>330 331 <script>332 // Configuration333 const API_BASE = window.location.origin;334 let isLoading = false;335 336 // Initialize337 document.addEventListener('DOMContentLoaded', function() {338 checkConnection();339 340 // Allow Enter key to send message341 document.getElementById('messageInput').addEventListener('keypress', function(e) {342 if (e.key === 'Enter' && !e.shiftKey) {343 e.preventDefault();344 sendMessage();345 }346 });347 348 // Focus input field349 document.getElementById('messageInput').focus();350 });351 352 // Check connection353 async function checkConnection() {354 const statusEl = document.getElementById('status');355 statusEl.innerHTML = 'Checking connection...';356 357 try {358 const response = await fetch(`${API_BASE}/health`, {359 method: 'GET',360 timeout: 5000361 });362 363 if (response.ok) {364 const data = await response.json();365 statusEl.innerHTML = `✅ Connected - Model: ${data.modelId ? data.modelId.split('/').pop() : 'Unknown'}`;366 statusEl.className = 'status connected';367 } else {368 throw new Error(`HTTP ${response.status}`);369 }370 } catch (error) {371 statusEl.innerHTML = `❌ Connection failed: ${error.message}`;372 statusEl.className = 'status error';373 }374 }375 376 // Send message377 async function sendMessage() {378 if (isLoading) return;379 380 const messageInput = document.getElementById('messageInput');381 const message = messageInput.value.trim();382 383 if (!message) {384 return;385 }386 387 const sendButton = document.getElementById('sendButton');388 const typingIndicator = document.getElementById('typingIndicator');389 const chatMessages = document.getElementById('chatMessages');390 const maxTokens = parseInt(document.getElementById('maxTokens').value);391 const temperature = parseFloat(document.getElementById('temperature').value);392 393 // Add user message394 const userMessage = document.createElement('div');395 userMessage.className = 'message user-message';396 userMessage.innerHTML = `<div class="sender">You</div>${message}`;397 chatMessages.appendChild(userMessage);398 399 // Clear input and show loading400 messageInput.value = '';401 sendButton.disabled = true;402 sendButton.innerHTML = '';403 sendButton.classList.add('loading');404 typingIndicator.classList.add('show');405 isLoading = true;406 407 // Scroll to bottom408 chatMessages.scrollTop = chatMessages.scrollHeight;409 410 try {411 console.log('Sending request to:', `${API_BASE}/debug/simple-chat`);412 console.log('Request body:', JSON.stringify({ message: message }));413 414 const response = await fetch(`${API_BASE}/debug/simple-chat`, {415 method: 'POST',416 headers: {417 'Content-Type': 'application/json',418 },419 body: JSON.stringify({420 message: message421 }),422 timeout: 30000423 });424 425 console.log('Response status:', response.status);426 427 if (!response.ok) {428 throw new Error(`HTTP ${response.status}: ${response.statusText}`);429 }430 431 const data = await response.json();432 console.log('Response data:', data);433 434 // Hide typing indicator435 typingIndicator.classList.remove('show');436 437 if (data.status === 'success') {438 // Add assistant response439 const assistantMessage = document.createElement('div');440 assistantMessage.className = 'message assistant-message';441 assistantMessage.innerHTML = `<div class="sender">Assistant</div>${data.response}`;442 chatMessages.appendChild(assistantMessage);443 444 console.log('Assistant response length:', data.response.length);445 } else {446 // Show error447 const errorMessage = document.createElement('div');448 errorMessage.className = 'error-message';449 errorMessage.innerHTML = `Error: ${data.error}`;450 chatMessages.appendChild(errorMessage);451 452 console.error('API Error:', data.error);453 }454 455 } catch (error) {456 console.error('Request error:', error);457 458 // Hide typing indicator459 typingIndicator.classList.remove('show');460 461 // Show error message462 const errorMessage = document.createElement('div');463 errorMessage.className = 'error-message';464 errorMessage.innerHTML = `Network error: ${error.message}. Please try again.`;465 chatMessages.appendChild(errorMessage);466 } finally {467 // Reset loading state468 sendButton.disabled = false;469 sendButton.innerHTML = '➤';470 sendButton.classList.remove('loading');471 isLoading = false;472 473 // Scroll to bottom474 chatMessages.scrollTop = chatMessages.scrollHeight;475 }476 }477 478 // Clear chat479 function clearChat() {480 const chatMessages = document.getElementById('chatMessages');481 chatMessages.innerHTML = `482 <div class="message assistant-message">483 <div class="sender">Assistant</div>484 Hello! I'm Qwen3, your AI assistant. How can I help you today? Feel free to ask me anything!485 </div>486 `;487 488 // Focus input489 document.getElementById('messageInput').focus();490 }491 492 // Auto-check connection every 30 seconds493 setInterval(checkConnection, 30000);494 </script>495</body>496</html>