Shogun Toolbox Interactive Web Demos
JavaScript CSS HTML Python
Switch branches/tags
Nothing to show
Latest commit e7eae9f Mar 28, 2017 @iglesias iglesias committed on GitHub Merge pull request #60 from tingpan/master
Add home page for demos

  • Author : Shogun.
  • Description : Shogun demos, done in django.

Running Demos Locally

  • To server the static files (required to run the demos) in the development server
    • In / change PRODUCTION = True to PRODUCTION = False
  • Start the Django development server using python runserver
  • On doing python runserver you should see the <addr>:<port> its running at. (Typically
  • Third Party distributions for Django

Explanation of directory content

  • /demos : Handles the requests, present the demos
  • /toy_data : Handles the requests, and generate/import toy data.
  • /static : css, js used by demo
  • /template : All templates for each different page.
  • /shogun_demo:
    • : Configuration.
    • : Urls and method in demos.

Currently available demos

  • http://<addr>:<port>/regression/svr/ : A demo for support vector regression
  • http://<addr>:<port>/regression/regression/ : A demo for ridge regression
  • http://<addr>:<port>/regression/gp/ : A demo for gaussian process regression
  • http://<addr>:<port>/classifier/binary/ : A demo for binary classification
  • http://<addr>:<port>/classifier/perceptron/ : A demo for binary perceptron
  • http://<addr>:<port>/classifier/multiclass/ : A demo for multiclass classification
  • http://<addr>:<port>/classifier/gp/ : A demo for gaussian process classification
  • http://<addr>:<port>/misc/kernel_matrix/ : A demo for kernel matrix visualization
  • http://<addr>:<port>/application/ocr/ : A demo for recognizing hand-written digits.
  • http://<addr>:<port>/application/language_detect/ : A demo for language detection
  • http://<addr>:<port>/clustering/kmeans/ : A demo for clustering using kmeans


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]
          • 'description': A brief introduction to the demo, like how it works and its capabilities. Wll be displayed beneath the title.
        • '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
            , 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_explain': pop-up explanation of the argument. html tags allowed.
              • '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 , 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.