Можете ли вы использовать API Графика знаний, чтобы воспроизвести то, что показано в поиске Google?

Question

KG API хорошо работает с четко определенными объектами, такими как люди или места.Однако, когда я смотрю что-то более абстрактное, например, «Водное поло» или «Дом Тюдоров», лучший результат API не так точен, в то время как главная страница Google обрабатывает их хорошо.

Iхотите ввести запрос и воспроизвести просто панель графа знаний, которая обычно отображается рядом с поиском Google.Есть ли способ сделать это?

var getJSON = function(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open('get', url, true);
    xhr.responseType = 'json';
    xhr.onload = function() {
      var status = xhr.status;
      if (status == 200) {
        resolve(xhr.response);
      } else {
        reject(status);
      }
    };
    xhr.send();
  });
};

var counter;
var resultType;

document.getElementById('btn').onclick = function() {
	counter = 0;
	document.getElementById('article').innerHTML = "";
  document.getElementById('description').innerHTML = "";
  document.getElementById('detail').innerHTML = "";
  document.getElementById('image').innerHTML = "";
	var val = document.getElementById('queryname').value;
  resultType = '';
  if(document.getElementById('btn3').checked){
  	resultType = '&types=Person';
  }
  if(document.getElementById('btn4').checked){
  	resultType = '&types=Place';
  }
  if(document.getElementById('btn5').checked){
  	resultType = '&types=Organization';
  }
	getJSON('https://kgsearch.googleapis.com/v1/entities:search?limit=10&query=' + val + resultType +	'&key=AIzaSyAGnHQPVS4lyoCykENphnHtUpKdgWXXu6o').then(function(data) {
		article.innerHTML = data.itemListElement[counter].result.name;
		description.innerHTML = data.itemListElement[counter].result.description;
		detail.innerHTML = data.itemListElement[counter].result.detailedDescription.articleBody;
		img = document.createElement('img');
    img.src = data.itemListElement[counter].result.image.contentUrl;
    img.style.maxWidth="245px";
    image.appendChild(img);
	}, function(status) { //error detection....
  	alert('Something went wrong.');
	});
}

document.getElementById('btn2').onclick = function() {
	counter = counter+1;
	document.getElementById('article').innerHTML = "";
  document.getElementById('description').innerHTML = "";
  document.getElementById('detail').innerHTML = "";
  document.getElementById('image').innerHTML = "";
	var val = document.getElementById('queryname').value;
  resultType = '';
  if(document.getElementById('btn3').checked){
  	resultType = '&types=Person';
  }
  if(document.getElementById('btn4').checked){
  	resultType = '&types=Place';
  }
  if(document.getElementById('btn4').checked){
  	resultType = '&types=Organization';
  }
	getJSON('https://kgsearch.googleapis.com/v1/entities:search?limit=10&query=' + val + 	resultType +	'&key=AIzaSyAGnHQPVS4lyoCykENphnHtUpKdgWXXu6o').then(function(data) {
		article.innerHTML = data.itemListElement[counter].result.name;
		description.innerHTML = data.itemListElement[counter].result.description;
		detail.innerHTML = data.itemListElement[counter].result.detailedDescription.articleBody;
		img = document.createElement('img');
    img.src = data.itemListElement[counter].result.image.contentUrl;
    img.style.maxWidth="245px";
    image.appendChild(img);
	}, function(status) { //error detection....
  	alert('Something went wrong.');
	});
}

document.getElementById('btn6').onclick = function() {
	document.getElementById('article').innerHTML = "";
  document.getElementById('description').innerHTML = "";
  document.getElementById('detail').innerHTML = "";
  document.getElementById('image').innerHTML = "";
}

body {
    background-color: #212320;
}
p1 {
    font-family: "Times New Roman";
    font-size: 40px;
    color: #acaeab;
}
p2 {
    font-family: "Times New Roman";
    font-size: 20px;
    font-style: italic;
    color: #acaeab;
}
p3 {
    font-family: "Helvetica";
    font-size: 15px;
    color: #acaeab;
}
#container {
  min-height: 100%;
}
#footer {
   position:absolute;
   bottom:0;
}

<div id="container">
<p1><div id="article" style="margin-top:30px; margin-bottom:15px; text-align:center"></div></p1>
<p2><div id="description" style="margin-bottom:30px; text-align:center; width:51%; float:left"></div></p2>
<p3><div id="detail" style="padding-left:10px; width:51%; float:left"></div></p3>
<div id="image" style="width:47%; float:right; text-align:center"></div>
<div id="footer">
<form>
    <input type="text" id="queryname" value=""     onkeypress="return searchKeyPress(event);" />
    <input type="button" id="btn" value="GO" />
    <input type="button" id="btn2" value="NEXT" />
    <button type="button" style="margin-left:30px;" disabled> 
    PERSON</button>
    <input type="checkbox" id="btn3" />
    <button type="button" disabled> PLACE</button>
    <input type="checkbox" id="btn4" />
    <button type="button" disabled> ORG</button>
    <input type="checkbox" id="btn5" />
    <input type="button" id="btn6" value="CLEAR" />
</form>
</div>
</div>
<script>
function searchKeyPress(e)
{
    // look for window.event in case event isn't passed in
    e = e || window.event;
    if (e.keyCode == 13)
    {
        document.getElementById('btn').click();
        return false;
    }
    return true;
}
</script>