Всё ещё используете Gemini 3 для создания презентаций PowerPoint? Это так устарело! Ознакомьтесь с самыми крутыми интерактивными функциями на основе жестов (с подсказками).

С момента выхода Gemini 3 я постепенно начал задаваться вопросом: почему у нас постоянно ИИ пишет сайты и презентации? Gemini уже в третьем поколении, неужели он не может делать что-то поинтереснее?

Я ищу что-то в научно-фантастическом стиле, с крутыми эффектами и высоким уровнем сложности, но при этом доступное даже новичкам. Например:

Или вот так:

Gemini: Взаимодействие жестами? Без проблем, оно включено.

Прежде чем начать, подготовьте своего Gemini 3. Вот несколько моментов, на которые следует обратить внимание.

В настоящее время есть три способа начать играть: режим Canvas клиента Gemini, студия Google AI-Playground и студия Google AI-Build.

Среди них наименее рекомендуемым является клиент. Я лично протестировал его и обнаружил, что он не может эффективно поднять камеру. Кроме того, всё нижеперечисленное относится к взаимодействию жестами, и, держа телефон в руке, вы, естественно, не можете управлять им руками.

Из последних двух Build напрямую создаёт приложение, которым можно поделиться с друзьями, но его недостаток — ограниченное количество токенов. Playground же генерирует набор кода, который необходимо загрузить локально перед запуском. Возможно, он не запустится на другом компьютере, но его преимущество в том, что лимита на количество токенов практически нет (дневной лимит составляет один миллион токенов), что обеспечивает достаточный запас.

Учитывая, что интерактивные проекты потребляют много токенов, Playground подходит больше. Build также можно использовать для некоторых небольших проектов, в зависимости от индивидуальных обстоятельств.

Джарвис

Панель управления Jarvis HUD — настоящий хит продаж, набравший более 200 000 просмотров в Twitter. Управление жестами — это как Железный Человек, управляющий Джарвисом, это так круто!

Ниже приведен пример приглашения:

Создайте веб-приложение с использованием ванильного JavaScript, HTML, CSS, современного ThreeJS и MediaPipe. Это должно быть научно-фантастическое приложение с Тони Старком, Железным Человеком и Джарвисом, ориентированное на имитацию HUD-дисплея дополненной реальности. Показан полноэкранный ввод с веб-камеры. Добавьте HUD-дисплей, отслеживающий голову пользователя (смещение вправо) с обновляемыми в режиме реального времени показателями. В левой центральной части экрана должен отображаться минималистичный трёхмерный глобус, который можно вращать и изменять его размер с помощью жестов пользователя.

В режиме сборки я лично протестировал и убедился, что это можно сделать за один раз. Gemini автоматически назначит задачи, напишет код и вызовет различные интерфейсы. После того, как индикатор выполнения будет готов, вы можете открыть его, нажав «Предпросмотр» (Preview), не забудьте предоставить разрешение на камеру.

В Gemini 3 чётко проработаны все эффекты: левая рука приближает и отдаляет изображение, правая вращается, а точки касания появляются, когда обе руки находятся в зоне действия камеры. Все эти функции отсутствуют в подсказке, но камера «придумала» её сама. В сочетании с большим экраном или проектором это действительно создаёт атмосферу Джарвиса.

Как модель Земли слева, так и содержимое панели справа можно настраивать. Изначально в Gemini 3 правая панель отображала температуру тела человека (очевидно, выдуманная функция), но позже я изменил её на «отображение диаметра модели Земли слева в реальном времени». В любом случае, с помощью кодирования Vibe вы можете изменять это как угодно.

Контроль капель дождя

Если у нас уже есть Джарвис, то, вероятно, нам стоит купить и «Иллюзию обмана».

Раньше в фильмах были только спецэффекты, но теперь, с выходом «Джемини-3», есть кое-что другое. См. следующую подсказку для справки:

Создайте веб-приложение с использованием HTML, JavaScript и моделей машинного обучения. Используйте функцию распознавания жестов камеры для управления эффектами паузы, остановки и замедления анимации капель дождя. Анимация должна оставаться вертикальной, в стиле фильма «Иллюзия обмана».

Первый черновик этого предложения был написан полностью на основе моих мыслей после просмотра фильма, и каждую деталь можно скорректировать с помощью Vibe Coding. На основе первого черновика Gemini добавит собственные элементы; например, этот конкретный жест был его собственной идеей.

Несмотря на то, что он создан с использованием искусственного интеллекта, он очень чувствителен к распознаванию жестов, включая возможность быстрого переключения между различными жестами.

3D-частицы

Управление каплями дождя раньше было очень сложной техникой создания спецэффектов. Сразу после выхода фильма «Иллюзия обмана 2» компания по производству напитков выпустила рекламу, в которой управление каплями дождя использовалось для создания эффекта статических частиц.

Что касается концепции «управления дождём», то Gemini, безусловно, может достичь описанного выше эффекта, требующего сочетания съёмки вживую и управления скоростью. Ближайший аналог — 3D-частицы. Поэтому я создал ещё один интерактивный пример с эффектом 3D-частиц.

Очень круто! Смотрите пример подсказки ниже:

Создайте интерактивную 3D-систему частиц в реальном времени с помощью Three.js. Масштабирование и рассеивание роя частиц контролируется с помощью камеры, определяющей раскрытие и сжатие рук. Панель пользовательского интерфейса позволяет пользователям выбирать модели, такие как сердца, цветы, Сатурн, статуи Будды и фейерверки. Поддерживается палитра цветов для настройки цветов частиц, а частицы должны реагировать на изменения жестов в реальном времени. Интерфейс понятный и современный, включая полноэкранные кнопки управления.

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

【Советы】

Что касается таких деталей, как цвет, макет и дизайн пользовательского интерфейса, то описывать их корректировку с помощью Vibe-кодирования каждый раз было бы слишком сложно. Более того, каждый сеанс Vibe-кодирования подразумевает случайный выбор, поэтому очень полезным приёмом является добавление пользовательских модулей, особенно для цветов и размеров. Это позволяет полностью независимо настраивать цветовые схемы по своему вкусу.

Навыки в Гомоку

От капель дождя к частицам, от частиц к движению, от движения к — гомоку! Наконец-то я могу создать игру-гомоку, основанную на навыках!

Если задуматься, разве Gomoku — это не интерактивная игра с управлением жестами и возможностью летать? Передвигайте фигуры с помощью летающего песка и камней, перемещайте доску силой, способной срывать горы, — всё это включено!

Ниже приведен пример приглашения:

Создайте интерактивную игру с управлением жестами под названием «Skill Gomoku»: Главная страница представляет собой доску для игры в гомоку с уже расставленными по умолчанию фигурами. Когда пользователь делает движение «замах одной рукой», фигуры вылетают с доски в направлении замаха. Когда пользователь делает движение «замах двумя руками», доска движется в направлении замаха.

Gemini самостоятельно обеспечивает связь между физической логикой и жестами. В моей подсказке нужно лишь описать эффект, при этом мне не нужно беспокоиться о конкретных расчётах вектора скорости или порогах обнаружения.

Он даже переименовал «навык»: Универсальная тяга.

Это называется летающий песок и камни, Учитель Близнецы!

Игра в ритм-музыку

Судя по вышеперечисленным попыткам, достоинства Gemini неоспоримы. А если вспомнить эти навыки: распознавание жестов, изменение цвета и всё это вместе — разве это не просто мини-игра?

Поэтому я попробовал более сложный проект: ритм-игры.

Я играл во множество ритм-игр, но, будучи полным новичком без опыта, мне пришлось изрядно поразмыслить, как описать эффект, которого я хотел добиться в Gemini. Первый черновик задания выглядит следующим образом:

Создайте музыкальную игру с управлением жестами и четырьмя звуковыми дорожками на главном экране. После загрузки музыкального файла на дорожках в такт ритму появляются световые точки. Игроку необходимо точно нажимать на эти точки жестами. Фон выполнен в стиле ретро-синтвейв, а цвета фона, дорожек и световых точек можно настраивать.

Вот, в общем-то, прототип, который мне пришёл в голову. Основываясь на первой версии подсказки, Gemini выбрал Pygame в качестве игрового движка, продолжил использовать MediaPipe для отслеживания жестов и добавил Librosa для анализа музыки.

Стиль ретро-синт-вейв был выбран из-за его четкой визуальной идентичности, которую узнает и Gemini: закаты, неоновые градиенты, сетки и дороги, ведущие к горизонту, что делает его идеальным для ритм-игр.

Создание игры, действительно, гораздо сложнее, чем некоторые из небольших взаимодействий, над которыми мы работали раньше… Во-первых, она могла распознавать только одну руку, поэтому нам пришлось это настроить; затем она не могла загружать музыку, поэтому нам пришлось это тоже настроить; только в третьей версии она начала выглядеть более-менее прилично.

Однако во время тестирования я обнаружил довольно неприятную проблему: линия обнаружения располагалась слишком близко к краю экрана, а поскольку диапазон распознавания камеры ограничен, моя рука не распознавалась, даже если я ее немного опускал.

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

Однако возникла другая проблема: расстояние между выходом светового пятна и линией оценки было слишком коротким, что оставляло мне очень мало времени для реакции . Не говоря уже о небольшой задержке в срабатывании, которая значительно снижала общую играбельность. Однако даже если я слишком сильно уменьшал расстояние, моя рука всё равно выпадала из зоны распознавания.

На мгновение я действительно не смог придумать решение этой проблемы, поэтому я пошел напрямую к Джемини, чтобы спросить, как ее решить.

Он прямо указывает на суть проблемы и предлагает подход, основанный на «визуальном обмане», для оптимизации восприятия. Также добавлен настраиваемый ползунок для регулировки смещения, чтобы независимо от положения руки ползунок можно было скорректировать в соответствии с линией оценки.

гений.

Позже я заметил, что вид световых пятен, похоже, не совсем соответствовал ритму. Чтобы решить эту проблему, Gemini добавил ползунок для регулировки задержки. Хотя я всё ещё не считаю, что он хорошо анализирует ритмические паттерны, конструкция ползунка довольно эффективна, особенно для решения проблемы задержки, вызванной использованием Bluetooth-наушников.

[Несколько советов]

По сути, пока есть подсказка, будут ситуации с вытягиванием карт, но вытягивание карт не обязательно плохо. При столкновении с серьёзными ошибками, такими как невозможность доступа к камере или загрузки файлов, многократное внесение изменений в код Vibe не поможет; лучше просто «создать новый проект». Основная функциональность отражена в коде, а компоненты взаимосвязаны. Повторный запуск проекта и предоставление ИИ возможности завершить весь процесс гораздо эффективнее, чем кропотливое кодирование в Vibe. Конечно, понимание кода будет ещё эффективнее, позволяя находить целевые решения. Однако для новичков часто лучшим вариантом будет простое повторное вытягивание карт.

До создания интерактивных приложений с поддержкой искусственного интеллекта, основанных на жестах, вам необходимо было немного изучить Touch Designer и, в идеале, также разобраться в основах развертывания. Это требует изучения обучающих программ и многократного изучения, и вы можете легко сдаться в процессе.

Простота использования ИИ очевидна. Что ещё важнее, взаимодействие с помощью жестов, изначально гораздо более сложное, чем создание изображений или презентаций PowerPoint, всё ещё позволяет новичкам без опыта программирования быстро оценить всю прелесть разработки приложений.

Единственная оставшаяся проблема — эстетическое суждение. Эти примеры показывают, что у Gemini есть некоторое эстетическое чувство, но не слишком сильное; дизайн, цветовая гамма и так далее довольно неудовлетворительны. Он может освоить «сложные» навыки программирования; остаётся проблема эстетического суждения.

#Добро пожаловать на официальный аккаунт iFanr в WeChat: iFanr (WeChat ID: ifanr), где вы сможете как можно скорее получить еще больше интересного контента.

ifanr | Исходная ссылка · Просмотреть комментарии · Sina Weibo