Update app.py

app.py

@@ -54,21 +54,53 @@ def converse(message, chat_history):
     history.append(ai_msg)
     return history[-1]["content"]
     
-with gr.Blocks(css=".contain { display: flex !important; flex-direction: column !important; }"
-    "#component-0, #component-3, #component-10, #component-8  { height: 75% !important; }"
-    "#chatbot { flex-grow: 0.6 !important; overflow: auto !important;}"
-    "#col { height: 60vh !important; }") as interface:
-  with gr.Row():
-    with gr.Column(scale=0.5):
-      gr.HTML('<img src="https://datahub.data.go.id/data/static/Kementerian%20PPN%20Bappenas%20Tanpa%20Teks.png" width="75px" alt="Image" style="max-width: 75%;">')
-  with gr.Row():
-    with gr.Column(scale=0.5, elem_id='col'):
-      gr.ChatInterface(fn=converse, title=("""
-<center> 
-<h1>KemenPPN/Bappenas</h1>
-<b>AI-Interlinked System/Bappenas GPT<b>
-</center>
+DESCRIPTION = '''
+<div style="padding: 5px; text-align: left; display: flex; flex-direction: column; align-items: left;">
+   <img src="https://sdgs.bappenas.go.id/repository/assets/bappenas_logo_square.png" style="width: 40%; max-width: 200px; height: auto; opacity: 0.55;  "> 
+   <h2 style="font-size: 28px; margin-bottom: 2px; opacity: 0.55;">AI-Interlinked System/Bappenas GPT</h2>
+</div>
+'''
+
+LICENSE = """
+<p/>
+---
+Dibangun dari Meta Llama 3
+"""
+
+PLACEHOLDER = """
+<div style="padding: 100px; text-align: center; display: flex; flex-direction: column; align-items: center;">
+   <img src="https://cdn3.iconfinder.com/data/icons/human-resources-flat-3/48/150-4096.png" style="width: 1000; max-width: 200px; height: auto; opacity: 0.55;  "> 
+   <h2 style="font-size: 20px; margin-bottom: 2px; opacity: 0.55;">Perencana-GPT</h2>
+    <p style="font-size: 18px; margin-bottom: 2px; opacity: 0.65;">Silakan mulai tanya...</p>
+</div>
 """
-))
 
-interface.launch()
+
+css = """
+h1 {
+  text-align: center;
+  display: block;
+}
+#duplicate-button {
+  margin: auto;
+  color: white;
+  background: #1565c0;
+  border-radius: 100vh;
+}
+"""
+# Gradio block
+chatbot=gr.Chatbot(height=450, placeholder=PLACEHOLDER, label='Interlinked Sytem ChatInterface')
+
+with gr.Blocks(fill_height=True, css=css) as demo:
+    
+    gr.Markdown(DESCRIPTION)
+    gr.ChatInterface(
+        fn=converse,
+        chatbot=chatbot,
+        fill_height=True,
+                     )
+    
+    gr.Markdown(LICENSE)
+    
+if __name__ == "__main__":
+    demo.launch()