MChat

MChat — Mistral Large Edition

Умный веб-чат на Mistral Large (один из топовых frontier-моделей) с полным набором фич. Этап 4+5 полностью.

Фичи

Этап 4 — Улучшение чата ✅

Этап 5 — Работа с контентом ✅

Стек

Часть Технология
Frontend HTML5 + Vanilla JS (no framework)
Backend Vercel Edge Runtime (Node.js)
AI Mistral Large (mistral-large-latest / pixtral-large-latest для vision)
Web Search Tavily API (optional)
Code Highlight Prism.js
Markdown Marked.js
Python Runtime Pyodide (WASM)
Storage localStorage (index versioning)
PWA Service Worker + manifest.json

Деплой на Vercel

1. Подготовка

# Создай папку
mkdir mchat && cd mchat

# Скопируй файлы:
# - index.html → ./index.html (public folder)
# - manifest.json → ./public/manifest.json
# - sw.js → ./public/sw.js
# - chat.js → ./api/chat.js

2. Структура папок

mchat/
├── public/
│   ├── index.html
│   ├── manifest.json
│   └── sw.js
├── api/
│   └── chat.js
├── vercel.json
└── package.json

3. vercel.json

{
  "buildCommand": "echo 'Static build'",
  "public": "public"
}

4. Переменные окружения (Vercel Dashboard)

Добавь в Settings → Environment Variables:

MISTRAL_API_KEY=your_mistral_api_key_here
TAVILY_API_KEY=your_tavily_api_key_here (optional)

5. Deплой

npm install -g vercel
vercel deploy

Или просто push на GitHub и подключи Vercel (GitHub integration).

Получение ключей

Mistral API

  1. https://console.mistral.ai
  2. Регистрация → API Keys
  3. Create API Key
  4. Скопируй в MISTRAL_API_KEY

Лимиты: 2 RPM (free), ~1B токенов/месяц

Tavily (опционально, веб-поиск)

  1. https://tavily.com
  2. Sign up → API Keys
  3. Скопируй в TAVILY_API_KEY

Лимиты: free tier = 1000 запросов/месяц

Локальный тест

# Serve static файлы
python3 -m http.server 8000

# Откройся http://localhost:8000
# API не будет работать (нужен backend)

Архитектура данных

Chat Object

{
  id: "c{timestamp}",
  title: string,
  ts: timestamp,
  messages: [{
    id: "m{timestamp}",
    role: "user" | "assistant" | "system",
    content: string,
    ts: timestamp,
    imageBase64?: string,
    imageMime?: string,
    imageUrl?: string,
    quoteId?: string,        // цитируемое сообщение
    edited?: boolean,
    webSearch?: boolean,
    branches?: [{content: string}],  // регенерации
    // reactions[msgId]["me"] = [emoji1, emoji2, ...]
  }],
  pinned: [msgId],
  reactions: {[msgId]: {[userId]: [emoji]}}  // userId="me"
}

localStorage ключи

API Endpoint

POST /api/chat

Request

{
  messages: [
    {role: "system", content: string},
    {role: "user", content: string, imageBase64?: string, imageMime?: string},
    {role: "assistant", content: string}
  ],
  temperature: 0.7,  // 0–1.5
  webSearch: false,  // включить Tavily
  translateTo: null  // "English", "Deutsch" и т.д.
}

Response (SSE)

data: {"text": "chunk of response"}
data: {"text": " more text"}
...
data: [DONE]

Стиль & Дизайн

Фичи по этапам

Этап Реализовано
1–3 Базовый чат, personas, память, статистика
4 Редактирование, ветки, цитирование, закрепление, реакции, поиск, токены, черновик
5 Веб-поиск, PDF/TXT, STT, перевод, подсветка кода, объяснение, Python runner

Пути для развития

Темпы & производительность

Ограничения & известные моменты

  1. Offline mode — можно читать историю, но отправить нельзя (нужен API)
  2. Pyodide — загружается только при клике на “Запустить” (lazy load), ~30MB
  3. Vision — работает, но используется pixtral-large-latest (та же интеллектуальность)
  4. Токены — оценка ~3.8 символа/токен (приблизительно для Mistral)
  5. File upload — максимум одно изображение на сообщение; PDF/TXT обрабатываются как текст до 12k символов

Поддержка браузеров

PWA works: iOS (через “Add to Home Screen”), Android (через Chrome menu)

Made with ❤️ on Mistral Large