Update app.py

app.py

@@ -469,10 +469,10 @@ with gr.Blocks(css=css) as demo:
                       if (x < 0) { x = 0; } else if (x > 255) { x = 255; }
                       if (y < 0) { y = 0; } else if (y > 255) { y = 255; }
 
-                      if (document.getElementById(\"cr\").title == \"move\") {
+                      if (document.getElementById(\"cr\").getAttribute(\"stroke\") == \"none\") {
                         BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].position.x = x-128;
                         BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].position.z = y-128;
-                      } else if (document.getElementById(\"cr\").title == \"rotate\") {
+                      } else if (document.getElementById(\"cr\").getAttribute(\"stroke\") == \"black\") {
                         BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].rotationQuaternion = null;
                         BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].rotation.y = parseInt(event.clientX - this.getBoundingClientRect().x-128)/128*Math.PI;
                       }
@@ -496,23 +496,22 @@ with gr.Blocks(css=css) as demo:
                   }
                   this.onclick = function(event) {
                   try{
-                  if (document.getElementById(\"cr\").title != \"rotate\")
-                    document.getElementById(\"cr\").title = \"rotate\";
+                  if (document.getElementById(\"cr\").getAttribute(\"stroke\") != \"black\")
+                    document.getElementById(\"cr\").getAttribute(\"stroke\") = \"black\";
                   } else {
-                    document.getElementById(\"cr\").title = \"move\";
+                    document.getElementById(\"cr\").getAttribute(\"stroke\") = \"none\";
                   }
-                  alert(document.getElementById(\"cr\").title);
                   }catch(e){alert(e);}
                   }
                 }
               '>
                 <defs>
-                  <linearGradient id='lg' x1='0%' x2='100%' y1='0%' y2='0%'>
+                  <radialGradient id='rg' cx='50%' cy='50%'>
                     <stop offset='0%' stop-color='white'/>
                     <stop offset='100%' stop-color='black'/>
-                  </linearGradient>
+                  </radialGradient>
                 </defs>
-                <circle title='move' cx='127' cy='127' r='32' id='cr' stroke='none' fill='url(#lg)'/>
+                <circle cx='127' cy='127' r='32' id='cr' stroke='none' fill='url(#lg)'/>
               </svg>""")
                 
             html = gr.HTML(value="""<label for='zoom'>Zoom</label><input id='zoom' type='range' style='width:256px;height:1em;' value='0.8' min='0.157' max='1.57' step='0.001' oninput='