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

Насправді вже доволі багато зроблено. Більше часу йде на пошуки маркет фіту, та дослідження ринку. І звичайно що на розробку 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

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

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

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

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

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

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

Доречі для минулого допису я робив тред у Твіттері з пояснювальними картинками https://twitter.com/roman01la/status/1666189287455354881

Це напевне перша модель для генерації музики яка робить щось нормальне https://huggingface.co/spaces/facebook/MusicGen

Результат вражає, воно навіть зробило достойний дроп!

Хоч роби на колінці сервіс для генерування фонової музики у ютубчик :D

prompt: melodic liquid drum n bass, with piano, BPM: 170

Олександр Соловйов сьогодні робить стрім з лайвкодінгом о 18:00, доєднуйтесь до перегляду (посилання у його каналі). І підписуйтесь на його канал, він там також пише всякі штуки про айтішку https://news.1rj.ru/str/bitethebyte

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

Гуд морнінг. Оновив лендінг SuperScribe, тепер він трохи краще відображає сутність продукту https://superscribe.ai/ Згодом перероблю майже повністю, бо треба додати більше тексту і пару демок фіч.

Потроху просуваюсь по всім фронтам. Все ще думаю, що гарно було б зробити собі компанію в Естонії через e-residency, який я собі оформив ще у 2020му році, щоб продавати по всьому світові, але мені зараз і так хватає чим зайнятись.

Мені підказали спробувати еквайринг від Monobank, бо він працює на прийняття платежів карткою і в Україні і за кордоном. Я трохи протестував API і вчора вже підключили торгову точку. Але от з мінусів: гроші заходять у гривні і у людей буде знімати трохи більше через подвійну конвертацію, також цей еквайринг — це просто API, тобто треба може якусь CRM підключати для управління платежами.

Якби була компанія у ЄС, то там включаєш Stripe та і все. З іншого боку для такої компанії треба бухгалтера і вони деруть гроші за все, особливо нормально капає за кожен інвойс. Відкрити компанію десь 300€, і за послуги десь 170€ на місяць. Але от дохід не оподатковується, якщо не виводити кеш. Карочє поки що я не впевнений, що хочу на це підписуватись.

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

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

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

По технічній частині, пришвидшив у два рази пайплайн аналізу аудіо (створення транскрипту, корегування таймінгів під аудіо та розпізнавання унікальних голосів). Тепер подкаст на 90хв обробляється за 6хв, на Nvidia T4 (це сама доступна і недорога відеокарта).

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

Далі буду збирати аналіз аудіо та відео у один пайплайн і експериментувати з рекомендаційною частиною. Це по суті буде такий собі AI copilot, який в UI запропонує вам як можна нарізати відос, а ви вже зможете внести свої корективи, натиснути кнопку і чекати поки воно відрендерить і надішле вам готові відео.

Вийшло багато неструктурованого тексту. Сприймате це як мій brain dump, треба ж час від часу розвантажувати свою голову)

Рекомендую україномовний (та трохи хардкорний) подкаст про програмування та ШІ від Джона та його друзів https://news.1rj.ru/str/midnight_chatter
Хлопці говорять про ML, пітончик, тестування і про айтішку вцілому.

https://podcasters.spotify.com/pod/show/polunochnii-trep

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

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

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

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

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

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

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

Доречі ми не так давно перейшли на Linear і мені прям подобається. Кльова система, хоча місцями ще й сира. Сподіваюсь вони не перетворяться у Джиру через декілька років.
_____________

Якщо вам подобається контент цього каналу, можете мене підтримати закинувши гривню на каву ☕️ https://www.buymeacoffee.com/romanliutikov

Зробив перший скетч анімації-скроллеру на лендінг https://superscribe.ai/ Нарешті мені згодилися скіли моделювання у Blender )

Ідея якось візуально обіграти суть сервісу, показати процес і результат.

Бібліотеки react-three-fiber та pmndrs/drei дуже спрощують створення 3D сцен та анімацій. Рекомендую погратись з таким сетапом, от демка до прикладу.

Також підпишіться на автора бібліотеки, він часто постить цікаві демки.

Рідко користуюсь UI бібліотеками, але от зараз почав потроху використовувати https://www.radix-ui.com/ та https://ui.shadcn.com/ для більш складних компонентів, які самому довго писати. So far so good.

Може є ще щось подібне і мінімалістичне для React? Типу headless компоненти або з TailwindCSS?

От доречі ще є TailwindUI, за гроші https://tailwindui.com/