Update app.py

app.py

@@ -617,6 +617,7 @@ async(c, o, p, d, n, m)=>{
         document.getElementById("model3D").getElementsByTagName("canvas")[0].oncontextmenu = function(e){e.preventDefault();}
         document.getElementById("model3D").getElementsByTagName("canvas")[0].ondrag = function(e){e.preventDefault();}
 
+        document.getElementById("model3D").appendChild(document.getElementById("compass_box"));
         var coords = JSON.parse(document.getElementById("coords").getElementsByTagName("textarea")[0].value);
 
         if (o.indexOf(""+n) < 0) {
@@ -663,6 +664,7 @@ async(c, o, p, d, n, m)=>{
         window.r_old = 1.0;
         window.a_old = 0;
         window.b_old = Math.PI / 2;
+        window.compass = document.getElementById("compass");
 
         document.getElementById("model3D").getElementsByTagName("canvas")[0].addEventListener('pointermove', function() {
           if (md === true) {
@@ -969,6 +971,34 @@ with gr.Blocks(css=css, js=js, head=head) as demo:
     background-color:#808080;
     touch-action: none;
   }
+    #compass_box {
+	  top:1.5em;
+	  right:3px;
+	  position: fixed;
+	  border:1px dashed gray;
+	  border-radius: 50%;
+	  width:1.5em;
+	  height:1.5em;
+	  padding:0;
+	  margin:0;
+	}
+	#compass {
+	  position:absolute;
+	  top:-1px;
+	  left:-1px;
+	  transform:rotate(0deg);
+	  border:1px solid black;
+	  border-radius: 50%;
+	  width:100%;
+	  height:100%;
+	  padding:0;
+	  margin:0;
+	  line-height:1.45em;
+	  letter-spacing:0;
+	}
+    #compass b {
+      margin-top:-1px;
+    }
             </style>
             """)
             average = gr.HTML(value="""<label for='average'>Average</label><input id='average' type='range' style='width:256px;height:1em;' value='1' min='1' max='15' step='2' onclick='
@@ -1066,6 +1096,7 @@ with gr.Blocks(css=css, js=js, head=head) as demo:
               <a onclick='snapshot();'>Screenshot</a><br/>
               <img src='' id='img_out' onload='var ctxt = document.getElementById(\"cnv_out\").getContext(\"2d\");ctxt.drawImage(this, 0, 0);'/><br/>
               <canvas id='cnv_out'></canvas>
+              <div id='compass_box'><div id='compass'><b style='color:blue;'>◅</b>𝍠<b style='color:red;'>▻</b></div></div>
             """)
             render = gr.Button("Render")
             input_json.input(show_json, inputs=[input_json], outputs=[processed_video, processed_zip, output_frame, output_mask, output_depth, coords])