[00:02] это благодаря Hyperframes — инструменту, который позволяет редактировать и создавать видео с помощью кода , что дает возможность создавать потрясающие визуальные эффекты, подобные тому, что вы видите прямо сейчас. Всё, что вам нужно сделать, это поговорить со своим ИИ-агентом на простом английском языке. И вот так [00:14] ваш Кодекс или ваш агент Гермеса превратились в редактора мирового класса. Hyperframes позволяет создавать демонстрации продуктов по одному запросу, анимировать пользовательскую моушн-графику, разрабатывать персонализированные элементы фирменного стиля, такие как нижние титры, [00:27] анимация подписки и даже публикации в Twitter. Программа может самостоятельно делать скриншоты и использовать их в видеороликах. Она может создавать 3D- анимацию устройств, телефонов, ноутбуков и всего остального. А еще его можно подключить к Eleven Labs для создания озвучки [00:41] и звуковых эффектов. Да, Hyperframes — это что-то невероятное. А самое приятное, что я вам и собираюсь показать. Видите ли, узким местом в видеомонтаже был не рендеринг видео, а сам видеомонтажер, верно? Человек. И [00:54] до этого момента видеоредактором всегда был человек. Такие программы, как Adobe Premiere, Final Cut, CapCut, требуют от пользователя перетаскивания клипов на временную шкалу. Теперь же Hyperframes полностью меняет ситуацию, поскольку сама временная шкала [01:07] становится кодом. А теперь такие агенты с искусственным интеллектом, как Codex, Hermes, Claude, могут создавать, редактировать и обрабатывать видео, просто написав обычный HTML-код, в чем они и так уже чрезвычайно хороши. В этом видео я покажу вам, как [01:21] технических деталях. Вам не обязательно быть видеомонтажёром. Вам не обязательно быть разработчиком. Всё, что от вас требуется, это знание английского языка и наличие компьютера. Вот и всё Hyperframes выступить спонсором этого видео, и они согласились. Благодарим компанию [01:34] Hyperframes за спонсорскую поддержку. Лично я занимаюсь видеомонтажом уже более 9 лет, с 15 лет, и я объясню, почему это изменение, связанное с гиперфреймами и функцией HTML в canvas, полностью изменит сферу [01:47] видеомонтажа. А ещё я покажу вам, как вы, буквально после просмотра этого видео, сможете редактировать с его помощью что угодно. Таким образом, настройка Hyperframes очень проста. Я сейчас открою приложение Codex. Вы также можете использовать Cloud Code или Hermes, но я [02:00] думаю, что Codex в данном случае — лучший вариант . Если у вас нет приложения Codex, просто введите в Google запрос "приложение Codex", перейдите по первой ссылке из официальной документации OpenAI и следуйте инструкциям. Оно доступно для macOS и Windows, так что никаких [02:13] отговорок быть не может. А внутри Codex просто откройте пустую папку. Итак, слева, в разделе «Проекты», нажмите сюда, выберите «Использовать существующую папку». Я только что создал здесь новую запись. Я назову это тестированием. Бум, открываемся. И, очевидно, важным является [02:26] выбор модели. Используйте 5,5. Даже не думайте использовать какую-либо другую модель GPT. Кроме того, обязательно включите параметр скорости, поскольку тысяч строк HTML-кода может занять некоторое время. Так что, безусловно, используйте высокую скорость, и я [02:40] вы хотите получить наилучшие результаты, выбирайте сверхвысокую концентрацию. это займет больше времени, не так ли? Этот процесс может длиться 10, 15 минут, а иногда и дольше. Поэтому я бы рекомендовал ехать в среднем темпе и быстро. Кроме того, слева, [02:54] в разделе «Режим», у вас, вероятно, будут установлены права доступа по умолчанию. Измените настройку хотя бы на автоматическую проверку. Если вы готовы рисковать, выбирайте полный доступ, но я думаю, что при котором вам не нужно утверждать каждую команду. Далее, перейдите в [03:08] верхний левый угол и найдите кнопку «Плагины». Нажмите здесь и просто введите Hyperframes. Вот и всё. Как видите, это официальный плагин. Нажмите Это включает в себя целый ряд навыков, в том числе преобразование HTML в Canvas. Мы [03:21] . Просто нажмите «Установить». И вот так, плагин установлен. На это ушло буквально полсекунды или около того. Прежде чем мы начнём снимать первое видео, позвольте мне рассказать вам о новом обновлении HTML, потому что оно действительно [03:33] вывело Hyperframes на новый уровень. Раньше было неплохо, а теперь это просто революция. Итак, эта функция называется HTML в Canvas, и теперь она выпущены буквально вчера. Итак, если вы хотите получать больше таких передовых обновлений с [03:48] невероятно высокой скоростью, обязательно подпишитесь. Это совершенно бесплатно и точнее, большинство зрителей этого канала, не подписаны на него . Пожалуйста, прокрутите страницу вниз под видео, проверьте, подписаны ли вы на канал, а если [04:02] нет, нажмите кнопку подписки — это меня очень порадует . А теперь взгляните на это, потому что всё это создано с помощью HyperFrames. Это же безумие! Посмотрите на это. Стекло, жидкое стекло, разные шрифты, [04:15] плавная анимация, вращение 3D-объектов с помощью свайпа. Ещё пару месяцев назад за создание подобных вещей профессиональным дизайнерам и аниматорам пришлось бы заплатить тысячи долларов . Теперь осталось всего [04:27] пара подсказок. Это просто невероятно. Посмотрите на эти эффекты. Что невероятно. Посмотрите на эти эффекты. Что , чувак? с ИИ, если вы не запускаете своего личного ИИ-агента, не разрабатываете собственное [04:41] программное обеспечение, не создаёте анимацию, дизайн и видео, чем вы тогда занимаетесь? Мы живем в самое лучшее время из всех возможных. Вы можете сделать буквально всё что угодно . Вы можете построить буквально всё что угодно . Всё, что вам нужно сделать, это попробовать. [04:54] Для этого необходимо включить флаг Chrome, который называется официальной документации HyperFrames по HTML в Canvas , буквально найдете там описание процесса настройки. Просто скопируйте этот текст в [05:08] Chrome или Brave, откройте новую вкладку, вставьте его , и у вас должна быть включена эта функция. Как видите, по умолчанию эта функция отключена. Итак, давайте включим эту функцию. браузер. Теперь, после этого, давайте вернёмся в Codex и создадим новую [05:23] тему, или, другими словами, новый чат, в папке HyperFrames, которую мы создали ранее. Я вставлю туда довольно подробный запрос, который, собственно, и позволит нам понять HyperFrames по анимации, верно? Подумайте, насколько это метафорично. Мы [05:36] используем HyperFrames через Codex, разумеется, с подсказками, изложенными простым языком, чтобы используем ИИ для создания визуализации, анимации и для понимания гиперкадров. Итак, позвольте мне прочитать [05:49] начало. Я сказал: «Создайте анимационную графику, которая наглядно объяснит, почему гиперкадры традиционных инструментов видеомонтажа с использованием ИИ». А затем это дает более подробную информацию по данному вопросу. А теперь, как видите, он использует этот навык. Программа перечисляла файлы и, [06:02] мы находимся в пустой папке». Если вы занимаетесь LS, то здесь вам ничего не найдётся. Так что оно это выяснит . Теперь для установки гиперфреймов в я дам вам полезный совет: отправьте это сообщение [06:15] . При создании новых композиций не следует удалять старые . Сохраните это как воспоминание в файл agents.md. Это очень раздражает. старую композицию, но, эй, вы же хотите посмотреть предыдущие видео и анимации, которые [06:29] вы создали. Таким образом, программа может просто создать новую композицию, вместо того чтобы переписывать ту всем вам прислать это сообщение. Хорошо, написано, что строительные леса файлы. Итак, если мы теперь выполним LS, то [06:42] Позже в видео я покажу вам, как вы можете буквально прикрепить к нему свой веб-сайт, и он создаст анимированную демонстрацию, например, презентацию продукта, которую вы могли бы использовать для инвесторов или в маркетинговых целях. Это действительно невероятно, на что [06:55] завершила свою работу. Оно функционировало можно увидеть, что оно работало уже 10 минут, хотя я установил среднюю скорость и даже высокую скорость, верно? Поэтому будьте готовы к тому, что это займет [07:08] этого инструмента просто невероятны, понимаете? Итак, сначала посмотрим демоверсию . Предварительный просмотр видео, давайте посмотрим. Посмотрите на эту анимацию, правда? Сколько времени это займет, если сделать вручную? Пару часов? [07:21] кстати, это объяснение того, что такое гиперфреймы, верно? Итак, вы можете взглянуть на это и подумать: «Хорошо, это можно использовать для создания учебных материалов, курсов, [07:34] уроков, видеороликов для YouTube, презентаций, слайд-шоу». То есть, Конечно, некоторые элементы могут быть немного смещены, но с помощью очень легко это исправить. Посмотрите ещё раз. Это безумие. [07:55] и специалист по визуальным эффектам, можете это сделать. Вы можете это сделать. И это лишь малая часть того, что вас ждет в этом видео. На самом деле, если вы переключитесь на открылся localhost:3000 . Итак, Codex открыл это для меня. Я это [08:08] не открывал. А это хронология HyperFrames. . В левой части экрана мы видим ресурсы, композиции и код Позвольте мне немного увеличить изображение, чтобы вы могли лучше рассмотреть. [08:22] Внизу представлены различные фрагменты, составляющие временную шкалу. Вы можете изменить скорость в 2 раза. Мы можем сделать так, чтобы это зациклилось. Вы можете отображать либо кадры, сделать так, чтобы это зациклилось. Вы можете отображать либо кадры, либо секунды и минуты. И, эмм, вы можете [08:35] файл. Итак, допустим, мы хотим внести изменения, верно? Это так же давайте вернемся к началу и скажем: «Хорошо, но измените дизайн, чтобы он был выполнен в стиле красного градиента. Ничего больше менять не нужно». А теперь это [08:49] изменит код. Необязательно всё переписывать. Это просто меняет те CSS-коде, где определяется цветовая схема . И это отразится самом деле, пока это работает, мы можем открыть боковую панель в Codex и создать еще одну [09:03] ветку обсуждения. А поскольку в Codex встроен Git Worksheets, мы можем запустить вторую командную строку параллельно, пока эта еще обрабатывается, и они не будут мешать друг другу. Итак, второй вопрос: «Подписаться на 3D-жидкое стекло [09:16] до этого момента было возможно нечто гораздо более продвинутое, не так ли? Создайте анимацию подписки «жидкое стекло» рабочей области HyperFace. Создайте его как единый автономный HTML-файл и откройте его с помощью панели предварительного просмотра HTML в HyperFrames. Итак, это задание, опять же, [09:30] , но всё ещё довольно длинное . Потому что, если вы хотите чего-то конкретного, вам нужно это хорошо описать. Но опять же, чистый английский, простой английский, никакой анимации, типа я ничего не понимаю в визуальных эффектах или анимации, ребята. [09:42] Однако теперь у меня есть возможность их создать. И это потому, что я умею настраивать Codex, я умею настраивать плагин Hyperframes, я знаю, как использовать AI, и я знаю, как создавать изменил цвет. Мы можем вернуться к исходному состоянию . И посмотрите на этот прекрасный красный [09:55] это было намного быстрее. Это длилось всего две с половиной минуты. Ведь не нужно было правда? Да, ребята, я очень хочу, чтобы вы это настроили. Не стоит просто быть Это видео не принесет вам никакой пользы, если вы его не настроите. Итак, приступайте к [10:08] настройке. Это очень просто. Вы можете использовать Codex со встроенным плагином. плагин и начинайте что-нибудь создавать. Потому что именно так выглядит будущее создания и редактирования видео. Итак, [10:21] слева у нас вторая композиция — кнопка подписки. не ложь, понятно, ребята? По статистике, большинство из вас [10:34] вас от случайных каналов. Итак, прокрутите страницу вниз и посмотрите это. Но смогли это реализовать с помощью Hyperframes и Codex. А допустим, вы более объемным, что угодно. Я бы посоветовал [10:48] обновить эту анимацию, чтобы она была более наглядной, быстрой и больше походила на 3D-эффект. Просто сделайте это безумнее, как это сделал бы профессиональный дизайнер визуальных эффектов. И Кодекс именно это и сделает [11:00] . Кстати, полезный совет при использовании Codex и Hyperframes: обязательно почаще используйте {slash} compact, хорошо? Это встроенная команда в Codex, которая сжимает историю чата, чтобы сэкономить токены, поскольку это может [11:14] очень быстро исчерпать ваши лимиты. Разумеется, Кодекс имеет гораздо более щедрые ограничения, чем Кодекс Клода. На самом деле, разница огромна . Я бы сказал, что план за 100 долларов в Codex — это лучшие 100 долларов, которые вы можете потратить на ИИ. [11:27] . Но, тем не менее, гиперфреймы могут может его заполнить. Поэтому просто почаще используйте {slash} compact. Чаще, чем это обычно бывает во время обычных фотосессий Kodak. Все в порядке. Итак, мы [11:41] получаем обновления, которые сделают эту анимацию еще безумнее. И, кстати, я сейчас с реальными активами. Я собираюсь загрузить свой логотип, чтобы посмотреть, как это будет работать. исследовать эту тему. На самом деле, Hyperframes выпустили Community [11:57] сообщество разработало с помощью Hyperframes, чтобы просто вдохновиться и понять, что возможно. Например, здесь мы можем посмотреть на этот набор визуальных эффектов от здесь мы можем посмотреть на этот набор визуальных эффектов от H&M, и это даст вам код. [12:09] И вы можете экспериментировать с этим, и вы можете развивать это дальше. А также создавайте собственные анимации, видеоролики, всё, что захотите. Давайте рассмотрим этот всё, что захотите. Давайте рассмотрим этот пример из Notion. [12:24] вручную. Очевидно, это возможно, верно? Есть люди, которые могут это сделать и которые лучше , но речь не идёт о замене лучших 0,01% аниматоров. Речь идёт о том, чтобы [12:37] дать каждому возможность стать аниматором. Как и в прошлом году или два назад, проект Code to the Cloud предоставил каждому возможность создавать создавать собственное программное обеспечение. Благодаря гиперкадрам [12:51] и анимацию. И я думаю, что большинство людей на самом деле не осознают всей серьезности Последствия этого заявления. Все в порядке . Давайте посмотрим. Компания Kodak завершила внесение изменений. Это заняло 3 минуты. Итак, если мы... мы уже можем это увидеть. [13:05] Хорошо. Итак, вернёмся к рабочему пространству Hyperframes. Давайте сыграем. Да, это гораздо, гораздо более анимировано, понимаете. мы же пытаемся довести дело до предела. Хорошо. Теперь давайте я добавлю свой логотип, и [13:21] свой логотип и отправить его по этому запросу. Добавить логотип к существующей анимации финального снимка жидкости Я импортирую свой логотип. Я разместил его что он должен делать и как я хочу, чтобы он выглядел. А пока это работает, [13:36] давайте создадим ещё один поток и создадим ещё одну композицию Hyperframes. В этом ролике используется 3D-анимация, созданная на iPhone, и я собираюсь построить эту 3D-анимацию на основе контента моего канала. Поэтому сначала нужно прочитать о моём [13:49] канале, понять, о чём он , как он выглядит, какие там видео, а затем создать 3D- анимацию для iPhone. Ещё одна безумная идея, которую я собираюсь обсудить в новом чате, — это превратить любой веб-сайт в этикетку для товара. [14:02] Я использовал vector.ai и преобразовал его в реальную этикетку для товара. Буквально вот так, всего одно предложение, и вы будете удивлены, насколько хорош будет результат. [14:14] Теперь логотип должен быть готов . Это произошло довольно быстро, менее чем за 2 Давайте посмотрим, как это выглядит с логотипом, хорошо? Хороший. Это гораздо более индивидуальный подход. Вы можете увидеть анимацию свечения. [14:26] Очень хорошо. Анимация свечения при езде на велосипеде. А ещё 6 или 12 месяцев и даже не знают о существовании этого товара. создателям контента, которые не работают в сфере ИИ и не знают, как этим пользоваться. [14:42] многочисленные способы заработать деньги. Нужно лишь немного проявить креативность и вы посмотрите это видео до конца , вы поймете, как этим пользоваться. Хорошо, но вот мой любимый вариант использования — создание [14:56] визуализатора аудиоволн. Но вы можете просто обработать любой MP3-файл, и он покажет вам идеально анимированную форму звуковой волны. На . Это всего лишь [15:11] один запрос. Позвольте мне показать вам. Хорошо, я прикрепил этот 10-секундный MP3-файл, который, [музыка] Да, очень похоже на волнообразный ритм, который прекрасно подчеркнет форму волны. Все в порядке. Итак, теперь мы [15:25] Просто построй это, понимаешь, просто создай это. Так что, как только вы это построите, вы сможете использовать это в будущих видео. Вам не нужно ждать по 10 минут каждый раз. В следующий раз, когда нужно будет это изменить, на это потребуется минута, а [15:38] чтобы изменить это на что-то другое, потребуется две минуты. И здесь используется аналогичная идея, как в тот, кто создаст лучшую библиотеку с лучшими ресурсами. Знаете, тот, у кого самый лучший вкус и чутье, кто знает, [15:52] как создать великолепную гиперкадровую анимацию или какая гиперкадровая анимация лучшая, тот и победит. Потому что, как вы понимаете, стоимость создания сотен таких устройств очень низка. Но настоящее преимущество, настоящая сила [16:05] в том, чтобы знать, что хорошо, знать, какой контент сработает, знать, какие из Вот почему таким людям, как Рик Рубин, платят огромные деньги, хотя он не у нас есть iPhone. Как видите, Codex просто открывает это. Я [16:20] ничего не делал, ребята. Я даже не переключался между окнами с помощью Alt+Tab. Кодекс только что открыл его. Оно просто открыло мой браузер. Это как: "Эй, просто посмотрите, ладно? Эти агенты Эм, хорошо, это, собственно, Vectal. [16:33] О, оба дела завершены. Итак, я ввел учетную запись Vectal.ai, и программа проанализировала нашу целевую страницу и создала эту анимацию. Это Я знаю, сколько времени мне потребуется, чтобы это сделать. [16:47] И я знаю, насколько это ценят основатели стартапов. И это просто невероятно. Один-единственный запрос. Да это просто нечто! [17:00] . Посмотрите-ка. Посмотрите-ка. Если помните, это была буквально одна строка, одно предложение. И результат получился великолепным. Я имею в виду И результат получился великолепным. Я имею в виду , я даже не знаю. Ладно, [17:15] тень, что угодно, что угодно. Но опять же, это всего лишь один шанс. И это действительно очень, очень хорошо. Давайте посмотрим на 3D-анимацию, созданную на iPhone. Я имею в Давайте посмотрим на 3D-анимацию, созданную на iPhone. Я имею в виду, что это может быть ещё безумнее. [17:28] мы видим, что эти коробки немного смещены относительно друг друга. скриншот. Или вы можете просто воспользоваться приложением Play Right и сделать скриншот. Это и сказать, например, исправьте эти маленькие квадратики, которые немного [17:43] странно выглядят по краям iPhone, чтобы всё выглядело хорошо. Бум. И всё само собой наладится. Как вы можете видеть в приложении Codex, вы можете параллельно, переключаясь между ними без проблем. Давайте посмотрим, как там дела у этого экземпляра. [17:56] Итак, почти 400 строк кода. Да, это всё ещё продолжается. Почему это до сих пор продолжается? Я думал, что на этом всё закончилось. Тестирование еще продолжается. дорабатывается. Хорошо. Ладно, довольно забавно, что этого агента заблокировали на YouTube. [18:09] принять условия использования или что-то в этом роде. закончилось. 7 минут 46 секунд. Давайте посмотрим. О, это прямо как в Spotify. Хорошо. Но цвета подобраны идеально. Музыка не [18:24] играет. Хм. Давайте дадим этому отзыв. Форма волны не меняется. отзыв. Форма волны не меняется. Визуализация звуковой волны в формате MP3. Ладно, подождите, оно еще готовится. Не понимаю, почему он всё ещё использует [18:39] понимаю, почему он всё ещё использует localhost 3025. Чёрт. Он постоянно создает новые локальные серверы. Давайте проведём уборку. Перечислите все 3000 серверов, работающих на localhost. [18:54] iPhone One был улучшен. Посмотрим, исправило ли это эти края. Прежде чем продолжить", это раздражает, но что поделать Агента блокируют. Ммм. Ладно, всего две строчки, не [19:10] так уж и много. ну, ровной. На самом деле, движение не зависит от [19:25] MP3-файла. Приступайте к работе и исправьте это. Это продолжалось очень долго, 40 минут. Оно оставалось работоспособным даже спустя примерно 5 минут. Я Дайте мне посмотреть. Должно быть, он значительно улучшил свои навыки . [19:38] наложения. Нет, я думаю, что да. Приближение фона выглядит неплохо. В целом, всё практически одинаково. так много думает. Это должна быть именно эта среда. Как и в случае с Extra [19:50] High, вы бы поняли, сколько усилий вложил бы Кодекс. Давайте закроем этот вопрос . Вам нужно остаться здесь. Возможно, это не привело к созданию новой Также обязательно создайте для этого новую композицию гиперкадров. [20:03] Хорошо, теперь мы видим здесь форму волны как новую композицию. Посмотрим, сработает ли это. Это работает, но нам нужно, чтобы рендеринг осуществлялся и с видео, и со звуком . Итак, мне нужно видео в формате MP4, в [20:17] . Итак, мне нужно видео в формате MP4, в котором это будет включено. Кроме того, вероятно, оно слишком рано достигает вершины. Это могло бы быть более управляемым процессом. Так что, я могу сделать скриншот. И я могу указать это в качестве отзыва. В Codex [20:31] можно предварительно отправлять сообщения. Таким образом, я могу сказать, что форма волны достигает вершины слишком Думаю, вам стоит сделать его [20:43] оригинальным, а не таким, который так быстро и легко попадает в топ . Я отправил его, и как только завершится предыдущий запрос, Таким образом, если у вас появляется идея во время разработки Codex, вам не нужно ждать, чтобы [20:58] Вы можете отправить его прямо сейчас. Если это не связано с данной функцией, просто создайте если это связано с чем-то, что уже реализовано после завершения этого процесса, вы можете просто отправить запрос заранее. Удивительная функция [21:12] времени, если вы начнете этим пользоваться. Найдите композицию для визуализатора волновой формы и выполните рендеринг в формате MP4, используя возможности HyperFrames из плагина. Хорошо, значит, [21:24] . У нас должны быть последние новости. Новая композиция HyperFace. Давайте посмотрим, как это будет выглядеть. Выглядит намного лучше. Здесь нет наложения звука. [21:39] Я всё ещё хочу увидеть финальный результат. Хорошо, у нас есть финальный рендер. Давайте сыграем в это. Отлично . Это здорово. И, очевидно, я уже отправил запрос заранее, чтобы [21:52] сделать его более динамичным, чтобы он не так часто оказывался в топе. вы должны понимать, что это безумие. Нужно признать, что это потрясающе. [22:04] этому, просто безграничны. И тот, кто обладает лучшим воображением и трудолюбием, добьётся успеха эти люди в будущем будут творить полнейший хаос. Поэтому, повторюсь, не оставайтесь просто наблюдателем. Вы досмотрели до конца, [22:18] так что идите и воплотите это в жизнь. Посмотрите это видео ещё раз и настройте HyperFrames HyperFrames за спонсорство этого видео. Это невероятный инструмент, и особенно с функцией HTML в Canvas он полностью произведёт революцию в [22:31] going to completely revolutionize video editing and animation as we know it.