We were collectively inspired by the little technical inconveniences we experienced from day to day, made more prevalent than ever as we transition to fully digital working environments in light of the pandemic. We often found ourselves wasting time with tedious tasks such as trying to re-scale multiple images one at a time to meet strict file upload conditions, or copying and debugging broken code that needs to be debugged by hand from posts on Campuswire. Thus, we decided to create a program that would take care of these inconveniences. We wanted it to work as efficiently as possible, and thus designed it as a web extension that could be integrated and used seamlessly via the Chrome browser.

What it does

This web extension enables users to upload images that can be re-sized or transcribed for text. The user has the option to resize the image and produce a new image file or transcribe text from an image into a downloadable .txt file.

How we built it

We built our web extension using a CSS, HTML, Javascript and Tesseract. We used HTML and CSS to implement a user interface and applied javascript to create the re-sizing and object character recognition (OCR) functions for images. We also used the Tesseract OCR engine, which provided us with the recognition features for characters and text in an image.

Challenges we ran into

HTML and Javascript don't directly allow image files to be edited directly - attempting to initialize them and change their dimensions typically only results in the HTML object carrying the image to be transformed, rather than the image itself. Thus, attempting to download it after "translation" would still yield the original image. Because of this, we had to resort to more complicated functionalities involving local storage and FileReaders to make editing the actual file possible. Additionally, we struggled with getting the program to work specifically as a web extension due to a lack of knowledge of proper HTML/JS coding style. We overcame this challenge through extensive research and some assistance from the Hello World mentors to point us in the right direction. Lastly, learning to properly implement code from other classes such as Tesseract was a difficult challenge which took extensive trial-and-error to master.

Accomplishments that we're proud of

We are proud of being able to learn a programming language that was completely new to all of us in under 24 hours. We achieved this knowledge through endless experimentation, which allowed us to create programs we once never thought we could. We are also proud of all the obstacles we overcame, allowing us to be able to present a substantial final product despite our lack of experience.

What we learned

As a group, we went from having almost no knowledge of Javascript/HTML/CSS to learning how to code full websites and web extensions, albeit with basic functionalities. We also learned to make use of external frameworks such as Tesseract to provide our program with more advanced features.

What's next for re-Scribe

In the future, our team hopes to get reScribe working on different browsers and to implement OCR for multiple languages.

Share this project: