Update web_ui.py

web_ui.py

@@ -2,6 +2,8 @@ from response_parser import *
 import gradio as gr
 
 
+
+
 def initialization(state_dict: Dict) -> None:
     if not os.path.exists('cache'):
         os.mkdir('cache')
@@ -74,7 +76,7 @@ def refresh_file_display(state_dict: Dict) -> List[str]:
 
 
 def restart_ui(history: List) -> Tuple[List, Dict, Dict, Dict, Dict]:
-    history.clear()
+    history.append(["Welcome to the chatbot!", ""])
     return (
         history,
         gr.Textbox.update(value="", interactive=False),
@@ -95,7 +97,7 @@ def bot(state_dict: Dict, history: List) -> List:
     while bot_backend.finish_reason in ('new_input', 'function_call'):
         if history[-1][0] is None:
             history.append(
-                [None, ""]
+                ['welcome', ""]
             )
         else:
             history[-1][1] = ""
@@ -116,33 +118,150 @@ def bot(state_dict: Dict, history: List) -> List:
 
 if __name__ == '__main__':
     config = get_config()
-    with gr.Blocks(theme=gr.themes.Base()) as block:
+    custom_css = """
+    .gradio-container {
+        background-color: white ;
+        margin: 0 !important ;
+        padding: 0 !important ;
+        space : 0 
+    }
+
+    #mainDiv {
+    width :100%;
+    border : none;
+    height: 100vh ;
+    }
+
+    #chatbot_div{
+    padding : 10px
+    }
+
+    #chatbot {
+    border-color: #a6a6a6 ;
+    background-color: white ;
+    border-radius: 5px;
+    }
+
+    #sidebar {
+    background-color: #f2f2f2;
+    padding : 5px ; 
+    }
+
+    #files {
+   
+    height : 60% ;
+    color : #f2f2f2  ;
+    background-color : #f2f2f2 ;
+    border : none
+    }
+
+    #gpt4_button {
+    border-radius:  0px ;
+    background-color : #0CAFFF ;
+    padding : 10px ;
+    }
+
+    #gpt4_button:hover {
+    background-color : #0ca6ff ;
+    }
+
+    #textbox {
+    border-color : #a6a6a6 ;
+    background-color : white ;
+    }
+
+    #textbox:hover {
+    border-color : black ;
+    }
+
+    #upload_button {
+    background-color : #b3b3b3;
+    }
+
+    #upload_button:hover {
+    background-color : #8c8c8c ;
+    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
+    }
+
+    /* width */
+    ::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    /* Track */
+    ::-webkit-scrollbar-track {
+      background: #f1f1f1;
+    }
+
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+      background: #0CAFFF;
+    }
+
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+      background: #555;
+    }
+
+    footer{display:none !important}
+
+    """
+
+    javascript_code = """
+    function get_browser_height() {
+    return window.innerHeight;
+    }
+    """
+    with gr.Blocks(theme=gr.themes.Base(),css= custom_css) as block:
         """
         Reference: https://www.gradio.app/guides/creating-a-chatbot-fast
         """
         # UI components
         state = gr.State(value={"bot_backend": None})
-        with gr.Tab("Chat"):
-            chatbot = gr.Chatbot([], elem_id="chatbot", label="Local Code Interpreter", height=500)
-            with gr.Row():
-                with gr.Column(scale=0.85):
-                    text_box = gr.Textbox(
-                        show_label=False,
-                        placeholder="Enter text and press enter, or upload a file",
-                        container=False
+        with gr.Row( elem_id="mainDiv"):
+            with gr.Column( elem_id="sidebar" , scale=0.20):
+                sidebar_header = gr.HTML("<h1 style='color:black; font-weight:bold; text-align:center; margin-top : 10px ;'>DMO-GPT-Interpreter</h1>")
+                hr_linr = gr.HTML("<hr/>")
+                file_section = gr.HTML("<h2 style='color:gray; font-weight:bold; text-align:start; margin-top : 5px ; font-size: 18px ; margin-bottom: -3px'>Files</h2>")
+                file_output = gr.Files(elem_id="files", show_label=False )
+                setting_section = gr.HTML("<h2 style='color:gray; font-weight:bold; text-align:start; margin-top : 5px ; font-size: 18px ; margin-bottom: -3px'>Settings</h2>")
+                check_box = gr.Checkbox(label="Use with GPT-4 ✨", interactive=config['model']['GPT-4']['available'] , elem_id="gpt4_button" , scale=2)
+                check_box.change(fn=switch_to_gpt4, inputs=[state, check_box])
+            with gr.Column( elem_id="chatbot_div"):
+                chatbot = gr.Chatbot([], elem_id="chatbot", height=600 , label="Welcome to DMO-GPT-Interpreter!")
+                with gr.Row():
+                    with gr.Column(scale=0.85  ):
+                        text_box = gr.Textbox(
+                            show_label=False,
+                            placeholder="Enter text and press enter, or upload a file",
+                            container=False,
+                            elem_id='textbox'
                     )
-                with gr.Column(scale=0.15, min_width=0):
-                    file_upload_button = gr.UploadButton("📁", file_types=['file'])
-            with gr.Row(equal_height=True):
-                with gr.Column(scale=0.7):
-                    check_box = gr.Checkbox(label="Use GPT-4", interactive=config['model']['GPT-4']['available'])
-                    check_box.change(fn=switch_to_gpt4, inputs=[state, check_box])
-                with gr.Column(scale=0.15, min_width=0):
-                    restart_button = gr.Button(value='🔄 Restart')
-                with gr.Column(scale=0.15, min_width=0):
-                    undo_file_button = gr.Button(value="↩️Undo upload file", interactive=False)
-        with gr.Tab("Files"):
-            file_output = gr.Files()
+                    with gr.Column(scale=0.15, min_width=0):
+                        file_upload_button = gr.UploadButton("📁 Upload log files", file_types=['file']  , elem_id="upload_button")
+                
+        # with gr.Tab("Chat"):
+        #     chatbot = gr.Chatbot([], elem_id="chatbot", label="Local Code Interpreter", height=500)
+        #     with gr.Row():
+        #         with gr.Column(scale=0.85  ):
+        #             text_box = gr.Textbox(
+        #                 show_label=False,
+        #                 placeholder="Enter text and press enter, or upload a file",
+        #                 container=False
+        #                 
+        #             )
+        #         with gr.Column(scale=0.15, min_width=0):
+        #             file_upload_button = gr.UploadButton("📁", file_types=['file'])
+            # with gr.Row(equal_height=True):
+            #     with gr.Column(scale=0.7):
+            #         check_box = gr.Checkbox(label="Use GPT-4", interactive=config['model']['GPT-4']['available'])
+            #         check_box.change(fn=switch_to_gpt4, inputs=[state, check_box])
+            #     with gr.Column(scale=0.15, min_width=0):
+            #         restart_button = gr.Button(value='🔄 Restart')
+            #     with gr.Column(scale=0.15, min_width=0):
+            #         undo_file_button = gr.Button(value="↩️Undo upload file", interactive=False)
+        # with gr.Tab("Files"):
+        #     file_output = gr.Files()
 
         # Components function binding
         txt_msg = text_box.submit(add_text, [state, chatbot, text_box], [chatbot, text_box], queue=False).then(
@@ -150,36 +269,17 @@ if __name__ == '__main__':
         )
         txt_msg.then(fn=refresh_file_display, inputs=[state], outputs=[file_output])
         txt_msg.then(lambda: gr.update(interactive=True), None, [text_box], queue=False)
-        txt_msg.then(lambda: gr.Button.update(interactive=False), None, [undo_file_button], queue=False)
+        txt_msg.then(lambda: gr.Button.update(interactive=False), None,  queue=False)
 
         file_msg = file_upload_button.upload(
             add_file, [state, chatbot, file_upload_button], [chatbot], queue=False
         ).then(
             bot, [state, chatbot], chatbot
         )
-        file_msg.then(lambda: gr.Button.update(interactive=True), None, [undo_file_button], queue=False)
+        file_msg.then(lambda: gr.Button.update(interactive=True), None, queue=False)
         file_msg.then(fn=refresh_file_display, inputs=[state], outputs=[file_output])
 
-        undo_file_button.click(
-            fn=undo_upload_file, inputs=[state, chatbot], outputs=[chatbot, undo_file_button]
-        ).then(
-            fn=refresh_file_display, inputs=[state], outputs=[file_output]
-        )
-
-        restart_button.click(
-            fn=restart_ui, inputs=[chatbot],
-            outputs=[chatbot, text_box, restart_button, file_upload_button, undo_file_button]
-        ).then(
-            fn=restart_bot_backend, inputs=[state], queue=False
-        ).then(
-            fn=refresh_file_display, inputs=[state], outputs=[file_output]
-        ).then(
-            fn=lambda: (gr.Textbox.update(interactive=True), gr.Button.update(interactive=True),
-                        gr.Button.update(interactive=True)),
-            inputs=None, outputs=[text_box, restart_button, file_upload_button], queue=False
-        )
-
-        block.load(fn=initialization, inputs=[state])
+        block.load(fn=initialization, inputs=[state] , _js=javascript_code)
 
     block.queue()
     block.launch(inbrowser=True)