[SPH] Gemini пишет приложения по текстовому описанию! NoCode.

Здравствуйте все!!!
Вам нужно несложное, но полезное приложение для компьютера или
смартфона?
Просто опишите своё приложение словами на естественном языке и Gemini напишет его для вас.

Как это работает.
Решаем вопрос с географическими ограничениями Google и заходим на:
https://gemini.google.com

Открывается чат с Gemini.

После редактора для ввода текста и кнопки отправить вы найдёте ещё
несколько опций, среди которых будет кнопка "Canvas", что на русском
означает холст.
Включаем эту опцию, возвращаемся к редактору, просим создать
приложение и описываем его функционал.

Я заглянул для теста, мне вообще было лень что-то придумывать и я
написал следующее:

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

После этого отправляем сообщение. Страница разделяется на две части,
слева будет диалог с Gemini, а справа код.

Я отправил сообщение и в диалоге получил следующее:

"Привет, Алексей! Я придумала для тебя простую игру, основанную на звуках, которая называется "Звуковая Память". Цель игры -- запомнить последовательность звуков и повторить её.

Я создала приложение, которое будет играть последовательность звуков. Тебе нужно будет нажимать на кнопки в той же последовательности, в которой играла программа. Если ты повторишь правильно, игра перейдёт на следующий уровень, и последовательность станет длиннее. Если ошибёшься, игра закончится.

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

Как играть:

Нажмите "Начать игру": Я скажу "Игра начинается!" и затем "Уровень 1. Слушайте внимательно."

Слушайте последовательность: Игра воспроизведёт последовательность звуков. Каждый звук будет соответствовать одной из четырёх кнопок.

Повторите последовательность: После того как я скажу "Теперь ваша очередь", нажмите на кнопки в той же последовательности, в которой их играла программа.

Продолжайте: Если вы повторите правильно, я скажу "Правильно! Переход на следующий уровень", и игра добавит новый звук к последовательности.

Конец игры: Если вы ошибётесь, я скажу "Неправильно! Игра окончена. Вы достигли уровня X. Нажмите "Начать игру", чтобы попробовать снова."

Надеюсь, тебе понравится! Если возникнут вопросы или захочешь что-то изменить, дай мне знать.

Конец цитаты.

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

1. Звуковая память.

На экране 4 кнопки с надписями: "Звук 1", "Звук 2", "Звук 3" и "Звук
4". Их можно понажимать и послушать, какой звук проигрывается при
нажатии каждой из кнопок.
Когда запомнили звуки, нажимаем кнопку "Начать игру" и слушаем.
Прозвучит звук и игра предложит угадать, какой номер звука прозвучал,
для этого нужно нажать кнопку с соответствующим звуком. Если нажали
правильно, переходим на второй уровень.
На этом уровне прозвучат уже 2 звука, один за другим последовательно и
будет предложено нажать кнопки с сответствующими звуками в той же
последовательности.
Если ответили правильно, переходим на третий уровень и прозвучат уже 3
звука и так далее. Если ошиблись, проигрыш, игра окончена. Ограничений
по времени на выполнение задания нет.

Игра снабжена подробными пояснениями, всё доступно для программ
экранного доступа, для слабовидящих, кнопки цветные, большие и
контрастные, программа ещё и самоозвучивается с помощью синтезатора
речи по умолчанию, как в Windows, так и на Android-смартфоне.
Протестировали, переключаемся с предпросмотра на код, выделяем и
копируем весь код, создаём текстовый файл на компьютере, открываем,
вставляем код, сохраняемся и переименовываем файл в "Звуковая
память.html". Да-да, это всего-лишь веб-приложение.
Забрать готовую игру "Звуковая память" можно с Яндекс-диска по ссылке:
https://disk.yandex.ru/d/idVE48X5K3SRew

Стоит сказать, что не всё получилось с первого раза.

Я.

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

Gemini.

Привет, Алексей! Я поняла, ты хочешь иметь возможность послушать звуки до начала игры, чтобы познакомиться с ними. Я внесла изменения в код, чтобы кнопки со звуками были активны сразу, как только ты откроешь приложение. Теперь ты сможешь нажимать на них и слушать звуки, а когда будешь готов, нажать "Начать игру".

Вот обновленный код:

Основные изменения:

Кнопки активны при загрузке: Теперь при загрузке страницы кнопки со звуками сразу активны, и ты можешь нажимать на них.

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

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

Надеюсь, это сделает игру более удобной для тебя! Попробуй, и если что-то не так, дай мне знать.

Я.

Скопировал код в HTML файл на компьютере. Интерфейс открывается, но звуков нет и игра не работает.

Gemini.

Привет, Алексей! Я поняла, в чем дело. Это очень распространенная ситуация с веб-аудио в современных браузерах. Браузеры блокируют автоматическое воспроизведение звуков до тех пор, пока пользователь не сделает какое-либо действие на странице (например, не нажмет кнопку). Это сделано для того, чтобы сайты не могли неожиданно воспроизводить звук.

В предыдущей версии код пытался запустить аудиоконтекст при загрузке страницы, но браузер это блокировал. Я внесла изменения, чтобы аудиоконтекст запускался только тогда, когда ты нажимаешь на любую кнопку (будь то кнопка звука для прослушивания или кнопка "Начать игру").

Вот обновленный код. Пожалуйста, скопируй его и замени содержимое твоего HTML-файла, а затем попробуй снова.

Что я изменила:

Запуск аудиоконтекста по клику: Теперь await Tone.start() вызывается внутри функций startGame() и handleButtonClick() (в части, отвечающей за предварительное прослушивание). Это гарантирует, что аудиоконтекст будет запущен только после того, как ты нажмешь на кнопку, что соответствует требованиям безопасности браузеров.

Проверка состояния аудиоконтекста: Добавлена проверка if (Tone.context.state !== 'running'), чтобы Tone.start() не вызывался повторно, если аудио уже активно.

Озвучивание после запуска аудио: Убедилась, что функция speak() для сообщений о генерации описания вызывается только после того, как аудиоконтекст гарантированно запущен.

Теперь игра должна работать со звуками и голосовыми подсказками, когда ты откроешь её локально. Дай мне знать, если что-то пойдет не так!

Конец цитаты.

2. Клавиатурный тренажёр для незрячих.
Самоозвучивающийся интерактивный тренажёр, который помогает
начинающим пользователям изучать русскую раскладку клавиатуры.
Объясняет, даёт задания и контролирует правильность их выполнения.
Создан Gemini на основе соответствующей части текстовой версии
Пермского учебника.
Скачивайте с Яндекс-диска по ссылке:
https://disk.yandex.ru/d/Ot0V8HhJzqv9gA

Выберите в системе в качестве голоса по умолчанию русскоязычный
синтезатор речи.
Я тестировал под Windows, но должно работать в браузере под любой
популярной
системой. Если это будет мобильная ОС, подключите к устройству
физическую клавиатуру.
Откройте скаченный HTML файл в браузере.
Появится меню. Тренажёр самоозвучивается, поэтому, временно отключите
программу чтения с экрана и используйте физическую клавиатуру.
Перемещайтесь по пунктам главного меню вертикальными стрелками,
слушайте и выбирайте нужную часть занятия, все части озаглавлены.
Это занятие номер 4, "Русская раскладка клавиатуры", только
интерактивное. (улыбка)
Можно начать сначала или выбрать какую-то из частей.
Нажмите Enter для запуска, слушайте лекцию, инструкцию и выполняйте
задание.
Ввод озвучивается по символам.
При неправильном вводе очередного символа вы услышите звуковой сигнал
и сообщение. например: "Ошибка. Ожидалась А, Нажата О". Ничего стирать
не надо, вводите нужный символ. При повторном неправильном вводе будет
такая же ошибка, при правильном вводе вы услышите введённый символ.
Когда комбинация символов, слово, фраза или предложение введено, вы
услышите фразу "Правильно! Вы молодец!".
Ко всем упражнениям озвучиваются подробные инструкции, это
соответствующие фрагменты предоставленного Gemini текста.
Чтобы повторно услышать слово или фразу, которую нужно ввести, нажмите
клавишу 1 на цифровом ряду.
Чтобы услышать текущее задание по символам, нажмите 2.
Чтобы перейти к
следующему заданию, не заканчивая предыдущего, нажмите 3.
Чтобы вернуться к предыдущему заданию и начать выполнять его сначала,
нажмите 4.
Про возврат в главное меню с помощью "горячей" клавиши забыл, откройте
файл заново. (улыбка) Но на странице Gemini соответствующие кнопки
навигации, в том числе и "Возврат в главное меню" по собственной
инициативе сделала.
Есть ляпы, которые я уже не стал просить Gemini исправлять, я вообще
не ждал такого хорошего результата.
Из Ляпов. В некоторых заданиях нужно писать слова с заглавной буквы. В
задании это озвучивается и выполнение контролируется. Но, когда
совершена ошибка, слышим подсказку о том, что ожидалась "У", а введено
"у". Заглавная и строчная буквы на слух в этом сообщении не
различаются. Можно было попросить в сообщении об ошибке в таких
случаях добавлять слова "Заглавная" и "Строчная", но, диалог был
долгим, в процессе моего тестирования и просьб доработать Gemini
периодически чего-нибудь ломала, и чем сложнее веб-приложение, тем
чаще она что-то ломает, поэтому, решил остановиться на достигнутом.
Кто хочет, поправит руками или сам подсунет код языковой модели и
попросит.
Думаю, для тех, кто обучает начинающих незрячих пользователей, это
будет полезный инструмент, позволяющий автоматизировать работу.
Если преподаватель рядом, он подключится и разрулит.
Просто разок пройдите сами и легко поможете начинающему.
В некоторых случаях звучит небольшая лекция и потом просто
заканчивается. Перейдите к следующему шагу цифрой 3.
Большая ляпа в финальном задании.

Диктуется фраза: "с наилучшими пожеланиями, и каждый поставит своё
имя".
Имя не ставим, правильный ввод:
"С наилучшими пожеланиями, ставим своё имя".
Ну а что делать? Предки Gemini были ботами. (улыбка)

Все переговоры с Gemini по поводу создания этого тренажёра
здесь приводить не буду,
Кому интересно, читайте по ссылке:
https://g.co/gemini/share/445883e967d0

3. Подкасты для незрячих.
Слушайте подкасты для незрячих в максимально удобном и доступном
интерфейсе.
Скачивайте файл с Яндекс-диска по ссылке:
https://disk.yandex.ru/d/FKOPS6vLcfiYSg

Ну и ещё несколько советов.
1. Старайтесь максимально чётко формулировать техническое задание для
Gemini.

2. Хорошо тестируйте приложения в режиме canvas.

3. Используйте скриншоты для того, чтобы объяснить Gemini, что и где
не так. Для этого разверните окно браузера на весь экран, убедитесь
что его не закрывают всплывающие окна. На проблемном шаге нажмите
"Print screen", перейдите в чат с Gemini и дайте команду "Вставить" в
редакторе, а потом уже объясните, что не так на этом шаге. Gemini
проанализирует изображение, сопоставит его со своим кодом и вам не
придётся долго и подробно объяснять, что, где, на каком шаге,
достаточно фразы "здесь" или "На этом шаге".

4. Если произошла ошибка при предпросмотре, появится всплывающее
сообщение об ошибке и двумя кнопками. Одна кнопка позволяет самому
посмотреть консоль, а вторая кнопка "Исправить". Нажмите её,
подробнейшая информация об ошибке из консоли улетит Gemini, она сразу
поймёт, в чём траблы и исправит.

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

6. Можно интегрировать Gemini в свои приложения, для этого даже кнопка
есть. Но, ИИ функции приложения будут работать только, когда
приложение в canvas. Если вы скопируете код в HTML файл, без личного
API ключа связанные с Gemini функции не будут работать в вашем
приложении.

7 Получить личный API ключ можно на https://aistudio.google.com

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

9. Никому и никогда не передавайте HTML файлы с вашим личным API
ключом в коде. Количество запросов за период времени на один ключ
ограничено, за большое количество запросов может взыматься плата, если
у вас платная подписка.

10. На бесплатном тарифе доступно некоторое количество токенов в сутки
от Gemini 2.5 Pro. Считается, что эта модель лучше кодит. Но, если у
вас бесплатная подписка, при использовании Pro токены могоут
закончиться в процессе написания и исправления веб-приложения и
следующей порции токенов придётся ждать сутки.
Я использовал безлимитную 2.5. Flash и ничего, 3 приложеньки накодила,
а уж сколько я исправлений в тренажёре просил сделать в процессе
тестирования! Ничего, и бесплатная и безлимитная Gemini справилась.

11. Не пытайтесь заказать что-то слишком сложное. Из браузера не
получится получить доступ к железу устройства, никаких GPS, компасов
и гироскопов не будет, никакого обратного геокодинга и просто
координат. В общем, получить хоть что-то похожее на навигатор для
незрячих даже не пытайтесь, нет доступа из баузеров по сображениям
безопасности.

12. Можно придумывать что-то и для компьютеров, и для мобильных
устройств с сенсорными экранами.

13. Можно заказывать приложения и со смартфона, но с компьютера
сохранять код в HTML удобнее. А если нужен тест на мобильнике,
бросайте HTML-файл на облачный диск с компа, открывайте на мобильнике
и тестируйте.

14. Можно делиться приложением, работающем в canvas, пользователи
будут просто ходить по ссылке, но для них будут выданы кучи
предупреждений об опасности чужих приложений, будут дополнительные
ограничения, из-за которых приложения не работают. Плюс, завязка на
доступность Интернета и Gemini. Так что лучше копировать в HTML файл.

Желаю всем и каждому создать веб-приложение своей мечты! (улыбка)

А я вот смотрю на HTML-файл с кодом и полученный функционал и думаю:
"Просто HTML? А что, так можно было"? (улыбка)