阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈

瀏覽器中的裝置端人工智慧就在這裡。

它目前在 Chrome 測試版中,這意味著它很快就會到來。

在本文中,我將向您展示如何讓它在您的裝置上執行,以便您可以嘗試並看看您能想到什麼用例。

我只想說:在沒有網路連線的情況下從 DevTools 執行window.ai非常有趣,即使結果是「meh」!

設定

啟動並執行只需 5 分鐘!

1.下載Chrome金絲雀

前往Chrome Canary 網站並下載 Chrome Canary。

2. 啟用「Gemini Nano 提示 API」。

開啟 Chrome Canary 並在網址列中輸入“chrome://flags/”,然後按Enter 。

然後在頂部的搜尋框中輸入“prompt API”

您應該會看到“Prompt API for Gemini Nano”是唯一的選項

在 Chrome 實驗頁面的搜尋框中提示 API,有一個突出顯示的專案名為“Prompt API for Gemini Nano”,並且旁邊的下拉列表突出顯示“已啟用”。

將其切換為“啟用”。

3.啟用“在裝置上啟用最佳化指南”

當您位於「chrome://flags」頁面時,您需要啟用第二個專案。

刪除先前的搜尋並蒐索“優化指南”。

您應該將“在裝置上啟用優化指南”視為唯一的選項。

這次您想要啟用它,但要使用「Enabled ByPassPerfRequirement」選項。

在 Chrome 實驗頁面的搜尋框中,“啟用優化指南”中,有一項突出顯示為“在設備上啟用優化指南”,其旁邊的下拉列表突出顯示了“已啟用 ByPassPerfRequirement”。

4.安裝Gemini Nano

最後一步,我們需要在我們的設備上安裝 Gemini Nano。

這實際上是一個更大工具的一部分,但我們不需要擔心這一點,除了它可以幫助我們知道要下載什麼。

警告:此檔案為 1.5GB。它不會在任何地方告訴您這一點,因此如果您的連接速度較慢/按 GB 資料付費/存儲空間較低,您可能不想這樣做!

前往:「chrome://components/」。

按Ctrl + f並搜尋「優化指南」。

你會看到一個“設備型號優化指南”專案。

點擊“檢查更新”,它將安裝該檔案。

在 Chrome 元件頁面上,顯示搜尋框,輸入“最佳化指南”,並反白顯示第四項“裝置型號上的最佳化指南”。

5. 完成!

最後一步:重新啟動 Chrome Canary 以使變更生效。

就是這樣,現在我們可以繼續在本地使用人工智慧了!

使用window.ai

如果一切按預期工作,那麼您現在應該能夠打開 DevTools (F12),轉到“控制台”選項卡並開始玩!

最簡單的檢查方法是輸入window.進入控制台,看看ai是否作為一個選項出現。

如果沒有,請返回並檢查您是否錯過了任何步驟!

建立我們的第一個會話。

只需一個命令即可啟動與我們的 AI 模型的會話。

const chatSession = await window.ai.createTextSession()

提示:不要忘記await 。我本來就是🤦🏼‍♂️!

還有一個createGenericSession()選項,但我還沒有弄清楚有什麼區別!

現在我們可以使用該會話來提問。

發送提示

為此,我們只需在chatSession物件上使用.prompt函數!

const result = await chatSession.prompt("hi, what is your name?")

再說一遍,所有都是異步的,不要忘記await (我沒有犯兩次同樣的錯誤......誠實!)。

根據提示的複雜性和硬件,這可能需要幾毫秒到幾秒的時間,但一旦完成,您最終應該在控制台中看到undefined

得到回應。

現在我們只需console.log result即可!

console.log(result)

我們得到:

  As a large language model, I do not have a name.

相當平庸,但至少它有效!

快速而骯髒的可重複使用範例

顯然您不想繼續發送多個命令,因此您可以將此函數複製並貼上到控制台中以使事情變得更容易:

  async function askLocalGPT(promptText){
    if(!window.chatSession){
      console.log("starting chat session") 
      window.chatSession = await window.ai.createTextSession()
      console.log("chat session created") 
    }

    return console.log(await window.chatSession.prompt(promptText)) 
  }

現在您只需在控制台中輸入askLocalGPT("prompt text")即可。

我個人將其保存為Sources > snippets中的片段,以便在我想使用它時快速存取。

玩得開心!

有什麼好處嗎?

真的嗎?是不是沒什麼好處?

我的意思是,這取決於您使用的測量尺。

如果你試圖將它與 Claude 或 ChatGPT 進行比較,那就太糟糕了。

然而對於本地演奏和實驗來說,這真是太棒了!

另請記住,每次您提出問題時,它都不會自動記住您之前問過的問題。

因此,如果您想要進行模型「記住」之前所說內容的對話,您需要將先前的問題和答案與新問題一起提供。

玩起來好玩嗎?

是的。

事實上,我可以讓它在我的瀏覽器中本地工作,這非常酷。另外它還可以做簡單的編碼問題等。

而且美麗是沒有大鈔!您可以根據需要經常使用完整的 32k 上下文窗口,而不必擔心錯誤地累積大筆費用。

哦,雖然我說它不是很好,但它可以很好地進行總結:

  askLocalGPT("can you summarise this HTML 
for me please and explain what the page is 
about etc, please return a plain text response 
with the summary and nothing else:" + document.querySelector('article').textContent.toString())

稍微玩一下它就會輸出:

本文介紹如何使用 Google 的大語言模型 (LGBL) 在瀏覽器中本地執行 window.ai。

它描述了必要的步驟,包括在 Google Chrome Canary 中啟用「Gemini Nano 的提示 API」和「裝置模型最佳化指南」標誌、安裝 Gemini Nano 以及重新啟動 Chrome Canary。

然後,本文示範如何透過建立文字會話、提示 AI 模型和接收回應來使用 window.ai。最後討論了 window.ai 的可能性和未來的增強功能。

你會建造什麼?

我只觸及了新 API 的表面,但我可以看到它對於建立供您自己使用的「自訂 GPT」非常方便。

未來,一旦人工智慧在每個人的瀏覽器中可用,誰知道會創造出什麼驚人的東西。

最後的想法

雖然作為一名開發人員,我發現這令人興奮並且它帶來了可能性,但我內心很大一部分人不喜歡/對此持謹慎態度。

人們已經無緣無故地將「人工智慧」投入到一切事物中。讓它在人們的機器上本地執行只會鼓勵他們用它來做更愚蠢的事情!

另外,關於安全、遠端人工智慧農場等方面,可能還有大約 50 個其他事情,未來我越想越可能讓我哭泣。


原文出處:https://dev.to/grahamthedev/windowai-running-ai-locally-from-devtools-202j


共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。

阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈