Статьи

Как добавить AI-чат с картинками на любой сайт

22 июля 2026, 16:00  |  8 мин чтения

Хотите AI-чат на сайте, который понимает не только текст, но и картинки? Берём бесплатные NVIDIA NIM, HTML-форму и JS — готово. Никаких серверов и платных API.

Что понадобится

— API-ключ NVIDIA (бесплатный, регистрация на build.nvidia.com)
— HTML-файл с формой чата
— Немного JS для отправки запросов

Шаг 1. Базовая разметка

Создаём контейнер чата: поле для сообщений, кнопка отправки, область для ответа. Для загрузки изображений добавляем input type="file" accept="image/*".

Шаг 2. Отправка запроса к NVIDIA API

Используем стандартный OpenAI-совместимый формат. Для текстовых моделей — обычные messages. Для vision — content с типом image_url и base64 картинкой:

{
  "model": "nvidia/llama-3.1-nemotron-nano-vl-8b-v1",
  "messages": [{
    "role": "user",
    "content": [
      {"type": "text", "text": "Что на этом изображении?"},
      {"type": "image_url", "image_url": {"url": "data:image/jpeg;base64,..."}}
    ]
  }]
}

Шаг 3. Загрузка изображения

Читаем файл через FileReader в base64, показываем превью, добавляем к сообщению. Важно: для больших картинок (>10 MB) сжимайте перед отправкой.

Шаг 4. Streaming ответа

Используйте fetch с ReadableStream, чтобы ответ выводился токен за токеном — как в ChatGPT. Это даёт ощущение живого диалога.

Какие модели использовать

ЗадачаМодель
Чат без картинокmeta/llama-3.1-8b-instruct или deepseek-ai/deepseek-v4-flash
Чат с картинкамиnvidia/llama-3.1-nemotron-nano-vl-8b-v1
Тяжёлый анализ изображенийnvidia/nemotron-nano-12b-v2-vl
Кодинг / терминалnvidia/llama-3.3-nemotron-super-49b-v1

Где посмотреть рабочий пример

На этом же сайте — раздел Нейросети. Там 20 моделей с чатом и загрузкой изображений. Откройте исходник и используйте как шаблон.

Весь код — на чистом HTML/CSS/JS. Никаких зависимостей. Просто сохраните файл и откройте в браузере.