Mira — контакт установлен

Светлый презентационный сайт ИИ-агента Compile Point. Объёмная CSS motion-графика, исходный анимированный персонаж, адаптивный чат и серверные функции для ИИ и Telegram.

Motion-постановка

Физический 3D-подиум

src/podium-entry.js — исходник самостоятельной сцены Three.js. src/podium.js — собранный автономный скрипт, позволяющий открыть сайт двойным кликом без CDN и ES module-запросов. npm run build обновляет его автоматически. Сцена доступна через window.MiraPodium: scene, camera, parts, resize. В parts находятся отдельные именованные геометрии основания, платформы, хрома, световых полос, стеклянной цифры, кольца и объёмных надписей. Корпус перекрывает движущуюся искру с помощью depth buffer. Материалы используют environment reflections и физическую transmission для стекла. Пол слегка отражающий, освещение и контактные тени рассчитаны в WebGL.

Mira остаётся исходным 2D Canvas-персонажем в прозрачном iframe: 3D-модель робота не предоставлена. Он совмещён с платформой по проекции камеры; стеклянное кольцо разделено на переднюю и заднюю половины для композиции с iframe. Поэтому отражения и преломления самих 3D-объектов физические, а отражение и преломление робота не рассчитываются. Для полностью единой 3D-сцены нужен исходный 3D-ассет Mira (например GLB). Сам персонаж не переработан.

Загрузочная презентация: плавное заполнение пилюль длится около 3,3 секунды при уже готовых ресурсах (вдвое медленнее предыдущей версии). Затем пауза 0,7 секунды и три последовательных блока «Общение», «Внимание», «Связь» с интервалом 3 секунды. Mira направляет взгляд к центру каждого блока. Через 9 секунд после начала показа блоков активируются слежение за курсором и «ПУСК». Общая постановка занимает около 13 секунд плюс ожидание ресурсов; при reduced motion показ сокращается. Название над персонажем и проценты визуально скрыты.

src/motion.js — оригинальный WebGL-шейдер плавного бирюзового фона, интерактивные демонстрационные запросы и перемещение единственного персонажа между сценами. Это собственная реализация эффекта жидкого света, не извлечённый исходный код ChatGPT. Если WebGL недоступен, остаётся CSS-световой фон. src/motion.css — сетка 12 × 12 px со смещённым светлым контуром для рельефа, входная постановка, пространственные панели и сцена обращения. При reduced motion непрерывная анимация фона отключается.

Загрузка получает фактический прогресс изображений из Mira.html. Mira стоит на объёмном подиуме с циклической бирюзовой волной; вокруг движутся стеклянные кольца. Узкая пилюля заполняется от обоих краёв к центральной кнопке «Пуск». После готовности персонажа кнопка активируется; главный экран открывается только по нажатию. Оформление входной сцены — src/launch.css. При прокрутке Mira переходит в сцену разговора и затем в раздел подключения; существующий чат остаётся доступным на первом экране. Карточка обращения в motion-сцене — обозначенный пример, не отправленная заявка.

Локальный запуск

Для просмотра без терминала откройте index.html двойным кликом. Стили, персонаж, анимации и локальный демонстрационный чат работают через файл. Настоящий ИИ и Telegram доступны после серверного запуска или размещения на Vercel.

npm install
npm run dev

Vite показывает интерфейс. Для локальной работы /api/chat и /api/lead используйте npx vercel dev после подключения проекта к Vercel. npm run build собирает сайт в dist; оригинальный Mira.html копируется автоматически.

Подключение Vercel

Загрузите проект в GitHub, импортируйте репозиторий в Vercel. Framework: Vite. Build command: npm run build. Output: dist. Папка api разворачивается как серверные функции.

В Settings → Environment Variables добавьте:

Переменная	Назначение
OPENAI_API_KEY	Ключ OpenAI, хранится только на сервере
OPENAI_MODEL	Модель, по умолчанию gpt-4o-mini
TELEGRAM_BOT_TOKEN	Токен бота, отправляющего обращения
TELEGRAM_CHAT_ID	ID канала, группы или личного чата; для канала можно использовать @username
MIRA_SYSTEM_PROMPT	Необязательный полный контракт Mira вместо встроенного

После изменения переменных выполните Redeploy. Бот должен иметь право отправлять сообщения в целевое место; в канале назначьте его администратором с правом публикации. Для личного чата сначала начните разговор с ботом.

Без ключа OpenAI работает явно обозначенная демонстрация с заранее подготовленными ответами. Telegram не имитируется: успешное подтверждение появляется только после ответа Telegram API.

Контракт Mira

Встроенная инструкция находится в api/chat.js. Собственный MIRA_SYSTEM_PROMPT должен требовать JSON:

{"reply":"Ответ на русском", "leadReady":false, "summary":""}

leadReady: true означает, что данные для обсуждения собраны. Пользователь проверяет обращение и вводит имя и контакт в форме; только после согласия оно передаётся через /api/lead. Это исходящая передача владельцу, а не диалог внутри Telegram и не чтение публикаций канала.

Реакции персонажа

Первое сообщение — «Привет», затем «Задумалась». Ожидание ответа удерживается до окончания запроса. После ответа — «Хвостики». Когда обращение готово — «Подмигнуть». Связь с Canvas через проверяемые same-origin сообщения iframe. Исходная страница Mira.html сохраняет самостоятельную демонстрацию с кнопками.

Перед открытым запуском

Проверьте реальный диалог, сбор обращения и получение в выбранном Telegram. Для публичного API включите ограничения запросов в Vercel и лимит бюджета у провайдера ИИ. Убедитесь, что ссылка на политику Compile Point соответствует обработке обращений на этом сайте.