dta-vision-ocr

DTAVisionOcr

This library was generated with Angular CLI version 17.3.0.

Code scaffolding

Run ng generate component component-name --project dta-vision-ocr to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project dta-vision-ocr.

Note: Don't forget to add --project dta-vision-ocr or else it will be added to the default project in your angular.json file.

Build

Run ng build dta-vision-ocr to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build dta-vision-ocr, go to the dist folder cd dist/dta-vision-ocr and run npm publish.

Running unit tests

Run ng test dta-vision-ocr to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

# 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() {
  this.habilitarQrCode = true;
  this.qrCodeModal?.ngOnInit();
}

abrirModalList() {
  this.habilitarLocal = true;
  this.webAppModal?.ngOnInit();
}

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