Hook Mixer (Junction)

Сайт, який бере випадкове відео й випадковий хук з Google Drive і поєднує їх через ffmpeg. ffmpeg працює прямо у браузері (ffmpeg.wasm), тому сервер не потрібен, і безкоштовного Vercel достатньо.

Як влаштовані папки на Google Drive

На сайті вказується одна головна папка (за замовчуванням уже стоїть папка Junction). Всередині неї сайт сам шукає підпапки: з «хук»/«hook» у назві = хуки, з «відео»/«video» = відео. Якщо вгадав неправильно, папки можна вибрати зі списку. Якщо підпапок немає, відео з «hook»/«хук» у назві файлу вважаються хуками, а решта основними відео.

• Папка з хуками містить:
  • відео-хуки: короткі кліпи .mp4/.mov, які ставляться на початок;
  • текстові хуки: файл .txt або Google Doc, один хук на рядок. Текст накладається титром на перші 3 секунди.
• Папка з відео містить основні відео.
• Підпапки теж читаються (до 2 рівнів вкладеності).
• Обидві папки: Поділитися → «Усі, хто має посилання» → Читач.

Підключення Drive через Apps Script (рекомендовано, без карти й ключів)

1. Відкрий script.google.com → New project (Новий проєкт).
2. Видали весь код у редакторі й встав вміст файлу apps-script.gs з цієї папки. Натисни 💾 (Save).
3. Deploy → New deployment → шестерня ⚙️ → Web app.
   • Execute as: Me
   • Who has access: Anyone
   • Натисни Deploy.
4. Google попросить дозвіл: Authorize access → обери свій акаунт → Advanced → Go to project (unsafe) → Allow. («unsafe» тут означає лише, що скрипт не перевіряла Google; це твій власний скрипт.)
5. Скопіюй Web app URL (закінчується на /exec) і встав на сайті в перше поле.

Скрипт віддає тільки файли з головної папки Junction, тому решта твого Drive недоступна. Папку не треба робити публічною. Великі відео скрипт передає частинами по 8 МБ, тому розмір файлу не обмежений (але великі файли довше вантажаться).

Як оновити код скрипта (зберігши те саме посилання)

1. На script.google.com заміни весь код новим вмістом apps-script.gs і збережи.
2. Угорі у списку функцій обери authorize → натисни ▶ Виконати (Run) → дай нові дозволи (Додатково → Перейти до проєкту → Дозволити).
3. Розгорнути → Керувати розгортаннями → ✏️ (олівець) → Версія: Нова версія → Розгорнути. Посилання /exec залишиться тим самим.

Альтернатива: Google API-ключ (один раз, безкоштовно, карта не потрібна)

1. console.cloud.google.com → створи проєкт (наприклад, hook-mixer).
2. APIs & Services → Library → Google Drive API → Enable.
3. APIs & Services → Credentials → Create credentials → API key.
4. Відкрий ключ і налаштуй обмеження:
   • Application restrictions → Websites → додай https://ТВІЙ-ПРОЄКТ.vercel.app/* (і http://localhost:*/* для тестів);
   • API restrictions → Restrict key → Google Drive API.
5. Встав ключ на сайті в поле «Google API-ключ». Він зберігається тільки у твоєму браузері й не потрапляє в GitHub.

Як користуватись

1. Встав ключ і посилання на дві папки → «Завантажити список файлів».
2. Обери параметри: скільки відео в ролику, скільки роликів, тип хука, якість.
3. «Поєднати» → перегляд → «Завантажити MP4».

Вкладка «Файли з компʼютера» робить те саме без Google Drive.

Налаштування монтажу (блок «2. Стиль монтажу»)

Усе обирається на сайті й запамʼятовується у браузері.

• Пресети: TikTok жовтий, Хайп, Кіно, Мінімал, Junction. Можна зберегти свій.
• Шрифт: 11 шрифтів з кирилицею (Montserrat, Unbounded, Rubik, Oswald, Russo One, Manrope, Exo 2, Comfortaa, Caveat, Lobster, Press Start 2P).
• Текст: колір, стиль (плашка / обводка / тінь / без фону), колір плашки, розмір, позиція, ВЕЛИКІ ЛІТЕРИ, тривалість текстового хука.
• Анімація: статично, плавна поява, pop, виїзд знизу, по рядках, по одному слову.
• Субтитри: без субтитрів / з файлу .srt (з тією ж назвою, що й відео: video1.mp4 + video1.srt) / автоматично. Автосубтитри розпізнають голос моделлю Whisper прямо у браузері (безкоштовно, без ключів). Перший раз завантажується модель: «Швидка» ≈130 МБ, «Точна» ≈250 МБ, потім вона береться з кешу. Можна вибрати мову, скільки слів показувати одночасно і колір підсвітки слова, яке звучить. Під готовим роликом є посилання «Субтитри (.srt)»: завантаж, виправ помилки і поклади файл поруч із відео на Drive. Наступного разу візьмуться виправлені субтитри.
• Переходи: 12 основних з анімованими мініатюрами + ще 36 переходів ffmpeg (шторки, діагоналі, слайси, двері, стиснення…) — усі 46 переходів, які є в ffmpeg.
• Монтаж: вирізати паузи (тишу) з відео (мʼяко / середньо / жорстко), бумеранг на хуку, стоп-кадр у кінці, поява з чорного й затемнення, дзеркало, поворот 90/180/270°, стабілізація.
• Ефекти: 9 кольорокорекцій + свій LUT (.cube) з підпапки lut на Drive або файлом; ручна корекція (яскравість, контраст, насиченість, температура); стилізація (VHS, кольорові відблиски, кінорамка, мерехтіння, зерно, віньєтка, комікс, шлейф руху, розмиття руху, вибірковий колір); динаміка (зум-удар, тряска, глітч на хуку, повільний наїзд камери, прогрес-бар); якість (автосвітло, прибрати шум, різкість).
• Звук: обробка голосу (чистий голос, телефон, луна, низький, високий, робот, хор), прибрати фоновий шум, автоприглушення музики, коли говорять, плавний старт музики; фонова музика (підпапка music на Drive або свій файл), гучність музики / оригіналу / ефектів, 9 звукових ефектів (на переході, на старті хука, на появі тексту), вирівнювання гучності.
• Формат: 9:16, 4:5, 1:1, 16:9; обрізати / розмитий фон / чорні смуги; швидкість 1–1.5×; 1080p; менший розмір файлу.
• CTA і лого: заклик до дії в кінці, логотип (підпапка logo на Drive або свій PNG), позиція, розмір, прозорість, нік / @username унизу кадру.
• Експорт: крім MP4 — обкладинка PNG, тільки звук MP3, GIF (перші 8 с), WebM.

Підпапки на Google Drive

hook — хуки (відео, фото, .txt), body — основні відео (+ .srt), music — треки, logo — логотип, lut — файли .cube. Назви можна змінити: сайт вгадує їх за словами і дає вибрати вручну.

Звідки шрифти і звуки

Шрифти — Google Fonts (ліцензія SIL OFL, див. fonts/LICENSE.txt). Звукові ефекти в sfx/ синтезовані з нуля, тож вільні для використання.

Як це працює всередині

1. Джерело. Сайт читає папку на Google Drive через твій Apps Script (або файли з компʼютера) і запамʼятовує файли в кеші браузера, тож наступного разу вони не завантажуються заново.
2. План. Обирається, що піде в кожен ролик: випадково, усі комбінації хук × відео або кожен хук по разу. Кожен ролик отримує мітку H02-B05 (хук №2, відео №5).
3. Підготовка кліпів. Завантаження (у фоні, поки монтується попередній ролик), вирізання пауз, субтитри (.srt або розпізнавання голосу).
4. Монтаж. Усі кліпи й ефекти збираються в один «граф фільтрів» ffmpeg і кодуються за один прохід. Коли роликів кілька, кожен кліп монтується один раз і використовується повторно в усіх комбінаціях.
5. Результат. MP4 (+ PNG, MP3, GIF, WebM за бажанням) і кнопка ZIP з усіма роликами + таблиця rolls.csv: який хук і яке відео в кожному ролику. Зручно для назв оголошень і звітів по тестах.

Швидкість

• Багатопотоковий ffmpeg. Файл vercel.json вмикає заголовки COOP/COEP, і браузер дозволяє ffmpeg працювати на кількох ядрах процесора. Якщо браузер не підтримує цей режим, сайт сам перейде на звичайний однопотоковий.
• Один прохід замість двох (раніше кожен кліп кодувався окремо, а потім усе ще раз).
• Заміри на тестовому ролику (2 × 15 с, 1080p, 2 ядра): було 102 с, стало 51 с. На компʼютері з більшою кількістю ядер виграш більший.
• Багатопотоковий ffmpeg має фіксовані 1 ГБ памʼяті. Дуже важкі ролики (3+ кліпи з бумерангом, відблисками, стабілізацією, розмитим фоном або 1080p) сайт сам монтує по кліпах.
• Розпізнавання голосу використовує відеокарту (WebGPU), якщо браузер її підтримує, а інакше кілька ядер процесора.
• Порада: 720p, «Макс. секунд з кожного відео» і короткі хуки — найпростіші способи прискорити монтаж.
• Якщо після оновлення щось перестало відкриватися з Drive, видали vercel.json: сайт повернеться до однопотокового режиму.

Обмеження

• Обробка йде на твоєму компʼютері: 720p працює швидко, 1080p повільніше. Довгі відео (кілька хвилин) обрізай полем «Макс. секунд».
• Загальний обсяг файлів на один ролик має бути не більше ~1 ГБ (ліміт памʼяті браузера).
• Перше натискання завантажує ffmpeg (~30 МБ). Далі браузер бере його з кешу.

Деплой

git add .
git commit -m "опис змін"
git push

Vercel оновлює сайт сам.