In Twitter, I often see people tweeting inspirational, funny or even silly quote. I imagine, what if there's a twitter bot that generates an image with their quote in it? Like this :
So I decided to build one.
I have no experience creating an app with Javascript other than "copy this script to footer section" or "include this script in head tag", to get the experience and learning javascript, I chose to build this bot with Javascript.
Thankfully, this video tutorial by Daniel Shiffman helps me a lot to get started.
(Also check the amazing playlist)
Setup Twitter Application
The setup is quite similar to this one, so You can follow this post to set up the Twitter Application. 😅
Article No Longer Available
Listening to the user event
I want this bot to work when someone quotes any of this bot tweet. We are going to create a stream that listening to the user event :
const stream = T.stream("user");
stream.on("quoted_tweet", tweetEvent);
if someone quoted any of this bot tweet it will execute tweetEvent
callback, here's the code of tweetEvent
callback :
function tweetEvent(eventMsg) {
const text = eventMsg.target_object.text;
const from = `@${eventMsg.source.screen_name}`;
const twit_id = eventMsg.target_object.id_str;
if (eventMsg.event === "quoted_tweet") {
const tweetMedia = imagePath => {
try {
var b64content = fs.readFileSync(imagePath, { encoding: "base64" });
T.post("media/upload", { media_data: b64content }).then(response => {
var mediaIdStr = response.data.media_id_string;
var altText = "Image Quote Generated By Quotemakerbot";
var meta_params = {
media_id: mediaIdStr,
alt_text: { text: altText }
};
T.post("media/metadata/create", meta_params).then(() => {
var params = {
status: `${from}`,
in_reply_to_status_id: twit_id,
media_ids: [mediaIdStr]
};
T.post("statuses/update", params).then(response => {
console.log("Successfully post to twitter");
//some code omitted
the tweetMedia
is just a function that's accept an image path to post the image to Twitter, Here's the "actual" code that's doing the image processing :
exports.processImage = async (from, text) => {
const param = tweetUtil.getUnsplashParam(text)
options = {
url: `https://source.unsplash.com/1024x576/${param}`,
dest: `${from}.jpg`
}
const { filename, image } = await download.image(options)
const filteredImage = await ImageProcessor.filterImage(filename,`${from}-filtered.jpg`)
setTimeout(function() {
ImageProcessor.drawImageAndTextToCanvas(filteredImage,{
text:tweetUtil.cleanAndTidyTweet(text),
imageName: from+`-quoted.jpg`,
username: from
})
}, 1500);
return `${from}-quoted.jpg`
}
To be honest, I can't explain every part of the code, this bot was made 9 months ago, when I read the code again, I was like :
But here's how this bot works in general :
- Someone quotes this bot's tweet.
- This bot will download images from Unsplash randomly or by specified category, for instance I add -coding option so it will download image with the coding category from Unsplash. Here's the image :
- Then, brightness and contrast of the image dropped a little bit to make the texts more readable.
- Draw the image and texts to canvas
- Post it to Twitter!
That's it, give it a try! @quotemakerbot
Click here for the list of available options, if you don't add an option, the background image will be from the random category on Unsplash.
Usage Example
Tweet format : -option (your quote)
Result
PS : Sometimes this bot doesn't work as expected. 🙇
Top comments (8)
Pretty sweet!
Nice! 👍👍👍
This pretty nice. It remains me to Pablo (pablo.buffer.com/)
Nice, this is really cool!
Thanks Dan! 😄
love this. really cool!
Thabks For Sharing!
Really cool, I'm trying to implement it, I'll be sure to credit you. I want to modify this to support Arabic writing.