I Made a Discord Bot for Testing YouTube Thumbnailsimage
All Stories

I Made a Discord Bot for Testing YouTube Thumbnails

The Colin and Samir Discord is one of the greatest things to happen to the creator community in a long time. In many ways, it's exactly what we were trying to build at Lumastic - a space where creators can connect and collaborate so working alone doesn't have to feel lonely.

I've been an avid member of the Discord since it launched last month and have been constantly posting ideas to the community and moderation team with things that I think could be improved. One of those ideas was a better way for creators to share, test, and get feedback on titles and thumbnails from other members of the community.

🚨 The Problem

For the unaware, the title and thumbnail of a YouTube video is as impactful to a video's performance as the video itself. So, creators spend hours throughout the production process iterating and testing these two static pieces of media.

To share and get feedback from each other on thumbnails, the moderation team had set up a forum channel called #thumbnail-feedback in the C+S server. Creators could make a new thread for their video and then post their title and thumbnail to get feedback. The system worked okay, but there were three issues the community was running into.

The first is that members were posting thumbnails without titles. This created a lot of lost opportunity for feedback because people were judging the perceived "clickability" of a video without all of the components that the audience actually uses to decide whether or not to click. It's like judging a cover image on a newspaper without knowing the headline of the story.

The second issue was the thumbnails being shared in the server didn't match how thumbnails actually look on YouTube. Creators were sharing images right out of Photoshop and Illustrator that were way larger and higher quality than what the audience will actually see. This is a problem because it can yet again skews the feedback creators receive on their thumbnails and doesn't allow them to visualize how things will actually look once they press publish.

And finally, these issues of inconsistency made it harder for creators to iterate their ideas and compare them to previous versions. As creators changed their titles and thumbnails, having an inconsistent look or an ad-hoc system of trying to "imagine" what different pairs of images and text would look like was just chaotic and disorganized.

✅ The Solution

I posted about these issues in the #server-suggestions channel - along with an idea for a Discord bot that would generate an exact image of what a video would look like on YouTube given a title and an image file for the thumbnail.

SCR-20230622-iphi.png

After some interest and feedback from the community and moderation team...I shelved the project for a month while I got married and went on my honeymoon 😜. BUT, last weekend I resurrected the idea and made the initial MVP.

I started by measuring the exact dimensions, layout positioning, and font styles for a video element on YouTube. I took a screenshot a video, brought that into Figma, and used it as a template to redraw everything on screen.

SCR-20230622-ivez.png

With that reimplementation in Figma, I was able to take the dimensions of each element and make a function that would take parameters like a title, thumbnailImage, profileName and avatarImage and generate a final image that looked pixel perfect to how those attributes would appear on YouTube.

For image manipulation, I used @napi-rs/canvas - a Rust compiled implementation of HTML Canvas that uses Google Skia as the backend. It's faster and more lightweight than ffmpeg and worked perfectly for this use case.

Finally, thanks to the discord.js package and their incredible guides and documentation, I was able to create a bot with a single command, /thumbnailed, that would prompt the user to provide a title and a thumbnail and then would reply back to them with the generated image.

demo prompt

demo message

If you're interested, all the source code for the project is available on Github.

✨ Final Thoughts

As of writing this, I'm currently working with the mods and staff of the Colin & Samir Discord to add this to their server. They seem excited which makes me so happy because my favorite thing in the world is building tools for creators.

Five years ago when I was working on Lumastic, this Discord server would have been a god send for me. Being able to quickly connect with creators, share ideas for products, and then work directly with them to make it happen is such a gift.

I hope that this ease of connection and collaboration between creators and engineers makes a flourishing ecosystem of software tailored specifically for the needs of independent, internet entrepreneurs.

Until next time.

Best,
Drew Lyton
Drew Lyton
Friday, June 23, 2023

I'm a software engineer, ex-founder and writer who cares deeply about creating a better relationship between technology and society. I'm currently writing a book about early stage entrepreneurship.

LET'S KEEP THE CONVERSATION GOING

If this article has been valuable and you'd like to be notified the next time I post, subscribe to my newsletter!

Each week, I share my latest post along with three other works from people smarter than me on whatever topic is top of mind. Of course, you can unsubscribe at anytime.