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