CW 15 (6th April – 12th April) Web Server with DJango

The building blocks of the overall system are now ready. The next milestone is to establish a communication between the client and the server and integrate the final system.

The communication between the client and the server is as follows:

  • The user selects an image from local file system or provides an image URL from the web.
  • When the process button is clicked, a feature set of the image is extracted using LIRE feature extraction library.
  • The client sends a HTTP request to the server with the extracted feature values in JSON data interchange format.
  • The server receives the request and searches the pre-built ANN index model, for similar entries. The index model returns index IDs of these similar images.
  • The metadata collection in MongoDB is searched, based on these IDs. Tags together with the image URLs and other information are extracted.
  • Tag analysis takes place on the server. The word cloud image is generated from the extracted tags.
  • The server returns the data to the client. Client’s Graphical User Interface displays the word cloud, pie chart, histogram and the first 5 of the most similar images.

Originally, a socket server was planned to be used to build a communication channel between the client and the server. However, after reading some online forums and discussing with my  mentor, it was decided to build a web server instead.

Some of the reasons for making this decision include the richer functionality which web server offers and easier maintenance and expansion at a later stage, compared to socket server.

To do this, Django has been chosen. It is an open source, high-level Python Web framework which reduces the amount of repetitive and time consuming tasks by for example by providing shortcuts for frequent programming tasks [1].

Django automatically creates project with several files such as settings, url and WSGI. These files can be later modified to suit the specific needs.

To host our service, a Django app named flickrservices is created and registered in the file:

flickrservices‘,  # the application created to hold the processing functionality

The file parses the url provided by the user through the web browser and points to the functions in the application to process the user request.

The file contains:

url(r’^$’, ‘flickrservices.views.jsonRespone’, name=’jsonRespone’),
# ^$ means any request will be redirected to flickrservices.views.jsonRespone function.

The flickrservice.views contains the functions for processing the request and returning the result to the client user interface. At the moment, it only contains the test code which has been created to get started with the development and find out how Django works. Next week (CW16), this file will include all the code necessary to process the user request and return the result back to the client user interface such as searching the index, processing the extracted tags etc., which is already developed and needs to be slightly modified.

def jsonRespone(request):

#  for Testing
# if the client sends raw json data:
#objs = json.loads(request.raw_post_data)
# objs = json.loads(request.POST[‘jsonData’])
#json_data = request.POST.get(‘details’, None)
#if json_data:
#    data = json.loads(json_data)
#    response_data = {}
#    response_data[‘result’] = ‘ok’
#    response_data[‘wordMapURL’] = ‘/static/template/images/wordcloud1.jpg’

if request.method == ‘POST’:

received_json_data = request.POST.get(‘details’, None) # the data object are the feature values sent from the client

if received_json_data:
data = json.loads(received_json_data)

// TODO: search index model to get a list of the ids of similar images
// TODO: search mongoDB to get the tags of all similar images and the first 5 most similar image urls.
// TODO: process the tags, statistical analysis for pie and bar char.
// TODO: generate word cloud image
// TODO: encode the results into JSON array and return to client


response_data = {}
response_data[‘result’] = ‘ok’
response_data[‘wordMapURL’] = ‘/images/wordcloud1.jpg’

# how you return json data before django 1.7
return HttpResponse(json.dumps(response_data), content_type=”application/json”)

#return JsonResponse(response_data)

To learn how to get started with the development with Django I have read parts of the “The Django Book” which is open source and available online. I have also watched tutorials on YouTube. The first seven tutorials from the given link, are sufficient for the needs of this project.

Figure 1, illustrates the Django project that is created from the above procedure. PyCharm, a Python IDE is used for Django development.

Figure 1: Snapshot of Django project and files in PyCharm IDE

Figure 1: Snapshot of Django project and files in PyCharm IDE

This week, the query image feature extraction code has been integrated into the user interface and therefore when the user selects an image and clicks the process button, the features are extracted and sent to the server.

The work on the Final Delivery Documentation has also been continued this week. The following sections: Software Architecture, Database Design, Data Flow Diagram, UML Cases, Competitors, Time Description, Timeline and Costing for Completion of Development have been written.

To create the Data Flow diagram and UML cases I have used the following book for reference (Kendall, Kenneth E.; Kendall, Julie E., Systems Analysis and Design: Global Edition, 8/E, Pearson 2011. Pg. 221-255 and 63-74)

2015-04-12 17.48.34


To help me identify the development stages and tasks within these stages, for completing the development of this prototype as a web service, I have referred to the following book (Erl, T., Service-Oriented Architecture, Prentice Hall 2012, Pg.357-586)

2015-04-12 17.46.08


[1] HOLOVATY, A., and J. KAPLAN-MOSS. “The Django Book: Version 2.0.” The Django Book 16 (2009) [Online]. Available from:


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: