Spec : OCR d'un fichier image

[carbontracking]

Input type

• Doit traiter des fichier graphiques jpeg/png/bmp/pdf

  Display of image

• affiche image sur la partie gauche de l'écran (60% de l'écran)
  • Laisser une marge de 5% à gauche et à droit
  • [ ] Permettre de modifier la taille de l'espace image avec draggable
  • http://jsfiddle.net/T4St6/
    • Pris de https://stackoverflow.com/questions/17855401/how-do-i-make-a-div-width-draggable

      Javascript libraries / methods to use

• Avec Crop, découper la page en multiples zones
  • jcrop pour l'interface de création de zones
  • s'inspirer de croppie pour la génération de base64/blob à partir de la zone croppé.
  • https://stackoverflow.com/questions/4200374/copy-and-crop-images-in-javascript explique la méthode natif javascript pour faire un crop sur un image dans un canvas

    Display of Crop Zones information on RHS

• Un gros bouton OCR qui envoi tous les zones type Texte à Azure se trouve en haut de la liste des élements
  • Dès l'arrivée sur la page, toute l'image est marqué comme croppée avec un élément P sur la droite
  • Si, quand on clique sur le bouton OCR, il n'y a pas de zone croppée, envoyer l'image entier pour OCR
  • Dans ce cas uniquement, le résultat est affiché comme si l'utilisateur avait faiT un seul crop avec élément type para.
• Une fois les crops commencés, les zones croppées commencent à être listé verticalement sur la partie droite de l'écran (40%)
  • Laisser une marge de 5% à gauche et à droit
  • Chaque élément de cette liste permet de définir le type de la zone croppée (h1/h2.../p/ol/ul/img) avec un dropdown, p par défaut.
  • [ ] Chaque élément contient un bouton "Supprimer" en-ligne qui supprime l'élément de la liste et aussi la zone croppée. Le bouton "Supprimer" a la même hauteur que le dropdown.
  • Cliquant sur un élément de la liste met en surbrillance la zone croppée dans la moitié gauche
  • Cliquant sur la zone croppée met en surbrillance l'élément correspondant dans la liste.

    Modification / Addition de zone croppée après OCR

• Si on modifie une zone croppée après l'OCR, on crée un indicateur visuel sur l'élément correspondant sur la droite, par exemple un gros point d'exclamation en rouge (en-ligne avec l'élément /Afficher / Supprimer) pour indiqué le décalage entre la zone et son élément sur la droite
  • Actuellement, en simplement cliquant sur une zone croppée /OCRé, le ! apparait voir issue https://github.com/carbontracking/upscribers/issues/43
• Le bouton Sauvegarder disparait dans ce cas indiquant qu'il faut à nouveau faire l'OCR pour que les zones croppées soient cohérentes avec les éléments sur la droite.
  • Le bouton disparait aussi dans le cas qu'une nouvelle zone est croppée après l'OCR initial
• Quand on clique à nouveau sur OCR dans ces deux cas, seulement les zones modifiées / additionelles sont envoyés à l'OCR, pour éviter de refaire inutilement des OCR's sur des zones inchangées

  Drag and Drop

  • L'ordre des élément dans la liste peut être modifiée par drag and drop
  • [] le drop doit pouvoir se faire sur l'espace créé entre deux éléments
  • Un exemple de du CSS/JS/HTML d'un drag and drop avec des éléments d'un UL
    • https://codepen.io/piecedigital/pen/VLyrLo

Handling of response from OCR request

• [x] Au retour de l'OCR rajoute un bouton AFFICHER/CACHER en-ligne sur chaque élément qui aggrandi l'élément pour afficher le texte/image correspondant, ou cache le texte/image. Ces boutons ont la même hauteur que le dropdown et sont alignés avec.
• Le texte affiché a toujours le même style, peu importe le type d'élément
• Applique les régles de modifications pour aider l'utilisateur dans les corrections

  Régles de modifications

• Créer des régles pour modifier légérement le texte retourné par l'OCR
  • Si une ligne ne termine pas avec un . et que la prochaine ligne commence avec un minuscule, on concatène les deux lignes.
  • Si une ligne termine avec un - et que la prochaine ligne commence avec un minuscule, on concatène les deux lignes. par exemple "dép-" + "art" donne "départ"
    • Il y a un risque avec, par exemple, gardien-chef

      What to do once OCR/modification is complete ?

  • Un gros bouton SAVE à côté du bouton OCR
• Crée et sauvegarde la page html contenant texte et images sur AWS
• Modification de la base Mysql pour le fichier pour indiquer ou se trouve la version html du fichier
  • [x] Un gros bouton BROWSE qui est activé une fois le html sauvegardé
• Ca ouvre le fichier html en mode UpBrowser dans une nouvel onglet
  • [x] Un gros bouton UpEdit qui est activé une fois le html sauvegardé
• Ca ouvre le fichier html en mode UpEdit dans une nouvel onglet

[carbontracking]

Travailler sur l'envoi de base64 à Azure

https://social.msdn.microsoft.com/Forums/sqlserver/en-US/807ee18d-45e5-410b-a339-c8dcb3bfa25b/testing-project-oxford-ocr-how-to-use-a-local-file-in-base64-for-example?forum=mlapi