Оце топ. Я вже пробував гратись з клонуванням голосу, але оця модель прям прикольно клонує ще й перекладає декількома мовами. Залишилось тільки робити 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.

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

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

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

Продовжуємо хіт-парад дивних хаків у React.

Мене трохи харять нудні вилизані лендінги та інтерфейси, хочеться більше безладу і фану, як у десктопних програмах часів WinXP. Тому UI у https://superscribe.ai/ буде з звуковими ефектами. Наприклад натискання кнопок буде "клікати" наче в тебе ота стара шарікова миша. Як це зробити? Звичайно глобальним манкі патчінгом реакту 😄

// making clicks sound!
const clickSound = document.createElement("audio");
clickSound.src = "click.mp3";

const createElement = React.createElement;
React.createElement = (...args) => {
  if (args[1]?.onClick) {
    const onClick = args[1].onClick;
    args[1].onClick = (...args) => {
      clickSound.play(0);
      return onClick(...args);
    };
  }

  return createElement(...args);
};

демка інтерфейсу

Я колись почав записувати історії родичів на диктофон, щоб вони не губились з голови з роками. Зараз от дійшли руки викласти їх на YouTube у нормальному форматі. Перша коротенька історія від бабусі про спогади її батьків та їх батьків про Голодомор 33го року на Чернігівщині https://www.youtube.com/watch?v=plTLF4Dgbwk

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

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

​​​​Pro tip: Як робити аналіз конкурентів

1. Знаходите їх ресурс з фідбеком кастомерів, часто це Discord
2. Пишете скрипт який робе дамп усього чату з фідбеком
3. Заганяєте цей дамп у ChatGPT
4. Просите його проаналізувати та видати структурований підсумок фідбеку
5. Мотаєте на оселедця що людям треба і чого не треба :)

Ось приклад структури репорту після аналізу

​​Колись під час ковіду взяв собі Nintendo Switch, позалипав півроку, забив і продав. А зараз от вийшла нова Zelda і знов руки чешуться пограти.

Виявляється є емулятор Switch! Правда для цього треба достатньо топовий комп :)

В мене працює супер у 2к, ще поставив собі емулятор Cemu для Wii і граю у Zelda Breath of the Wild, цей взагалі у 4к йде плавно з 60fps.

Прикольно грати в такі ігри на великому екрані і з контролером, зовсім інший досвід. Особливо кльово що можна накрутити роздільну здатність і згладжування.

Поки робив дашборд для https://superscribe.ai/, думав яку можна зробити автоматизацію для створення контенту.

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

Погуглив і поки що зупинився на NLP техніці Topic Segmentation. Я так розумію сегментація по топікам — це проблема визначення місця зміни теми в тексті. Типу можна вибудувати графік схожості наступного речення на попереднє і в момент, коли рівень схожості падає це означає зміну теми у тексті. Насправді алгоритм складніший, але ментальна модель в мене поки що десь така.

Для відосів з декількома учасниками, наприклад інтерв’ю, через Whisper можна розділити текст на окремих спікерів і тоді нарізати відос перекидаючи фокус на активного спікера. Це має спрацювати у поєднанні з розпізнаванням облич та руху губ.

І остання штука — це підсвітка «головних» слів у субтитрах. Наприклад слова на які робиться наголос у реченні, чи слова вимовлені емоційно. Круто було б виділяти їх у субтитрах для візуальної передачі емоції.

Головні слова у тексті також можна знайти за допомогою аналізу тексту і застосувати векторизацію аудіо для визначення тону.

Карочє потенціал для прикольних фіч є, залишилось тільки все це зробити. А поки що я прокрастиную додаваючи звукові ефекти у UI 😃

Оце сьогодні в Києві зранку навалювали, в мене стіни тряслися від вибухів, чи то виходи були.

Коротче дивився я на той topic segmentation, а потім запхнув транскрипт з таймінгами у ChatGPT і він мені все зробив, ще й на кожну тему прописав заголовок. Рахую що для MVP це топ рішення і поки зупинюсь на ньому. Пробував нарізати відео по запропонованим темам, виглядає непогано.

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

Ще хотів розказати, як я зробив пайплайн завантаження відео у https://superscribe.ai/

По простому: можна закинути відео у браузер і чекати поки воно завантажиться і опрацюється.

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

Працює кльово, але у цьому підході є купа обмежень. Поперше воно швидке тіки якщо у вас швидка машина. На М1 Pro з відео в 1Гб воно дістає аудіо доріжку десь за 7 секунд. Процесинг відбувається у бекграунді, тобто не блокує UI. На телефоні зрозуміло буде супер повільно. Тому цей спосіб буде використовуватись вибірково, тільки на десктопі.

По-друге, у WASM обмеження по памʼяті в 2Гб. Це десь відео на 20хв в 1080p 60fps, що може бути недостатнім, якщо ви завантажуєте наприклад подкаст.

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

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

Розвиваю тему з автоматичним нарізанням відео під формат ТікТоку у https://superscribe.ai/

Загалом ідея така: спробувати автоматизувати майже все, що зазвичай робить людина у редакторі коли їй дають контент відзнятий для YouTube.

А саме:
1. Спочатку відос нарізають на окремі частини де говорить кожний із спікерів.
2. Потім кожного спікера кропають під формат екрану телефону (вертикальне відео).
3. І тоді компонують ці кліпи у окремі відео по під-темам які там обговорюються.

Субтитри я опустив, бо це в мене вже готово. Наразі я вирішив перші два пункти і у процесі по третьому.

Як нарізати та кропнути відос по спікерам?

Перше що треба зробити — це зробити транскрипт усього відео з розпізнаванням спікерів. Розпізнавання по суті трекає усі унікальні голоси. На виході отримуємо текст з таймінгами та айдішкою спікера на кожне слово.

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

Далі, як кропати кожну людину з загального кадру? Прогнати кожний кліп через розпізнавання обличчя та кропати так, щоб координати обличчя були у центрі кадру.

Тепер на виході маємо пачку кліпів під екран телефону. Під цим дописом буде демка такої автоматичної нарізки першої хвилини подкасту який ми писали з @asolovyov

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

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

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

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

демо автоматичної нарізки