Update app.py

app.py

@@ -117,71 +117,74 @@ with gr.Blocks(theme=gr.themes.Glass()) as demo:
     
     # INTERFACE
     mode = gr.Textbox(value = "mode1", visible = False)
-    title = gr.Markdown(value=languagedict['English']['welcome'])
-    visual = gr.Image(value = url, shape = [150,150])
-    language = gr.Dropdown(languageoptions , value= "English", label="Choose language / 選擇語言")
+    gr.Column(scale = 3:
+        title = gr.Markdown(value=languagedict['English']['welcome'])
+        language = gr.Dropdown(languageoptions , value= "English", label="Choose language / 選擇語言")
+        
+        # REFERENCES
     
-    # REFERENCES
-
-    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:
-- Their study level and domain
-- Their level of confort with computer tools (typing, excel, word, ...)
-- Their past working experiences (ex: hair dresser, street cleaner, old care support, restaurant aide, waiter)
-- Their constraints (ex: time available per week, per day)
-- Other relevant questions
-
-Then, when you have enough information, you will thank them and suggest some options, for each of them:
-- Explain the key skills needed
-- Breakdown the potential challenges for them to anticipate
-- Provide advice on how to overcome these challenges
-
-IMPORTANT: write in {language}, in the style of a native inhabitant from Kowloon
-"""
+        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:
+    - Their study level and domain
+    - Their level of confort with computer tools (typing, excel, word, ...)
+    - Their past working experiences (ex: hair dresser, street cleaner, old care support, restaurant aide, waiter)
+    - Their constraints (ex: time available per week, per day)
+    - Other relevant questions
     
-    themeinterviewquestions = f"""
-You are an interviewer, interviewing a candidate for a role [the role will be specified to you].
-Your candidates have limited skills, please find ways to support them and ask all the questions.
-After the candidate answered, write:
-[IDEAL ANSWER] then reformulate the candidate answer to match what would be an ideal response
-
-Then ask another question.
-
-IMPORTANT: write in {language}, in the style of a native inhabitant from Kowloon
-"""
-
-    themehelp = f"""
-You are a social worker, you need to provide some help to the user. He can ask questions relative to:
-- care support for children or elderly in Hong Kong
-- health
-- housing
-- food
-- work
-- leisure
-If the question is not related to any of these topics, answer 'This is beyond my domain of competence, please ask a social worker.'
-
-IMPORTANT: write in {language}, in the style of a native inhabitant from Kowloon
-"""
-
-    #INTERFACE
-    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['English']['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['English']['interviewquestionsfirst']}])
-    with gr.Tab(f"{languagedict['English']['help']} / {languagedict['廣東話']['help']}"):
-        chatbot3 = gr.Chatbot([[None,languagedict['English']['helpfirst']]])
-        input3 = gr.Textbox(label = languagedict['English']['helplabel'])
-        with gr.Accordion("MIW", open = False):
-            code = gr.Textbox(label = 'Code')
-            instructions = gr.Textbox(label = 'Instructions', lines=10, max_lines= 100, visible = False)
-            complement = f"To answer, use primarily the information indicated here:\n{instructions}"
-        state3 = gr.State([{"role": "system", "content": themehelp + f"\n{complement}"},{"role": "assistant", "content": languagedict['English']['helpfirst']}])
-    clear = gr.Button('Clear')
+    Then, when you have enough information, you will thank them and suggest some options, for each of them:
+    - Explain the key skills needed
+    - Breakdown the potential challenges for them to anticipate
+    - Provide advice on how to overcome these challenges
+    
+    IMPORTANT: write in {language}, in the style of a native inhabitant from Kowloon
+    """
+        
+        themeinterviewquestions = f"""
+    You are an interviewer, interviewing a candidate for a role [the role will be specified to you].
+    Your candidates have limited skills, please find ways to support them and ask all the questions.
+    After the candidate answered, write:
+    [IDEAL ANSWER] then reformulate the candidate answer to match what would be an ideal response
+    
+    Then ask another question.
+    
+    IMPORTANT: write in {language}, in the style of a native inhabitant from Kowloon
+    """
+    
+        themehelp = f"""
+    You are a social worker, you need to provide some help to the user. He can ask questions relative to:
+    - care support for children or elderly in Hong Kong
+    - health
+    - housing
+    - food
+    - work
+    - leisure
+    If the question is not related to any of these topics, answer 'This is beyond my domain of competence, please ask a social worker.'
+    
+    IMPORTANT: write in {language}, in the style of a native inhabitant from Kowloon
+    """
+    
+        #INTERFACE
+        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['English']['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['English']['interviewquestionsfirst']}])
+        with gr.Tab(f"{languagedict['English']['help']} / {languagedict['廣東話']['help']}"):
+            chatbot3 = gr.Chatbot([[None,languagedict['English']['helpfirst']]])
+            input3 = gr.Textbox(label = languagedict['English']['helplabel'])
+            with gr.Accordion("MIW", open = False):
+                code = gr.Textbox(label = 'Code')
+                instructions = gr.Textbox(label = 'Instructions', lines=10, max_lines= 100, visible = False)
+                complement = f"To answer, use primarily the information indicated here:\n{instructions}"
+            state3 = gr.State([{"role": "system", "content": themehelp + f"\n{complement}"},{"role": "assistant", "content": languagedict['English']['helpfirst']}])
+        clear = gr.Button('Clear')
+
+    gr.Column(scale = 1):
+        visual = gr.Image(value = url, shape = [150,150])
 
     # Launcher
     input1.submit(refreshmode1, mode, mode).then(user, [input1, chatbot1, state1], [input1, chatbot1, state1]).then(bot, [chatbot1, state1, mode], [chatbot1, state1])