dta-vision-ocr

# 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 --save

ou

yarn add dta-vision-ocr --save

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)="abrirModalQrCode()" p-icon="ph ph-qr-code"></po-button>

<po-button p-label="Abrir DTA Vision Local" (p-click)="abrirModalList()" p-icon="ph ph-browser"></po-button>

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

@if(this.habilitarQrCode) {
    <dta-vision-ocr-qr-code #qrCodeModal
      [idDTAVision]="idDta"
      [idProjeto]="idProjeto"
      [user]="user"
      [listButtonsDocument]="buttonList"
      (informacaoEnviada)="receberInformacao({ menssagem: $event.menssagem, uniqueKey: $event.uniqueKey })">
    </dta-vision-ocr-qr-code>
}

Para TypeScript

idDta = "";
idProjeto = "";
habilitarLocal = false;
habilitarQrCode = false;
user = "";

@ViewChild('webAppModal') webAppModal?: DtaVisionOcrLocationComponent;
@ViewChild('qrCodeModal') qrCodeModal?: DTAVisionOcrQRCodeComponent;

// Exemplo de buttonList
buttonList: ButtonDocumentModel[] = [
  {
    idButton: '1', 
    nameButton: 'Dados Pessoais',
    imageReturn: false,
    userFields: [
      {
        fieldName: 'name',
        fieldType: 'string'
      },
      {
        fieldName: 'cpf',
        fieldType: 'string'
      },
    ]
  },
  {
    idButton: '2',
    nameButton: 'Dados de Histórico Escolar',
    imageReturn: true,
    userFields: [
      {
        fieldName: 'alunoInfo',
        fieldType: 'object',
        userArray: [
          {
            fieldName: 'nomeAluno',
            fieldType: 'string'
          },
          {
            fieldName: 'curso',
            fieldType: 'string'
          },
        ]
      },
      {
        fieldName: 'disciplinas',
        fieldType: 'array',
        userArray: [
          {
            fieldName: 'disciplina',
            fieldType: 'string'
          },
          {
            fieldName: 'nota',
            fieldType: 'string'
          },
          {
            fieldName: 'cargaHoraria',
            fieldType: 'string'
          },
          {
            fieldName: 'credito',
            fieldType: 'string'
          }
        ]
      }
    ]
  }
];

abrirModalQrCode() {
    if(!this.habilitarLocal && !this.habilitarQrCode) 
    {
      this.qrCodeModal?.ngOnInit();
    }
    else {
      this.qrCodeModal?.openQrCodeModal();
    }
    this.habilitarQrCode = true;
  }

abrirModalList() {
  if(!this.habilitarQrCode && !this.habilitarLocal = true;) {
    this.webAppModal?.ngOnInit();
  }
  else {
    this.webAppModal?.openWebAppModal();
  }
  this.habilitarLocal = true;
}

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

  //Limpa e fechar modal assim que recebe os dados.
    this.habilitarLista = false;
    this.habilitarQrCode = false;
}

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.
  • 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;
}