Upload files to "/"
This commit is contained in:
245
fnc_26ai_html.sql
Normal file
245
fnc_26ai_html.sql
Normal file
@@ -0,0 +1,245 @@
|
||||
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;
|
||||
/
|
||||
Reference in New Issue
Block a user