Update app.py

app.py

@@ -12,99 +12,22 @@ openai.api_key = os.getenv("OPENAI_API_KEY")
 from utils import get_tmt_client, getTextTrans_tmt
 tmt_client = get_tmt_client()
 
-# language_translation_model = hub.Module(directory=f'./baidu_translate')
 def getTextTrans(text, source='zh', target='en'):
-    return getTextTrans_tmt(tmt_client, text, source, target)
-    # def is_chinese(string):
-    #     for ch in string:
-    #         if u'\u4e00' <= ch <= u'\u9fff':
-    #             return True
-    #     return False
+    def is_chinese(string):
+        for ch in string:
+            if u'\u4e00' <= ch <= u'\u9fff':
+                return True
+        return False
         
-    # if not is_chinese(text) and target == 'en': 
-    #     return text
-        
-    # try:
-    #     text_translation = language_translation_model.translate(text, source, target)
-    #     return text_translation
-    # except Exception as e:
-    #     return text 
-
-session_token = os.environ.get('SessionToken')      
-# logger.info(f"session_token_: {session_token}")
-
-def get_api():
-    api = None
+    if not is_chinese(text) and target == 'en': 
+        return text
+       
     try:
-      api = ChatGPT(session_token)
-      # api.refresh_auth()
+        text_translation = getTextTrans_tmt(tmt_client, text, source, target)
+        return text_translation
     except Exception as e:
-      logger.info(f'get_api_error: {e}')
-      api = None
-    return api
-  
-def get_response_from_chatgpt(api, text):
-    if api is None:
-        # return "Sorry, I'm busy. Try again later.(1)"
-        return "Openai said: I'm too tired. Let me lie down for a few days. If you like, you can visit my home(1)."
-    try:
-      resp = api.send_message(text)    
-      # api.refresh_auth()
-      # api.reset_conversation() 
-      response = resp['message']
-      conversation_id = resp['conversation_id']
-      parent_id = resp['parent_id']
-      # logger.info(f"response_: {response}")
-      logger.info(f"conversation_id_: [{conversation_id}] / parent_id: [{parent_id}]")  
-    except:
-      # response = "Sorry, I'm busy. Try again later.(2)"
-      response = "Openai said: I'm so tired. Let me lie down for a few days. If you like, you can visit my home(2)."
-    return response
+        return text 
 
-token_encoder = get_encoder()
-total_tokens = 4096
-max_output_tokens = 1024
-max_input_tokens = total_tokens - max_output_tokens
-
-def get_response_from_openai(input, history):
-    def openai_create(prompt):
-        # no chatgpt, and from gpt-3
-        try:
-            response = openai.Completion.create(
-                model="text-davinci-003",
-                prompt=prompt,
-                temperature=0.9,
-                max_tokens=max_output_tokens,
-                top_p=1,
-                frequency_penalty=0,
-                presence_penalty=0.6,
-                stop=[" Human:", " AI:"]
-            )
-            ret = response.choices[0].text
-            if ret == '':
-                ret = "Openai said: I'm too tired. Let me lie down for a few days. If you like, you can visit my home(3)."
-        except Exception as e:
-            ret = "Openai said: I'm too tired. Let me lie down for a few days. If you like, you can visit my home(4)."
-            
-        return ret
-    
-    history = history or []
-    his= [tuple(item) for item in history]
-    s = list(sum(his, ()))
-    s.append(input)
-    inp = ' '.join(s)
-    tokens = token_encoder.encode(inp)
-    if len(tokens) > max_input_tokens:
-        new_tokens = tokens[-max_input_tokens:] 
-        inp = token_encoder.decode(new_tokens)
-    #     tokens_1 = token_encoder.encode(inp)  
-    #     logger.info(f"tokens_len[1]__{len(tokens)}__{len(new_tokens)}__{len(tokens_1)}")
-    # else:
-    #     logger.info(f"tokens_len[0]__{len(tokens)}")
-        
-    output = openai_create(inp)
-    return output
-    
 start_work = """async() => {
     function isMobile() {
         try {
@@ -123,13 +46,7 @@ start_work = """async() => {
 	  }
 	  return clientHeight;
 	}
-    function img_click(img) {
-        this_width = parseInt(img.style.width) + 20;
-        if (this_width > 100) {
-            this_width = 20;
-        }
-        img.style.width = this_width + "%";     
-    } 
+ 
     function setNativeValue(element, value) {
       const valueSetter = Object.getOwnPropertyDescriptor(element.__proto__, 'value').set;
       const prototype = Object.getPrototypeOf(element);
@@ -142,50 +59,90 @@ start_work = """async() => {
       }
       element.dispatchEvent(new Event('input', { bubbles: true }));
     }
+   function get_clear_innerHTML(innerHTML) {
+        innerHTML = innerHTML.replace(/<p>|<\\/p>|\\n/g, '');
+        regexp = /\\★☆(.*?)\\☆★/;
+        match = innerHTML.match(regexp);
+        if (match) {
+            innerHTML = match[1];
+        } 
+        return innerHTML;
+    }    
     function save_conversation(chatbot) {        
         var conversations = new Array();
-        var conversations_noimg = new Array();
+        var conversations_clear = new Array();
         for (var i = 0; i < chatbot.children.length; i++) {
+            testid_icon = '☟:'; //'user'
+            if (chatbot.children[i].dataset['testid'] == 'bot') {
+                testid_icon = '☝:'; //'bot'
+            }            
             innerHTML = chatbot.children[i].innerHTML;
-            conversations.push(innerHTML);
-            if (innerHTML.indexOf("<img ") == -1) {
-                conversations_noimg.push(innerHTML);
+            conversations.push(testid_icon + innerHTML);
+            if (innerHTML.indexOf("<img") == -1 && innerHTML.indexOf("null_") == -1) {              
+                conversations_clear.push(testid_icon + get_clear_innerHTML(innerHTML));
             }
         }
         var json_str = JSON.stringify(conversations);
-        setNativeValue(window['chat_his'], JSON.stringify(conversations_noimg));
+        setNativeValue(window['chat_his'], JSON.stringify(conversations_clear));
         localStorage.setItem('chatgpt_conversations', json_str);
     }
+    function img_click(img) {
+        this_width = parseInt(img.style.width) + 20;
+        if (this_width > 100) {
+            this_width = 20;
+        }
+        img.style.width = this_width + "%";
+        img.style.height = img.offsetWidth + 'px'; 
+    }
     function load_conversation(chatbot) {
         var json_str = localStorage.getItem('chatgpt_conversations');
         if (json_str) {
-            var conversations_noimg = new Array();
+            var conversations_clear = new Array();
             conversations = JSON.parse(json_str);
             for (var i = 0; i < conversations.length; i++) {
-                var new_div = document.createElement("div");
-                if((i%2)===0){
-                    new_div.className = "px-3 py-2 rounded-[22px] rounded-br-none text-white text-sm chat-message svelte-rct66g";
-                    new_div.style.backgroundColor = "#16a34a"; 
+                innerHTML = conversations[i];
+                if (innerHTML.indexOf("☝:") == -1) {
+                    className = "message user svelte-134zwfa";
+                    bgcolor = "#16a34a"; 
+                    testid = "user";
+                    testid_icon = '☟:'; //'user'
                 } else {
-                    new_div.className = "px-3 py-2 rounded-[22px] rounded-bl-none place-self-start text-white text-sm chat-message svelte-rct66g";
-                    new_div.style.backgroundColor = "#2563eb"; 
-                    if (conversations[i].indexOf("<img ") == 0) { 
-                        new_div.style.width = "20%"; 
-                        new_div.onclick = function(e){
-                            img_click(this);
-                        }                        
-                        new_div.style.padding = "0.2rem"; 
-                    }                
+                    className = "message bot svelte-134zwfa";
+                    bgcolor = "#2563eb";  
+                    testid = "bot";
+                    testid_icon = '☝:'; //'bot'
                 }
-                innerHTML = conversations[i];
+                var new_div = document.createElement("div");
+                new_div.className = className;
+                new_div.style.backgroundColor = bgcolor;
+                new_div.dataset.testid = testid;
+                if (innerHTML.indexOf("data:image/jpeg") >= 0) { 
+                    new_div.style.width = "20%"; 
+                    new_div.style.padding = "0.2rem"; 
+                    new_div.onclick = function(e) {
+                        img_click(this);
+                    }
+                    setTimeout(function(){
+                        new_div.style.height = new_div.offsetWidth + 'px'; 
+                        new_div.children[0].setAttribute('style', 'max-width: none; width:100%');
+                    }, 10);                    
+                }   
+                innerHTML = innerHTML.replace("☝:", "");
+                innerHTML = innerHTML.replace("☟:", "");                             
                 new_div.innerHTML = innerHTML;
+                if (innerHTML.indexOf("null_") != -1) {
+                    new_div.style.display = 'none';
+                }                
                 chatbot.appendChild(new_div);
                 
-                if (innerHTML.indexOf("<img ") == -1) {
-                    conversations_noimg.push(innerHTML);
+                if (innerHTML.indexOf("<img") == -1 && innerHTML.indexOf("null_") == -1) {
+                    conversations_clear.push(testid_icon + get_clear_innerHTML(innerHTML));
                 }                
             }
-            setNativeValue(window['chat_his'], JSON.stringify(conversations_noimg));
+            setNativeValue(window['chat_his'], JSON.stringify(conversations_clear));
+            setTimeout(function(){
+                window['chat_bot1'].children[1].scrollTop = window['chat_bot1'].children[1].scrollHeight;
+            }, 500);             
         }
     }
     var gradioEl = document.querySelector('body > gradio-app').shadowRoot;
@@ -202,12 +159,16 @@ start_work = """async() => {
         page1.style.display = "none";
         page2.style.display = "block";
         window['div_count'] = 0;
+        window['chat_radio_0'] = window['gradioEl'].querySelectorAll('#chat_radio')[0].querySelectorAll('input[name=radio-chat_radio]')[0];
+        window['chat_radio_1'] = window['gradioEl'].querySelectorAll('#chat_radio')[0].querySelectorAll('input[name=radio-chat_radio]')[1];        
         window['chat_bot'] = window['gradioEl'].querySelectorAll('#chat_bot')[0];
         window['chat_bot1'] = window['gradioEl'].querySelectorAll('#chat_bot1')[0];  
+        window['my_prompt'] = window['gradioEl'].querySelectorAll('#my_prompt')[0].querySelectorAll('textarea')[0];
+        window['my_prompt_en'] = window['gradioEl'].querySelectorAll('#my_prompt_en')[0].querySelectorAll('textarea')[0];
         window['chat_his'] = window['gradioEl'].querySelectorAll('#chat_history')[0].querySelectorAll('textarea')[0];
         chat_row = window['gradioEl'].querySelectorAll('#chat_row')[0]; 
         prompt_row = window['gradioEl'].querySelectorAll('#prompt_row')[0]; 
-        window['chat_bot1'].children[1].textContent = '';
+        window['chat_bot1'].children[1].children[0].textContent = '';
         
         clientHeight = getClientHeight();
         if (isMobile()) {
@@ -221,9 +182,11 @@ start_work = """async() => {
         }
         chat_row.style.height = new_height;
         window['chat_bot'].style.height = new_height;
-        window['chat_bot'].children[2].style.height = new_height;
+        window['chat_bot'].children[1].style.height = new_height;
         window['chat_bot1'].style.height = new_height;
-        window['chat_bot1'].children[2].style.height = new_height;
+        window['chat_bot1'].children[1].style.height = new_height;
+        window['chat_bot1'].children[0].style.top = (parseInt(window['chat_bot1'].style.height)-window['chat_bot1'].children[0].offsetHeight-2) + 'px';
+
         prompt_row.children[0].style.flex = 'auto';
         prompt_row.children[0].style.width = '100%';
         window['gradioEl'].querySelectorAll('#chat_radio')[0].style.flex = 'auto';
@@ -233,54 +196,77 @@ start_work = """async() => {
         window['gradioEl'].querySelectorAll('#btns_row')[0].children[0].setAttribute('style', 'min-width: min(10px, 100%); flex-grow: 1');
         window['gradioEl'].querySelectorAll('#btns_row')[0].children[1].setAttribute('style', 'min-width: min(10px, 100%); flex-grow: 1');
         
-        load_conversation(window['chat_bot1'].children[2].children[0]);
-        window['chat_bot1'].children[2].scrollTop = window['chat_bot1'].children[2].scrollHeight;
+        load_conversation(window['chat_bot1'].children[1].children[0]);
+        window['chat_bot1'].children[1].scrollTop = window['chat_bot1'].children[1].scrollHeight;
         
         window['gradioEl'].querySelectorAll('#clear-btn')[0].onclick = function(e){
             if (confirm('Clear all outputs?')==true) {
-                 window['chat_bot1'].children[2].children[0].innerHTML = '';
-                 save_conversation(window['chat_bot1'].children[2].children[0]);
+                for (var i = window['chat_bot'].children[1].children[0].children.length-1; i >= 0; i--) {
+                    window['chat_bot'].children[1].children[0].removeChild(window['chat_bot'].children[1].children[0].children[i]); 
+                }
+                for (var i = window['chat_bot1'].children[1].children[0].children.length-1; i >= 0; i--) {
+                    window['chat_bot1'].children[1].children[0].removeChild(window['chat_bot1'].children[1].children[0].children[i]); 
+                }                
+                window['div_count'] = 0;
+                save_conversation(window['chat_bot1'].children[1].children[0]);
             }
         }
  
+        function set_buttons(action) {
+            window['submit-btn'].disabled = action;
+            window['clear-btn'].disabled = action;
+            window['chat_radio_0'].disabled = action;
+            window['chat_radio_1'].disabled = action; 
+            btn_color = 'color:#000';
+            if (action) {
+                btn_color = 'color:#ccc';
+            }
+            window['submit-btn'].setAttribute('style', btn_color);
+            window['clear-btn'].setAttribute('style', btn_color);
+            window['chat_radio_0'].setAttribute('style', btn_color);
+            window['chat_radio_1'].setAttribute('style', btn_color);             
+        }  
         window['prevPrompt'] = '';
         window['doCheckPrompt'] = 0;
         window['prevImgSrc'] = '';
         window['checkChange'] = function checkChange() {
             try {
-                if (window['gradioEl'].querySelectorAll('.gr-radio')[0].checked) {
-                    if (window['chat_bot'].children[2].children[0].children.length > window['div_count']) {
-                        new_len = window['chat_bot'].children[2].children[0].children.length - window['div_count'];
+                if (window['chat_radio_0'].checked) {
+                    dot_flashing = window['chat_bot'].children[1].children[0].querySelectorAll('.dot-flashing');
+
+                    if (window['chat_bot'].children[1].children[0].children.length > window['div_count'] && dot_flashing.length == 0) {
+                        new_len = window['chat_bot'].children[1].children[0].children.length - window['div_count'];
                         for (var i = 0; i < new_len; i++) { 
-                            new_div = window['chat_bot'].children[2].children[0].children[window['div_count'] + i].cloneNode(true);
-                            window['chat_bot1'].children[2].children[0].appendChild(new_div);
+                            new_div = window['chat_bot'].children[1].children[0].children[window['div_count'] + i].cloneNode(true);
+                            window['chat_bot1'].children[1].children[0].appendChild(new_div);
                         }
-                        window['div_count'] = chat_bot.children[2].children[0].children.length;
-                        window['chat_bot1'].children[2].scrollTop = window['chat_bot1'].children[2].scrollHeight;
-                        save_conversation(window['chat_bot1'].children[2].children[0]);
+                        window['div_count'] = window['chat_bot'].children[1].children[0].children.length;
+                        window['chat_bot1'].children[1].scrollTop = window['chat_bot1'].children[1].scrollHeight;
+                        save_conversation(window['chat_bot1'].children[1].children[0]);
                     }
                     if (window['chat_bot'].children[0].children.length > 1) {
-                        window['chat_bot1'].children[1].textContent = window['chat_bot'].children[0].children[1].textContent;
+                        set_buttons(true);
+                        window['chat_bot1'].children[0].textContent = window['chat_bot'].children[0].children[1].textContent;
                     } else {
-                        window['chat_bot1'].children[1].textContent = '';
+                        set_buttons(false);
+                        window['chat_bot1'].children[0].textContent = '';
                     }
                 } else {
-                    texts = window['gradioEl'].querySelectorAll('textarea');
-                    text0 = texts[0];    
-                    text1 = texts[1];
                     img_index = 0;
-                    text_value = text1.value;
-                    if (window['doCheckPrompt'] === 0 && window['prevPrompt'] !== text_value) {
-                            console.log('_____new prompt___[' + text_value + ']_');
+                    draw_prompt_en = window['my_prompt_en'].value;
+                    if (window['doCheckPrompt'] == 0 && window['prevPrompt'] != draw_prompt_en) {
+
+                            console.log('_____draw_prompt_en___[' + draw_prompt_en + ']_');
                             window['doCheckPrompt'] = 1;
-                            window['prevPrompt'] = text_value;
+                            window['prevPrompt'] = draw_prompt_en;
  
                             tabitems = window['gradioEl'].querySelectorAll('.tabitem');
                             for (var i = 0; i < tabitems.length; i++) {   
-                                inputText = tabitems[i].children[0].children[1].children[0].querySelectorAll('.gr-text-input')[0];
-                                setNativeValue(inputText, text_value);
+                                inputText = tabitems[i].children[0].children[1].children[0].querySelectorAll('input')[0];
+                                setNativeValue(inputText, draw_prompt_en);
                             }                            
                             setTimeout(function() {
+                                window['draw_prompt'] = window['my_prompt'].value; 
                                 btns = window['gradioEl'].querySelectorAll('button');
                                 for (var i = 0; i < btns.length; i++) {
                                     if (['Generate image','Run'].includes(btns[i].innerText)) {
@@ -295,31 +281,45 @@ start_work = """async() => {
                     if (imgs.length > 0) {
                         if (window['prevImgSrc'] !== imgs[0].src) {
                             var user_div = document.createElement("div");
-                            user_div.className = "px-3 py-2 rounded-[22px] rounded-br-none text-white text-sm chat-message svelte-rct66g";
+                            user_div.className = "message user svelte-134zwfa";
                             user_div.style.backgroundColor = "#16a34a"; 
-                            user_div.innerHTML = "<p>" + text0.value + "</p><img ></img>";
-                            window['chat_bot1'].children[2].children[0].appendChild(user_div);
+                            user_div.dataset.testid = 'user';
+                            user_div.innerHTML = "<p>作画: " + window['draw_prompt'] + "</p><img></img>";
+                            window['chat_bot1'].children[1].children[0].appendChild(user_div);
+
                             var bot_div = document.createElement("div");
-                            bot_div.className = "px-3 py-2 rounded-[22px] rounded-bl-none place-self-start text-white text-sm chat-message svelte-rct66g";
+                            bot_div.className = "message bot svelte-134zwfa";
                             bot_div.style.backgroundColor = "#2563eb"; 
-                            bot_div.style.width = "40%"; 
+                            bot_div.style.width = "20%"; 
+                            bot_div.dataset.testid = 'bot';
                             bot_div.onclick = function(e){
                                 img_click(this);
-                            }                            
+                            }
+                            setTimeout(function(){
+                                bot_div.style.height = bot_div.offsetWidth + 'px'; 
+                                bot_div.children[0].setAttribute('style', 'max-width:none; width:100%');
+                            }, 10);                             
                             bot_div.style.padding = "0.2rem"; 
                             bot_div.appendChild(imgs[0].cloneNode(true));
-                            window['chat_bot1'].children[2].children[0].appendChild(bot_div);
+                            window['chat_bot1'].children[1].children[0].appendChild(bot_div);
                             
-                            window['chat_bot1'].children[2].scrollTop = window['chat_bot1'].children[2].scrollHeight;
+                            window['chat_bot1'].children[1].scrollTop = window['chat_bot1'].children[1].scrollHeight;
                             window['prevImgSrc'] = imgs[0].src;
-                            save_conversation(window['chat_bot1'].children[2].children[0]);
+                            save_conversation(window['chat_bot1'].children[1].children[0]);
                         }
                     }
                     if (tabitems[img_index].children[0].children[1].children[1].children[0].children.length > 1) {
-                        window['chat_bot1'].children[1].textContent = tabitems[img_index].children[0].children[1].children[1].children[0].textContent;
+                        tips = tabitems[img_index].children[0].children[1].children[1].children[0].textContent;
+                        if (tips.indexOf("Error") == -1) {
+                            set_buttons(true);
+                        } else {
+                            set_buttons(false);
+                        }
+                        window['chat_bot1'].children[0].textContent = '作画中 ' + tips;
                     } else {
-                        window['chat_bot1'].children[1].textContent = '';
-                    }                              
+                        set_buttons(false);
+                        window['chat_bot1'].children[0].textContent = '';
+                    } 
                 }
               
             } catch(e) {
@@ -349,44 +349,140 @@ for space_id in space_ids.keys():
     except Exception as e:
         logger.info(f"load_fail__{space_id}_{e}")
         
-def chat(api, input0, input1, chat_radio, chat_history):
-    out_chat = []
-    chat_history = chat_history.replace('<p>', '').replace('</p>', '')
+token_encoder = get_encoder()
+total_tokens = 4096
+max_output_tokens = 1024
+max_input_tokens = total_tokens - max_output_tokens
+
+def set_openai_api_key(api_key):
+    if api_key and api_key.startswith("sk-") and len(api_key) > 50:
+        openai.api_key = api_key
+
+def get_response_from_openai(input, chat_history, model_radio):
+    def openai_create(input_list, model_radio):
+        try:
+            # print(f'input_list={input_list}')
+            input_list_len = len(input_list)
+            out_prompt = ''
+            messages = []
+            if model_radio == 'GPT-3.0':
+                out_prompt = 'AI:'
+            for i in range(input_list_len):
+                input = input_list[input_list_len-i-1].replace("<br>", '\n\n')
+                if input.startswith("☝:"):
+                    if model_radio == 'GPT-3.0':
+                        out_prompt = input.replace("☝:", "AI:") + '\n' + out_prompt
+                    else:
+                        out_prompt = input.replace("☝:", "") + out_prompt
+                        messages.insert(0, {"role": "assistant", "content": input.replace("☝:", "")})
+                elif input.startswith("☟:"):
+                    if model_radio == 'GPT-3.0':
+                        out_prompt = input.replace("☟:", "Human:") + '\n' + out_prompt
+                    else:
+                        out_prompt = input.replace("☟:", "") + out_prompt
+                        messages.insert(0, {"role": "user", "content": input.replace("☟:", "")})
+                tokens = token_encoder.encode(out_prompt)
+                if len(tokens) > max_input_tokens: 
+                    break
+                
+            if model_radio == 'GPT-3.0':
+                # print(out_prompt)
+                response = openai.Completion.create(
+                    model="text-davinci-003",
+                    prompt=out_prompt,
+                    temperature=0.7,
+                    max_tokens=max_output_tokens,
+                    top_p=1,
+                    frequency_penalty=0,
+                    presence_penalty=0,
+                    stop=[" Human:", " AI:"]
+                )
+                # print(f'response_3.0__:{response}')
+                ret = response.choices[0].text
+            else:
+                # print(messages)
+                response = openai.ChatCompletion.create(
+                    model="gpt-3.5-turbo",
+                    messages=messages,
+                    temperature=0.7,
+                    max_tokens=max_output_tokens,
+                    top_p=1,
+                    frequency_penalty=0,
+                    presence_penalty=0,
+                    stop=[" Human:", " AI:"]
+                )                            
+                # print(f'response_3.5__:{response}')                
+                ret = response.choices[0].message['content']
+            if ret.startswith("\n\n"):
+                ret = ret.replace("\n\n", '') 
+            ret = ret.replace('\n', '<br>')  
+            if ret == '':
+                ret = f"Openai said: I'm too tired(1)."   
+            return ret, response.usage                           
+        except Exception as e:
+            logger.info(f"openai_create_error__{e}")
+            ret = f"Openai said: I'm too tired(2)."
+            return ret, {"completion_tokens": -1, "prompt_tokens": -1, "total_tokens": -1}
+    
+    print(f'chat_history = {chat_history}')
+    chat_history_list = []
+    chat_history = chat_history.replace("<p>", "").replace("</p>", "")
+    chat_history = chat_history.replace("Openai said: I'm too tired(1).", "")
+    chat_history = chat_history.replace("Openai said: I'm too tired(2).", "")    
     if chat_history != '':        
-        out_chat_1 = json.loads(chat_history)
-        for i in range(int(len(out_chat_1)/2)):
-            out_chat.append([out_chat_1[2*i], out_chat_1[2*i+1]])            
+        chat_history_list = json.loads(chat_history)
+    chat_history_list.append(f'☟:{input}')
+        
+    output, response_usage = openai_create(chat_history_list, model_radio)
+    print(f'response_usage={response_usage}')
+    return output
+    
+def chat(input0, input1, chat_radio, model_radio, all_chat_history, chat_history):
+    all_chat = []
+    if all_chat_history != '':
+        all_chat = json.loads(all_chat_history)
 
-    # logger.info(f"out_chat_: {len(out_chat)} / {chat_radio}")
+    if len(input0) == 0:
+        return all_chat, json.dumps(all_chat), input0, input1
+            
     if chat_radio == "Talk to chatGPT":
-        # response = get_response_from_chatgpt(api, input0)
-        response = get_response_from_openai(input0, out_chat)
-        out_chat.append((input0, response))
-        # logger.info(f'liuyz_5___{out_chat}__')
-        return api, out_chat, input1
+        response = get_response_from_openai(input0, chat_history, model_radio)
+        all_chat.append((input0, response))
+        return all_chat, json.dumps(all_chat), '', input1
     else:
         prompt_en = getTextTrans(input0, source='zh', target='en') + f',{random.randint(0,sys.maxsize)}'
-        return api, out_chat, prompt_en
+        return all_chat, json.dumps(all_chat), input0, prompt_en
         
+def chat_radio_change(chat_radio):
+    if chat_radio == "Talk to chatGPT":
+        return gr.Radio.update(visible=True), gr.Text.update(visible=True)
+    else:
+        return gr.Radio.update(visible=False), gr.Text.update(visible=False)
+
 with gr.Blocks(title='Talk to chatGPT') as demo:    
-    with gr.Group(elem_id="page_0", visible=True) as page_0:
+    with gr.Row(elem_id="page_0", visible=False) as page_0:
         gr.HTML("<p>You can duplicating this space and use your own session token: <a style='display:inline-block' href='https://huggingface.co/spaces/yizhangliu/chatGPT?duplicate=true'><img src='https://img.shields.io/badge/-Duplicate%20Space-blue?labelColor=white&style=flat&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAP5JREFUOE+lk7FqAkEURY+ltunEgFXS2sZGIbXfEPdLlnxJyDdYB62sbbUKpLbVNhyYFzbrrA74YJlh9r079973psed0cvUD4A+4HoCjsA85X0Dfn/RBLBgBDxnQPfAEJgBY+A9gALA4tcbamSzS4xq4FOQAJgCDwV2CPKV8tZAJcAjMMkUe1vX+U+SMhfAJEHasQIWmXNN3abzDwHUrgcRGmYcgKe0bxrblHEB4E/pndMazNpSZGcsZdBlYJcEL9Afo75molJyM2FxmPgmgPqlWNLGfwZGG6UiyEvLzHYDmoPkDDiNm9JR9uboiONcBXrpY1qmgs21x1QwyZcpvxt9NS09PlsPAAAAAElFTkSuQmCC&logoWidth=14' alt='Duplicate Space'></a></p>")
-        gr.HTML("<p> Instruction on how to get session token can be seen in video <a style='display:inline-block' href='https://www.youtube.com/watch?v=TdNSj_qgdFk'><font style='color:blue;weight:bold;'>here</font></a>. Add your session token by going to settings and add under secrets. </p>")
     with gr.Group(elem_id="page_1", visible=True) as page_1:
         with gr.Box():            
             with gr.Row():
                 start_button = gr.Button("Let's talk to chatGPT!", 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="page_2", visible=False) as page_2:        
         with gr.Row(elem_id="chat_row"):
             chatbot = gr.Chatbot(elem_id="chat_bot", visible=False).style(color_map=("green", "blue"))
             chatbot1 = gr.Chatbot(elem_id="chat_bot1").style(color_map=("green", "blue"))
         with gr.Row(elem_id="prompt_row"):
-            prompt_input0 = gr.Textbox(lines=2, label="prompt",show_label=False)
-            prompt_input1 = gr.Textbox(lines=4, label="prompt", visible=False)
-            chat_history = gr.Textbox(lines=4, label="prompt", elem_id="chat_history", visible=False)
+            prompt_input0 = gr.Textbox(lines=2, label="input", elem_id="my_prompt", show_label=True)
+            prompt_input1 = gr.Textbox(lines=4, label="prompt", elem_id="my_prompt_en", visible=False)
+            chat_history = gr.Textbox(lines=4, label="chat_history", elem_id="chat_history", visible=False)
+            all_chat_history = gr.Textbox(lines=4, label="会话上下文：", elem_id="all_chat_history", visible=False)
+
             chat_radio = gr.Radio(["Talk to chatGPT", "Text to Image"], elem_id="chat_radio",value="Talk to chatGPT", show_label=False, visible=True)
+            model_radio = gr.Radio(["GPT-3.0", "GPT-3.5"], elem_id="model_radio", value="GPT-3.5", 
+                                label='GPT model: ', show_label=True,interactive=True, visible=True) 
+            openai_api_key_textbox = gr.Textbox(placeholder="Paste your OpenAI API key (sk-...) and hit Enter",
+                                    show_label=False, lines=1, type='password')
         with gr.Row(elem_id="btns_row"):
             with gr.Column(id="submit_col"):
                 submit_btn = gr.Button(value = "submit",elem_id="submit-btn").style(
@@ -400,12 +496,22 @@ with gr.Blocks(title='Talk to chatGPT') as demo:
                         rounded=(True, True, True, True),
                         width=100
                     )
-            api = gr.State(value=get_api())
             submit_btn.click(fn=chat, 
-                             inputs=[api, prompt_input0, prompt_input1, chat_radio, chat_history], 
-                             outputs=[api, chatbot, prompt_input1],
+                             inputs=[prompt_input0, prompt_input1, chat_radio, model_radio, all_chat_history, chat_history], 
+                             outputs=[chatbot, all_chat_history, prompt_input0, prompt_input1],
                             )
         with gr.Row(elem_id='tab_img', visible=False).style(height=5):
-           tab_img = gr.TabbedInterface(tab_actions, tab_titles)             
+           tab_img = gr.TabbedInterface(tab_actions, tab_titles)  
+
+        openai_api_key_textbox.change(set_openai_api_key,
+                                      inputs=[openai_api_key_textbox],
+                                      outputs=[])
+        openai_api_key_textbox.submit(set_openai_api_key,
+                                      inputs=[openai_api_key_textbox],
+                                      outputs=[])
+        chat_radio.change(fn=chat_radio_change, 
+                        inputs=[chat_radio], 
+                        outputs=[model_radio, openai_api_key_textbox],
+                        ) 
 
-demo.launch(debug = True)
+demo.launch(debug = True)