| | <!DOCTYPE html> |
| | <html lang="ru"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Qwen Turbo AI</title> |
| | |
| | <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> |
| | <style> |
| | :root { |
| | --bg-color: #212121; |
| | --chat-bg: #2f2f2f; |
| | --user-msg-bg: #303030; |
| | --ai-msg-bg: #212121; |
| | --accent: #10a37f; |
| | --text: #ececec; |
| | } |
| | body { margin: 0; font-family: 'Segoe UI', Roboto, sans-serif; background: var(--bg-color); color: var(--text); display: flex; flex-direction: column; height: 100vh; } |
| | |
| | |
| | header { padding: 15px; background: #171717; border-bottom: 1px solid #333; display: flex; align-items: center; justify-content: space-between; } |
| | h1 { margin: 0; font-size: 1.2rem; } |
| | |
| | |
| | #chat-container { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 20px; scroll-behavior: smooth; } |
| | |
| | .message { display: flex; gap: 15px; max-width: 800px; margin: 0 auto; width: 100%; } |
| | .avatar { width: 30px; height: 30px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9rem; flex-shrink: 0; } |
| | .user-avatar { background: #555; } |
| | .ai-avatar { background: var(--accent); } |
| | |
| | .content { line-height: 1.6; font-size: 1rem; padding-top: 4px; overflow-wrap: break-word; width: 100%; } |
| | .content p { margin-top: 0; } |
| | .content pre { background: #000; padding: 10px; border-radius: 5px; overflow-x: auto; } |
| | |
| | |
| | #input-area { background: #171717; padding: 20px; border-top: 1px solid #333; } |
| | .input-wrapper { max-width: 800px; margin: 0 auto; position: relative; } |
| | |
| | textarea { width: 100%; background: #40414f; border: 1px solid #555; color: white; padding: 12px 45px 12px 15px; border-radius: 10px; resize: none; outline: none; height: 50px; font-family: inherit; font-size: 1rem; box-sizing: border-box; } |
| | textarea:focus { border-color: var(--accent); } |
| | |
| | button#send-btn { position: absolute; right: 10px; bottom: 10px; background: transparent; border: none; cursor: pointer; color: #ccc; } |
| | button#send-btn:hover { color: white; } |
| | |
| | |
| | .controls { max-width: 800px; margin: 0 auto 10px; display: flex; gap: 15px; font-size: 0.9rem; color: #aaa; } |
| | .checkbox-wrapper { display: flex; align-items: center; gap: 5px; cursor: pointer; } |
| | .checkbox-wrapper input { cursor: pointer; accent-color: var(--accent); } |
| | |
| | |
| | .typing::after { content: '▋'; animation: blink 1s infinite; margin-left: 2px; } |
| | @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } |
| | </style> |
| | </head> |
| | <body> |
| |
|
| | <header> |
| | <h1>🤖 Qwen Turbo AI</h1> |
| | <div style="font-size: 0.8rem; color: #777;">Powered by HuggingFace</div> |
| | </header> |
| |
|
| | <div id="chat-container"> |
| | |
| | <div class="message"> |
| | <div class="avatar ai-avatar">AI</div> |
| | <div class="content">Привет! Я быстрый ИИ на базе Qwen 2.5. Могу искать информацию в интернете. Чем помочь?</div> |
| | </div> |
| | </div> |
| |
|
| | <div id="input-area"> |
| | <div class="controls"> |
| | <label class="checkbox-wrapper"> |
| | <input type="checkbox" id="web-search"> 🌐 Поиск в интернете (Tavily) |
| | </label> |
| | </div> |
| | <div class="input-wrapper"> |
| | <textarea id="user-input" placeholder="Введите сообщение..." onkeydown="handleKey(event)"></textarea> |
| | <button id="send-btn" onclick="sendMessage()">➤</button> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | const chatContainer = document.getElementById('chat-container'); |
| | const userInput = document.getElementById('user-input'); |
| | const webSearch = document.getElementById('web-search'); |
| | |
| | let history = []; |
| | |
| | function handleKey(e) { |
| | if (e.key === 'Enter' && !e.shiftKey) { |
| | e.preventDefault(); |
| | sendMessage(); |
| | } |
| | } |
| | |
| | async function sendMessage() { |
| | const text = userInput.value.trim(); |
| | if (!text) return; |
| | |
| | |
| | appendMessage('user', text); |
| | userInput.value = ''; |
| | |
| | |
| | const aiContentDiv = appendMessage('ai', ''); |
| | aiContentDiv.classList.add('typing'); |
| | |
| | |
| | const messagesToSend = [...history, { role: "user", content: text }]; |
| | |
| | try { |
| | |
| | const response = await fetch('/v1/chat/completions', { |
| | method: 'POST', |
| | headers: { 'Content-Type': 'application/json' }, |
| | body: JSON.stringify({ |
| | messages: messagesToSend, |
| | stream: true, |
| | use_search: webSearch.checked |
| | }) |
| | }); |
| | |
| | |
| | const reader = response.body.getReader(); |
| | const decoder = new TextDecoder(); |
| | let fullText = ""; |
| | |
| | while (true) { |
| | const { done, value } = await reader.read(); |
| | if (done) break; |
| | |
| | const chunk = decoder.decode(value, { stream: true }); |
| | const lines = chunk.split('\n'); |
| | |
| | for (const line of lines) { |
| | if (line.startsWith('data: ')) { |
| | const jsonStr = line.slice(6); |
| | if (jsonStr === '[DONE]') break; |
| | |
| | try { |
| | const json = JSON.parse(jsonStr); |
| | const delta = json.choices[0].delta.content; |
| | if (delta) { |
| | fullText += delta; |
| | |
| | aiContentDiv.innerHTML = marked.parse(fullText); |
| | chatContainer.scrollTop = chatContainer.scrollHeight; |
| | } |
| | } catch (e) { } |
| | } |
| | } |
| | } |
| | |
| | |
| | history.push({ role: "user", content: text }); |
| | history.push({ role: "assistant", content: fullText }); |
| | |
| | aiContentDiv.classList.remove('typing'); |
| | |
| | } catch (error) { |
| | aiContentDiv.innerHTML = `<span style="color:red">Ошибка: ${error.message}</span>`; |
| | } |
| | } |
| | |
| | function appendMessage(role, text) { |
| | const msgDiv = document.createElement('div'); |
| | msgDiv.className = 'message'; |
| | |
| | const avatar = document.createElement('div'); |
| | avatar.className = `avatar ${role === 'user' ? 'user-avatar' : 'ai-avatar'}`; |
| | avatar.textContent = role === 'user' ? 'Вы' : 'AI'; |
| | |
| | const content = document.createElement('div'); |
| | content.className = 'content'; |
| | content.innerHTML = role === 'user' ? text : ''; |
| | |
| | msgDiv.appendChild(avatar); |
| | msgDiv.appendChild(content); |
| | chatContainer.appendChild(msgDiv); |
| | chatContainer.scrollTop = chatContainer.scrollHeight; |
| | |
| | return content; |
| | } |
| | </script> |
| |
|
| | </body> |
| | </html> |
