Chrome內(nèi)置AI多模態(tài)提示功能詳解與實(shí)戰(zhàn)
距離我上次撰寫關(guān)于Chrome內(nèi)置AI功能的博客已經(jīng)過去了幾周，隨著本周Google IO大會(huì)的召開，涌現(xiàn)了許多新公告和更新。您可以在Chrome開發(fā)者博客上找到近期變化的詳細(xì)說(shuō)明："AI API現(xiàn)已進(jìn)入穩(wěn)定版和原始試用階段，并推出新的早期預(yù)覽計(jì)劃API"。
最讓我期待的一項(xiàng)功能終于發(fā)布了——多模態(tài)提示。這項(xiàng)功能允許您在提示中同時(shí)使用圖像和音頻數(shù)據(jù)。請(qǐng)注意，這仍處于早期預(yù)覽階段，正式發(fā)布前可能會(huì)有變化，但前景非常令人期待。
如我之前所述，Chrome團(tuán)隊(duì)邀請(qǐng)開發(fā)者加入EPP（早期預(yù)覽計(jì)劃）以獲取文檔訪問權(quán)限，但公開分享演示是允許的。您需要加入EPP來(lái)了解如何啟用這些API并使用最新的Chrome Canary版本，下面我將展示一些應(yīng)用示例。
基礎(chǔ)圖像識(shí)別
在最簡(jiǎn)單的層面上，啟用多模態(tài)輸入只需告訴模型您希望處理這些類型：
session = await LanguageModel.create({
expectedInputs:[{type: 'image'}]
});您也可以使用audio作為預(yù)期輸入類型，但目前我只關(guān)注圖像。為了測(cè)試，我構(gòu)建了一個(gè)演示程序，允許選擇圖片（或在移動(dòng)設(shè)備上使用相機(jī)拍攝），渲染圖像預(yù)覽，然后進(jìn)行分析。
HTML部分僅包含幾個(gè)DOM元素：
<h2>圖像分析</h2>
<div class="twocol">
<div>
<p>
<input type="file" capture="camera" accept="image/*" id="imgFile">
<button id="analyze">分析</button>
</p>
<img id="imgPreview">
</div>
<div>
<p id="result"></p>
</div>
</div>JavaScript部分才是關(guān)鍵。首先，當(dāng)文件輸入發(fā)生變化時(shí)，啟動(dòng)預(yù)覽流程：
$imgFile = document.querySelector('#imgFile');
$imgPreview = document.querySelector('#imgPreview');
$imgFile.addEventListener('change', doPreview, false);
// 稍后...
async function doPreview() {
$imgPreview.src = null;
if(!$imgFile.files[0]) return;
let file = $imgFile.files[0];
$imgPreview.src = null;
let reader = new FileReader();
reader.onload = e => $imgPreview.src = e.target.result;
reader.readAsDataURL(file);
}這部分代碼相當(dāng)標(biāo)準(zhǔn)，如有疑問請(qǐng)告訴我。理論上我可以立即進(jìn)行AI分析，但我將其綁定到了頂部的分析按鈕。以下是分析過程：
async function analyze() {
$result.innerHTML = '';
if(!$imgFile.value) return;
console.log(`準(zhǔn)備分析 ${$imgFile.value}`);
let file = $imgFile.files[0];
let imageBitmap = await createImageBitmap(file);
let result = await session.prompt([
'創(chuàng)建圖像的摘要描述。',
{ type: "image", content: imageBitmap}
]);
console.log(result);
$result.innerHTML = result;
}請(qǐng)注意$imgFile指向使用文件類型的輸入字段。我獲取了所選文件的讀取權(quán)限，將其轉(zhuǎn)換為圖像位圖（使用window.createImageBitmap），然后傳遞給AI模型。我的提示非常簡(jiǎn)單——只需寫一個(gè)摘要。
考慮到大多數(shù)人無(wú)法實(shí)際運(yùn)行這個(gè)演示，我將分享一些截圖，展示選定的圖片及其摘要。
示例運(yùn)行
是的，我同意，她非常可愛。
示例運(yùn)行
這個(gè)結(jié)果在細(xì)節(jié)層次上令人震驚。我不確定那是否是洛杉磯國(guó)際機(jī)場(chǎng)，也不確定飛機(jī)型號(hào)是否完全匹配，但這確實(shí)令人印象深刻。
示例運(yùn)行
這個(gè)結(jié)果也不錯(cuò)，雖然我驚訝它沒有認(rèn)出這是特定的曼達(dá)洛人——波巴·費(fèi)特。
如果您想嘗試，這里是完整的CodePen鏈接（前提是您已完成先決條件）：
參見CodePen上的MM + AI，作者Raymond Camden（@cfjedimaster）。
更精確的識(shí)別指導(dǎo)
當(dāng)然，您不僅可以總結(jié)圖像，還可以指導(dǎo)總結(jié)過程，例如：
let result = await session.prompt([
'判斷圖像是否為貓。如果是貓，返回愉快積極的描述；如果不是貓，返回負(fù)面批評(píng)的評(píng)價(jià)。',
{ type: "image", content: imageBitmap}
]);雖然有點(diǎn)傻，但這有一些實(shí)際用途。想象一個(gè)專門介紹貓咪的內(nèi)容網(wǎng)站（這是我的夢(mèng)想），您可能希望對(duì)內(nèi)容編輯進(jìn)行簡(jiǎn)單檢查，確保圖片聚焦于貓而不是其他主題。
以下是兩個(gè)示例，首先是貓：
是貓嗎？
然后顯然不是貓：
不是貓
為了完整性，這是該演示的鏈接：
參見CodePen上的MM + AI（貓或非貓），作者Raymond Camden（@cfjedimaster）。
圖像標(biāo)簽生成
接下來(lái)的演示讓我非常興奮。幾周前，Chrome團(tuán)隊(duì)為API添加了結(jié)構(gòu)化輸出功能。這使您可以指導(dǎo)AI如何返回響應(yīng)。想象在我們之前的演示中，我們只希望AI返回圖像是否為貓的布爾值。雖然我們可以使用提示來(lái)實(shí)現(xiàn)這一點(diǎn)，并且非常明確，但AI仍有可能發(fā)揮創(chuàng)意，超出提示的限制。結(jié)構(gòu)化輸出有助于糾正這一點(diǎn)。
考慮到這一點(diǎn)，想象我們要求AI不是描述圖像，而是提供代表圖像內(nèi)容的標(biāo)簽列表。
首先，我定義一個(gè)基本模式：
const schema = {
type:"object",
required: ["tags"],
additionalProperties: false,
properties: {
tags: {
description:"圖像中的物品",
type:"array",
items: {
type:"string"
}
}
}
};然后將此模式傳遞給提示：
let result = await session.prompt([
"識(shí)別圖像中的對(duì)象并返回標(biāo)簽數(shù)組。",
{ type:"image", content: imageBitmap }
],{ responseConstraint: schema });請(qǐng)注意，prompt API在傳遞參數(shù)的方式上有些復(fù)雜，我嘗試了幾次才找到正確傳遞圖像和模式的方法。相關(guān)文檔即將更新。
最終結(jié)果是一個(gè)JSON字符串，要將其轉(zhuǎn)換為數(shù)組，可以這樣做：
result = JSON.parse(result);在我的演示中，我只是打印出來(lái)，但您可以輕松實(shí)現(xiàn)以下功能：
- 對(duì)于我的貓咪網(wǎng)站，如果沒有看到"cat"、"cats"、"kitten"或"kittens"，向用戶發(fā)出警告
- 對(duì)于我的貓咪網(wǎng)站，如果看到"dog"或"dogs"，發(fā)出警告
需要明確的是，這些以及所有Chrome AI功能都應(yīng)專注于幫助用戶，而不應(yīng)用于阻止任何操作或作為某種安全方法。但擁有這些功能總體上可以幫助改進(jìn)流程，這是件好事。
以下是兩個(gè)帶有輸出的示例：
標(biāo)簽輸出示例
標(biāo)簽輸出示例
這是完整的演示鏈接：
參見CodePen上的MM + AI（標(biāo)簽），作者Raymond Camden（@cfjedimaster）。
更多資源
在結(jié)束之前，感謝Thomas Steiner（他還幫助我解決了一些代碼問題，謝謝Thomas！），分享來(lái)自Google IO的一些資源：
- 使用Chrome中Gemini Nano實(shí)現(xiàn)實(shí)用的內(nèi)置AI
- 瀏覽器中Gemini帶來(lái)的Chrome擴(kuò)展未來(lái)
照片由Andriyko Podilnyk在Unsplash上拍攝
原文地址：https://www.raymondcamden.com/2025/05/22/multimodal-support-in-chromes-built-in-ai
