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

AI 助力開(kāi)發(fā)

• 代碼編輯器

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

• 智能終端

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

• 項(xiàng)目/代碼生成

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

• screenshot-to-code[10]：旨在探索使用 AI 技術(shù)，將網(wǎng)頁(yè)截圖轉(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 模型時(shí)，由于模型體積龐大，傳統(tǒng)上依賴于服務(wù)端處理。特別是對(duì)于生成式 AI，模型大小遠(yuǎn)超網(wǎng)頁(yè)平均大小。Chrome 團(tuán)隊(duì)正在開(kāi)發(fā) AI 相關(guān)的 Web 平臺(tái) API 和瀏覽器功能，將 AI 模型直接集成到瀏覽器中。這樣，網(wǎng)站或無(wú)需部署和管理自己的AI模型，即可執(zhí)行 AI 任務(wù)，提高了實(shí)用性和便捷性。

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

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

全新瀏覽器 API

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

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

AI assistance 面板

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

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

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

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

在 Sources 面板中，右鍵點(diǎn)擊應(yīng)用資源，就可以打開(kāi) AI assistance 面板，詢問(wèn) AI 來(lái)了解網(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/。