SPEC : Implement 1-step OCR & access to TTS

[carbontracking]

Another version of UpScribers, instantly accessible

1. Drag and drop an image onto the webpage
   • Or Copy / Paste : NOTE : You cannot copy paste a file, e.g. from File Explorer, but you can copy/paste a screenshot or a copy from within a graphics program.
2. The image is uploaded to UpScribers
   • UpScribers may reduce the size of the image to pass the 4MB limit for AZURE OCR
   • May also perform cleaning of the image to improve the OCR-ability of the image (see textcleaner)
3. Do OCR via AZURE and retrieve the co-ordinates of all the areas recognised
4. Display the image fullscreen with the OCR'd areas highlighted by boxes.
   • the boxes may be linked to show the order
5. Each OCR area can display the included text in a textarea and/or an option for TTS direct.

Minimal buttons for maximum result.

Inspiration

• Drag and drop upload and preview
  • https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/
• Copy and paste Image upload (can be used partially just to get the file then the same preview can be done as above
  • https://www.taraprasad.com/copy-paste-file-upload-using-jquery-ajax/
  • https://ourcodeworld.com/articles/read/491/how-to-retrieve-images-from-the-clipboard-with-javascript-in-the-browser
• https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications#Example.3A_Showing_thumbnails_of_user-selected_images MDn article that
  • See the "Selecting files using drag and drop" section then followed by "Showing thumbnails of user-selected images"