Spaces:

KennyOry
/

PrintAI

Sleeping

App Files Files Community

KennyOry commited on Aug 14, 2025

Commit

601e79d

verified ·

1 Parent(s): 2678c19

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +934 -363

templates/index.html CHANGED Viewed

@@ -3,506 +3,1077 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>PrintMaster Assistant</title>
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <style>
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
             margin: 0;
-            padding: 20px;
-            color: #333;
             min-height: 100vh;
         }
-        .container {
-            max-width: 1000px;
             margin: 0 auto;
-            background: white;
-            border-radius: 15px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-            overflow: hidden;
         }
-        header {
-            background: linear-gradient(90deg, #2c3e50 0%, #1a2530 100%);
-            color: white;
-            padding: 20px;
-            text-align: center;
-            position: relative;
         }
-        h1 {
-            margin: 0;
-            font-size: 28px;
-            font-weight: 600;
         }
-        .tagline {
-            margin-top: 5px;
-            opacity: 0.8;
-            font-size: 16px;
         }
-        .main-content {
-            display: flex;
-            min-height: 70vh;
         }
         .chat-container {
-            flex: 3;
-            padding: 20px;
-            border-right: 1px solid #eee;
             display: flex;
             flex-direction: column;
         }
-        .chat-box {
-            flex: 1;
-            overflow-y: auto;
-            padding: 15px;
-            background: #fafafa;
-            border-radius: 10px;
-            margin-bottom: 15px;
-            border: 1px solid #eee;
-            min-height: 400px;
-            max-height: 60vh;
         }
         .input-area {
             display: flex;
             gap: 10px;
         }
         #user-input {
             flex: 1;
-            padding: 12px 15px;
-            border: 1px solid #ddd;
-            border-radius: 25px;
             font-size: 16px;
-            outline: none;
-            transition: border 0.3s;
         }
         #user-input:focus {
-            border-color: #3498db;
-            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
         }
-        button {
-            background: #3498db;
             color: white;
             border: none;
-            padding: 12px 20px;
-            border-radius: 25px;
-            cursor: pointer;
-            font-size: 16px;
-            transition: all 0.3s;
         }
-        button:hover {
-            background: #2980b9;
-            transform: translateY(-2px);
         }
-        button:active {
-            transform: translateY(0);
         }
-        .controls {
             display: flex;
-            gap: 10px;
-            margin-top: 10px;
         }
-        .controls button {
-            flex: 1;
-            background: #7f8c8d;
         }
-        .controls button#new-dialog {
-            background: #e74c3c;
         }
-        .controls button#repeat {
-            background: #f39c12;
         }
-        .info-panel {
-            flex: 1;
-            padding: 20px;
-            background: #f8f9fa;
-            display: flex;
-            flex-direction: column;
         }
-        .status-box {
-            flex: 1;
-            background: white;
-            border-radius: 10px;
-            padding: 15px;
-            border: 1px solid #eee;
-            overflow-y: auto;
-            margin-bottom: 15px;
         }
-        .sources-box {
-            background: white;
-            border-radius: 10px;
-            padding: 15px;
-            border: 1px solid #eee;
-            max-height: 200px;
-            overflow-y: auto;
         }
-        .message {
-            margin-bottom: 15px;
-            padding: 12px 15px;
-            border-radius: 10px;
-            animation: fadeIn 0.3s;
         }
-        .user-message {
-            background: #e3f2fd;
-            margin-left: 40px;
-            border-bottom-right-radius: 0;
         }
-        .assistant-message {
-            background: #f0f7ff;
-            margin-right: 40px;
-            border-bottom-left-radius: 0;
         }
-        .system-message {
-            background: #e8f5e9;
-            text-align: center;
-            padding: 8px;
             font-size: 14px;
-            margin: 10px 0;
         }
-        .log-message {
-            background: #fff8e1;
-            padding: 8px 12px;
-            border-radius: 5px;
-            margin: 5px 0;
-            font-size: 14px;
-            border-left: 3px solid #ffc107;
         }
-        .message-header {
-            font-weight: bold;
-            margin-bottom: 5px;
-            display: flex;
             align-items: center;
         }
-        .message-header .role {
-            color: #2c3e50;
         }
-        .message-header .time {
-            margin-left: auto;
-            font-size: 12px;
-            color: #7f8c8d;
         }
-        .typing-indicator {
-            display: inline-flex;
-            align-items: center;
-            padding: 8px 15px;
-            background: #f0f7ff;
-            border-radius: 18px;
-            font-size: 14px;
         }
-        .typing-dots {
             display: flex;
-            margin-left: 8px;
         }
-        .typing-dot {
-            width: 6px;
-            height: 6px;
-            background: #3498db;
-            border-radius: 50%;
-            margin: 0 2px;
-            animation: pulse 1.5s infinite;
         }
-        .typing-dot:nth-child(2) {
-            animation-delay: 0.5s;
         }
-        .typing-dot:nth-child(3) {
-            animation-delay: 1s;
         }
-        @keyframes pulse {
-            0%, 100% { opacity: 0.4; transform: scale(0.8); }
-            50% { opacity: 1; transform: scale(1); }
         }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
         }
-        .problem {
-            color: #e74c3c;
-            font-weight: bold;
         }
-        .solution {
-            color: #27ae60;
         }
-        .sources {
-            color: #3498db;
         }
-        .source-item {
-            margin: 8px 0;
-            padding: 8px;
-            background: #f8f9fa;
-            border-radius: 5px;
             font-size: 14px;
         }
-        .source-title {
-            font-weight: bold;
         }
-        .source-url {
-            color: #7f8c8d;
-            font-size: 12px;
-            word-break: break-all;
         }
-        .error {
-            color: #c0392b;
-            background: #fadbd8;
-            padding: 10px;
-            border-radius: 5px;
-            margin: 10px 0;
         }
     </style>
 </head>
 <body>
-    <div class="container">
-        <header>
-            <h1>PrintMaster Assistant</h1>
-            <div class="tagline">Ваш эксперт по ремонту печатной техники</div>
-        </header>
-        <div class="main-content">
-            <div class="chat-container">
-                <div class="chat-box" id="chatbox">
-                    <!-- Сообщения будут добавляться здесь -->
-                </div>
-                <div class="input-area">
-                    <input type="text" id="user-input" placeholder="Опишите проблему с принтером..." autocomplete="off">
-                    <button id="send-btn">Отправить</button>
                 </div>
-                <div class="controls">
-                    <button id="repeat">↻ Повторить ответ</button>
-                    <button id="new-dialog">🆕 Новый диалог</button>
                 </div>
             </div>
-            <div class="info-panel">
-                <h3>Ход выполнения</h3>
-                <div class="status-box" id="status-box">
-                    <!-- Логи процесса будут добавляться здесь -->
                 </div>
-                <h3>Источники информации</h3>
-                <div class="sources-box" id="sources-box">
-                    <!-- Источники будут добавляться здесь -->
                 </div>
             </div>
         </div>
     </div>
     <script>
-        $(document).ready(function() {
-            const chatbox = $('#chatbox');
-            const statusBox = $('#status-box');
-            const sourcesBox = $('#sources-box');
-            const userInput = $('#user-input');
-            const sendBtn = $('#send-btn');
-            const repeatBtn = $('#repeat');
-            const newDialogBtn = $('#new-dialog');
-            let isProcessing = false;
-            // Функция добавления сообщения в чат
-            function addMessage(role, content, type = '') {
-                const timestamp = new Date().toLocaleTimeString();
-                const messageClass = type ? type : role + '-message';
-                let formattedContent = content;
-                // Форматирование ответа ассистента
-                if (role === 'assistant') {
-                    formattedContent = formattedContent
-                        .replace(/\*\*Проблема:\*\*/g, '<div class="problem">Проблема:</div>')
-                        .replace(/\*\*Решение:\*\*/g, '<div class="solution">Решение:</div>')
-                        .replace(/\*\*Примечания:\*\*/g, '<div class="notes">Примечания:</div>')
-                        .replace(/\*\*Источники:\*\*/g, '<div class="sources">Источники информации:</div>')
-                        .replace(/(\d+\.\s.+)/g, '<div class="step">$1</div>')
-                        .replace(/(-\s.+)/g, '<div class="substep">$1</div>');
-                }
-                const messageElement = `
-                    <div class="message ${messageClass}">
-                        <div class="message-header">
-                            <span class="role">${role === 'user' ? 'Вы' : 'PrintMaster'}</span>
-                            <span class="time">${timestamp}</span>
-                        </div>
-                        <div class="message-content">${formattedContent}</div>
-                    </div>
-                `;
-                chatbox.append(messageElement);
-                chatbox.scrollTop(chatbox[0].scrollHeight);
-            }
-            // Функция добавления лога
-            function addLog(content) {
-                const logElement = `<div class="log-message">${content}</div>`;
-                statusBox.append(logElement);
-                statusBox.scrollTop(statusBox[0].scrollHeight);
-            }
-            // Функция отображения индикатора набора
-            function showTypingIndicator() {
-                const indicator = `
-                    <div class="message assistant-message">
-                        <div class="message-header">
-                            <span class="role">PrintMaster</span>
-                        </div>
-                        <div class="typing-indicator">
-                            Генерация ответа
-                            <div class="typing-dots">
-                                <div class="typing-dot"></div>
-                                <div class="typing-dot"></div>
-                                <div class="typing-dot"></div>
-                            </div>
-                        </div>
                     </div>
-                `;
-                chatbox.append(indicator);
-                chatbox.scrollTop(chatbox[0].scrollHeight);
-                return indicator;
-            }
-            // Функция отправки сообщения
-            function sendMessage() {
-                const message = userInput.val().trim();
-                if (message === '') return;
-                if (isProcessing) return;
-                userInput.val('');
-                addMessage('user', message);
-                // Показываем индикатор набора
-                const indicator = showTypingIndicator();
-                isProcessing = true;
-                // Отправляем запрос на сервер
-                $.post('/ask', {message: message}, function(response) {
-                    if (response.status !== 'processing') {
-                        console.error('Ошибка обработки запроса');
-                        isProcessing = false;
-                    }
-                });
-            }
-            // Обработчик отправки сообщения
-            sendBtn.click(sendMessage);
-            userInput.keypress(function(e) {
-                if (e.which === 13) {
-                    sendMessage();
                 }
             });
-            // Обработчик кнопки "Повторить"
-            repeatBtn.click(function() {
-                if (isProcessing) return;
-                isProcessing = true;
-                statusBox.empty();
-                sourcesBox.empty();
-                showTypingIndicator();
-                $.post('/repeat', function(response) {
-                    if (response.status !== 'repeating') {
-                        console.error('Ошибка повтора');
-                        isProcessing = false;
                     }
-                });
-            });
-            // Обработчик кнопки "Новый диалог"
-            newDialogBtn.click(function() {
-                if (!confirm('Начать новый диалог? Текущая история будет очищена.')) return;
-                $.post('/new', function() {
-                    chatbox.empty();
-                    statusBox.empty();
-                    sourcesBox.empty();
-                    addMessage('system', 'Диалог начат заново. Опишите вашу проблему с принтером.', 'system-message');
-                });
-            });
-            // Инициализация SSE
-            const eventSource = new EventSource('/stream');
-            eventSource.onmessage = function(event) {
-                const data = JSON.parse(event.data);
-                switch(data.type) {
-                    case 'log':
-                        addLog(data.content);
-                        break;
-                    case 'response':
-                        // Удаляем индикатор набора
-                        chatbox.find('.typing-indicator').closest('.message').remove();
-                        addMessage('assistant', data.content);
-                        isProcessing = false;
-                        break;
-                    case 'sources':
-                        sourcesBox.empty();
-                        try {
-                            const sources = JSON.parse(data.content);
-                            sources.forEach((source, index) => {
-                                const sourceElement = `
-                                    <div class="source-item">
-                                        <div class="source-title">${index + 1}. ${source.title}</div>
-                                        <div class="source-url"><a href="${source.url}" target="_blank">${source.url}</a></div>
-                                    </div>
-                                `;
-                                sourcesBox.append(sourceElement);
-                            });
-                        } catch (e) {
-                            sourcesBox.html('<div class="error">Ошибка загрузки источников</div>');
-                        }
-                        break;
-                    case 'done':
-                        isProcessing = false;
-                        break;
                 }
-            };
-            // Инициализируем приветственное сообщение
-            addMessage('system', 'Здравствуйте! Я PrintMaster, ваш помощник по ремонту принтеров. Опишите вашу проблему, например: "Canon iR ADV C5540i выдает ошибку E000025-04-00".', 'system-message');
         });
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>EngiPrintAI | Сервисный ассистент</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        :root {
+            --primary: #4361ee;
+            --primary-light: #4895ef;
+            --secondary: #3f37c9;
+            --dark: #0e1424;
+            --light: #f8f9fa;
+            --gray: #e9ecef;
+            --success: #2ecc71;
+            --warning: #f39c12;
+            --danger: #e74c3c;
+            --transition: all 0.3s ease;
+        }
+        * {
             margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+        }
+        body {
+            background: linear-gradient(135deg, #f5f7fa 0%, #e4e7f1 100%);
+            color: var(--dark);
             min-height: 100vh;
+            padding: 20px;
         }
+        .app-container {
+            max-width: 1200px;
             margin: 0 auto;
+            display: grid;
+            grid-template-columns: 1fr 300px;
+            gap: 20px;
         }
+        .card {
+            background: rgba(255, 255, 255, 0.92);
+            border-radius: 16px;
+            border: none;
+            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
+            backdrop-filter: blur(4px);
+            overflow: hidden;
+            transition: var(--transition);
         }
+        .card:hover {
+            box-shadow: 0 12px 40px rgba(31, 38, 135, 0.15);
         }
+        .card-header {
+            background: white;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+            padding: 20px;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 12px;
         }
+        .card-body {
+            padding: 0;
         }
         .chat-container {
+            height: calc(100vh - 200px);
             display: flex;
             flex-direction: column;
+            padding: 20px;
+            overflow-y: auto;
         }
+        .message {
+            max-width: 80%;
+            padding: 16px 20px;
+            margin-bottom: 16px;
+            border-radius: 18px;
+            line-height: 1.5;
+            position: relative;
+            animation: fadeIn 0.3s ease;
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
+            will-change: transform, opacity;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .user-message {
+            background: var(--primary);
+            color: white;
+            align-self: flex-end;
+            border-bottom-right-radius: 4px;
+        }
+        .bot-message {
+            background: white;
+            border: 1px solid var(--gray);
+            align-self: flex-start;
+            border-bottom-left-radius: 4px;
+        }
+        .message-header {
+            font-size: 12px;
+            opacity: 0.8;
+            margin-bottom: 8px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
         }
         .input-area {
+            padding: 20px;
+            border-top: 1px solid rgba(0, 0, 0, 0.05);
+            background: white;
+        }
+        .input-group {
             display: flex;
             gap: 10px;
         }
         #user-input {
             flex: 1;
+            border: 1px solid var(--gray);
+            border-radius: 12px;
+            padding: 14px 20px;
             font-size: 16px;
+            transition: var(--transition);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
         }
         #user-input:focus {
+            border-color: var(--primary-light);
+            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
+            outline: none;
         }
+        #send-btn {
+            background: var(--primary);
             color: white;
             border: none;
+            border-radius: 12px;
+            padding: 0 24px;
+            font-weight: 600;
+            transition: var(--transition);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 4px 6px rgba(67, 97, 238, 0.2);
         }
+        #send-btn:hover {
+            background: var(--secondary);
+            transform: translateY(-1px);
         }
+        #send-btn:active {
+            transform: translateY(1px);
         }
+        .typing-indicator {
             display: flex;
+            gap: 6px;
+            padding: 20px;
+            align-items: center;
         }
+        .typing-text {
+            margin-left: 10px;
+            font-style: italic;
+            color: #6c757d;
         }
+        .typing-dot {
+            width: 10px;
+            height: 10px;
+            background: var(--primary-light);
+            border-radius: 50%;
+            animation: bounce 1.4s infinite ease-in-out both;
         }
+        .typing-dot:nth-child(1) { animation-delay: -0.32s; }
+        .typing-dot:nth-child(2) { animation-delay: -0.16s; }
+        @keyframes bounce {
+            0%, 80%, 100% { transform: scale(0); }
+            40% { transform: scale(1); }
         }
+        .log-entry {
+            padding: 14px 20px;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.03);
+            font-size: 14px;
+            line-height: 1.5;
+            animation: fadeIn 0.3s ease;
         }
+        .log-entry:last-child {
+            border-bottom: none;
         }
+        .log-timestamp {
+            font-size: 11px;
+            opacity: 0.6;
+            margin-right: 8px;
         }
+        .log-info { color: var(--primary); }
+        .log-success { color: var(--success); }
+        .log-warning { color: var(--warning); }
+        .log-error { color: var(--danger); }
+        .problem-text {
+            font-weight: 600;
+            color: var(--primary);
+            margin-bottom: 8px;
+        }
+        .solution-text {
+            font-weight: 600;
+            color: var(--secondary);
+            margin-bottom: 8px;
         }
+        .solution-step {
+            padding-left: 20px;
+            position: relative;
+            margin-bottom: 6px;
         }
+        .solution-step:before {
+            content: "•";
+            position: absolute;
+            left: 8px;
+            color: var(--primary);
+            font-weight: bold;
         }
+        .sources-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            background: rgba(67, 97, 238, 0.1);
+            color: var(--primary);
+            padding: 6px 12px;
+            border-radius: 20px;
             font-size: 14px;
+            margin-top: 15px;
+            cursor: pointer;
+            transition: var(--transition);
         }
+        .sources-badge:hover {
+            background: rgba(67, 97, 238, 0.15);
         }
+        .status-indicator {
+            display: inline-flex;
             align-items: center;
+            gap: 6px;
+            font-size: 14px;
+            padding: 4px 12px;
+            border-radius: 20px;
+            background: rgba(46, 204, 113, 0.1);
+            color: var(--success);
         }
+        .status-indicator.offline {
+            background: rgba(231, 76, 60, 0.1);
+            color: var(--danger);
         }
+        .status-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: var(--success);
         }
+        .status-indicator.offline .status-dot {
+            background: var(--danger);
         }
+        .logo {
             display: flex;
+            align-items: center;
+            gap: 10px;
+            font-weight: 700;
+            font-size: 20px;
+            color: var(--dark);
         }
+        .logo-icon {
+            width: 36px;
+            height: 36px;
+            background: var(--primary);
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
         }
+        .source-item {
+            padding: 12px 16px;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+            transition: var(--transition);
         }
+        .source-item:hover {
+            background: rgba(67, 97, 238, 0.03);
         }
+        .source-title {
+            font-weight: 500;
+            margin-bottom: 4px;
+            display: block;
         }
+        .source-url {
+            font-size: 13px;
+            color: #6c757d;
+            display: block;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
+        .empty-state {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            padding: 40px 20px;
+            color: #6c757d;
         }
+        .empty-state i {
+            font-size: 48px;
+            margin-bottom: 20px;
+            color: #dee2e6;
         }
+        .empty-state h4 {
+            font-weight: 500;
+            margin-bottom: 10px;
+            color: #495057;
         }
+        .example-badge {
+            display: inline-block;
+            background: white;
+            border: 1px solid var(--gray);
+            border-radius: 8px;
+            padding: 8px 16px;
+            margin: 6px;
             font-size: 14px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.03);
         }
+        .log-container {
+            height: calc(100vh - 200px);
+            overflow-y: auto;
         }
+        .highlight {
+            background-color: #fff9c4;
+            padding: 2px 4px;
+            border-radius: 4px;
+            font-weight: 600;
         }
+        .message-content {
+            white-space: pre-wrap;
+            word-wrap: break-word;
+            line-height: 1.6;
+        }
+      /* В разделе стилей */
+.notes-text {
+    font-weight: 600;
+    color: #f39c12; /* оранжевый для примечаний */
+    margin-top: 15px;
+    margin-bottom: 8px;
+    border-left: 3px solid #f39c12;
+    padding-left: 10px;
+}
+.sources-title {
+    font-weight: 600;
+    color: #3f37c9;
+    margin-top: 15px;
+    margin-bottom: 8px;
+}
+.note-item {
+    padding-left: 20px;
+    position: relative;
+    margin-bottom: 6px;
+    font-style: italic;
+}
+.note-item:before {
+    content: "•";
+    position: absolute;
+    left: 8px;
+    color: #f39c12;
+}
+.source-reference {
+    display: inline-block;
+    background: rgba(67, 97, 238, 0.1);
+    color: var(--primary);
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 0.9em;
+    margin-right: 5px;
+}
+        @media (max-width: 768px) {
+            .app-container {
+                grid-template-columns: 1fr;
+            }
+            .chat-container {
+                height: 60vh;
+            }
+            .log-container {
+                height: 30vh;
+            }
         }
     </style>
 </head>
 <body>
+    <div class="app-container">
+        <div class="card main-card">
+            <div class="card-header">
+                <div class="logo">
+                    <div class="logo-icon">
+                        <i class="fas fa-print"></i>
+                    </div>
+                    <span>EngiPrintAI</span>
                 </div>
+                <div class="ms-auto status-indicator" id="status-indicator">
+                    <div class="status-dot"></div>
+                    <span>Подключено</span>
                 </div>
             </div>
+            <div class="card-body">
+                <div class="chat-container" id="chat-container">
+                    <div class="empty-state">
+                        <i class="fas fa-comments"></i>
+                        <h4>Добро пожаловать в EngiPrintAI</h4>
+                        <p>Опишите проблему с вашим принтером или МФУ, и я помогу найти решение</p>
+                        <div class="mt-3">
+                            <div class="example-badge">HP LaserJet 1020 не печатает</div>
+                            <div class="example-badge">Konica Minolta C258 ошибка C-2557</div>
+                            <div class="example-badge">Canon i-SENSYS MF644Cdw зажевывает бумагу</div>
+                        </div>
+                    </div>
                 </div>
+                <div class="input-area">
+                    <div class="input-group">
+                        <input type="text" id="user-input" class="form-control" placeholder="Опишите проблему с принтером..." autocomplete="off">
+                        <button id="send-btn" class="btn">
+                            <i class="fas fa-paper-plane"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="card logs-card">
+            <div class="card-header">
+                <i class="fas fa-terminal"></i>
+                <span>Журнал обработки</span>
+            </div>
+            <div class="card-body">
+                <div class="log-container" id="logs-container">
+                    <div class="log-entry log-info">
+                    </div>
                 </div>
             </div>
         </div>
     </div>
     <script>
+        document.addEventListener('DOMContentLoaded', () => {
+    const chatContainer = document.getElementById('chat-container');
+    const userInput = document.getElementById('user-input');
+    const sendBtn = document.getElementById('send-btn');
+    const logsContainer = document.getElementById('logs-container');
+    const statusIndicator = document.getElementById('status-indicator');
+    const statusDot = statusIndicator.querySelector('.status-dot');
+    const statusText = statusIndicator.querySelector('span');
+    const welcomeState = document.querySelector('.empty-state');
+    let currentSources = [];
+    let isProcessing = false;
+    let eventSource = null;
+    let currentBotMessage = null;
+    let processingLog = [];
+    let responseBuffer = '';
+    // Технические термины для подсветки
+    const technicalTerms = [
+        'фузер', 'термистор', 'микроконтроллер', 'перепрошивка',
+        'нагревательный вал', 'контакты', 'разъем', 'плата', 'картридж',
+        'вал', 'дозирующее лезвие', 'чистящее лезвие', 'мусорный бункер',
+        'лоток', 'печка', 'бумагопровод', 'сенсор', 'датчик', 'лазер'
+    ];
+    // Функция добавления временной метки
+    function getTimestamp() {
+        const now = new Date();
+        return now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit', second:'2-digit'});
+    }
+    // Функция добавления сообщения в журнал
+    function addLog(message, type = 'info') {
+        const logEntry = document.createElement('div');
+        logEntry.className = `log-entry log-${type}`;
+        logEntry.innerHTML = `
+            <span class="log-timestamp">${getTimestamp()}</span>
+            ${message}
+        `;
+        logsContainer.appendChild(logEntry);
+        logsContainer.scrollTop = logsContainer.scrollHeight;
+        processingLog.push(`[${getTimestamp()}] ${message}`);
+    }
+    // Добавление сообщения пользователя
+    function addUserMessage(message) {
+        if (welcomeState && welcomeState.parentElement === chatContainer) {
+            chatContainer.innerHTML = '';
+        }
+        const messageDiv = document.createElement('div');
+        messageDiv.className = 'message user-message';
+        messageDiv.innerHTML = `
+            <div class="message-header">
+                <i class="fas fa-user"></i>
+                <span>Вы</span>
+                <span class="ms-auto">${getTimestamp()}</span>
+            </div>
+            <div>${escapeHtml(message)}</div>
+        `;
+        chatContainer.appendChild(messageDiv);
+        chatContainer.scrollTop = chatContainer.scrollHeight;
+    }
+    // Создание сообщения бота с индикатором набора
+    function createBotThinkingMessage() {
+        if (welcomeState && welcomeState.parentElement === chatContainer) {
+            chatContainer.innerHTML = '';
+        }
+        const messageDiv = document.createElement('div');
+        messageDiv.className = 'message bot-message';
+        messageDiv.id = 'bot-thinking';
+        messageDiv.innerHTML = `
+            <div class="message-header">
+                <i class="fas fa-robot"></i>
+                <span>PrintMaster</span>
+                <span class="ms-auto">${getTimestamp()}</span>
+            </div>
+            <div class="typing-indicator">
+                <div class="typing-dot"></div>
+                <div class="typing-dot"></div>
+                <div class="typing-dot"></div>
+                <span class="typing-text">Думаю над ответом...</span>
+            </div>
+        `;
+        chatContainer.appendChild(messageDiv);
+        chatContainer.scrollTop = chatContainer.scrollHeight;
+        return messageDiv;
+    }
+    // Преобразование индикатора в полноценное сообщение
+    function convertToMessage(content) {
+        const thinkingElement = document.getElementById('bot-thinking');
+        if (thinkingElement) {
+            thinkingElement.innerHTML = `
+                <div class="message-header">
+                    <i class="fas fa-robot"></i>
+                    <span>PrintMaster</span>
+                    <span class="ms-auto">${getTimestamp()}</span>
+                </div>
+                <div class="message-content">${formatContent(content)}</div>
+            `;
+            thinkingElement.id = 'bot-message-' + Date.now();
+            return thinkingElement;
+        }
+        // Если индикатора нет, создаем новое сообщение
+        const messageDiv = document.createElement('div');
+        messageDiv.className = 'message bot-message';
+        messageDiv.id = 'bot-message-' + Date.now();
+        messageDiv.innerHTML = `
+            <div class="message-header">
+                <i class="fas fa-robot"></i>
+                <span>PrintMaster</span>
+                <span class="ms-auto">${getTimestamp()}</span>
+            </div>
+            <div class="message-content">${formatContent(content)}</div>
+        `;
+        chatContainer.appendChild(messageDiv);
+        chatContainer.scrollTop = chatContainer.scrollHeight;
+        return messageDiv;
+    }
+    // Обновление сообщения бота
+    function updateBotMessage(content) {
+        if (!currentBotMessage) {
+            currentBotMessage = convertToMessage(content);
+        } else {
+            const contentDiv = currentBotMessage.querySelector('.message-content');
+            if (contentDiv) {
+                contentDiv.textContent = formatContent(content);
+            }
+        }
+    }
+    // Форматирование финального ответа
+    function finalizeBotMessage(content) {
+        if (!currentBotMessage) {
+            currentBotMessage = convertToMessage(content);
+        } else {
+            const contentDiv = currentBotMessage.querySelector('.message-content');
+            if (contentDiv) {
+                contentDiv.innerHTML = formatContent(content);
+            }
+        }
+        return currentBotMessage;
+    }
+    // Форматирование контента
+    function formatContent(content) {
+    // Заменяем разделы на стилизованные блоки
+    content = content.replace(/\*\*Проблема:\*\*/g,
+        '<div class="problem-text">Проблема:</div>');
+    content = content.replace(/\*\*Решение:\*\*/g,
+        '<div class="solution-text">Решение:</div>');
+    content = content.replace(/\*\*Примечания:\*\*/g,
+        '<div class="notes-text">Примечания:</div>');
+    content = content.replace(/\*\*Источники:\*\*/g,
+        '<div class="sources-title">Источники:</div>');
+    content = content.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+    // Обработка ссылок на источники
+    content = content.replace(/\[([^\]]+)\]\(([^)]+)\)/g,
+        '<a href="$2" target="_blank" class="source-link">$1</a>');
+    return content;
+}
+    // Добавление ссылок на источники
+    function addSourceLinks() {
+        if (!currentBotMessage || currentSources.length === 0) return;
+        const messageDiv = currentBotMessage;
+        const existingSources = messageDiv.querySelector('.sources-container');
+        if (existingSources) existingSources.remove();
+        if (currentSources.length > 0) {
+            const sourcesContainer = document.createElement('div');
+            sourcesContainer.className = 'sources-container mt-3';
+            sourcesContainer.innerHTML = '<div class="font-bold text-gray-700 mb-2 flex items-center"><i class="fas fa-link mr-2"></i> Источники информации</div>';
+            const linksContainer = document.createElement('div');
+            linksContainer.className = 'flex flex-wrap gap-2';
+            currentSources.slice(0, 5).forEach((source, index) => {
+                const link = document.createElement('span');
+                link.className = 'sources-badge';
+                link.innerHTML = `<i class="fas fa-external-link-alt mr-1"></i> Источник ${index + 1}`;
+                link.dataset.sourceIndex = index;
+                link.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    const sourceIndex = parseInt(this.dataset.sourceIndex);
+                    showSourceDetails(sourceIndex);
+                });
+                linksContainer.appendChild(link);
+            });
+            sourcesContainer.appendChild(linksContainer);
+            messageDiv.appendChild(sourcesContainer);
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+    }
+    // Показ деталей источника
+    function showSourceDetails(sourceIndex) {
+        const source = currentSources[sourceIndex];
+        if (!source) return;
+        // Создаем модальное окно
+        let modal = document.getElementById('source-modal');
+        if (!modal) {
+            modal = document.createElement('div');
+            modal.id = 'source-modal';
+            modal.style.cssText = `
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background: rgba(0,0,0,0.5);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                z-index: 1000;
+            `;
+            modal.innerHTML = `
+                <div class="modal-content" style="background: white; border-radius: 12px; width: 90%; max-width: 600px; max-height: 80vh; overflow: auto;">
+                    <div class="modal-header" style="padding: 15px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center;">
+                        <h5 style="margin: 0; font-weight: 600;">Источни�� информации</h5>
+                        <button id="close-modal" style="background: none; border: none; font-size: 1.5rem; cursor: pointer;">&times;</button>
                     </div>
+                    <div class="modal-body" style="padding: 15px;">
+                        <h6 style="font-weight: 600; margin-bottom: 5px;">Название:</h6>
+                        <p id="source-title" style="margin-bottom: 15px;"></p>
+                        <h6 style="font-weight: 600; margin-bottom: 5px;">URL:</h6>
+                        <a id="source-url" href="#" target="_blank" style="color: #4361ee; text-decoration: underline; display: block; margin-bottom: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"></a>
+                    </div>
+                    <div class="modal-footer" style="padding: 15px; border-top: 1px solid #eee; text-align: right;">
+                        <button id="open-source" class="btn btn-primary" style="background: #4361ee; color: white; border: none; padding: 8px 15px; border-radius: 6px; cursor: pointer; margin-right: 10px;">Открыть источник</button>
+                        <button id="close-modal-footer" class="btn btn-secondary" style="background: #e9ecef; color: #495057; border: none; padding: 8px 15px; border-radius: 6px; cursor: pointer;">Закрыть</button>
+                    </div>
+                </div>
+            `;
+            document.body.appendChild(modal);
+            // Обработчики закрытия
+            const closeModal = () => modal.remove();
+            document.getElementById('close-modal').addEventListener('click', closeModal);
+            document.getElementById('close-modal-footer').addEventListener('click', closeModal);
+            modal.addEventListener('click', (e) => {
+                if (e.target === modal || e.target.closest('#close-modal, #close-modal-footer')) {
+                    closeModal();
                 }
             });
+        }
+        // Заполняем данные
+        document.getElementById('source-title').textContent = source.title;
+        const sourceUrl = document.getElementById('source-url');
+        sourceUrl.textContent = source.url;
+        sourceUrl.href = source.url;
+        // Обработчик открытия источника
+        document.getElementById('open-source').onclick = () => {
+            window.open(source.url, '_blank');
+        };
+        // Показываем модальное окно
+        document.body.appendChild(modal);
+    }
+    // Функция для экранирования HTML
+    function escapeHtml(unsafe) {
+        return unsafe
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;")
+            .replace(/'/g, "&#039;");
+    }
+    // Подключение потока данных
+    function connectStream() {
+        if (eventSource) eventSource.close();
+        // Обновляем статус
+        statusText.textContent = 'Обработка запроса...';
+        statusDot.style.background = 'var(--warning)';
+        statusIndicator.classList.add('warning');
+        statusIndicator.classList.remove('success');
+        eventSource = new EventSource('/stream');
+        eventSource.onmessage = function(event) {
+            try {
+                const data = JSON.parse(event.data);
+                const { type, content } = data;
+                if (type === 'log' || type === 'processing_log') {
+                    addLog(content, 'info');
+                }
+                else if (type === 'response_start') {
+                    // Начало ответа - создаем индикатор набора
+                    createBotThinkingMessage();
+                    responseBuffer = '';
+                }
+                else if (type === 'response_chunk') {
+                    // Порция ответа
+                    responseBuffer += content;
+                    updateBotMessage(responseBuffer);
+                }
+                else if (type === 'response_end') {
+                    // Конец ответа
+                    currentBotMessage = finalizeBotMessage(content);
+                    addSourceLinks();
+                }
+                else if (type === 'sources') {
+                    // Получение источников
+                    try {
+                        currentSources = JSON.parse(content);
+                        addSourceLinks();
+                    } catch (e) {
+                        console.error('Error parsing sources:', e);
+                        addLog('Ошибка обработки источников', 'error');
                     }
+                }
+                else if (type === 'done') {
+                    // Завершение обработки
+                    isProcessing = false;
+                    statusText.textContent = 'Подключено';
+                    statusDot.style.background = 'var(--success)';
+                    statusIndicator.classList.add('success');
+                    statusIndicator.classList.remove('warning');
+                    if (eventSource) {
+                        eventSource.close();
+                        eventSource = null;
+                    }
+                }
+            } catch (e) {
+                console.error('Error processing event:', e);
+                addLog(`Ошибка обработки данных: ${e.message}`, 'error');
+            }
+        };
+        eventSource.onerror = function() {
+            addLog("⚠️ Поток данных прерван", 'error');
+            statusText.textContent = 'Ошибка соединения';
+            statusDot.style.background = 'var(--danger)';
+            statusIndicator.classList.add('danger');
+            statusIndicator.classList.remove('success', 'warning');
+            if (eventSource) {
+                eventSource.close();
+                eventSource = null;
+            }
+            // Попытка восстановления через 2 секунды
+            setTimeout(() => {
+                if (!isProcessing) {
+                    statusText.textContent = 'Подключено';
+                    statusDot.style.background = 'var(--success)';
+                    statusIndicator.classList.add('success');
+                    statusIndicator.classList.remove('danger');
                 }
+            }, 2000);
+        };
+    }
+    // Отправка сообщения
+    function sendMessage() {
+        const message = userInput.value.trim();
+        if (!message || isProcessing) return;
+        // Добавляем сообщение пользователя
+        addUserMessage(message);
+        userInput.value = '';
+        // Обновляем статус
+        isProcessing = true;
+        statusText.textContent = 'Обработка запроса...';
+        statusDot.style.background = 'var(--warning)';
+        statusIndicator.classList.add('warning');
+        statusIndicator.classList.remove('success');
+        // Скрываем примеры запросов
+        const examples = document.querySelector('.example-badge');
+        if (examples) {
+            examples.parentElement.style.display = 'none';
+        }
+        // Очищаем предыдущие данные
+        currentSources = [];
+        processingLog = [];
+        responseBuffer = '';
+        currentBotMessage = null;
+        // Подключаемся к потоку данных
+        connectStream();
+        // Отправляем запрос на сервер
+        fetch('/ask', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+            body: `message=${encodeURIComponent(message)}`
+        })
+        .then(res => res.json())
+        .then(data => {
+            if (data.status === 'processing') {
+                addLog("⚙️ Запрос отправлен на сервер...", 'info');
+            }
+        })
+        .catch(err => {
+            addLog(`❌ Ошибка запроса: ${err.message}`, 'error');
+            isProcessing = false;
+            statusText.textContent = 'Ошибка соединения';
+            statusDot.style.background = 'var(--danger)';
+            statusIndicator.classList.add('danger');
+            statusIndicator.classList.remove('warning');
+            // Восстанавливаем статус
+            setTimeout(() => {
+                statusText.textContent = 'Подключено';
+                statusDot.style.background = 'var(--success)';
+                statusIndicator.classList.add('success');
+                statusIndicator.classList.remove('danger');
+            }, 2000);
         });
+    }
+    // Обработчики событий
+    sendBtn.addEventListener('click', sendMessage);
+    userInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') sendMessage();
+    });
+    // Закрытие соединений при уходе со страницы
+    window.addEventListener('beforeunload', () => {
+        if (eventSource) {
+            eventSource.close();
+            eventSource = null;
+        }
+    });
+    // Инициализация
+    addLog("Система инициализирована. Ожидание запроса...", 'info');
+});
     </script>
 </body>
 </html>