近年來，AI 技術(shù)的迅猛發(fā)展催生了眾多高效能的 AI 開發(fā)工具，極大地加速了開發(fā)進程。與此同時，瀏覽器技術(shù)亦在持續(xù)演進，其中Chrome 瀏覽器也在逐步融入多項 AI 功能，顯著提升了開發(fā)、調(diào)試體驗。本文將簡要介紹幾款熱門的 AI 開發(fā)工具，并深入探討 Chrome 瀏覽器在 AI 領(lǐng)域的最新進展！

AI 助力開發(fā)

• 代碼編輯器

• Cursor [1]：最近很火的一個 AI 編輯器，基于 VS Code 源碼開發(fā)，在 VS Code 基礎(chǔ)上增加了許多超級實用的 AI 功能，在很多場景都可以提高開發(fā)效率。
• Github Copilot[2]：Github 推出的一款 AI 結(jié)對編程工具，可以幫助開發(fā)者更快、更智能地編寫代碼。
• Tabnine[3]：一款 AI 代碼助手，可加速和簡化軟件開發(fā)，同時保證代碼的私密性、安全性和合規(guī)性。
• Codeium[4]：一個基于 AI 技術(shù)的免費代碼加速工具包，為VS Code提供70多種語言的快速自動補全、聊天和搜索功能，支持IDE內(nèi)聊天和多種編程語言的建議。
• 通義靈碼[5]：阿里云推出的一款基于通義大模型的智能編碼輔助工具，提供實時續(xù)寫、自然語言生成代碼、單元測試生成、代碼注釋生成、代碼解釋、研發(fā)智能問答、異常報錯排查等能力。
• CodeGeeX[6]：一款基于大模型的智能編程助手，它完善了代碼的生成與補全，自動為代碼添加注釋，此外，它還針對代碼問題的智能問答，當然還包括代碼解釋，實現(xiàn)代碼，修復(fù)代碼 bug 等功能。
• MarsCode[7]：由字節(jié)跳動推出的基于豆包大模型的智能開發(fā)工具，提供AI驅(qū)動的云端IDE和IDE擴展，支持超過 100種編程語言，其功能包括智能代碼補全、代碼解釋、單測生成和 bug 修復(fù)等。

• 智能終端

• Warp[8]：一個基于 Rust 的高性能終端工具，集成了 AI 功能，可以解釋終端輸出、建議修復(fù)錯誤、編寫腳本等，提高工作效率。

• 項目/代碼生成

• bolt.new[9]：最近很火的一個基于瀏覽器的 AI 全棧 Web 開發(fā)平臺，由 StackBlitz 推出。只需通過簡單的提示，即可在瀏覽器中自動完成從編寫代碼到部署應(yīng)用的全部步驟。

• screenshot-to-code[10]：旨在探索使用 AI 技術(shù)，將網(wǎng)頁截圖轉(zhuǎn)換為代碼，其支持生成多種前端技術(shù)棧，包括 HTML + Tailwind、React + Tailwind、Vue + Tailwind、Bootstrap、Ionic + Tailwind 和 SVG。

• v0[11] ：Vercel 推出的文本生成 UI 界面代碼的 AI 工具，只需要輸入文字提示，即可生成需要的 UI 組件界面，而且可以直接復(fù)制代碼粘貼到需要使用的任何地方。

Chrome AI

Chrome 內(nèi)置 AI

在Web上使用 AI 模型時，由于模型體積龐大，傳統(tǒng)上依賴于服務(wù)端處理。特別是對于生成式 AI，模型大小遠超網(wǎng)頁平均大小。Chrome 團隊正在開發(fā) AI 相關(guān)的 Web 平臺 API 和瀏覽器功能，將 AI 模型直接集成到瀏覽器中。這樣，網(wǎng)站或無需部署和管理自己的AI模型，即可執(zhí)行 AI 任務(wù)，提高了實用性和便捷性。

內(nèi)置 AI 有以下優(yōu)勢：

• 部署簡化：通過瀏覽器內(nèi)置AI，模型的分發(fā)與更新變得極為便捷。瀏覽器會根據(jù)設(shè)備性能智能管理模型，無需用戶手動下載或更新大型模型文件，從而避免了存儲空間不足、運行時內(nèi)存緊張以及高昂的數(shù)據(jù)提取費用等一系列問題。
• 硬件加速優(yōu)化：瀏覽器內(nèi)置的AI運行時能夠充分利用現(xiàn)代設(shè)備的各種硬件資源，包括GPU、NPU以及CPU。這種智能的硬件加速機制確保了應(yīng)用在不同設(shè)備上都能實現(xiàn)最佳性能。

全新瀏覽器 API

Chrome 提供了很多 API 來訪問內(nèi)置 AI 功能，不過只有部分 API 目前處于初始試用階段，部分 API 還不可用。

• Translator API：允許開發(fā)者按需翻譯用戶生成和動態(tài)內(nèi)容。它目前處于早期預(yù)覽階段，并正在進行從Chrome 131到Chrome 136的原始試驗。用戶可以用自己的第一語言輸入請求，然后通過Translator API將其轉(zhuǎn)換為業(yè)務(wù)運營語言。
• Language Detector API：用于檢測文本的語言。它也是 Translator API 解釋器中引入的概念的一部分。目前，該API在Chrome的原始試驗中，但尚不支持Chrome擴展。
• Summarizer API：允許開發(fā)者使用內(nèi)置的 Gemini Nano 來壓縮長文本。該API目前僅供早期預(yù)覽計劃參與者進行本地實驗。它有許多用例，如會議記錄的概述、支持對話的關(guān)鍵點、產(chǎn)品評論的摘要等。
• Writer 和 Rewriter API：Writer API 幫助創(chuàng)建符合指定寫作任務(wù)的新內(nèi)容，而Rewriter API幫助修訂和重構(gòu)文本。這兩個API都是寫作輔助API解釋器的一部分。
• Prompt API：它是一個探索性API，允許早期預(yù)覽計劃參與者向Chrome中的Gemini Nano發(fā)送自然語言請求。

AI assistance 面板

Chrome Devtools 中的 AI assistance 面板是 Chrome Canary 131 及更高版本中的一個實驗性功能，它允許開發(fā)者在 DevTools 中直接與Gemini AI 進行對話。此面板旨在幫助開發(fā)者更深入地理解其網(wǎng)站的工作原理，特別是與 AI 相關(guān)的部分。其特點如下：

• 對話上下文：從 AI assistance 面板啟動的對話會自動包含正在檢查的頁面的技術(shù)細節(jié)上下文。
• 聊天內(nèi)容：開發(fā)者可以詢問關(guān)于頁面元素樣式、網(wǎng)絡(luò)請求、源文件等問題，并獲得 AI 的解答和建議。

在 Elements 面板中，右鍵點擊 HTML 元素就可以打開 AI assistance 面板，詢問 AI 來進行樣式設(shè)計，了解網(wǎng)站的整體布局、特定元素樣式，并獲取 AI 生成的 CSS 錯誤修復(fù)：

在 Network 面板中，右鍵點擊網(wǎng)絡(luò)請求，就可以打開 AI assistance 面板，詢問 AI 來了解網(wǎng)站發(fā)送的請求。

在 Sources 面板中，右鍵點擊應(yīng)用資源，就可以打開 AI assistance 面板，詢問 AI 來了解網(wǎng)站加載和使用的文件。

相關(guān)鏈接

[1]Cursor： https://www.cursor.com/。

[2]Github Copilot： https://github.com/features/copilot。

[3]Tabnine： https://www.tabnine.com/。

[4]Codeium： Codeiumhttps://codeium.com/。

[5]TONGYI Lingma： https://tongyi.aliyun.com/lingma/。

[6]CodeGeeX： https://codegeex.cn/zh-CN。

[7]MarsCode： https://www.marscode.com/。

[8]Warp： https://www.warp.dev/。

[9]bolt.new： https://bolt.new/。

[10]screenshot-to-code： https://github.com/abi/screenshot-to-code。

[11]v0： https://v0.dev/。