Программирование для не программиста или как разрушалась мечта свалить всё на ИИ

Однажды, путешествуя по глухим вьетнамским деревушкам, я попросил девушку выжать мне стаканчик тростникового сока. Для объяснения я воспользовался гугл‑переводчиком. По ее глазам я понял, что речь в моей просьбе если шла о тростнике, то о каком‑то не том. Пришлось оперативно существенно упростить послание переведя сначала с русского на английский, а потом с английского на вьетнамский. Выполнив, по‑сути, тот же алгоритм, что делал гугл, когда один/оба из языков не английский.

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

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

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

Сравните результаты запроса «конфетки бараночки»:

— по версии Google это «Lamb sweets», что в обратном переводе «Конфеты из баранины»,

— по версии ChatGPT-4o это «Sweet treats and bagels», что в обратном переводе «Сладкие угощения и бублики».

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

Таким образом, приходим к пониманию, что ценность в двустороннем переводчике ещё какое‑то время будет, погнали его программировать.

Вниманию уважаемых комментаторов — основные задачи данного упражнения понять:

1. может ли не программист создать свой работающий ИТ‑продукт с помощью ИИ,

2. какие есть особенности при создании ИТ‑продукта с помощью ИИ для не программиста.

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

Начинаем = Продолжаем

В прошлый раз я остановился на создании фронта и необходимости подключения API (Application Programming Interface — программный интерфейс, описание способов взаимодействия одной компьютерной программы с другими) какого‑нибудь мощного переводчика. Понятно, что с созданием фронта ИИ справляется великолепно, нужно только правильно построить запрос, так что переходим к самому сложному.

Мне были известны несколько хороших онлайн переводчиков:

1. DeepL — первым использовал нейронку для создания вменяемого перевода, следующего контексту,

2. Google translate — всеядный и, скорее всего, очень простой с точки зрения подключения переводчик,

3. Yandex переводчик — если не получится с глобальными, пойдём к соотечественникам.

Что получилось / не получилось:

1. DeepL предоставляет бесплатный API, для пользователей почти из всех стран, куда Россия почему‑то не входит, для подключения к бесплатному API нужно привязать карточку, что из России сделать сложновато. Через биржу фриланса удалось купить швейцарский аккаунт, то пока я собирался начать подключение, лавочка прикрылась.

2. Google, как и ожидалось, легко предоставляет доступ к API, но только не пользователям из России, опять же непонятно, почему… Попытка прикинуться иностранным аккаунтом потерпел фиаско, нужно показывать договор аренды из иностранной юрисдикции или иным образом показывать прочную связь с заявленной страной. Заниматься чернухой ещё раз не хотелось, чтобы в один прекрасный день опять что‑нибудь неожиданно не поломалась.

3. Яндекс, ну здравствуй, родной! Относительно просто находим инструкцию по подключению, просим ИИ учесть указанные на данной странице требования и создаём файл index.php, в котором ещё нет интерфейса с кнопками, но есть логин и пароль к API, слово для перевода и вывод результата на экран через команду print. Другими словами, если API работает, то увидим результат перевода заданного слова, если нет — увидим ошибку.

Относительно недолго провозился с ошибками, скармливал ИИ то, что видел на экране, получал фразу что‑то вроде «Я понял в чем ошибка, вот новый код, попробуйте его. Если не получится возвращайтесь» и где‑то с 5 раза, перевод появился.

Чтобы узнать, как писать запросы для любого генеративного предобученного трансформера, например, для ChatGPT, посмотрите наше с ИИ руководство здесь.

Далее всё просто, движемся к свой целе небольшими шагами (итерационно), добавляем функционал поштучно, не забываем сохранять версии работающего кода в любом текстовом документе с комментарием, что в этой версии работает, а что нет (большие программисты так тоже делают, но в GitHub).

Итерации:

— Добавить проверку результата перевода — на удивление, ИИ быстро понял, что нужно взять результат перевода и тут же перевести его на язык запроса, как будто, кто‑то уже такое делал. Тогда странно, почему нигде нет сервиса с двусторонним переводом?

— Выделить логин и пароль для API в отдельный файл, чтобы хулиганы (надеюсь, это не ты) не могли в лоб их стащить или заDDOSить систему.

— Создать интерфейс ввода‑вывода — одна из самых простых задач — четко описываем, что мы хотим видеть на экране, какое поле и кнопка за что отвечает. ИИ сам даёт им условные имена, используйте их в дальнейших корректировках, например, поле с переводом ИИ назвал «zapros», далее для добавления фразы в это поле пишем «добавь в поле zapros тест „Enter text and press Enter“, текст должен исчезать при вводе текста в это поле» (кстати, такой текст‑подсказака называется плейсхолдер).

— Выполнение перевода после нажатия кнопки enter на клавиатуре — изначально была кнопка «Перевести», но так как все привыкли, что Google и Яндекс переводят на лету, пришлось оптимизировать.

Откровение первое — знание специальной терминологии существенно ускоряет «разработку», меньше букв нужно писать в промпт, чтобы получить нужный результат. Нужный термин можно спросить у самого же ИИ в этом же диалоге «Как называется текст, который должен исчезать при вводе текста в поле?».

Всего по тексту будет девять откровений, которые помогут и структурировать текст и подсветят вам основные моменты, на которые нужно обратить внимание.

Где‑то в середине этого действа, когда я уже потирал ручки в предвкушении быстрой победы, Яндекс обрадовал сообщением «Бесплатный лимит на запросы окончен. Перейдите на платную версию». К тому моменту, я уже почувствовал «вкус крови» и такой мелочью, как отказ основного механизма системы, было меня не остановить.

Откровение второе — сломаться может в самом неожиданном месте и никакой ИИ тебе в этом не поможет.

Поможет смекалка, если где‑то есть что‑то большое и платное, то где‑то должно быть что‑то небольшое и бесплатное. После целевого поиска был найден сайт RapidAPI.com (крупнейший в мире маркетплейс API, объединяющий более 8 000 API и более 500 000 разработчиков), он то и решил мою задачу — предоставил бесплатный, но ограниченный 10 000 запросов в месяц, API к Google translate.

Где‑то тут нужно было быстро придумать название проекту и создать логотип. Это тоже заняло какое‑то время на переписку с ИИ, так что все вопросы по этому поводу к нему. А логотип до сих пор неохота переделывать.

Откровение третье — скорее всего, всё придется переделывать с нуля и, возможно, не один раз…

Я попросил ИИ переделать файл index.html, заменив в нём всё, что касается API Яндекс на API Google. Благо, что за последний год в chatGPT отключили ограничение на длину запроса и на количество запросов в диалоге.

Откровение четвёртое — создание своего детища может так вас затянуть, что забудьте про сон и еду часов на 12–14–16. Рекомендую запастись хотя бы бутербродами )

К концу первого дня начало казаться, что MVP готов — переводит в две стороны одновременно и не сбоит.

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

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

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

Но всё равно не то:

— на смартфоне текст наезжает на элементы,

— при переворачивании телефона, кнопки улетают за пределы экрана

Пришлось всё это отдельно «проговаривать» ИИ и вносить правки в код.

Где‑то на этом этапе в файле index.html появился раздел CSS (Cascading Style Sheets). Как я откуда‑то знаю, технология/язык, которым описывается внешний вид документа — стили (размер и цвет шрифта, толщина линий, отступы и т. д. и т. п.). А так как файлов уже стало два, не грех выделить стили в отдельный третий файл stili.css.

Откровение пятое — у вас не получится всё реализовать на одном языке и в одном файле. Уже сейчас это, казалось бы, простейший переводчик состоит из 4 (четырех) файлов, использующих различные языки:

— HTML — для визуализации фронта,

— CSS — для управления стилями,

— PHP — для хранения пароля доступа (один файл) и работы с API (второй файл).

PHP (Personal Home Page Tools) — скриптовый язык применяемый для разработки веб‑приложений.

Если проект маленький и для вас ещё непонятненький, удобно когда все данные в одном файле (да, можно и HTML, и CSS, и даже PHP, первое время подержать в index.html), но когда код разрастётся, а правки станут минорными (маленькими), вам самим захочется разбить их на части и править отдельно стили и отдельно механику работы приложения.

Улучшения, как и ремонт, нельзя закончить, можно только приостановить, поэтому для себя нужно четко решить, какой функционал должен быть реализован в текущей итерации.

Откровение шестое — да, без планирования даже в таких небольших pet‑проектах обойтись нельзя. Творчество должно приносить радость, а не выпадение из социальной жизни и гастриты с язвами.

Наверно, больше всего времени, около 7 часов непрерывного общения с ИИ, заняли:

— реализация адаптива (адаптивный дизайн позволяет пользоваться приложением на телефоне также удобно как на компьютере или планшете) и

— наведение лоска (чтобы было лаконично, и ровно).

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

Для текста задаётся один размер для основного шрифта, а остальной текст задаётся пропорцией от корневого или родительского элемента (em и rem соответственно).

Остальные элементы или не меняются в размере (например, линии ограничивающие границы поле ввода или границы кнопки) или меняются в зависимости от заданных разрешений экрана (vw — viewport width — ширина окна браузера, vh — viewport height — высота окна браузера).

В качестве решения задачи с различными разрешениями, обычно, создаётся интерфейс с тремя расширениями экранов:

— для дестопов (компьютеры и ноутбуки),

— для планшетов,

— для смартфонов.

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

Много времени ушло на:

— осознание этой проблемы, через понимание того, что на текущем этапе мне вообще не хочется пилить три разных дизайна — один бы адекватно работал,

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

— донесение («наставление») ИИ делать так, как надо мне, а не принято в его цифровой башке,

— ну и на «вылизывание» пропорций.

Откровение седьмое — на докручивание даже самого незначительного, на первый взгляд, элемента (пропорция границы поля относительно видимой высоты/ширины экрана) может уйти в разы больше времени, чем представлялось изначально.

Пришло время презентовать проект друзьям, семье и коллегам.

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

И будьте готовы к восьмому откровению.

Откровение восьмое — 97% публики будет глубоко насрать на ваш продукт, на ваше время, на красные глаза и гастрит. Чтобы попасть в целевую аудиторию, нужно или изначально правильно проводить CusDev или осознать, что целевая аудитория состоит из вас одного и не пытаться навязать другим, то, что им не надо.

Хорошая новость — существует отличная от нуля вероятность, во время случайного питча вы встретите одобрительные возгласы и слова поддержки. Это как раз те 3%, что могут стать вашими early birds и принесут первые деньги, если ваш продукт вообще про коммерцию. Фиксируйте контакты тех, кто дал положительную обратную связь, узнавайте, чем им понравился продукт и как они решали эту же проблему ранее. Но это уже совсем другая история.

Откровение девятое (заключительное) — свалить все проблемы на ИИ не получится, но через n‑итераций у вашей совместной с ним деятельности может появиться результат. Эдисон нашел рецепт лампочки с 10 000-й попытки, Илон Маск запустил свою ракету с 4-й попытки и чуть не разорился. Чем вы лучше? Старайтесь, идите к своей цели, слушайте рынок и да прибудет с вами Product‑market‑fit.

Поиграться с переводчиком и установить его себе в телефон в качестве приложения можно по ссылке https://translator.posovetuy.com