IA Y Tecnología on kenji.blog

La barrera del desarrollo de IA

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

La barrera del desarrollo de IA

〜Llegué a la octava estación, pero a partir de ahí fue un infierno〜

Hola, soy kenji.

Últimamente, escucho mucho decir: “¡Le pedí a la IA que hiciera una aplicación y la hizo!”. Hemos superado la era de no-code y low-code, y estamos entrando en una fase como de “programación por vibras” (escribir código por intuición).

Por ejemplo, si le dices: “Hazme una aplicación que pueda editar fotos y publicarlas en redes sociales”, la IA escupe el código e incluso la interfaz de usuario (UI). Increíble, ya no necesitamos a los humanos, ¿verdad? Eso es lo que uno piensa.

Pero, ¿saben? Eso es como aterrizar en la octava estación del Monte Fuji en sandalias.

Hasta la octava estación parece un “paseo”

Desarrollar con IA es realmente fácil al principio. ¿Entrada/Salida de archivos (File IO)? Funciona por ahora. ¿Red? Bueno, se conecta. ¿Base de datos? Con JSON es suficiente. ¿UI? ChatGPT me dio el código en React. ¿Pagos? Con copiar y pegar la API de Stripe basta.

Aquí es donde te haces la ilusión de: “¿Acaso ya soy ingeniero?”. Pero el verdadero infierno comienza a partir de aquí.

¿Por qué nos atascamos?

La razón es simple: “La IA hace que parezca terminado, pero los ajustes finales recaen en los humanos”.

Los datos se pierden en la entrada/salida de archivos (File IO).
La normalización de la base de datos es deficiente y las búsquedas son lentas.
La interfaz de usuario no es intuitiva.
No se hicieron pruebas de carga, por lo que colapsa con el tráfico concentrado.
Es rechazada en la revisión de Apple/Google.
Viola requisitos legales y causa polémica (o casi).

En resumen, la IA es buena para crear prototipos que “parecen productos terminados”, pero convertirlos en un producto real que funcione en el mundo sigue siendo, hoy por hoy, un trabajo para humanos.

Pero hay una paradoja

Aquí notamos una paradoja.

¿Qué pasaría si en el futuro la IA realmente pudiera hacerlo todo? Es decir, ¿qué pasaría si “la seguridad, la facturación y el diseño fueran procesados perfectamente por la IA”?

En ese momento, la necesidad misma de que la humanidad cree aplicaciones podría desaparecer.

Porque si los usuarios pueden decirle directamente a la IA “quiero hacer esto”, la tarea se ejecutará al instante sin necesidad de una aplicación.

🌀 Por ejemplo

Antes, abríamos la aplicación de la calculadora para hacer un cálculo, ahora, solo decimos: “Oye Siri, ¿cuánto es 12 por 32?” y listo.

De la misma manera, si decimos “IA, edita esta foto y compártela”, el proceso podría completarse sin siquiera pasar por la UI o la API de una aplicación.

En otras palabras, cuando se alcance el objetivo de “crear aplicaciones con IA”, podría llegar un mundo donde las aplicaciones en sí mismas ya no sean necesarias.

Al final, lo que podemos hacer ahora

Entonces, ¿qué debemos hacer?

Como la “zona por encima de la octava estación” sigue siendo dominio humano, debemos perfeccionarnos ahí.
Concentrarnos en la comprensión esencial del usuario y el diseño de servicios.
Pensar más en “lo que es valioso” que en “lo que se puede crear”.
Más bien, buscar formas de proporcionar valor que “no se limiten al formato de una aplicación”.

La IA es una herramienta, un ascensor y, a veces, un competidor. Pero, “qué crear” y “por qué crearlo” siguen siendo preguntas para nosotros, los humanos.

Conclusión:

La barrera del desarrollo de IA no es la tecnología, sino una paradoja estructural.

Es una era en la que cualquiera puede llegar a la octava estación del Monte Fuji. Pero a partir de ahí empieza lo de verdad.

Y, para cuando lleguemos a la cima, tal vez nos espere un futuro en el que nos preguntemos: “¿De verdad era necesario escalar la montaña?”.

Enviar Gmail desde curl

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

Enviar Gmail desde curl

1. Obtener la contraseña de la aplicación

https://myaccount.google.com/apppasswords Haz clic en el enlace de arriba e introduce el nombre de la aplicación. Guarda la contraseña generada.

2. Enviar un correo electrónico con el comando curl

Ejecuta el siguiente comando.

En el ejemplo de abajo, el contenido del correo electrónico está descrito en mail.txt.

1
2
3
4
5
6


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

Este es un correo de prueba.

Crea el archivo anterior y ejecuta el siguiente comando.

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

※ Sustituye xxxxxxxxxxxxxxxx por la contraseña de tu aplicación.

'Probando mermaid.js'

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

¿Qué es mermaid.js?

mermaid.js es una biblioteca de JavaScript que permite describir diagramas mediante una sintaxis basada en texto (sintaxis de Mermaid) para representar gráficamente diagramas complejos como diagramas de flujo, diagramas de Gantt, etc. También se utiliza en varios servicios como GitHub, Qiita y Notion. En esta ocasión, configuraremos hugo para poder usar mermaid.js.

Habilitar mermaid.js en hugo

Los pasos son los siguientes:

Añadir lo siguiente a 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 }}

Solo se carga mermaid.min.js si se establece mermaid: true en la condición if. Esta biblioteca pesa aproximadamente 3MB, lo cual es sorprendentemente grande.

Crear assets/js/load-mermaid.js. Este proceso se utiliza para inicializar y volver a dibujar cuando el tema cambia dinámicamente.

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

El código original en el que me basé fue tomado de la siguiente referencia:

Reinitialize with new theme #1945

Modificar el procesamiento al cambiar de tema en 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');
 }
 }
}

Crear layouts/shortcodes/mermaid.html

1
2
3


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

Con esto, la preparación para usar mermaid.js está completa.

Probando mermaid.js

Añadir lo siguiente a la definición del artículo:

1

marmaid: true

Añadir lo siguiente al cuerpo del artículo:

Diagrama de flujo

1
2
3
4
5
6


{{<mermaid align="center">}}
graph TD
 A[Inicio] -->|Condición 1| B(Condición 2)
 B --> C{Condición 3}
 C -->|Condición 4| D[Fin]
{{</mermaid>}}

Resultado de salida

graph TD A[Inicio] -->|Condición 1| B(Condición 2) B --> C{Condición 3} C -->|Condición 4| D[Fin]

Diagrama de Gantt

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


{{<mermaid align="center">}}
gantt
 section Project
 Definición de requisitos :done, a, 2024-05-25, 5d
 Diseño básico :done, b, after a, 5d
 Diseño detallado :done, c, after b, 5d
 Implementación :active, d, after c, 10d
 Pruebas unitarias :crit, e, after d, 5d
 Pruebas de integración : f, after e, 5d
 Pruebas del sistema : g, after f, 5d
 Lanzamiento :milestone, h, after g, 1d
{{</mermaid>}}

Resultado de salida

gantt section Project Definición de requisitos :done, a, 2024-05-25, 5d Diseño básico :done, b, after a, 5d Diseño detallado :done, c, after b, 5d Implementación :active, d, after c, 10d Pruebas unitarias :crit, e, after d, 5d Pruebas de integración : f, after e, 5d Pruebas del sistema : g, after f, 5d Lanzamiento :milestone, h, after g, 1d

Diagrama de secuencia

 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: Ingreso de ID/PW
 view->>controller: Petición de autenticación
 controller->>model: Petición de autenticación
 model->>database: Petición de autenticación
 database-->>model: Devolución de resultado de autenticación
 model-->>controller: Devolución de resultado de autenticación
 controller-->>view: Devolución de resultado de autenticación
 view-->>user: Mostrar resultado de autenticación
{{</mermaid>}}

Resultado de salida

sequenceDiagram participant user participant view participant controller participant model participant database user->>view: Ingreso de ID/PW view->>controller: Consulta ajax controller->>model: Petición de autenticación model->>database: Emisión de SQL database-->>model: Devolución de resultado SQL model-->>controller: Devolución de resultado de petición de autenticación controller-->>view: Devolución de resultado de consulta ajax view-->>user: Mostrar resultado de autenticación

Eso es todo.

Referencias

Sobre la IA generativa

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

Videos de conferencias sobre IA generativa

“IA generativa” (1) Masayuki Nakao, profesor de la Universidad de Tokio, 2023.9.8

“IA generativa” (2) Kuniyoshi Sakai, profesor de posgrado de la Universidad de Tokio, 2023.10.11

“IA generativa” (3) Yutaka Matsuo, profesor de posgrado de la Universidad de Tokio, 2024.3.15

'Cómo aplicar el efecto mosaico a una parte específica de una imagen en paint.net'

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

Te mostraremos cómo aplicar un efecto de mosaico a una parte específica de una imagen usando paint.net.

Al subir imágenes a internet, es posible que desees aplicar un mosaico a áreas específicas de la imagen. Usando paint.net puedes procesar la imagen rápidamente.

Pasos

1. Abre la imagen a la que deseas aplicar el mosaico en paint.net

2. Usa la herramienta de selección para seleccionar la parte a la que deseas aplicar el mosaico (es posible la selección múltiple)

3. Selecciona Menú > Efectos > Distorsión > Mosaico

Configura la aspereza del mosaico con el tamaño de celda. Cuanto mayor sea el valor, mayor será la ocultación.
[Reducción] Selecciona Método bilineal multimuestreo
[Ampliación] Selecciona Método del vecino más cercano

Cierra el cuadro de diálogo con OK.

4. La imagen será procesada con el efecto de mosaico, procede a guardarla.

Eso es todo.

Cómo añadir un borde a una imagen usando paint.net

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

Te mostraré cómo añadir un borde a una imagen usando paint.net.

Pasos

1. Abre la imagen a la que quieres añadir un borde en paint.net.

2. Configura el color secundario (este será el color del borde).

Si no se muestra la paleta de colores, presiona la tecla F8 en tu teclado.

Si deseas configurarlo en negro, haz clic en .

3. Selecciona el menú > Imagen > Cambiar tamaño del lienzo.

Aumenta el ancho y el alto en 2 píxeles cada uno. Si aumentas 2 píxeles, el borde será de 1 píxel. Si quieres un borde de 5 píxeles, aumenta el ancho y el alto en 10 píxeles cada uno.

Selecciona “Medio” (Centro) como ancla y haz clic en OK.

4. Se añadirá un borde a la imagen, luego guarda la imagen.

Eso es todo.

El atractivo de paint.net

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

Les presento paint.net, un software de edición de imágenes que utilizo a menudo durante mis tareas de desarrollo.

Puntos valiosos que no se pueden hacer con Paint estándar de Windows

Puede manejar transparencias y niveles de opacidad
Puede realizar selecciones automáticas de formas complejas
Puede manejar capas
Puede ajustar niveles, brillo, contraste, etc.
Puede aplicar varios efectos (desenfoque, distorsión, ruido, etc.)

Otras características

Se puede usar de forma gratuita
El funcionamiento es relativamente ligero
Uso intuitivo y sin muchas peculiaridades
Soporte multilingüe

Es un software avanzado pero fácil de usar. Yo mismo aún no he dominado todas sus funciones.

Instálalo aquí

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

Si deseas elegir la versión gratuita, haz clic en la parte enmarcada en rojo del enlace a continuación.

Si lo instalas a través de Microsoft Store tiene un costo, pero a cambio permite actualizaciones automáticas. Incluso con la versión gratuita, te notifica sobre la información de actualización más reciente, por lo que puedes actualizar de manera muy sencilla.