Spaces:

KennyOry
/

PrintAI

Sleeping

App Files Files Community

KennyOry commited on Aug 14, 2025

Commit

2678c19

verified ·

1 Parent(s): 9c09266

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +363 -815

templates/index.html CHANGED Viewed

@@ -3,958 +3,506 @@
 <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>

 <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>