我相信這篇文章的許多讀者都有一個(gè)“抽屜”，里面裝滿(mǎn)了未完成的很酷的業(yè)余項(xiàng)目。由于AI每天都在幫助我的團(tuán)隊(duì)編寫(xiě)代碼，我決定試一試，看看它能讓我在一個(gè)我最喜歡的業(yè)余項(xiàng)目中走多遠(yuǎn)，最好是用最少的代碼編寫(xiě)。

由于我對(duì)它能走多遠(yuǎn)感到非常驚訝，我決定寫(xiě)下我的經(jīng)歷，并檢查“無(wú)代碼人工智能編程”能走多遠(yuǎn)的極限以及實(shí)際的局限性。這篇文章（實(shí)際上是這個(gè)系列）將描述這段旅程。

NSDT工具推薦： Three.js AI紋理開(kāi)發(fā)包 – YOLO合成數(shù)據(jù)生成器 – GLTF/GLB在線編輯 – 3D模型格式在線轉(zhuǎn)換 – 可編程3D場(chǎng)景編輯器 – REVIT導(dǎo)出3D模型插件 – 3D模型語(yǔ)義搜索引擎 – AI模型在線查看 – Three.js虛擬軸心開(kāi)發(fā)包 – 3D模型在線減面 – STL模型在線切割

1、簡(jiǎn)介

我醞釀這個(gè)想法已經(jīng)很多年了——一個(gè)只需拍照就能推薦書(shū)籍的應(yīng)用程序。正如所說(shuō)，我通常忙于客戶(hù)項(xiàng)目。但在最新AI工具的幫助下，我決定試一試。事情并不總是一帆風(fēng)順的——計(jì)算機(jī)視覺(jué)和文本識(shí)別給我?guī)?lái)了一些意外。但令我驚訝的是，我設(shè)法以比我預(yù)期快得多的速度得到了一個(gè)好的原型。即使在你不是專(zhuān)家的領(lǐng)域，人工智能也能幫助將想法變成現(xiàn)實(shí)，這真是太神奇了。這段旅程既令人謙卑又令人興奮，我迫不及待地想看看它會(huì)帶來(lái)什么。

宣傳語(yǔ)如下：“想象一下，你走進(jìn)一家書(shū)店，你真的想買(mǎi)一本書(shū)，但買(mǎi)哪一本呢？此外，可能還有一張打折的桌子，周?chē)⒙渲S多書(shū)，等著你選擇一本或多本，但同樣，選哪一本呢？我希望有一個(gè)應(yīng)用程序可以解決這個(gè)問(wèn)題，而不是無(wú)助地四處尋找。進(jìn)入 Book Shazam：拍一張這個(gè)場(chǎng)景的照片，然后獲得書(shū)籍的個(gè)性化評(píng)分?！?/p>

那么為什么是現(xiàn)在呢？在我們公司 Shibumi AI，我們已經(jīng)使用 LLM 很長(zhǎng)一段時(shí)間了，大約從 2021 年 API 發(fā)布開(kāi)始。我們還利用 Copilot 完成各種編程任務(wù)。當(dāng)然，我們使用 Web UI 本身來(lái)編寫(xiě)文本、總結(jié)文本等等。偶爾，我們會(huì)嘗試在 Web 應(yīng)用程序中編寫(xiě)代碼（無(wú)論是 ChatGPT 還是 Claude）。

直到最近，結(jié)果都不是特別令人印象深刻。但最近，特別是自 Claude Sonnet 3.5 發(fā)布以來(lái)，我們感覺(jué)到可以使用此工具創(chuàng)建真正的軟件項(xiàng)目，盡管很簡(jiǎn)單。我們到處嘗試（也看到其他人這樣做）瀏覽器擴(kuò)展、簡(jiǎn)單的應(yīng)用程序等。因此，我決定是時(shí)候站出來(lái)構(gòu)建一個(gè)稍微復(fù)雜一點(diǎn)的產(chǎn)品了。這一系列帖子記錄了這個(gè)過(guò)程。

此外，最近一直在討論非開(kāi)發(fā)人員是否以及何時(shí)能夠使用 AI 創(chuàng)建成熟的應(yīng)用程序或產(chǎn)品。在這個(gè)項(xiàng)目期間，我牢記這個(gè)討論并嘗試：

• 不要觸碰代碼，或者至少盡可能少地觸碰
• 特別注意那些對(duì)我這個(gè)技術(shù)人員來(lái)說(shuō)可能很容易，但對(duì)非開(kāi)發(fā)人員來(lái)說(shuō)卻有點(diǎn)挑戰(zhàn)性甚至非常具有挑戰(zhàn)性的任務(wù)。

2、規(guī)劃項(xiàng)目

總體而言，這不是一個(gè)超級(jí)難的項(xiàng)目，但它有挑戰(zhàn)性。此外，作為一名數(shù)據(jù)科學(xué)家，我更擅長(zhǎng) Python 和 ML 模型，而 JavaScript 和 UX 則較弱。但 LLM，尤其是 Claude，讓我感覺(jué)范圍縮小了。所以讓我們開(kāi)始吧。

首先，讓我們稍微分解一下產(chǎn)品——我們需要構(gòu)建：

• 用戶(hù)界面
• 計(jì)算機(jī)視覺(jué)（檢測(cè)和 OCR）系統(tǒng)
• 推薦引擎

顯然，實(shí)施先進(jìn)而酷炫的解決方案（例如尖端的推薦器和 OCR）很誘人，但我們將采用簡(jiǎn)單的產(chǎn)品方法。

任何新手產(chǎn)品經(jīng)理都會(huì)為你畫(huà)出類(lèi)似這樣的圖：

這個(gè)草圖通常意味著從開(kāi)發(fā)的早期階段開(kāi)始，你就應(yīng)該有一個(gè)可行的解決方案。換句話(huà)說(shuō)，你不應(yīng)該在最終的 1.0 版本準(zhǔn)備好并發(fā)布之前對(duì)其進(jìn)行開(kāi)發(fā)，因?yàn)樵谡麄€(gè)期間你不會(huì)得到任何用戶(hù)反饋。你應(yīng)該做的是從一個(gè)丑陋的簡(jiǎn)單工作解決方案和 MVP（最小可行產(chǎn)品）開(kāi)始，并在每個(gè)階段根據(jù)用戶(hù)反饋逐步改進(jìn)它。我們將采用這種方法。

因此，我們將這樣完成我們的任務(wù)：

計(jì)算機(jī)視覺(jué)系統(tǒng)：具有簡(jiǎn)單的用戶(hù)界面，這將是應(yīng)用程序的支柱。我們希望具有上傳圖像、檢測(cè)書(shū)籍、識(shí)別其名稱(chēng)（OCR — 光學(xué)字符識(shí)別）和單擊它們的功能。我們將讓 Claude 處理所有事情。

推薦引擎：目前最簡(jiǎn)單的推薦引擎就是“詢(xún)問(wèn) LLM”。我們需要處理冷啟動(dòng)問(wèn)題（沒(méi)有新用戶(hù)的數(shù)據(jù)），因此我們可以簡(jiǎn)單地要求用戶(hù)輸入他們最近閱讀并喜歡的幾本書(shū)（我知道這很基本）。我們將在下一篇文章中處理這個(gè)問(wèn)題

UX：在擁有一個(gè)“可運(yùn)行”的系統(tǒng)后，我們將優(yōu)化用戶(hù)體驗(yàn)：

• 使設(shè)計(jì)看起來(lái)更美觀、更現(xiàn)代
• 使流程更友好、更流暢。

更多功能：

• 為了使這個(gè)應(yīng)用程序更具功能性，我們將添加一個(gè)登錄系統(tǒng)，讓用戶(hù)可以多次使用該應(yīng)用程序。
• 最終，我們將把應(yīng)用程序部署到云端，讓用戶(hù)可以訪問(wèn)它。
• 超出本系列的范圍，我們可以為應(yīng)用程序添加更多功能，例如對(duì)不在圖像中的書(shū)籍進(jìn)行評(píng)級(jí)等等。

3、流程—書(shū)籍檢測(cè)

讓我們首先討論使用 LLM 進(jìn)行開(kāi)發(fā)的一般方法：如前所述，Claude 的能力將我們帶到了 LLM 開(kāi)發(fā)的 0.2 版。0.1 版本是 GPT4（和 4o），它主要返回有時(shí)有效的代碼，并且每個(gè)任務(wù)都需要進(jìn)行幾次迭代。

在 Claude 中，情況會(huì)好一些：代碼版本會(huì)作為工件保存，你可以管理一種對(duì)話(huà)（有時(shí)包括編輯模型消息以進(jìn)行錯(cuò)誤的轉(zhuǎn)變）。

Claude 還包括“預(yù)覽”功能，允許在編輯器本身中運(yùn)行簡(jiǎn)單的腳本。這似乎是一個(gè)小功能，但在我看來(lái)，對(duì)于非開(kāi)發(fā)人員來(lái)說(shuō)至關(guān)重要。我們不會(huì)在本演練中使用它。

當(dāng)你要求 Claude 編寫(xiě)代碼時(shí)，應(yīng)該：

• 非常具體。
• 清楚地寫(xiě)出所有必需的功能。
• 不要寫(xiě)得太長(zhǎng)。

所以我要求以下內(nèi)容：

請(qǐng)注意，這是使用 LLM 執(zhí)行編程任務(wù)的良好做法：

• 如果模型在某個(gè)部分嚴(yán)重失敗，您可以使用相關(guān)部分的“強(qiáng)化”編輯請(qǐng)求（如您在“確?！敝锌吹降?– 根據(jù)我在計(jì)算機(jī)視覺(jué)任務(wù)中的經(jīng)驗(yàn)，模型經(jīng)常變得懶惰并選擇無(wú)法真正處理任務(wù)的模型。）
• 另外，請(qǐng)注意，我給了模型選擇技術(shù)的自由 – 它可以選擇 JavaScript 或其其中一種風(fēng)格（例如 React）……實(shí)際上，它選擇了 Flask – 這極大地影響了整個(gè)架構(gòu) – 而不是在瀏覽器中運(yùn)行整個(gè)模塊，我們將在這里擁有一個(gè)服務(wù)器/客戶(hù)端系統(tǒng)。這種選擇有利有弊。但是，由于我們計(jì)劃在應(yīng)用程序中使用 LLM，因此目前將密鑰保留在服務(wù)器上會(huì)更容易。此外，我對(duì) Python 感覺(jué)更舒服，所以我現(xiàn)在不會(huì)抱怨。但我們以后可能會(huì)想要一個(gè)僅限客戶(hù)端的應(yīng)用程序。

為了測(cè)試目的，我們將配備一張測(cè)試圖像：

Claude 有一個(gè)漂亮的用戶(hù)界面，左側(cè)是文本，右側(cè)是代碼（“工件”）。它以 Python、HTML 和 Javascript 格式返回輸出，但將代碼存儲(chǔ)在一個(gè)文件中，并在注釋中指出 — 我應(yīng)該手動(dòng)將它們分開(kāi) — .py 和 .HTML。

此外，Claude 還為代碼添加了清晰的說(shuō)明和解釋?zhuān)@可能對(duì)使用代碼和更好地理解代碼都非常有幫助。如果你想邊構(gòu)建邊學(xué)習(xí)，這是一個(gè)非常有用的工具。

將文件放到位后，我按照 Claude 的說(shuō)明運(yùn)行了 python app.py，得到了以下結(jié)果應(yīng)用：

應(yīng)用的第一個(gè)打開(kāi)屏幕

非常丑陋，但現(xiàn)在我們正在嘗試讓它工作，設(shè)計(jì)將在稍后完成。

文件上傳和圖書(shū)檢測(cè)工作正常 – 除 2 本外，所有圖書(shū)均能被檢測(cè)到。但有一個(gè)錯(cuò)誤 – 單擊一本書(shū)不會(huì)執(zhí)行任何操作。

檢測(cè)結(jié)果

由于我們正在與 Claude 交談，我可以簡(jiǎn)要地記錄下故障，Claude 將嘗試修復(fù)該錯(cuò)誤：

Claude 重寫(xiě)了 HTML 代碼，現(xiàn)在它可以工作了，請(qǐng)參見(jiàn)下面的“獲取信息”彈出窗口。

現(xiàn)在剩下的就是在彈出窗口中填充內(nèi)容——稍后再添加書(shū)名和評(píng)分。我會(huì)讓 Claude 插入一個(gè) OCR 組件：

Claude 選擇使用 Tesseract — 帶有 Python 包的最通用 OCR 工具。它不是最好的工具，但它是最新的并且隨著時(shí)間的推移不斷改進(jìn)，所以我們來(lái)試一試：

顯然，如上所示，Tesseract 不起作用。在大多數(shù)書(shū)中，它都找不到任何東西，在一些書(shū)中它檢測(cè)到一些亂碼，只有在一本書(shū)中它檢測(cè)到文本（不是最清晰的文本），這讓我認(rèn)為它出現(xiàn)了某種故障。

所以讓我們?cè)俳o它一兩次機(jī)會(huì)。

于是Claude對(duì)代碼做了一些改進(jìn)，但是效果仍然不太好。

我認(rèn)為我們可以進(jìn)一步改進(jìn) Tesseract，而且對(duì)于所謂的“野外文本”有更好的包裝，但是我們目前想要快速行動(dòng)，所以有時(shí)給 Claude 指明正確的方向是件好事：讓我們使用非常好的 Google vision API。

Claude 遵從命令，用 Google Vision 替換了 Tesseract 代碼，剩下的就是從 Google 復(fù)雜的界面獲取服務(wù)帳戶(hù)密鑰。這項(xiàng)任務(wù)對(duì)于非開(kāi)發(fā)人員來(lái)說(shuō)可能有點(diǎn)困難，但 Claude 會(huì)在這里提供說(shuō)明。將一切準(zhǔn)備就緒后，OCR 就可以正常工作了：

這并不難，而且讓我們完成了項(xiàng)目的重要部分，讓我們慶祝一下吧！

4、分析

但是，等等，讓我們想一想。我們渴望繼續(xù)前進(jìn)并完成 MVP。但是，既然應(yīng)用程序的這么重要部分已經(jīng)準(zhǔn)備就緒，讓我們（在慶祝的同時(shí)）思考一下實(shí)際將其產(chǎn)品化還缺少什么（除了我們之前討論過(guò)的推薦器和用戶(hù)體驗(yàn)）

• 計(jì)算機(jī)視覺(jué)優(yōu)化
• 架構(gòu)和部署

4.1 計(jì)算機(jī)視覺(jué)

我們這里有兩個(gè)任務(wù)：

• 檢測(cè)
• OCR

我們以一種黑客的方式用一張圖片推進(jìn)，并見(jiàn)證了以下結(jié)果（見(jiàn)上面的檢測(cè)結(jié)果圖片）：

• 檢測(cè)到 17 本書(shū)（真陽(yáng)性）
• 2 本書(shū)未檢測(cè)到（假陰性）
• 2 個(gè)假陽(yáng)性

未檢測(cè)到的書(shū)籍應(yīng)該得到處理。讓我們看看 Claude 做了什么。

查看代碼，Claude 為我們選擇了經(jīng)典的 Yolo5 模型，該模型在 COCO 數(shù)據(jù)集上進(jìn)行了預(yù)訓(xùn)練，并“突出顯示”了書(shū)籍類(lèi)別，幸運(yùn)的是，該類(lèi)別包含在數(shù)據(jù)集中。

但是，它也選擇了“S”模型，這意味著模型很小。

我們可以：

• 用更大的模型替換模型（不用想）
• 用 Yolo v8（一種具有更高準(zhǔn)確度的較新模型）替換模型
• 用專(zhuān)門(mén)針對(duì)書(shū)籍進(jìn)行訓(xùn)練的模型替換模型（需要輸入一些詳細(xì)的結(jié)果表）
• 自己微調(diào)模型（需要我們擼起袖子）

從快速實(shí)驗(yàn)來(lái)看，將 Yolo-small 更改為 Yolo-medium 確實(shí)可以改善結(jié)果。

為了真正獲得詳盡的結(jié)果，我們需要收集更多圖像作為測(cè)試集。假設(shè)約 100 張，在不同設(shè)置和光照條件下 – 但這超出了本文的范圍。

這種計(jì)算機(jī)視覺(jué)優(yōu)化是 Shibumi 的專(zhuān)長(zhǎng)之一。

4.2 架構(gòu)和部署

此應(yīng)用程序目前僅在我的機(jī)器上運(yùn)行。為了使用戶(hù)可以使用它，我們需要做一些基礎(chǔ)工作：

• 使用更好的服務(wù)功能包裝應(yīng)用程序（例如 gunicorn、docker）
• 優(yōu)化服務(wù)時(shí)間和流程：目前，代碼似乎為每個(gè) API 調(diào)用實(shí)例化模型，這不是最理想的。我們需要優(yōu)化此流程以使我們能夠?yàn)槎鄠€(gè)用戶(hù)提供服務(wù)

這些項(xiàng)目和其他項(xiàng)目對(duì)于將此類(lèi)應(yīng)用程序從 MVP 階段轉(zhuǎn)變?yōu)橥暾ぷ鞯膽?yīng)用程序至關(guān)重要，這也是我們?cè)?Shibumi 中主要做的事情。我們將在稍后階段處理它。

5、結(jié)束語(yǔ)

正如所說(shuō)，我們似乎處于“使用 LLM 編程”的 0.2 階段。我們正在探索其功能和局限性。

主要限制之一是編程中的一些小而煩人的事情——在代碼中插入一些密鑰（正如我們?cè)?Google API 的服務(wù)帳戶(hù) jey 中看到的那樣）、設(shè)置服務(wù)器和修復(fù)一個(gè)小錯(cuò)誤。

作為開(kāi)發(fā)人員，解決這些問(wèn)題是我們工作的一部分。但對(duì)于非開(kāi)發(fā)人員來(lái)說(shuō)，這些可能是嚴(yán)重的阻礙。在 0.3 版或更高版本中，有多少這樣的事情會(huì)消失？有多少將通過(guò)外部工具（例如 Replit 或 Cursor）解決？很難知道。但我們專(zhuān)注于我們現(xiàn)在擁有的東西。

現(xiàn)在就這些。在下一部分中，我們將添加推薦系統(tǒng)。

原文鏈接：用AI編程的實(shí)踐記錄 – BimAnt