Подключаем данные и ИИ
к учебному проекту

Хочу собрать квиз про капибар на Тильде с общей статистикой ответов в Supabase. После выбора покажи, верен ли ответ, и какой процент ответов приходится на этот вариант. Укажи, что именно считаем: ответы, а не уникальных людей, если учёта пользователей нет.

Подготовь таблицу и нужные разрешения в Supabase, объясняя каждый шаг. Если у меня платная Тильда — дай код для T123, если нет — один готовый HTML-файл для открытия на компьютере. Сначала уточни мой вариант запуска. Не давай посетителям изменять или удалять чужие записи. Продумай повторные нажатия и случай, когда ещё никто не ответил. Демонстрационные данные явно пометь и не смешивай с реальными.

Я не программист. Веди по одному шагу: где открыть, что скопировать, куда вставить и как проверить. Жди моего «готово». Сначала покажи план.

Результат: есть план сборки и понятная логика подсчёта.

Получи SQL от ИИ, вставь его в SQL Editor и выполни через Run. Открой Table Editor и проверь, что появилась нужная таблица. Вместе с таблицей должны быть настроены разрешения доступа.

Результат: таблица создана; понятно, где хранится выбранный ответ.

Скопируй Project URL и публичный anon key из одного проекта. Вставь их в обозначенные строки кода. Адрес копируй целиком.

Публичный ключ можно использовать в браузере: доступ к данным ограничивают правила базы. service_role и secret key в код страницы не вставляем.

Результат: код подключается к твоей базе.

На платном тарифе Тильды вставь фрагмент в T123 и опубликуй страницу. Без Тильды попроси полный HTML-файл, сохрани его как quiz.html (не .txt) и открой двойным кликом в браузере. Интернет должен быть включён.

Результат: на странице есть вопрос и варианты ответа.

Выбери ответ и проверь новую запись в таблице. Повтори тест в другом браузере. Сопоставь проценты с записями; проверь повторное нажатие и обновление страницы.

Результат: ответ сохраняется, а статистика соответствует данным.

Хочу сделать учебное задание: участник пишет ответ покупателю, нажимает кнопку и получает от ИИ разбор — что получилось и что улучшить. Потом может исправить ответ и попробовать ещё раз.

Кейс: покупатель получил разбитую чашку и пишет: «Заказала чашку в подарок. Она приехала разбитой! Завтра день рождения. Что мне делать?» Участник отвечает от лица сотрудника магазина.

Правила учебного магазина: можно предложить замену или возврат денег; нужно попросить номер заказа и фото повреждения; нельзя обещать доставку завтра без проверки. В ответе нужны сочувствие, решение и понятный следующий шаг. Если ответ хороший, так и скажи.

Используем Supabase и OpenRouter. Объясни простыми словами, для чего нужен каждый сервис. Помоги выбрать доступную бесплатную модель и проверить, что она отвечает.

Я не программист и делаю это впервые. Напиши весь код. Веди по одному шагу: какой сайт открыть, куда нажать, что скопировать и куда вставить. Каждый новый термин сначала объясняй. После каждого шага говори, как проверить результат, и жди моего «готово». Если появилась ошибка, сначала разбираем её.

В начале спроси, какие аккаунты у меня есть и где я буду открывать результат. Если есть платная Тильда — подготовь код для блока T123. Если нет — один готовый HTML-файл, который можно сохранить на компьютере и открыть в браузере. Настрой подключение с учётом выбранного способа запуска. GitHub Pages и публикацию на хостинге пока не рассматриваем.

Секретные ключи я не отправляю в чат и не размещаю в коде страницы. Покажи, где сохранить их в Supabase. Если сервис временно не отвечает, покажи понятную техническую ошибку без оценки участника.

Сначала покажи короткий план. Затем начнём.

Результат: ИИ предлагает план и ведёт по одному действию.

Создай ключ для учебного проекта и скопируй его. Он нужен серверной функции для запроса к модели. Не отправляй его в чат и не вставляй в T123.

Результат: ключ подготовлен для сохранения на сервере.

Добавь секрет: Name — OPENROUTER_API_KEY, Value — ключ OpenRouter. Нажми Save.

Результат: в списке есть секрет OPENROUTER_API_KEY.

Функция — это небольшой код на сервере. Она принимает ответ участника и обращается к ИИ, не раскрывая секретный ключ в браузере. В нашей сборке она называется quiz-check. Если ИИ предложил другое имя, используй его последовательно и копируй адрес именно своей функции.

Создай функцию с выбранным именем. Вставь полный код от ИИ и нажми Deploy. Код читает секрет, отправляет текст в OpenRouter и возвращает разбор.

В нашем рабочем учебном примере Verify JWT выключен, а функция обрабатывает OPTIONS и добавляет CORS-заголовки к ответам. Это публичный вызов без проверки пользователя. Для постоянного использования нужно отдельно ограничить доступ и число запросов.

Ключ сохранён. Что делаем дальше, чтобы мой ответ отправлялся ИИ и возвращался разбор? Объясни простыми словами, дай полный код и покажи, куда его вставить. Учти мой способ запуска: Тильда или HTML-файл на компьютере.

Результат: функция опубликована.

Отправь POST с JSON:

{"answer":"Очень жаль! Пришлите номер заказа и фото чашки."}

Нужен содержательный разбор ответа. Если пришла ошибка модели, сначала исправь её на этом шаге. Успешный Deploy ещё не означает, что ИИ отвечает.

Результат: Supabase возвращает разбор тестового ответа.

Скопируй Function URL именно функции quiz-check целиком. Это адрес с окончанием /functions/v1/quiz-check, а не просто Project URL. Публичный anon-ключ возьми из того же проекта.

Попроси ИИ подготовить интерфейс под результат функции: good, score, praise, improve, example. На платной Тильде вставь фрагмент в T123 и опубликуй. Либо попроси ИИ выдать полный HTML-файл с этим подключением и открой его в браузере на компьютере.

Результат: страница отправляет ответ в нужную функцию.

Проверь грубый ответ без решения, вежливый неполный ответ и ответ со всеми условиями. Разбор должен различаться по содержанию, а кнопка — снова становиться доступной.

Мы отправляли целую чашку. Разбирайтесь с доставкой.

Очень жаль, что чашка приехала разбитой. Пришлите, пожалуйста, номер заказа и фото повреждения.

Простите, что чашка пришла разбитой. Можем предложить замену или возврат денег. Пришлите, пожалуйста, номер заказа и фото повреждения. Напишите, какой вариант вам удобнее. Если выберете замену, уточним дату доставки.

Результат: рекомендации приходят на страницу; можно исправить ответ и отправить снова.