add application file and dependencies

Dockerfile

@@ -0,0 +1,16 @@
+# Read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
+# you will also find guides on how best to write your Dockerfile
+
+FROM python:3.9
+
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+WORKDIR /app
+
+COPY --chown=user ./requirements.txt requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+COPY --chown=user . .
+CMD ["gunicorn", "app:app", "--bind", "0.0.0.0:7860"]

app.py

@@ -0,0 +1,132 @@
+import os
+import shutil
+import uuid
+
+from flask import Flask, redirect, url_for, request, flash, session
+from flask import render_template
+from flask import send_file
+
+app = Flask(__name__)
+app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0
+app.config["SECRET_KEY"] = '#thaistartsfirst!'
+app.config["IMAGES"] = './images'
+app.config["OUT"] = "./anno"
+app.config["LABELS"] = []
+app.config["HEAD"] = 0
+app.config["SESSION_PERMANENT"] = False
+try:
+    os.mkdir(app.config["OUT"])
+    os.mkdir(app.config["IMAGES"])
+except:
+    pass
+
+
+@app.route('/', methods=['GET', 'POST'])
+def index():
+    user_id = session.get('_id')
+    if user_id is None:
+        user_id = uuid.uuid4()
+        session['_id'] = user_id
+        with open(f"{app.config['OUT']}/{user_id}.csv", 'w') as f:
+            f.write("image,id,name,xMin,xMax,yMin,yMax\n")
+
+    if request.method == 'POST':
+        if 'file' not in request.files:
+            flash('No files selected')
+            return redirect('/')
+        img_folder = f'{app.config["IMAGES"]}/{user_id}'
+        try:
+            os.mkdir(img_folder)
+        except:
+            print('user already has an active session')
+        files = request.files.getlist("file")
+        filenames = []
+        for f in files:
+            f.save(os.path.join(img_folder, f.filename))
+            filenames.append(f.filename)
+        app.config["FILES"] = filenames
+        print(app.config["FILES"], app.config["HEAD"])
+        return redirect('/tagger', code=302)
+    else:
+        return render_template('index.html')
+
+
+@app.route('/tagger')
+def tagger():
+    if (app.config["HEAD"] == len(app.config["FILES"])):
+        # done annotating the batch of images
+        app.config["HEAD"] = 0
+        return redirect(url_for('final'))
+    user_id = session.get('_id')
+    directory = app.config["IMAGES"] + f'/{user_id}'
+    image = app.config["FILES"][app.config["HEAD"]]
+    labels = app.config["LABELS"]
+    not_end = not(app.config["HEAD"] == len(app.config["FILES"]) - 1)
+    # print(not_end)
+    return render_template('tagger.html', not_end=not_end, directory=directory, image=image, labels=labels, head=app.config["HEAD"] + 1, len=len(app.config["FILES"]))
+
+
+@app.route('/next')
+def next():
+    image = app.config["FILES"][app.config["HEAD"]]
+    app.config["HEAD"] = app.config["HEAD"] + 1
+    user_id = session.get("_id")
+    with open(f"{app.config['OUT']}/{user_id}.csv", 'a+') as f:
+        for label in app.config["LABELS"]:
+            f.write(image + "," +
+            label["id"] + "," +
+            label["name"] + "," +
+            str(round(float(label["xMin"]))) + "," +
+            str(round(float(label["xMax"]))) + "," +
+            str(round(float(label["yMin"]))) + "," +
+            str(round(float(label["yMax"]))) + "\n")
+    app.config["LABELS"] = []
+    return redirect(url_for('tagger'))
+
+@app.route("/final")
+def final():
+    return render_template('final.html')
+
+@app.route('/add/<id>')
+def add(id):
+    xMin = request.args.get("xMin")
+    xMax = request.args.get("xMax")
+    yMin = request.args.get("yMin")
+    yMax = request.args.get("yMax")
+    app.config["LABELS"].append({"id":id, "name":"", "xMin":xMin, "xMax":xMax, "yMin":yMin, "yMax":yMax})
+    return redirect(url_for('tagger'))
+
+@app.route('/remove/<id>')
+def remove(id):
+    index = int(id) - 1
+    del app.config["LABELS"][index]
+    for label in app.config["LABELS"][index:]:
+        label["id"] = str(int(label["id"]) - 1)
+    return redirect(url_for('tagger'))
+
+@app.route('/label/<id>')
+def label(id):
+    name = request.args.get("name")
+    app.config["LABELS"][int(id) - 1]["name"] = name
+    return redirect(url_for('tagger'))
+
+@app.route('/image/<f>')
+def images(f):
+    user_id = session.get('_id')
+    images = app.config["IMAGES"] + f'/{user_id}'
+    return send_file(images +'/'+f)
+
+@app.route('/download')
+def download():
+    user_id = session.get('_id')
+    anno_path = f"{app.config['OUT']}/{user_id}.csv"
+    directory = app.config["IMAGES"] + f'/{user_id}'
+    shutil.copyfile(anno_path, f'{directory}/annotations.csv')
+    shutil.make_archive('final', 'zip', directory)
+    return send_file('final.zip',
+                     mimetype='text/csv',
+                     download_name='final.zip',
+                     as_attachment=True)
+
+if __name__ == "__main__":
+    app.run(debug="True")

requirements.txt

@@ -0,0 +1,3 @@
+flask==3.1.1
+jinja2==3.1.6
+gunicorn

templates/final.html

@@ -0,0 +1,77 @@
+<!doctype html>
+<html style="height:100%;">
+<head>
+    <title>Download Annotations</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
+</head>
+<body>
+    <header class="flex items-center justify-between bg-white p-4 sm:p-6 rounded-lg shadow-md mb-8 flex-wrap">
+        <!-- Left Section: Two Logos -->
+        <div class="flex items-center space-x-4 mb-4 sm:mb-0 w-full sm:w-auto justify-center sm:justify-start">
+            <!-- Logo 1 
+            <img src="{{ url_for('static', filename='images/AI-FARM-logo-version 2 -20-JULY-2023-01.png') }}" alt="AIFarm" class="squared-full shadow-sm" height="75px" width="75px">
+            -->
+            <!-- Logo 1 
+            <img src="{{ url_for('static', filename='images/FACTORYAI-FINAL-SQUARE-16-AUG-2023.png') }}" alt="FactoryAI" class="squared-full shadow-sm">
+            -->
+            <!-- Logo 2 -->
+            <img src="{{ url_for('static', filename='images/logo_black.png') }}" alt="KrongAI" class="squared-full shadow-sm" height="120cqh">
+        </div>
+
+        <!-- Middle Section: Title -->
+        <div class="flex-grow text-center mb-4 sm:mb-0 order-first sm:order-none w-full sm:w-auto">
+            <h1 class="text-3xl sm:text-4xl font-bold text-gray-800 leading-tight">
+                🇰🇭 By Cambodian, for the development of AI 🇰🇭
+            </h1>
+        </div>
+
+        <!-- Right Section: Placeholder (can be used for user avatar/menu later) -->
+        <!-- Added a placeholder to help balance the flex layout, though not strictly required by prompt -->
+        <div class="w-full sm:w-auto flex justify-center sm:justify-end">
+            <!-- Placeholder for potential future elements, e.g., user icon -->
+            <div class="w-[128px] h-0 sm:h-[60px]"></div>
+        </div>
+    </header>
+
+    <div class="container" style="margin-top:20px;">
+        <center>
+        <div class="jumbotron">
+            <h2>Download the Annotations as CSV File</h2> 
+            <button id="downloadButton" style="margin-top:10px;" class="btn btn-success">Download</button>
+            <div id="messageBox" class="mt-8 p-4 bg-blue-100 border border-blue-400 text-blue-700 rounded-lg hidden" role="alert">
+                <p id="messageText" class="font-medium"></p>
+            </div>
+            <script>
+                document.getElementById('downloadButton').addEventListener('click', function() {
+                    var messageBox = document.getElementById('messageBox');
+                    var messageText = document.getElementById('messageText');
+                    messageText.textContent = 'Thank you for helping our Cambodia!';
+                    messageBox.classList.remove('hidden', 'bg-red-100', 'border-red-400', 'text-red-700', 'bg-green-100', 'border-green-400', 'text-green-700', 'bg-blue-100', 'border-blue-400', 'text-blue-700');
+                    messageBox.classList.add('bg-green-100', 'border-green-400', 'text-green-700');
+                    messageBox.classList.remove('hidden');
+
+                    // Trigger the download by creating a temporary link and clicking it
+                    var link = document.createElement('a');
+                    link.href = "{{ url_for('download', download='annotations.csv') }}";
+                    link.download = 'my_file.txt'; // This is optional but good practice
+                    document.body.appendChild(link);
+                    link.click();
+                    document.body.removeChild(link);
+
+                    // Now, redirect the user after a short delay
+                    setTimeout(function() {
+
+                        window.location.href = "{{ url_for('index') }}";
+                    }, 3000); // 1000ms = 1 second delay. Adjust as needed.
+                });
+            </script>
+        </div>
+        </center>
+    </div>
+    <!-- FOOTER ADDED HERE -->
+    <footer class="mt-8 mb-4 text-center text-gray-500 text-sm w-full max-w-4xl">
+        Thanks Huggingface 🤗
+    </footer>
+</body>
+</html>

templates/index.html

@@ -0,0 +1,60 @@
+<!doctype html>
+<html style="height:100%;">
+<head>
+    <title>Download Annotations</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
+</head>
+<body>
+    <header class="flex items-center justify-between bg-white p-4 sm:p-6 rounded-lg shadow-md mb-8 flex-wrap">
+        <!-- Left Section: Two Logos -->
+        <div class="flex items-center space-x-4 mb-4 sm:mb-0 w-full sm:w-auto justify-center sm:justify-start">
+            <!-- Logo 1 
+            <img src="{{ url_for('static', filename='images/AI-FARM-logo-version 2 -20-JULY-2023-01.png') }}" alt="AIFarm" class="squared-full shadow-sm" height="75px" width="75px">
+            -->
+            <!-- Logo 1 
+            <img src="{{ url_for('static', filename='images/FACTORYAI-FINAL-SQUARE-16-AUG-2023.png') }}" alt="FactoryAI" class="squared-full shadow-sm">
+            -->
+            <!-- Logo 2 -->
+            <img src="{{ url_for('static', filename='images/logo_black.png') }}" alt="KrongAI" class="squared-full shadow-sm" height="120cqh">
+        </div>
+
+        <!-- Middle Section: Title -->
+        <div class="flex-grow text-center mb-4 sm:mb-0 order-first sm:order-none w-full sm:w-auto">
+            <h1 class="text-3xl sm:text-4xl font-bold text-gray-800 leading-tight">
+                🇰🇭 By Cambodian, for the development of AI 🇰🇭
+            </h1>
+        </div>
+
+        <!-- Right Section: Placeholder (can be used for user avatar/menu later) -->
+        <!-- Added a placeholder to help balance the flex layout, though not strictly required by prompt -->
+        <div class="w-full sm:w-auto flex justify-center sm:justify-end">
+            <!-- Placeholder for potential future elements, e.g., user icon -->
+            <div class="w-[128px] h-0 sm:h-[60px]"></div>
+        </div>
+    </header>
+    <div class="container">
+        <center>
+        <div class="jumbotron" style="margin-top:20px;">
+            <h2 style="margin:-20px 0 40px 0;">Image Annotator</h2>
+            <h1 style="margin:-20px 0 40px 0;">for Object Detection</h1>
+            <form enctype="multipart/form-data" method="post">
+                <label class="btn btn-default">
+                    <input id="file" name="file" type="file" multiple/>
+                </label>
+                <br>
+                <button type="submit" class="btn btn-success" style="margin-top:30px;">Submit</button>
+            </form>
+        </div>
+        </center>
+    </div>
+    <!-- FOOTER ADDED HERE -->
+    <footer class="mt-8 mb-4 text-center text-gray-500 text-sm w-full max-w-4xl">
+        Thanks Huggingface 🤗
+    </footer>
+    <script>
+        var folder = document.getElementById("folder");
+        console.log(folder.value)
+    </script>
+</body>
+</html>

templates/tagger.html

@@ -0,0 +1,252 @@
+<!doctype html>
+<html style="height:100%;">
+<head>
+    <title>Annotate Your Images</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
+</head>
+
+<style>
+  .sidebar{
+    width: 25%;
+    height: 100%;
+    float: left;
+    z-index: 10;
+    margin-bottom: 0px;
+  }
+  .content{
+    width: 75%;
+    height: 100%;
+    float: right;
+    z-index: 10;
+    margin-bottom:0px;
+  }
+  .row{
+    padding: 10px 5px;
+    border-bottom: 3px solid black;
+  }
+  .image-name{
+    font-size: 16px;
+  }
+  .counter{
+    border: 2px solid red;
+    border-radius: 50%;
+    font-size: 18px;
+  }
+  .content-image{
+    margin-top:10px;
+  }
+</style>
+
+<body style="height:100%;">
+    <header class="flex items-center justify-between bg-white p-4 sm:p-6 rounded-lg shadow-md mb-8 flex-wrap">
+        <!-- Left Section: Two Logos -->
+        <div class="flex items-center space-x-4 mb-4 sm:mb-0 w-full sm:w-auto justify-center sm:justify-start">
+            <!-- Logo 1 
+            <img src="{{ url_for('static', filename='images/AI-FARM-logo-version 2 -20-JULY-2023-01.png') }}" alt="AIFarm" class="squared-full shadow-sm" height="75px" width="75px">
+            -->
+            <!-- Logo 1 
+            <img src="{{ url_for('static', filename='images/FACTORYAI-FINAL-SQUARE-16-AUG-2023.png') }}" alt="FactoryAI" class="squared-full shadow-sm">
+            -->
+            <!-- Logo 2 -->
+            <img src="{{ url_for('static', filename='images/logo_black.png') }}" alt="KrongAI" class="squared-full shadow-sm" height="120cqh">
+        </div>
+
+        <!-- Middle Section: Title -->
+        <div class="flex-grow text-center mb-4 sm:mb-0 order-first sm:order-none w-full sm:w-auto">
+            <h1 class="text-3xl sm:text-4xl font-bold text-gray-800 leading-tight">
+                🇰🇭 By Cambodian, for the development of AI 🇰🇭
+            </h1>
+        </div>
+
+        <!-- Right Section: Placeholder (can be used for user avatar/menu later) -->
+        <!-- Added a placeholder to help balance the flex layout, though not strictly required by prompt -->
+        <div class="w-full sm:w-auto flex justify-center sm:justify-end">
+            <!-- Placeholder for potential future elements, e.g., user icon -->
+            <div class="w-[128px] h-0 sm:h-[60px]"></div>
+        </div>
+    </header>
+
+  <nav id="sidebar" class="sidebar">
+    <div class="panel panel-default" style="height:100%;">
+      <div class="panel-heading">
+        <h3 class="panel-title"><b><center>Labels</center></b></h3>
+      </div>
+      <script>
+        var label = function(id, name) {
+          window.location.replace("/label/" + id + "?name=" + name);
+        }
+      </script>
+        <div class="panel-body">
+            <div class="list-group">
+              {% for label in labels %}
+                <div class="list-group-item">
+                    <div class="input-group">
+                        <span class="input-group-addon" id="id">{{ label.id }}</span>
+                        {% if label.name %}
+                            <text style="background-color:#E5E7E9;" class="form-control custom-control" style="resize:none">{{ label.name }}</text>
+                        {% else %}
+                            <input id= "{{ label.id }}" onkeydown="if (event.keyCode == 13) { label(this.id, this.value); }" type="text" class="form-control" placeholder="Label Name" autofocus></input>
+                        {% endif %}
+                        <span class="input-group-btn">
+                            <button id= "{{ label.id }}" class="btn btn-danger" onclick="window.location.replace('/remove/' + this.id)" type="button"><b>-<b></button>
+                        </span>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+  </nav>
+  <div id="content" class="container content">
+      <div class="row">
+      <span class="counter"><b>{{ head }} / {{ len }}</b></span>
+      <span class="image-name">{{image}}</span>
+      {% if not_end %}
+        <a href="/next" class="btn btn-primary" style="float:right; font-size:18px;" type="button">
+          <span class="glyphicon glyphicon-arrow-right"></span>
+        </a>
+      {% else %}
+        <a href="/next" class="btn btn-primary" style="float:right; font-size:18px;" type="button">
+          <span class="glyphicon glyphicon-ok"></span>
+        </a>
+      {% endif %}
+      </div>
+      <div class="content-image">
+          <canvas id="canvas" style="width:100%; height:80%; margin: 0; padding: 0;"></canvas>
+      </div>
+      
+      <script>
+        var labels = {{ labels|tojson|safe }};
+        var c = document.getElementById("canvas");
+        var ctx = c.getContext("2d");
+        var drawLabels = function(id, xMin, xMax, yMin, yMax) {
+          ctx.strokeStyle = "red";
+          //ctx.fillStyle = "red";
+          ctx.rect(xMin, yMin, xMax - xMin, yMax - yMin);
+          ctx.lineWidth="4";
+          ctx.stroke();
+          ctx.font = "30px Arial";
+          ctx.fillText("id: " + id, xMin,yMin-10);
+        };
+  
+        //load and display image
+        var image = new Image();
+        image.onload = function(e) {
+          ctx.canvas.width = image.width;
+          ctx.canvas.height = image.height;
+          c.width = image.width;
+          c.height = image.height;
+          ctx.drawImage(image, 0, 0);
+          console.log(labels);
+          for (i = 0; i < labels.length; i++){
+              drawLabels(labels[i].id, labels[i].xMin, labels[i].xMax, labels[i].yMin, labels[i].yMax);
+          }
+        };
+        image.style.display="block";
+        image.src = "image/{{ image }}";
+  
+      // this flage is true when the user is dragging the mouse
+      var isDown=false;
+      // these vars will hold the starting mouse position
+      var startX, startY, mouseX, mouseY, endX, endY;
+  
+      function calcPoints(startX, startY, endX, endY){
+        var temp = 0;
+        if(startX>endX){
+          temp = startX;
+          startX = endX;
+          endX = temp; 
+        }
+        if(startY>endY){
+          temp = startY;
+          startY = endY;
+          endY = temp;
+        }
+        return [startX,startY,endX,endY]
+      }
+  
+      function handleMouseDown(e){
+        e.preventDefault();
+        e.stopPropagation();
+        // save the starting x/y of the rectangle
+        
+        startX=parseInt((image.width / c.scrollWidth) * e.offsetX);
+        startY=parseInt((image.height / c.scrollHeight) * e.offsetY);
+        // set a flag indicating the drag has begun
+        isDown=true;
+      }
+  
+      function handleMouseUp(e){
+        e.preventDefault();
+        e.stopPropagation();
+        // the drag is over, clear the dragging flag
+        if(isDown){
+          endX = parseInt((image.width / c.scrollWidth) * e.offsetX);
+          endY = parseInt((image.height / c.scrollHeight) * e.offsetY);
+          [startX,startY,endX,endY] = calcPoints(startX,startY,endX,endY)
+          window.location.replace("/add/" + (labels.length + 1) +
+                "?xMin=" + startX +
+                "&xMax=" + endX +
+                "&yMin=" + startY +
+                "&yMax=" + endY);
+          isDown=false;
+        }
+      }
+  
+      function handleMouseOut(e){
+        e.preventDefault();
+        e.stopPropagation();
+        // the drag is over, clear the dragging flag
+        if(isDown){
+        endX = parseInt((image.width / c.scrollWidth) * e.offsetX);
+        endY = parseInt((image.height / c.scrollHeight) * e.offsetY);
+        [startX,startY,endX,endY] = calcPoints(startX,startY,endX,endY)
+        window.location.replace("/add/" + (labels.length + 1) +
+              "?xMin=" + startX +
+              "&xMax=" + endX +
+              "&yMin=" + startY +
+              "&yMax=" + endY);
+        isDown=false;
+        }
+      }
+  
+      function handleMouseMove(e){
+        e.preventDefault();
+        e.stopPropagation();
+        // if we're not dragging, just return
+        if(!isDown){return;}
+        // get the current mouse position
+        mouseX=parseInt((image.width / c.scrollWidth) * e.offsetX);
+        mouseY=parseInt((image.height / c.scrollHeight) * e.offsetY);
+        ctx.strokeStyle = "red";
+        ctx.lineWidth="4";
+        ctx.stroke();
+        // clear the canvas
+        ctx.clearRect(0,0,canvas.width,canvas.height);
+        ctx.drawImage(image, 0, 0);
+        // calculate the rectangle width/height based
+        // on starting vs current mouse position
+        var width=mouseX-startX;
+        var height=mouseY-startY;
+  
+        // draw a new rect from the start position 
+        // to the current mouse position
+        ctx.strokeRect(startX,startY,width,height);
+      }
+      // listen for mouse events
+      $("#canvas").mousedown(function(e){handleMouseDown(e);});
+      $("#canvas").mousemove(function(e){handleMouseMove(e);});
+      $("#canvas").mouseup(function(e){handleMouseUp(e);});
+      $("#canvas").mouseout(function(e){handleMouseOut(e);});
+  
+      </script>
+  </div>
+   <!-- FOOTER ADDED HERE -->
+    <footer class="mt-8 mb-4 text-center text-gray-500 text-sm w-full max-w-4xl">
+        Thanks Huggingface 🤗
+    </footer>
+</body>
+</html>