Create app.py

app.py

@@ -0,0 +1,67 @@
+import gradio as gr
+head="""
+    <script>
+           function open_control() {
+                var panel = document.querySelector('#control_panel');
+
+                var split_json = []
+                var out_json = []
+                split_json = panel.classList.value.split(' ')
+
+                console.log(split_json.length)
+                if (split_json.length === 2 || panel.classList.value.includes("  ")) {
+                panel.classList.toggle('open');
+                console.log('clicked')
+                } else {
+                panel.classList = '.contain #control_panel'
+                console.log('panel is open, closing')
+
+                };
+                };
+
+        </script>
+      """ 
+css="""
+.contain #control_panel {
+    position: fixed;
+    right: 100%;
+    z-index: 9999;
+    width: 90%;
+    top: 50px;
+    }
+.contain #control_panel.open {
+    right: 10%;
+    }
+#top_bar {
+    height: 50px;
+    width: 100%;
+    position: fixed;
+    background: aliceblue;
+    top: 0px;
+    left: 0px;
+    z-index: 99999;
+    }
+#control_btn {
+    height: 20px;
+    padding: 10px;
+    cursor: pointer;
+    border-radius: 5px;
+    color: white;
+    position: fixed;
+    z-index: 9999999999999999;
+    top: 5px;
+    left: 10px;
+    background: #1e293b;
+    height: fit-content;
+    width: fit-content; 
+}
+  """
+
+with gr.Blocks(head=head,css=css) as app:
+    gr.HTML("""<div id='top_bar'><div class='control_btn' name='control_btn' id='control_btn' onclick='open_control()'>Controls</div></div>""")
+    with gr.Group(elem_id="control_panel"):
+        gr.Textbox()
+        gr.Slider()
+        gr.RadioGroup()
+        
+app.launch()