​​Я рідко пишу 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/

Я подекуди заглядаю у зарплатне опитування від DOU і сам його заповнюю, щоб розуміти як почуває себе українська айтішка і куди ми йдемо порівняно зі світом. Рекомендую вам також заповнити форму, ця статистика непоганий спосіб оцінити себе на ринку праці. Зрозумієте чи ви топ 1%, чи може пагано себе продали) 👉 https://news.1rj.ru/str/frontend_dou/65

Гуд фрайдей морнінг. Пробували продавати софт as a service закордон? А чи пробували ви розібратись з податками у кожній країні та штаті?

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

Оце кльовий випуск подкасту про sales tax і наскільки там все погано, рекомендую https://saas.transistor.fm/episodes/nobody-in-saas-wants-to-talk-about-this

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

Я один раз в житті запускав проєкт на Next.js, десь два тижні тому, і воно у мене відвалювалася з out of memory кожні пару хвилин після релоаду змін у коді.

Я звичайно не претендую на звання експерта по Next, але судячи з фідбеку людей у Твіттері, Next з гарного фреймворку став роздутим монстром в якому час від часу щось ламають. Я так розумію основна біда походить від нового типу проєкту який використовує App Router та react server components, які все ще експеримент, але у Next вже стали стандартом.

Шо скажете?

https://twitter.com/emilwidlund/status/1672969385714102273?s=46&t=h4PejqCHRaVkMiRK7hFe1g