Update app.py

app.py

@@ -1,64 +1,5 @@
 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: 40%;
-    top: 50px;
-    box-shadow: 0 0 12px 0px black;
-    transition: right 0.5s ease;
-    }
-.contain #control_panel.open {
-    right: 60%;
-    }
-#top_bar {
-    height: 50px;
-    width: 100%;
-    position: fixed;
-    background: #185991;
-    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; 
-}
-  """
-
+import gradio_sidebar
 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"):