diff --git a/.idea/image_anotate.iml b/.idea/image_anotate.iml
index 0c8867d..1448065 100644
--- a/.idea/image_anotate.iml
+++ b/.idea/image_anotate.iml
@@ -8,5 +8,6 @@
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="library" name="markerjs2" level="application" />
   </component>
 </module>
\ No newline at end of file
diff --git a/css/styles.css b/css/styles.css
new file mode 100644
index 0000000..4ce2722
--- /dev/null
+++ b/css/styles.css
@@ -0,0 +1,18 @@
+html,
+body {
+    padding: 0px;
+    margin: 0px;
+}
+
+#app {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#sampleImage {
+    max-width: 100%;
+    max-height: 80%;
+}
diff --git a/imgs/scene2.png b/imgs/scene2.png
new file mode 100644
index 0000000..721faf7
Binary files /dev/null and b/imgs/scene2.png differ
diff --git a/index.html b/index.html
index bbf37b6..4daf5f1 100644
--- a/index.html
+++ b/index.html
@@ -83,305 +83,7 @@
       </div>
     </div>
   </div>
-  <script>
-
-    var image = document.getElementById('full-image');
-    var canvas = document.getElementById('canvas')
-
-    //hidden or text inputs
-    var h_th_left = document.getElementById('thb_left')
-    var h_th_top = document.getElementById('thb_top')
-    var h_th_right = document.getElementById('thb_right')
-    var h_th_bottom = document.getElementById('thb_bottom')
-
-    var handleRadius = 10
-
-    var dragTL = dragBL = dragTR = dragBR = false;
-    var dragWholeRect = false;
-
-    var rect={}
-    var current_canvas_rect={}
-
-    var mouseX, mouseY
-    var startX, startY
-
-    var th_left = 150;
-    var th_top = 896;
-    var th_right = 2009;
-    var th_bottom = 2753;
-
-    var th_width = th_right - th_left;
-    var th_height = th_bottom - th_top;
-
-    var effective_image_width = 4032;
-    var effective_image_height = 3024;
-
-    //drawRectInCanvas() connected functions -- START
-    function updateHiddenInputs(){
-
-      var inverse_ratio_w =  effective_image_width / canvas.width;
-      var inverse_ratio_h = effective_image_height / canvas.height ;
-
-      h_th_left.value = Math.round(rect.left * inverse_ratio_w)
-      h_th_top.value = Math.round(rect.top * inverse_ratio_h)
-      h_th_right.value = Math.round((rect.left + rect.width) * inverse_ratio_w)
-      h_th_bottom.value = Math.round((rect.top + rect.height) * inverse_ratio_h)
-
-    }
-
-    function drawCircle(x, y, radius) {
-      var ctx = canvas.getContext("2d");
-
-      ctx.fillStyle = "#c757e7";
-      ctx.beginPath();
-      ctx.arc(x, y, radius, 0, 2 * Math.PI);
-      ctx.fill();
-    }
-
-    function drawHandles() {
-      drawCircle(rect.left, rect.top, handleRadius);
-      drawCircle(rect.left + rect.width, rect.top, handleRadius);
-      drawCircle(rect.left + rect.width, rect.top + rect.height, handleRadius);
-      drawCircle(rect.left, rect.top + rect.height, handleRadius);
-    }
-
-
-    function drawRectInCanvas()
-    {
-
-      var ctx = canvas.getContext("2d");
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-      ctx.beginPath();
-      ctx.lineWidth = "6";
-      ctx.fillStyle = "rgba(199, 87, 231, 0.2)";
-      ctx.strokeStyle = "#c757e7";
-      ctx.rect(rect.left, rect.top, rect.width, rect.height);
-      ctx.fill();
-      ctx.stroke();
-
-
-      drawHandles();
-      updateHiddenInputs()
-
-    }
-    //drawRectInCanvas() connected functions -- END
-
-    function mouseUp(e) {
-      console.log('MOUSE UP!');
-      dragTL = dragTR = dragBL = dragBR = false;
-      dragWholeRect = false;
-    }
-
-    //mousedown connected functions -- START
-    function checkInRect(x, y, r) {
-      console.log(x,y,r.left,r.right);
-      return (x>r.left && x<(r.width+r.left)) && (y>r.top && y<(r.top+r.height));
-    }
-
-    function checkCloseEnough(p1, p2) {
-      return Math.abs(p1 - p2) < handleRadius;
-    }
-
-    function getMousePos(canvas, evt) {
-
-      var clx, cly
-      if (evt.type == "touchstart" || evt.type == "touchmove") {
-        clx = evt.touches[0].clientX;
-        cly = evt.touches[0].clientY;
-      } else {
-        clx = evt.clientX;
-        cly = evt.clientY;
-      }
-
-      var boundingRect = canvas.getBoundingClientRect();
-      return {
-        x: clx - boundingRect.left,
-        y: cly - boundingRect.top
-      };
-
-    }
-
-    function mouseDown(e) {
-      var pos = getMousePos(this,e);
-
-      //mouseX = e.pageX - this.offsetLeft;
-      mouseX = pos.x;
-      mouseY = pos.y;
-      //mouseY = e.pageY - this.offsetTop;
-
-      // 0. inside movable rectangle
-      if (checkInRect(mouseX, mouseY, rect)){
-        dragWholeRect=true;
-        startX = mouseX;
-        startY = mouseY;
-        console.log('dragWholeRect');
-      }
-      // 1. top left
-      else if (checkCloseEnough(mouseX, rect.left) && checkCloseEnough(mouseY, rect.top)) {
-        dragTL = true;
-        console.log('dragTL');
-      }
-      // 2. top right
-      else if (checkCloseEnough(mouseX, rect.left + rect.width) && checkCloseEnough(mouseY, rect.top)) {
-        dragTR = true;
-        console.log('dragTR');
-      }
-      // 3. bottom left
-      else if (checkCloseEnough(mouseX, rect.left) && checkCloseEnough(mouseY, rect.top + rect.height)) {
-        dragBL = true;
-        console.log('dragBL');
-      }
-      // 4. bottom right
-      else if (checkCloseEnough(mouseX, rect.left + rect.width) && checkCloseEnough(mouseY, rect.top + rect.height)) {
-        dragBR = true;
-        console.log('dragBR');
-      }
-      // (5.) none of them
-      else {
-        // handle not resizing
-      }
-
-      drawRectInCanvas();
-
-    }
-    //mousedown connected functions -- END
-
-    function mouseMove(e) {
-
-      var pos = getMousePos(this,e);
-      mouseX = pos.x;
-      mouseY = pos.y;
-
-      //console.log(mouseX, mouseY)
-
-
-      if (dragWholeRect) {
-        e.preventDefault();
-        e.stopPropagation();
-        dx = mouseX - startX;
-        dy = mouseY - startY;
-        if ((rect.left+dx)>0 && (rect.left+dx+rect.width)<canvas.width){
-          rect.left += dx;
-        }
-        if ((rect.top+dy)>0 && (rect.top+dy+rect.height)<canvas.height){
-          rect.top += dy;
-        }
-        startX = mouseX;
-        startY = mouseY;
-      } else if (dragTL) {
-        e.preventDefault();
-        e.stopPropagation();
-        var newSide = (Math.abs(rect.left+rect.width - mouseX)+Math.abs(rect.height + rect.top - mouseY))/2;
-        if (newSide>150){
-          rect.left = rect.left + rect.width - newSide;
-          rect.top = rect.height + rect.top - newSide;
-          rect.width = rect.height = newSide;
-        }
-      } else if (dragTR) {
-        e.preventDefault();
-        e.stopPropagation();
-        var newSide = (Math.abs(mouseX-rect.left)+Math.abs(rect.height + rect.top - mouseY))/2;
-        if (newSide>150){
-          rect.top = rect.height + rect.top - newSide;
-          rect.width = rect.height = newSide;
-        }
-      } else if (dragBL) {
-        e.preventDefault();
-        e.stopPropagation();
-        var newSide = (Math.abs(rect.left+rect.width - mouseX)+Math.abs(rect.top - mouseY))/2;
-        if (newSide>150)
-        {
-          rect.left = rect.left + rect.width - newSide;
-          rect.width = rect.height = newSide;
-        }
-      } else if (dragBR) {
-        e.preventDefault();
-        e.stopPropagation();
-        var newSide = (Math.abs(rect.left - mouseX)+Math.abs(rect.top - mouseY))/2;
-        if (newSide>150)
-        {
-          rect.width = rect.height = newSide;
-        }
-      }
-
-      drawRectInCanvas();
-    }
-
-    function updateCurrentCanvasRect(){
-      current_canvas_rect.height = canvas.height
-      current_canvas_rect.width = canvas.width
-      current_canvas_rect.top = image.offsetTop
-      current_canvas_rect.left = image.offsetLeft
-    }
-
-
-    function repositionCanvas(){
-
-      //make canvas same as image, which may have changed size and position
-      canvas.height = image.height;
-      canvas.width = image.width;
-      canvas.style.top = image.offsetTop + "px";;
-      canvas.style.left = image.offsetLeft + "px";
-
-      //compute ratio comparing the NEW canvas rect with the OLD (current)
-      var ratio_w = canvas.width / current_canvas_rect.width;
-      var ratio_h = canvas.height / current_canvas_rect.height;
-
-      //update rect coordinates
-      rect.top = rect.top * ratio_h;
-      rect.left = rect.left * ratio_w;
-      rect.height = rect.height * ratio_h;
-      rect.width = rect.width * ratio_w;
-
-      updateCurrentCanvasRect();
-
-      drawRectInCanvas();
-
-    }
-
-
-    function initCanvas(){
-      canvas.height = image.height;
-      canvas.width = image.width;
-      canvas.style.top = image.offsetTop + "px";;
-      canvas.style.left = image.offsetLeft + "px";
-      updateCurrentCanvasRect();
-    }
-
-    function initRect(){
-
-      var ratio_w = canvas.width / effective_image_width;
-      var ratio_h = canvas.height / effective_image_height;
-
-      //BORDER OF SIZE 6!
-      rect.height = th_height*ratio_h-6
-      rect.width = th_width*ratio_w-6
-      rect.top = th_top*ratio_h+3
-      rect.left = th_left*ratio_w+3
-
-    }
-
-
-    function init(){
-      canvas.addEventListener('mousedown', mouseDown, false);
-      canvas.addEventListener('mouseup', mouseUp, false);
-      canvas.addEventListener('mousemove', mouseMove, false);
-
-      canvas.addEventListener('touchstart', mouseDown);
-      canvas.addEventListener('touchmove', mouseMove);
-      canvas.addEventListener('touchend', mouseUp);
-
-      initCanvas();
-      initRect();
-
-      drawRectInCanvas();
-    }
-
-    window.addEventListener('load',init)
-    window.addEventListener('resize',repositionCanvas)
-
-  </script>
+  <script src="js/select.js"></script>
 
   <!-- End Main content -->
 </main>
@@ -391,59 +93,5 @@
         integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
         crossorigin="anonymous"></script>
 
-<!-- get custom JavaScript -->
-<script src="/static/js/custom.js"></script>
-
-<form method="post">
-  <div class="modal fade" id="cookieModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
-    <div class="modal-dialog modal-lg shadow" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <span style="font-weight: bold" class="modal-title">Cookie Settings</span>
-        </div>
-        <div data-nosnippet class="modal-body">
-          <div style="font-size: 80%">
-            <p id="cmText1"></p>
-            <p id="cmText2"></p>
-          </div>
-          <p class="d-flex justify-content-between">
-            <a href="/privacy-notice">Privacy Notice</a>
-            <a href="#alert-options" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="alert-options">My Settings</a>
-          </p>
-          <div id="alert-options" class="collapse">
-            <div data-name="necessary">
-              <div class="form-check mb-1">
-                <input type="checkbox" checked disabled class="form-check-input" id="checkboxNecessary">
-                <label class="form-check-label" for="checkboxNecessary"><b>Necessary</b></label>
-              </div>
-              <ul>
-                <li>Required to run the website</li>
-              </ul>
-            </div>
-            <!--div data-name="personalization">
-                <div class="form-check mb-1">
-                    <input type="checkbox" class="form-check-input" id="checkboxPersonalization" name="checkboxPersonalization"
-
-                    >
-                    <label class="form-check-label" for="checkboxPersonalization"><b>Personalization</b></label>
-                </div>
-                <ul>
-                    <li>Storage of your preferences from previous visits</li>
-                    <li>Collecting user feedback to improve our website</li>
-                    <li>Recording of your interests in order to provide customised content and offers</li>
-                </ul>
-            </div-->
-          </div>
-        </div>
-
-      </div>
-    </div>
-  </div>
-</form>
-
-<!-- Modal -->
-
-
-
 </body>
 </html>
diff --git a/select.js b/js/select.js
similarity index 98%
rename from select.js
rename to js/select.js
index 6fc36d8..ab26d7e 100644
--- a/select.js
+++ b/js/select.js
@@ -18,10 +18,10 @@ var current_canvas_rect={}
 var mouseX, mouseY
 var startX, startY
 
-var th_left = 504;
-var th_top = 0;
-var th_right = 3528;
-var th_bottom = 3024;
+var th_left = 150;
+var th_top = 896;
+var th_right = 2009;
+var th_bottom = 2753;
 
 var th_width = th_right - th_left;
 var th_height = th_bottom - th_top;
@@ -29,6 +29,8 @@ var th_height = th_bottom - th_top;
 var effective_image_width = 4032;
 var effective_image_height = 3024;
 
+
+
 //drawRectInCanvas() connected functions -- START
 function updateHiddenInputs(){
     var inverse_ratio_w =  effective_image_width / canvas.width;
diff --git a/marker.html b/marker.html
new file mode 100644
index 0000000..628bc4b
--- /dev/null
+++ b/marker.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>To user model</title>
+    <meta charset="UTF-8"/>
+    <link rel="stylesheet" type="text/css" href="css/styles.css"/>
+    <script src="https://unpkg.com/markerjs2/markerjs2.js"></script>
+</head>
+
+<body>
+<div style="position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 50px;">
+    <!-- we are putting a copy of the original image under the result image so it's always annotation-free -->
+    <img id="sourceImage"
+         src="imgs/scene2.png"
+         style="max-width: 600px; max-height: 80%;"
+         crossorigin="anonymous"
+    />
+    <img id="sampleImage"
+         src="imgs/scene2.png"
+         style="max-width: 600px; max-height: 100%; position: absolute;"
+         crossorigin="anonymous"
+    />
+</div>
+
+
+<script>
+
+    let sourceImage, targetRoot, maState, _maState;
+
+    _maState = getCookie('maState');
+    if (getCookie('maState')) maState = _maState;
+
+    function setCookie(cname, cvalue, exdays) {
+        const d = new Date();
+        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
+        let expires = "expires=" + d.toUTCString();
+        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+    }
+
+    function getCookie(cname) {
+        let name = cname + "=";
+        let decodedCookie = decodeURIComponent(document.cookie);
+        let ca = decodedCookie.split(';');
+        for (let i = 0; i < ca.length; i++) {
+            let c = ca[i];
+            while (c.charAt(0) == ' ') {
+                c = c.substring(1);
+            }
+            if (c.indexOf(name) == 0) {
+                return c.substring(name.length, c.length);
+            }
+        }
+        return "";
+    }
+
+    // save references to the original image and its parent div (positioning root)
+    function setSourceImage(source) {
+        sourceImage = source;
+        targetRoot = source.parentElement;
+    }
+
+    function showMarkerArea(target) {
+        const markerArea = new markerjs2.MarkerArea(sourceImage);
+        markerArea.availableMarkerTypes = ["FrameMarker"];
+        markerArea.renderAtNaturalSize = true;
+        markerArea.renderImageType = 'image/jpeg';
+        markerArea.renderImageQuality = 0.9;
+        markerArea.settings.disableRotation = true;
+        // since the container div is set to position: relative it is now our positioning root
+        // end we have to let marker.js know that
+        markerArea.targetRoot = targetRoot;
+        markerArea.addEventListener("render", (event) => {
+            target.src = event.dataUrl;
+            // save the state of MarkerArea
+            maState = event.state;
+        });
+        markerArea.addEventListener("close", (event) => {
+            alert(11);
+        });
+        markerArea.show();
+        // if previous state is present - restore it
+        if (maState) {
+            markerArea.restoreState(maState);
+        }
+    }
+
+
+    setSourceImage(document.getElementById("sourceImage"));
+
+    const sampleImage = document.getElementById("sampleImage");
+    sampleImage.addEventListener("click", () => {
+        showMarkerArea(sampleImage);
+    });
+
+</script>
+
+</body>
+</html>