In December 2010, I built and launched an application on Facebook that lets users create picture mosaics using their friends display pictures. Obsessed with the idea, unhappy with the performance and interface of the app as a whole, I decided to rebuild it as a standalone web application. Late March last year, I started converting the image processing part of the application from PHP to Python. For the next 3 months, I designed and developed the application everyday after my work and during weekends. I thought I would try and monetize the application by charging users to order prints of their picture mosaics and also by letting them download high resolution picture mosaics. What started as a fun project, slowly turned into my first entrepreneurial experiment. I launched the initial version of the app without a print option and it did not really take off. Fast forward one year, domain name for the application picmos.me is set to expire in a few days and it is time to wrap up the experiment. Through the rest of the post, you will find details about how I built the application, pre-optimization and launch.
When I was first told about Facebook API and the app platform by my friend @arun88m, I wanted to build something using the API. After thinking a bit, the idea to create picture mosaics crossed my mind. I used to watch these mosaics in TV commercials and didn’t even knew that they were called picture mosaics until I was told by Google. The process of creating simple picture mosaics is pretty straight forward. You have a large set of images that you can use and a target image that you want to recreate as a mosaic. Break the target image into small blocks and replace each block with one of the images from the large set that we have that best matches the block in terms of color composition. Quality of the mosaic produced will depend on the size of the block, size of the image set and algorithm used to choose the best match for each block. Block matching is implemented by calculating the mean (r, g, b) value of all the pixels in each block and comparing it against the mean (r, g, b) values of all the images in the image set.
The initial version of the app was called college-frnds (Like I said, I didn’t knew they were called mosaics) and lived at http://apps.facebook.com/collage-frnds/. It was developed using PHP (that was my go to lang for anything web and my only reachable option on shared server), MySQL and standard web stack and was hosted on a shared server with Siteground. Since it was developed as an application on Facebook, I felt restricted in controlling the app experience. Image processing with PHP scripts and shared server made the whole app look mediocre.
Having worked with python before, I quickly chose python to be the language to rewrite the image processing code. I segregated the application into three different modules – User facing part, backend that creates picture mosaics and a scheduler.
User facing module
This is the module that users directly interact with. It majorly does the following
- Lets the user connect his Facebook account
- Allows the user to browse his Facebook albums to choose images that needs to converted into picture mosaic
- Lets the user browse, share and download the picture mosaics created from his account
- UI that shows the progress of the picture mosaic creation in real-time
- Option to pay through paypal if the user wants to download high resolution picture mosaic
It is all written using PHP, MySQL, HTML, JS, AJAX
Image processing backend
This module is responsible for analyzing all the user’s friends display pictures and creating a picture mosaic of the image from user’s FB album. It is further divided into four sub modules which perform the following jobs in order
- Analyze the display pictures of all of user’s friends and find mean (r, g, b) values of each image thus creating a color palette that can be used in picmos creation
- Divide the target image into blocks and find mean (r, g, b) values of the pixel in each of those blocks
- Match each of the block in target image with the best suitable display picture from the palette and create a matrix of the mapping
- Create the final picture mosaic using the mappings matrix and perform misc jobs like adding logo as watermark etc
Each of these submodules update the progress of the job in the database which gets picked up by the front end ajax UI and uses it to display a neat progress bar along with the current status of the job to the user.
This is a simple scheduler that continuously polls the database for new jobs and spawns the image processing code when it encounters a new job.
Front end design is not my strongest area. My design process usually involves getting the basic css layout done and then keep adding graphic elements to it and iterate the design. But for PicMos, I had put down my design on paper first and then created the graphic elements finally converting it to web pages. Though the design on paper is just a bunch of rough sketches on how the pages should look like, it helped me retain focus and have a clear idea on the entire flow of the application. Below is how my design looked on paper
And those rough sketches got translated into these final web pages
Since the process of creating picture mosaics is CPU intensive (a single linode 512 instance is hosting the application), I did my best to reduce the work that the server has to do on anything other than image processing. These are some of the steps I followed to reduce the load on the server
- Use nginx to serve static content on the website. Installed memcached though I didn’t really configure to use it
- Since the possibility of hitting the same display pictures (through mutual friends) is high, I’m saving the mean (r, g, b) values for each of the display pictures in the database. If we hit the same display picture in building a new picture mosacic, we will have mean (r, g, b) already calculated and that saves us some CPU cycles
- When creating picture mosaics, the backend generates picmos thumbnail, medium sized picmos and one high resolution picture mosaic. Depending on the size of the image that is needed, the application uses one of those three and saves on data transfer
- PicMos viewer lets the users share the picture mosaics on FB. When creating picmos, we generate a static html page that resembles the viewer that has the picmos. This static web page gets shared on to FB rather than link to a dynamic page when user tries to shares his picmos
Launch and aftermath
I hooked up mixpanel and google analytics to the application and sent the link of picmos to some of my friends for trying it out. After receiving basic feedback and making sure that the application is working without any glitches, I posted PicMos on HN. Failing to create interest in HN community, I tried to find other sources/communities that might be interested in something like this. I found http://www.squidoo.com/photo-collages and left the link to picmos in the comments. It was later added to the list of new collage sites and noted to be in early development for full review. A total of 354 picture mosaics were created using picmos till date and the website registered 797 unique visits with zero revenue. Though the application failed to generate any revenue, it proved to be a nice learning experience. It is time to move on and build the next product applying the lessons learnt from PicMos.
Edit: Domain name picmos.me is not expired. Application is moved to http://picmos.ajhais.com