ИИ И Технологии on kenji.blog

Стена разработки ИИ

Sun, 20 Jul 2025 21:52:42 +0900

Стена разработки ИИ

〜 Мы добрались до 8-й станции, но потом начался ад 〜

Всем привет, это kenji.

В последнее время я очень часто слышу: “Я попросил ИИ, и он сделал мне приложение!” Мы прошли эпоху no-code и low-code и вступили в фазу “vibe-coding” (написание кода по атмосфере).

Например, если вы скажете: “Создай приложение, которое может редактировать изображения и публиковать их в соцсетях”, ИИ выдаст код и даже пользовательский интерфейс. Вы подумаете: “Ух ты, нам больше не нужны люди, да?”

Но знаете, это как спуститься на 8-ю станцию горы Фудзи в сандалиях.

До 8-й станции кажется, что это “проще простого”

Разработка с помощью ИИ поначалу действительно кажется легкой. Файловый ввод-вывод? Пока что работает. Сеть? Ну, подключается. База данных? JSON сойдет. UI? ChatGPT выдал код на React. Оплата? API Stripe можно просто скопировать и вставить.

На этом этапе у вас возникает иллюзия: “А не инженер ли я уже?” Но настоящий ад начинается именно здесь.

Почему мы застреваем?

Причина проста: “ИИ делает что-то похожее на правду, но финальная доработка полностью ложится на плечи человека”.

Данные теряются при файловом вводе-выводе
Нормализация БД слабая, поэтому поиск работает медленно
UI не интуитивно понятен
Нагрузочное тестирование не проводилось, поэтому при наплыве посетителей все падает
Отказ при проверке Apple/Google
Нарушение юридических требований и (почти) скандал

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

Но есть парадокс

Здесь мы замечаем один парадокс.

Что, если в будущем ИИ действительно сможет делать всё? То есть, что, если “безопасность, биллинг и проектирование — всё это будет идеально обрабатываться ИИ”?

В этот момент необходимость в том, чтобы человечество создавало приложения, может отпасть сама собой.

Потому что, если пользователь напрямую скажет ИИ: “Я хочу сделать то-то”, задача будет выполнена мгновенно без какого-либо приложения.

🌀 Например

Раньше мы “запускали приложение калькулятора, чтобы посчитать”, а теперь достаточно сказать: “Привет, Siri, сколько будет 12×32?”, и всё готово.

Точно так же, если вы скажете: “ИИ, отредактируй фотографию и поделись ею”, процесс может быть завершен без использования UI или API приложения.

Иными словами, когда цель “создать приложение с помощью ИИ” будет достигнута, может наступить мир, в котором сами приложения станут не нужны.

В итоге, что мы можем сделать сейчас

Итак, что же нам делать?

Пока что “всё, что выше 8-й станции” — это территория человека, поэтому давайте оттачивать эти навыки.
Сосредоточиться на фундаментальном понимании пользователей и проектировании сервисов.
Думать о том, что “имеет ценность”, а не о том, что “можно сделать”.
Искать способы предоставления ценности, которые “не ограничены форматом приложения”.

ИИ — это инструмент, лифт, а иногда и конкурент. Но вопросы “что создавать” и “зачем это создавать” по-прежнему остаются вопросами для нас, людей.

Заключение:

Стена разработки ИИ — это не технологии, а структурный парадокс.

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

И, возможно, когда мы достигнем вершины, нас будет ждать будущее, в котором мы спросим себя: “А нужно ли вообще было лезть на эту гору?”

Пробуем mermaid.js

Sat, 25 May 2024 02:18:09 +0900

Что такое mermaid.js

mermaid.js — это библиотека JavaScript, которая позволяет писать текстовый синтаксис (синтаксис Mermaid) для графического отображения сложных диаграмм, таких как блок-схемы, графы и диаграммы Ганта. Она также используется в различных сервисах, таких как GitHub, Qiita и Notion. На этот раз мы попробуем включить использование mermaid.js в hugo.

Включение mermaid.js в hugo

Шаги следующие:

Добавьте следующее в layouts/partials/extend_footer.html.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


{{ if or .Params.mermaid .Site.Params.mermaid }}
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.3.0/dist/mermaid.min.js"></script>
{{- $loadmermaid := resources.Get "js/load-mermaid.js" }}
<script src="{{ $loadmermaid.RelPermalink }}"></script>
<script>
 window.initMermaid();
 if (isDarkTheme()) {
 setPrefTheme('dark');
 } else {
 setPrefTheme('light');
 }
</script>
{{ end }}

※ mermaid.min.js загружается только если mermaid: true в условии if. Эта библиотека довольно большая, около 3 МБ.

Создайте assets/js/load-mermaid.js. Этот процесс используется для инициализации и перерисовки при динамическом переключении темы.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62


(function(window){
'use strict'

 const elementCode = '.mermaid'
 const loadMermaid = function(theme) {
 window.mermaid.initialize({theme})
 window.mermaid.init({theme}, document.querySelectorAll(elementCode))
 }
 const saveOriginalData = function(){
 return new Promise((resolve, reject) => {
 try {
 var els = document.querySelectorAll(elementCode),
 count = els.length;
 els.forEach(element => {
 element.setAttribute('data-original-code', element.innerHTML)
 count--
 if(count == 0){
 resolve()
 }
 });
 } catch (error) {
 reject(error)
 }
 })
 }
 const resetProcessed = function(){
 return new Promise((resolve, reject) => {
 try {
 var els = document.querySelectorAll(elementCode),
 count = els.length;
 els.forEach(element => {
 if(element.getAttribute('data-original-code') != null){
 element.removeAttribute('data-processed')
 element.innerHTML = element.getAttribute('data-original-code')
 }
 count--
 if(count == 0){
 resolve()
 }
 });
 } catch (error) {
 reject(error)
 }
 })
 }

 const init = ()=>{
 saveOriginalData()
 .catch( console.error )
 document.body.addEventListener('dark-theme-set', ()=>{
 resetProcessed()
 .then(loadMermaid('dark'))
 .catch(console.error)
 })
 document.body.addEventListener('light-theme-set', ()=>{
 resetProcessed()
 .then(loadMermaid('default'))
 .catch(console.error)
 })
 }
 window.initMermaid = init
})(window);

Исходный код основан на следующем:

Reinitialize with new theme #1945

Измените обработку переключения темы в header.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


function switchTheme(theme) {
 switch (theme) {
 case 'light':
{{ if or .Params.mermaid .Site.Params.mermaid }}
 document.body.dispatchEvent(new CustomEvent('light-theme-set'));
{{ end }}
 document.body.classList.remove('dark');
 break;
 case 'dark':
{{ if or .Params.mermaid .Site.Params.mermaid }}
 document.body.dispatchEvent(new CustomEvent('dark-theme-set'));
{{ end }}
 document.body.classList.add('dark');
 break;
 // auto
 default:
 if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
{{ if or .Params.mermaid .Site.Params.mermaid }}
 document.body.dispatchEvent(new CustomEvent('dark-theme-set'));
{{ end }}
 document.body.classList.add('dark');
 }
 }
}

Создайте layouts/shortcodes/mermaid.html

1
2
3


<div class="mermaid" align="{{ if .Get "align" }}{{ .Get "align" }}{{ else }}center{{ end }}">
 {{ safeHTML .Inner }}
</div>

Теперь mermaid.js готов к использованию.

Использование mermaid.js

Добавьте следующее в определение статьи

1

marmaid: true

Добавьте следующее в тело статьи

Блок-схема

1
2
3
4
5
6


{{<mermaid align="center">}}
graph TD
 A[Начало] -->|Условие 1| B(Условие 2)
 B --> C{Условие 3}
 C -->|Условие 4| D[Конец]
{{</mermaid>}}

Результат

graph TD A[Начало] -->|Условие 1| B(Условие 2) B --> C{Условие 3} C -->|Условие 4| D[Конец]

Диаграмма Ганта

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


{{<mermaid align="center">}}
gantt
 section Project
 Определение требований :done, a, 2024-05-25, 5d
 Базовое проектирование :done, b, after a, 5d
 Детальное проектирование :done, c, after b, 5d
 Производство :active, d, after c, 10d
 Модульное тестирование :crit, e, after d, 5d
 Интеграционное тестирование : f, after e, 5d
 Системное тестирование : g, after f, 5d
 Релиз :milestone, h, after g, 1d
{{</mermaid>}}

Результат

gantt section Project Определение требований :done, a, 2024-05-25, 5d Базовое проектирование :done, b, after a, 5d Детальное проектирование :done, c, after b, 5d Производство :active, d, after c, 10d Модульное тестирование :crit, e, after d, 5d Интеграционное тестирование : f, after e, 5d Системное тестирование : g, after f, 5d Релиз :milestone, h, after g, 1d

Диаграмма последовательности

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


{{<mermaid align="center">}}
sequenceDiagram
 participant user
 participant view
 participant controller
 participant model
 participant database
 user->>view: Ввод ID/PW
 view->>controller: Запрос аутентификации
 controller->>model: Запрос аутентификации
 model->>database: Запрос аутентификации
 database-->>model: Возврат результата
 model-->>controller: Возврат результата
 controller-->>view: Возврат результата
 view-->>user: Показ результата
{{</mermaid>}}

Результат

sequenceDiagram participant user participant view participant controller participant model participant database user->>view: Ввод ID/PW view->>controller: ajax запрос controller->>model: Запрос аутентификации model->>database: Выполнение SQL database-->>model: Возврат результата SQL model-->>controller: Возврат результата аутентификации controller-->>view: Возврат результата ajax запроса view-->>user: Показ результата аутентификации

На этом всё.

Ссылки

О генеративном ИИ

Tue, 16 Apr 2024 02:13:56 +0900

Видео лекций о генеративном ИИ

“Генеративный ИИ” (1) Профессор Масаюки Накао, Токийский университет 2023.9.8

“Генеративный ИИ” (2) Профессор Куниёси Сакаи, Токийский университет 2023.10.11

“Генеративный ИИ” (3) Профессор Ютака Мацуо, Токийский университет 2024.3.15

Как применить мозаику к определенной части изображения в paint.net

Tue, 11 Apr 2023 16:33:10 +0900

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

При загрузке изображений в интернет иногда возникает необходимость скрыть определенные участки с помощью мозаики. С помощью paint.net вы можете быстро и легко отредактировать изображение.

Инструкция

1. Откройте изображение, которое хотите отредактировать, в paint.net

2. Используйте инструмент выделения, чтобы выбрать область для наложения мозаики (можно выбрать несколько областей)

3. В меню выберите: Эффекты (Effects) > Искажение (Distort) > Мозаика (Pixelate)

Размер ячейки определяет крупность мозаики. Чем больше значение, тем сильнее скрывается изображение.
[Уменьшение] Выберите Билинейный (многовыборочный)
[Увеличение] Выберите Ближайший сосед

Нажмите OK, чтобы закрыть диалоговое окно.

4. После того как мозаика будет применена к изображению, сохраните его.

На этом всё.

Как добавить рамку к изображению с помощью paint.net

Tue, 11 Apr 2023 14:31:59 +0900

Я покажу вам, как добавить рамку к изображению с помощью paint.net.

Шаги

1. Откройте изображение, к которому хотите добавить рамку, в paint.net

2. Установите вторичный цвет (это будет цвет рамки)

Если цветовая палитра не отображается, нажмите клавишу F8 на клавиатуре.

Чтобы установить черный цвет, нажмите .

3. Меню > Изображение > Выберите Изменить размер холста

Увеличьте ширину и высоту на 2 пикселя каждую. Увеличение на 2 пикселя означает, что рамка будет 1 пиксель. Если вы хотите, чтобы рамка была 5 пикселей, увеличьте ширину и высоту на 10 пикселей каждую.

Выберите якорь “По центру” и нажмите ОК.

4. Рамка будет добавлена к изображению, сохраните изображение.

На этом все.

Очарование paint.net

Wed, 14 Sep 2022 19:33:31 +0900

Я хочу представить paint.net, программу для редактирования изображений, которую я часто использую в процессе разработки.

Полезные функции, недоступные в стандартном Paint для Windows

Работа с прозрачностью и непрозрачностью
Автоматическое выделение сложных областей
Работа со слоями
Настройка уровней, яркости, контрастности и т. д.
Различные эффекты (размытие, искажение, шум и т. д.)

Другие особенности

Бесплатное использование
Относительно низкие системные требования
Интуитивно понятный интерфейс без лишних сложностей
Поддержка множества языков

Это очень функциональная, но простая в использовании программа. Я сам еще не освоил все её функции.

Установить можно здесь

https://www.getpaint.net/download.html

Если вы выбираете бесплатную версию, нажмите на область, выделенную красной рамкой по ссылке ниже.

Если установить программу через Microsoft Store, она будет платной, но взамен появится функция автоматического обновления. Даже в бесплатной версии вы получаете уведомления о новых обновлениях, поэтому процесс обновления проходит довольно гладко.