教程：创建视觉搜索单页 Web 应用

项目
03/27/2020

警告

2020 年 10 月 30 日，必应搜索 API 从 Azure AI 服务迁移到必应搜索服务。本文档仅供参考。有关更新的文档，请参阅必应搜索 API 文档。关于为必应搜索创建新的 Azure 资源的说明，请参阅通过 Azure 市场创建必应搜索资源。

必应视觉搜索 API 返回图像见解。你可以上传图像，也可以提供图像的 URL。见解是视觉上类似的图像、购物源、包含图像的网页，等等。必应视觉搜索 API 返回的见解类似于 Bing.com/images 上显示的见解。

本教程介绍如何扩展必应图像搜索 API 的单页 Web 应用。若要查看该教程或获取此处使用的源代码，请参阅教程：创建必应图像搜索 API 的单页应用。

GitHub 上提供了此应用程序的完整源代码（在扩展它以使用必应视觉搜索 API 后）。

先决条件

创建 Azure 资源

通过创建以下 Azure 资源之一开始使用必应视觉搜索 API：

必应搜索 v7 资源

在删除资源前，可通过 Azure 门户使用。
选择 S9 定价层。

多服务资源

在删除资源前，可通过 Azure 门户使用。
在多个 Azure AI 服务中对应用程序使用相同的密钥和终结点。

调用必应视觉搜索 API 并处理响应

编辑必应图像搜索教程，并将以下代码添加到 <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"});
                }
            }
        }
    }
}

以下代码向 API 发送一个搜索请求，使用事件侦听器来调用 handleVisualSearchResponse()：

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);
}

捕获 insights 令牌

将以下代码添加到 searchItemsRenderer 对象。此代码添加 “查找类似”链接，该链接在单击时调用 bingVisualSearch 函数。该函数将 imageInsightsToken 作为参数接收。

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

显示相似的图像

将以下 HTML 代码添加到第 601 行。此标记代码添加了一个元素，以显示必应视觉搜索 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# 的必应视觉搜索 SDK 裁剪图像

通过