IA E Tecnologia on kenji.blog

A Barreira do Desenvolvimento de IA

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

A Barreira do Desenvolvimento de IA

~ Cheguei à 8ª estação, mas a partir daí foi um inferno ~

Olá, aqui é o kenji.

Ultimamente, tenho ouvido muito as pessoas dizerem: “Pedi à IA e consegui criar um aplicativo!” Ultrapassamos a era do no-code e low-code, e entramos na fase do “vibe coding” (escrever código na intuição).

Por exemplo, se você disser “crie um aplicativo que possa editar imagens e postar nas redes sociais”, a IA irá gerar o código e até a interface de usuário. Incrível, não precisamos mais de humanos, certo? Você poderia pensar assim.

Mas, na verdade, isso é como pousar na 8ª estação do Monte Fuji de chinelos .

Parece “Fácil” até a 8ª Estação

O desenvolvimento com IA é realmente fácil no começo. File I/O? Simplesmente funciona. Rede? Bem, conecta. Banco de dados? JSON está bom. UI? O ChatGPT gerou código React para mim. Pagamento? A API do Stripe pode ser resolvida com copiar e colar.

Aqui, você tem a ilusão de que “Eu já sou um engenheiro, não sou?”. Mas o verdadeiro inferno começa a partir daqui.

Por Que Você Fica Preso?

A razão é simples: “A IA cria algo que parece concluído, mas os ajustes finais são deixados inteiramente para os humanos.”

Dados desaparecem devido a File I/O
A normalização do banco de dados é fraca e as buscas são lentas
A UI não é intuitiva
Falha ao testar a carga, causando travamento por picos de tráfego
Rejeitado na revisão da Apple/Google
Problemas com requisitos legais, quase causando um desastre

Em outras palavras, a IA é boa em criar “protótipos que parecem produtos acabados” , mas transformá-lo em um “produto que funciona no mundo real” ainda é, hoje, trabalho humano .

Mas Há um Paradoxo

Aqui, percebemos um paradoxo .

E se a IA puder fazer absolutamente tudo no futuro? Em outras palavras, e se “segurança, cobrança e design forem perfeitamente tratados pela IA”?

Nesse momento, a própria necessidade de humanos criarem aplicativos pode desaparecer .

Porque se os usuários disserem diretamente à IA “eu quero fazer isso”, as tarefas serão executadas instantaneamente sem a necessidade de um aplicativo.

🌀 Por Exemplo

No passado, “abríamos um aplicativo de calculadora para calcular”, mas hoje em dia, só dizemos “Ei Siri, quanto é 12 x 32?” e acabou.

Da mesma forma, se você disser “Ei IA, edite e compartilhe esta foto”, a tarefa pode ser concluída sem passar pela interface ou API do aplicativo.

Em suma, quando o objetivo de “criar aplicativos com IA” for alcançado, poderemos chegar a um mundo onde os próprios aplicativos sejam desnecessários .

Afinal, O Que Podemos Fazer Agora?

Então, o que devemos fazer?

Por enquanto, “da 8ª estação para cima” ainda é domínio humano, então vamos aprimorar isso.
Concentre-se no entendimento essencial do usuário e no design de serviço.
Pense sobre “o que tem valor” em vez de “o que pode ser criado”.
Em vez disso, explore maneiras de fornecer valor “sem estar restrito ao formato de um aplicativo”.

A IA é uma ferramenta, um elevador e, às vezes, um concorrente. Mas, “o que criar” e “por que criar” continuam sendo questões para nós, humanos .

Resumo:

A barreira do desenvolvimento de IA não é tecnológica, mas um paradoxo estrutural.

Uma era em que qualquer um pode ir à 8ª estação do Monte Fuji. Mas o verdadeiro desafio começa a partir daí.

E quando chegarmos ao topo, um futuro onde nos perguntaremos “Precisávamos mesmo escalar a montanha?” pode estar nos esperando.

Enviar Gmail com curl

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

Enviar Gmail com curl

1. Obter uma senha de aplicativo

https://myaccount.google.com/apppasswords Clique no link acima e insira o nome do aplicativo. Salve a senha gerada.

2. Enviar email com o comando curl

Execute o seguinte comando.

No exemplo abaixo, o conteúdo do email está escrito em mail.txt.

1
2
3
4
5
6


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

Este é um email de teste.

Crie o arquivo acima e execute o seguinte 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

※ Substitua xxxxxxxxxxxxxxxx pela sua senha de aplicativo.

Experimentando o mermaid.js

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

O que é o mermaid.js

mermaid.js é uma biblioteca JavaScript que permite exibir graficamente diagramas complexos, como fluxogramas, diagramas e gráficos de Gantt, escrevendo uma sintaxe original baseada em texto (sintaxe Mermaid). Também é adotado em vários serviços como GitHub, Qiita e Notion. Desta vez, vamos tentar usar o mermaid.js no hugo.

Habilitando o mermaid.js no hugo

Os passos são os seguintes:

Adicione o seguinte em 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 }}

※ O mermaid.min.js é carregado apenas quando mermaid: true está definido na declaração if. Esta biblioteca tem cerca de 3MB e é surpreendentemente grande.

Crie assets/js/load-mermaid.js. Este processo é usado para inicializar e redesenhar dinamicamente quando o tema é alterado.

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

O código base para isso foi referenciado a partir do seguinte:

Reinitialize with new theme #1945

Modifique o processo ao alterar temas no 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');
 }
 }
}

Crie layouts/shortcodes/mermaid.html

1
2
3


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

Com os passos acima, a preparação para usar o mermaid.js está completa.

Tentando o mermaid.js

Adicione o seguinte à definição do artigo

1

marmaid: true

Adicione o seguinte ao corpo do artigo

Fluxograma

1
2
3
4
5
6


{{<mermaid align="center">}}
graph TD
 A[Início] -->|Condição 1| B(Condição 2)
 B --> C{Condição 3}
 C -->|Condição 4| D[Fim]
{{</mermaid>}}

Resultado da saída

graph TD A[Início] -->|Condição 1| B(Condição 2) B --> C{Condição 3} C -->|Condição 4| D[Fim]

Gráfico de Gantt

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


{{<mermaid align="center">}}
gantt
 section Project
 Definição de Requisitos :done, a, 2024-05-25, 5d
 Design Básico :done, b, after a, 5d
 Design Detalhado :done, c, after b, 5d
 Fabricação :active, d, after c, 10d
 Teste Unitário :crit, e, after d, 5d
 Teste de Integração : f, after e, 5d
 Teste de Sistema : g, after f, 5d
 Lançamento :milestone, h, after g, 1d
{{</mermaid>}}

Resultado da saída

gantt section Project Definição de Requisitos :done, a, 2024-05-25, 5d Design Básico :done, b, after a, 5d Design Detalhado :done, c, after b, 5d Fabricação :active, d, after c, 10d Teste Unitário :crit, e, after d, 5d Teste de Integração : f, after e, 5d Teste de Sistema : g, after f, 5d Lançamento :milestone, h, after g, 1d

Diagrama de Sequência

 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: Inserir ID/PW
 view->>controller: Solicitação de autenticação
 controller->>model: Solicitação de autenticação
 model->>database: Solicitação de autenticação
 database-->>model: Retornar resultado da autenticação
 model-->>controller: Retornar resultado da autenticação
 controller-->>view: Retornar resultado da autenticação
 view-->>user: Exibir resultado da autenticação
{{</mermaid>}}

Resultado da saída

sequenceDiagram participant user participant view participant controller participant model participant database user->>view: Inserir ID/PW view->>controller: consulta ajax controller->>model: Solicitação de autenticação model->>database: Emissão de SQL database-->>model: Retornar resultado SQL model-->>controller: Retornar resultado da solicitação controller-->>view: Retornar resultado da consulta ajax view-->>user: Exibir resultado da autenticação

Isso é tudo.

Referências

Sobre a IA Generativa

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

Vídeos de Palestras sobre IA Generativa

“IA Generativa” (1) Masayuki Nakao, Professor da Universidade de Tóquio 2023.9.8

“IA Generativa” (2) Kuniyoshi Sakai, Professor da Universidade de Tóquio 2023.10.11

“IA Generativa” (3) Yutaka Matsuo, Professor da Universidade de Tóquio 2024.3.15