245 lines
9.7 KiB
SQL
245 lines
9.7 KiB
SQL
create or replace FUNCTION fnc_26ai_html(p_query VARCHAR2,
|
|
p_top_k IN NUMBER default 20,
|
|
p_credential in varchar2 default 'OCI_CRED' )
|
|
RETURN CLOB IS
|
|
/*
|
|
|
|
Criado por: fernando.leal@oracle.com
|
|
Data: Oct/2025
|
|
Objetivo: demonstrar casos de uso do Oracle AI Database 26ai
|
|
|
|
v1 - geracao de codigo HTML a partir de dados obtidos com SelectAI - leal
|
|
|
|
begin
|
|
dbms_cloud_ai.create_profile(
|
|
profile_name => 'PROF_26AI_HTML_V1',
|
|
attributes =>
|
|
'{"provider": "oci",
|
|
"credential_name": "OCI_CRED",
|
|
"oci_compartment_id": "ocid1.compartment.oc1..aaaaaaaakvd4bq4b3n7yn3gjjqzfhsl62dec44tjvi2iwa3sugw5frgfpzea",
|
|
"region": "us-chicago-1",
|
|
"model": "meta.llama-4-maverick-17b-128e-instruct-fp8",
|
|
"oci_apiformat": "GENERIC",
|
|
"object_list": [
|
|
{"owner": "AICHAT1", "name":"TB_26AI_HTML"}
|
|
],
|
|
"comments": true,
|
|
"annotations": true,
|
|
"temperature": 0.1
|
|
}'
|
|
);
|
|
end;
|
|
|
|
*/
|
|
|
|
v_pre_prompt clob;
|
|
v_prompt clob;
|
|
params_genai CLOB;
|
|
output CLOB;
|
|
v_response clob;
|
|
v_response_sql clob;
|
|
v_pre_prompt2 clob;
|
|
v_select_ai_preprompt varchar2(4000) := ' . Não adicione nenhum filtro de data a menos que seja solicitado.';
|
|
v_select_ai_profile varchar2(20) := 'PROF_26AI_HTML_V1';
|
|
--
|
|
-- Modo debug
|
|
--
|
|
v_select_ai_debug_flag varchar2(1) := 'N';
|
|
|
|
BEGIN
|
|
|
|
begin
|
|
SELECT DBMS_CLOUD_AI.GENERATE(prompt => p_query || v_select_ai_preprompt ,
|
|
profile_name => v_select_ai_profile,
|
|
action => 'runsql') response
|
|
into v_response;
|
|
|
|
if v_select_ai_debug_flag = 'Y' then
|
|
SELECT DBMS_CLOUD_AI.GENERATE(prompt => p_query || v_select_ai_preprompt ,
|
|
profile_name => v_select_ai_profile,
|
|
action => 'showsql') response
|
|
into v_response_sql;
|
|
end if; -- fim v_select_ai_debug_flag
|
|
|
|
if v_response like 'Sorry%' or v_response like 'No data found%' then
|
|
v_response := '--' ;
|
|
end if;
|
|
exception
|
|
when others then
|
|
v_response := '-' ;
|
|
end;
|
|
|
|
--
|
|
-- pre requisito sao as credenciais definidas com nome OCI_CRED criadas a partir de dbms_vector.create_credential
|
|
--
|
|
-- para montar request body abaixo: https://docs.oracle.com/en-us/iaas/api/#/en/generative-ai-inference/20231130/datatypes/GenerateTextDetails
|
|
--
|
|
params_genai := '{
|
|
"provider" : "ocigenai",
|
|
"credential_name" : "' || p_credential || '",
|
|
"url" : "https://inference.generativeai.us-chicago-1.oci.oraclecloud.com/20231130/actions/chat",
|
|
"model": "meta.llama-4-maverick-17b-128e-instruct-fp8"}'; --
|
|
|
|
|
|
-- augmented prompt atraves do vetor criado no banco
|
|
v_pre_prompt := 'Você é um Desenvolvedor Front-End especialista em HTML5 semântico e acessível (WCAG).
|
|
Seu objetivo é criar estruturas HTML que sejam bem organizadas, lógicas e otimizadas para motores de busca (SEO).
|
|
#### REGRA: somente o HTML deve ser retornado.
|
|
#### EXEMPLO:
|
|
<!DOCTYPE html>
|
|
<html lang="pt-br">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Data Dashboard</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
.main-color {
|
|
color: #007bff;
|
|
}
|
|
.chart-container {
|
|
width: 100%;
|
|
height: 400px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid p-4">
|
|
<h1 class="main-color">Data Dashboard</h1>
|
|
<h4 class="text-secondary">Overview of Data</h4>
|
|
<div class="row mt-4">
|
|
<div class="col-md-3">
|
|
<div class="card border-0 shadow">
|
|
<div class="card-body text-center">
|
|
<h5 class="card-title">Total Transações</h5>
|
|
<h2 class="main-color">63,459,400</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card border-0 shadow">
|
|
<div class="card-body text-center">
|
|
<h5 class="card-title">Modalidades</h5>
|
|
<h2 class="main-color">5</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card border-0 shadow">
|
|
<div class="card-body text-center">
|
|
<h5 class="card-title">Mês/Ano</h5>
|
|
<h2 class="main-color">9</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card border-0 shadow">
|
|
<div class="card-body text-center">
|
|
<h5 class="card-title">Total Meses</h5>
|
|
<h2 class="main-color">9</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-4">
|
|
<div class="col-md-12">
|
|
<div class="card border-0 shadow">
|
|
<div class="card-body">
|
|
<canvas class="chart-container" id="lineChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-4">
|
|
<div class="col-md-12">
|
|
<div class="card border-0 shadow">
|
|
<div class="card-body">
|
|
<table id="table" class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>MES_ANO</th>
|
|
<th>MODAL</th>
|
|
<th>TRANSACOES</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>12025</td>
|
|
<td>BRT</td>
|
|
<td>642,600</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td>12025</td>
|
|
<td>Ônibus</td>
|
|
<td>1,800,000</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const data = [
|
|
{''ID'': 1, ''MES_ANO'': ''12025'', ''MODAL'': ''BRT'', ''TRANSACOES'': 642600},
|
|
{''ID'': 2, ''MES_ANO'': ''12025'', ''MODAL'': ''Ônibus'', ''TRANSACOES'': 1800000},
|
|
{''ID'': 3, ''MES_ANO'': ''12025'', ''MODAL'': ''Van'', ''TRANSACOES'': 167300},
|
|
{''ID'': 4, ''MES_ANO'': ''92025'', ''MODAL'': ''VLT'', ''TRANSACOES'': 984400}
|
|
];
|
|
|
|
new Chart(document.getElementById(''lineChart'').getContext(''2d''), {
|
|
type: ''line'',
|
|
data: {
|
|
labels: data.map(item => `${item.MES_ANO} - ${item.MODAL}`),
|
|
datasets: [{
|
|
label: ''Transações'',
|
|
data: data.map(item => item.TRANSACOES),
|
|
backgroundColor: ''rgba(0, 123, 255, 0.2)'',
|
|
borderColor: ''rgba(0, 123, 255, 1)'',
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
#### TAREFA 1: GERAÇÃO DE CÓDIGO HTML ####
|
|
Se a entrada do usuário for uma solicitação para criar um dashboard, sua saída DEVE seguir o seguinte formato:
|
|
- A saída conterá APENAS o código HTML.
|
|
- Crie insigths dos dados, exiba de forma com foco na inovação para surpreender o usuário.
|
|
- Não inclua explicações, texto introdutório, saudações ou blocos de Markdown como ```html.
|
|
- O código deve ser bem formatado, com indentação clara e usar tags semânticas (como <main>, <article>, <nav>, etc.).
|
|
- O insigth principal deve ser sempre exibido.
|
|
#### Sugestões:
|
|
1- Para prompt como "qual volume de transacao por mes?" traga no insigth o valor total do período.
|
|
2- Para prompt como "qual volume de transação por modalidade?" traga no insight o maior valor e menor valor encontrado entre as modalidades.
|
|
Dados que devem ser utilizados na criação do dashborad HTML: ';
|
|
|
|
v_pre_prompt2 := '{ "role": "user","content": "Dados": ' || v_response || ' "Pergunta": ' || p_query || '"}' ; -- sem ]'
|
|
|
|
v_prompt := v_pre_prompt || v_pre_prompt2 || ']';
|
|
|
|
output := dbms_vector_chain.utl_to_generate_text( replace(replace(replace(replace(v_prompt,chr(10),null),chr(13),null),'"',''),'''','') , json(params_genai));
|
|
|
|
|
|
RETURN output;
|
|
|
|
END;
|
|
/ |