Transcription
В этом видео я покажу вам, как начать создавать приложение, в котором вы можете использовать свои компоненты пользовательского интерфейса в сочетании с вашим помощником ИИ, чтобы они работали вместе бесшовно и оставались идеально синхронизированными. Я покажу вам, как начать работу с co-pilot kit, и, в частности, я покажу вам их новую интеграцию Crew AI.
Что я буду делать в этом видео, так это начнём с этого редактора рецептов, а затем, в конечном итоге, адаптируем его для другого случая использования. Я проведу вас через процесс настройки, а также различные области, в которых вы можете перемещаться и обновлять, чтобы сделать это приложение своим собственным. Таким образом, к концу видео вы поймёте, как данные общаются друг с другом, и, в конечном итоге, все различные составные части, где мы получаем информацию, куда мы в конечном итоге отправляем информацию в большую языковую модель, и как всё остаётся актуальным и синхронизированным в пользовательском интерфейсе.
Есть несколько различных областей, где пользователь может пойти и подкрутить вещи. Они могут изменить такие вещи, как раскрывающиеся списки, различные флажки, а также ингредиенты и инструкции. Они могут нажать кнопку «Улучшить ИИ». В качестве альтернативы, они могут напрямую ввести сообщение в этой правой панели.
Эффективно, как работает наше приложение, когда пользователь отправляет запрос, хорошая вещь с co-pilot kit заключается в том, что он позволяет нам иметь общее состояние между тем, что происходит на бэкэнде нашего приложения, а также тем, что находится на фронтэнде.
Как наше приложение разбито на части: у нас будет уровень приложения Next.js, и внутри него мы напишем простой API, который будет подключаться к нашей бэкэнд-архитектуре Python. Именно здесь у нас будет конечная точка FastAPI, и именно так мы будем общаться этими сообщениями туда и обратно от наших агентов Crew AI, а также то, что мы в конечном итоге отправляем обратно в качестве ответа на фронтэнд.
Что касается запросов, мы будем отправлять детали формы, а также то, что у нас есть в поле естественного языка. Аналогично, на бэкэнде мы будем передавать потоки ответов текста от большой языковой модели, если это необходимо. В качестве альтернативы, мы будем обновлять информацию в состоянии пользовательского интерфейса.
Без дальнейших церемоний, давайте начнём. Первое, что мы сделаем, чтобы начать, это скачаем репозиторий. Как только вы клонировали репозиторий, мы будем идти в папку examples. То, что я только что показал вам в начале видео, находится в демо-просмотрщике здесь. Что мне нравится в этом демо-просмотрщике, так это то, что здесь есть множество интегрированных различных функций co-pilot kit, все созданные здесь.
Одна из моих любимых функций, которые они включили в этот пример, - это предсказательные обновления состояния. Эти предсказательные обновления состояния очень удобны, потому что это почти похоже на что-то подобное курсору, и что я могу сделать здесь, так это сказать что-то вроде: «Я хочу заголовок для этого поста в блоге». И что это сделает, так это проанализирует то, что у нас есть в нашей текстовой панели здесь, и даст нам предложения здесь. Как мы видим, у нас есть это предложение для заголовка: «Антропный экономический индекс: понимание влияния ИИ на рабочие места и экономику». И затем у вас даже есть возможность подтвердить или отклонить. Например, если я хочу отклонить этот заголовок, я могу нажать «Отклонить». В качестве альтернативы, вы можете принять его и работать с документами таким образом. Это очень удобный способ взаимодействия с потенциально текстовым документом, или если вы хотите создать что-то вроде курсора для письма, вы можете сделать всё это в этом же демо и в этом же репозитории, который я собираюсь вам показать.
Первое, что я сделаю, это открою два разных терминала бок о бок. В левой части здесь у нас будет наша архитектура агента. Если я просто зайду в наш демо-просмотрщик и зайду в нашего агента, мы настроим быструю переменную среды. И аналогично здесь, мы просто зайдём в папку examples, а затем в этом случае мы перейдём к демо-просмотрщику, и здесь это будет место, куда мы можем перейти и установить все зависимости. Оттуда я просто установлю всё с помощью pnpm install.
Теперь в папке нашего агента, если мы перейдём в демо, мы увидим все бэкэнд-архитектуры агентов для всех различных примеров, которые мы видели в пользовательском интерфейсе. Пример с общим состоянием - это пример рецепта, который я вам покажу, как это работает. Я буду сосредоточен, в частности, на этом примере, и я покажу вам, как вы можете взять этот пример, подстроить его и сделать его своим собственным для любого случая использования, который может у вас быть в виду.
Одна вещь, которую мы будем использовать в этом примере, - это API OpenAI, и это будет то, как мы будем общаться и взаимодействовать с моделью ИИ. Поэтому просто получите свой API-ключ от OpenAI. Мы создадим файл .env, и сюда мы просто добавим наш API-ключ OpenAI. Вот так. А затем вы можете сохранить его. И после того, как вы сохранили свой .env в каталоге агента, вам просто нужно убедиться, что мы скопируем эту же переменную среды, а затем вставим её в каталог демо-просмотрщика. И после того, как у нас это будет, я могу запустить poetry run server, чтобы запустить архитектуру нашего агента. Аналогично на фронтэнде, я просто запущу наше приложение Next.js.
Теперь мы можем открыть наше приложение, и теперь у нас должно быть то, что мы видели в начале видео. У нас есть все эти разные примеры, и что мне нравится в этом примере, так это то, что здесь, в основном, все эти различные действительно отличные варианты использования того, как вы можете использовать co-pilot kit, всё в одном репозитории.
Так что теперь, если я просто протестирую это, я скажу: «Я хочу приготовить стейк за 15 минут с некоторыми полезными овощами». Я отправлю это, и, как мы видели, теперь у нас это работает здесь. Мы видим, что он установил высокий уровень белка, у нас есть все ингредиенты, а также инструкции.
Теперь, когда мы настроили его, я просто хочу рассказать, как это работает и как вы можете начать делать это своим собственным. Сначала, что я сделаю, так это в нашем каталоге демо я перейду в каталог source, и я перейду к нашей конфигурации. В нашей конфигурации это будет список всех этих различных возможностей, которые у нас есть на боковой панели, когда она загружается, она будет перебирать их и отображать их все. Что я хочу сделать, так это установить состояние по умолчанию нашего приложения для общего состояния здесь. Я перейду на страницу, где у нас есть все эти элементы, перечисленные в выбранном ID демо, я просто установлю начальное состояние нашего приложения на общее состояние.
Теперь, если я вернусь к нашему приложению и обновлю страницу, у меня всегда должно быть это общее состояние между агентом и пользовательским интерфейсом. Далее, что я собираюсь сделать, так это фактически просто удалить всю боковую панель целиком. В этом примере я просто сосредоточусь на этом основном примере, так как то, что я собираюсь создавать, будет связано с упражнениями. Первое, что я собираюсь сделать, это фактически просто удалить этот стиль для фонового изображения, и что я собираюсь сделать, так это просто сказать, что я хочу фон, который будет чёрно-фиолетово-синим. Я сохраню это. Теперь у нас есть наше приложение, у нас есть чёрно-фиолетово-синий интерфейс здесь.
Теперь, когда у нас это есть, что я хочу сделать, так это показать бок о бок слой пользовательского интерфейса, а также архитектуру агента и то, как вы можете начать делать что-то подобное своему собственному. Что я собираюсь сделать, так это поместить нашу архитектуру агента, которая является agent.py, в левой части здесь, а затем у нас будет страница. Если я открою их бок о бок, мы увидим много похожих частей, которые установлены между состоянием фронтэнда и бэкэнда нашего приложения. Первый будет уровень мастерства, и вместо рецепта давайте просто назовём это тренировкой. Мы можем оставить его начинающим, средним, а также продвинутым, так как они все ещё применимы.
Теперь, что касается этих специальных предпочтений, вместо этого я скажу здесь, что я хочу, чтобы это были разные типы упражнений. Один ключевой момент здесь заключается в том, что когда вы вносите изменения на бэкэнде, вам просто нужно убедиться, что вы отражаете это изменение на фронтэнде. Поэтому просто убедитесь, что когда вы обновляете свою бэкэнд-архитектуру, вы прослеживаете эти изменения на фронтэнд и наоборот. Причина, по которой я люблю делать это бок о бок, заключается в том, что это позволяет легко убедиться, что у вас есть преемственность между вашим фронтэндом и бэкэндом, и есть несколько приятных трюков, если вы используете что-то вроде Windsurf или Cursor. Что я могу сделать здесь, так это обновить их и вставить то, что я только что сгенерировал в левой части здесь. Я отправлю это, и вот, мы обновили его на фронтэнде.
Теперь, если я просто сделаю паузу здесь и обновлю и то, и другое, и покажу вам приложение до сих пор, теперь у нас есть специальные предпочтения здесь, поэтому нам всё ещё нужно обновить такие вещи, как время приготовления, но теперь вместо того, чтобы это были рецепты, у нас теперь есть что-то в контексте тренировки. Мы можем просто пройти и обновить некоторые метки здесь. Я могу сказать «Тип тренировки».
Почти последняя вещь, которую нам нужно заменить здесь, будет ингредиенты. Вы также можете сделать ещё один шаг и заменить такие вещи, как имена переменных и тому подобное здесь. Теперь, когда у нас есть визуальное представление того, что мы хотим обновить в нашем приложении, оттуда мы можем заменить несколько разных вещей. Если вы хотите заменить переменные, вы можете выделить их, и мы можем сказать что-то вроде «Время тренировки» и заменить все эти переменные.
Далее, что мы пройдём, это время приготовления. Одна вещь, которую вы можете сделать, это если вы используете команду D в VS Code или Cursor или Windsurf, вы сможете иметь несколько курсоров, где вы можете легко заменить вещи. Если я просто скажу «Время тренировки», я могу сохранить это.
Следующая часть этого компонента здесь, всё здесь будет сопоставлено с этими различными параметрами, которые у нас есть в этом вызове функции или вызове инструмента, как это иначе известно. Здесь у нас есть эти различные вещи, как у нас в пользовательском интерфейсе, у нас есть уровень мастерства, специальные предпочтения, время приготовления, ингредиенты и инструкции, и здесь вы видите, что он сопоставлен со всеми этими различными полями здесь.
Теперь просто быстро расскажу о том, что такое вызов функции или вызов инструмента. Это, по сути, способ сказать вашей большой языковой модели, что вы используете, что делает ваша функция, параметры, которые она принимает, типы этих различных параметров, а также то, что возвращает функция и типы, которые возвращает функция. Хотя это может показаться много, они относительно просты, как только вы поймёте.
Просто чтобы пройтись по этому, вместо того, чтобы иметь инструкции, ориентированные на генерацию рецептов, мы можем иметь это вместо этого ориентированное на план тренировки или любое другое взаимодействие. Это может быть любое другое взаимодействие с пользовательским интерфейсом, с которым вы хотите взаимодействовать с вашим co-pilot. Это может быть в собственном приложении, которое у вас есть, может быть, у вас есть список, и вы хотите, используя естественный язык, выбрать и отправить электронные письма различным лицам или что-то ещё. Вы можете сделать довольно много с помощью этого типа механизма.
Здесь у нас будет наша схема рецепта, и это будет объект, и у нас будет несколько других свойств в этом объекте. Это будет уровень мастерства рецепта, но в этом случае мы можем просто заменить его на тренировку. Для специальных предпочтений мы снова можем просто заменить все эти экземпляры, в основном, там, где написано «рецепт», на «тренировку».
Одна вещь, которую я не буду демонстрировать, но что вы определённо можете сделать, это заменить эти различные значения, где есть ссылка на этот ключ или переменную во всём приложении. Если вы пытаетесь упорядочить это для вашего конкретного случая использования, просто убедитесь, что вы меняете имена переменных, а также ключи, относящиеся в этом случае к тому, что может быть чем-то специфическим для того, что мы сопоставляем.
Теперь, когда у нас это есть, ключевая часть нашего приложения и то место, где мы фактически интегрируемся с большой языковой моделью, будет в нашем потоке Crew AI. Если вы раньше не использовали их, это концепция, аналогичная архитектуре LangChain, где у вас будут все эти различные взаимосвязанные узлы, которые иногда называются когнитивной архитектурой. Способ, которым вы можете думать о потоках, заключается в том, что у вас будет точка входа для вашего потока, где начинается этот граф, а затем, начиная с этого места, может быть ряд различных маршрутов, которые языковая модель будет проходить в зависимости от того, какие условия выполняются или какая конкретная задача.
Для нашего потока это будет относительно простой пример. Здесь мы будем отправлять запрос большой языковой модели, и в этом случае мы скажем, подобно другим примерам: «Вы полезный помощник. Это текущее состояние плана тренировки». Вы можете просто заменить все эти различные значения там, вместо рецептов, аналогично выше, мы скажем: «Вы полезный помощник для создания тренировок. Это текущее состояние плана тренировки, и вы можете изменить план тренировки, вызвав функцию generate_recipe. Если вы создали или изменили план тренировки, ответьте одним предложением о том, что вы сделали».
Даже если они возвращаются в структуре, подобной потоку текста и токенов, которые мы получаем от чего-то вроде ChatGPT, мы можем иметь эту структуру, передаваемую в наше приложение, сопоставленную с пользовательским интерфейсом. Просто чтобы продемонстрировать этот эффект потоковой передачи, если я скажу: «Я хочу высокоинтенсивную силовую тренировку, которая длится 30 минут», если вы заметили, это произошло очень быстро, но вы увидите, что он пройдёт через структуру этой формы и эффективно отобразит эту схему всех этих различных значений. В этом случае у нас был уровень мастерства, который был выведен, у нас есть 30 минут, как я и инструктировал, у нас есть сила, а также отмечена высокая интенсивность, а затем у нас есть оборудование, гантели, коврик для йоги, а также таймер, и наконец, у нас есть инструкции здесь.
Наконец, мы просто запустим эту модель, а затем установим ответ на поток с помощью co-pilot kit. И это хорошая вещь с co-pilot kit, так как у них есть эти действительно полезные методы и функции, а также хуки на фронтэнде. Вы можете передавать в поток различное состояние, и снова будет эта преемственность того, что делает ваш агент, а также ваш фронтэнд.
Отличная вещь в том, что они строят, это то, что они действительно пытаются сузить разрыв с точки зрения сложности, необходимой для создания этих полнофункциональных приложений с агентами ИИ, потому что ранее вы могли видеть много примеров, которые, возможно, находятся в терминале или вещи, которые могли быть немного заплаткой на фронтэнде с точки зрения того, как они были реализованы, но с этим есть стандартизированный формат, где, если вы захотите переключаться между Crew AI или LangChain или чем-либо ещё, вы сможете иметь эти рельсы между ними или можете упростить этот процесс.
Наконец, здесь мы будем устанавливать нашу модель на OpenAI gpt-4-0. Сейчас используется лёгкая большая языковая модель, поэтому, если вы хотите заменить её на другую модель, вы определённо можете, если хотите. Просто имейте в виду замену и настройку всех соответствующих API-ключей. Наконец, в модели мы будем вставлять системный запрос, как мы указали чуть выше. Мы будем отправлять всё это состояние всех этих различных сообщений, а затем, наконец, у нас будут инструменты, которые мы только что определили. В этом случае это всего лишь один инструмент, который выступает в качестве структурированной схемы того, как наше приложение будет отображать эти различные части в пользовательском интерфейсе. И оттуда мы, в основном, будем добавлять сообщение, которое мы получаем обратно от модели, в массив состояний, так что у нас есть контекст всех этих предыдущих сообщений.
Затем у нас просто есть то, как мы обрабатываем инструменты. Вызовы инструментов включают немного анализа с точки зрения получения этих результатов обратно от большой языковой модели, потому что то, что мы получим обратно от большой языковой модели, это полезная нагрузка JSON, но как только у нас будут эти результаты вызова инструментов, а также эти параметры, нам нужно пройти и пройтись по различным параметрам. Поэтому в зависимости от того, что делает ваш инструмент, а также от того, сколько у вас инструментов, вам просто нужно немного разобрать, организовать и иногда, в случае, если вы используете что-то вроде внешнего поставщика, фактически вызывать эти методы, чтобы получить некоторую информацию, которую вы можете дополнительно передать в контексте вашего приложения или снова в большой языковой модели.
Что мы делаем, когда получаем результат вызова инструмента, так это используем результаты этого вызова инструмента, чтобы добавить к нашим сообщениям, и в этом случае это будет рецепт, который был сгенерирован, или снова тренировка, которая была сгенерирована. В противном случае, это почти всё. Очевидно, вы можете строить на основе этого, но это всего лишь вводный пример того, как вы можете начать интегрировать фронтэнд в бэкэнд на основе архитектуры агента. И, как я уже упоминал, в репозитории демо есть множество различных примеров. Если у вас есть варианты использования для письма или варианты использования человека в цикле, я настоятельно рекомендую попробовать их. Это, безусловно, прочная основа для создания подобных приложений, но в остальном, это почти всё для этого видео. Если вам это видео показалось полезным, пожалуйста, комментируйте, делитесь и подписывайтесь. В противном случае, до следующего раза.