А от і відос, вийшло доробити його раніше https://www.youtube.com/watch?v=iMznlVvJcXA

Це буде серія простеньких туторіалів по React, UI та вебу у цілому. Підійде і початківцям і практикуючим девелоперам. Дивіться, ставте закусенці догори, поширюйте, щоб в мене була мотивація робити ще, бо монтувати це все діло швидко набридає)

Хтось в робочому чаті вчора поставив запитання на яке мені було лінь відповідати, бо треба було надати людині увесь контекст, а це пару параграфів тексту. Тому як трушний інженер я написав собі CLI який записує мій голос, робить з нього стенограму на переписує текст так наче це б було повідомлення у письмовій формі, написане у чаті (тіпа щоб не палитись). Працює супер, чувак задоволений відповіддю, а я задоволений своєю лінню 😀 З українською там звісно все погано.

По суті то скрипт який юзає Whisper та GPT для запису і переписування тексту. Посилання на проєкт https://github.com/roman01la/voice-to-chat

​​Не так давно Meta виклали у вільний доступ свою модель для сегментації зображень — Segment Anything.
Вона трохи навела шуму у спільності computer vision, бо ця моделька ну дуже добре сегментує зображення. Якщо коротко, то це типу як фіча в iOS коли тикаєш пальцем і воно тобі вирізає зображення людини з фото. Але SA сегментує усе підряд і достатньо швидко, її можна застосовувати і для відео. Можна банально нарізати фотку на окремі файли кожного об'єкту який потрапив у кадр і робити собі усякі стікєри. Чи наприклад трекати шось на відео.

Ще прикольніше воно працює у поєднанні з моделями які вміють словами описувати контент зображення, наприклад BLIP2. Якщо раніше можна було описати усе зображення як одне, то зараз можна буде визначати що і де саме розміщене на фотці. Карочє можна зробити Pinterest на колінці. А якщо це поєднати з відео, то виходить ніфігова фіча з пошуком. Додайте до цього пошук таймкоду через розшифровку аудіо і опису звуків (наприклад звук мявкаючого кота), можна буде текстом і відео знайти кота який мявкає за кадром і потім з'являєтья у кадрі.

Я поки шо граюсь з цим, цікаво зробити прототип апки яка б з фото виділяла їжу, описувала словами що там було на столі та наприклад писала б мені через ChatGPT потенційні рецепти або розписувала калорійність продуктів. Це все звісно і раніше вміли робити, але зараз воно стає більш доступне для таких фронтендщиків як я. Навіть деплоїти вже можна в одну команду як сайт на Vercel, тільки це для ШІ https://modal.com/

Ось покроковий процес проганяння фото продуктів через Segment Anything, BLIP2 та ChatGPT.

Відзняв коротенький відос про те, як я використовую ChatGPT у програмуванні. Головна теза: ітераційний підхід і не очікувати, що це якась магія яка тобі зробе все швидко, гарно і правильно

https://youtu.be/iqOXUrjIEm0

Happy Monday. Я на цьому тижні відпочиваю у відпустці, але збір на тачку для ЗСУ все ще актуальний.
Буду вдячний за ваш донат, та поширення допису 🫙 https://send.monobank.ua/jar/56tpYRGJyS

Сидів сьогодні грівся на сонці і нагрів собі ідею для заохочення людей до перегляду контенту.

Автоматично підбирати обкладинку відео спираючись на вподобання користувача що переглядає стрічку.

Наприклад якщо це інтервʼю з різними людьми, то показувати кадр з людиною за якою слідкує користувач, і тому подібне.

Для цього можна аналізувати кожен кадр відео через якусь модель типу BLIP2, додавши розпізнавання облич та брендів. Шаленієш від Спартака Суботи? Покажемо тобі кадр з дибілом.

Це може бути непоганий кейс для просування відео, в яких елементи цікаві користувачеві не є основним контентом.

Новий епізод на YouTube, цього разу про транскрипт аудіо за допомогою Whisper від OpenAI. Не так давно я тут писав про транскрипт і редагування відео, з тих пір трохи експериментував з різними підходами. У відео розказую про підхід на якому зупинився наразі.

https://www.youtube.com/watch?v=hUzzs5Dlxrk

Тепер усі відоси на каналі, минулі також, з субтитрами українською та англійською. Дякуючи Whisper та DeepL.

Оце цікаво: побачив сьогодні якусь нову лібу яка оптимізує React, підмінюючи VDOM на іншу імплементацію https://twitter.com/aidenybai/status/1651072640650727424?s=20

В мене в голові не сходяться дві штуки: React пішов по шляху серверного рендеру, під егідою Vercel, і явно прослідковується фокус на нескладні сайтики, де перфоманс реакту взагалі по барабану, бо там небагато UI і даних.

З іншого боку фронтенд спільнота зараз фіксується на перфомансі саме UI бібліотек. Про це багато пишуть, особливо після того як дізнались більше про SolidJS, ну і Svelte (воно живе?).

Складається враження, шо це все перегони мікро-бенчмарків, бо на простеньких сайтиках дійсно можна дійти до того, шо більшість часу в JS йде на обчислення у UI бібліотеці, а не у вашому коді.

На практиці ж, при побудові чогось більш складнішого ніж випадайки і формочки — сам React стає найменшою проблемою і його цінність полягає у простій ментальній моделі. Частіше проблеми будуть у вашому коді, з обробкою даних або з якимись браузерними API, або Safari гг.

Коротче, перфоманс UI бібліотеки не повинен бути вирішальним фактором, коли всі вони приблизно однаково неповільні. Краще вже дивитись на ваші задачі та developer experience.

Оце топ. Я вже пробував гратись з клонуванням голосу, але оця модель прям прикольно клонує ще й перекладає декількома мовами. Залишилось тільки робити lipsync з оригінального відео під згенероване аудіо (такі моделі доречі також існують) 😄 https://beta.elevenlabs.io/

Повернувся до рендерингу субтитрів під формат відосів для ТікТоку.

Доречі днями переглядав багато контенту і підрахував, що український ТікТок ну дуже рідко використовує саби, в англійському от їх додають часто.

Частіше саби додають у кліпи з передач чи серіалів, рідше у персональний контент (типу шось зняв з котами вдома і залив). Може у мене така стрічка, але в українському тіктоці більше саме персонального контенту.

Так от, у мене задача — малювати текст та векторні геометричні фігури поверх відео.

Пробував вбудований у ffmpeg рендерер, але там чорт ногу зломить. Тому дивися у сторону окремих бібліотек. Стратегія проста: запустити пачку паралельних лямбд, по одній на секунду відео, та генерувати кадри с текстом/графікою, а потім запайпити всі кадри у ffmpeg разом з відео.

ffmpeg ганяю з CUDA прискоренням, на дешевому GPU для 1080p видає 3х кодування (тобто за 1с рендерить 3с відео).

А з рендрингом тексту та графіки зупинився на Skia, це рендерер у Chrome, він на CPU швидко і дешево видає кадри у PNG які навіть не треба писати на диск, і вміє малювати текст та вектор зі згладжуванням.

Коротше поки що виглядає так, що може вийти щось прикольне. До наступного разу підготую демку.

Одвічне питання беклогу. От у вас напевне ж є на роботі якийсь беклог типу «все оте непонятне складаємо сюди», і потім кожна команда потроху витягує задачки звідти, є таке?

Питання: як зробити так, щоб над тими задачами дійсно працювали?)

Співробітник виклав демку одного з експериментів з ШІ та зображеннями: малюєш скетч на слайді, а ми тобі підсовуємо один з стікерів який найбільше схожий на малюнок.

Це типу такий розумний пошук по зображенням. 99% що воно залишиться тільки як демо, бо на практиці це не дуже зручно. Але розкажу про імплементацію, бо це цікавіше ніж засовувати ChatGPT у всі дірки.

Ми зараз сфокусувались на пошуку зображень. І насправді там нічо нового, Google так давно робить.

Щоб шукати по зображенням, треба витягти якусь інфу про те що там на них зображено (обʼєкти, кольори, місцевість, час, рік, стиль, тощо). Зараз це можна легко робити за допомогою моделей типу OpenAI CLIP або BLIP2. Насправді можна діставати ці факти з зображення використовуючи більш традиційні методи computer vision, але з ШІ потенційний набір фактів набагато більший, тому і пошук стає цікавішим.

Так от ці моделі видають інфу про зображення закодовану у векторі. Про вектори я писав тут десь раніше. Тому щоб шукати по зображенням нам по суті треба векторизувати усі зображення і зображення або текст яким шукаємо.

Далі вектори порівнюються за допомогою формули cosine similarity — це вже проста геометрія, косинус кута між двома векторами покаже наскільки однаково вони спрямовані у одному напрямку, і це показує наскільки схожий наш запит на конкретне зображення. У цьому доречі і краса векторизованих даних, бо це загальний формат опису будь чого.

Так от, у випадку з цією демкою намальований скетч зберігається у зображення, векторизується через CLIP та використовується як запит у базу де в нас вже лежать усі зображення у форматі векторів. От і вся магія.

Також можна робити пошук схожих зображень, щоб підвищити перевикористання асетів.

Я як то кажуть late to the party, та все ж таки цікаво: може хто використовував TailwindCSS у довготривалих комерційних проєктах? Як воно з точки зору підтримки?

Бо мені писати стилі (точніше не писати їх) на ньому ну дуже подобається. Особливо з інтеграцією у VS Code, з автокомплітом, лінтером та прикладами коду.

Для своїх проєктів заходить супер. В них ще є бібліотеки компонентів, поки не пробував, але виглядає теж непогано. В мене травма від тих бібліотек з часів Material UI, тому я їх боюсь в принципі 😀

Робив вчора завантаження файлів з клієнту, і знаєте що? Fetch API не дає можливості відслідковувати завантаження файлу на сервер 🫠

Я колись про це читав, але не доводилось робити. Тому відкрив скриню старого фронтендщіка і взяв кувалду XMLHttpRequest, працює топчик.

Мало того, в XHR можна вішати лістенер (як це сказати українською?) на кінець запиту. Тобто коли запит повністю пішов на сервер, а далі вже починається очікування на відповідь.

Це нагадало як я колись робив репорт відпрацьовування таски на сервері по HTTP. Коли завантажуєш файл і сервер його обробляє скажімо хвилину. По простому роблять long-polling, це також зменшує навантаження на веб-сервер. Можна ще заморочитись з Server Sent Events.

Але мені було цікаво зробити це в рамках одного реквесту. Так от, таку штуку якраз зручно робити через Fetch API, бо він побудований на абстракції стрімів. Тобто можна на сервері писати у відповідь цифру, а на клієнті у стрімі вичитувати і відображати прогрес. А вже коли таска закінчить виконання, до записати у відповідь пейлойд і закрити підключення.

Звісно що так робити не треба, бо воно не масштабується 😀

Я доречі рідко пишу тут саме про новини з фронтенду, тому рекомендую підписатися на новий канал DOU, виділений окремо під цей топік https://news.1rj.ru/str/frontend_dou/4

Також сам топік є на сайті, там можна переглянути усі дописи та поспілкуватися на фронтендерські теми https://dou.ua/forums/tags/front-end/

Я нарешті зібрався і почав працювати над альфа версією свого невеличкого сервісу для додавання субтитрів у відео контент для соц мереж.

Насправді вже доволі багато зроблено. Більше часу йде на пошуки маркет фіту, та дослідження ринку. І звичайно що на розробку MVP.

Зараз на сайті доступна реєстрація на альфа-тестування 👉 https://superscribe.ai/

Тут, а також у твіттері буду більше писати про розвиток продукту, підписуйтесь https://twitter.com/superscribehq

В цілому ідея полягає у автоматизації додавання не нудних субтитрів у відео контент, таких що звертають на себе увагу, що у свою чергу збільшує залучення людей до перегляду контенту, а отже підвищує ваші продажі, перегляди та аудиторію.

Сервіс вирішує проблему дорогого та часо витратного процесу створення кастомних субтитрів, що часто роблять у професійних відео редакторах.

Ніша доволі вузька, але в цьому і плюс для мене, бо я сам собі команда і навіть цього достатньо щоб загрузнути у всіх активностях повʼязаних зі створенням продукту.

Тепер трохи про технічні штуки.

Може ви читали про останні плюшки які в себе додав Vercel, і що насправді вони взяли існуючі сервіси та продають їх за 4х грошей 😃

Насправді там ще важлива інтеграція у екосистему, але все ж таки компанія стала брендом, за який люди готові (або ні) платити.

Так от, я днями шукав простий і недорогий (бажано безкоштовний) спосіб зробити собі нормальну базу даних та підключити identity провайдера (авторизація через сторонні сервіси на управління аккаунтами).

Для швидкості розробки насправді можна було б узяти Firebase, бо там все є. Але навіть у середньостроковій перспективі я не думаю, що мені вистачить Firebase.

Тому для аккаунтів узяв https://clerk.com/, вони як Auth0, тільки більш клієнто орієнтовані, дешевші і дають безкоштовно до 5к активних аккаунті на місяць. І підключити його собі на сайт супер ізі.

З базою поки що зупинився на https://neon.tech/, це serverless Postgres який Vercel продає набагато дорожче. Думаю мені надовго вистачить free tier, а в перспективі буде простіше переїхати на self-hosted якщо буде потреба.

На клієнті React, Tailwind, react-router та react-query. Про іншу та як на мене більш цікаву частину стеку розкажу згодом.

Ділюся з вами списком усіляких провайдерів ШІ та сервісів щоб ганяти моделі

- https://jina.ai/ дають погоняти CLIP та BLIP2 по апішці, безкоштовних токенів вистачить на експерименти
- https://beta.elevenlabs.io/ за 5 баксів клонує ваш голос, також є API
- https://www.anthropic.com/product це LLM з контекстом у 100к токенів
- https://cohere.com/ також LLM, в них є навчальний курс по LLM https://docs.cohere.com/docs/llmu
- https://www.assemblyai.com/ транскрипція та аналіз аудіо
- https://modal.com/ serverless GPU на AWS, підходить для деплою моделей, я активно користуюсь, сервіс супер
- https://jarvislabs.ai/ дешеві GPU інстанси для експериментів
- https://vast.ai/ ще більш дешевші інстанси

Мене тут військові попитали зробити їм мапу місцевостію. Я нічого нормального не знайшов щоб швидко завантажити велику мапу з нормальною роздільною здатністю під метровий розмір. Тому ось начатгепетав пару скриптів що викачують тайли з Open Street Map та зшивають у одне зображення. Може кому згодиться: https://gist.github.com/roman01la/35171dfcf2b64983486dcb1c2f844be9

Хто у Києві доречі, рекомендую поліграфію 24Print @UA24Print_bot

​​Я рідко пишу React на JS, але коли пишу, то кожного разу крінжую від того що не можна нормально робити if..else у JSX.

Можна звичайно виносити шматки коду у функцію і тд, але це все поділяє код на окремі частини і ускладнює читабельність, бо треба туди сюда бігати очима по екрану.

Тому будучи лінивим кложуристом я собі зробив отаку діч для своїх проєктів і мені аж полегшало 😀

Що скажуть експерти?))