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