added grid layout

app.py

@@ -46,12 +46,17 @@ with gr.Blocks() as iface:
 
     i = 0
     while i < len(roles):
-        with gr.Tab(roles[i]):
-            chatbot.append(gr.Chatbot())
-            msg.append(gr.Textbox())
-        i += 1
-
-    questionCounter = gr.Label(value="Remaining Questions: 12")
+        with gr.Row():
+            with gr.Column(scale=2):
+                questionCounter = gr.Label(value="Remaining Questions: 24")
+                finishButton = gr.Button()
+            with gr.Column(scale=8):
+                with gr.Tab(roles[i]):
+                    chatbot.append(gr.Chatbot())
+                    msg.append(gr.Textbox())
+                i += 1
+            with gr.Column(scale=2):
+                characterImage = gr.Image()
 
     def user(user_message, history):
         return "", history + [[user_message, None]]
@@ -86,8 +91,8 @@ with gr.Blocks() as iface:
         if checkIfQuestionsLeft(prevText):
             message_history = [
                 {"role": "system", "content": initText[characterId] + "Stay in character. Use natural language. Don't "
-                                                                      "reveal all of the information in a single message,"
-                                                                      " and leave hints. "}
+                                                                      "reveal all of the information in a single "
+                                                                      "message, and leave hints. "}
             ]
             for pair in history:
                 message_history.append({"role": "user", "content": pair[0]})