Upload 9 files

.env

@@ -0,0 +1,11 @@
+# Конфигурационные переменные
+FLASK_ENV=development
+FLASK_DEBUG=True
+
+# Настройки модели
+# Если вы используете API вместо локальной модели, раскомментируйте и заполните следующие строки
+# MISTRAL_API_KEY=your_api_key_here
+# MISTRAL_API_URL=https://api.mistral.ai/v1/
+
+# Настройки приложения
+APP_NAME=Mistral AI Assistant

.gitignore

@@ -0,0 +1,35 @@
+# Виртуальное окружение
+venv/
+env/
+.env
+
+# Кэш Python
+__pycache__/
+*.py[cod]
+*$py.class
+.pytest_cache/
+
+# Дистрибутивы
+dist/
+build/
+*.egg-info/
+
+# Локальные файлы
+.DS_Store
+Thumbs.db
+
+# Файлы IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# Кэш модели
+.cache/
+.huggingface/
+
+# Логи
+*.log
+
+# Локальное хранилище моделей
+models/

api_mode.py

@@ -0,0 +1,86 @@
+import os
+import json
+from flask import Flask, render_template, request, jsonify
+from flask_cors import CORS
+import requests
+from dotenv import load_dotenv
+
+# Загружаем переменные окружения
+load_dotenv()
+
+app = Flask(__name__)
+CORS(app)
+
+# Проверяем наличие API ключа
+API_KEY = os.getenv("MISTRAL_API_KEY")
+API_URL = os.getenv("MISTRAL_API_URL", "https://api.mistral.ai/v1/")
+
+# Функция для генерации ответа через API
+def generate_response_api(prompt, max_length=1024):
+    if not API_KEY:
+        return "Ошибка: API ключ не найден. Пожалуйста, добавьте MISTRAL_API_KEY в файл .env"
+    
+    headers = {
+        "Authorization": f"Bearer {API_KEY}",
+        "Content-Type": "application/json"
+    }
+    
+    data = {
+        "model": "mistral-medium",  # или другая доступная модель
+        "messages": [
+            {"role": "user", "content": prompt}
+        ],
+        "max_tokens": max_length,
+        "temperature": 0.7,
+        "top_p": 0.9
+    }
+    
+    try:
+        response = requests.post(f"{API_URL}chat/completions", headers=headers, json=data)
+        response.raise_for_status()
+        result = response.json()
+        return result["choices"][0]["message"]["content"]
+    except Exception as e:
+        return f"Ошибка при обращении к API: {str(e)}"
+
+# Маршруты
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/chat', methods=['POST'])
+def chat():
+    data = request.json
+    prompt = data.get('prompt', '')
+    
+    if not prompt:
+        return jsonify({"error": "Пустой запрос"}), 400
+    
+    try:
+        response = generate_response_api(prompt)
+        return jsonify({"response": response})
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+@app.route('/api/code', methods=['POST'])
+def code():
+    data = request.json
+    prompt = data.get('prompt', '')
+    language = data.get('language', 'python')
+    
+    if not prompt:
+        return jsonify({"error": "Пустой запрос"}), 400
+    
+    # Добавляем контекст для генерации кода
+    code_prompt = f"Напиши код на языке {language} для решения следующей задачи: {prompt}"
+    
+    try:
+        response = generate_response_api(code_prompt)
+        return jsonify({"code": response})
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+if __name__ == '__main__':
+    print("🚀 Запуск Mistral AI Assistant в режиме API")
+    print("⚠️ Убедитесь, что вы добавили MISTRAL_API_KEY в файл .env")
+    app.run(debug=True, port=5000)

app.py

@@ -0,0 +1,119 @@
+import os
+import json
+from flask import Flask, render_template, request, jsonify
+from flask_cors import CORS
+import torch
+from transformers import AutoModelForCausalLM, AutoTokenizer
+
+app = Flask(__name__)
+CORS(app)
+
+# Глобальные переменные для модели
+model = None
+tokenizer = None
+
+# Загрузка модели Mistral (локально)
+def load_model():
+    global model, tokenizer
+    try:
+        model_name = "mistralai/Mistral-7B-Instruct-v0.3"
+        tokenizer = AutoTokenizer.from_pretrained(model_name)
+        
+        # Проверяем наличие GPU
+        if torch.cuda.is_available():
+            print("Загрузка модели на GPU...")
+            model = AutoModelForCausalLM.from_pretrained(
+                model_name,
+                torch_dtype=torch.float16,
+                device_map="auto",
+                load_in_8bit=True  # Для оптимизации памяти
+            )
+        else:
+            print("GPU не обнаружен. Загрузка модели на CPU (это может быть медленно)...")
+            # Загрузка облегченной версии для CPU
+            model = AutoModelForCausalLM.from_pretrained(
+                model_name,
+                torch_dtype=torch.float32,  # Используем float32 для CPU
+                low_cpu_mem_usage=True,
+                device_map="auto"
+            )
+        print("Модель успешно загружена!")
+    except Exception as e:
+        print(f"Ошибка при загрузке модели: {e}")
+        model = None
+        tokenizer = None
+
+# Инициализация приложения
+@app.before_request
+def before_request():
+    global model, tokenizer
+    if model is None or tokenizer is None:
+        load_model()
+
+# Функция для генерации ответа от модели
+def generate_response(prompt, max_length=1024):
+    if model is None or tokenizer is None:
+        return "Ошибка: Модель не загружена"
+    
+    # Форматирование запроса в формате Mistral Instruct
+    formatted_prompt = f"<s>[INST] {prompt} [/INST]"
+    
+    inputs = tokenizer(formatted_prompt, return_tensors="pt").to(model.device)
+    
+    # Генерация ответа
+    with torch.no_grad():
+        outputs = model.generate(
+            inputs["input_ids"],
+            max_new_tokens=max_length,
+            temperature=0.7,
+            top_p=0.9,
+            do_sample=True,
+            pad_token_id=tokenizer.eos_token_id
+        )
+    
+    # Декодирование ответа
+    response = tokenizer.decode(outputs[0], skip_special_tokens=True)
+    # Извлечение только ответа модели (после [/INST])
+    response = response.split("[/INST]")[-1].strip()
+    
+    return response
+
+# Маршруты
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/chat', methods=['POST'])
+def chat():
+    data = request.json
+    prompt = data.get('prompt', '')
+    
+    if not prompt:
+        return jsonify({"error": "Пустой запрос"}), 400
+    
+    try:
+        response = generate_response(prompt)
+        return jsonify({"response": response})
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+@app.route('/api/code', methods=['POST'])
+def code():
+    data = request.json
+    prompt = data.get('prompt', '')
+    language = data.get('language', 'python')
+    
+    if not prompt:
+        return jsonify({"error": "Пустой запрос"}), 400
+    
+    # Добавляем контекст для генерации кода
+    code_prompt = f"Напиши код на языке {language} для решения следующей задачи: {prompt}"
+    
+    try:
+        response = generate_response(code_prompt)
+        return jsonify({"code": response})
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+if __name__ == '__main__':
+    app.run(debug=True, port=5000)

requirements.txt

@@ -0,0 +1,7 @@
+flask==2.3.3
+requests==2.31.0
+python-dotenv==1.0.0
+flask-cors==4.0.0
+transformers==4.36.2
+torch==2.1.2
+sentencepiece==0.1.99

run.py

@@ -0,0 +1,60 @@
+import os
+import sys
+import subprocess
+
+def check_dependencies():
+    """Проверяет, установлены ли все необходимые зависимости"""
+    try:
+        import flask
+        import torch
+        import transformers
+        print("✅ Все необходимые зависимости установлены.")
+        return True
+    except ImportError as e:
+        print(f"❌ Отсутствуют зависимости: {e}")
+        return False
+
+def install_dependencies():
+    """Устанавливает необходимые зависимости из requirements.txt"""
+    print("📦 Установка зависимостей...")
+    try:
+        subprocess.check_call([sys.executable, "-m", "pip", "install", "-r", "requirements.txt"])
+        print("✅ Зависимости успешно установлены!")
+        return True
+    except subprocess.CalledProcessError as e:
+        print(f"❌ Ошибка при установке зависимостей: {e}")
+        return False
+
+def run_app():
+    """Запускает Flask-приложение"""
+    print("🚀 Запуск Mistral AI Assistant...")
+    print("⚠️ Первый запуск может занять некоторое время, пока загружается модель.")
+    try:
+        from app import app
+        app.run(debug=True, port=5000)
+    except Exception as e:
+        print(f"❌ Ошибка при запуске приложения: {e}")
+
+def main():
+    print("="*50)
+    print("🤖 Mistral AI Assistant - Установка и запуск")
+    print("="*50)
+    
+    # Проверяем зависимости
+    if not check_dependencies():
+        print("\nНеобходимо установить зависимости.")
+        choice = input("Установить зависимости сейчас? (y/n): ").lower()
+        if choice == 'y':
+            if not install_dependencies():
+                print("❌ Не удалось установить зависимости. Пожалуйста, установите их вручную.")
+                return
+        else:
+            print("⚠️ Для работы приложения необходимо установить зависимости.")
+            print("Выполните: pip install -r requirements.txt")
+            return
+    
+    # Запускаем приложение
+    run_app()
+
+if __name__ == "__main__":
+    main()

static/css/style.css

@@ -0,0 +1,582 @@
+/* Основные стили */
+:root {
+    --primary-color: #6366f1;
+    --secondary-color: #4f46e5;
+    --text-color: #1f2937;
+    --text-secondary: #6b7280;
+    --bg-color: #ffffff;
+    --bg-secondary: #f3f4f6;
+    --border-color: #e5e7eb;
+    --shadow-color: rgba(0, 0, 0, 0.1);
+    --message-user-bg: #f3f4f6;
+    --message-ai-bg: #ffffff;
+    --code-bg: #282c34;
+}
+
+/* Темная тема */
+body.dark-mode {
+    --primary-color: #818cf8;
+    --secondary-color: #6366f1;
+    --text-color: #f9fafb;
+    --text-secondary: #d1d5db;
+    --bg-color: #111827;
+    --bg-secondary: #1f2937;
+    --border-color: #374151;
+    --shadow-color: rgba(0, 0, 0, 0.3);
+    --message-user-bg: #1f2937;
+    --message-ai-bg: #111827;
+    --code-bg: #1a1d23;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    color: var(--text-color);
+    background-color: var(--bg-color);
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.app-container {
+    display: flex;
+    height: 100vh;
+    overflow: hidden;
+}
+
+/* Боковая панель */
+.sidebar {
+    width: 260px;
+    background-color: var(--bg-secondary);
+    border-right: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: column;
+    padding: 16px;
+    transition: background-color 0.3s;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 20px;
+    padding: 10px;
+}
+
+.logo i {
+    font-size: 24px;
+    color: var(--primary-color);
+}
+
+.logo h1 {
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.new-chat-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    padding: 10px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    margin-bottom: 20px;
+}
+
+.new-chat-btn:hover {
+    background-color: var(--secondary-color);
+}
+
+.chat-history {
+    flex: 1;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.chat-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    color: var(--text-secondary);
+}
+
+.chat-item:hover {
+    background-color: rgba(99, 102, 241, 0.1);
+}
+
+.chat-item.active {
+    background-color: rgba(99, 102, 241, 0.15);
+    color: var(--primary-color);
+}
+
+.chat-item i {
+    font-size: 14px;
+}
+
+.chat-item span {
+    font-size: 14px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.sidebar-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 16px;
+    border-top: 1px solid var(--border-color);
+    margin-top: 16px;
+}
+
+.toggle-mode-btn {
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: 16px;
+    padding: 8px;
+    border-radius: 8px;
+    transition: background-color 0.2s;
+}
+
+.toggle-mode-btn:hover {
+    background-color: rgba(99, 102, 241, 0.1);
+}
+
+.model-info {
+    font-size: 12px;
+    color: var(--text-secondary);
+}
+
+/* Основной контент */
+.main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
+
+.chat-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Экран приветствия */
+.welcome-screen {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    height: 100%;
+    padding: 20px;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.welcome-logo {
+    font-size: 48px;
+    color: var(--primary-color);
+    margin-bottom: 20px;
+    background-color: rgba(99, 102, 241, 0.1);
+    width: 100px;
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 20px;
+}
+
+.welcome-screen h1 {
+    font-size: 28px;
+    margin-bottom: 10px;
+}
+
+.welcome-screen p {
+    font-size: 16px;
+    color: var(--text-secondary);
+    margin-bottom: 30px;
+}
+
+.examples {
+    width: 100%;
+}
+
+.examples h3 {
+    font-size: 16px;
+    margin-bottom: 16px;
+}
+
+.example-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 16px;
+}
+
+.example {
+    background-color: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 16px;
+    cursor: pointer;
+    transition: border-color 0.2s, transform 0.2s;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.example:hover {
+    border-color: var(--primary-color);
+    transform: translateY(-2px);
+}
+
+.example i {
+    font-size: 18px;
+    color: var(--primary-color);
+}
+
+.example span {
+    font-size: 14px;
+}
+
+/* Сообщения */
+.messages {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.message {
+    display: flex;
+    gap: 16px;
+    padding: 16px;
+    border-radius: 8px;
+    animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.message.user {
+    background-color: var(--message-user-bg);
+    align-self: flex-end;
+    max-width: 85%;
+}
+
+.message.ai {
+    background-color: var(--message-ai-bg);
+    border: 1px solid var(--border-color);
+    align-self: flex-start;
+    max-width: 85%;
+}
+
+.message-avatar {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background-color: var(--primary-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 16px;
+    flex-shrink: 0;
+}
+
+.message-avatar.user {
+    background-color: var(--text-secondary);
+}
+
+.message-content {
+    flex: 1;
+    overflow-wrap: break-word;
+}
+
+.message-sender {
+    font-weight: 600;
+    margin-bottom: 4px;
+}
+
+.message-text {
+    line-height: 1.5;
+    font-size: 15px;
+}
+
+.message-text p {
+    margin-bottom: 12px;
+}
+
+.message-text p:last-child {
+    margin-bottom: 0;
+}
+
+.message-text pre {
+    background-color: var(--code-bg);
+    border-radius: 6px;
+    padding: 12px;
+    overflow-x: auto;
+    margin: 12px 0;
+}
+
+.message-text code {
+    font-family: 'Fira Code', monospace;
+    font-size: 14px;
+}
+
+.message-text code:not(pre code) {
+    background-color: rgba(99, 102, 241, 0.1);
+    padding: 2px 4px;
+    border-radius: 4px;
+    font-size: 14px;
+}
+
+.message-text ul, .message-text ol {
+    margin: 12px 0;
+    padding-left: 24px;
+}
+
+.message-text li {
+    margin-bottom: 6px;
+}
+
+.message-text a {
+    color: var(--primary-color);
+    text-decoration: none;
+}
+
+.message-text a:hover {
+    text-decoration: underline;
+}
+
+/* Контейнер ввода */
+.input-container {
+    padding: 16px;
+    border-top: 1px solid var(--border-color);
+    background-color: var(--bg-color);
+}
+
+.input-wrapper {
+    display: flex;
+    gap: 12px;
+    background-color: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 8px 16px;
+    transition: border-color 0.2s;
+}
+
+.input-wrapper:focus-within {
+    border-color: var(--primary-color);
+}
+
+textarea {
+    flex: 1;
+    border: none;
+    background: none;
+    resize: none;
+    height: 24px;
+    max-height: 200px;
+    font-family: inherit;
+    font-size: 15px;
+    color: var(--text-color);
+    outline: none;
+    padding: 4px 0;
+    line-height: 1.5;
+}
+
+textarea::placeholder {
+    color: var(--text-secondary);
+}
+
+.send-btn {
+    background: none;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: 16px;
+    padding: 8px;
+    border-radius: 8px;
+    transition: background-color 0.2s;
+    align-self: flex-end;
+}
+
+.send-btn:hover {
+    background-color: rgba(99, 102, 241, 0.1);
+}
+
+.send-btn:disabled {
+    color: var(--text-secondary);
+    cursor: not-allowed;
+}
+
+.input-footer {
+    display: flex;
+    justify-content: center;
+    margin-top: 8px;
+}
+
+.disclaimer {
+    font-size: 12px;
+    color: var(--text-secondary);
+}
+
+/* Адаптивность */
+@media (max-width: 768px) {
+    .app-container {
+        flex-direction: column;
+    }
+    
+    .sidebar {
+        width: 100%;
+        height: auto;
+        border-right: none;
+        border-bottom: 1px solid var(--border-color);
+        padding: 12px;
+    }
+    
+    .chat-history {
+        display: none;
+    }
+    
+    .logo {
+        margin-bottom: 12px;
+    }
+    
+    .new-chat-btn {
+        margin-bottom: 0;
+    }
+    
+    .sidebar-footer {
+        display: none;
+    }
+    
+    .main-content {
+        height: 0;
+        flex: 1;
+    }
+    
+    .example-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .message.user, .message.ai {
+        max-width: 100%;
+    }
+}
+
+/* Анимации загрузки */
+.typing-indicator {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 12px;
+    border-radius: 16px;
+    background-color: var(--bg-secondary);
+    width: fit-content;
+    margin-top: 8px;
+}
+
+.typing-dot {
+    width: 8px;
+    height: 8px;
+    background-color: var(--text-secondary);
+    border-radius: 50%;
+    animation: typingAnimation 1.4s infinite ease-in-out;
+}
+
+.typing-dot:nth-child(1) {
+    animation-delay: 0s;
+}
+
+.typing-dot:nth-child(2) {
+    animation-delay: 0.2s;
+}
+
+.typing-dot:nth-child(3) {
+    animation-delay: 0.4s;
+}
+
+@keyframes typingAnimation {
+    0%, 60%, 100% {
+        transform: translateY(0);
+        opacity: 0.6;
+    }
+    30% {
+        transform: translateY(-4px);
+        opacity: 1;
+    }
+}
+
+/* Кнопки действий для сообщений */
+.message-actions {
+    display: flex;
+    gap: 8px;
+    margin-top: 8px;
+}
+
+.action-btn {
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: 14px;
+    padding: 4px 8px;
+    border-radius: 4px;
+    transition: background-color 0.2s, color 0.2s;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.action-btn:hover {
+    background-color: rgba(99, 102, 241, 0.1);
+    color: var(--primary-color);
+}
+
+/* Стили для кода */
+.hljs {
+    background: var(--code-bg) !important;
+    border-radius: 6px;
+}
+
+/* Стили для скроллбара */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: var(--border-color);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: var(--text-secondary);
+}

static/js/script.js

@@ -0,0 +1,363 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Элементы DOM
+    const userInput = document.getElementById('user-input');
+    const sendBtn = document.getElementById('send-btn');
+    const messagesContainer = document.getElementById('messages');
+    const chatContainer = document.getElementById('chat-container');
+    const welcomeScreen = document.getElementById('welcome-screen');
+    const newChatBtn = document.getElementById('new-chat');
+    const chatHistory = document.getElementById('chat-history');
+    const toggleModeBtn = document.getElementById('toggle-mode');
+    const examples = document.querySelectorAll('.example');
+    
+    // Состояние приложения
+    let currentChatId = generateId();
+    let chats = {};
+    let isWaitingForResponse = false;
+    
+    // Инициализация
+    initTheme();
+    loadChats();
+    
+    // Обработчики событий
+    sendBtn.addEventListener('click', sendMessage);
+    userInput.addEventListener('keydown', handleKeyDown);
+    newChatBtn.addEventListener('click', createNewChat);
+    toggleModeBtn.addEventListener('click', toggleDarkMode);
+    
+    // Обработка примеров запросов
+    examples.forEach(example => {
+        example.addEventListener('click', () => {
+            const prompt = example.getAttribute('data-prompt');
+            if (prompt) {
+                hideWelcomeScreen();
+                userInput.value = prompt;
+                sendMessage();
+            }
+        });
+    });
+    
+    // Автоматическое изменение высоты текстового поля
+    userInput.addEventListener('input', function() {
+        this.style.height = 'auto';
+        this.style.height = (this.scrollHeight) + 'px';
+        
+        // Активация/деактивация кнопки отправки
+        sendBtn.disabled = this.value.trim() === '' || isWaitingForResponse;
+    });
+    
+    // Функции
+    function sendMessage() {
+        const message = userInput.value.trim();
+        if (message === '' || isWaitingForResponse) return;
+        
+        // Добавляем сообщение пользователя
+        addMessage('user', message);
+        
+        // Очищаем ввод
+        userInput.value = '';
+        userInput.style.height = 'auto';
+        sendBtn.disabled = true;
+        
+        // Показываем индикатор набора текста
+        showTypingIndicator();
+        
+        // Устанавливаем флаг ожидания ответа
+        isWaitingForResponse = true;
+        
+        // Сохраняем чат
+        saveChat(message);
+        
+        // Отправляем запрос на сервер
+        fetch('/api/chat', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ prompt: message })
+        })
+        .then(response => response.json())
+        .then(data => {
+            // Удаляем индикатор набора текста
+            removeTypingIndicator();
+            
+            // Добавляем ответ от AI
+            if (data.error) {
+                addMessage('ai', `Ошибка: ${data.error}`);
+            } else {
+                addMessage('ai', data.response);
+            }
+            
+            // Сохраняем ответ в чат
+            saveChat(null, data.response || `Ошибка: ${data.error}`);
+            
+            // Сбрасываем флаг ожидания ответа
+            isWaitingForResponse = false;
+            
+            // Активируем кнопку отправки, если есть текст
+            sendBtn.disabled = userInput.value.trim() === '';
+        })
+        .catch(error => {
+            console.error('Ошибка:', error);
+            removeTypingIndicator();
+            addMessage('ai', 'Произошла ошибка при обработке запроса. Пожалуйста, попробуйте еще раз.');
+            isWaitingForResponse = false;
+            sendBtn.disabled = userInput.value.trim() === '';
+        });
+    }
+    
+    function handleKeyDown(e) {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            sendMessage();
+        }
+    }
+    
+    function addMessage(sender, text) {
+        // Скрываем экран приветствия, если он отображается
+        hideWelcomeScreen();
+        
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `message ${sender}`;
+        
+        const avatarDiv = document.createElement('div');
+        avatarDiv.className = `message-avatar ${sender}`;
+        avatarDiv.innerHTML = sender === 'user' ? '<i class="fas fa-user"></i>' : '<i class="fas fa-robot"></i>';
+        
+        const contentDiv = document.createElement('div');
+        contentDiv.className = 'message-content';
+        
+        const senderDiv = document.createElement('div');
+        senderDiv.className = 'message-sender';
+        senderDiv.textContent = sender === 'user' ? 'Вы' : 'Mistral AI';
+        
+        const textDiv = document.createElement('div');
+        textDiv.className = 'message-text';
+        
+        // Обрабатываем текст с поддержкой Markdown
+        if (sender === 'ai') {
+            textDiv.innerHTML = marked.parse(text);
+            
+            // Подсветка синтаксиса кода
+            textDiv.querySelectorAll('pre code').forEach((block) => {
+                hljs.highlightElement(block);
+            });
+            
+            // Добавляем кнопки действий
+            const actionsDiv = document.createElement('div');
+            actionsDiv.className = 'message-actions';
+            
+            const copyBtn = document.createElement('button');
+            copyBtn.className = 'action-btn';
+            copyBtn.innerHTML = '<i class="fas fa-copy"></i> Копировать';
+            copyBtn.addEventListener('click', () => copyToClipboard(text));
+            
+            actionsDiv.appendChild(copyBtn);
+            contentDiv.appendChild(actionsDiv);
+        } else {
+            textDiv.textContent = text;
+        }
+        
+        contentDiv.appendChild(senderDiv);
+        contentDiv.appendChild(textDiv);
+        
+        messageDiv.appendChild(avatarDiv);
+        messageDiv.appendChild(contentDiv);
+        
+        messagesContainer.appendChild(messageDiv);
+        
+        // Прокручиваем к последнему сообщению
+        messageDiv.scrollIntoView({ behavior: 'smooth' });
+    }
+    
+    function showTypingIndicator() {
+        const indicatorDiv = document.createElement('div');
+        indicatorDiv.className = 'message ai typing';
+        indicatorDiv.innerHTML = `
+            <div class="message-avatar ai">
+                <i class="fas fa-robot"></i>
+            </div>
+            <div class="message-content">
+                <div class="message-sender">Mistral AI</div>
+                <div class="typing-indicator">
+                    <div class="typing-dot"></div>
+                    <div class="typing-dot"></div>
+                    <div class="typing-dot"></div>
+                </div>
+            </div>
+        `;
+        
+        messagesContainer.appendChild(indicatorDiv);
+        indicatorDiv.scrollIntoView({ behavior: 'smooth' });
+    }
+    
+    function removeTypingIndicator() {
+        const typingIndicator = document.querySelector('.message.typing');
+        if (typingIndicator) {
+            typingIndicator.remove();
+        }
+    }
+    
+    function hideWelcomeScreen() {
+        if (welcomeScreen.style.display !== 'none') {
+            welcomeScreen.style.display = 'none';
+        }
+    }
+    
+    function createNewChat() {
+        // Сохраняем текущий чат перед созданием нового
+        saveChats();
+        
+        // Создаем новый чат
+        currentChatId = generateId();
+        chats[currentChatId] = {
+            id: currentChatId,
+            title: 'Новый чат',
+            messages: [],
+            timestamp: Date.now()
+        };
+        
+        // Очищаем сообщения
+        messagesContainer.innerHTML = '';
+        
+        // Показываем экран приветствия
+        welcomeScreen.style.display = 'flex';
+        
+        // Обновляем историю чатов
+        updateChatHistory();
+    }
+    
+    function saveChat(userMessage, aiResponse) {
+        if (!chats[currentChatId]) {
+            chats[currentChatId] = {
+                id: currentChatId,
+                title: userMessage ? userMessage.substring(0, 30) : 'Новый чат',
+                messages: [],
+                timestamp: Date.now()
+            };
+        }
+        
+        if (userMessage) {
+            chats[currentChatId].messages.push({
+                sender: 'user',
+                text: userMessage,
+                timestamp: Date.now()
+            });
+            
+            // Обновляем заголовок чата, если это первое сообщение
+            if (chats[currentChatId].messages.length === 1) {
+                chats[currentChatId].title = userMessage.substring(0, 30) + (userMessage.length > 30 ? '...' : '');
+            }
+        }
+        
+        if (aiResponse) {
+            chats[currentChatId].messages.push({
+                sender: 'ai',
+                text: aiResponse,
+                timestamp: Date.now()
+            });
+        }
+        
+        // Сохраняем чаты в localStorage
+        saveChats();
+        
+        // Обновляем историю чатов
+        updateChatHistory();
+    }
+    
+    function saveChats() {
+        localStorage.setItem('mistral_chats', JSON.stringify(chats));
+    }
+    
+    function loadChats() {
+        const savedChats = localStorage.getItem('mistral_chats');
+        if (savedChats) {
+            chats = JSON.parse(savedChats);
+            updateChatHistory();
+            
+            // Если есть чаты, загружаем последний активный
+            const chatIds = Object.keys(chats);
+            if (chatIds.length > 0) {
+                // Сортируем по времени и берем самый последний
+                const sortedIds = chatIds.sort((a, b) => chats[b].timestamp - chats[a].timestamp);
+                loadChat(sortedIds[0]);
+            }
+        }
+    }
+    
+    function updateChatHistory() {
+        chatHistory.innerHTML = '';
+        
+        // Сортируем чаты по времени (сначала новые)
+        const sortedChats = Object.values(chats).sort((a, b) => b.timestamp - a.timestamp);
+        
+        sortedChats.forEach(chat => {
+            const chatItem = document.createElement('div');
+            chatItem.className = `chat-item ${chat.id === currentChatId ? 'active' : ''}`;
+            chatItem.setAttribute('data-id', chat.id);
+            
+            chatItem.innerHTML = `
+                <i class="fas fa-comment"></i>
+                <span>${chat.title}</span>
+            `;
+            
+            chatItem.addEventListener('click', () => loadChat(chat.id));
+            
+            chatHistory.appendChild(chatItem);
+        });
+    }
+    
+    function loadChat(chatId) {
+        if (!chats[chatId]) return;
+        
+        currentChatId = chatId;
+        messagesContainer.innerHTML = '';
+        welcomeScreen.style.display = 'none';
+        
+        // Загружаем сообщения
+        chats[chatId].messages.forEach(msg => {
+            addMessage(msg.sender, msg.text);
+        });
+        
+        // Обновляем активный чат в истории
+        updateChatHistory();
+    }
+    
+    function toggleDarkMode() {
+        const isDarkMode = document.body.classList.toggle('dark-mode');
+        localStorage.setItem('dark_mode', isDarkMode ? 'true' : 'false');
+        
+        // Обновляем иконку
+        toggleModeBtn.innerHTML = isDarkMode ? 
+            '<i class="fas fa-sun"></i>' : 
+            '<i class="fas fa-moon"></i>';
+    }
+    
+    function initTheme() {
+        const savedTheme = localStorage.getItem('dark_mode');
+        if (savedTheme === 'true') {
+            document.body.classList.add('dark-mode');
+            toggleModeBtn.innerHTML = '<i class="fas fa-sun"></i>';
+        }
+    }
+    
+    function copyToClipboard(text) {
+        navigator.clipboard.writeText(text).then(() => {
+            // Показываем уведомление об успешном копировании
+            const notification = document.createElement('div');
+            notification.className = 'copy-notification';
+            notification.textContent = 'Скопировано в буфер обмена';
+            document.body.appendChild(notification);
+            
+            setTimeout(() => {
+                notification.remove();
+            }, 2000);
+        }).catch(err => {
+            console.error('Ошибка при копировании: ', err);
+        });
+    }
+    
+    function generateId() {
+        return Date.now().toString(36) + Math.random().toString(36).substring(2);
+    }
+});

templates/index.html

@@ -0,0 +1,87 @@
+<!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>