ocr-file-uploader

v0.0.4

Published

a month ago

OCR File Uploader Stencil Component

0High
0Medium
0Low

nsdev

OCR File Uploader - Frontend

Composant Stencil pour l'upload et traitement OCR de fichiers PDF.

Installation

Développement local

Installer les dépendances :

npm install

Lancer en mode développement :

npm start

Interface disponible sur : http://localhost:3333

Build de production :

npm run build

Utilisation comme package npm

npm install ocr-file-uploader

Composant ocr-file-uploader

Propriétés

| Propriété | Type | Défaut | Description | |-------------|------------|-------------|-------------| | batch | boolean | false | Mode batch : retourne un fichier Excel | | callback | Function | undefined | Fonction appelée avec les données JSON extraites | | jsonSchema| string | undefined | Schéma JSON pour structurer l'extraction | | theme | string | undefined | Thème JSON pour personnaliser l'apparence |

Modes d'utilisation

Mode JSON (défaut)

Extrait les données du PDF et les retourne via callback :

<ocr-file-uploader 
  json-schema='{"nom": "string", "age": "number"}'
  callback="handleData">
</ocr-file-uploader>

<script>
function handleData(extractedData) {
  console.log('Données extraites:', extractedData);
}
</script>

Mode Batch

Génère et télécharge un fichier Excel :

<ocr-file-uploader batch="true"></ocr-file-uploader>

Système de Thème

Le composant supporte un système de thème complet via la prop theme (chaîne JSON).

Structure du Thème

{
  "button": {
    "size": "50px",
    "backgroundColor": "#10b981",
    "hoverColor": "#059669",
    "textColor": "#ffffff"
  }
}

Valeurs par Défaut

size: 50px - Taille du bouton (largeur et hauteur)
backgroundColor: #10b981 - Couleur du bouton/icône
hoverColor: #059669 - Couleur au survol
textColor: #ffffff - Couleur du texte (usage futur)

Exemples de Thèmes

<!-- Thème Medical (Rouge, Compact) -->
<ocr-file-uploader 
  theme='{"button":{"size":"40px","backgroundColor":"#ef4444","hoverColor":"#dc2626"}}'>
</ocr-file-uploader>

<!-- Thème Nature (Vert, Large) -->
<ocr-file-uploader 
  theme='{"button":{"size":"65px","backgroundColor":"#22c55e","hoverColor":"#16a34a"}}'>
</ocr-file-uploader>

<!-- Thème Tech (Cyan, Standard) -->
<ocr-file-uploader 
  theme='{"button":{"size":"50px","backgroundColor":"#06b6d4","hoverColor":"#0891b2"}}'>
</ocr-file-uploader>

Utilisation Dynamique

const component = document.querySelector('ocr-file-uploader');
const theme = {
  button: {
    size: "60px",
    backgroundColor: "#3b82f6",
    hoverColor: "#2563eb"
  }
};
component.setAttribute('theme', JSON.stringify(theme));

Notes Importantes

Toutes les propriétés sont optionnelles - Les valeurs par défaut sont utilisées si non spécifiées
Le thème est réactif - Modifier l'attribut theme met à jour le composant en temps réel
Couleurs - Accepte tous les formats CSS (hex, rgb, rgba, noms de couleurs)
Tailles - Doivent inclure l'unité (px, rem, em, %)

Intégration

Vanilla HTML

<!DOCTYPE html>
<html>
<head>
  <script type="module" src="https://unpkg.com/ocr-file-uploader/dist/ocr-file-uploader/ocr-file-uploader.esm.js"></script>
</head>
<body>
  <ocr-file-uploader 
    json-schema='{"name": "string", "email": "string"}'
    callback="myCallback">
  </ocr-file-uploader>
</body>
</html>

React

import { defineCustomElements } from 'ocr-file-uploader/loader';

defineCustomElements();

function App() {
  const handleData = (data) => {
    console.log('OCR Data:', data);
  };

  return (
    <ocr-file-uploader 
      json-schema='{"name": "string", "age": "number"}'
      callback={handleData}
    />
  );
}

Vue.js

<template>
  <ocr-file-uploader 
    :json-schema="schema"
    :callback="handleData"
  />
</template>

<script>
import { defineCustomElements } from 'ocr-file-uploader/loader';

defineCustomElements();

export default {
  data() {
    return {
      schema: '{"name": "string", "email": "string"}'
    };
  },
  methods: {
    handleData(data) {
      console.log('Données reçues:', data);
    }
  }
};
</script>

Configuration Backend

Le composant communique avec l'API backend sur http://127.0.0.1:5001.

Pour changer l'URL de l'API, modifiez les endpoints dans ocr-file-uploader.tsx :

Mode JSON : /api/convert-to-json
Mode Batch : /api/convert-to-excel

Structure du projet

src/
├── components/
│   └── ocr-file-uploader/
│       ├── ocr-file-uploader.tsx    # Composant principal
│       ├── ocr-file-uploader.css    # Styles
│       └── readme.md               # Doc auto-générée
├── index.html                      # Page de test
└── index.ts                        # Point d'entrée

dist/                               # Build de production
loader/                            # Chargeurs pour intégration

Développement

Générer un nouveau composant

npm run generate

Tests

npm test

Build et publication

npm run build
npm publish

Exemple complet

<!DOCTYPE html>
<html>
<head>
  <script type="module" src="./dist/ocr-file-uploader/ocr-file-uploader.esm.js"></script>
</head>
<body>
  <h1>Test OCR File Uploader</h1>
  
  <!-- Mode JSON -->
  <h2>Mode JSON</h2>
  <ocr-file-uploader 
    json-schema='{"nom": "string", "prenom": "string", "age": "number"}'
    callback="handleJsonData">
  </ocr-file-uploader>
  
  <!-- Mode Batch -->
  <h2>Mode Batch (Excel)</h2>
  <ocr-file-uploader batch="true"></ocr-file-uploader>

  <script>
    function handleJsonData(data) {
      console.log('Données JSON extraites:', data);
      document.getElementById('result').textContent = JSON.stringify(data, null, 2);
    }
  </script>
  
  <pre id="result"></pre>
</body>
</html>