loading...
Cover image for I created a magical Imgur with Node.js and Clarifai

I created a magical Imgur with Node.js and Clarifai

skiilaa profile image skiilaa ・3 min read

Bonus: it features free photos of @scanlime's cat, Tuco.

I have wanted to do something with AI for a long time now. I had already made prediction applications in python, but recently, I was more interested in recognition with AI. If I had never gotten free stickers from dev.to (thanks btw), I would have never googled Clarifai and never started this project.

The basic idea was to help artists and photographers to get more views on an image, by automatically assigning tags to the picture based on what Clarifai recognizes. With this, the risk of not getting your picture found because you used the wrong tags is very low.

So I created an application, and I didn't expect too much from it, but when I uploaded a stock photo, I was amazed.

It made such accurate guesses that I it must have been trained on more than a billion images.

Then I started to assemble the application.

I decided to call it "SateMage".

The frontend

I started to code a "Hang tight! We are opening soon." temporary homepage, then I created the frontend upload form, the frontend image-viewer page and the 404, 500, etc. pages.

The backend

The real interesting piece about this is the backend.

Uploading

When the frontend upload form sends a request to the backend, these are the things that need to run:

  1. Encode image into base64
  2. Upload it to imgur
  3. Get tags from clarifai
  4. Send tags, link and id to database

For the first step, I used multer's MemoryStorage option, to be able to just get a buffer variable, instead of saving it and then reading it.

Then, I just needed to use this piece of code to turn the buffer into base64:

var fileBase = req.file.buffer.toString('base64');

Step 1 completed.

Onto step 2, I needed to upload the image to imgur in base64 format. I used the imgur package, that is able to do that.

With these couple of lines of code, I can upload the file to imgur:

imgur.uploadBase64(fileBase)
    .then(function (json) {
        //...
    })
    .catch(function (err) {
        //...
    });

Step 2 accomplished. Step 3 is the golden crown of the idea. If it doesn't work, this can go in the trash.

I used the official Clarifai module, and after analyzing the response a bit, I got it to work. Step 3 (thank goodness) works.

Now, Step 4. We know there is always something shitty with MySQL. Thankfully, that didn't happen at inserting the images. The upload worked perfectly.

Viewing

The viewing. I wasted so much time on this, that I am still angry.

So, it had to do this:

  1. Load data from MySQL database
  2. Display picture and tags

(As PHP developers know) Projects with MySQL can't work on the first try. They just can't. Sadly.

So, step 1. There was user input here, so I decided to use prepared statements. I thought it was a good idea, because it worked like a charm in my PHP projects.

Then, I got into SQL hell. Variables were suddenly undefined, callback was suddenly called multiple times, and I was really frustrated. I ended up using connection.escape() and guess what, it worked like a charm.

After I wasted 2 or so hours on the MySQL part, the displaying was easy. Just used some placeholder values that were replaced when reading the files from disk, for example ":imgurUrlHere", and ":clarifaiTagsHere".

The future

I have obviously not mothballed this project. I have to work on the search, the index page, test the backend, and I am likely going to make the project open source in the future.

The final site should be on satemage.skiilaa.me, unless the project grows big enough to buy it's own domain.

Thanks for reading!

P.S.: The site is released! Come see!

Posted on Mar 27 '18 by:

Discussion

markdown guide
 

Getting "Service Unavailable" on the link you provided

 

Yup! I wiped my VPS. The site should be available right now.