diff --git a/demo/clustering.py b/demo/clustering.py
index 416fd26..66e8a9e 100644
--- a/demo/clustering.py
+++ b/demo/clustering.py
@@ -7,7 +7,25 @@
 import json
 
 def entrance(request):
-    properties = { 'title': 'Clustering Demo' }
+    arguments = [
+        {
+            'argument_type': 'select',
+            'argument_label': 'Distance',
+            'argument_name': 'distance',
+            'argument_items': ['EuclideanDistance',
+                             'ManhattanMetric',
+                             'JensenMetric']},
+        {
+            'argument_type': 'integer',
+            'argument_name': 'number_of_clusters',
+            'argument_label': 'Number of Clusters (<500)',
+            'argument_default': '2'},
+        {
+            'argument_type': 'button-group',
+            'argument_items': ['cluster', 'clear']
+        }]
+    properties = { 'title': 'Clustering Demo' ,
+                   'arguments': arguments}
     return render_to_response("clustering/index.html", properties, context_instance=RequestContext(request))
 
 def cluster(request):
@@ -31,7 +49,7 @@ def _read_data(request):
         raise TypeError
     positive = json.loads(request.POST['positive'])['points']
     negative = json.loads(request.POST['negative'])['points']
-    distance_name = request.POST['distance_name']
+    distance_name = request.POST['distance']
         
     if len(positive) == 0 and len(negative) == 0:
         raise TypeError
@@ -54,11 +72,11 @@ def _train_clustering(positive, negative, distance_name, k):
     lab = sg.BinaryLabels(labels)
     train = sg.RealFeatures(features)
              
-    if distance_name == "eucl":
+    if distance_name == "EuclideanDistance":
         distance = sg.EuclideanDistance(train, train)
-    elif distance_name == "manh":
+    elif distance_name == "ManhattanMetric":
         distance = sg.ManhattanMetric(train, train)
-    elif distance_name == "jens":
+    elif distance_name == "JensenMetric":
         distance = sg.JensenMetric(train, train)
     else:
        raise TypeError
diff --git a/demo/gp.py b/demo/gp.py
index 8ba6e6a..c10ffc0 100644
--- a/demo/gp.py
+++ b/demo/gp.py
@@ -9,7 +9,34 @@
 import json
 
 def entrance(request):
-    properties = { 'title': 'Gaussian Process Regression Demo' }
+    arguments = [
+        {
+            'argument_type': 'decimal',
+            'argument_label': 'Sine Freq.',
+            'argument_name': 'frequency',
+            'argument_default': '2.0'},
+        {
+            'argument_type': 'decimal',
+            'argument_label': 'Amplitude',
+            'argument_name': 'amplitude',
+            'argument_default': '2.0'},
+        {
+            'argument_type': 'decimal',
+            'argument_label': 'Noise Level',
+            'argument_name': 'noise_level',
+            'argument_default': '0.1'},
+        {
+            'argument_type': 'decimal',
+            'argument_label': 'Kernel Width',
+            'argument_name': 'kernel_width',
+            'argument_default': '2.0'},
+        {
+            'argument_type': 'button-group',
+            'argument_items': ['GenerateToyData', 'TrainGP', 'Clear']
+        }
+    ]
+    properties = { 'title': 'Gaussian Process Regression Demo' ,
+                   'arguments': arguments }
     return render_to_response("gp/index.html", properties, context_instance = RequestContext(request))
 
 def create_toy_data(request):
diff --git a/demo/kernel_matrix.py b/demo/kernel_matrix.py
index 2ebbdff..bea8b20 100644
--- a/demo/kernel_matrix.py
+++ b/demo/kernel_matrix.py
@@ -8,7 +8,47 @@
 import json
 
 def entrance(request):
-    properties = { 'title': 'Kernel Matrix Visualization' }
+    arguments = [
+        {
+            'argument_type': 'decimal',
+            'argument_name': 'frequency',
+            'argument_label': 'Sine Freq.',
+            'argument_default': '1.0'},
+        {
+            'argument_type': 'decimal',
+            'argument_name': 'amplitude',
+            'argument_label': 'Amplitude',
+            'argument_default': '1.0'},
+        {
+            'argument_type': 'decimal',
+            'argument_name': 'noise_level',
+            'argument_label': 'Noise Level',
+            'argument_default': '0.3'},
+        {
+            'argument_type': 'select',
+            'argument_label': 'Kernel Function',
+            'argument_name': 'kernel',
+            'argument_items': ['GaussianKernel', 'PolynomialKernel', 'LinearKernel'],
+            'argument_default': 'GaussianKernel'},
+        {
+            'argument_type': 'decimal',
+            'argument_label': 'Kernel Width',
+            'argument_name': 'kernel_width',
+            'argument_default': '0.3'},
+        {
+            'argument_type': 'integer',
+            'argument_name': 'degree',
+            'argument_default': '5'},
+        {
+            'argument_type': 'button-group',
+            'argument_items': ['CreateToyData', 'Draw', 'Clear']},
+        {
+            'argument_type': 'div',
+            'argument_label': 'Legend',
+            'argument_id': 'legend'}
+        ]
+    properties = { 'title': 'Kernel Matrix Visualization',
+                   'arguments': arguments }
     return render_to_response("kernel_matrix/index.html",
                               properties,
                               context_instance = RequestContext(request))
@@ -73,11 +113,11 @@ def _process(x1_set, x2_set, kernel_width, kernel_name, degree):
     feat_train = sg.RealFeatures(examples)
 
     # construct covariance function
-    if kernel_name == "line":
+    if kernel_name == "LinearKernel":
         kernel = sg.LinearKernel(feat_train, feat_train)
-    elif kernel_name == "poly":
+    elif kernel_name == "PolynomialKernel":
         kernel = sg.PolyKernel(feat_train, feat_train, degree, True)
-    elif kernel_name == "gaus":
+    elif kernel_name == "GaussianKernel":
         kernel = sg.GaussianKernel(feat_train, feat_train, kernel_width)
     kernel_matrix=kernel.get_kernel_matrix()
     return kernel_matrix.tolist()
diff --git a/demo/svr.py b/demo/svr.py
index 098901b..1843684 100644
--- a/demo/svr.py
+++ b/demo/svr.py
@@ -7,7 +7,41 @@
 import json
 
 def entrance(request):
-    properties = { 'title': 'Supported Vector Regression Demo' }
+    arguments = [
+        {
+            'argument_type': 'select',
+            'argument_name': 'kernel',
+            'argument_items': ['GaussianKernel', 'PolynomialKernel', 'LinearKernel' ],
+            'argument_default': 'GaussianKernel'
+        },
+        {
+            'argument_type': 'decimal',
+            'argument_name': 'C',
+            'argument_default': '1.2'
+        },
+        {
+            'argument_type': 'decimal',
+            'argument_name': 'tube',
+            'argument_default': '0.04'
+        },
+        {
+            'argument_type': 'decimal',
+            'argument_name': 'sigma',
+            'argument_default': '0.3'
+        },
+        {
+            'argument_type': 'integer',
+            'argument_name': 'd',
+            'argument_default': '5'
+        },
+        {
+            'argument_type': 'button-group',
+            'argument_items': ['regress', 'clear']
+        }
+        ]
+        
+    properties = { 'title': 'Supported Vector Regression Demo',
+                   'arguments': arguments }
     return render_to_response("svr/index.html", properties, context_instance=RequestContext(request))
     
 def point(request):
@@ -50,13 +84,13 @@ def _train_svr(cost, tubeeps, degree, width, kernel_name, labels, features):
     lab = sg.RegressionLabels(labels)
     train = sg.RealFeatures(examples)
                 
-    if kernel_name == "line":
+    if kernel_name == "LinearKernel":
         gk = sg.LinearKernel(train, train)
         gk.set_normalizer(sg.IdentityKernelNormalizer())
-    elif kernel_name == "poly":
+    elif kernel_name == "PolynomialKernel":
         gk = sg.PolyKernel(train, train, degree, True)
         gk.set_normalizer(sg.IdentityKernelNormalizer())
-    elif kernel_name == "gaus":
+    elif kernel_name == "GaussianKernel":
         gk = sg.GaussianKernel(train, train, width)
     else:
         raise TypeError
diff --git a/templates/arguments_form.html b/templates/arguments_form.html
new file mode 100644
index 0000000..9d01f57
--- /dev/null
+++ b/templates/arguments_form.html
@@ -0,0 +1,32 @@
+<form name="arguments">
+  {% for argument in arguments %}
+    {% if argument.argument_label %}
+    <label> {{ argument.argument_label }} </label>
+    {% elif argument.argument_name %}
+    <label> {{ argument.argument_name }} </label>
+    {% endif %}
+    {% if argument.argument_type == 'decimal' %}
+    <input type="text" value="{{ argument.argument_default }}" name="{{ argument.argument_name }}" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"></br>
+    {% elif argument.argument_type == 'integer' %}
+    <input type="text" value="{{ argument.argument_default }}" name="{{ argument.argument_name }}" onkeyup="value=value.replace(/[^\d]/g,'')">
+    {% elif argument.argument_type == 'select' %}
+    <select name="{{ argument.argument_name }}" >
+      {% for item in argument.argument_items %}
+      <option value="{{ item }}" {% if item == argument.argument_default %} selected {% endif %}>{{ item }} </option>
+      {% endfor %}
+    </select> <br/>
+    {% elif argument.argument_type == 'button-group' %}
+    <div class="btn-group">
+      {% for item in argument.argument_items %}
+      <button type="button" class="btn btn-small btn-primary" id="{{ item }}" onclick="{{ item }}_action();">
+        {{ item }}
+      </button>
+      {% endfor %}
+    </div>
+    {% elif argument.argument_type == 'div' %}
+    <div {% if argument.argument_id %} id="{{ argument.argument_id}}" {% endif %}
+         {% if argument.argument_class %} class="{{ argument.argument_class }}" {% endif %}
+         ></div>
+    {% endif %}
+  {% endfor %}
+</form>
diff --git a/templates/clustering/index.html b/templates/clustering/index.html
index 24e3a3b..5a89114 100644
--- a/templates/clustering/index.html
+++ b/templates/clustering/index.html
@@ -36,22 +36,6 @@
         }
       </style>
 {% endblock %}
-{% block arguments %}
-      <form name="arguments">
-          <label> Distance </label>
-          <select name="distance_name" class="span3">
-                <option value="eucl" selected>Euclidean Distance</option>
-                <option value="manh">Manhattan Metric</option>
-                <option value="jens">Jensen Metric</option>
-             </select></br>
-          <label> Number of Clusters ( <500 )</label>
-          <input type="text" value="2" name="number_of_clusters" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')"></br>
-        <div class="btn-group">
-        <button type="button" class="btn btn-small btn-primary" id="clust"  onclick="cluster();">Cluster</button>
-        <button type="button" class="btn btn-small btn-primary" onclick="clear_canvas();">Clear</button>
-        </div>
-      </form>
-{% endblock %}
 {% block javascript %}
       <script>
         var positive_dots = {"points" : []};
@@ -184,7 +168,7 @@
               .text("Y-axis");
 
 
-        function clear_canvas()
+        function clear_action()
         {
            svg.selectAll(".dot").remove();
            svg.selectAll(".line")
@@ -196,7 +180,7 @@
            negative_dots = {"points" : []};
         }
         
-        function cluster()
+        function cluster_action()
         {
               if (positive_dots.points.length + negative_dots.points.length>0)
               $.ajax(
@@ -204,11 +188,11 @@
                       url:"cluster",
                       type: "POST",
                       dataType: 'text',
-                      beforeSend: function(){$("#clust").attr('disabled', true);},
+                      beforeSend: function(){$("#cluster").attr('disabled', true);},
                       data: {positive: JSON.stringify(positive_dots),
                              negative: JSON.stringify(negative_dots),
                              number_of_clusters: document.arguments.number_of_clusters.value,
-                             distance_name: document.arguments.distance_name.value,
+                             distance: document.arguments.distance.value,
                              csrfmiddlewaretoken: '{{ csrf_token }}'},
                       success: function(data){
                                   svg.selectAll(".line").remove();
@@ -243,13 +227,13 @@
                                    .attr("x2", function(d) {return x(d.x+0.02);})
                                    .attr("y2", function(d) {return y(d.y-0.02);})
                                    .style("stroke", "gray");
-                                 $("#clust").attr('disabled', false);
+                                 $("#cluster").attr('disabled', false);
         
                                },
         
                       error: function(){
                                    alert("Sorry! Got something wrong here, Check your input");
-                                   $("#clust").attr('disabled', false);
+                                   $("#cluster").attr('disabled', false);
                                }
                     });
         }
diff --git a/templates/default.html b/templates/default.html
index c633d4f..62dc386 100644
--- a/templates/default.html
+++ b/templates/default.html
@@ -17,7 +17,7 @@
         <div class="span9" style="display:inline;"></div>
         <!-- arguments -->
         <div class="span3" style="display:inline;">
-          {% block arguments %} {% endblock %}
+          {% include "arguments_form.html" %}
         </div>
       </div>
       {% block javascript %} {% endblock %}
diff --git a/templates/gp/index.html b/templates/gp/index.html
index c83a9b4..1aea482 100644
--- a/templates/gp/index.html
+++ b/templates/gp/index.html
@@ -36,23 +36,6 @@
         }
       </style>
 {% endblock %}
-{% block arguments %}
-      <form name="arguments">
-          <label> Sine Freq.  </label>
-          <input style="width:800" type="text" value="2.0" name="frequency" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"></br>
-          <label> Amplitude </label>
-          <input type="text" value="2.0" name="amplitude" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"></br>
-          <label> Noise Level </label>
-          <input type="text" value="0.1" name="noise_level" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"></br>
-          <label> Kernel Width </label>
-          <input type="text" value="2.0" name="kernel_width" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')">
-        <div class="btn-group">
-        <button type="button" class="btn btn-small btn-primary" id="id_create" onclick="create_toy_data();">Generate Sine Data</button>
-        <button type="button" class="btn btn-small btn-primary" id="id_train" onclick="train();">Train GP</button>
-        <button type="button" class="btn btn-small btn-primary"  onclick="clear_map();">Clear</button>
-        </div>
-      </form>
-{% endblock %}
 {% block javascript %}
       <script>
         toy_data = [];
@@ -135,7 +118,7 @@
               .style("text-anchor", "end")
               .text("Y-axis");
 
-        function clear_map()
+        function Clear_action()
         {
            svg.selectAll(".line")
             .transition()
@@ -157,7 +140,7 @@
            .y(function (d) {return y(0); })
            .interpolate('basis')
 
-        function create_toy_data()
+        function GenerateToyData_action()
         {
               $.ajax(
                     {
@@ -168,7 +151,7 @@
                               amplitude: document.arguments.amplitude.value ,
                               frequency: document.arguments.frequency.value,
                               noise_level: document.arguments.noise_level.value},
-                       beforeSend: function(){$("#id_create").attr('disabled',true);},
+                       beforeSend: function(){$("#GenerateToyData").attr('disabled',true);},
                        success: function(data){
                                    json = $.parseJSON(data)['data'];
                                    svg.selectAll(".dot").remove();
@@ -182,17 +165,17 @@
                                        .attr("cy", function(d) { return y(d.y); })
                                        .style("fill", "red")
                                        .style("stroke", "none");
-                                   $("#id_create").attr('disabled', false);
+                                   $("#GenerateToyData").attr('disabled', false);
                                 },
                         error: function(){alert("Cannot connect to server");
-                                          $("#id_create").attr('disabled', false);}
+                                          $("#GenerateToyData").attr('disabled', false);}
                      });
         }
         var area_end = d3.svg.area()
           .x(function(d) { return x(d.x);})
           .y0(function(d) { return y(d.range_lower);})
           .y1(function(d) { return y(d.range_upper);});
-        function train()
+        function TrainGP_action()
         {
             if (toy_data.length !=0)
               $.ajax(
@@ -204,7 +187,7 @@
                              toy_data: JSON.stringify(toy_data),
                              noise_level: document.arguments.noise_level.value,
                              kernel_width: document.arguments.kernel_width.value},
-                      beforeSend: function(){$("#id_train").attr('disabled', true);},
+                      beforeSend: function(){$("#TrainGP").attr('disabled', true);},
                       success: function(data){
                                  json = $.parseJSON(data);
                                  if (svg.selectAll(".line")[0].length == 0)
@@ -224,18 +207,17 @@
                                   .attr("class", "area")
                                   .attr("d", area_end(json))
                                   .style("fill", "rgba(128, 128, 128, 0.25)");
-                                $("#id_train").attr('disabled', false);
+                                $("#TrainGP").attr('disabled', false);
                                },
                       error: function(){
                                    alert("Error Generated!");
-                                   $("#id_train").attr('disabled', false);
+                                   $("#TrainGP").attr('disabled', false);
                                }
                     });
              else{
                   alert("Sorry, there's no dots to train, generate some, pls");
              }
         }
-
         
         </script>
 {% endblock %}
diff --git a/templates/kernel_matrix/index.html b/templates/kernel_matrix/index.html
index 2e96d18..51ff3d0 100644
--- a/templates/kernel_matrix/index.html
+++ b/templates/kernel_matrix/index.html
@@ -44,33 +44,6 @@
           }
         </style>
 {% endblock %}
-{% block arguments %}
-            <form name="arguments">
-              <label> Sine Freq.  </label>
-              <input style="width:800" type="text" value="1.0" name="frequency" class="span3" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"></br>
-              <label> Amplitude </label>
-              <input type="text" value="1.0" name="amplitude" class="span3" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"></br>
-              <label> Noise Level </label>
-              <input type="text" value="0.3" name="noise_level" class="span3" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"></br>
-              <label> Kernel Function </label>
-              <select name="kernel" class="span3">
-                <option value="gaus" selected> Gaussian Kernel</option>
-                <option value="poly"> Polynomial Kernel</option>
-                <option value="line"> Linear Kernel</option>
-              </select><br/>
-              <label> Kernel Width </label>
-              <input type="text" value="0.3" name="kernel_width" class="span3" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')">
-              <label> degree </label>
-              <input type="text" value="5" name="degree" onkeyup="value=value.replace(/[^\d]/g,'')">
-              <div class="btn-group">
-                <button type="button" class="btn btn-small btn-primary" id="generate" onclick="create_toy_data();">Generate Sine Data</button>
-                <button type="button" class="btn btn-small btn-primary" id="drawing" onclick="generate_matrix();">Draw</button>
-                <button type="button" class="btn btn-small btn-primary"  onclick="clear_map();">Clear</button>
-              </div>
-              <label>legend</label>
-              <div id="legend"></div>
-            </form>
-{% endblock %}           
 {% block javascript %}
         <script>
           toy_data = [];
@@ -150,13 +123,13 @@
               .style("text-anchor", "end")
               .text("X2");
 
-          function clear_map()
+          function Clear_action()
           {
              svg.selectAll(".dot").remove();
              $("#heatmap").remove();
              toy_data = [];
           }
-          function create_toy_data()
+          function CreateToyData_action()
           {
                 $.ajax(
                       {
@@ -168,7 +141,7 @@
                                 frequency: document.arguments.frequency.value,
                                 noise_level: document.arguments.noise_level.value},
                          beforeSend:function(){
-                                    $("#generate").attr('disabled', true);
+                                    $("#CreateToyData").attr('disabled', true);
                                 },
                          success: function(data){
                                      json = $.parseJSON(data)['data'];
@@ -183,15 +156,15 @@
                                          .attr("cy", function(d) { return y(d.y); })
                                          .style("fill", "red")
                                          .style("stroke", "none");
-                                      $("#generate").attr('disabled', false)
+                                      $("#CreateToyData").attr('disabled', false)
                                   },
-                          error: function(){alert("Cannot connect to server"); $("#generate").attr('disabled',true);}
+                          error: function(){alert("Cannot connect to server"); $("#CreateToyData").attr('disabled',true);}
                       });
           }
           var color = d3.scale.linear()
               .domain([0,1])
               .range(["blue","red"]);
-          function generate_matrix()
+          function Draw_action()
           {
               if (toy_data.length !=0)
                 $.ajax(
@@ -207,7 +180,7 @@
                                 degree: document.arguments.degree.value
                               },
                         beforeSend:function(){
-                                $("#drawing").attr('disabled', true);
+                                $("#Draw").attr('disabled', true);
                               },
                         success:function(data){
                                   heatmap = $.parseJSON(data);
@@ -237,10 +210,10 @@
                                     }
                                   }
                                   context.putImageData(image, 0, 0);
-                                  $("#drawing").attr('disabled', false);
+                                  $("#Draw").attr('disabled', false);
                                 },
                         error: function(){
-                                     $("#drawing").attr('disabled', false);
+                                     $("#Draw").attr('disabled', false);
                                      alert("Error Generated!");
                                }
                   });
diff --git a/templates/svr/index.html b/templates/svr/index.html
index b8b7b65..92c594b 100644
--- a/templates/svr/index.html
+++ b/templates/svr/index.html
@@ -36,28 +36,6 @@
         }
         </style>
 {% endblock %}
-{% block arguments %}
-      <form name="arguments">
-          <label> Kernel Function </label>
-          <select name="kernel" class="span3">
-                <option value="gaus" selected>GaussianKernel</option>
-                <option value="poly">PolynomialKernel</option>
-                <option value="line">LinearKernel</option>
-             </select></br>
-          <label> C  </label>
-          <input style="width:800" type="text" value="1.2" name="C" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"></br>
-          <label> tube </label>
-          <input type="text" value="0.04" name="tube" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"></br>
-          <label>sigma</label>
-          <input type="text" value="0.3" name="sigma" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"></br>
-          <label> d </label>
-          <input type="text" value="5" name="d" onkeyup="value=value.replace(/[^\d]/g,'')">
-        <div class="btn-group">
-        <button type="button" class="btn btn-small btn-primary" id="regress"  onclick="regression();">Regression</button>
-        <button type="button" class="btn btn-small btn-primary" onclick="clear_map();">Clear</button>
-        </div>
-      </form>
-{% endblock %}
 {% block javascript %}
       <script>
         var new_points = {"points" : []};
@@ -206,7 +184,7 @@
 
 
         json = {}
-        function clear_map()
+        function clear_action()
         {
            svg.selectAll(".line")
             .transition()
@@ -226,7 +204,7 @@
            .interpolate('basis')
    
         
-        function regression()
+        function regress_action()
         {
             if (new_points.points.length !=0)
               $.ajax(