Merge pull request #15 from app2scale/ui_updates

agent/dashboard/__init__.py

@@ -4,16 +4,22 @@ route_order = ["/","data","training","testing","inference"]
 
 @solara.component
 def Page():
-    with solara.VBox() as main:
+    with solara.Row():
         solara.Markdown(md_text="""
 ## Welcome
 This web page is created to demonstrate the model-based auto-scaling
 approach developed in "AI-based Auto-Scaling and Tuning" project.
+The model-based approach used a historical data containing the state
+of the application such as replica and cpu-limit, as well as some metrics
+measured from Prometheus.
 
 * In [Data](/data) tab, you can investigate the raw data.
 * In [Training](/training), you can build a model on the raw data.
 * [Testing](/testing) tab is used to evaluate the performance of the trained model.
 * Finally, [Inference](/inference) tab provides a simulation environment to test the model.
-""")
 
-    return main
+### Training
+Training data is obtained from historical data collected from monitoring a target Kubernetes
+deployment.
+![Training](/static/public/training.png)
+""")

agent/dashboard/training.py

@@ -39,9 +39,11 @@ def LossPlot(data, render_count):
         "xAxis": {
             "type": "category",
             "data": data['epoch'],
+            "name": "epoch",
         },
         "yAxis": {
             "type": "value",
+            "name": "loss",
         },
         "series": [ 
             {
@@ -63,14 +65,6 @@ def LossPlot(data, render_count):
 def force_render():
     local_state.value['render_count'].set(1 + local_state.value['render_count'].value)
 
-@solara.component
-def FilterPanel(df):
-    with solara.Column(gap="0px"):
-        solara.CrossFilterReport(df, classes=["py-2"])
-        for col in ['replica','cpu','expected_tps','previous_tps']:
-            if col in df.columns:
-                solara.CrossFilterSelect(df, configurable=False, column=col)
-
 @solara.component
 def ExecutePanel(df):
     filter, set_filter = solara.use_cross_filter(id(df))
@@ -112,38 +106,52 @@ def ExecutePanel(df):
             force_render()
             local_state.value['model'].set(model)
     solara.Button(label='Train', on_click=trigger_training)
-    LossPlot(local_state.value['loss_plot_data'].value, local_state.value['render_count'].value)
+    with solara.Card(title="Loss History",  margin=1, elevation=10,
+                    subtitle="""Once you start training, you can monitor the training and validation losses in this plot.
+                    """):
+        LossPlot(local_state.value['loss_plot_data'].value, local_state.value['render_count'].value)
 
 
 @solara.component
-def ParameterSelection(df):
+def ParameterSelection(df, attributes):
     def select_input_cols(selected_cols):
         local_state.value['input_cols'].set(selected_cols)
     def select_output_cols(selected_cols):
         local_state.value['output_cols'].set(selected_cols)
 
-    with solara.Row():
-        with solara.Columns([50,50]):
-            with solara.Column():
-                solara.SelectMultiple(label='Input cols', all_values=list(df.columns), 
+    with solara.lab.Tabs():
+        with solara.lab.Tab("I/O"):
+            with solara.Card(title="Input/Output Selection",  margin=1, elevation=10,
+                subtitle="""Select which attributes of the data are to be used as input/output of the
+                machine learning model. Selected attributes will be reflected to the dataframe on the right,
+                immediately."""):
+                solara.SelectMultiple(label='Input features', all_values=attributes,
                             values=local_state.value['input_cols'].value,
                             on_value=select_input_cols)
-                solara.SelectMultiple(label='Output cols', all_values=list(df.columns), 
+                solara.SelectMultiple(label='Output features', all_values=attributes,
                             values=local_state.value['output_cols'].value,
                             on_value=select_output_cols)
-                solara.Select(label="Optimizer", values=["Adam"], 
-                            value=local_state.value['optimizer_name'].value,
-                            on_value=local_state.value['optimizer_name'].set)
-                
+        with solara.lab.Tab("PARAMETERS"):
+            with solara.Card(title="Model Training Parameters",  margin=1, elevation=10,
+                subtitle="""Select the machine learning model, optimizer, loss and various hyper-parameters
+                used in the training."""):
                 solara.Select(label="Model", values=["Perceptron","NetSingleHiddenLayer"],
                             value=local_state.value['model_name'].value,
                             on_value=local_state.value['model_name'].set)
-                
+                solara.Select(label="Optimizer", values=["Adam"],
+                            value=local_state.value['optimizer_name'].value,
+                            on_value=local_state.value['optimizer_name'].set)
                 solara.Select(label="Loss", values=['mape'], 
                             value=local_state.value['loss_name'].value,
                             on_value=local_state.value['loss_name'].set)
-                
-            with solara.Column():
+                solara.SliderFloat(label="Learning rate (log10)",
+                                value=local_state.value['learning_rate_log10'].value,
+                                min=-4, max=1, step=0.01,
+                                on_value=local_state.value['learning_rate_log10'].set)
+                solara.SliderInt(label='Max epoch',
+                                value=local_state.value['max_epoch'].value, min=1, max=1000,
+                                on_value=local_state.value['max_epoch'].set,
+                                thumb_label=True)
                 solara.SliderFloat(label='Training ratio', 
                                 value=local_state.value['trn_ratio'].value, min=0, max=1,
                                 on_value=local_state.value['trn_ratio'].set,
@@ -156,23 +164,24 @@ def ParameterSelection(df):
                                 value=local_state.value['batch_size_val'].value, min=1, max=256,
                                 on_value=local_state.value['batch_size_val'].set,
                                 thumb_label=True)  
-                solara.SliderInt(label='Max epoch', 
-                                value=local_state.value['max_epoch'].value, min=1, max=1000,
-                                on_value=local_state.value['max_epoch'].set,
-                                thumb_label=True)    
-                solara.SliderFloat(label="Learning rate log10",
-                                value=local_state.value['learning_rate_log10'].value, 
-                                min=-4, max=1, step=0.01,
-                                on_value=local_state.value['learning_rate_log10'].set)
-                solara.InputInt(label='random seed', value=local_state.value['seed'].value,
-                                on_value=local_state.value['seed'].set)
-    
+                solara.SliderInt(label='random seed', value=local_state.value['seed'].value, min=0, max=1000,
+                                on_value=local_state.value['seed'].set,
+                                thumb_label=True)
+        with solara.lab.Tab("FILTER"):
+            with solara.Card(title="Data Filter",  margin=1, elevation=10,
+                    subtitle="""In addition to the input/output attributes, you can also
+                    select a subset of rows for training. Filtered dataframe displayed on the
+                    right  will be used in the training."""):
+                solara.CrossFilterReport(df)
+                for col in ['replica','cpu','expected_tps','previous_tps']:
+                    if col in df.columns:
+                        solara.CrossFilterSelect(df, configurable=False, column=col)
 
-        
 
 @solara.component
 def Page():
     df = state.value['data']
+    attributes = list(df.columns)
     dff = df
     filtered_cols = []
     if len(local_state.value['input_cols'].value) > 0:
@@ -181,10 +190,15 @@ def Page():
         filtered_cols += local_state.value['output_cols'].value
     if len(filtered_cols) > 0:
         dff = df[filtered_cols]
-    with solara.Columns([40,30,30]):
-        ParameterSelection(df)
-        FilterPanel(dff)
-        solara.CrossFilterDataFrame(dff, items_per_page=10)
-    ExecutePanel(dff)
+    with solara.Sidebar():
+        ParameterSelection(dff, attributes)
+    with solara.ColumnsResponsive():
+        ExecutePanel(dff)
+        with solara.Card(title="Training/Testing Data",  margin=1, elevation=10,
+                    subtitle="""Based on the selected nput/output attributes and the cross-filters,
+                    this is the final data used in training/validation. Right before using
+                    this data in the training/validation, normalization is applied. For more
+                    information please check backend.data.ExplorationDataset"""):
+            solara.CrossFilterDataFrame(dff, items_per_page=10)
 
     

agent/public/training.drawio

@@ -0,0 +1 @@
+<mxfile host="Electron" modified="2024-04-24T09:20:44.239Z" agent="5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/20.7.4 Chrome/106.0.5249.199 Electron/21.3.3 Safari/537.36" version="20.7.4" etag="chSOnRKB6Z1sgUmyfTrz" type="device"><diagram id="4Ei_wvUUD_S_ACNlq_Ix" name="Page-1">7Vnbcto6FP0aHpvxBdvwyDWlA4EGOuexI2zZ1olseWQRQr++ki1fRU6ghdIzA5kJ0tLWlqy1vKUtOuYoenukIAkXxIO4Y2jeW8ccdwxDt/Ue/xLIIUesXj8HAoo8aVQBa/QDSlCT6A55MG0YMkIwQ0kTdEkcQ5c1MEAp2TfNfIKboyYggAqwdgFW0X+Qx8Ic7VlahX+GKAiLkXVNtkSgMJZAGgKP7GuQOemYI0oIy0vR2whisXjFuuT9pu+0lhOjMGandPi6wxN3M58Pv2ub749P9Ml1g0+WZOMV4J184tXzZDwbbWbLp45hY+56uKW8FIjSYjmezOXjsEOxRpTsYg+KYTRusw8Rg+sEuKJ1z1XBsZBFmNd0XvRJzKYgQlgI4gtkQwpQnHKHCxIT3l4uU2G8lgNldYTxiGBCs4FN3xJ/0q6G5x/hjFHyAmstdvbhLfKxIWXw7d0F1UuauL4hiSCjB24iO3zqFlxLbdtdWd/XlCKhsCaSwgxIbQal64o+XpAMnsGmrSlsPk9W89lo8Pdw5lmw53WPcdMztubFuLHsFjfmadwYV+PGULgZrb5xYD5bzDZ3fqxb82Mq/MyXg/GdGOfWxHTfeXG+rQePk7+HH9+Htuse48dz+ltNuxA/5e5RBjbrxvxYCj+LyeLOTxnYbs2PrfCzWa3vvDg35sVxFA6gx3MPWSWUhSQgMcCTCh02Waps5oQkcnn/hYwdZCIFdoycxxyMvYFIm3jrFhP3JYemSDzbuOJCzPRcJijEgKHXZr9jyyq7rgjiHisGS8Ykg47WoiYlO+pC2a2eCbU9WUZTC47e8sQADSBTPPGVAYeaWSIM0nOm3NXOnFmzAy/kc6hkVy7wbyhR3WE/z9ab5TNPHOZqEjgebNR8gr/xiSi6B4y4Qqn5cRDZ5lqeb0sAuC9BpvDljnE3RcBIczHr1gn6bR+aAOz5R4OL7fbg1r9QcHFatNmGGlz6R4KLc7Xgom7KarRRX/UaO81Ic0LYuEiMqK2XdWS9Cux3Q0nXafFl/2oo6eofeHonlFzs3VV39zvRFT3mR/ScTHQ5pVsR3bsfF86i3tL7D5p5dDf9Bfa1P3RiUAb6IwcA9RZ4zQCDYuJicuoZgKFItDJFk3wTZU0JNXfemIhtvbFNSwhgFMTiBMGFATk+FFsycgEeyIYIeV6m6mPniv+IYoNXGCPaSkSMop4pgAMhYwknxjL52cbiyy3+CYP0ISAkwBAkKH1wSZQ1uGlmOvXzMXixGuUS54n2JYxVHB5udbPcU28vF9wxctNTNDLU7zq5ik7aSa3VPy2pvZ5O1FvUhJLX7Dc83jVOdlwOU7JjWUHzAANXkAaGPvv/CiPzKlOeS91+2K0Db5mw1ISiX+j6g1erXzXzLar6bdic/AQ=</diagram></mxfile>