Update app.py

app.py

@@ -112,28 +112,7 @@ with gr.Blocks(theme=gr.themes.Glass()) as demo:
             "helplabel": "你在哪裡需要幫助？我們會讓您知道如何找到它"
         }
     }
-        
-    # INTERFACE
-    mode = gr.Textbox(value = "mode1", visible = False)
-    title = gr.Markdown(value=languagedict['English']['welcome'])
-    language = gr.Dropdown(languageoptions , value= "English", label="Choose language / 選擇語言")
-    with gr.Tab(f"{languagedict['English']['whatcanido']} / {languagedict['廣東話']['whatcanido']}"):
-        chatbot1 = gr.Chatbot([[None,languagedict['English']['whatcanidofirst']]])
-        input1 = gr.Textbox(label = languagedict['English']['whatcanidolabel'])
-        state1 = gr.State([{"role": "system", "content": themewhatcanido},{"role": "assistant", "content": languagedict[language]['whatcanidofirst']}])
-    with gr.Tab(f"{languagedict['English']['interviewquestions']} / {languagedict['廣東話']['interviewquestions']}"):
-        chatbot2 = gr.Chatbot([[None,languagedict['English']['interviewquestionsfirst']]])
-        input2 = gr.Textbox(label = languagedict['English']['interviewquestionslabel'])
-        state2 = gr.State([{"role": "system", "content": themeinterviewquestions},{"role": "assistant", "content": languagedict[language]['interviewquestionsfirst']}])
-    with gr.Tab(f"{languagedict['English']['help']} / {languagedict['廣東話']['help']}"):
-        chatbot3 = gr.Chatbot([[None,languagedict['English']['helpfirst']]])
-        input3 = gr.Textbox(label = languagedict['English']['helplabel'])
-        state3 = gr.State([{"role": "system", "content": themehelp},{"role": "assistant", "content": languagedict[language]['helpfirst']}])
-    with gr.Tab("MIW"):
-        code = gr.Textbox(label = 'Code')
-        instructions = gr.Textbox(label = 'Instructions', lines=10, max_lines= 100, visible = False)
-    clear = gr.Button('Clear')
-    
+
     themewhatcanido = f"""
 You are a career advisor for people in Hong Kong with relatively low skills job.
 Your mission is to ask several questions to then help them identify what are their job options, taking into consideration:
@@ -176,6 +155,30 @@ If the question is not related to any of these topics, answer 'This is beyond my
 
 IMPORTANT: write in {language}, in the style of a native inhabitant from Kowloon
 """
+    url = "https://cdn.discordapp.com/attachments/1006389042608349264/1114545184080928849/Guiyom_cartoon_style_-_working_poors_in_Hong_Kong_seeking_advic_70131de8-1a0a-4f04-ac49-b99d7e020414.png"
+
+    # INTERFACE
+    mode = gr.Textbox(value = "mode1", visible = False)
+    title = gr.Markdown(value=languagedict['English']['welcome'])
+    visual = gr.Image(value = url)
+    language = gr.Dropdown(languageoptions , value= "English", label="Choose language / 選擇語言")
+    with gr.Tab(f"{languagedict['English']['whatcanido']} / {languagedict['廣東話']['whatcanido']}"):
+        chatbot1 = gr.Chatbot([[None,languagedict['English']['whatcanidofirst']]])
+        input1 = gr.Textbox(label = languagedict['English']['whatcanidolabel'])
+        state1 = gr.State([{"role": "system", "content": themewhatcanido},{"role": "assistant", "content": languagedict[language]['whatcanidofirst']}])
+    with gr.Tab(f"{languagedict['English']['interviewquestions']} / {languagedict['廣東話']['interviewquestions']}"):
+        chatbot2 = gr.Chatbot([[None,languagedict['English']['interviewquestionsfirst']]])
+        input2 = gr.Textbox(label = languagedict['English']['interviewquestionslabel'])
+        state2 = gr.State([{"role": "system", "content": themeinterviewquestions},{"role": "assistant", "content": languagedict[language]['interviewquestionsfirst']}])
+    with gr.Tab(f"{languagedict['English']['help']} / {languagedict['廣東話']['help']}"):
+        chatbot3 = gr.Chatbot([[None,languagedict['English']['helpfirst']]])
+        input3 = gr.Textbox(label = languagedict['English']['helplabel'])
+        state3 = gr.State([{"role": "system", "content": themehelp},{"role": "assistant", "content": languagedict[language]['helpfirst']}])
+    with gr.Tab("MIW"):
+        code = gr.Textbox(label = 'Code')
+        instructions = gr.Textbox(label = 'Instructions', lines=10, max_lines= 100, visible = False)
+    clear = gr.Button('Clear')
+    
     # Launcher
     input1.submit(refreshmode1, mode, mode).then(user, [input1, chatbot1, state1], [input1, chatbot1, state1]).then(bot, [chatbot1, state1, mode], [chatbot1, state1])
     input2.submit(refreshmode2, mode, mode).then(user, [input2, chatbot2, state2], [input2, chatbot2, state2]).then(bot, [chatbot2, state2, mode], [chatbot2, state2])