Merge pull request #18 from ZhengyangL/ocr

1. add README 2. merge demos from tapkee website with .zip dataset

README

@@ -21,3 +21,58 @@ Currently available demos
   - http://<addr>:<port>/kernel_matrix/entrance			: A demo for kernel matrix visualization
   - http://<addr>:<port>/classification/binary/entrance		: A demo for binary classification
   - http://<addr>:<port>/classification/perceptron/entrance	: A demo for binary perceptron
+
+Docs
+====
+  An Example contains a front-end script(javascript) and a backend controller(python).
+  - front-end
+    - Entrance Generator
+      Entrance generator is a python method used to generate the entrance page of the demo. All the demo's entrance page will be in same layout(a main title, a canvas section and a panel section). The Entrance Generator takes an HttpRequest Object as its first parameter, which is typically named request. The method returns an rendered template HttpResponse. A python dict is needed to define the property of the entrance page. 
+      - Property Dict
+        - 'title': define title of the entrance page,
+        - 'template': a python dict to specify the property of the canvas
+          - 'type': specify the type of the canvas
+            - option 'coordinate-2dims': use the canvas as a coordinate system of 2 dimensions
+            - option 'drawing': use the canvas as a mouse drag drawing area
+          - 'mouse_click_enabled': specify if mouse click input is enabled. only used with type 'coordinate-2dims'
+            - option 'none' [default]: disable the mouse
+            - option 'left': only allow left mouse click for 1 feature input
+            - option 'both': allow left and right mouse click, left for feature 1 and right for feature 2.
+          - 'heatmap': specify if heatmap data is allowed to draw on the page
+            - 'contour' 
+              - option False [default]: do not display contour
+              - option true: display contour(using conrec.js)
+          - 'coordinate_system': a dict specifys the property of the coordinate system
+            - 'horizontal_axis': a dict specifys the property of the horizontal axis
+            - 'vertical_axis': a dict specifys the property of the vertical axis
+              - 'range': an 2-item list specifys the range of the axis, eg. [-5.0, 5.0]
+        - 'panels': an list of dicts, each item is a configuration of a single panel in panel section
+            item dict info:
+            - 'panel_name': the html id of the panel <div>, in other word, you can access the panel by document.getElementById() in javascript.
+              - if 'panel_name' is 'arguments', the generator will generate a form with the argument type information set in panel_property
+              - if 'panel_name' is 'toy_data', the generator will make a toy data generator/importer panel in the panel section.
+            - 'panel_label' [default same as 'panel_name']: the title of the panel.
+            - 'panel_property': use along with 'panel_name' equals 'argument', which provide the argument information of the particular argument panel.
+              - Arguments List, an list of dicts, each item of the list represents a profile of input zone for a single argument.
+                item dict info:
+                - 'argument_type': set as one of ['integer', decimal', 'select'],
+                  - 'integer': make the text input zone only accepts integer.
+                  - 'decimal': make the text input zone only accepts decimal number.
+                  - 'select': make the zone as a drop-down menu. in this case, an string list of 'argument_items' must be set to specify the items in the menu. 
+                  - 'button-group': create a button group. in this case, a dict list of 'argument_items' must be set to specify each button information in the group.
+                - 'argument_label': the label(or name) of the input.
+                - 'argument_name': the html id of the input
+                - 'argument_default': use with argument_type equals 'integer' or 'decimal', specify the default value of the input zone.
+                - 'argument_items': use with argument_type equals 'select' or 'button-group', specify the items under the drop-down menu or button group.
+                  - when use with 'argument_type' == 'select', a list of the drop-down menu items' name need to be provided.
+                  - when use with 'argument_type' == 'button-group', a list of button's information dicts need to be provided.
+                    button info:
+                    - 'button_name': the html id of <button>, in other word, you can access the button by document.getElementId() in javascript.
+                    - 'button_label': the caption shown on the button.
+                    - 'button_type': if 'button_type' == 'json_up_down_load', a json interactive javascript will be generate. The function upload all the parameter specified in the argument list, and send a ajax request. The target URL is the correspond 'button_name', which means if a button named 'generate', and it's a 'json_up_down_load' button, when hit the button, it'll send 'generate/' a ajax request. When the browser received the data sent back from server, a custom function named 'button_name' will be called to do further work, such as draw the data on the canvas section.
+    - frontend script
+      Detailed javascript is needed to specify the way data input and output, and it can be done by modifying the {% block javascript %} block in the template file. Meanwhile, when there's a button group defined in the panel section, you can add the mousedown event to the button by creating functions named <button_name>_action.
+
+  - python backend
+    A python backend is needed to specify the algorithm. The backend method is better in the same file with the entrance generator. Just like the entrance generator, the backend is a method which needs a HttpRequest object as input argument and provide with a HttpResponse object. The HttpRequest object contains the input data of the algorithm, and we can access a single parameter with request.POST[<argument_name>]. When the calculation is down, it'd be better to dump it in a json file and send.
+

common/data.py

@@ -0,0 +1,17 @@
+from django.http import HttpResponse
+import json
+import zipfile
+
+archives = {
+    'mnist': 'data/tapkee/mnist.zip',
+    'faces_transparent': 'data/tapkee/faces_transparent.zip',
+    'oks': 'data/tapkee/oks.zip',
+}
+
+def serve(request, archive_name, file_name):
+    try:
+        z = zipfile.ZipFile(archives[archive_name], "r")
+        content = z.read(file_name)
+        return HttpResponse(content,mimetype="image/png")
+    except:
+        return json.dumps({'status': 'exception'})

demo/Ai.py

@@ -9,7 +9,7 @@
 import gzip as gz
 import pickle as pkl
 
-TRAIN_SVM_FNAME_GZ = "local/ocr.svm.gz"
+TRAIN_SVM_FNAME_GZ = "data/ocr/ocr.svm.gz"
 
 NEAR_ZERO_POS = 1e-8
 NEAR_ONE_NEG = 1-NEAR_ZERO_POS

demo/tapkee.py

@@ -0,0 +1,40 @@
+from django.http import HttpResponse, Http404
+from django.template import RequestContext
+from django.shortcuts import render_to_response
+
+import demo
+import modshogun as sg
+import numpy as np
+import json
+
+def entrance(request):
+    arguments = [
+        {
+            'argument_type': 'select',
+            'argument_name': 'demo_switch',
+            'argument_label': 'Feature Type',
+            'argument_items': ['MIT_CBCL_faces_embedding',
+                               'words_embedding',
+                               'MNIST_digits_embedding',
+                               'promoters_embedding',
+                               'faces_embedding'],
+            },
+        {
+            'argument_type': 'button-group',
+            'argument_items': [{'button_name': 'show'},
+                               {'button_name': 'clear'}],
+            }
+        ]
+    properties = {'title': 'Dimension Reduction',
+                  'template': {'type': 'coordinate-2dims',
+                               'mouse_click_enabled': 'none'},
+                  'panels':[
+                      {
+                          'panel_name': 'arguments',
+                          'panel_label': 'Arguments',
+                          'panel_property': arguments
+                      }]}
+
+    return render_to_response("tapkee/index.html",
+                              properties,
+                              context_instance = RequestContext(request))

shogun_demo/urls.py

@@ -30,8 +30,10 @@
     url(r'^kernel_matrix/generate', 'demo.kernel_matrix.generate'),
     url(r'^ocr/entrance', 'demo.ocr.entrance'),
     url(r'^ocr/recognize', 'demo.ocr.recognize'),
+    url(r'^tapkee/entrance', 'demo.tapkee.entrance'),
     url(r'^toy_data/generator/generate', 'toy_data.generator.generate'),
     url(r'^toy_data/importer/dump', 'toy_data.importer.dump'),
+    url(r'^data/(\w+)/(.+)', 'common.data.serve'),
 
     # url(r'^shogun_demo/', include('shogun_demo.foo.urls')),
 

static/css/tipsy.css

@@ -0,0 +1,25 @@
+.tipsy { font-size: 12px; font-weight: 900; position: absolute; padding: 5px; z-index: 100000; }
+  .tipsy-inner { background-color: #000; color: #FFF; max-width: 200px; padding: 5px 8px 4px 8px; text-align: center; }
+
+  /* Rounded corners */
+  .tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
+
+  /* Uncomment for shadow */
+  .tipsy-inner { box-shadow: 0 0 10px #000000; -webkit-box-shadow: 0 0 10px #000000; -moz-box-shadow: 0 0 10px #000000; }*/
+
+  .tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }
+
+  /* Rules to colour arrows */
+  .tipsy-arrow-n { border-bottom-color: #000; }
+  .tipsy-arrow-s { border-top-color: #000; }
+  .tipsy-arrow-e { border-left-color: #000; }
+  .tipsy-arrow-w { border-right-color: #000; }
+
+  .tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
+    .tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
+    .tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none;  border-left-color: transparent; border-right-color: transparent;}
+  .tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
+    .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
+    .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
+  .tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
+  .tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }

static/data/tapkee/faces.json

@@ -0,0 +1 @@
+{"data": [{"cy": -0.050156300000000001, "cx": -0.0197938, "fname": "0.png"}, {"cy": 0.034467999999999999, "cx": 0.018406100000000002, "fname": "1.png"}, {"cy": 0.22167200000000001, "cx": -0.0044889700000000001, "fname": "2.png"}, {"cy": 0.081275799999999995, "cx": -0.137709, "fname": "3.png"}, {"cy": 0.0080061300000000002, "cx": 0.017924599999999999, "fname": "4.png"}, {"cy": -0.15435399999999999, "cx": 0.0939247, "fname": "5.png"}, {"cy": -0.069897600000000004, "cx": 0.092462500000000003, "fname": "6.png"}, {"cy": 0.096519499999999994, "cx": -0.125776, "fname": "7.png"}, {"cy": 0.14285900000000001, "cx": -0.015592699999999999, "fname": "8.png"}, {"cy": 0.049301200000000003, "cx": -0.136882, "fname": "9.png"}, {"cy": 0.017645000000000001, "cx": -0.014467799999999999, "fname": "10.png"}, {"cy": 0.059214000000000003, "cx": -0.0068586100000000002, "fname": "11.png"}, {"cy": -0.046277600000000002, "cx": 0.209531, "fname": "12.png"}, {"cy": 0.17344300000000001, "cx": 0.085307800000000003, "fname": "13.png"}, {"cy": 0.33755000000000002, "cx": -0.033854599999999999, "fname": "14.png"}, {"cy": 0.12468899999999999, "cx": -0.021648400000000002, "fname": "15.png"}, {"cy": 0.121133, "cx": 0.117742, "fname": "16.png"}, {"cy": 0.0037597500000000001, "cx": 0.033436300000000002, "fname": "17.png"}, {"cy": 0.018310099999999999, "cx": -0.012065299999999999, "fname": "18.png"}, {"cy": 0.15783, "cx": 0.123711, "fname": "19.png"}, {"cy": 0.217557, "cx": 0.241586, "fname": "20.png"}, {"cy": -0.260322, "cx": 0.144839, "fname": "21.png"}, {"cy": -0.086849999999999997, "cx": -0.28669, "fname": "22.png"}, {"cy": 0.054554900000000003, "cx": -0.100935, "fname": "23.png"}, {"cy": 0.0121817, "cx": 0.25231300000000001, "fname": "24.png"}, {"cy": 0.28276800000000002, "cx": 0.043233199999999999, "fname": "25.png"}, {"cy": 0.16633200000000001, "cx": -0.0079613700000000006, "fname": "26.png"}, {"cy": 0.075328500000000007, "cx": -0.033265599999999999, "fname": "27.png"}, {"cy": -0.17982699999999999, "cx": -0.181784, "fname": "28.png"}, {"cy": 0.037491700000000003, "cx": 0.025031299999999999, "fname": "29.png"}, {"cy": -0.17038, "cx": -0.100693, "fname": "30.png"}, {"cy": -0.088037599999999994, "cx": 0.246726, "fname": "31.png"}, {"cy": -0.24627099999999999, "cx": 0.069115999999999997, "fname": "32.png"}, {"cy": 0.103564, "cx": -0.094890100000000005, "fname": "33.png"}, {"cy": 0.201958, "cx": 0.079853300000000002, "fname": "34.png"}, {"cy": 0.058205600000000003, "cx": 0.40078000000000003, "fname": "35.png"}, {"cy": 0.0142884, "cx": 0.01285, "fname": "36.png"}, {"cy": 0.023267400000000001, "cx": 0.047085099999999998, "fname": "37.png"}, {"cy": 0.18231, "cx": 0.041014200000000001, "fname": "38.png"}, {"cy": -0.14113100000000001, "cx": -0.098745700000000006, "fname": "39.png"}, {"cy": 0.046704799999999998, "cx": -0.196575, "fname": "40.png"}, {"cy": 0.054482799999999998, "cx": -0.07417, "fname": "41.png"}, {"cy": 0.176371, "cx": 0.043748500000000003, "fname": "42.png"}, {"cy": 0.058412199999999997, "cx": -0.19153899999999999, "fname": "43.png"}, {"cy": 0.0053472499999999996, "cx": -0.054027800000000001, "fname": "44.png"}, {"cy": 0.209726, "cx": 0.13808000000000001, "fname": "45.png"}, {"cy": 0.176429, "cx": 0.037404699999999999, "fname": "46.png"}, {"cy": -0.250967, "cx": 0.38842399999999999, "fname": "47.png"}, {"cy": 0.131633, "cx": -0.0213251, "fname": "48.png"}, {"cy": 0.00056954300000000005, "cx": 0.22169800000000001, "fname": "49.png"}]}