​​Нещодавно зробив собі домашній медіа-сервер на Raspberry Pi 4 (8GB RAM + 1TB SSD).

По софту було Ubuntu Server, Transmission та Jellyfin у Docker контейнерах. Плюс кастомний Node сервер зі своїм дашбордом у веб-морді. На дашборді виводиться статистика системи, типу RAM, CPU і тд. Знімаються ці дані тупим викликом декількох CLI команд по інтервалу

Promise.all([
  pexec("free"), // RAM usage
  pexec("df /"), // MMC usage
  pexec("df /mnt/ssd"), // SSD usage
  pexec("cat /sys/class/thermal/thermal_zone0/temp"), // CPU temperature
  pexec("cat /proc/stat"), // CPU usage
  pexec("cat /sys/class/net/wlan0/statistics/rx_bytes"), // network usage, received bytes
  pexec("cat /sys/class/net/wlan0/statistics/tx_bytes"), // network usage, transmitted bytes
]);

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

Потім мені захотілось підключити до борди невеличкий екран і виводити на нього всілякі дані. Зробити дашборд для стрімів у ютубчик, щоб дивитись коментарі, слідкувати за часом і отримувати нагадування час від часу щоб не забувати говорти типові фрази "лайк, підписка, донат".

Виявилось що то не так просто було зробити, бо в Ubuntu Server нема драйверу для GPU Raspberry (я хотів щоб екран не пожирав CPU) і я не дуже розуміюсь на апгрейді ядра Linux (в 6й версії той драйвер вже є).

Тому зніс Ubuntu Server і поставив Raspberry OS, який по суті той же Linux + патчі та драйвери під залізо Raspberry. Воно ще й RAM їсть менше, щось біля 80Мб.

Для виводу графіки на екран обрав простеньку лібу https://www.raylib.com/ на C, вона в принципі зроблена під ігри, але й текст з зображеннями у 2D теж можна виводити. Проєбавсь з C півдня у ChatGPT, зробив собі мінімальний дашборд для екранчику який через сокет отримує дані та команди з Node веб-серверу який в свою чергу контролюється з веб-морди.

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

Тому я зніс усе що написав і зробив те саме, тіки вже на Node через біндинги до Raylib https://github.com/RobLoach/node-raylib

Але й тут мене спідкала трагічна доля програміста, бо класичний рендеринг графіки — це синхронний блокуючий цикл, а як відомо Node — однопоточна хрінь 🙂 Прийшлось захачити асинхронний рендеринг кадрів через setTimeout. Із цікавого, мені не треба 60FPS, бо там тупо текст, без анімацій, тому в мене таймаут 125ms — це 8FPS.

Ось приблизний код як воно все влаштовано https://gist.github.com/roman01la/cbc66954e5ab0ff5066471d66f83c114

На яку хрінь ви витрачаєте свій час?)

На вихідних монтував відос для свого каналу на YouTube і в якийсь момент заєбавсь чистити аудіо. В мене нема поставленого голосу, щоб не бекати-мекати, тому я шукав якісь інструменти для підчищення доріжки. Скажу вам, що вони є і деякі достатньо круто це роблять. Наразі я зупинився на Denoscript та Podcastle. Обидва роблять +- те саме, але по-різному. Найкращий результат отримав прогнавши доріжку через обидва сервіси.

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

Denoscript кльовий, бо він переганяє аудіо у текст і прив'язує текст до доріжки, тому можна чистити аудіо у текстовому редакторі 🤯 Якщо б до цього ще додати можливість редагувати/додавати аудіо моїм голосом через текст — це було б топ. Сервіс play.ht вміє клонувати голос беручи за основу 15хв запис твого голосу.

Я трохи попитав ChatGPT як можна робити такі штуки і ще раз переконався наскільки це крутий інструмент для дослідження чогось нового для себе, коли ти тупо не знаєш що ти шукаєш, окрім абстрактного опису. ChatGPT наштовхнув мене на модель аналізу аудіо Wav2Vec та техніку маппінгу тексту на аудіо trannoscript aligning. Було б цікаво зробити таку опенсорсну альтернативу Denoscript (може вже щось є?), бо той сервіс нормально коштує по підписці 🙃

Так от я попросив ChatGPT написати мені сценарій для коротенького туторіалу по створенню кнопки на React, з тексту створив аудіо доріжку з голосом у play.ht, а з аудіо згенерив аватара у D-ID. Midjourney зробив обкладинку, я записав екран з набором коду і склеїв це все у Runway, вийшло кріпово і смішно, але в цілому враховуючи, що на все було витрачено 30хв і робив я все аби як, то результат вийшов доволі непоганий. Дивіться самі 👉 https://www.youtube.com/watch?v=J0VccHX4zyo

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

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

А от і відос, вийшло доробити його раніше 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/ ще більш дешевші інстанси