Receive and Send back Image in Flask: In memory solution

Rajat Kanti Bhattacharjee
csmadeeasy
Published in
3 min readDec 26, 2018

So recently I did the project on Handloom Designing with my fellow mates Amrit Jha and MEGHALI NANDI using Deep Learning technique where in the end of it we built an application to deploy of our network. The original intention was to have the Fast Neural Style Transfer network in the front end essentially making it possible for us to have the application openly available for everyone and even add more models by training in their local system. But the DiscoGAN solution was 300mb BIG!!! So we needed a server.

So what kind of server did we exactly needed. Definitely a quick and dirty one that works. The ideas was simple

  • Send the data from a image input in the front-end to the back-end wrapped inside form data as base64 image.
  • Process the image using numpy and our Keras model
  • Send the results back to the front-end to be used by the application

Sound simple but we could not really find definitive working example. There are examples where you read the file at the back-end and write it off and load it again which is a slow solution when you have high percentage of hits plus threads to manage.

Neither is this solution is the best one but it did worked out fine for our use case. It uses in memory file writer object and CV and Numpy for processing the image and sending it back.

Before that a few links that helped me find the solution

https://gist.github.com/mjul/32d697b734e7e9171cdb Also this particular GIST. Problem is they teach you to convert the image to Numpy but the other way round actually we just had to figure our from above links. There were several other links and forum discussion that i did not bookmarked. So if anyone finds something more efficient and better and will scale better do recommend.

Here is our solution

Do note in case you are getting issues with CORS in Flask , check the CORS code flask native CORS method sometime fails for reasons not known to me and also to many other devs. CORS is all about appending few response headers which the request dispatcher can read while looking at response. So don’t miss that, the given code includes that section since we were using it on the server. You can also not use formdata and send the same in different format decode and encode it while putting preprocessing in between. We put the Keras inference task in between. We send the data by encoding the base64 string inside a JSON object.

Demo

gif: Example of intended functionality

possibly the worst solution especially if you talk in terms of thread safety and the same tensorflow graph being accessed with no question of which context is grabbing it. But setting up a global graph makes it easier and the nasty solution works as a prototyping practice.

--

--

Rajat Kanti Bhattacharjee
csmadeeasy

Your everyday programmer. Talking about everyday engineering. Love natural science, physics buff and definitely not good at no-scope 360.