AI & Technology on kenji.blog

The Wall of AI Development

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

The Wall of AI Development

〜Made it to the 8th station, but from there it was hell〜

Hello, I’m kenji.

Recently, I’ve been hearing a ton of people saying, “I asked AI and it made an app for me!” We’ve moved past the era of no-code and low-code, and are entering a phase of “vibe coding” (writing code by feel).

For example, if you say, “Make an app that processes images and posts them to SNS,” AI will spit out the code and even the UI. It’s amazing, you’d think we don’t need humans anymore, right?

But you know, that’s like landing at the 8th station of Mount Fuji in sandals.

Getting to the 8th station looks “easy”

Development with AI is really easy at first. File I/O? It runs for now. Network? Well, it connects. Database? JSON is fine. UI? ChatGPT spit out React code. Billing? Just copy-paste the Stripe API.

Here, you get the illusion of “Am I an engineer now?”. But the real hell begins from here.

Why you get stuck

The reason is simple: “AI makes it look like it’s done, but leaves the final adjustments entirely to humans.”

Data gets lost in File I/O
DB normalization is weak so searches are slow
UI is not intuitive
Crashes from access concentration because no load testing was done
Rejected by Apple/Google review
(Almost) causes an uproar by violating legal requirements

In other words, **AI is good at creating a prototype that looks like a finished product , but ** finishing it into a product that actually works in the real world is still a human’s job today.

But there’s a paradox

Here you notice one paradox.

What if AI becomes able to truly do everything in the future? In other words, what if “AI can perfectly handle security, billing, and design all by itself”?

At that time, the need for humanity to create apps itself might disappear.

Because if a user directly tells the AI, “I want to do this kind of thing,” the task will be executed immediately without an app.

🌀For example

In the past, we “launched a calculator app to calculate”, but now it’s done just by saying, “Hey Siri, what’s 12 x 32?”.

In the same way, if you say “AI, process this photo and share it”, the process might be completed without going through any app UI or API.

In other words, when the goal of “making apps with AI” is realized, a world where apps themselves are unnecessary might arrive.

In the end, what we can do now

So, what should we do?

Right now, “above the 8th station” is still the human domain, so polish that
Focus on essential user understanding and service design
Think about “what’s valuable” rather than “what can be made”
Rather, explore ways of providing value that are “not bound by the format of an app”

AI is a tool, a lift, and sometimes a competitor. But, “what to make” and “why to make it” remain questions for us humans.

Conclusion:

The wall of AI development is not a paradox of technology, but of structure

An era where anyone can get to the 8th station of Mount Fuji. But the real thing starts from there.

And by the time we reach the summit, a future might be waiting where we ask ourselves, “Did we even need to climb the mountain?”.

Send Gmail from curl

Thu, 27 Feb 2025 02:13:31 +0900

Send Gmail from curl

1. Get an App Password

https://myaccount.google.com/apppasswords Click the link above and enter an app name. Save the generated password.

2. Send an email with the curl command

Run the following command.

In the example below, the email content is written in mail.txt.

1
2
3
4
5
6


From: from@gmail.com
To: to@gmail.com
Subject: Test Email
Content-Type: text/plain; charset="UTF-8"

This is a test email.

Create the above file and run the following command.

1

curl --url "smtps://smtp.gmail.com:465" --ssl-reqd --mail-from "from@gmail.com" --mail-rcpt "to@gmail.com" --user "from@gmail.com:xxxxxxxxxxxxxxxx" --upload-file mail.txt

Replace xxxxxxxxxxxxxxxx with your app password.

Trying out mermaid.js

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

What is mermaid.js?

mermaid.js is a JavaScript library that allows you to graphically display complex charts and diagrams, such as flowcharts, diagrams, and Gantt charts, using its own text-based syntax (Mermaid syntax). It is also adopted by various services like GitHub, Qiita, and Notion. This time, we will make mermaid.js usable in hugo.

Making mermaid.js usable in hugo

The procedure is as follows:

Add the following to 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 is loaded only when mermaid: true is set via the if statement. This library is about 3MB and unexpectedly large.

Create assets/js/load-mermaid.js. This process is used for initialization and to redraw when the theme is dynamically switched.

 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);

The base code was referenced from below:

Reinitialize with new theme #1945

Modify the theme switching process in 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');
 }
 }
}

Create layouts/shortcodes/mermaid.html

1
2
3


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

The preparation to use mermaid.js is now complete.

Trying out mermaid.js

Add the following to the article’s front matter

1

mermaid: true

Add the following to the article body

Flowchart

1
2
3
4
5
6


{{<mermaid align="center">}}
graph TD
 A[Start] -->|Condition 1| B(Condition 2)
 B --> C{Condition 3}
 C -->|Condition 4| D[End]
{{</mermaid>}}

Output Result

graph TD A[Start] -->|Condition 1| B(Condition 2) B --> C{Condition 3} C -->|Condition 4| D[End]

Gantt Chart

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


{{<mermaid align="center">}}
gantt
 section Project
 Requirement Definition :done, a, 2024-05-25, 5d
 Basic Design :done, b, after a, 5d
 Detailed Design :done, c, after b, 5d
 Manufacturing :active, d, after c, 10d
 Unit Testing :crit, e, after d, 5d
 Integration Testing : f, after e, 5d
 System Testing : g, after f, 5d
 Release :milestone, h, after g, 1d
{{</mermaid>}}

Output Result

gantt section Project Requirement Definition :done, a, 2024-05-25, 5d Basic Design :done, b, after a, 5d Detailed Design :done, c, after b, 5d Manufacturing :active, d, after c, 10d Unit Testing :crit, e, after d, 5d Integration Testing : f, after e, 5d System Testing : g, after f, 5d Release :milestone, h, after g, 1d

Sequence Diagram

 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 Input
 view->>controller: Authentication Request
 controller->>model: Authentication Request
 model->>database: Authentication Request
 database-->>model: Return Authentication Result
 model-->>controller: Return Authentication Result
 controller-->>view: Return Authentication Result
 view-->>user: Display Authentication Result
{{</mermaid>}}

Output Result

sequenceDiagram participant user participant view participant controller participant model participant database user->>view: ID/PW Input view->>controller: ajax query controller->>model: Authentication Request model->>database: Issue SQL database-->>model: Return SQL Result model-->>controller: Return Authentication Request Result controller-->>view: Return ajax query result view-->>user: Display Authentication Result

That is all.

References

About Generative AI

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

Lecture Videos on Generative AI

“Generative AI” (1) Masayuki Nakao, Professor at the University of Tokyo - 2023.9.8

“Generative AI” (2) Kuniyoshi Sakai, Professor at the University of Tokyo - 2023.10.11

“Generative AI” (3) Yutaka Matsuo, Professor at the University of Tokyo - 2024.3.15

How to add a border to an image using paint.net

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

Here is how to add a border to an image using paint.net.

Steps

1. Open the image you want to add a border to in paint.net

2. Set the secondary color (this will be the color of the border)

If the color palette is not displayed, press the F8 key on your keyboard.

If you want to set it to black, click on .

Increase the width and height by 2 pixels each. Increasing them by 2 pixels will create a 1-pixel border. If you want a 5-pixel border, increase the width and height by 10 pixels each.

Select “Middle” for the anchor, and click OK.

4. The border will be added to the image, so save the image.

That’s it.

The Appeal of paint.net

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

I would like to introduce paint.net, an image editing software that I often use during my development work.

Useful Features Not Found in Standard Windows Paint

Can handle transparency and opacity
Can automatically select complex areas
Can handle layers
Can adjust levels, brightness, contrast, etc.
Can apply various effects (blur, distort, noise, etc.)

Other Features

Free to use
Relatively lightweight and fast
Intuitive to use with few quirks
Supports multiple languages, including Japanese

It is a highly functional yet easy-to-use software. I myself haven’t mastered all of its features yet.

Installation

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

If you wish to choose the free version, please click the red framed area at the link below.

Installing via the Microsoft Store is paid, but it seems to enable automatic updates. Even with the free version, you will be notified of the latest updates, so updating is relatively smooth.

AI & Technology on kenji.blog

The Wall of AI Development

The Wall of AI Development

Getting to the 8th station looks “easy”

Why you get stuck

But there’s a paradox

🌀For example

In the end, what we can do now

Conclusion:

Send Gmail from curl

Send Gmail from curl

1. Get an App Password

2. Send an email with the curl command

Trying out mermaid.js

What is mermaid.js?

Making mermaid.js usable in hugo

Trying out mermaid.js

References

About Generative AI

Lecture Videos on Generative AI

How to add a border to an image using paint.net

Steps

1. Open the image you want to add a border to in paint.net

2. Set the secondary color (this will be the color of the border)

3. Select Menu > Image > Canvas Size…

4. The border will be added to the image, so save the image.

The Appeal of paint.net

Useful Features Not Found in Standard Windows Paint

Other Features

Installation