Update app.py

app.py

@@ -63,6 +63,37 @@ STYLE = """
   margin-left: 20px;
   margin-right: 70px;
 }
+
+#test-elem {
+    z-index: 100;
+    position: absolute;
+    width: 50%;
+    top: 50%;
+    height: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 35px;
+    padding: 15px;
+    text-align: center;    
+}
+
+.example-btn {
+    padding-top: 20px !important;
+    padding-bottom: 20px !important;
+    padding-left: 5px !important;
+    padding-right: 5px !important;
+    background: linear-gradient(to bottom right, #f7faff, #ffffff) !important;
+    box-shadow: none !important;
+    border-radius: 20px !important;
+}
+
+.example-btn:hover {
+    box-shadow: 0.5px 0.5px 0.5px gray !important
+}
+
+#example-title {
+  margin-bottom: 15px;
+}
 """
 
 get_local_storage = """
@@ -125,12 +156,16 @@ def set_chatbot(btn, ld):
       GradioAlpacaChatPPManager.from_json(json.dumps(ppm_str))
       for ppm_str in ld
   ]
-  return res[choice].build_uis(), choice
+  empty = len(res[choice].pingpongs) == 0
+  return res[choice].build_uis(), choice, gr.update(visible=empty)
+
+def set_example(btn):
+  return btn, gr.update(visible=False)
 
 with gr.Blocks(css=STYLE, elem_id='container-col') as block:
   idx = gr.State(0)
   local_data = gr.JSON({},visible=False)
-  
+
   with gr.Row():
     with gr.Column(scale=1, min_width=180):
       gr.Markdown("GradioChat", elem_id="left-top")
@@ -144,6 +179,14 @@ with gr.Blocks(css=STYLE, elem_id='container-col') as block:
           fifth = gr.Button("5th", elem_classes=["custom-btn"])
           
     with gr.Column(scale=8, elem_id="right-pane"):
+      with gr.Column(elem_id="test-elem", visible=False) as example_block:
+        gr.Markdown("## Begin with examples", elem_id="example-title")
+
+        with gr.Row():
+          ex_btn1 = gr.Button("hello world", elem_classes=["example-btn"])
+          ex_btn2 = gr.Button("what's up?", elem_classes=["example-btn"])
+          ex_btn3 = gr.Button("this is a GradioChat", elem_classes=["example-btn"])
+
       chatbot = gr.Chatbot(elem_id='chatbot')
       instruction_txtbox = gr.Textbox(
           placeholder="Ask anything", label="",
@@ -155,9 +198,17 @@ with gr.Blocks(css=STYLE, elem_id='container-col') as block:
     btn.click(
       set_chatbot,
       [btn, local_data],
-      [chatbot, idx]
+      [chatbot, idx, example_block]
     )
   
+  ex_btns = [ex_btn1, ex_btn2, ex_btn3]
+  for btn in ex_btns:
+    btn.click(
+      set_example,
+      [btn],
+      [instruction_txtbox, example_block]  
+    )
+
   instruction_txtbox.submit(
     add_pingpong,
     [idx, local_data, instruction_txtbox],
@@ -174,4 +225,4 @@ with gr.Blocks(css=STYLE, elem_id='container-col') as block:
       _js=get_local_storage,
   )
 
-block.queue().launch(debug=True)
+block.launch(debug=True)