Детальный транскрипт: "Можем ли мы создать ИИ-репетитора за час? Вызов живого кодирования!"
Дмитрий Жечков (https://t.me/llm_notes)https://www.youtube.com/watch?v=8QDL9cCIXqU
Введение и настройка
Кристиан: Хорошо, мы в эфире! Извините за небольшую задержку. К сожалению, мы настроили неправильную ссылку на YouTube на странице события, которую только что обновили и разослали всем. Подожду, пока остальные присоединятся. У меня здесь Алекс, и надеюсь, Гарри скоро присоединится.
Пока он настраивает камеру и микрофон, расскажу о том, что такое Lovable. Мы команда Lovable, и наша цель - дать возможность любому превратить свои идеи в работающее программное обеспечение. Сегодня, если вы не технический специалист, ваши варианты не очень хороши - можно нанять разработчиков, что очень дорого, или использовать no-code платформы, которые часто кажутся ограниченными и негибкими.
С Lovable вы получаете возможность создавать полноценные приложения, просто используя естественный язык - так же просто, как вести разговор с ИИ.
Представление команды
Кристиан: Меня зовут Кристиан, я из продуктовой команды Lovable.
Алекс: Привет, я Алекс, работаю в Lovable в основном над ИИ-промптингом и основными продуктовыми функциями.
Гарри: Привет, ребята! Я фрилансер-консультант, в основном работаю с корпоративными компаниями, помогая их операционным командам работать быстрее на 100% с Lovable.
Обновление по инциденту с GitHub
Алекс: Расскажу об инциденте с GitHub. В пятницу наш доступ к GitHub был заблокирован, и нам потребовалось несколько часов, чтобы понять, что происходит, и внедрить экстренное исправление.
Проблема заключалась в том, что мы создавали слишком много репозиториев в GitHub - не в целом, а только репозитории, созданные в приложении до того, как пользователи переносили их в свой собственный GitHub. У нас были сотни тысяч проектов, и мы создавали проекты каждую секунду.
Это несовместимо с тем, как GitHub ожидает использования организации. Мы создавали слишком большую нагрузку на их сторону, и одна из команд решила заблокировать доступ к нашей организации.
Урок, который мы извлекли - нам нужны контакты во всех провайдерах и партнерах. Мы отправили запрос в поддержку, как любой обычный пользователь, и ждали. Тем временем мы быстро настроили альтернативное решение.
В итоге GitHub восстановил наш доступ, но теперь мы не используем GitHub для создания начальных проектов. Для пользователей это не имеет значения - вы все еще можете переносить проекты в свой собственный GitHub без проблем.
Проблемы масштабирования
Алекс: Мы очень быстро растем и столкнулись с множеством проблем масштабирования в последние недели. Хочу извиниться за это. Мы не думаем в стиле "двигайся быстро и ломай вещи" - мы двигаемся быстро, но не хотим ломать вещи.
Если вы используете продукт вечером в Европе или днем в США, продукт становится медленнее из-за высокой нагрузки. Мы достигли максимума во многих аспектах, которые просто не можем больше масштабировать.
Я хочу быть оптимистичным и сказать, что начиная со следующей недели ситуация значительно улучшится. У нас есть очень крутые вещи, которые появятся в ближайшие недели.
Концепция серии
Кристиан: Это специальное издание наших рабочих часов - серия из пяти сессий. Обычно мы строим небольшие приложения за час, что ограничивает функциональность. Мы также понимаем, что есть много важных аспектов запуска продукта: монетизация, привлечение первых пользователей, построение аудитории, маркетинг.
Гарри: Мы собираемся создать продукт и пройти весь путь до запуска. Мы покажем не только, как строить, но и все шаги: добавление пользователей, регистрацию, Stripe, API, и в итоге запустим на Product Hunt.
Идея пришла из того факта, что мы с Кристианом говорим по-испански - я здесь в Аргентине, он родом из Барселоны, но мой испанский ужасен. Мы подумали о простом случае использования ИИ, вдохновившись Duolingo, которое геймифицирует изучение языков.
Начало разработки
Кристиан: Начну с трюка, который научил меня Гарри - просто скажу ИИ создать пустое React-приложение. Делаю это потому, что хочу подключить Supabase с самого начала, чтобы заложить основы перед добавлением продвинутого фронтенд-функционала.
Гарри: Это о логических шагах движения вперед. Многие люди прыгают к концу и строят блестящую функцию, но всегда хорошо разбивать то, что делаешь, на более мелкие шаги.
Подключение Supabase
Кристиан: Supabase - это backend-as-a-service, который позволяет Lovable делать более продвинутые вещи: хранить данные, подключаться к сторонним API безопасным способом и управлять аутентификацией. Это создает мощный дуэт между Lovable и Supabase.
[Подключает проект Supabase и настраивает аутентификацию]
Алекс: Обычно нужно добавить email-провайдера, чтобы люди могли регистрироваться в приложении. В данном случае он просто отключил это, так что можно войти с любым email и паролем.
Добавление базовой структуры
Кристиан: Добавлю глобальную боковую панель для навигации с опциями доступа к дашборду (страница по умолчанию) и чату (пока пустой), плюс кнопку выхода внизу боковой панели.
[ИИ создает структуру с аутентификацией и навигацией]
Создание чат-интерфейса
Кристиан: Заменю страницу чата на чат-интерфейс, где пользователь может писать текст на испанском и получать ответы на испанском. Ответы должны быть короткими, но образовательными и увлекательными. Также добавлю панель настроек чата справа и состояния загрузки для соответствующих компонентов.
Алекс: Здесь ИИ динамически запрашивает секреты при подключении к сторонним сервисам вроде OpenAI. Мы не хотим, чтобы вы вставляли эти данные в чат. Когда вы делитесь секретами с нами, мы отправляем их в Supabase и сохраняем как секреты - это безопасный способ обработки секретов.
[Тестирует чат на испанском - работает]
Улучшение дизайна
Гарри: Один из моих любимых промптов - "сделай дизайн более элегантным и возвышенным".
Кристиан: [Применяет улучшения дизайна]
Добавление голосового ввода
Кристиан: Добавлю возможность для пользователей использовать микрофон для записи голоса, который должен преобразовываться в текст для предзаполнения ввода чата. Покажу индикаторы загрузки для обработки во вводе.
[Тестирует голосовой ввод - работает]
Преобразование текста в речь
Кристиан: Позволю пользователям слушать сообщения ИИ в аудиоформате с возможностью воспроизведения, паузы и перезапуска сообщений.
[Добавляет функцию text-to-speech]
Режим только чата
Алекс: Режим чата доступен через новую секцию Labs в настройках продукта. Мы добавляем функции туда, не слишком много думая, и просто выпускаем их, чтобы посмотреть, нравятся ли они вам.
Это режим, где вы можете лучше планировать свои следующие функции. Некоторые из вас не любят, когда ИИ сразу начинает писать код, когда вы просто хотите поговорить.
Добавление перевода
Кристиан: Добавлю функцию перевода, которая будет брать сообщения ИИ и переводить их на английский, если вы хотите увидеть их на своем языке.
[Тестирует функцию перевода - работает]
Персистентность данных
Кристиан: Добавлю персистентность сообщений и аудиозаписей. Хочу поддержать несколько чат-потоков, и потоки должны отображаться во вкладке настроек.
[Добавляет базу данных для хранения сообщений и потоков]
Генерация предложений
Кристиан: Добавлю кнопку со звездочкой (как во всех ИИ-приложениях), которая будет генерировать предлагаемое сообщение на испанском, связанное с текущим разговором.
[Тестирует функцию - работает]
Настройки скорости воспроизведения
Кристиан: Добавлю настройку для пользователей, чтобы они могли настраивать скорость голоса ИИ-ответов при преобразовании в аудио.
[Добавляет настройку скорости в профиль пользователя]
Система кредитов
Кристиан: Добавлю систему кредитов в профиль пользователя. Кредит будет тратиться на: ИИ-сообщения, преобразование аудио в текст, преобразование текста в аудио и переводы. При достижении лимита показывать модальное окно.
Гарри: Кредиты - хорошая идея. Мы можем дать ссылку аудитории, чтобы они могли попробовать, но ограничим их, чтобы не получить спам по использованию API.
[Добавляет систему кредитов и отображение]
Обсуждение лимитов и кредитов
Алекс: Каждое сообщение, которое вы отправляете для редактирования кода, стоит один кредит. Вы не платите за исправление ошибок, потому что мы хотим быть заинтересованными в том, чтобы эти вещи работали. Режим чата также пока не использует кредиты, но мы не хотим, чтобы вы использовали его как бесплатную замену ChatGPT.
Советы по отладке
Гарри: Если вы получаете ошибки или проблемы, даже если нет ошибки сборки, вам нужно быть очень четкими с поведением, которое вы хотите видеть от ИИ. Выражайте это именно так: "Когда я нажимаю эту кнопку, я хочу, чтобы происходило это, но на самом деле происходит то".
Алекс: Если я могу дважды нажать "попросить ИИ исправить" и прийти к рабочему состоянию, я чувствую себя хорошо. Если начинаю нажимать больше двух раз, это красный флаг - нужно найти рабочую версию, вернуться назад и начать снова.
Планы на будущие сессии
Гарри: Идеи для следующих сессий:
- Генерация изображений
- Админ-портал для управления данными и пользователями
- Улучшение дизайна
- Геймификация (полоски, как в Duolingo)
- Увеличение удержания пользователей
Алекс: Хочу довести это до конца и показать, что это реальная вещь - отправка email, все скучные вещи, необходимые для продакшена.
Заключение
Кристиан: За менее чем час мы создали приложение, которое:
- Использует ИИ для разговора с испанским репетитором
- Поддерживает голосовой ввод и преобразование в текст
- Воспроизводит ИИ-ответы в аудиоформате для изучения произношения
- Переводит ответы при необходимости
- Имеет базовую поддержку кредитов для ограничения бесплатного уровня
Это только отправная точка. В следующих сессиях мы добавим более крутой функционал, а в последних двух сессиях сосредоточимся на таких темах, как привлечение первых пользователей, построение аудитории и, в конечном итоге, запуск этого как реального продукта со всеми финальными штрихами.
Технические детали и рекомендации
Алекс: Важно отметить - мы поддерживаем только React. Мы выбрали один технологический стек, и думаем, что это к лучшему на данный момент. Было бы здорово поддерживать много стеков, но тогда продукт был бы менее надежным, нам было бы сложнее сосредоточиться на том, чтобы одна вещь работала хорошо.
Кристиан: Что касается хороших принципов дизайна - если у вас есть определенные принципы дизайна, которых вы хотите, чтобы ИИ придерживался, вы можете добавить их в управление знаниями, и тогда это будет присутствовать как часть контекста для всех других правок.
Работа с ошибками и отладкой
Алекс: Очень важно думать как можно больше с вашей стороны перед промптингом, перед написанием сообщения. Если вы можете предвидеть, планировать, быть очень детальными - это намного лучше, чем если вы просите что-то расплывчатое.
Тогда ИИ определенно может выбрать либо ленивый вариант, либо сделать что-то совершенно неожиданное. После этого вы можете попытаться исправить это, отправив больше сообщений, но иногда вы застреваете в кроличьей норе.
Гарри: Не бойтесь просто начать строить. Не чувствуйте себя застрявшими и что нет пути вперед. Вероятно, есть способ обойти это, просто вопрос правильного промптинга, а не необходимости залезать в код и исправлять баги.
Функция отката версий
Кристиан: В чате вы можете откатиться к предыдущим версиям вашего продукта. Я определенно предлагаю это, когда дела пошли не так. Гораздо лучше просто вернуться в прошлое, извлечь урок из вашего промпта и переписать его по-другому.
Гораздо быстрее делать вещи с чистого листа, чем пытаться исправить что-то полусломанное.
Режим только чата
Алекс: Режим чата доступен через секцию Labs в настройках. Вам нужно переключить эту функцию, чтобы белая часть переключателя переместилась вправо, и тогда у вас будет эта маленькая штука внизу слева, где вы можете переключаться между режимом по умолчанию и режимом только чата.
Гарри: Режим чата супер полезен для больших проектов в те моменты, когда много ошибок, и вы не знаете, что происходит. Вы можете переключиться в режим чата и просто сказать: "Можете ли вы взглянуть на эту проблему, попытайтесь быть максимально детальными в описании", а затем сказать: "Что бы вы предложили в качестве плана?"
Секреты и безопасность
Алекс: Когда вы делитесь секретами с нами, мы отправляем их в Supabase и сохраняем как секреты. Это безопасный способ обработки секретов. Эти секреты будут доступны Edge-функциям, которые являются backend-функциями, работающими на стороне Supabase.
Гибридная разработка
Алекс: Из-за нашего подключения к GitHub вы можете редактировать код из своего собственного редактора. Некоторые пользователи работают гибридно - с Lovable и затем берут код на свою машину. Если вы пушите в GitHub, мы подтянем код и обновим превью.
Статистика разработки
Гарри: Стоит отметить, что вы сделали все это примерно за 18 промптов, что безумно - зайти так далеко.
Планы монетизации
Кристиан: Мы думаем о кредитах как о хорошей идее. Мы можем дать ссылку аудитории, они смогут попробовать, но мы ограничим их, чтобы не получить спам по использованию API.
Гарри: В будущем мы можем взимать плату за пополнение кредитов, и тогда наше приложение будет основано на использовании - чем больше люди используют его, тем больше денег мы можем взимать. Но мы также можем установить бесплатный уровень.
Идеи для будущих функций
Из чата пришли предложения:
- Генерация изображений
- Админ-портал для управления данными и пользователями
- Улучшение дизайна с вдохновением от Duolingo
- Геймификация: полоски достижений, вовлечение пользователей
- Увеличение удержания пользователей
- Отправка email-уведомлений
- Пользовательские домены для развертывания
Технические ограничения и решения
Алекс: Иногда могут быть ситуации, когда вы начинаете использовать обновленное приложение, но Edge-функция еще не обновилась, что может привести к ошибкам. Иногда хорошо сделать шаг назад и подождать, пока индикатор загрузки не исчезнет.
Обучение через использование
Гарри: Гарри - отличный пример человека, который стал по сути разработчиком и слился с ИИ. Будет много пользователей Lovable или подобных продуктов, которые мало что знают, когда начинают, и медленно знакомятся с кодом. Сначала они боятся, затем медленно углубляются и по сути становятся просто инженерами-программистами 2024-2025 годов.
Заключительные мысли
Алекс: Я просто хочу довести это до конца и показать, что это реальная вещь, которая может отправлять email - все скучные вещи, необходимые для продакшена. Я просто хочу поощрить всех, у кого есть идея, просто начать ее строить, потому что вы можете, и это того стоит.
Кристиан: Мы немного десенсибилизировались и потеряли удивление или вау-эффект от этих вещей, потому что работаем с ними каждый день, но это действительно умопомрачительно.
Ресурсы и следующие шаги
Кристиан: Вы можете зайти в Discord - там у нас большая часть сообщества. Мы также запустили новую страницу поддержки, которую вы можете использовать для получения помощи и запросов функций.
Мы будем проводить эти сессии, надеюсь, еженедельно по четвергам и анонсировать их по понедельникам. Не стесняйтесь обращаться с идеями о том, куда мы должны направить это в следующие дни.
Финальное резюме проекта
За один час команда создала полнофункциональное приложение для изучения испанского языка с ИИ, включающее:
- Аутентификацию пользователей через Supabase
- Чат-интерфейс с ИИ-репетитором на испанском
- Голосовой ввод с преобразованием речи в текст
- Аудиовоспроизведение ответов ИИ для изучения произношения
- Функцию перевода на английский язык
- Систему кредитов для ограничения использования
- Персистентность данных с сохранением истории чатов
- Настройки пользователя включая скорость воспроизведения
- Генерацию предложений для продолжения разговора
Все это было достигнуто примерно за 18 промптов, демонстрируя мощь современных инструментов no-code разработки с ИИ.
Благодарности: Особая благодарность Стефану за управление чатом и продакшн мероприятия.
Следующие сессии: Планируется еще четыре сессии для добавления дополнительных функций, монетизации, маркетинга и финального запуска продукта на Product Hunt.