'Tis Us, thy trusty Computer Science students, oft plagued by slumber's elusion and burdened by the weight of stress. In such trying times, I seek solace in the jester's art, weaving mirth and merriment through the very code I craft. At the event of Hack and Roll, a grand opportunity was bestowed upon me; to fashion a tool of levity and wit, to bring cheer to the drab and dreary toil of internet-surfing. And lo, I didst not disappoint. Behold, a chrome extension, a wonder to behold, that doth td ransfigure the words upon websites into a veritable cornucopia of dialects; Shakespearean, Gen-Z, UwU, Valley girl, and even the tongue of legal contracts."
What we learned
As a team of 4 year 1 students, this was one of our first exposures to the entire development cycle of a functional application from conception to delivery. Here are just some of the skills we developed:
- We had to learn the basics of building a chrome extension, including how to access and manipulate the DOM (Document Object Model) of a webpage
- The importance of debugging and troubleshooting when working with browser extensions The challenges of working with dynamic web pages, as the content on a page may change frequently, and your extension may need to adapt accordingly.
- How to use the chrome developer tools and test your extension on different web pages.
How we built our project and challenges we faced along the way
- We built the app with React.JS, with AntDesign for the pop-up. In React, we had to figure out how to isolate and return only the text elements on a webpage. We first tried htmlElement.innerText, which didn't work; eventually, we figured out a recursive method using Node.nodetype to get all the text nodes, before filtering down the nodes to obtain only the few nodes that we needed to feed into GPT-3.
- We used the GPT-3 API to do the actual text conversion by passing in the original text and replacing it with the text returned by the GPT-3 APU. While simple in theory, using the GPT-3 API was quite frustrating initially as we kept running into bugs. The syntax of the object returned by the API call was quite difficult to parse through in order to identify the text returned by the model. We eventually figured it out by a lot of close reading and numerous google searches. We also ran into a lot of bugs that really tested our debugging skills.