AI・技术 on kenji.blog

AI开发的壁垒

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

AI开发的壁垒

〜虽然到了八合目，但接下来的路才是地狱〜

大家好，我是kenji。

最近，经常听到有人说“拜托AI，结果连应用都做出来了！”这样的话。我们已经越过了无代码(No-code)和低代码(Low-code)的时代，进入了“Vibe coding（凭感觉写代码）”之类的阶段。

例如，如果你说“做一个可以编辑图片并发布到社交网络的应用”，AI就会为你输出代码甚至UI。 很厉害吧，是不是觉得已经不需要人类了呢？

但是呢，那 就像穿着凉鞋降落在富士山的八合目一样 啊。

登到八合目之前看起来“轻而易举”

用AI进行开发，一开始真的非常轻松。文件IO？反正能跑就行。网络？嗯，能连上。数据库？用JSON就够了吧。 UI？ChatGPT给我吐出了React代码。支付？复制粘贴一下Stripe的API就行了。

到了这里，你就会产生一种错觉：“我该不会已经是工程师了吧？” 但是，真正的地狱才刚刚开始。

为什么会陷入僵局？

理由很简单，因为“AI做得有模有样，但最终的调整全都抛给了人类”。

文件IO会导致数据丢失
数据库缺乏规范化，搜索很慢
UI不够直观
没有做过压力测试，流量一集中就崩溃
被Apple/Google的审核拒绝
违反法律法规引发（差点引发）公关危机

也就是说，AI很擅长制作“看起来像是完成了的原型”， 但要把其打磨成“真正在世上行得通的产品”，至今依然是人类的工作。

但是，存在一个悖论

在这里我们会发现一个悖论。

如果将来AI真的什么都能做到了呢？也就是说，如果“安全性、支付、架构设计，全都能由AI完美处理”了呢？

到那时，人类制作应用的需求本身可能就不存在了。

因为，如果用户直接对AI说“我想做这种事”，任务就会无需通过应用而被立刻执行。

🌀举个例子

以前我们“为了计算而启动计算器应用”，现在只要说“Hey Siri，12×32是多少？”就搞定了。

同样地，只要说一句“用AI把照片处理一下并分享出去”，可能不用经过应用的UI和API，处理就已经完成了。

也就是说， 当“用AI制作应用”的目标实现之时，可能就会迎来一个应用本身已不再需要的世界。

到底，现在的我们能做些什么

那么，该怎么办呢。

既然现在“八合目以上”依然是人类的领域，那就去磨练那部分技能
专注于本质上的用户理解和服务设计
思考“有价值的事情”，而不是“能做出来的事情”
倒不如说，去探索“不局限于应用这种形式”的提供价值的方式

AI是工具、是上升的阶梯、有时也是竞争对手。但是，“要做什么”和“为什么要做”，依然是我们人类去提出的问题。

总结：

AI开发的壁垒，不是技术，而是结构的悖论

这是一个谁都能登到富士山八合目的时代。但从那往后的路才是动真格的。

而且，等到终于登顶的时候，也许等待着我们的将是重新发问：“这山，我们有必要登吗？”的未来。

使用curl发送Gmail

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

使用curl发送Gmail

1. 获取应用专用密码

https://myaccount.google.com/apppasswords 点击上面的链接，然后输入应用名称。保存生成的密码。

2. 使用curl命令发送邮件

执行以下命令。

在下面的示例中，邮件内容写在mail.txt中。

1
2
3
4
5
6


From: from@gmail.com
To: to@gmail.com
Subject: 测试邮件
Content-Type: text/plain; charset="UTF-8"

这是一封测试邮件。

创建上述文件后，执行以下命令。

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

※ 请将xxxxxxxxxxxxxxxx替换为应用专用密码。

尝试使用mermaid.js

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

mermaid.js是什么

mermaid.js 是一个 JavaScript 库，可以使用基于文本的独特语法（Mermaid 语法）进行编写，从而以图形方式显示复杂的图表，如流程图、图表、甘特图等。 GitHub、Qiita、Notion 等各种服务也都采用了它。这次，我们将尝试在 hugo 中使用 mermaid.js。

在 hugo 中启用 mermaid.js

步骤如下。

在 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 }}

※ 仅在使用 if 语句且 mermaid: true 时才加载 mermaid.min.js。该库大约有 3MB，出乎意料地大。

创建 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: 输入账号/密码
 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: 输入账号/密码 view->>controller: ajax请求 controller->>model: 认证请求 model->>database: 执行SQL database-->>model: 返回SQL结果 model-->>controller: 返回认证请求结果 controller-->>view: 返回ajax请求结果 view-->>user: 显示认证结果

以上。

参考

paint.net的魅力

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

介绍一下我在开发工作中经常使用的图像编辑软件paint.net。

Windows自带画图工具无法做到但非常实用的功能

能够处理透明和不透明度
可以进行复杂范围的自动选择
可以处理图层
可以调整色阶、亮度、对比度等
能够应用各种特效（模糊、扭曲、噪点等）

其他特点

免费使用
运行相对轻量
使用直观，没有太多奇怪的设定
支持日语（多语言支持）

虽然功能强大但非常容易使用的软件。我自己也还没有完全掌握所有的功能。

安装请点击这里

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

如果选择免费版，请点击链接中下方红框的部分。

如果通过Microsoft Store安装，虽然是收费的，但可以自动更新。即使是免费版，也会通知最新的更新信息，所以更新也比较顺利。