mcloh/poc-grok-websearch
1
0
Fork 0
mirror of https://github.com/mcloh/poc-grok-websearch.git synced 2026-11-05 22:04:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add OCI Grok web-search chatbot example and selected validation evidence

Browse Source
This commit is contained in:
Marcos Lohmann
2026-10-14 11:01:59 -03:00
commit 53ebadd8de
12 changed files with 357 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
static/app.js Normal file
View File

@@ -0,0 +1,4 @@
const form=document.querySelector('#form'),box=document.querySelector('#messages'),prompt=document.querySelector('#prompt'),status=document.querySelector('#status'),send=document.querySelector('#send');let history=[];
function formatAnswer(div,text){div.textContent='';const pattern=/\*\*([^*]+)\*\*|\[([^\]]+)\]\((https?:\/\/[^)\s]+)\)/g;let last=0;for(const m of text.matchAll(pattern)){div.append(document.createTextNode(text.slice(last,m.index)));const el=document.createElement(m[1]?'strong':'a');el.textContent=m[1]||m[2];if(!m[1]){el.href=m[3];el.target='_blank';el.rel='noopener noreferrer';}div.append(el);last=m.index+m[0].length;}div.append(document.createTextNode(text.slice(last)));}
function turn(text,role){const div=document.createElement('div');div.className='turn '+role;div.textContent=text;box.append(div);return div;}
form.addEventListener('submit',async e=>{e.preventDefault();const message=prompt.value.trim();if(!message)return;turn(message,'user');prompt.value='';send.disabled=true;status.textContent='Consultando Grok e pesquisando na web…';try{const r=await fetch('./api/chat',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({message,history:history.slice(-12)})});if(!r.ok)throw Error(`Erro HTTP ${r.status}`);const d=await r.json();const div=turn(d.answer||'Sem texto na resposta.','assistant');formatAnswer(div,d.answer||'Sem texto na resposta.');const meta=document.createElement('div');meta.className='meta';meta.textContent=`${d.seconds}s · ${d.web_search_calls.length} chamadas de busca · ${d.citations.length} citações`;div.append(meta);for(const c of d.citations){try{const url=new URL(c.url);if(!['https:','http:'].includes(url.protocol))continue;const a=document.createElement('a');a.href=url.href;a.target='_blank';a.rel='noopener noreferrer';a.textContent=c.title && c.title!=='1'?c.title:url.hostname;div.append(document.createElement('br'),a);}catch{}}const details=document.createElement('details');const summary=document.createElement('summary');summary.textContent='Evidências da ferramenta';const pre=document.createElement('pre');pre.textContent=JSON.stringify({response_id:d.response_id,usage:d.usage,web_search_calls:d.web_search_calls},null,2);details.append(summary,pre);div.append(details);history.push({role:'user',content:message},{role:'assistant',content:d.answer});status.textContent='Pesquisa concluída';}catch(err){turn(err.message,'assistant');status.textContent='Não foi possível concluir';}finally{send.disabled=false;prompt.focus();}});

3
static/index.html Normal file
View File

@@ -0,0 +1,3 @@
<!doctype html><html lang="pt-BR"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Grok · OCI Web Search</title><style>
*{box-sizing:border-box}body{margin:0;background:#0b1020;color:#e9eef8;font:16px system-ui}main{max-width:900px;margin:auto;padding:32px 20px}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #28324a;padding-bottom:24px}h1{font-size:26px;margin:0}small{color:#9baac4}.badge{border:1px solid #2c675c;color:#8ce5c7;border-radius:20px;padding:8px 12px;font-size:12px}#messages{min-height:50vh;padding-top:24px}.turn{padding:20px;background:#141d32;border:1px solid #27334d;border-radius:14px;margin:14px 0;white-space:pre-wrap;overflow-wrap:anywhere}.user{background:#1b2944;margin-left:12%}.meta{font-size:12px;color:#8ce5c7;margin-top:12px}a{color:#9bcaff}textarea{width:100%;background:#141d32;color:white;border:1px solid #354563;border-radius:12px;padding:16px;font:inherit;resize:vertical}button{background:#98e9d0;border:0;padding:12px 20px;border-radius:10px;font-weight:700;cursor:pointer}button:disabled{opacity:.5}.actions{display:flex;justify-content:space-between;margin-top:12px}#status{color:#adb9d0;font-size:13px}details{margin-top:12px;font-size:12px}pre{white-space:pre-wrap}footer{margin-top:24px;color:#8392ad;font-size:12px}
</style><main><header><div><h1>Grok / Web Search</h1><small>Respostas atuais, fontes verificáveis · POC</small></div><span class="badge">OCI · grok-4.3</span></header><section id="messages"><div class="turn">O que você quer descobrir hoje? Pergunte sobre notícias ou fatos recentes. A busca web nativa está habilitada.</div></section><form id="form"><textarea id="prompt" rows="3" maxlength="8000" placeholder="Quais são as notícias de hoje? Cite fontes e datas." required></textarea><div class="actions"><span id="status">Pronto para pesquisar</span><button id="send">Enviar →</button></div></form><footer>Python + JavaScript · Inferência pela OCI · Histórico apenas nesta página. As respostas podem conter erros; confira as fontes.</footer></main><script src="./app.js"></script></html>