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;
/