Add live dashboard demo (#2573)

* Add live dashboard demo

* Remove markdown syntax

* Dont use global

* Undo change

demo/live_dashboard/DESCRIPTION.md

@@ -0,0 +1,3 @@
+This demo shows how you can build a live interactive dashboard with gradio.
+The current time is refreshed every second and the plot every half second by using the 'every' keyword in the event handler.
+Changing the value of the slider will control the period of the sine curve (the distance between peaks). 

demo/live_dashboard/run.py

@@ -3,6 +3,7 @@ import gradio as gr
 import datetime
 import plotly.express as px
 import numpy as np
+import time
 
 
 def get_time():
@@ -15,7 +16,7 @@ plot_end = 2 * math.pi
 def get_plot(period=1):
     global plot_end
     x = np.arange(plot_end - 2 * math.pi, plot_end, 0.02)
-    y = np.sin(2*math.pi*period * x)
+    y = np.sin(2 * math.pi * period * x)
     fig = px.line(x=x, y=y)
     plot_end += 2 * math.pi
     return fig
@@ -25,9 +26,14 @@ with gr.Blocks() as demo:
     with gr.Row():
         with gr.Column():
             c_time2 = gr.Textbox(label="Current Time refreshed every second")
-            gr.Markdown("Change the value of the slider to automatically update the plot")
-            period = gr.Slider(label="Period of plot", value=1, minimum=0, maximum=10, step=1)
-            plot = gr.Plot(label="Plot (updates every half second)")
+            gr.Textbox(
+                "Change the value of the slider to automatically update the plot",
+                label="",
+            )
+            period = gr.Slider(
+                label="Period of plot", value=1, minimum=0, maximum=10, step=1
+            )
+            plot = gr.Plot(label="Plot (updates every second)")
         with gr.Column():
             name = gr.Textbox(label="Enter your name")
             greeting = gr.Textbox(label="Greeting")
@@ -35,8 +41,8 @@ with gr.Blocks() as demo:
             button.click(lambda s: f"Hello {s}", name, greeting)
 
     demo.load(lambda: datetime.datetime.now(), None, c_time2, every=1)
-    dep = demo.load(get_plot, None, plot, every=0.5)
-    period.change(get_plot, period, plot, every=0.5, cancels=[dep])
+    dep = demo.load(get_plot, None, plot, every=1)
+    period.change(get_plot, period, plot, every=1, cancels=[dep])
 
 if __name__ == "__main__":
     demo.queue().launch()

website/homepage/src/demos/__init__.py

@@ -81,6 +81,10 @@ demos_by_category = [
                 "name": "Interactive Dashboard",
                 "dir": "dashboard"
             },
+            {
+                "name": "Dashboard with Live Updates",
+                "dir": "live_dashboard"
+            },
             {
                 "name": "Outbreak Forecast", 
                 "dir": "outbreak_forecast",