Kurz: Nahrání obrázků do rozhraní API pro vizuální vyhledávání Bingu
Upozorňující
30. října 2020 se rozhraní API Bingu pro vyhledávání přesunula ze služeb Azure AI do služby Bing Search Services. Tato dokumentace je k dispozici pouze pro referenci. Aktualizovanou dokumentaci najdete v dokumentaci k rozhraní API Bingu pro vyhledávání. Pokyny k vytváření nových prostředků Azure pro vyhledávání Bingu najdete v tématu Vytvoření prostředku Vyhledávání Bingu prostřednictvím Azure Marketplace.
Rozhraní API Bingu pro vizuální vyhledávání umožňuje vyhledávat obrázky podobné obrázkům, které nahrajete. V tomto kurzu můžete vytvořit webovou aplikaci, která může odeslat obrázek do rozhraní API a zobrazit přehledy, které vrátí na webové stránce. Upozorňujeme, že tato aplikace nesplňuje všechny požadavky na použití a zobrazení Bingu pro použití rozhraní API.
Úplný zdrojový kód pro tuto ukázku najdete s dalšími popisy chyb a poznámkami na GitHubu.
Ukázková aplikace předvádí, jak:
- Nahrání obrázku do rozhraní API Pro vizuální vyhledávání Bingu
- Zobrazení výsledků hledání obrázků ve webové aplikaci
- Prozkoumání různých přehledů poskytovaných rozhraním API
Požadavky
Vytvoření prostředku Azure
Začněte používat rozhraní API Pro vizuální vyhledávání Bingu vytvořením jednoho z následujících prostředků Azure:
Prostředek Vyhledávání Bingu v7
- K dispozici prostřednictvím webu Azure Portal, dokud prostředek neodstraníte.
- Vyberte cenovou
S9úroveň.
- K dispozici prostřednictvím webu Azure Portal, dokud prostředek neodstraníte.
- Použijte stejný klíč a koncový bod pro vaše aplikace napříč několika službami Azure AI.
Vytvoření a strukturování webové stránky
Vytvořte stránku HTML, která odesílá obrázek do rozhraní API Vizuálního vyhledávání Bingu, přijímá přehledy a zobrazuje je. Ve svém oblíbeném editoru nebo integrovaném vývojovém prostředí vytvořte soubor s názvem "uploaddemo.html". Do souboru přidejte následující základní strukturu HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Visual Search Upload Demo</title>
</head>
<body>
</body>
</html>
Rozdělte stránku do oddílu požadavku, kde uživatel poskytne všechny informace potřebné pro požadavek, a část odpovědi, kde se zobrazí přehledy. Přidejte následující <div> značky do souboru <body>. Značka <hr> vizuálně odděluje oddíl požadavku od oddílu odpovědi:
<div id="requestSection"></div>
<hr />
<div id="responseSection"></div>
<script> Přidejte do <head> značky značku, která bude obsahovat JavaScript pro aplikaci:
<script>
<\script>
Získání souboru pro nahrání
Aby uživatel vybral obrázek k nahrání, použije <input> aplikace značku s atributem typu nastaveným na file. Uživatelské rozhraní musí jasně zjistit, že aplikace používá Bing k získání výsledků hledání.
Přidejte následující <div> položky do souboru requestSection <div>. Vstup souboru přijímá jeden soubor libovolného typu obrázku (například .jpg, .gif, .png). Událost onchange určuje obslužnou rutinu, která je volána, když uživatel vybere soubor.
Značka <output> slouží k zobrazení miniatury vybraného obrázku:
<div>
<p>Select image to get insights from Bing:
<input type="file" accept="image/*" id="uploadImage" name="files[]" size=40 onchange="handleFileSelect('uploadImage')" />
</p>
<output id="thumbnail"></output>
</div>
Vytvoření obslužné rutiny souboru
Vytvořte funkci obslužné rutiny, která může číst na obrázku, který chcete nahrát. Při iterování souborů v objektu FileList by obslužná rutina měla zajistit, aby vybraný soubor byl soubor obrázku a jeho velikost je 1 MB nebo menší. Pokud je obrázek větší, musíte před nahráním zmenšit jeho velikost. Nakonec obslužná rutina zobrazí miniaturu obrázku:
function handleFileSelect(selector) {
var files = document.getElementById(selector).files; // A FileList object
for (var i = 0, f; f = files[i]; i++) {
// Ensure the file is an image file.
if (!f.type.match('image.*')) {
alert("Selected file must be an image file.");
document.getElementById("uploadImage").value = null;
continue;
}
// Image must be <= 1 MB and should be about 1500px.
if (f.size > 1000000) {
alert("Image must be less than 1 MB.");
document.getElementById("uploadImage").value = null;
continue;
}
var reader = new FileReader();
// Capture the file information.
reader.onload = (function(theFile) {
return function(e) {
var fileOutput = document.getElementById('thumbnail');
if (fileOutput.childElementCount > 0) {
fileOutput.removeChild(fileOutput.lastChild); // Remove the current pic, if it exists
}
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
fileOutput.insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
Přidání a uložení klíče předplatného
Aplikace vyžaduje klíč předplatného k volání rozhraní API Pro vizuální vyhledávání Bingu. Pro účely tohoto kurzu ho poskytnete v uživatelském rozhraní. Přidejte následující <input> značku (s atributem typu nastaveným na text) <body> těsně pod značku souboru <output> :
<div>
<p>Subscription key:
<input type="text" id="key" name="subscription" size=40 maxlength="32" />
</p>
</div>
Pomocí obrázku a klíče předplatného můžete voláním vizuálního vyhledávání Bingu získat přehledy o obrázku. V tomto kurzu volání používá výchozí trh (en-us) a bezpečnou hodnotu vyhledávání (moderate).
Tato aplikace má možnost tyto hodnoty změnit. Pod klíč předplatného přidejte následující <div> kód <div>. Aplikace používá <select> značku k poskytnutí rozevíracího seznamu pro hodnoty trhu a bezpečného vyhledávání. Oba seznamy zobrazují výchozí hodnotu.
<div>
<p><a href="#" onclick="expandCollapse(options.id)">Query options</a></p>
<div id="options" style="display:none">
<p style="margin-left: 20px">Market:
<select id="mkt">
<option value="es-AR">Argentina (Spanish)</option>
<option value="en-AU">Australia (English)</option>
<option value="de-AT">Austria (German)</option>
<option value="nl-BE">Belgium (Dutch)</option>
<option value="fr-BE">Belgium (French)</option>
<option value="pt-BR">Brazil (Portuguese)</option>
<option value="en-CA">Canada (English)</option>
<option value="fr-CA">Canada (French)</option>
<option value="es-CL">Chile (Spanish)</option>
<option value="da-DK">Denmark (Danish)</option>
<option value="fi-FI">Finland (Finnish)</option>
<option value="fr-FR">France (French)</option>
<option value="de-DE">Germany (German)</option>
<option value="zh-HK">Hong Kong SAR(Traditional Chinese)</option>
<option value="en-IN">India (English)</option>
<option value="en-ID">Indonesia (English)</option>
<option value="it-IT">Italy (Italian)</option>
<option value="ja-JP">Japan (Japanese)</option>
<option value="ko-KR">Korea (Korean)</option>
<option value="en-MY">Malaysia (English)</option>
<option value="es-MX">Mexico (Spanish)</option>
<option value="nl-NL">Netherlands (Dutch)</option>
<option value="en-NZ">New Zealand (English)</option>
<option value="no-NO">Norway (Norwegian)</option>
<option value="zh-CN">People's Republic of China (Chinese)</option>
<option value="pl-PL">Poland (Polish)</option>
<option value="pt-PT">Portugal (Portuguese)</option>
<option value="en-PH">Philippines (English)</option>
<option value="ru-RU">Russia (Russian)</option>
<option value="ar-SA">Saudi Arabia (Arabic)</option>
<option value="en-ZA">South Africa (English)</option>
<option value="es-ES">Spain (Spanish)</option>
<option value="sv-SE">Sweden (Swedish)</option>
<option value="fr-CH">Switzerland (French)</option>
<option value="de-CH">Switzerland (German)</option>
<option value="zh-TW">Taiwan (Traditional Chinese)</option>
<option value="tr-TR">Türkiye (Turkish)</option>
<option value="en-GB">United Kingdom (English)</option>
<option value="en-US" selected>United States (English)</option>
<option value="es-US">United States (Spanish)</option>
</select>
</p>
<p style="margin-left: 20px">Safe search:
<select id="safesearch">
<option value="moderate" selected>Moderate</option>
<option value="strict">Strict</option>
<option value="off">off</option>
</select>
</p>
</div>
</div>
Přidání možností hledání na webovou stránku
Aplikace skryje seznamy v sbalitelném <div> odkazu možnosti dotazu. Když kliknete na odkaz Možnosti dotazu, rozbalí se, <div> abyste viděli a upravili možnosti dotazu. Pokud znovu kliknete na odkaz Možnosti dotazu, <div> sbalí se a skryje. Následující fragment kódu ukazuje obslužnou rutinu onclick odkazu možnosti dotazu. Obslužná rutina určuje, jestli <div> je rozbalený nebo sbalený. Přidejte tuto obslužnou rutinu do oddílu <script> . Obslužnou rutinu používají všechny sbalitelné <div> oddíly v ukázce.
// Contains the toggle state of divs.
var divToggleMap = {}; // divToggleMap['foo'] = 0; // 1 = show, 0 = hide
// Toggles between showing and hiding the specified div.
function expandCollapse(divToToggle) {
var div = document.getElementById(divToToggle);
if (divToggleMap[divToToggle] == 1) { // if div is expanded
div.style.display = "none";
divToggleMap[divToToggle] = 0;
}
else { // if div is collapsed
div.style.display = "inline-block";
divToggleMap[divToToggle] = 1;
}
}
Volání obslužné rutiny onclick
Pod možnosti <div> v textu přidejte následující "Get insights" tlačítko. Tlačítko umožňuje zahájit hovor. Po kliknutí na tlačítko se kurzor změní na rotující kurzor čekání a obslužná rutina onclick se zavolá.
<p><input type="button" id="query" value="Get insights" onclick="document.body.style.cursor='wait'; handleQuery()" /></p>
Přidejte obslužnou onclick rutinu handleQuery() tlačítka do značky <script> .
Zpracování dotazu
Obslužná rutina handleQuery() zajišťuje, že klíč předplatného je přítomen a má délku 32 znaků a že je vybraný obrázek. Vymaže také všechny přehledy z předchozího dotazu. Potom zavolá sendRequest() funkci, která volání provede.
function handleQuery() {
var subscriptionKey = document.getElementById('key').value;
// Make sure user provided a subscription key and image.
// For this demo, the user provides the key but typically you'd
// get it from secured storage.
if (subscriptionKey.length !== 32) {
alert("Subscription key length is not valid. Enter a valid key.");
document.getElementById('key').focus();
return;
}
var imagePath = document.getElementById('uploadImage').value;
if (imagePath.length === 0)
{
alert("Please select an image to upload.");
document.getElementById('uploadImage').focus();
return;
}
var responseDiv = document.getElementById('responseSection');
// Clear out the response from the last query.
while (responseDiv.childElementCount > 0) {
responseDiv.removeChild(responseDiv.lastChild);
}
// Send the request to Bing to get insights about the image.
var f = document.getElementById('uploadImage').files[0];
sendRequest(f, subscriptionKey);
}
Odeslání žádosti o vyhledávání
Funkce sendRequest() naformátuje adresu URL koncového bodu, nastaví hlavičku Ocp-Apim-Subscription-Key na klíč předplatného, připojí binární soubor obrázku k nahrání, určí obslužnou rutinu odpovědi a provede volání:
function sendRequest(file, key) {
var market = document.getElementById('mkt').value;
var safeSearch = document.getElementById('safesearch').value;
var baseUri = `https://api.cognitive.microsoft.com/bing/v7.0/images/visualsearch?mkt=${market}&safesearch=${safeSearch}`;
var form = new FormData();
form.append("image", file);
var request = new XMLHttpRequest();
request.open("POST", baseUri);
request.setRequestHeader('Ocp-Apim-Subscription-Key', key);
request.addEventListener('load', handleResponse);
request.send(form);
}
Získání a zpracování odpovědi rozhraní API
Funkce handleResponse() zpracuje odpověď z volání vizuálního vyhledávání Bingu. Pokud je volání úspěšné, naparsuje odpověď JSON do jednotlivých značek, které obsahují přehledy. V dalším kroku přidá výsledky hledání na stránku. Aplikace pak vytvoří sbalitelné <div> pro každou značku, která bude spravovat, kolik dat se zobrazí. Přidejte obslužnou rutinu do oddílu <script> .
function handleResponse() {
if(this.status !== 200){
alert("Error calling Bing Visual Search. See console log for details.");
console.log(this.responseText);
return;
}
var tags = parseResponse(JSON.parse(this.responseText));
var h4 = document.createElement('h4');
h4.textContent = 'Bing internet search results';
document.getElementById('responseSection').appendChild(h4);
buildTagSections(tags);
document.body.style.cursor = 'default'; // reset the wait cursor set by query insights button
}
Parsování odpovědi
Funkce parseResponse převede odpověď JSON na objekt slovníku iterací prostřednictvím json.tags.
function parseResponse(json) {
var dict = {};
for (var i =0; i < json.tags.length; i++) {
var tag = json.tags[i];
if (tag.displayName === '') {
dict['Default'] = JSON.stringify(tag);
}
else {
dict[tag.displayName] = JSON.stringify(tag);
}
}
return(dict);
}
Vytvoření oddílu značky
Funkce buildTagSections() iteruje prostřednictvím parsovaných značek JSON a volá buildDiv() funkci, která vytvoří pro každou značku.<div> Každá značka se zobrazí jako odkaz. Po kliknutí na odkaz se značka rozbalí a zobrazí se přehledy přidružené ke značce. Dalším kliknutím na odkaz se oddíl sbalí.
function buildTagSections(tags) {
for (var tag in tags) {
if (tags.hasOwnProperty(tag)) {
var tagSection = buildDiv(tags, tag);
document.getElementById('responseSection').appendChild(tagSection);
}
}
}
function buildDiv(tags, tag) {
var tagSection = document.createElement('div');
tagSection.setAttribute('class', 'subSection');
var link = document.createElement('a');
link.setAttribute('href', '#');
link.setAttribute('style', 'float: left;')
link.text = tag;
tagSection.appendChild(link);
var contentDiv = document.createElement('div');
contentDiv.setAttribute('id', tag);
contentDiv.setAttribute('style', 'clear: left;')
contentDiv.setAttribute('class', 'section');
tagSection.appendChild(contentDiv);
link.setAttribute('onclick', `expandCollapse("${tag}")`);
divToggleMap[tag] = 0; // 1 = show, 0 = hide
addDivContent(contentDiv, tag, tags[tag]);
return tagSection;
}
Zobrazení výsledků hledání na webové stránce
Funkce buildDiv() volá addDivContent funkci, která sestaví obsah sbalitelné <div>značky .
Obsah značky zahrnuje kód JSON z odpovědi pro značku. Zpočátku se zobrazí jenom prvních 100 znaků JSON, ale můžete kliknout na řetězec JSON a zobrazit celý json. Pokud na něj kliknete znovu, řetězec JSON se sbalí zpět na 100 znaků.
V dalším kroku přidejte typy akcí nalezené ve značce. Pro každý typ akce volejte příslušné funkce a přidejte jeho přehledy:
function addDivContent(div, tag, json) {
// Adds the first 100 characters of the json that contains
// the tag's data. The user can click the text to show the
// full json. They can click it again to collapse the json.
var para = document.createElement('p');
para.textContent = String(json).substr(0, 100) + '...';
para.setAttribute('title', 'click to expand');
para.setAttribute('style', 'cursor: pointer;')
para.setAttribute('data-json', json);
para.addEventListener('click', function(e) {
var json = e.target.getAttribute('data-json');
if (e.target.textContent.length <= 103) { // 100 + '...'
e.target.textContent = json;
para.setAttribute('title', 'click to collapse');
}
else {
para.textContent = String(json).substr(0, 100) + '...';
para.setAttribute('title', 'click to expand');
}
});
div.appendChild(para);
var parsedJson = JSON.parse(json);
// Loop through all the actions in the tag and display them.
for (var j = 0; j < parsedJson.actions.length; j++) {
var action = parsedJson.actions[j];
var subSectionDiv = document.createElement('div');
subSectionDiv.setAttribute('class', 'subSection');
div.appendChild(subSectionDiv);
var h4 = document.createElement('h4');
h4.innerHTML = action.actionType;
subSectionDiv.appendChild(h4);
if (action.actionType === 'ImageResults') {
addImageWithWebSearchUrl(subSectionDiv, parsedJson.image, action);
}
else if (action.actionType === 'DocumentLevelSuggestions') {
addRelatedSearches(subSectionDiv, action.data.value);
}
else if (action.actionType === 'RelatedSearches') {
addRelatedSearches(subSectionDiv, action.data.value);
}
else if (action.actionType === 'PagesIncluding') {
addPagesIncluding(subSectionDiv, action.data.value);
}
else if (action.actionType === 'VisualSearch') {
addRelatedImages(subSectionDiv, action.data.value);
}
else if (action.actionType === 'Recipes') {
addRecipes(subSectionDiv, action.data.value);
}
else if (action.actionType === 'ShoppingSources') {
addShopping(subSectionDiv, action.data.offers);
}
else if (action.actionType === 'ProductVisualSearch') {
addProducts(subSectionDiv, action.data.value);
}
else if (action.actionType === 'TextResults') {
addTextResult(subSectionDiv, action);
}
else if (action.actionType === 'Entity') {
addEntity(subSectionDiv, action);
}
}
}
Zobrazení přehledů pro různé akce
Následující funkce zobrazují přehledy pro různé akce. Funkce buď poskytují odkaz, na který můžete kliknout, nebo kliknout na odkaz, který vám pošle webovou stránku s dalšími informacemi o obrázku. Tuto stránku hostuje Bing.com nebo původní web obrázku. V této aplikaci se nezobrazují všechna data přehledů. Pokud chcete zobrazit všechna pole dostupná pro přehled, podívejte se na odkazy na obrázky – vizuální vyhledávání .
Poznámka:
Na stránce musíte zobrazit minimální množství informací s přehledem. Další informace najdete v rozhraní API Bingu pro vyhledávání a zobrazení požadavků .
Související přehledy
Funkce addRelatedImages() vytvoří název pro každý web hostující související obrázek iterací v seznamu RelatedImages akcí a připojením <img> značky k vnějšku <div> pro každý z nich:
function addRelatedImages(div, images) {
var length = (images.length > 10) ? 10 : images.length;
// Set the title to the website that hosts the image. The title displays
// when the user hovers over the image.
// Make the image clickable. If the user clicks the image, they're taken
// to the image in Bing.com.
for (var j = 0; j < length; j++) {
var img = document.createElement('img');
img.setAttribute('src', images[j].thumbnailUrl + '&w=120&h=120');
img.setAttribute('style', 'margin: 20px 20px 0 0; cursor: pointer;');
img.setAttribute('title', images[j].hostPageDisplayUrl);
img.setAttribute('data-webSearchUrl', images[j].webSearchUrl)
img.addEventListener('click', function(e) {
var url = e.target.getAttribute('data-webSearchUrl');
window.open(url, 'foo');
})
div.appendChild(img);
}
}
Přehledy pro stránky
Funkce addPagesIncluding() vytvoří odkaz pro každý web hostující nahraný obrázek iterací v seznamu PagesIncluding akcí a připojením <img> značky k vnějšku <div> pro každý z nich:
// Display links to the first 5 webpages that include the image.
// TODO: Add 'more' link in case the user wants to see all of them.
function addPagesIncluding(div, pages) {
var length = (pages.length > 5) ? 5 : pages.length;
for (var j = 0; j < length; j++) {
var page = document.createElement('a');
page.text = pages[j].name;
page.setAttribute('href', pages[j].hostPageUrl);
page.setAttribute('style', 'margin: 20px 20px 0 0');
page.setAttribute('target', '_blank')
div.appendChild(page);
div.appendChild(document.createElement('br'));
}
}
Související hledání – přehledy
Funkce addRelatedSearches() vytvoří odkaz na web hostující image tím, že iteruje seznam RelatedSearches akcí a pro každou z nich připojí <img> značku k vnějšku <div> :
// Display the first 10 related searches. Include a link with the image
// that when clicked, takes the user to Bing.com and displays the
// related search results.
// TODO: Add 'more' link in case the user wants to see all of them.
function addRelatedSearches(div, relatedSearches) {
var length = (relatedSearches.length > 10) ? 10 : relatedSearches.length;
for (var j = 0; j < length; j++) {
var childDiv = document.createElement('div');
childDiv.setAttribute('class', 'stackLink');
div.appendChild(childDiv);
var img = document.createElement('img');
img.setAttribute('src', relatedSearches[j].thumbnail.url + '&w=120&h=120');
img.setAttribute('style', 'margin: 20px 20px 0 0;');
childDiv.appendChild(img);
var relatedSearch = document.createElement('a');
relatedSearch.text = relatedSearches[j].displayText;
relatedSearch.setAttribute('href', relatedSearches[j].webSearchUrl);
relatedSearch.setAttribute('target', '_blank');
childDiv.appendChild(relatedSearch);
}
}
Přehledy recepty
Funkce addRecipes() vytvoří odkaz pro každý recept vrácený iterací v seznamu Recipes akcí a připojením <img> značky k vnějšku <div> pro každý z nich:
// Display links to the first 10 recipes. Include the recipe's rating,
// if available.
// TODO: Add 'more' link in case the user wants to see all of them.
function addRecipes(div, recipes) {
var length = (recipes.length > 10) ? 10 : recipes.length;
for (var j = 0; j < length; j++) {
var para = document.createElement('p');
var recipe = document.createElement('a');
recipe.text = recipes[j].name;
recipe.setAttribute('href', recipes[j].url);
recipe.setAttribute('style', 'margin: 20px 20px 0 0');
recipe.setAttribute('target', '_blank')
para.appendChild(recipe);
if (recipes[j].hasOwnProperty('aggregateRating')) {
var span = document.createElement('span');
span.textContent = 'rating: ' + recipes[j].aggregateRating.text;
para.appendChild(span);
}
div.appendChild(para);
}
}
Přehledy nakupování
Funkce addShopping() vytvoří odkaz pro všechny vrácené nákupní výsledky iterací <img> v seznamu RelatedImages akcí a připojením značky k vnějšku <div> pro každou z nich:
// Display links for the first 10 shopping offers.
// TODO: Add 'more' link in case the user wants to see all of them.
function addShopping(div, offers) {
var length = (offers.length > 10) ? 10 : offers.length;
for (var j = 0; j < length; j++) {
var para = document.createElement('p');
var offer = document.createElement('a');
offer.text = offers[j].name;
offer.setAttribute('href', offers[j].url);
offer.setAttribute('style', 'margin: 20px 20px 0 0');
offer.setAttribute('target', '_blank')
para.appendChild(offer);
var span = document.createElement('span');
span.textContent = 'by ' + offers[j].seller.name + ' | ' + offers[j].price + ' ' + offers[j].priceCurrency;
para.appendChild(span);
div.appendChild(para);
}
}
Přehledy produktů
Funkce addProducts() vytvoří odkaz na všechny vrácené výsledky produktů iterací v seznamu Products akcí a připojením <img> značky k vnějšku <div> pro každý z nich:
// Display the first 10 related products. Display a clickable image of the
// product that takes the user to Bing.com search results for the product.
// If there are any offers associated with the product, provide links to the offers.
// TODO: Add 'more' link in case the user wants to see all of them.
function addProducts(div, products) {
var length = (products.length > 10) ? 10 : products.length;
for (var j = 0; j < length; j++) {
var childDiv = document.createElement('div');
childDiv.setAttribute('class', 'stackLink');
div.appendChild(childDiv);
var img = document.createElement('img');
img.setAttribute('src', products[j].thumbnailUrl + '&w=120&h=120');
img.setAttribute('title', products[j].name);
img.setAttribute('style', 'margin: 20px 20px 0 0; cursor: pointer;');
img.setAttribute('data-webSearchUrl', products[j].webSearchUrl)
img.addEventListener('click', function(e) {
var url = e.target.getAttribute('data-webSearchUrl');
window.open(url, 'foo');
})
childDiv.appendChild(img);
if (products[j].insightsMetadata.hasOwnProperty('aggregateOffer')) {
if (products[j].insightsMetadata.aggregateOffer.offerCount > 0) {
var offers = products[j].insightsMetadata.aggregateOffer.offers;
// Show all the offers. Not all markets provide links to offers.
for (var i = 0; i < offers.length; i++) {
var para = document.createElement('p');
var offer = document.createElement('a');
offer.text = offers[i].name;
offer.setAttribute('href', offers[i].url);
offer.setAttribute('style', 'margin: 20px 20px 0 0');
offer.setAttribute('target', '_blank')
para.appendChild(offer);
var span = document.createElement('span');
span.textContent = 'by ' + offers[i].seller.name + ' | ' + offers[i].price + ' ' + offers[i].priceCurrency;
para.appendChild(span);
childDiv.appendChild(para);
}
}
else { // Otherwise, just show the lowest price that Bing found.
var offer = products[j].insightsMetadata.aggregateOffer;
var para = document.createElement('p');
para.textContent = `${offer.name} | ${offer.lowPrice} ${offer.priceCurrency}`;
childDiv.appendChild(para);
}
}
}
}
Přehledy textResult
Funkce addTextResult() zobrazí veškerý text rozpoznaný na obrázku:
function addTextResult(div, action) {
var text = document.createElement('p');
text.textContent = action.displayName;
div.appendChild(text);
}
Funkce addEntity() zobrazí odkaz, který uživatele přenese do Bing.com, kde může získat podrobnosti o typu entity na obrázku, pokud se nějaké zjistilo:
// If the image is of a person, the tag might include an entity
// action type. Display a link that takes the user to Bing.com
// where they can get details about the entity.
function addEntity(div, action) {
var entity = document.createElement('a');
entity.text = action.displayName;
entity.setAttribute('href', action.webSearchUrl);
entity.setAttribute('style', 'margin: 20px 20px 0 0');
entity.setAttribute('target', '_blank');
div.appendChild(entity);
}
Funkce addImageWithWebSearchUrl() zobrazí kliknutím na obrázek <div> , který uživatele přenese do výsledků hledání na Bing.com:
function addImageWithWebSearchUrl(div, image, action) {
var img = document.createElement('img');
img.setAttribute('src', image.thumbnailUrl + '&w=120&h=120');
img.setAttribute('style', 'margin: 20px 20px 0 0; cursor: pointer;');
img.setAttribute('data-webSearchUrl', action.webSearchUrl);
img.addEventListener('click', function(e) {
var url = e.target.getAttribute('data-webSearchUrl');
window.open(url, 'foo');
})
div.appendChild(img);
}
Přidání stylu CSS
Přidejte do <head> značky následující <style> oddíl pro uspořádání rozložení webové stránky:
<style>
.thumb {
height: 75px;
border: 1px solid #000;
}
.stackLink {
width:180px;
min-height:210px;
display:inline-block;
}
.stackLink a {
float:left;
clear:left;
}
.section {
float:left;
display:none;
}
.subSection {
clear:left;
float:left;
}
</style>