Pular para o conteúdo
Iara Syncfusion Adapter

Setup Completo com IA

Visão Geral

Este exemplo demonstra uma integração completa do Iara Syncfusion Adapter com todas as funcionalidades de IA habilitadas e configuradas.

Código Completo

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Iara Adapter - Setup Completo com IA</title>


    <!-- Syncfusion CSS - Versão 26.2.14 -->
    <link href="https://cdn.syncfusion.com/ej2/26.2.14/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.14/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.14/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.14/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.14/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.14/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.14/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.14/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.14/ej2-documenteditor/styles/material.css" rel="stylesheet" />


    <style>
      body {
        margin: 0;
        padding: 20px;
        font-family: Arial, sans-serif;
        background: #f5f5f5;
      }
      .container {
        max-width: 1400px;
        margin: 0 auto;
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      }
      h1 {
        color: #0066cc;
        margin-top: 0;
      }
      .controls {
        margin: 20px 0;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 4px;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }
      .controls button {
        padding: 8px 16px;
        background: #0066cc;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
      }
      .controls button:hover {
        background: #0052a3;
      }
      #editor-wrapper {
        position: relative;
        height: 700px;
        border: 1px solid #ddd;
        border-radius: 4px;
      }
      #editor-container {
        height: 100%;
      }
      .status {
        margin: 10px 0;
        padding: 10px;
        border-radius: 4px;
        font-size: 14px;
      }
      .status.success { background: #d4edda; color: #155724; }
      .status.error { background: #f8d7da; color: #721c24; }
      .status.info { background: #d1ecf1; color: #0c5460; }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>🤖 Iara Syncfusion Adapter - IA Completa</h1>


      <div id="status" class="status info">Inicializando...</div>


      <div class="controls">
        <button onclick="exportHTML()">📄 Exportar HTML</button>
        <button onclick="exportText()">📝 Exportar Texto</button>
        <button onclick="exportRTF()">📋 Exportar RTF</button>
        <button onclick="clearEditor()">🗑️ Limpar</button>
        <button onclick="insertTemplate()">📋 Inserir Template</button>
      </div>


      <div id="editor-wrapper">
        <div id="editor-container"></div>
      </div>
    </div>


    <!-- Syncfusion Scripts - Versão 26.2.14 -->
    <script src="https://cdn.syncfusion.com/ej2/26.2.14/dist/ej2.min.js"></script>


    <!-- Iara Speech SDK -->
    <script src="https://cdn.iarahealth.com/sdk/javascript/latest/iara-speech.min.js"></script>


    <!-- Iara Components Library -->
    <script src="https://dev.components.iarahealth.com/components-lib.js" type="module"></script>


    <!-- Iara Syncfusion Adapter -->
    <script type="module">
      import { IaraSyncfusionAdapter } from 'https://unpkg.com/@iarastt/adapters@latest/dist/adapters.mjs';


      const statusEl = document.getElementById('status');
      let adapter = null;


      function updateStatus(message, type = 'info') {
        statusEl.textContent = message;
        statusEl.className = `status ${type}`;
      }


      // Criar editor Syncfusion
      updateStatus('Criando editor Syncfusion...', 'info');


      ej.documenteditor.DocumentEditorContainer.Inject(
        ej.documenteditor.Toolbar
      );


      const editor = new ej.documenteditor.DocumentEditorContainer({
        enableToolbar: true,
        height: "100%",
        serviceUrl: "https://api.iarahealth.com/speech/syncfusion/api/documenteditor/",
      });
      editor.appendTo("#editor-container");


      // Criar e configurar recognition
      const recognition = new IaraSpeechRecognition();


      recognition.init({
        userId: 'seu-email@exemplo.com',        // ⚠️ SUBSTITUA com seu email
        apiToken: 'seu-token-aqui',             // ⚠️ SUBSTITUA com seu token
        lang: 'pt-BR',
        region: 'south-america',
        interimResults: true,
        useVAD: true,
        engine: 'Iara Desktop'
      })
      .done(function() {
        updateStatus('Recognition inicializado. Criando adapter com IA...', 'info');


        // Configuração completa com IA
        const config = {
          // Assistente de IA - COMPLETO
          assistant: {
            enabled: true,
            enableDiffHighlighting: true,
            impression: {
              itemizedOutput: true  // Formatar como lista
            },
            user_rules: {
              report: [
                'Usar terminologia médica padrão',
                'Incluir dados vitais quando disponíveis',
                'Seguir estrutura: Identificação, Anamnese, Exame Físico, Impressão',
                'Máximo de 1000 palavras'
              ],
              impression: [
                'Ser conciso e objetivo',
                'Listar achados em ordem de relevância',
                'Incluir recomendações de follow-up quando necessário',
                'Usar bullet points'
              ]
            },
            draggable: {
              containerId: '#editor-wrapper',
              defaultPosition: { x: 50, y: 50 }
            }
          },


          // Funcionalidades
          enableSpeechRecognition: true,
          saveReport: true,
          highlightInference: true,


          // Interface
          replaceToolbar: false,
          showFinishReportButton: true,
          showBookmarks: true,


          // Comportamento
          navigateAdditiveMode: 'use',


          // Aparência
          darkMode: false,
          language: 'pt-BR',
          zoomFactor: '100%',


          // Fonte
          font: {
            family: 'Arial',
            size: 12,
            availableFamilies: ['Arial', 'Times New Roman', 'Calibri', 'Verdana'],
            availableSizes: [10, 11, 12, 14, 16, 18, 20, 24]
          }
        };


        try {
          adapter = new IaraSyncfusionAdapter(
            editor.documentEditor,
            recognition,
            config
          );


          // Configurar callbacks
          adapter.onIaraCommand = function(command) {
            console.log('📌 Comando executado:', command);
            updateStatus(`Comando: ${command}`, 'info');
          };


          // Configurar listener para evento de salvamento
          addEventListener('IaraOnSaveReport', function(event) {
            console.log('💾 Salvando relatório...');
            updateStatus('Salvando relatório...', 'info');


            // Simular salvamento
            setTimeout(() => {
              updateStatus('✅ Relatório salvo com sucesso!', 'success');
            }, 1000);
          });


          updateStatus('✅ Tudo pronto! Use o microfone para ditar ou selecione texto para usar a IA.', 'success');


          // Tornar adapter global para funções de controle
          window.iaraAdapter = adapter;


        } catch (error) {
          updateStatus(`❌ Erro ao criar adapter: ${error.message}`, 'error');
          console.error(error);
        }
      })
      .fail(function(error) {
        updateStatus(`❌ Erro na inicialização: ${error.message}`, 'error');
        console.error(error);
      });


      // Nota: Métodos de navegação não estão disponíveis publicamente no adapter
      // A navegação entre campos é gerenciada internamente pelo adapter


      window.exportHTML = async function() {
        if (window.iaraAdapter) {
          const html = await window.iaraAdapter.contentManager.reader.getHtmlContent();
          console.log('HTML:', html);
          updateStatus('HTML exportado para console', 'success');
        }
      };


      window.exportRTF = async function() {
        if (window.iaraAdapter) {
            const rtf = await window.iaraAdapter.contentManager.reader.getRtfContent();
            console.log('RTF:', rtf);
            updateStatus('RTF exportado para console', 'success');
        }
      };


      window.exportText = async function() {
        if (window.iaraAdapter) {
          const text = await window.iaraAdapter.contentManager.reader.getPlainTextContent();
          console.log('Texto:', text);
          updateStatus('Texto exportado para console', 'success');
        }
      };


      window.clearEditor = async function() {
        if (window.iaraAdapter && confirm('Limpar todo o conteúdo?')) {
          await window.iaraAdapter.clearReport();
          updateStatus('Editor limpo', 'info');
        }
      };


      window.insertTemplate = async function() {
        if (window.iaraAdapter) {
          const template = `<div>
                <h2>RELATÓRIO MÉDICO</h2>
                <p><strong>Identificação:</strong> [CAMPO_NOME]</p>
                <p><strong>Data:</strong> ${new Date().toLocaleDateString('pt-BR')}</p>
                <h3>Anamnese</h3>
                <p>[CAMPO_ANAMNESE]</p>
                <h3>Exame Físico</h3>
                <p>[CAMPO_EXAME]</p>
                <h3>Impressão</h3>
                <p>[CAMPO_IMPRESSAO]</p>
            </div>
          `;
          await window.iaraAdapter.insertTemplate(template);
          updateStatus('Template inserido', 'success');
        }
      };
    </script>
  </body>
</html>

Recursos Demonstrados

✅ Assistente de IA completo com regras personalizadas

✅ Reconhecimento de voz com VAD

✅ Destaque de diferenças nas sugestões da IA

✅ Painel arrastável do assistente

✅ Auto-salvamento com callback

✅ Navegação entre campos

✅ Exportação em múltiplos formatos

✅ Templates dinâmicos

✅ Interface de controle customizada

Próximos Passos