Update app.py

app.py

@@ -556,22 +556,22 @@ with gr.Blocks(css=css) as demo:
                       this.value = \"\"; 
                   }
                 }
-                '/><pre id='keymap'>
-`  1  2  3  4  5  6  7  8  9  0  -  =  
-    Q  W  E  R  T  Y  U  I  O  P  {  }
-     A  S  D  F  G  H  J  K  L  ;  '
-      Z  X  C  V  B  N  M  ,  .  /
-      move    rotate    scale
-                </pre><script>
-                alert(\"hi\");
-                document.getElementById(\"keymap\").innerHTML = document.getElementById(\"keymap\").innerText.replace(/\s[weasdzx]\s/gi, function(c){
+                ' onfocus='if (document.getElementById(\"keymap\").style.color != \"white\") {
+                document.getElementById(\"keymap\").style.color = \"white\";
+                document.getElementById(\"keymap\").innerHTML = document.getElementById(\"keymap\").innerHTML.replace(/\s[weasdzx]\s/gi, function(c){
                   return \"<b style=&quot;color:red&quot;>\" + c.toUpperCase() + \"</b>\";
                 }).replace(/\s[tyfghvb]\s/gi, function(c){
                   return \"<b style=&quot;color:green&quot;>\" + c.toUpperCase() + \"</b>\";
                 }).replace(/\s[iojklm,]\s/gi, function(c){
                   return \"<b style=&quot;color:blue&quot;>\" + c.toUpperCase() + \"</b>\";
                 });
-                </script>""")
+                }'/><pre id='keymap'>
+`  1  2  3  4  5  6  7  8  9  0  -  =  
+    Q  W  E  R  T  Y  U  I  O  P  {  }
+     A  S  D  F  G  H  J  K  L  ;  '
+      Z  X  C  V  B  N  M  ,  .  /
+      move    rotate    scale
+                </pre>""")
                 selected = gr.Number(elem_id="fnum", value=0, minimum=0, maximum=256, interactive=False)
                 output_frame.select(fn=select_frame, inputs=None, outputs=[output_depth, selected], show_progress='hidden')
                 output_depth.select(fn=select_frame, inputs=None, outputs=[output_frame, selected], show_progress='hidden')