IA Et Technologie on kenji.blog

Le Mur du Développement de l'IA

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

Le Mur du Développement de l’IA

~ Je suis arrivé à la 8ème station, mais à partir de là, ce fut l’enfer ~

Bonjour, c’est kenji.

Dernièrement, j’ai entendu beaucoup de gens dire : “J’ai demandé à l’IA et j’ai pu créer une application !” Nous avons dépassé l’ère du no-code et du low-code pour entrer dans la phase du “vibe coding” (coder à l’intuition).

Par exemple, si vous dites “crée une application pour éditer des images et les publier sur les réseaux sociaux”, l’IA va générer le code et même l’interface utilisateur. Incroyable, on n’a plus besoin d’humains, non ? On pourrait le penser.

Mais en réalité, c’est comme atterrir à la 8ème station du Mont Fuji en tongs .

Jusqu’à la 8ème station, ça a l’air “facile”

Au début, le développement avec l’IA est vraiment facile. Entrées/Sorties de fichiers ? Ça marche. Réseau ? Eh bien, ça se connecte. Base de données ? Du JSON suffira. Interface utilisateur (UI) ? ChatGPT a généré du code React pour moi. Paiement ? L’API de Stripe peut se régler par un simple copier-coller.

À ce stade, on se fait l’illusion : “Je suis ingénieur maintenant, non ?” Mais le véritable enfer commence ici.

Pourquoi reste-t-on bloqué ?

La raison est simple : “L’IA crée quelque chose qui semble terminé, mais les ajustements finaux sont entièrement laissés aux humains.”

Les données disparaissent à cause des I/O de fichiers
La normalisation de la base de données est faible et les recherches sont lentes
L’UI n’est pas intuitive
Aucun test de charge, donc crash en cas de pic de trafic
Rejet lors de l’examen par Apple/Google
Problèmes avec les exigences légales (frôlant la catastrophe)

En d’autres termes, l’IA excelle à créer “des prototypes qui ressemblent à des produits finis” , mais en faire un “produit fonctionnel dans le monde réel” reste, aujourd’hui encore, le travail de l’homme .

Mais, il y a un paradoxe

Ici, on remarque un paradoxe .

Et si l’IA pouvait vraiment tout faire à l’avenir ? En d’autres termes, si “la sécurité, la facturation et le design étaient parfaitement gérés par l’IA” ?

À ce moment-là, la nécessité même pour les humains de créer des applications pourrait disparaître .

Car si les utilisateurs disent directement à l’IA “je veux faire ça”, les tâches seront exécutées instantanément sans avoir besoin d’une application.

🌀 Par exemple

Autrefois, on “ouvrait une application calculatrice pour calculer”, mais aujourd’hui, on dit juste “Dis Siri, combien font 12 x 32 ?” et c’est tout.

De la même manière, si on dit “Hé l’IA, modifie et partage cette photo”, la tâche peut être accomplie sans même passer par l’UI ou l’API d’une application.

En bref, lorsque l’objectif de “créer des applications avec l’IA” sera atteint, nous pourrions entrer dans un monde où les applications elles-mêmes ne sont plus nécessaires .

En fin de compte, que pouvons-nous faire maintenant ?

Alors, que devons-nous faire ?

Pour l’instant, “au-dessus de la 8ème station” reste le domaine de l’humain, alors perfectionnons-le.
Concentrez-vous sur la compréhension essentielle des utilisateurs et la conception de services.
Pensez à “ce qui a de la valeur” plutôt qu’à “ce qui peut être créé”.
Explorez plutôt des moyens d’apporter de la valeur “sans être restreint par le format d’une application”.

L’IA est un outil, un ascenseur, et parfois un concurrent. Mais “quoi créer” et “pourquoi le créer” restent des questions pour nous, les humains .

Résumé :

Le mur du développement de l’IA n’est pas technologique, c’est un paradoxe structurel.

Une époque où n’importe qui peut atteindre la 8ème station du Mont Fuji. Mais le vrai défi commence à partir de là.

Et quand nous atteindrons le sommet, un avenir où nous nous demanderons “Avions-nous vraiment besoin de gravir la montagne ?” nous attendra peut-être.

Envoyer un Gmail avec curl

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

Envoyer un Gmail avec curl

1. Obtenir un mot de passe d’application

https://myaccount.google.com/apppasswords Cliquez sur le lien ci-dessus et entrez le nom de l’application. Enregistrez le mot de passe généré.

2. Envoyer un e-mail avec la commande curl

Exécutez la commande suivante.

Dans l’exemple ci-dessous, le contenu de l’e-mail est écrit dans mail.txt.

1
2
3
4
5
6


From: from@gmail.com
To: to@gmail.com
Subject: E-mail de test
Content-Type: text/plain; charset="UTF-8"

Ceci est un e-mail de test.

Créez le fichier ci-dessus et exécutez la commande suivante.

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

※ Veuillez remplacer xxxxxxxxxxxxxxxx par votre mot de passe d’application.

Essayer mermaid.js

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

Qu’est-ce que mermaid.js

mermaid.js est une bibliothèque JavaScript qui vous permet d’afficher graphiquement des diagrammes complexes tels que des organigrammes, des diagrammes et des diagrammes de Gantt en écrivant une syntaxe originale basée sur du texte (syntaxe Mermaid). Il est également adopté dans divers services tels que GitHub, Qiita et Notion. Cette fois, nous allons essayer d’utiliser mermaid.js dans hugo.

Activer mermaid.js dans hugo

Les étapes sont les suivantes :

Ajoutez ce qui suit dans 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 n’est chargé que lorsque mermaid: true est défini dans la condition if. Cette bibliothèque pèse environ 3 Mo et est étonnamment volumineuse.

Créez assets/js/load-mermaid.js. Ce processus est utilisé pour initialiser et redessiner dynamiquement lorsque le thème est modifié.

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

Le code de base pour cela a été référencé à partir de ce qui suit :

Reinitialize with new theme #1945

Modifiez le processus lors du changement de thèmes dans 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');
 }
 }
}

Créez layouts/shortcodes/mermaid.html

1
2
3


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

Avec les étapes ci-dessus, la préparation pour utiliser mermaid.js est terminée.

Essayer mermaid.js

Ajoutez ce qui suit à la définition de l’article

1

marmaid: true

Ajoutez ce qui suit au corps de l’article

Organigramme

1
2
3
4
5
6


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

Résultat de la sortie

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

Diagramme de Gantt

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


{{<mermaid align="center">}}
gantt
 section Project
 Définition des exigences :done, a, 2024-05-25, 5d
 Conception de base :done, b, after a, 5d
 Conception détaillée :done, c, after b, 5d
 Fabrication :active, d, after c, 10d
 Test unitaire :crit, e, after d, 5d
 Test d'intégration : f, after e, 5d
 Test système : g, after f, 5d
 Version :milestone, h, after g, 1d
{{</mermaid>}}

Résultat de la sortie

gantt section Project Définition des exigences :done, a, 2024-05-25, 5d Conception de base :done, b, after a, 5d Conception détaillée :done, c, after b, 5d Fabrication :active, d, after c, 10d Test unitaire :crit, e, after d, 5d Test d'intégration : f, after e, 5d Test système : g, after f, 5d Version :milestone, h, after g, 1d

Diagramme de séquence

 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: Entrer ID/PW
 view->>controller: Demande d'authentification
 controller->>model: Demande d'authentification
 model->>database: Demande d'authentification
 database-->>model: Renvoyer le résultat de l'authentification
 model-->>controller: Renvoyer le résultat de l'authentification
 controller-->>view: Renvoyer le résultat de l'authentification
 view-->>user: Afficher le résultat de l'authentification
{{</mermaid>}}

Résultat de la sortie

sequenceDiagram participant user participant view participant controller participant model participant database user->>view: Entrer ID/PW view->>controller: requête ajax controller->>model: Demande d'authentification model->>database: Émission de SQL database-->>model: Renvoyer le résultat SQL model-->>controller: Renvoyer le résultat de la demande controller-->>view: Renvoyer le résultat de la requête ajax view-->>user: Afficher le résultat de l'authentification

C’est tout.

Références

À propos de l'IA générative

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

Vidéos de conférences sur l’IA générative

“IA générative” (1) Masayuki Nakao, Professeur à l’Université de Tokyo 2023.9.8

“IA générative” (2) Kuniyoshi Sakai, Professeur à l’Université de Tokyo 2023.10.11

“IA générative” (3) Yutaka Matsuo, Professeur à l’Université de Tokyo 2024.3.15

Comment appliquer une mosaïque à des parties spécifiques d'une image en utilisant paint.net

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

Je vais vous montrer comment appliquer une mosaïque à des parties spécifiques d’une image en utilisant paint.net.

Lors du téléchargement d’images sur Internet, il peut y avoir des cas où vous souhaitez appliquer une mosaïque à des parties spécifiques de l’image. Avec paint.net, vous pouvez traiter les images rapidement.

Procédure

1. Ouvrez l’image sur laquelle vous souhaitez appliquer la mosaïque dans paint.net

2. Utilisez l’outil de sélection pour sélectionner la zone à masquer (sélection multiple possible)

Définissez la rugosité de la mosaïque selon la taille de la cellule. Plus le nombre est grand, plus la dissimulation est élevée.
[Réduire] Sélectionnez Multisampling Bilinear
[Agrandir] Sélectionnez Nearest Neighbor

Fermez la boîte de dialogue avec OK.

4. L’image sera traitée avec la mosaïque, puis enregistrez l’image.

C’est tout.

IA Et Technologie on kenji.blog

Le Mur du Développement de l'IA

Le Mur du Développement de l’IA

Jusqu’à la 8ème station, ça a l’air “facile”

Pourquoi reste-t-on bloqué ?

Mais, il y a un paradoxe

🌀 Par exemple

En fin de compte, que pouvons-nous faire maintenant ?

Résumé :

Envoyer un Gmail avec curl

Envoyer un Gmail avec curl

1. Obtenir un mot de passe d’application

2. Envoyer un e-mail avec la commande curl

Essayer mermaid.js

Qu’est-ce que mermaid.js

Activer mermaid.js dans hugo

Essayer mermaid.js

Références

À propos de l'IA générative

Vidéos de conférences sur l’IA générative

Comment appliquer une mosaïque à des parties spécifiques d'une image en utilisant paint.net

Procédure

1. Ouvrez l’image sur laquelle vous souhaitez appliquer la mosaïque dans paint.net

2. Utilisez l’outil de sélection pour sélectionner la zone à masquer (sélection multiple possible)

3. Sélectionnez Menu > Effets > Déformer > Mosaïque

4. L’image sera traitée avec la mosaïque, puis enregistrez l’image.