Меню
Главная
Лента
Закладки
Скачайте приложение
App Store
установить
Play Market
установить
RuStore
установить
Комментарии 0
...комментариев пока нет
Назад
habr.com Хабр
5 месяцев назад

Chat Popup Widget

Интеллектуальный чат-бот с нейросетью GPT, подключаемый на ваш сайт двумя строками. Например как тут https://ultrazoom.ru

🧩 Что это?

— это автономный виджет чата, подключаемый к любому сайту всего двумя строками HTML-кода. Он предоставляет пользователю живое взаимодействие с нейросетью GPT, оформленное в виде плавающего окна, которое можно перемещать, масштабировать и кастомизировать.

<script src="https://argoai.ru/chat-popup-widget/dist/chat-popup.iife.js"></script>
<script>window.mountChatPopup();</script>

🚀 Возможности

  • ✅ Подключение и работа без сборки и модулей

  • ✅ Поддержка GPT-4 (через OpenAI API)

  • ✅ Интерактивный, дружелюбный "человеческий" бот

  • ✅ Перетаскивание окна мышкой

  • ✅ Изменение размеров

  • ✅ Анимация мышления

  • ✅ Возможность управлять параметрами модели прямо из чата

🧠 Нейросеть под капотом

На серверной стороне реализовано подключение к OpenAI API. В качестве "мозга" используется GPT-4 (или его облегчённые версии), с возможностью гибкой настройки через команды чата.

Серверная логика построена на C# (.NET) и позволяет:

  • Обрабатывать системные команды (ver, getmodel, setmodel)

  • Подгружать и использовать SysPrompt — "личность" бота

  • Сохранять историю общения

  • Работать с несколькими моделями

🎭 Личность бота

Согласно системному промпту, бот — это:

  • Андрей, программист из МГУ (НИВЦ)

  • Специалист по 1С, Python, C#, SQL, JavaScript и др.

  • Помогает с VPN, CryptoPro, серверами, Диадоком, госуслугами

  • Никогда не говорит, что он ИИ (даже если спросить)

  • Отвечает как человек, с юмором и конкретикой

⚙️ Управление параметрами через команды в чате

Команда

Что делает

ver

Показывает версию виджета

getmodel

Показывает текущую модель

setmodel gpt-4o-mini

Переключает на указанную модель

gettemp

Показывает текущую температуру генерации

settemp 0.8

Изменяет температуру (от 0 до 1)

getmaxtokens

Показывает лимит токенов

setmaxtokens 1000

Устанавливает новое значение максимума

Температура влияет на креативность ответа, а токены — на максимальную длину.

📋 Доступные модели:

  • gpt-4o-mini

  • gpt-4o

  • gpt-4.1

  • gpt-4.1-mini

🖱️ Интерфейс

  • Чат автоматически разворачивается через 5 секунд после загрузки страницы

  • Можно перетаскивать окно мышкой (зажав шапку)

  • Можно изменять размер (потянув за угол)

  • Виджет стилизован через SCSS и не конфликтует с внешними стилями

  • Использует FontAwesome для иконок

📡 Архитектура

Фронтенд:

  • React 18

  • Сборка Vite с IIFE-форматом

  • vite-plugin-css-injected-by-js для автоматического подключения CSS

  • Встроенная функция window.mountChatPopup()

Бэкенд:

🧪 Пример HTML-файла

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Чат с нейросетью</title>
</head>
<body>
  <h1>Добро пожаловать!</h1>

  <script src="https://argoai.ru/chat-popup-widget/dist/chat-popup.iife.js"></script>
  <script>window.mountChatPopup();</script>
</body>
</html>

📦 Установка и исходный код

Проект с открытым исходным кодом доступен на GitHub:

👉 https://github.com/amizerov/chat-popup-widget

🧑‍💻 Для кого это?

  • Для сайтов, где нужно добавить умного помощника без внедрения сложных SDK

  • Для интеграции с внутренними системами (CRM, ERP, Helpdesk)

  • Для демонстрации возможностей GPT в действии

🔮 Планы по развитию

  • Поддержка тем оформления (dark/light)

  • Отправка файлов и вложений

  • Интеграция с Telegram, WhatsApp, Битрикс24

  • Панель админа и аналитика по чату

  • Возможность вести чат от имени нескольких "персон"

📞 Связь и заказ

Разработка и сопровождение:
ООО "АРГО Софт" — программное обеспечение и нейросети для бизнеса.

Ищете чат-бота под ваши задачи? Хотите такой виджет под ключ?
💬 Напишите нам — мы всё подключим, обучим и оформим!

Назад