Como usar os pontos de entrada da Pesquisa Google
Para usar os pontos de entrada da Pesquisa Google, é preciso exibir um ponto de entrada com base na consulta de pesquisa incluída nos metadados da resposta embasada. A resposta inclui:
- "content": resposta gerada pelo LLM.
- "searchQuery": a consulta que será usada para o ponto de entrada da Pesquisa Google.
Por exemplo, no snippet de código a seguir, o Gemini responde a um comando baseado na Pesquisa Google que pergunta sobre um tipo de planta tropical.
"predictions": [
{
"content": "Monstera is a type of vine that thrives in bright indirect light…",
"groundingMetadata": {
"webSearchQueries": ["What's a monstera?"],
}
}
]
Use pontos de entrada da Pesquisa Google para exibir essa saída.
Requisitos para pontos de entrada da Pesquisa Google
O que fazer:
- Exiba o ponto de entrada exatamente como fornecido, sem modificações, em conformidade com os requisitos de exibição abaixo.
- Isso leva os usuários diretamente para a página de resultados da Pesquisa Google (SRP, na sigla em inglês) quando eles interagirem com o ponto de entrada.
O que não fazer:
- Inclua telas intersticiais ou etapas adicionais entre o toque do usuário e a exibição do SRP.
- Mostre outros resultados ou sugestões da pesquisa ao lado do ponto de entrada ou da resposta do LLM fundamentada associada.
Requisitos de exibição
- Mostre o ponto de entrada exatamente como ele foi fornecido e não modifique as cores, as fontes ou a aparência. Verifique se o ponto de entrada é renderizado conforme especificado nas simulações a seguir, incluindo os modos claro e escuro:
- Sempre que uma resposta fundamentada for exibida, o ponto de entrada correspondente da Pesquisa Google deverá permanecer visível.
- Branding (construção da marca): é necessário seguir rigorosamente as Diretrizes do Google para o uso de características da marca do Google por terceiros.
- Os pontos de entrada da Pesquisa Google precisam ter, no mínimo, a largura total da resposta embasada.
Comportamento ao tocar
Quando um usuário toca no ícone, ele é direcionado para uma página de resultados da Pesquisa Google (SRP) com o termo de pesquisa exibido no ícone. O SRP pode ser aberto no navegador no app ou em um app de navegador separado. É importante não minimizar, remover ou obstruir a exibição do SRP de maneira alguma. O modelo animado a seguir ilustra a interação do toque para o SRP.
Código para implementar um ponto de entrada da Pesquisa Google
O exemplo e os estilos do modelo a seguir renderizam um ponto de entrada da Pesquisa Google para o termo de pesquisa usado para embasamento em conformidade com os requisitos listados.
Para ajudar a isolar o estilo CSS, recomendamos incorporá-lo em um Shadow DOM no local apropriado do aplicativo.
O código para criar um shadow DOM pode usar o seguinte formato:
cs
const shadow = element.attachShadow({mode: 'open'});
shadow.innerHTML = 'content';
Neste exemplo, o elemento seria onde você quer colocar o shadow DOM, e o conteúdo é o seguinte exemplo de código.
Faça as seguintes substituições de variáveis:
- URL_ENCODED_SEARCH_QUERY: uma versão codificada pelo URL de
groundingMetadata.searchQuery
. - SEARCH_TERM: o primeiro elemento de
groundingMetadata.searchQuery
.
<style>
.container {
align-items: center;
border-radius: 8px;
display: flex;
font-family: Google Sans, Roboto, sans-serif;
font-size: 14px;
line-height: 20px;
padding: 8px 12px;
}
.chip {
display: inline-block;
border: solid 1px;
border-radius: 16px;
min-width: 14px;
padding: 5px 16px;
text-align: center;
user-select: none;
margin: 0 8px;
-webkit-tap-highlight-color: transparent;
}
.carousel {
overflow: auto;
scrollbar-width: none;
white-space: nowrap;
margin-right: -12px;
}
.headline {
display: flex;
margin-right: 4px;
}
.gradient-container {
position: relative;
}
.gradient {
position: absolute;
transform: translate(3px, -9px);
height: 36px;
width: 9px;
}
@media (prefers-color-scheme: light) {
.container {
background-color: #fafafa;
box-shadow: 0 0 0 1px #0000000f;
}
.headline-label {
color: #1f1f1f;
}
.chip {
background-color: #ffffff;
border-color: #d2d2d2;
color: #5e5e5e;
text-decoration: none;
}
.chip:hover {
background-color: #f2f2f2;
}
.chip:focus {
background-color: #f2f2f2;
}
.chip:active {
background-color: #d8d8d8;
border-color: #b6b6b6;
}
.logo-dark {
display: none;
}
.gradient {
background: linear-gradient(90deg, #fafafa 15%, #fafafa00 100%);
}
}
@media (prefers-color-scheme: dark) {
.container {
background-color: #1f1f1f;
box-shadow: 0 0 0 1px #ffffff26;
}
.headline-label {
color: #fff;
}
.chip {
background-color: #2c2c2c;
border-color: #3c4043;
color: #fff;
text-decoration: none;
}
.chip:hover {
background-color: #353536;
}
.chip:focus {
background-color: #353536;
}
.chip:active {
background-color: #464849;
border-color: #53575b;
}
.logo-light {
display: none;
}
.gradient {
background: linear-gradient(90deg, #1f1f1f 15%, #1f1f1f00 100%);
}
}
</style>
<div class="container">
<div class="headline">
<svg class="logo-light" width="18" height="18" viewBox="9 9 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M42.8622 27.0064C42.8622 25.7839 42.7525 24.6084 42.5487 23.4799H26.3109V30.1568H35.5897C35.1821 32.3041 33.9596 34.1222 32.1258 35.3448V39.6864H37.7213C40.9814 36.677 42.8622 32.2571 42.8622 27.0064V27.0064Z" fill="#4285F4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.3109 43.8555C30.9659 43.8555 34.8687 42.3195 37.7213 39.6863L32.1258 35.3447C30.5898 36.3792 28.6306 37.0061 26.3109 37.0061C21.8282 37.0061 18.0195 33.9811 16.6559 29.906H10.9194V34.3573C13.7563 39.9841 19.5712 43.8555 26.3109 43.8555V43.8555Z" fill="#34A853"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.6559 29.8904C16.3111 28.8559 16.1074 27.7588 16.1074 26.6146C16.1074 25.4704 16.3111 24.3733 16.6559 23.3388V18.8875H10.9194C9.74388 21.2072 9.06992 23.8247 9.06992 26.6146C9.06992 29.4045 9.74388 32.022 10.9194 34.3417L15.3864 30.8621L16.6559 29.8904V29.8904Z" fill="#FBBC05"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.3109 16.2386C28.85 16.2386 31.107 17.1164 32.9095 18.8091L37.8466 13.8719C34.853 11.082 30.9659 9.3736 26.3109 9.3736C19.5712 9.3736 13.7563 13.245 10.9194 18.8875L16.6559 23.3388C18.0195 19.2636 21.8282 16.2386 26.3109 16.2386V16.2386Z" fill="#EA4335"/>
</svg>
<svg class="logo-dark" width="18" height="18" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="23" fill="#FFF" r="22"/>
<path d="M33.76 34.26c2.75-2.56 4.49-6.37 4.49-11.26 0-.89-.08-1.84-.29-3H24.01v5.99h8.03c-.4 2.02-1.5 3.56-3.07 4.56v.75l3.91 2.97h.88z" fill="#4285F4"/>
<path d="M15.58 25.77A8.845 8.845 0 0 0 24 31.86c1.92 0 3.62-.46 4.97-1.31l4.79 3.71C31.14 36.7 27.65 38 24 38c-5.93 0-11.01-3.4-13.45-8.36l.17-1.01 4.06-2.85h.8z" fill="#34A853"/>
<path d="M15.59 20.21a8.864 8.864 0 0 0 0 5.58l-5.03 3.86c-.98-2-1.53-4.25-1.53-6.64 0-2.39.55-4.64 1.53-6.64l1-.22 3.81 2.98.22 1.08z" fill="#FBBC05"/>
<path d="M24 14.14c2.11 0 4.02.75 5.52 1.98l4.36-4.36C31.22 9.43 27.81 8 24 8c-5.93 0-11.01 3.4-13.45 8.36l5.03 3.85A8.86 8.86 0 0 1 24 14.14z" fill="#EA4335"/>
</svg>
<div class="gradient-container"><div class="gradient"></div></div>
</div>
<div class="carousel">
<a class="chip" href="https://www.google.com/search?q=<var>URL_ENCODED_SEARCH_QUERY</var>&client=app-vertex-grounding&safesearch=active">
<var>SEARCH_TERM</var>
</a>
</div>
</div>
</pre>
A seguir
- Saiba como enviar solicitações de comandos de chat.
- Saiba mais sobre as práticas recomendadas de IA responsável e os filtros de segurança da Vertex AI.
- Para aprender a embasar os modelos PaLM, consulte Embasamento na Vertex AI.