Chrome內置AI多模態提示功能詳解與實戰

作者：前端小石匠 2025-06-11 02:13:00

Chrome團隊邀請開發者加入EPP（早期預覽計劃）以獲取文檔訪問權限，但公開分享演示是允許的。您需要加入EPP來了解如何啟用這些API并使用最新的Chrome Canary版本，下面我將展示一些應用示例。

距離我上次撰寫關于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）。

Chrome內置AI多模態提示功能詳解與實戰

基礎圖像識別

更精確的識別指導

圖像標簽生成

更多資源