Update app.py

app.py

@@ -5,7 +5,7 @@ from loguru import logger
 import random
 
 session_token = os.environ.get('SessionToken')      
-logger.info(f"session_token_: {session_token}")
+# logger.info(f"session_token_: {session_token}")
 
 def get_response_from_chatbot(text):
     try:
@@ -29,9 +29,82 @@ def chat(message, chat_history):
     chat_history = json.dumps(out_chat)
     # print(f'chat_2_{chat_history}')
     return out_chat, chat_history
+
+start_work = """async() => {
+    function isMobile() {
+        try {
+            document.createEvent("TouchEvent"); return true;
+        } catch(e) {
+            return false; 
+        }
+    }
+	function getClientHeight()
+	{
+	  var clientHeight=0;
+	  if(document.body.clientHeight&&document.documentElement.clientHeight) {
+		var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
+	  } else {
+		var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
+	  }
+	  return clientHeight;
+	}
+ 
+    function setNativeValue(element, value) {
+      const valueSetter = Object.getOwnPropertyDescriptor(element.__proto__, 'value').set;
+      const prototype = Object.getPrototypeOf(element);
+      const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;
+      
+      if (valueSetter && valueSetter !== prototypeValueSetter) {
+            prototypeValueSetter.call(element, value);
+      } else {
+            valueSetter.call(element, value);
+      }
+    }
+    var gradioEl = document.querySelector('body > gradio-app').shadowRoot;
+    if (!gradioEl) {
+        gradioEl = document.querySelector('body > gradio-app');
+    }
+    
+    if (typeof window['gradioEl'] === 'undefined') {
+        window['gradioEl'] = gradioEl;
+       
+        const page1 = window['gradioEl'].querySelectorAll('#page_1')[0];
+        const page2 = window['gradioEl'].querySelectorAll('#page_2')[0]; 
     
+        page1.style.display = "none";
+        page2.style.display = "block"; 
+
+        window['div_count'] = 0;
+        window['checkChange'] = function checkChange() {
+            try {
+                chat_bot = window['gradioEl'].querySelectorAll('#chat_bot')[0];
+                chat_bot1 = window['gradioEl'].querySelectorAll('#chat_bot1')[0];                
+                if (chat_bot.children[2].children[0].children.length > window['div_count']) {
+                    new_len = chat_bot.children[2].children[0].children.length - window['div_count'];
+                    for (var i = 0; i < new_len; i++) { 
+                        new_div = chat_bot.children[2].children[0].children[window['div_count'] + i].cloneNode(true);
+                        chat_bot1.children[2].children[0].appendChild(new_div);
+                    }
+                    window['div_count'] = chat_bot.children[2].children[0].children.length;
+                }
+            } catch(e) {
+            }        
+        }
+        window['checkChange_interval'] = window.setInterval("window.checkChange()", 500);         
+    }
+   
+    return false;
+}"""
+
+
 with gr.Blocks(title='chat with chatgpt') as demo:
     with gr.Group(elem_id="page_1", visible=True) as page_1:
+        with gr.Box():            
+            with gr.Row():
+                start_button = gr.Button("Let's GO!", elem_id="start-btn", visible=True) 
+                start_button.click(fn=None, inputs=[], outputs=[], _js=start_work)
+                
+    with gr.Group(elem_id="page_2", visible=False) as page_2:        
         with gr.Row(elem_id="prompt_row"):
             chatbot = gr.Chatbot(elem_id="chat_bot").style(color_map=("green", "blue"))
             chatbot1 = gr.Chatbot(elem_id="chat_bot1").style(color_map=("green", "blue"))