Transcription
Хорошо, банда, в этом уроке я хочу немного поговорить о контексте, что это такое, как он помогает модели ИИ принимать решения и как управлять им в ваших сессиях. Итак, для начала, что такое контекст? Ну, проще говоря, контекст в отношении ИИ — это окружающая информация вокруг запроса, чтобы предоставить модели более широкий контекст или более широкое понимание происходящего. Подумайте об этом так. Если бы вас просто бросили в групповой разговор, где все называли бы случайные овощи один за другим, вы бы подумали, что это, вероятно, странные люди, и понятия не имели бы, что происходит. Однако, если бы перед тем, как вы вошли в группу, кто-то сказал вам, что они все будут играть в игру, где им придется по очереди называть зеленые овощи, тогда вы бы не только поняли это, но и смогли бы присоединиться. Это в некоторой степени то же самое, что происходит с моделями ИИ. Если мы просто введем запрос в Gemini CLI, который говорит что-то вроде «сделать текст абзаца больше», то он, вероятно, не будет знать, о каком абзаце мы говорим. Да, он может просмотреть кодовую базу и сделать хорошее предположение о том, что вы можете иметь в виду, рассуждая, но он не будет иметь большого представления, потому что мы не предоставили ему дополнительный контекст. Однако мы можем явно добавить контекст к запросу, включив файл, в котором мы хотим внести изменения. И таким образом мы значительно убираем догадки модели. Чтобы сделать это, чтобы вручную добавить файлы или папки в качестве контекста. Мы можем просто использовать символ @, за которым следует путь к файлу. Теперь вы можете просто начать писать имя файла без пути. И Gemini выполнит нечеткий поиск в вашей кодовой базе по именам файлов, которые совпадают. И вы можете выбрать тот, который вам нужен, например, этот компонент домашней страницы прямо здесь. И когда вы это сделаете, он поместит этот путь к файлу в ваш ввод чата. Итак, теперь, если мы отправим этот запрос, Gemini будет знать, что нужно смотреть только на компонент индекса, чтобы найти текст абзаца, и гораздо вероятнее, что он правильно внесет изменения. Я не буду вносить это изменение прямо сейчас, а вместо этого хочу внести другое изменение на странице создания. Итак, прямо сейчас на странице создания у нас есть этот импорт тегов внизу, где пользователи могут через запятую вводить кучу тегов для новой комбинации еды. Однако пользовательский опыт этого ужасен, и вместо этого я хотел бы показать небольшой "пилюлю" для каждого тега, который добавляет пользователь, который они затем также могут удалить, нажав на значок крестика на этой "пилюле". Итак, давайте реализуем эту функцию сейчас, добавив запрос вместе с парой различных способов добавления контекста. Теперь, прежде чем мы продолжим, я хочу упомянуть, что я уже создал и переключился на новую ветку под названием Gemini/taginput. И снова, я всегда делаю это, когда прошу любой тип кодирующего агента внести изменения или добавить новые функции. Итак, теперь я хочу вставить этот запрос прямо здесь, который гласит: «Можете ли вы обновить поле ввода тегов, чтобы отображать "пилюлю" тега под полем ввода, когда пользователь добавляет запятую. Это также должно очищать поле ввода, чтобы пользователь мог легко добавить еще один тег. Пользователи должны иметь возможность удалять тег, нажимая на значок крестика на самом теге. Не допускайте множественных тегов. Пользователям должно быть разрешено добавлять максимум пять тегов в общей сложности». Итак, прямо сейчас этот запрос в порядке, но если мы отправим его как есть, то Gemini придется искать в нашей кодовой базе форму с полем ввода для тегов. Теперь в этом проекте это может быть не так сложно, потому что есть всего пара страниц и всего одна форма. Но в более крупных проектах это может вызвать трудности. Поэтому мы можем явно добавить страницу с формой в качестве контекста, перейдя к началу этого запроса и используя символ @, затем найдя страницу создания и выбрав ее. И теперь Gemini будет знать, где искать поле ввода тегов в этом файле, и ему не нужно будет сканировать остальную часть кодовой базы для него. Теперь, помимо ручного добавления этого файла в качестве контекста, мы также можем неявно добавить его, просто открыв файл в VS Code. И когда мы это делаем, мы видим эту заметку об открытом файле, добавленную над полем ввода чата. Так что это CLI сообщает нам, что он использует содержимое этого открытого файла в качестве контекста в сессии. И это происходит только потому, что у нас есть расширение ID companion для Gemini CLI. Без него этого не произойдет. В любом случае, теперь мы можем удалить раздел, где мы вручную добавляем файлы в качестве контекста, потому что он теперь добавляется неявно. Еще лучше, мы можем выбрать раздел кода в открытом файле, и это позволит Gemini точно знать, какую часть файла мы ссылаемся. Итак, я мог бы выбрать последнее поле формы для тегов, чтобы предоставить эту информацию, если бы я хотел. Опять же, это только в том случае, если у вас установлено расширение Gemini CLI companion. Если вы пропустили этот шаг ранее, вы всегда можете добавить его вручную, перейдя к своим расширениям и просто выполнив поиск Gemini CLI companion. Хорошо, тогда. Вот как мы добавляем файлы в качестве контекста к этому запросу и сессии. Но прежде чем мы отправим этот запрос, я хочу показать вам еще кое-что, а именно, как добавить изображения в качестве контекста. Итак, модели Gemini в значительной степени полагаются на мультимодальность, что означает, что они могут понимать текст, изображения и другие медиа как часть одного и того же разговора. А новая модель Gemini 3 продвигает это еще дальше. Это означает, что мы можем добавлять изображения в качестве контекста к запросу и просить Gemini использовать это изображение в качестве дизайнерской ссылки. Это может быть макет страницы, каркас или, в данном случае, изображение дизайна "пилюли", которое я хочу, чтобы Gemini скопировал. Итак, я уже добавил файл изображения в корень этого проекта под названием pill.png. И я буду ссылаться на этот файл в чате, перейдя сюда и добавив: «Пожалуйста, стилизуйте "пилюлю" так, чтобы она выглядела как "пилюля" из следующего изображения». А затем я добавлю символ @, чтобы найти этот файл и добавить весь путь в чат. Теперь, прежде чем мы отправим это, я хочу сказать, что обработка изображений не всегда работает очень хорошо, и результаты могут быть не впечатляющими. И это более верно для Gemini 2.5. Если вы используете модель Gemini 3, я нашел, что она лучше справляется с такими вещами. Но в любом случае, давайте нажмем Enter, чтобы отправить это и посмотреть, что произойдет. Хорошо, так, это закончилось. И он говорит, что создал функцию. Однако я заметил ошибку на странице создания. Итак, давайте посмотрим. Если мы прокрутим вверх, мы увидим, что она прямо здесь. Значение ввода тега равно оставшемуся вводу. Итак, это просто ошибка типа, судя по всему. Итак, если мы наведем на это курсор, вы увидите, что тип string/undefined не присваивается типу string. Хорошо, так что он может быть неопределенным. Итак, я имею в виду, мы можем вручную исправить это, если хотим, но это курс Gemini CLI. Поэтому я снова перейду в панель Gemini. Я оставлю это выделенным для контекста. И я просто напишу: «Здесь есть ошибка типа» и посмотрю, сможет ли он ее исправить. Хорошо. И теперь он исправил это. Итак, давайте быстро посмотрим на код, а затем предварительно просмотр в браузере. Итак, во-первых, у нас есть новая функция под названием on tag input. И я думаю, что она будет работать. Давайте посмотрим вниз. Итак, у нас есть ввод события прямо здесь, который запускает эту функцию. Итак, всякий раз, когда пользователь вводит значение, запускается эта функция. А затем мы ищем наличие запятой. Так что, если они напечатали запятую, она будет там. Это будет работать. Затем мы используем метод split. И мы получаем тег с помощью этого метода slice. Хорошо. Хорошо. Итак, в основном, да, мы получаем тег, мы разделяем его с помощью запятой, мы получаем тег, и мы добавляем тег, который запускает эту функцию наверху, я думаю. Add tag blah blah blah. Хорошо, так что если достигнута максимальная длина, то мы не добавляем тег. Если мы все еще можем добавить тег, и у нас есть один, то мы добавляем его. Он также проверяет дубликат здесь. Так что он просто выходит, если тег уже существует. И у нас есть теги наверху. Хорошо. Так что все это выглядит довольно хорошо. У нас также есть функция remove tag. Помните, я сказал, что мы должны иметь возможность удалять их, нажимая на крестик. Так что это удаляет их. И это должно быть вызвано здесь. Да. Итак, мы выводим теги с помощью V4. И у нас есть X прямо здесь. Компонент X. Я думаю, что он должен быть импортирован наверху. Да. Итак, мы получаем компонент X, который является значком. И мы выводим его. Затем, когда пользователь нажимает на него, мы запускаем функцию remove tag. Хорошо, на первый взгляд все выглядит нормально. Давайте попробуем это в браузере. Хорошо, так что момент истины. Давайте перейдем к этому вводу тегов здесь. И я просто введу тег, например, "spicier". Нажмите запятую, и он должен добавить эту маленькую "пилюлю". Я думаю, технически это называется чипами, не так ли? А не "пилюлями". Но в любом случае, он также использовал наш дизайн, который мы предоставили, и он выглядит идентично ему, что довольно хорошо. Если мы нажмем на этот крестик, то он исчезнет. Отлично. Давайте попробуем добавить несколько. Итак, острый, сладкий, хм, приятный. Что еще это может быть? Хм, соленый. Теперь я собираюсь попробовать добавить дубликат. Так что, если я попробую добавить "sweet" снова, он не должен быть добавлен, верно? Потому что у нас уже есть "sweet" прямо здесь. Так что давайте попробуем добавить его. Да, это не работает. Мы не допускаем дубликатов. Давайте добавим еще один. Давайте скажем, что еще это может быть? Пикантный. Нажмите запятую. Теперь, если мы попробуем добавить еще один, то есть, если я просто введу еще один, то нам не разрешат этого сделать, потому что мы сказали, что максимальное количество тегов было пять. Так что давайте посмотрим, что произойдет, когда мы это сделаем. Хорошо, так что он говорит, что вы можете добавить максимум пять тегов. Я имею в виду, что, вероятно, это не тот способ, которым я бы это сделал. Я бы показал небольшую ошибку где-нибудь здесь, вместо всплывающего окна. Но в любом случае, мы этого не указали. Модель не должна была знать. Так что мы могли бы вернуться, внести еще один раунд изменений, если бы хотели, и реализовать эту функцию. Я не собираюсь этого делать. Я буду придерживаться этого, потому что я очень доволен тем, как все работает. Хорошо, тогда. Итак, теперь мы знаем, что такое контекст и как вручную добавлять файлы в качестве контекста к сессии. И дальше я хочу быстро поговорить об управлении контекстом в сессии, когда он становится слишком большим. Итак, когда вы общаетесь в CLI и просите Gemini сделать несколько вещей, все файлы, которые вы добавляете в сессию чата в качестве контекста, плюс вся история разговоров между вами и моделью остаются в так называемом окне контекста. И чем дольше длится ваша сессия, чем больше файлов вы добавляете в контекст, чем больше ответов вы получаете и так далее, тем больше заполняется это окно контекста. Теперь модели Gemini на самом деле имеют очень большое окно контекста в 1 миллион токенов, что означает, что вы можете общаться с моделью большую часть дня, прося ее работать над несколькими функциями в одной и той же сессии чата, и вы все равно, вероятно, не заполните окно контекста. Вы можете, но, вероятно, нет. Однако, если вы его заполните, то часть старого контекста начнет выпадать из окна, и модель может забыть о нем. И вот тогда модель может стать менее предсказуемой, я бы сказал, и иногда терять свою основу. Мало того, сессия может быть заполнена большим количеством шума и нерелевантной информации, такой как функции, которые, возможно, вы откатили или часто меняли, и это иногда может разбавить важные вещи и вызвать некоторую путаницу для модели. Поэтому обычно я не люблю, чтобы мои сессии были перегружены большим количеством контекста, и я обычно переключаюсь на новую сессию, когда хочу работать над другой функцией или чем-то еще. Но в редких случаях, когда мне нужно или хочется сохранить ту же сессию, и контекст заполняется, у нас есть команда под названием /compress, которую мы можем запустить, чтобы помочь. Теперь, прежде чем мы сделаем это, я хочу просто включить настройку в рабочей области, которая показывает оставшийся контекст в текущем окне в CLI здесь. Итак, чтобы сделать это, мы можем запустить команду settings, а затем мы перейдем к нижней меню, чтобы переключиться на настройки рабочей области. Затем я буду нажимать вниз, пока не найду настройку под названием hide context window percentage. И когда я доберусь до нее, я изменю значение на false, чтобы оно отображалось. Затем я выйду из этого окна настроек. И теперь мы должны увидеть оставшееся количество контекста прямо здесь в виде процента в нижнем колонтитуле CLI. Теперь в моем случае у меня осталось много места для контекста, поэтому мне не нужно ничего делать прямо сейчас, чтобы управлять им. Однако я хочу показать вам команду, которую мы можем запустить, если вы когда-нибудь обнаружите, что заполняете окно. И эта команда — compress. Итак, что делает эта команда, так это смотрит на весь контекст в истории сессии и сжимает весь этот контекст в более краткое резюме того, что произошло в сессии до сих пор. Затем она помещает все это сжатое резюме в окно контекста и удаляет все остальное из него. Так что это значительно освобождает место. И вы можете видеть, что оставшееся пространство в моем окне контекста для этой сессии увеличилось, потому что мы сжали всю историю сессии в краткое резюме. Есть еще одна команда — clear, которая очищает все окно контекста без создания резюме. Так что будьте осторожны при ее использовании. Но в любом случае, это почти все, что нам нужно знать о контексте на данный момент. И в следующем уроке я покажу вам, как настроить Gemini CLI с использованием API-ключа. И это позволит нам использовать новые модели.