Waifu MMS Bot - Send a Selfie, Receive a Waifu
Tags: twiliohackathon, twilio, node, tensorflow
Published: 2020-05-01 06:24:40

---
title: Waifu MMS Bot - Send a Selfie, Receive a Waifu
published: true
description: My submission to the Twilio x DEV Hackathon!
tags: twiliohackathon, twilio, nodejs, tensorflow
---

Welp, I started this about 6 hours ago after the hackathon deadline completely sneaked up on me. In true hackathon fashion: the code ain't pretty, it was submitted an hour before the deadline, and by some miracle it works!

This project was inspired by a tweet I saw this afternoon:

 {% twitter 1250427941567094786 %} 

As well as my friend and Twilio Evangelist [Sam Agnew](https://dev.to/sagnew)'s response:

 {% twitter 1255867485640888320 %}

## What I built
This application allows you to send a selfie to a Twilio phone number and receive and "waifu" version of it in return that was generated using a trained model. The image conversion is all handled by the [Selfie 2 Waifu](https://waifu.lofiu.com/index.html) project which was built by [creke](creke.net). I simply integrated Twilio and built the automation around it.

#### Category Submission: 

I could only really see this project falling under either the 'Interesting Integrations' or 'Exciting X-Factors' categories.

## Demo Link

Since I waited until (literally) the last minute to build and submit this I didn't have enough time to record a proper video demo or anything but here's a sample interaction with this app from my phone:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gdj47obe3ji0qr00ko9f.jpg)

I also encourage anyone to fork the repo and try it out themselves!

## Link to Code
The code is MIT licensed and fully available on GitHub along with some (rudimentary) setup instructions.

 {% github brodan/waifu-mms-bot %} 

## How I built it (what's the stack? did I run into issues or discover something new along the way?)

I built this app using the following tools/technologies:
- [Selfie 2 Waifu](https://waifu.lofiu.com/index.html) for handling the actual image processing/conversion
- [Twilio MMS](https://www.twilio.com/mms) for sending and receiving images
- [Express](https://expressjs.com/) for the back-end
- [ngrok](https://ngrok.com/) for my localhost tunneling so I could get up and running quickly and not worry about deploying
- [Puppeteer](https://github.com/puppeteer/puppeteer) for headless browser automation

The biggest issue I ran into while building this app was figuring out how to automate the uploading of selfies to the Selfie 2 Waifu web app. I originally started out using an awesome tool called [taiko](https://github.com/getgauge/taiko) that I usually use for these kinds of interactions. However, due to the page's file upload proccess I couldn't quite get automated uploads working. I then switched to [Puppeteer](https://github.com/puppeteer/puppeteer) which I had never used before and luckily it was just simple to work with and was able to accomplish what I needed.

The only other issue I ran into was working with asynchronous code throughout my Express server since I am a Node newbie and struggled with some of the `async/await` syntax. This, along with the time constraints, is why the code is definitely not as clean as it could be and might mortify some of the JS experts.

## Additional Resources/Info

In reality, all the credit should for this app should go to the Selfie 2 Waifu author, [creke](creke.net). Without their awesome app and the inspiration it caused I wouldn't have built this. 

Additional thanks to DEV and Twilio for running this hackathon.