Однажды, путешествуя по глухим вьетнамским деревушкам, я попросил девушку выжать мне стаканчик тростникового сока. Для объяснения я воспользовался гугл‑переводчиком. По ее глазам я понял, что если речь в моей просьбе и шла о тростнике, то о каком‑то не том. Пришлось существенно упростить послание переведя сначала с русского на английский, а потом с английского на вьетнамский. Выполнив, по‑сути, тот же алгоритм, что делает гугл, когда один/оба из языков не английский.
Тогда же зародилась идея сделать переводчик с функцией «перевода с проверкой результата», то есть приложение будет переводить не только, например, с русского на вьетнамский, но и тут же переводить то, что получилось на вьетнамском, на русский, что позволит уточнять запрос до того, как его «кривой» перевод может вызвать недоразумение и шок у собеседника.
В этой статье я поделюсь проблемами и решениями, которые возникали при создании переводчика с помощью ИИ, и покажу, как подходить к решению таких задач, особенно, если вы не программист.
Сразу нужно оговорится, что с применением голосовых возможностей ChatGPT-4o, потребность в таком переводчике несколько снизилась, генеративный предобученный трансформер улавливает нить разговора нескольких собеседников и довольно прилично работает с афоризмами. О сохранившихся недостатках буквально через два параграфа.
Сравните результаты запроса «конфетки бараночки»:
по версии Google это «Lamb sweets», что в обратном переводе «Конфеты из баранины»,
по версии ChatGPT-4o это «Sweet treats and bagels», что в обратном переводе «Сладкие угощения и бублики».
При существенно лучшем переводе у GPT, двухсторонний переводчик («переводчик с проверкой результата») может обратить ваше внимание, что данный афоризм не переводится дословно и вы измените запрос.
Таким образом, приходим к пониманию, что ценность в двустороннем переводчике ещё какое‑то время сохранится, погнали его программировать.
Вниманию уважаемых комментаторов — основные задачи данного упражнения понять:
может ли не программист создать свой работающий ИТ‑продукт с помощью ИИ,
какие откровения откроются не программисту при первом создании ИТ‑продукта.
Некоторые откровения могут вам показаться банальными, но помните, статья для «не программистов».
Начинаем = Продолжаем
В прошлый раз я остановился на создании фронта и необходимости подключения API какого‑нибудь мощного переводчика. Понятно, что с созданием фронта ИИ справляется великолепно, нужно только правильно построить запрос, так что переходим к самому сложному.
Мне были известны несколько хороших онлайн переводчиков:
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 разработчиков), он то и решил мою задачу — предоставил бесплатный, но ограниченный 1 000 запросов в месяц, API к Google translate (если не хватит, легко расширить до 100 000 запросов в месяц за $9.99 + $0.00003 за каждый следующий запрос).
Где‑то тут нужно было быстро придумать название проекту и создать логотип. Это тоже заняло какое‑то время на переписку с ИИ, так что все вопросы по этому поводу к нему. А логотип до сих пор неохота переделывать.
Откровение третье — скорее всего, всё придется переделывать с нуля и, возможно, не один раз...
Я попросил ИИ переделать файл 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
