updating app.py and try to show gear graph

app.py

@@ -1,54 +1,62 @@
 from shiny import App, ui
+from shinywidgets import output_widget, render_widget
 import fastf1 as ff1
 import matplotlib.pyplot as plt
 from matplotlib.collections import LineCollection
 from matplotlib import cm
 import numpy as np
 
+app_ui = ui.page_fluid(
+    ui.div(
+        ui.input_select(
+            "Track", label="Track",
+            choices=["Austria", "Hungary"]
+        ),
+        class_="d-flex gap-3"
+    ),
+    output_widget("my_widget")
+)
 
-ff1.Cache.enable_cache('.\cache')
-
-session = ff1.get_session(2023, 'Austria', 'R')
-session.load()
+def server(input, output, session):
+    @output
+    @render_widget
+    def my_widget():
 
-lap = session.laps.pick_fastest()
-tel = lap.get_telemetry()
+        ff1.Cache.enable_cache('.\cache')
 
-#converting data to numpy data tables
-x = np.array(tel['X'].values)
-y = np.array(tel['Y'].values)
+        session = ff1.get_session(2023, 'Austria', 'R')
+        session.load()
 
-points = np.array([x, y]).T.reshape(-1, 1, 2)
-segments = np.concatenate([points[:-1], points[1:]], axis=1)
-gear = tel['nGear'].to_numpy().astype(float)
+        lap = session.laps.pick_fastest()
+        tel = lap.get_telemetry()
 
-cmap = cm.get_cmap('Paired')
-lc_comp = LineCollection(segments, norm=plt.Normalize(1, cmap.N+1), cmap=cmap)
-lc_comp.set_array(gear)
-lc_comp.set_linewidth(4)
+        #converting data to numpy data tables
+        x = np.array(tel['X'].values)
+        y = np.array(tel['Y'].values)
 
-plt.gca().add_collection(lc_comp)
-plt.axis('equal')
-plt.tick_params(labelleft=False, left=False, labelbottom=False, bottom=False)
+        points = np.array([x, y]).T.reshape(-1, 1, 2)
+        segments = np.concatenate([points[:-1], points[1:]], axis=1)
+        gear = tel['nGear'].to_numpy().astype(float)
 
-title = plt.suptitle(
-    f"Fastest Lap Gear Shift Visualization\n"
-    f"{lap['Driver']} - {session.event['EventName']} {session.event.year}"
-)
+        cmap = cm.get_cmap('Paired')
+        lc_comp = LineCollection(segments, norm=plt.Normalize(1, cmap.N+1), cmap=cmap)
+        lc_comp.set_array(gear)
+        lc_comp.set_linewidth(4)
 
-cbar = plt.colorbar(mappable=lc_comp, label="Gear", boundaries=np.arange(1, 10))
-cbar.set_ticks(np.arange(1.5, 9.5))
-cbar.set_ticklabels(np.arange(1, 9))
+        plt.gca().add_collection(lc_comp)
+        plt.axis('equal')
+        plt.tick_params(labelleft=False, left=False, labelbottom=False, bottom=False)
 
+        title = plt.suptitle(
+            f"Fastest Lap Gear Shift Visualization\n"
+            f"{lap['Driver']} - {session.event['EventName']} {session.event.year}"
+        )
 
-plt.show()
+        cbar = plt.colorbar(mappable=lc_comp, label="Gear", boundaries=np.arange(1, 10))
+        cbar.set_ticks(np.arange(1.5, 9.5))
+        cbar.set_ticklabels(np.arange(1, 9))
+        
+        return plt
 
-app_ui = ui.page_fluid(
-    ui.input_slider("n", "Choose a number n:", 0, 100, 40),
-    ui.output_text_verbatim("txt")
-)
-
-def server(input, output, session):
-    ...
 
 app = App(app_ui, server)

requirements.txt

@@ -37,3 +37,4 @@ uvicorn==0.21.1
 websockets==11.0.2
 XStatic-bootswatch==3.3.7.0
 fastf1=3.0.7
+shinywidgets=0.2.1