教學課程：建立圖像式搜尋單頁 Web 應用程式

發行項
03/27/2020

警告

2020 年 10 月 30 日，Bing 搜尋 API 已從 Azure AI 服務移至Bing 搜尋服務。本文件僅供參考之用。如需更新的文件，請參閱 Bing 搜尋 API 文件。如需針對 Bing 搜尋建立新 Azure 資源的指示，請參閱透過 Azure Marketplace 建立 Bing 搜尋資源。

Bing 圖像式搜尋 API 會傳回影像的見解。您可以上傳影像，也可以提供影像的 URL。見解是視覺上類似的影像、購物來源、包含影像的網頁等。 Bing 圖像式搜尋 API 所傳回的見解，類似於 Bing.com/images 上顯示的內容。

本教學課程說明如何擴充 Bing 影像搜尋 API 的單頁 Web 應用程式。若要檢視該教學課程或取得此處所用的原始程式碼，請參閱教學課程：建立 Bing 影像搜尋 API 的單頁應用程式。

此應用程式的完整原始程式碼 (在經過擴充而使用 Bing 圖像式搜尋 API 之後) 可於 GitHub 取得。

Prerequisites

建立 Azure 資源

藉由建立下列其中一項 Azure 資源，開始使用 Bing 圖像式搜尋 API：

Bing 搜尋 v7 資源

您可以透過 Azure 入口網站取得該資源，直到將其刪除為止。
選取 S9 定價層。

多服務資源

您可以透過 Azure 入口網站取得該資源，直到將其刪除為止。
針對您的應用程式，跨多個 Azure AI 服務使用相同的金鑰和端點。

呼叫 Bing 圖像式搜尋 API 並處理回應

編輯 Bing 影像搜尋教學課程，並將下列程式碼新增至 <script> 元素的結尾處 (並在結尾 </script> 標籤之前)。下列程式碼會處理來自 API 的圖像式搜尋回應、逐一查看結果，並加以顯示：

function handleVisualSearchResponse(){
    if(this.status !== 200){
        console.log(this.responseText);
        return;
    }
    let json = this.responseText;
    let response = JSON.parse(json);
    for (let i =0; i < response.tags.length; i++) {
        let tag = response.tags[i];
        if (tag.displayName === '') {
            for (let j = 0; j < tag.actions.length; j++) {
                let action = tag.actions[j];
                if (action.actionType === 'VisualSearch') {
                    let html = '';
                    for (let k = 0; k < action.data.value.length; k++) {
                        let item = action.data.value[k];
                        let height = 120;
                        let width = Math.max(Math.round(height * item.thumbnail.width / item.thumbnail.height), 120);
                        html += "<img src='"+ item.thumbnailUrl + "&h=" + height + "&w=" + width + "' height=" + height + " width=" + width + "'>";
                    }
                    showDiv("insights", html);
                    window.scrollTo({top: document.getElementById("insights").getBoundingClientRect().top, behavior: "smooth"});
                }
            }
        }
    }
}

下列程式碼會使用事件接聽程式來呼叫 handleVisualSearchResponse()，以將搜尋要求傳送至 API：

function bingVisualSearch(insightsToken){
    let visualSearchBaseURL = 'https://api.cognitive.microsoft.com/bing/v7.0/images/visualsearch',
        boundary = 'boundary_ABC123DEF456',
        startBoundary = '--' + boundary,
        endBoundary = '--' + boundary + '--',
        newLine = "\r\n",
        bodyHeader = 'Content-Disposition: form-data; name="knowledgeRequest"' + newLine + newLine;

    let postBody = {
        imageInfo: {
            imageInsightsToken: insightsToken
        }
    }
    let requestBody = startBoundary + newLine;
    requestBody += bodyHeader;
    requestBody += JSON.stringify(postBody) + newLine + newLine;
    requestBody += endBoundary + newLine;

    let request = new XMLHttpRequest();

    try {
        request.open("POST", visualSearchBaseURL);
    } 
    catch (e) {
        renderErrorMessage("Error performing visual search: " + e.message);
    }
    request.setRequestHeader("Ocp-Apim-Subscription-Key", getSubscriptionKey());
    request.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + boundary);
    request.addEventListener("load", handleVisualSearchResponse);
    request.send(requestBody);
}

擷取深入解析權杖

將下列程式碼新增至 searchItemsRenderer 物件中。程式碼會新增經點按時會呼叫 bingVisualSearch 函式的尋找類似項目連結。此函式會接收 imageInsightsToken 以作為引數。

html.push("<a href='javascript:bingVisualSearch(\"" + item.imageInsightsToken + "\");'>find similar</a><br>");

顯示類似的影像

在第 601 行將新增下列 HTML 程式碼。此標記程式碼會新增用來顯示 Bing 圖像式搜尋 API 呼叫結果的元素：

<div id="insights">
    <h3><a href="#" onclick="return toggleDisplay('_insights')">Similar</a></h3>
    <div id="_insights" style="display: none"></div>
</div>

當所有新的 JavaScript 程式碼與 HTML 元素皆設置妥當後，就會顯示搜尋結果以及尋找類似項目連結。按一下此連結，可在 [類似] 區段中填入與您選擇的影像類似的影像。您可能必須展開 [類似] 區段以顯示影像。

後續步驟

教學課程：使用適用於 C# 的 Bing 圖像式搜尋 SDK 裁剪影像

共用方式為