Update app.py

app.py

@@ -66,42 +66,62 @@ def generate_response(selected_question):
 def update_examples(follow_up_questions):
     return gr.Dataframe.update(value=[[q] for q in follow_up_questions])
 
-with gr.Blocks() as demo:
-    gr.Markdown(
-    """
-    # Child safe chatbot project!
-    In the realm of digital communication, the development of an advanced chatbot that incorporates topic modeling represents a significant leap towards enhancing user interaction and maintaining focus during conversations. This innovative chatbot design is specifically engineered to streamline discussions by guiding users to select from a curated list of suggested questions. This approach is crafted to mitigate the risk of diverging into off-topic dialogues, which are common pitfalls in conventional chatbot systems.
-    """
-    )
-    
-    chatbot = gr.Chatbot(
-        initialize_chat(),
-        elem_id="chatbot",
-        bubble_full_width=False,
-        label="Safe Chatbot v1",
-        avatar_images=(None, os.path.join(os.getcwd(), "avatar.png"))
-    )
-    
-    with gr.Row():
-        txt = gr.Textbox(scale=4, show_label=False, placeholder="Select Question", container=False, interactive=False)  # Adjust based on need
-        btn = gr.Button("Submit")
+# CSS for the phone layout and background
+css = """
+#chat-container {
+    max-width: 400px;
+    margin: auto;
+    border: 1px solid #ccc;
+    border-radius: 20px;
+    overflow: hidden;
+    background: url('https://path-to-your-phone-background-image.png') no-repeat center center;
+    background-size: cover;
+    height: 700px;
+}
 
-    examples_df = gr.Dataframe(headers=["Suggested Questions"], datatype="str", interactive=False)
+#chatbot {
+    height: calc(100% - 50px);
+    overflow-y: auto;
+}
+"""
 
-    btn.click(fn=generate_response, inputs=[txt], outputs=[chatbot, examples_df])
+with gr.Blocks(css=css) as demo:
+    with gr.Box(elem_id="chat-container"):
+        gr.Markdown(
+        """
+        # Child safe chatbot project!
+        In the realm of digital communication, the development of an advanced chatbot that incorporates topic modeling represents a significant leap towards enhancing user interaction and maintaining focus during conversations. This innovative chatbot design is specifically engineered to streamline discussions by guiding users to select from a curated list of suggested questions. This approach is crafted to mitigate the risk of diverging into off-topic dialogues, which are common pitfalls in conventional chatbot systems.
+        """
+        )
+        
+        chatbot = gr.Chatbot(
+            initialize_chat(),
+            elem_id="chatbot",
+            bubble_full_width=False,
+            label="Safe Chatbot v1",
+            avatar_images=(None, os.path.join(os.getcwd(), "avatar.png"))
+        )
+        
+        with gr.Row():
+            txt = gr.Textbox(scale=4, show_label=False, placeholder="Select Question", container=False, interactive=False)  # Adjust based on need
+            btn = gr.Button("Submit")
 
-    examples = gr.Examples(
-        examples=[
-            ["What are the basic requirements to become an airforce pilot?"],
-            ["How long does it take to train as an airforce pilot?"],
-            ["Can you describe a day in the life of an airforce pilot?"]
-        ],
-        inputs=[txt],
-        outputs=[chatbot],
-        label="Select Question"
-    )
+        examples_df = gr.Dataframe(headers=["Suggested Questions"], datatype="str", interactive=False)
+
+        btn.click(fn=generate_response, inputs=[txt], outputs=[chatbot, examples_df])
+
+        examples = gr.Examples(
+            examples=[
+                ["What are the basic requirements to become an airforce pilot?"],
+                ["How long does it take to train as an airforce pilot?"],
+                ["Can you describe a day in the life of an airforce pilot?"]
+            ],
+            inputs=[txt],
+            outputs=[chatbot],
+            label="Select Question"
+        )
 
-    chatbot.like(print_like_dislike, None, None)
+        chatbot.like(print_like_dislike, None, None)
 
 if __name__ == "__main__":
-    demo.launch(share=False)
+    demo.launch(share=True)