# DTA VISION OCR

Biblioteca para facilitar a extração de texto de qualquer imagem, parametrizada pelo formulário para extrair um JSON.

## Como instalar

```bash
npm install dta-vision-ocr

ou

yarn add dta-vision-ocr

Como usar

É necessário possuir um código de projeto para uso. Após obtenção do código do projeto, basta seguir os passos abaixo.

Uso no HTML

<po-button p-label="Abrir DTA Vision QrCode" (p-click)="abrirDtaVision()" p-icon="ph ph-qr-code"></po-button>

  @if(this.habilitarModalOcr) {
    <dta-vision-ocr #webAppModal
      [idDTAVision]="idTotvsVision"
      [idProjeto]="idProjeto"
      [user]="user"
      [contingency]="contingency"
      [listButtonsDocument]="buttonList"
      (informacaoEnviada)="receberInformacao({ menssagem
        : $event.menssagem, uniqueKey: $event.uniqueKey})">
    </dta-vision-ocr>
  }

Para TypeScript

  standalone: true,
  imports: [
    DTAVisionOCRComponent //se standalone for false importe no seu module.
  ],
idDta = "";
idProjeto = "";
habilitarModalOcr = false;
user = "";
contingency = "";

@ViewChild('webAppModal') webAppModal?: DTAVisionOCRComponent;


abrirDtaVision() {
  this.habilitarModalOcr = true;
  this.webAppModal?.openWebAppModal();
}

// Exemplo de buttonList
   buttonList : ButtonDocumentModel[] = [
    {
      "idButton": "01",
      "nameButton": "Dados Pessoais",
      "imageReturn": true,
      "userFields": [
        {
          "fieldName": "name",
          "fieldDescription": "Nome do usuario",
          "fieldType": "string"
        },
        {
          "fieldName": "cpf",
          "fieldDescription": "Cpf do usuario",
          "fieldType": "string"
        },
        {
          "fieldName": "validade",
          "fieldDescription": "Data de validade da carteira",
          "fieldType": "string"
        },
        {
          "fieldName": "dataNascimento",
          "fieldType": "string"
        }
      ]
    },
    {
      "idButton": "02",
      "nameButton": "Historico Escolar",
      "imageReturn": false,
      "userFields": [
        {
          "fieldName": "alunoInfo",
          "fieldType": "object",
          "subFields": [
            {
              "fieldName": "nomeAluno",
              "fieldDescription": "Nome do aluno",
              "fieldType": "string"
            },
            {
              "fieldName": "matricula",
              "fieldDescription": "Matricula do aluno",
              "fieldType": "string"
            }
          ]
        },
        {
          "fieldName": "disciplinas",
          "fieldType": "array",
           "subFields": [
            {
              "fieldName": "disciplina",
              "fieldDescription": "Nome da discipline",
              "fieldType": "string"
            },
            {
              "fieldName": "nota",
              "fieldDescription": "Nota do aluno",
              "fieldType": "string"
            },
            {
              "fieldName": "cargaHoraria",
              "fieldDescription": "Carga horario do aluno",
              "fieldType": "string"
            },
            {
              "fieldName": "credito",
              "fieldDescription": "Credito do aluno",
              "fieldType": "string"
            }
          ]
        }
      ]
    }
  ]

Para facilitar a criação do Json acima

https://html-teste-pi.vercel.app/

receberInformacao(informacao: { menssagem: DocumentResponse; uniqueKey: number; }) {
  let parsedResponse;
  try {
    parsedResponse = JSON.parse(informacao.menssagem.ocrResponse);
  } catch (error) {
    console.error(`Erro ao desserializar ${informacao.menssagem.idButton}:`, error);
    return;
  }

  switch (informacao.menssagem.idButton) {
    case "1":
      const dadosPessoais = parsedResponse as DadosPessoais;
      // Preencher os dados pessoais no formulário
      break;
    case "2":
      const historicoEscolar = parsedResponse as HistoricoEscolar;
      // Preencher o histórico escolar no formulário
      break;
    default:
      console.warn(`Não existe o ID do botão: ${informacao.menssagem.idButton}`);
      break;
  }
}

Explicação do buttonList

• idButton: Identificador único para o botão. Através dele vai ser usado para recupera o botão com switch
• nameButton: Nome exibido no botão.
• imageReturn: Define se a imagem deve ser retornada.
• userFields: Lista de campos que serão extraídos pela OCR.
  • fieldName: Nome do campo.
  • fieldDescription: Descrição do campo (Seja detalhista)
  • fieldType: Tipo de dado esperado.

Dados experados no exemplo

export interface DadosPessoais {
    name: string;
    cpf: string;
}

export interface HistoricoEscolar {
  alunoInfo: AlunoInfo;
  disciplinas: Disciplina[];
}

export interface AlunoInfo {
  nomeAluno: string;
  curso: string;
}

export interface Disciplina {
  disciplina: string;
  nota: string;
  cargaHoraria: string;
  credito: string;
}

Uso do projeto no stackblitz

https://stackblitz.com/~/github.com/yuriduartetotvs/dtaVisionStackBlitz