dta-vision-ocr/README.md

Biblioteca Angular com PO UI para extração de dados estruturados via OCR a partir de imagens ou PDFs, retornando JSON configurável com suporte a processamento em lote.

```md
# 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

```bash
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

```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

```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",
          "fieldType": "string"
        },
        {
          "fieldName": "cpf",
          "fieldType": "string"
        },
        {
          "fieldName": "validade",
          "fieldType": "string"
        },
        {
          "fieldName": "dataNascimento",
          "fieldType": "string"
        }
      ]
    },
    {
      "idButton": "02",
      "nameButton": "Historico Escolar",
      "imageReturn": false,
      "userFields": [
        {
          "fieldName": "alunoInfo",
          "fieldType": "object",
          userArray: [
            {
              "fieldName": "nomeAluno",
              "fieldType": "string"
            },
            {
              "fieldName": "matricula",
              "fieldType": "string"
            }
          ]
        },
        {
          "fieldName": "disciplinas",
          "fieldType": "array",
           userArray: [
            {
              "fieldName": "disciplina",
              "fieldType": "string"
            },
            {
              "fieldName": "nota",
              "fieldType": "string"
            },
            {
              "fieldName": "cargaHoraria",
              "fieldType": "string"
            },
            {
              "fieldName": "credito",
              "fieldType": "string"
            }
          ]
        }
      ]
    }
  ]
```
## Para facilitar a criação do Json acima

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

  
```typescript
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

~~~ typescript

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
~~~cmd
https://stackblitz.com/~/github.com/yuriduartetotvs/dtaVisionStackBlitz
~~~