Öğretici: Görsel Arama tek sayfalı web uygulaması oluşturma

Makale
03/27/2020

Uyarı

30 Ekim 2020'de Bing Arama API'leri Azure yapay zeka hizmetlerinden Bing Arama Hizmetlerine taşındı. Bu belgeler yalnızca başvuru için sağlanır. Güncelleştirilmiş belgeler için Bing arama API'sinin belgelerine bakın. Bing araması için yeni Azure kaynakları oluşturma yönergeleri için bkz. Azure Market aracılığıyla Bing Arama kaynağı oluşturma.

Bing Görsel Arama API'si bir görüntü için içgörüler döndürür. Bir görüntüyü karşıya yükleyebilir veya bir resmin URL'sini sağlayabilirsiniz. İçgörüler görsel olarak benzer görüntüler, alışveriş kaynakları, görüntüyü içeren web sayfaları ve daha fazlasıdır. Bing Görsel Arama API'sinin döndürdiği içgörüler, Bing.com/images gösterilen içgörülere benzer.

Bu öğreticide, Bing Resim Arama API'sine yönelik tek sayfalı bir web uygulamasının nasıl genişletilmesi açıklanmaktadır. Bu öğreticiyi görüntülemek veya burada kullanılan kaynak kodunu almak için bkz . Öğretici: Bing Resim Arama API'sine yönelik tek sayfalı uygulama oluşturma.

Bu uygulamanın tam kaynak kodu (Bing Görsel Arama API'sini kullanacak şekilde genişletildikten sonra) GitHub'da kullanılabilir.

Önkoşullar

Azure kaynağı oluşturma

Aşağıdaki Azure kaynaklarından birini oluşturarak Bing Görsel Arama API'sini kullanmaya başlayın:

v7 kaynağını Bing Arama

Kaynağı silene kadar Azure portal aracılığıyla kullanılabilir.
Fiyatlandırma katmanını S9 seçin.

Çok hizmetli kaynak

Kaynağı silene kadar Azure portal aracılığıyla kullanılabilir.
Birden çok Azure AI hizmeti genelinde uygulamalarınız için aynı anahtarı ve uç noktayı kullanın.

Bing Görsel Arama API'sini çağırma ve yanıtı işleme

Bing Resim Arama öğreticisini düzenleyin ve öğesinin sonuna (ve kapanış </script> etiketinden <script> önce) aşağıdaki kodu ekleyin. Aşağıdaki kod API'den gelen bir görsel arama yanıtını işler, sonuçlarda yinelenir ve bunları görüntüler:

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

Aşağıdaki kod, çağırmak handleVisualSearchResponse()için bir olay dinleyicisi kullanarak API'ye bir arama isteği gönderir:

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

İçgörü elde etme belirteci

Nesnesine aşağıdaki kodu searchItemsRenderer ekleyin. Bu kod, tıklandığında bingVisualSearch işlevini çağıran bir benzerlerini bulma bağlantısı ekler. işlevi bağımsız imageInsightsToken değişken olarak alır.

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

Benzer resimler görüntüleme

Aşağıdaki HTML kodunu 601. satıra ekleyin. Bu işaretleme kodu, Bing Görsel Arama API'sinin sonuçlarını görüntülemek için bir öğe ekler:

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

Yeni JavaScript kodu ve HTML öğeleri yerleştirildikten sonra arama sonuçları bir benzerlerini bul bağlantısıyla görüntülenir. Benzerleri bölümünü seçtiğinize benzer görüntülerle doldurmak için bağlantıya tıklayın. Görüntüleri göstermek için Benzerleri bölümünü genişletmeniz gerekebilir.

Sonraki adımlar

Öğretici: C için Bing Görsel Arama SDK'sı ile bir görüntüyü kırpma#

Aracılığıyla paylaş