Updated to use blocks

app.py

@@ -3,10 +3,10 @@ import gradio as gr
 
 client = InferenceClient("mistralai/Mistral-7B-Instruct-v0.1")
 
-
+# <img src="/file=val_speaking_transparent.gif" style="width: 80%; max-width: 550px; height: auto; opacity: 0.55;  ">
 PLACEHOLDER = """
 <div style="padding: 30px; text-align: center; display: flex; flex-direction: column; align-items: center;">
-   <img src="/file=val_speaking_transparent.gif" style="width: 80%; max-width: 550px; height: auto; opacity: 0.55;  "> 
+   
    <h1 style="font-size: 28px; margin-bottom: 2px; opacity: 0.55;">Hi Jennifer, welcome to DTF</h1>
    <p style="font-size: 18px; margin-bottom: 2px; opacity: 0.65;">Ask me anything about working at here...</p>
 </div>. 
@@ -100,25 +100,30 @@ additional_inputs = [
     ),
 ]
 
-gr.Image("/file=val_speaking_transparent.gif")
-gr.Markdown("Hi I'm Val the Voyager, welcome onboard!")
-gr.ChatInterface(
-    fn=generate,
-    chatbot=gr.Chatbot(
-        show_label=False,
-        show_share_button=False,
-        show_copy_button=True,
-        likeable=True,
-        layout="panel",
-        placeholder=PLACEHOLDER,
-    ),
-    additional_inputs=additional_inputs,
-    examples=[
-        ["Ask me what an acronym stands for"],
-        ["How can I check my leave allowance?"],
-        ["Where can I find a floor map of 1 Macarthur?"],
-        ["How can I find out about DTF's Disability network?"],
-    ],
-    cache_examples=False,
-    title="""Voyager Val""",
-).launch(show_api=False)
+with gr.Blocks(fill_height=True) as demo:
+
+    gr.Image("/file=val_speaking_transparent.gif")
+    gr.Markdown("Hi I'm Val the Voyager, welcome onboard!")
+    gr.ChatInterface(
+        fn=generate,
+        chatbot=gr.Chatbot(
+            show_label=False,
+            show_share_button=False,
+            show_copy_button=True,
+            likeable=True,
+            layout="panel",
+            placeholder=PLACEHOLDER,
+        ),
+        additional_inputs=additional_inputs,
+        examples=[
+            ["Ask me what an acronym stands for"],
+            ["How can I check my leave allowance?"],
+            ["Where can I find a floor map of 1 Macarthur?"],
+            ["How can I find out about DTF's Disability network?"],
+        ],
+        cache_examples=False,
+        title="""Voyager Val""",
+    )
+
+if __name__ == "__main__":
+    demo.launch()