| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AI Assistant</title> |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css"> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script> |
| </head> |
| <body> |
| <div class="app-container"> |
| <div class="sidebar"> |
| <div class="logo"> |
| <i class="fas fa-robot"></i> |
| <h1>Starchik AI</h1> |
| </div> |
| <button id="new-chat" class="new-chat-btn"> |
| <i class="fas fa-plus"></i> Новый чат |
| </button> |
| <div class="chat-history" id="chat-history"> |
| |
| </div> |
| <div class="sidebar-footer"> |
| <button id="toggle-mode" class="toggle-mode-btn"> |
| <i class="fas fa-moon"></i> |
| </button> |
| <div class="model-info"> |
| <span>v0.3</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="main-content"> |
| <div class="chat-container" id="chat-container"> |
| <div class="welcome-screen" id="welcome-screen"> |
| <div class="welcome-logo"> |
| <i class="fas fa-robot"></i> |
| </div> |
| <h1>AI Assistant</h1> |
| <p>Ваш помощник на базе ИИ модели</p> |
| <div class="examples"> |
| <h3>Примеры запросов:</h3> |
| <div class="example-grid"> |
| <div class="example" data-prompt="Объясни, как работает рекурсия в программировании и приведи пример на Python."> |
| <i class="fas fa-code"></i> |
| <span>Объяснить рекурсию с примером</span> |
| </div> |
| <div class="example" data-prompt="Напиши функцию на Python для сортировки списка объектов по нескольким атрибутам."> |
| <i class="fas fa-sort"></i> |
| <span>Сортировка по нескольким атрибутам</span> |
| </div> |
| <div class="example" data-prompt="Создай класс для работы с бинарным деревом поиска на JavaScript."> |
| <i class="fas fa-tree"></i> |
| <span>Бинарное дерево поиска</span> |
| </div> |
| <div class="example" data-prompt="Объясни паттерн проектирования 'Наблюдатель' и приведи пример реализации."> |
| <i class="fas fa-eye"></i> |
| <span>Паттерн 'Наблюдатель'</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="messages" id="messages"> |
| |
| </div> |
| </div> |
| |
| <div class="input-container"> |
| <div class="input-wrapper"> |
| <textarea id="user-input" placeholder="Введите ваш запрос..."></textarea> |
| <button id="send-btn" class="send-btn"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| <div class="input-footer"> |
| <span class="disclaimer">Модель может выдавать неточную информацию. Проверяйте важные данные.</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <script src="{{ url_for('static', filename='js/script.js') }}"></script> |
| </body> |
| </html> |
