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

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

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

1、簡介

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

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

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

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

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

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

2、規(guī)劃項目

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

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

• 用戶界面
• 計算機視覺（檢測和 OCR）系統(tǒng)
• 推薦引擎

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

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

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

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

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

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

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

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

更多功能：

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

3、流程—書籍檢測

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

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

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

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

• 非常具體。
• 清楚地寫出所有必需的功能。
• 不要寫得太長。

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

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

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

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

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

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

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

應(yīng)用的第一個打開屏幕

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

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

檢測結(jié)果

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

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

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

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

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

所以讓我們再給它一兩次機會。

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

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

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

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

4、分析

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

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

4.1 計算機視覺

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

• 檢測
• OCR

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

• 檢測到 17 本書（真陽性）
• 2 本書未檢測到（假陰性）
• 2 個假陽性

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

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

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

我們可以：

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

從快速實驗來看，將 Yolo-small 更改為 Yolo-medium 確實可以改善結(jié)果。

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

這種計算機視覺優(yōu)化是 Shibumi 的專長之一。

4.2 架構(gòu)和部署

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

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

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

5、結(jié)束語

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

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

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

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

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