|
|
<!DOCTYPE html>
|
|
|
<html lang="ru">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Mistral 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>Mistral 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>Mistral-7B-Instruct-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>Mistral AI Assistant</h1>
|
|
|
<p>Ваш помощник на базе модели Mistral-7B-Instruct-v0.3</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> |
