Вайбкодинг для ленивых: читаем видео на YouTube

Я всегда с осторожностью смотрел в сторону искусственного интеллекта, но, в целом, старался не оставаться в стороне от современных технологий и тенденций. Работал локально с LLM, локально же генерировал картинки и даже видео, использовал публичные сервисы для работы, общался с разными чат-ботами и иногда писал об этом статьи. Но до поры до времени не касался темы вайбкодинга.

Что ж. Настал тот день и час, когда обстоятельства и звезды сложились должным образом. За полчаса я сделал работающее полезное расширение для браузера. Эта немного ироничная статья о том, как я ко всему этому пришел, что и как делал и что в итоге получилось.

Идея

Был обычный вечер. Я лениво общался в Дискорде, параллельно листая ленту Хабра. Увидел очередную статью про вайбкодинг. Как и много раз прежде задумался о том, что уже давно хотел попробовать создать расширение для браузера. Но руки никак не доходили. Да и не было подходящей идеи, которую бы хотелось реализовать. А без интереса делать что-то скучно.

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

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

Но есть минус. Текст показывается сбоку в небольшом окошке с узкими строками, его приходится долго прокручивать и нельзя просто скопировать (ок, ок, можно, но это все равно лишние телодвижения, особенно если текст длинный, хотя...). В общем, не очень удобно. Вот если бы его можно было взять и скопировать в отдельный документ и спокойно пролистать... Да это же идея для расширения! По идее это не должно быть сложно, тем более у меня даже есть неплохой опыт парсинга веб-страниц.

Однако я решил попробовать чистый вайбкодинг. Отринув свой опыт программирования и прочего. Только Gemini, только хардкор. Никакой помощи. Посмотрим, на что он способен. Были некоторые сомнения, но задача казалась несложной, поэтому я верил в успех. Не зря, кстати.

Начало общения

Как говорится - в правильно заданом вопросе уже есть половина ответа. Подобное можно сказать и про промпт для генеративного искусственного интеллекта. Чем лучше составишь, чем доступнее объяснишь, что ты от него хочешь, тем лучше результат получишь. Однако я не стал сильно заморачиваться, интересно было проверить в максимально простом варианте, насколько он справится, если я не буду упирать на какие-то важные детали, а буду описывать все в общих чертах. Как почти типичный обыватель. Поэтому первый промпт был вот таким:

Стартовый промпт

В ответ Gemini похвалил за идею (куда же без этой запредельной вежливости), предложил варианты решения, архитектуру расширения, варианты с чего начать и задал пару вопросов, какой из вариантов меня больше устроит. Пока без кода, но объяснил хоть и кратко, но понятно. Хотя, вероятно, тут мой бекграунд сыграл свою роль. Человеку далекому от знаний устройства браузера, программирования и прочего могло быть чуть сложнее. Но вряд ли это сможет остановить по настоящему пытливый ум.

Я выбрал простой вариант. Сам нажимаю на кнопку "Показать текст видео", затем в страницу встраивается кнопка, по нажатию на которую текст с видео оказывается в буфере обмена. Вроде бы ничего сложного. Пишу это и получаю уже ответ с кодом под каждый файл расширения. Их пока два manifest.json и content.js. Кроме того получаю код для консоли браузера, чтобы проверить, насколько хорошо работает парсер текста:

console.log(Array.from(document.querySelectorAll('ytd-transcript-segment-renderer .segment-text')).map(el => el.innerText.trim()).join(' '));

Жму shift+ctrl+I, чтобы открыть DevTools, выбираю Console и запускаю код. Великолепно, все сразу работает! Настала пора попробовать само расширение.

Gemini еще немного обновляет код и предлагает попробовать работу расширения. Замечательно, вот только расширения то пока нет...

Забыли про расширение

Все потому, что мы про него забыли. Я где-то в общих чертах представлял себе, как запустить распакованное расширение, но на всякий случай, для чистоты эксперимента, переспросил у Gemini:

Отлично, он сразу выдал подробную инструкцию, что делать. Поэтому я вбиваю в адресную строку своего браузера Vivaldi текст chrome://extensions/, перехожу на вкладку с расширениями (а ведь можно было просто нажать shift+ctrl+E), там включаю "Режим разработчика" и тыкаю на кнопку "Загрузить распакованным", чтобы загрузить папку с файлами будущего расширения:

И, вуаля, расширение добавлено. Созданное мной Gemini. С минимальным моим участием. Не рискну забирать какие-то лавры себе:

Далее мне предлагают попробовать его работу на любом видео с ютуба. Я, предвкушая легкую победу, пробую... И... кнопка, тыкая на которую я должен был получить в буфер текст, не появляется.

Исправляем и доделываем

Далее три промпта ушли на попытку исправить этот косяк. Кнопка упорно не хочет встраиваться в страницу. В какой-то момент я подумал, а зачем она вообще мне нужна на странице? Код то должен работать, проблема лишь в кнопке. Тогда лучше ее добавить в менюшку самого расширения. Это явно должно быть проще. О чем и сообщаю Gemini:

В ответ получаю радостные восхваления о том, какой я молодец, как хорошо это придумал и измененный код, плюс код еще нескольких файлов (popup.html, popup.js и background.js). Действительно, почему бы не сделать так сразу? Хорошая мысля приходит опосля...

После изменений кода и файлов не забываю обновить расширение во вкладке расширений и пробую обновления в работе. Расширение отрабатывает на ура. Кнопка работает, текст в буфере:

В общем, расширение готово, оно работает. Но внутренний перфекционист (лень, конечно же это была лень) задумывается, что приходится делать много лишних телодвижений - сначала развернуть описание видео, чтобы добраться до кнопки "Показать текст видео", потом нажать на эту кнопку и только потом тыкать в расширение. Долгооооо...

Финальные штрихи

Описываю Gemini свои пожелания, не уточняя, что этого захотела моя лень. Получаю измененный код, с надеждами, что меня все устроит и я, наконец-то отстану от бедного искусственного разума.

Увы, с первого раза не получилось, видимо код отрабатывал слишком быстро, до того момента, когда на странице загрузится текст. Поэтому сообщил об этом недоразумении и получил уже действительно окончательный рабочий код. Как-то вот так все получилось:

Заодно выяснил, что в фильме "Фанат" не так уж и много текста. Интересная, хотя и не очень важная информация. Зато стало ясно, что размер видео не имеет значения, расширение отлично забирает текст и с короткого видео и с длинного, заодно убирая временные метки.

Выводы

Что ж, процесс был занятным. Наверняка подобное расширение уже существует, а может и не одно. Поэтому почти мой велосипед вряд ли кому понадобится, но вайбкодинг оказался прикольной штукой. Не уверен, что при более сложной и комплексной задаче искусственный интеллект справился бы так же легко и быстро. Но если у человека появилась какая-то простая идея, то самый обычный чат-бот вполне способен помочь ее реализовать. Это ли не круто? Ты просто пишешь, что тебе нужно, следуешь инструкциям, пробуешь, исправляешь, получаешь итог.

То, что я вполне смог бы сделать сам, потратив много времени и сил, Gemini помог сделать намного быстрее и без лишних умственных затрат. Касательно последнего не уверен, плюс это или минус... Но инструменты нужны для того, чтобы ими пользоваться, чтобы они улучшали нашу жизнь. Делали ее проще (и потворствовали лени, ведь она двигатель прогресса).

Итого, ачивка вайбкодера получена. 9 промптов, 3 из которых попытки исправления исчезнувшей кнопки и 1 исправление предфинальной недоработки, и расширение готово. Можно посмотреть на итоговый результат на GitHub: YT Transcript Grabber. В код я почти не заглядывал. Надеюсь, там все не очень ужасно.