Initial commit

app/static/script.js

@@ -0,0 +1,57 @@
+var c = document.getElementById("canvas");
+var ctx = c.getContext("2d");
+
+var aiBox = document.getElementById("shapeBox");
+
+var isDragging = false;
+
+function draw(e){
+    var canvas_width = 0.4 * document.documentElement.clientWidth;
+    if (document.documentElement.clientWidth <= 1000){
+        canvas_width = 0.8 * document.documentElement.clientWidth;
+    }
+    var rect = canvas.getBoundingClientRect();
+
+    if (e.type.includes(`touch`)) {
+        const { touches, changedTouches } = e.originalEvent ?? e;
+        const touch = touches[0] ?? changedTouches[0];
+        var posx = (touch.pageX - rect.left) * 64 / canvas_width;
+        var posy = (touch.pageY - rect.top) * 64 / canvas_width;
+    } else if (e.type.includes(`mouse`)) {
+        var posx = (e.clientX - rect.left) * 64 / canvas_width;
+        var posy = (e.clientY - rect.top) * 64 / canvas_width;
+    }
+    if (isDragging){
+        ctx.fillStyle = "#000000";
+        ctx.beginPath()
+        ctx.arc(posx, posy, 1, 0, 2*Math.PI);
+        ctx.fill();
+    }
+}
+
+function clear_canvas(){
+    ctx.fillStyle = "#FFFFFF";
+    ctx.beginPath();
+    ctx.fillRect(0, 0, 64, 64);
+    ctx.fill();
+}
+
+function send_image(){
+    var img = c.toDataURL();
+    const params = new URLSearchParams();
+    params.append("img", img);
+    fetch(`/shape_model?${params}`).then(
+        function (r) {return r.text();}
+    ).then(
+        function (r) {aiBox.innerHTML = r;}
+    );
+}
+
+clear_canvas();
+setInterval(send_image, 1000);
+c.addEventListener("mousemove", draw);
+c.addEventListener('touchmove', draw);
+c.addEventListener('mousedown', function(e){isDragging = true;});
+c.addEventListener('touchstart', function(e){isDragging = true;});
+c.addEventListener('mouseup', function(e){isDragging = false;});
+c.addEventListener('touchend', function(e){isDragging = false;});

app/static/style.css

@@ -0,0 +1,60 @@
+html, body{
+    margin: 0px;
+    font-family: "Lexend", sans-serif;
+    font-weight: 300;
+    overscroll-behavior-y: contain;
+    overflow-x: hidden;
+}
+#textArea{
+    background: #f8f8ff;
+    width: 40vw;
+    height: 100vh;
+    float: left;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+#drawingArea{
+    width: 60vw;
+    float: right;
+}
+
+#canvas{
+    border-style: solid;
+    border-width: 4px;
+    margin-left: 10vw;
+    margin-right: 10vw;
+    margin-top: calc(50vh - 20vw);
+    width:40vw;
+    height:40vw;
+}
+#quentinImg{
+    display: inline-block;
+    height: 1em;
+    width: auto;
+    border-radius: 30%;
+}
+h1{
+    font-size: 64px;
+}
+h2{
+    font-size: 48px;
+}
+p{
+    font-size: 24px;
+}
+@media only screen and (max-width:1000px)  {
+    #textArea{
+        width: 100vw;
+        height: 20vh;
+    }
+    #drawingArea{
+        width: 100vw;
+        height: 80vh;
+    }
+    #canvas{
+        width: 80vw;
+        height: 80vw;
+        margin-top: calc(40vh - 40vw);
+    }
+}