Support multi label annotations

README.md

@@ -3,6 +3,7 @@
 This project has a web interface to label training data for machine learning task.
 As of now it can allow you to easily label images with one or many labels
 
+Support both python 2 and python 3
 
 # Requires
 
@@ -25,12 +26,16 @@ Install them using pip
 {
   "type": "image-labeling",
   "task": {
-	"labels":[
-		"class1",
-		"class2",
-		"class3",
-		"class4"
-	 ]
+  "labels":[[
+    "D1",
+    "D2",
+    "D3",
+    "D4",
+    "D5",
+    "D6"
+   ], ["Front",
+    "Side",
+    "Back"]]
   }
 }
 ```
@@ -66,7 +71,7 @@ Visit http://localhost:8080 on web browser
 
 
 ## Screenshots 
-![Image](../master/screenshots/labeling-images.png?raw=true)
+![Image](../master/screenshots/multilabel.jpg?raw=true)
 
 
 ## WARNING:

app.py

@@ -24,6 +24,10 @@
 import logging
 from datetime import datetime
 import urllib
+try:
+    from urllib import quote  # Python 2.X
+except ImportError:
+    from urllib.parse import quote  # Python 3+
 
 from flask import Flask, render_template, request, abort, send_file, redirect, Response
 app = Flask(__name__)
@@ -54,7 +58,7 @@ def webpage():
         # redirect with url query param so that user can navigate back later
         next_rec = service.get_next_unlabelled()
         if next_rec:
-            return redirect("/?url=%s" % (urllib.quote(next_rec['url'])))
+            return redirect("/?url=%s" % (quote(next_rec['url'])))
         else:
             featured_content = "No Unlabelled Record Found."
     else:
@@ -84,7 +88,7 @@ def update():
         next_rec = service.get_next_unlabelled()
         target = "/"
         if next_rec:
-            target += "?url=%s" % (urllib.quote(next_rec['url']))
+            target += "?url=%s" % (quote(next_rec['url']))
         return redirect(location=target)
     else:
         return abort(400, "Failed... No records updated")
@@ -104,7 +108,7 @@ def get_next(url=None):
     next_rec = service.get_record(url)
     url = next_rec['url']
     template_name = '%s.html' % service.settings['type']
-    data_url = url if url.startswith('http') else "/proxy?url=%s" % urllib.quote(next_rec['url'])
+    data_url = url if url.startswith('http') else "/proxy?url=%s" % quote(next_rec['url'])
     data = {
         'data_url' : data_url,
         'url': url,

templates/image-labeling.html

@@ -4,8 +4,11 @@ <h2> Classify this image:</h2>
     <div class="col-md-6">
       <form method="POST" action="/update" id="form">
         <input type="hidden" name="url" value="{{ url }}">
-        {% for label in task.labels %}
-          <input type="checkbox" name="label" value="{{ label }}" id="checkbox_{{ label }}" style="width: 25px; height: 25px;">{{ loop.index }}) {{ label }}<br>
+        {% for labels in task.labels %}
+        <h3> Category: {{ loop.index }}</h3>
+          {% for label in labels %}
+            <input type="checkbox" name="label" value="{{ label }}" id="checkbox_{{ label }}" style="width: 25px; height: 25px;">{{ loop.index }}) {{ label }}<br>
+          {% endfor %}
         {% endfor %}
         <br/>
         <input type="submit" class="btn btn-primary" value="Submit">
@@ -29,10 +32,12 @@ <h2> Classify this image:</h2>
       let key = String.fromCharCode(e.keyCode);
 
       {% for label in task.labels %}
-      if (key == "{{ loop.index }}") {
-        let el = document.getElementById("checkbox_{{ label }}");
-        el.checked = !el.checked;
-      }
+        {% for label in task.labels %}
+        if (key == "{{ loop.index }}") {
+          let el = document.getElementById("checkbox_{{ label }}");
+          el.checked = !el.checked;
+        }
+        {% endfor %}
       {% endfor %}
 
       // submit on enter

templates/index.html

@@ -4,9 +4,10 @@
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Trainer - Create labels for data</title>
-    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
-    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
     <div class="container">

workdir/input.txt

@@ -0,0 +1,15 @@
+/home/duydo/Heligate/Labeling/Data/download (1).jpeg
+/home/duydo/Heligate/Labeling/Data/salons-model.jpg
+/home/duydo/Heligate/Labeling/Data/tumblr_static_akrcuuu9magcgco4cgoc8wg40.jpg
+/home/duydo/Heligate/Labeling/Data/download.jpeg
+/home/duydo/Heligate/Labeling/Data/2013062023115989.jpg
+/home/duydo/Heligate/Labeling/Data/240_F_122448278_iUlaPjFaloCml31UZpPt25cb9w4mvKMT.jpg
+/home/duydo/Heligate/Labeling/Data/images (2).jpeg
+/home/duydo/Heligate/Labeling/Data/images (1).jpeg
+/home/duydo/Heligate/Labeling/Data/l_oreal_paris_elvive_camila_cabello.jpg
+/home/duydo/Heligate/Labeling/Data/models-wanted.jpg
+/home/duydo/Heligate/Labeling/Data/woman_on_white-700x750.jpg
+/home/duydo/Heligate/Labeling/Data/images.jpeg
+/home/duydo/Heligate/Labeling/Data/grace-jones-inspired-hair.jpeg
+/home/duydo/Heligate/Labeling/Data/1c56aec62775e2222c78338a4dbb7cdd.jpg
+/home/duydo/Heligate/Labeling/Data/ColorZoom_Mobile_Patricia_01.jpg

workdir/settings.json

@@ -1,11 +1,15 @@
 {
   "type": "image-labeling",
   "task": {
-	"labels":[
-		"class1",
-		"class2",
-		"class3",
-		"class4"
-	 ]
+	"labels":[[
+		"D1",
+		"D2",
+		"D3",
+		"D4",
+		"D5",
+		"D6"
+	 ], ["Front",
+		"Side",
+		"Back"]]
   }
 }