Roast My Canvas

Landing Page
Brian Getting Roasted
Shareable Content

Inspiration

We stumbled upon the Canvas API and wanted to experiment with doing something fun with it during this year's Dubhacks hackathon. Roasting students became our poison of choice.

What it does

Roast My Canvas offers students a unique way to unwind from the daily grind of university life. With our state-of-the-art roasting algorithm, users can playfully roast their assignments (and themselves), turning academic stress into a source of amusement and connection with fellow students. It's a lighthearted approach to destressing that adds a touch of humor to the academic journey, making it an enjoyable experience and fostering a sense of community among users.

How we built it

Roast My Canvas was built using Next.js, TailwindCSS, Canvas's API, and OpenAI's GPT-3.5-Turbo Conversational API.

Challenges we ran into

Roast My Canvas acts as a living breathing guided conversation. To optimize the user experience, it was key that we had methods in place for injecting media into the conversation. There isn't only text on the screen; during the roasting session, the user is shown images, buttons, and recursive conditioning. We solved this by implementing a dynamic queue, that allows for new messages to be inputted at any time, and placed in a sequence that will type each paragraph or multi-media content one at a time.
As far as the user experience, automatic scrolling became a small but impactful feature as the user converses with the AI. We found significant difficulty understanding when we should be programmatically scrolling the browser. We ended up solving this by placing an interval loop to continuously scroll the page while content is being typed or displayed from the queue.
Creating shareable roasts that students could share over social media was one our main challenges during this hackathon. We solved this by developing an OG image service that converts HTML and CSS into personalized images that fit perfectly on social media to promote the virality of the product.

Accomplishments that we're proud of

The design and user experience was our main point of pride working on this project. We worked hard to make the UX fun and engaging. The chat, while dynamic and guided, is a story for the user. We made sure to include sprinkles of surprises and satire to keep the experience engaging, and targeted roasts on specific assignments to always keep the user guessing. The website feels cohesive, has smooth animations, and packs a real punch. It has been amazing to see our friends try the website and gasp for breath from laughter at the surprises brought by the AI.

What we learned

Having a base that allows for easy mutation within our displayed content and messages made for a smooth development experience, even though we hadn't fully panned out the course of the story that our website would guide. Initially, we started with templated roasts mixed in with data from Canvas but found that generating roasts with the ChatGPT API made Roast My Canvas more enjoyable.

What's next for Roast My Canvas

Among social features, our main focus is gathering more feedback from users as we see how people react, laugh, or perhaps even critique the different elements of our project. Following iterating on feedback, we will expand our service to any Canvas site, beyond just that of the UW. This could open the gates for virality, and it is crucial we optimize based on feedback to best leverage our platform.