Chronos: Add forecasters filter tags in tutorial page. (#6068)

* Update: add forecaster tags in tutorial page.

* Bugfix: fix model tag bug.

* Update: update js with pr comment.

docs/readthedocs/source/_static/css/chronos_tutorial.css

@@ -8,6 +8,10 @@
     margin: 0px 5px 10px 5px;
 }
 
+.hiddenline{
+    display: none;
+}
+
 .choicebox{
     width: 200px;
     height: 20px;
@@ -48,4 +52,12 @@ summary p button{
     box-shadow: inset 0 1px 2px -1px hsl(0deg 0% 100% / 90%);
     color: #404040;
     font-family:Lato,proxima-nova,Helvetica Neue,Arial,sans-serif;
+}
+
+.roundbutton{
+    border-radius: 20px;
+}
+
+.showingForecaster i{
+    font-weight: bolder;
 }

docs/readthedocs/source/_static/js/chronos_tutorial.js

@@ -1,13 +1,22 @@
 $(document).ready(function(){
     $("#tutorial details").attr("open",true);
+    $('#tutorial details').each(function(){
+        $(this).addClass('forecasterSelected');
+        $(this).addClass('filterSelected');
+    });
+    displaySelected();
+});
+
+//event when click the tags' buttons
+$("details p button").click(function(){
+    var id = $(this).val();
+    $("#"+id).trigger("click");
 });
 
 //func to show a tutorial
 function showTutorials(ids){
     ids.forEach(id => {
-        $("#"+id).css("display","block");
+        $("#"+id).addClass("filterSelected");
-        $("#"+id).attr("open","true");
-        $("#"+id).next().css("display","block");
     });
 }
 
@@ -23,16 +32,19 @@ function disCheck(ids){
 
 //event when click the checkboxes
 $(".checkboxes").click(function(){
+    //reset all the details 'filterSelected' class
+    $('#tutorial details').each(function(){
+        $(this).removeClass('filterSelected');
+    });
+
     //get all checked values
     //class checkboxes is specified to avoid selecting toctree checkboxes (arrows)
     var vals = [];
+
     $('.checkboxes:input:checkbox:checked').each(function (index, item) {
         vals.push($(this).val());
     });
 
-    //reset display
-    $("#tutorial details").css("display","none");
-    $("#tutorial hr").css("display","none");
     //reset checkbox and button
     $("#tutorial button").prop("disabled",false);
     $("#tutorial input[type='checkbox']").prop("disabled",false);
@@ -42,17 +54,17 @@ $(".checkboxes").click(function(){
     //show tutorial according to checked values
     if(vals.length==0){
         //choose noting, show all tutorials
-        $("#tutorial details").css("display","block");
+        $('#tutorial details').each(function(){
-        $("#tutorial details").attr("open",true);
+            $(this).addClass('filterSelected');
-        $("#tutorial hr").css("display","block");
+        });
     }
     //chose something, disable invalid checkboxes and buttons accordingly.
     else if(vals.length==1){
         if(vals.includes("forecast")){
-            var ids = ["ChronosForecaster","TuneaForecasting","AutoTSEstimator","AutoWIDE",
+            var ids = ["ChronosForecaster","TuneaForecasting","AutoTS","AutoWIDE",
-            "MultvarWIDE","MultstepWIDE","LSTMForecaster","AutoProphet","AnomalyDetection",
+            "MultvarWIDE","MultstepWIDE","LSTMF","AutoPr","AnomalyDetection",
             "DeepARmodel","TFTmodel","hyperparameter","taxiDataset","distributedFashion",
-            "ONNX","Quantize","TCMFForecaster","PenalizeUnderestimation",
+            "ONNX","Quantize","TCMF","PenalizeUnderestimation",
             "GPUtrainingCPUacceleration"];
             showTutorials(ids);
             var disIds = ["simulation"];
@@ -71,7 +83,7 @@ $(".checkboxes").click(function(){
             disCheck(disIds);
         }
         else if(vals.includes("hyperparameter_tuning")){
-            var ids = ["TuneaForecasting","AutoTSEstimator","AutoWIDE","AutoProphet",
+            var ids = ["TuneaForecasting","AutoTS","AutoWIDE","AutoPr",
             "hyperparameter","taxiDataset","ONNX"];
             showTutorials(ids);
             var disIds = ["anomaly_detection","simulation","quantization","distributed"];
@@ -90,13 +102,16 @@ $(".checkboxes").click(function(){
             disCheck(disIds);
         }
         else if(vals.includes("distributed")){
-            var ids = ["distributedFashion","TCMFForecaster"];
+            var ids = ["distributedFashion","TCMF"];
             showTutorials(ids);
             var disIds = ["anomaly_detection","simulation","hyperparameter_tuning","onnxruntime","quantization","customized_model"];
             disCheck(disIds);
         }
         else if(vals.includes("customized_model")){
-            var ids = ["AutoTSEstimator","DeepARmodel","TFTmodel", "GPUtrainingCPUacceleration"];
+            var ids = ["AutoTS","DeepARmodel","TFTmodel", "GPUtrainingCPUacceleration"];
+            ids.forEach(id => {
+                var temp=$("#"+id);
+            });
             showTutorials(ids);
             var disIds = ["anomaly_detection","simulation","onnxruntime","quantization","distributed"];
             disCheck(disIds);
@@ -104,7 +119,7 @@ $(".checkboxes").click(function(){
     }
     else if(vals.length==2){
         if(vals.includes("forecast") && vals.includes("hyperparameter_tuning")){
-            var ids = ["TuneaForecasting","AutoTSEstimator","AutoWIDE","AutoProphet","hyperparameter","taxiDataset","ONNX","AutoTSEstimator"];
+            var ids = ["TuneaForecasting","AutoTS","AutoWIDE","AutoPr","hyperparameter","taxiDataset","ONNX"];
             showTutorials(ids);
             var disIds = ["anomaly_detection","simulation","quantization","distributed"];
             disCheck(disIds);
@@ -116,13 +131,13 @@ $(".checkboxes").click(function(){
             disCheck(disIds);
         }
         else if(vals.includes("forecast") && vals.includes("customized_model")){
-            var ids = ["DeepARmodel","TFTmodel","AutoTSEstimator","GPUtrainingCPUacceleration"];
+            var ids = ["DeepARmodel","TFTmodel","AutoTS","GPUtrainingCPUacceleration"];
             showTutorials(ids);
             var disIds = ["anomaly_detection","simulation","onnxruntime","quantization","distributed"];
             disCheck(disIds);
         }
         else if(vals.includes("forecast") && vals.includes("distributed")){
-            var ids = ["distributedFashion","TCMFForecaster"];
+            var ids = ["distributedFashion","TCMF"];
             showTutorials(ids);
             var disIds = ["anomaly_detection","simulation","hyperparameter_tuning","onnxruntime","quantization","customized_model"];
             disCheck(disIds);
@@ -134,7 +149,7 @@ $(".checkboxes").click(function(){
             disCheck(disIds);
         }
         else if(vals.includes("hyperparameter_tuning") && vals.includes("customized_model")){
-            var ids = ["AutoTSEstimator"];
+            var ids = ["AutoTS"];
             showTutorials(ids);
             var disIds = ["anomaly_detection","simulation","onnxruntime","quantization","distributed"];
             disCheck(disIds);
@@ -154,7 +169,7 @@ $(".checkboxes").click(function(){
     }
     else if(vals.length==3){
         if(vals.includes("forecast") && vals.includes("hyperparameter_tuning") && vals.includes("customized_model")){
-            var ids = ["AutoTSEstimator"];
+            var ids = ["AutoTS"];
             showTutorials(ids);
             var disIds = ["anomaly_detection","simulation","onnxruntime","quantization","distributed"];
             disCheck(disIds);
@@ -166,12 +181,64 @@ $(".checkboxes").click(function(){
             disCheck(disIds);
         }
     }
+
+    displaySelected();
 });
 
-//event when click the tags' buttons
+//event when choosing forecasters
-$("details p button").click(function(){
+$(".forecasters").click(function(){ 
-    var id = $(this).val();
+    //reset all the details 'forecasterSelected' class
-    $("#"+id).trigger("click");
+    $('#tutorial details').each(function(){
+        $(this).removeClass('forecasterSelected');
+    });
+
+    //get the selected forecasters
+    var forecasters = [];
+    $('.forecasters:checked').each(function(){
+        forecasters.push($(this).val());
+    });
+
+    if(forecasters.length===0){
+        //no forecaster is checked, display all
+        $('#tutorial details').each(function(){ 
+            $(this).addClass('forecasterSelected');
+        });
+        $(".showingForecaster i").text("All Forecasters");
+    }
+    else{
+        //mark selected forecasters
+        $('#tutorial details').each(function(){
+            var sons = [];
+            $(this).find(".roundbutton").each(function(){
+                sons.push($(this).val())
+            });
+
+            if(forecasters.every(val => sons.includes(val))){
+                $(this).addClass('forecasterSelected');
+            }
+        });
+
+        let fs = "";
+        for(var i=0;i<forecasters.length;i++){
+            fs += forecasters[i]+', ';
+        }
+        fs = fs.substring(0, fs.length - 2);
+       
+        $(".showingForecaster i").text(fs);
+    }
+
+    displaySelected();
 });
 
-// var allIds = ["forecast","anomaly_detection","simulation","hyperparameter_tuning","onnxruntime","quantization","distributed","customized_model"];
+function displaySelected(){
+    $('#tutorial details').each(function(){
+        if(($(this).hasClass("forecasterSelected")) && ($(this).hasClass("filterSelected"))){
+            $(this).css("display","block");
+            $(this).next().css("display","block");
+        }
+        else{
+            $(this).css("display","none");
+            $(this).next().css("display","none");
+        }
+    });
+}

docs/readthedocs/source/doc/Chronos/QuickStart/index.md

@@ -21,13 +21,32 @@
                 <div class="choicebox"><input type="checkbox" class="checkboxes" name="choice" value="distributed" id="distributed">distributed</div>
                 <div class="choicebox"><input type="checkbox" class="checkboxes" name="choice" value="customized_model" id="customized_model">customized model</div>
             </div>
+            <div class="hiddenline">
+                <div class="choicebox"><input type="checkbox" class="forecasters" name="forecasters" value="TCNForecaster" id="TCNForecaster">TCNForecaster</div>
+                <div class="choicebox"><input type="checkbox" class="forecasters" name="forecasters" value="AutoTSEstimator" id="AutoTSEstimator">AutoTSEstimator</div>
+                <div class="choicebox"><input type="checkbox" class="forecasters" name="forecasters" value="DBScanDetector" id="DBScanDetector">DBScanDetector</div>
+                <div class="choicebox"><input type="checkbox" class="forecasters" name="forecasters" value="LSTMForecaster" id="LSTMForecaster">LSTMForecaster</div>
+                <div class="choicebox"><input type="checkbox" class="forecasters" name="forecasters" value="AutoProphet" id="AutoProphet">AutoProphet</div>
+                <div class="choicebox"><input type="checkbox" class="forecasters" name="forecasters" value="MTNetForecaster" id="MTNetForecaster">MTNetForecaster</div>
+                <div class="choicebox"><input type="checkbox" class="forecasters" name="forecasters" value="DeepAR" id="DeepAR">DeepAR</div>
+                <div class="choicebox"><input type="checkbox" class="forecasters" name="forecasters" value="AutoLSTM" id="AutoLSTM">AutoLSTM</div>
+                <div class="choicebox"><input type="checkbox" class="forecasters" name="forecasters" value="Seq2SeqForecaster" id="Seq2SeqForecaster">Seq2SeqForecaster</div>
+                <div class="choicebox"><input type="checkbox" class="forecasters" name="forecasters" value="DPGANSimulator" id="DPGANSimulator">DPGANSimulator</div>
+                <div class="choicebox"><input type="checkbox" class="forecasters" name="forecasters" value="TCMFForecaster" id="TCMFForecaster">TCMFForecaster</div>
+                <div class="choicebox"><input type="checkbox" class="forecasters" name="forecasters" value="TFT_model" id="TFT_model">TFT_model</div>
+            </div>
         </div>
         </br>
+        <div class="showingForecaster">Currently showing forcaster:&nbsp;<i>All Forecasters</i>&nbsp;&nbsp;(<span style="font-weight:bold;">Reclick</span> the tag of these forecasters to undo.)</div>
+        </br>
 
         <details id="ChronosForecaster">
             <summary>
                 <a href="./chronos-tsdataset-forecaster-quickstart.html">Predict Number of Taxi Passengers with Chronos Forecaster</a>
-                <p>Tag: <button value="forecast">forecast</button></p>
+                <p>Tag: 
+                    <button value="forecast">forecast</button>&nbsp;
+                    <button value="TCNForecaster" class="roundbutton">TCNForecaster</button>
+                </p>
             </summary>
             <img src="../../../_images/colab_logo_32px.png"><a href="https://colab.research.google.com/github/intel-analytics/BigDL/blob/main/python/chronos/colab-notebook/chronos_nyc_taxi_tsdataset_forecaster.ipynb">Run in Google Colab</a>
             &nbsp;
@@ -39,7 +58,11 @@
         <details id="TuneaForecasting">
             <summary>
                 <a href="./chronos-autotsest-quickstart.html">Tune a Forecasting Task Automatically</a>
-                <p>Tag: <button value="forecast">forecast</button>&nbsp;<button value="hyperparameter_tuning">AutoML</button></p>
+                <p>Tag: 
+                    <button value="forecast">forecast</button>&nbsp;
+                    <button value="hyperparameter_tuning">AutoML</button>&nbsp;
+                    <button value="AutoTSEstimator" class="roundbutton">AutoTSEstimator</button>
+                </p>
             </summary>
             <img src="../../../_images/colab_logo_32px.png"><a href="https://colab.research.google.com/github/intel-analytics/BigDL/blob/main/python/chronos/colab-notebook/chronos_autots_nyc_taxi.ipynb">Run in Google Colab</a>
             &nbsp;
@@ -51,7 +74,10 @@
         <details id="DetectAnomaly">
             <summary>
                 <a href="./chronos-anomaly-detector.html">Detect Anomaly Point in Real Time Traffic Data</a>
-                <p>Tag: <button value="anomaly_detection">anomaly detection</button></p>
+                <p>Tag: 
+                    <button value="anomaly_detection">anomaly detection</button>&nbsp;
+                    <button value="DBScanDetector" class="roundbutton">DBScanDetector</button>
+                </p>
             </summary>
             <img src="../../../_images/colab_logo_32px.png"><a href="https://colab.research.google.com/github/intel-analytics/BigDL/blob/main/python/chronos/colab-notebook/chronos_minn_traffic_anomaly_detector.ipynb">Run in Google Colab</a>
             &nbsp;
@@ -60,10 +86,15 @@
         </details>
         <hr>
 
-        <details id="AutoTSEstimator">
+        <details id="AutoTS">
             <summary>
                 <a href="https://github.com/intel-analytics/BigDL/blob/main/python/chronos/use-case/network_traffic/network_traffic_autots_customized_model.ipynb">Tune a Customized Time Series Forecasting Model with AutoTSEstimator.</a>
-                <p>Tag: <button value="forecast">forecast</button>&nbsp;<button value="hyperparameter_tuning">AutoML</button>&nbsp;<button value="customized_model">customized model</button></p>
+                <p>Tag: 
+                    <button value="forecast">forecast</button>&nbsp;
+                    <button value="hyperparameter_tuning">AutoML</button>&nbsp;
+                    <button value="customized_model">customized model</button>&nbsp;
+                    <button value="AutoTSEstimator" class="roundbutton">AutoTSEstimator</button>
+                </p>
             </summary>
             <img src="../../../_images/GitHub-Mark-32px.png"><a href="https://github.com/intel-analytics/BigDL/blob/main/python/chronos/use-case/network_traffic/network_traffic_autots_customized_model.ipynb">View source on GitHub</a>
             <p>In this notebook, we demonstrate a reference use case where we use the network traffic KPI(s) in the past to predict traffic KPI(s) in the future. We demonstrate how to use <span>AutoTSEstimator</span> to adjust the parameters of a customized model.</p>
@@ -73,7 +104,11 @@
         <details id="AutoWIDE">
             <summary>
                 <a href="https://github.com/intel-analytics/BigDL/blob/main/python/chronos/use-case/network_traffic/network_traffic_autots_forecasting.ipynb">Auto Tune the Prediction of Network Traffic at the Transit Link of WIDE</a>
-                <p>Tag: <button value="forecast">forecast</button>&nbsp;<button value="hyperparameter_tuning">AutoML</button></p>
+                <p>Tag: 
+                    <button value="forecast">forecast</button>&nbsp;
+                    <button value="hyperparameter_tuning">AutoML</button>&nbsp;
+                    <button value="AutoTSEstimator" class="roundbutton">AutoTSEstimator</button>
+                </p>
             </summary>
             <img src="../../../_images/GitHub-Mark-32px.png"><a href="https://github.com/intel-analytics/BigDL/blob/main/python/chronos/use-case/network_traffic/network_traffic_autots_forecasting.ipynb">View source on GitHub</a>
             <p>In this notebook, we demostrate a reference use case where we use the network traffic KPI(s) in the past to predict traffic KPI(s) in the future. We demostrate how to use <span>AutoTS</span> in project <span><a href="https://github.com/intel-analytics/bigdl/tree/main/python/chronos/src/bigdl/chronos">Chronos</a></span> to do time series forecasting in an automated and distributed way.</p>
@@ -83,7 +118,10 @@
         <details id="MultvarWIDE">
             <summary>
                 <a href="https://github.com/intel-analytics/BigDL/blob/main/python/chronos/use-case/network_traffic/network_traffic_model_forecasting.ipynb">Multivariate Forecasting of Network Traffic at the Transit Link of WIDE</a>
-                <p>Tag: <button value="forecast">forecast</button></p>
+                <p>Tag: 
+                    <button value="forecast">forecast</button>&nbsp;
+                    <button value="LSTMForecaster" class="roundbutton">LSTMForecaster</button>
+                </p>
             </summary>
             <img src="../../../_images/GitHub-Mark-32px.png"><a href="https://github.com/intel-analytics/BigDL/blob/main/python/chronos/use-case/network_traffic/network_traffic_model_forecasting.ipynb">View source on GitHub</a>
             <p>In this notebook, we demonstrate a reference use case where we use the network traffic KPI(s) in the past to predict traffic KPI(s) in the future. We demostrate how to do univariate forecasting (predict only 1 series), and multivariate forecasting (predicts more than 1 series at the same time) using Project <span><a href="https://github.com/intel-analytics/bigdl/tree/main/python/chronos/src/bigdl/chronos">Chronos</a></span>.</p>
@@ -93,17 +131,23 @@
         <details id="MultstepWIDE">
             <summary>
                 <a href="https://github.com/intel-analytics/BigDL/blob/main/python/chronos/use-case/network_traffic/network_traffic_multivariate_multistep_tcnforecaster.ipynb">Multistep Forecasting of Network Traffic at the Transit Link of WIDE</a>
-                <p>Tag: <button value="forecast">forecast</button></p>
+                <p>Tag: 
+                    <button value="forecast">forecast</button>&nbsp;
+                    <button value="TCNForecaster" class="roundbutton">TCNForecaster</button>
+                </p>
             </summary>
             <img src="../../../_images/GitHub-Mark-32px.png"><a href="https://github.com/intel-analytics/BigDL/blob/main/python/chronos/use-case/network_traffic/network_traffic_multivariate_multistep_tcnforecaster.ipynb">View source on GitHub</a>
             <p>In this notebook, we demonstrate a reference use case where we use the network traffic KPI(s) in the past to predict traffic KPI(s) in the future. We demostrate how to do multivariate multistep forecasting using Project <span><a href="https://github.com/intel-analytics/bigdl/tree/main/python/chronos/src/bigdl/chronos">Chronos</a></span>.</p>
         </details>
         <hr>
 
-        <details id="LSTMForecaster">
+        <details id="LSTMF">
             <summary>
             <a href="https://github.com/intel-analytics/BigDL/blob/main/python/chronos/use-case/fsi/stock_prediction.ipynb">Stock Price Prediction with LSTMForecaster</a>
-            <p>Tag: <button value="forecast">forecast</button></p>
+            <p>Tag: 
+                <button value="forecast">forecast</button>&nbsp;
+                <button value="LSTMForecaster" class="roundbutton">LSTMForecaster</button>
+            </p>
             </summary>          
             <img src="../../../_images/GitHub-Mark-32px.png"><a href="https://github.com/intel-analytics/BigDL/blob/main/python/chronos/use-case/fsi/stock_prediction.ipynb">View source on GitHub</a>
             <p>In this notebook, we demonstrate a reference use case where we use historical stock price data to predict the future price. The dataset we use is the daily stock price of S&P500 stocks during 2013-2018 (data source). We demostrate how to do univariate forecasting using the past 80% of the total days' MMM price to predict the future 20% days' daily price.</p>
@@ -111,10 +155,14 @@
         </details>
         <hr>
 
-        <details id="AutoProphet">
+        <details id="AutoPr">
             <summary>
                 <a href="https://github.com/intel-analytics/BigDL/blob/main/python/chronos/use-case/fsi/stock_prediction_prophet.ipynb">Stock Price Prediction with ProphetForecaster and AutoProphet</a>
-                <p>Tag: <button value="forecast">forecast</button>&nbsp;<button value="hyperparameter_tuning">AutoML</button></p>
+                <p>Tag: 
+                    <button value="forecast">forecast</button>&nbsp;
+                    <button value="hyperparameter_tuning">AutoML</button>&nbsp;
+                    <button value="AutoProphet" class="roundbutton">AutoProphet</button>
+                </p>
             </summary>
             <img src="../../../_images/GitHub-Mark-32px.png"><a href="https://github.com/intel-analytics/BigDL/blob/main/python/chronos/use-case/fsi/stock_prediction_prophet.ipynb">View source on GitHub</a>
             <p>In this notebook, we demonstrate a reference use case where we use historical stock price data to predict the future price using the ProphetForecaster and AutoProphet. The dataset we use is the daily stock price of S&P500 stocks during 2013-2018 <span><a href="https://www.kaggle.com/camnugent/sandp500/">data source</a></span>.</p>
@@ -125,7 +173,10 @@
         <details id="Unsupervised">
             <summary>
                 <a href="https://github.com/intel-analytics/BigDL/blob/main/python/chronos/use-case/AIOps/AIOps_anomaly_detect_unsupervised.ipynb">Unsupervised Anomaly Detection for CPU Usage</a>
-                <p>Tag: <button value="anomaly_detection">anomaly detection</button></p>
+                <p>Tag: 
+                    <button value="anomaly_detection">anomaly detection</button>&nbsp;
+                    <button value="DBScanDetector" class="roundbutton">DBScanDetector</button>
+                </p>
             </summary>
             <img src="../../../_images/GitHub-Mark-32px.png"><a href="https://github.com/intel-analytics/BigDL/blob/main/python/chronos/use-case/AIOps/AIOps_anomaly_detect_unsupervised.ipynb">View source on GitHub</a>
             <p>We demonstrates how to perform anomaly detection based on Chronos's built-in <span><a href="../../PythonAPI/Chronos/anomaly_detectors.html#dbscandetector">DBScanDetector</a></span>, <span><a href="../../PythonAPI/Chronos/anomaly_detectors.html#aedetector">AEDetector</a></span> and <span><a href="../../PythonAPI/Chronos/anomaly_detectors.html#thresholddetector">ThresholdDetector</a></span>.</p>
@@ -135,7 +186,11 @@
         <details id="AnomalyDetection">
             <summary>
                 <a href="https://github.com/intel-analytics/BigDL/blob/main/python/chronos/use-case/AIOps/AIOps_anomaly_detect_unsupervised_forecast_based.ipynb">Anomaly Detection for CPU Usage Based on Forecasters</a>
-                <p>Tag: <button value="forecast">forecast</button>&nbsp;<button value="anomaly_detection">anomaly detection</button></p>
+                <p>Tag: 
+                    <button value="forecast">forecast</button>&nbsp;
+                    <button value="anomaly_detection">anomaly detection</button>&nbsp;
+                    <button value="MTNetForecaster" class="roundbutton">MTNetForecaster</button>
+                </p>
             </summary>
             <img src="../../../_images/GitHub-Mark-32px.png"><a href="https://github.com/intel-analytics/BigDL/blob/main/python/chronos/use-case/AIOps/AIOps_anomaly_detect_unsupervised_forecast_based.ipynb">View source on GitHub</a>
             <p>We demonstrates how to leverage Chronos's built-in models ie. MTNet, to do time series forecasting. Then perform anomaly detection on predicted value with <span><a href="../../PythonAPI/Chronos/anomaly_detectors.html#thresholddetector">ThresholdDetector</a></span>.</p>
@@ -145,7 +200,11 @@
         <details id="DeepARmodel">
             <summary>
                 <a href="https://github.com/intel-analytics/BigDL/tree/main/python/chronos/use-case/pytorch-forecasting/DeepAR">Help pytorch-forecasting improve the training speed of DeepAR model</a>
-                <p>Tag: <button value="forecast">forecast</button>&nbsp;<button value="customized_model">customized model</button></p>
+                <p>Tag: 
+                    <button value="forecast">forecast</button>&nbsp;
+                    <button value="customized_model">customized model</button>&nbsp;
+                    <button value="DeepAR" class="roundbutton">DeepAR</button>
+                </p>
             </summary>
             <img src="../../../_images/GitHub-Mark-32px.png"><a href="https://github.com/intel-analytics/BigDL/tree/main/python/chronos/use-case/pytorch-forecasting/DeepAR">View source on GitHub</a>
             <p>Chronos can help a 3rd party time series lib to improve the performance (both training and inferencing) and accuracy. This use-case shows Chronos can easily help pytorch-forecasting speed up the training of DeepAR model.</p>
@@ -155,7 +214,11 @@
         <details id="TFTmodel">
             <summary>
                 <a href="https://github.com/intel-analytics/BigDL/tree/main/python/chronos/use-case/pytorch-forecasting/TFT">Help pytorch-forecasting improve the training speed of TFT model</a>
-                <p>Tag: <button value="forecast">forecast</button>&nbsp;<button value="customized_model">customized model</button></p>
+                <p>Tag: 
+                    <button value="forecast">forecast</button>&nbsp;
+                    <button value="customized_model">customized model</button>&nbsp;
+                    <button value="TFT_model" class="roundbutton">TFT Model</button>
+                </p>
             </summary>
             <img src="../../../_images/GitHub-Mark-32px.png"><a href="https://github.com/intel-analytics/BigDL/tree/main/python/chronos/use-case/pytorch-forecasting/TFT">View source on GitHub</a>
             <p>Chronos can help a 3rd party time series lib to improve the performance (both training and inferencing) and accuracy. This use-case shows Chronos can easily help pytorch-forecasting speed up the training of TFT model.</p>
@@ -165,7 +228,11 @@
         <details id="hyperparameter">
             <summary>
                 <a href="https://github.com/intel-analytics/BigDL/tree/main/python/chronos/example/hpo/muti_objective_hpo_with_builtin_latency_tutorial.ipynb">Tune a Time Series Forecasting Model with multi-objective hyperparameter optimization.</a>
-                <p>Tag: <button value="forecast">forecast</button>&nbsp;<button value="hyperparameter_tuning">AutoML</button></p>
+                <p>Tag: 
+                    <button value="forecast">forecast</button>&nbsp;
+                    <button value="hyperparameter_tuning">AutoML</button>&nbsp;
+                    <button value="TCNForecaster" class="roundbutton">TCNForecaster</button>
+                </p>
             </summary>
             <img src="../../../_images/GitHub-Mark-32px.png"><a href="https://github.com/intel-analytics/BigDL/tree/main/python/chronos/example/hpo/muti_objective_hpo_with_builtin_latency_tutorial.ipynb">View source on GitHub</a>
             <p>In this notebook, we demostrate how to use <span>multi-objective hyperparameter optimization with built-in latency metric</span> in project <span><a href="https://github.com/intel-analytics/bigdl/tree/main/python/chronos/src/bigdl/chronos">Chronos</a></span> to do time series forecasting and achieve good tradeoff between performance and latency.</p>
@@ -175,7 +242,12 @@
         <details id="taxiDataset">
             <summary>
                 <a href="https://github.com/intel-analytics/BigDL/tree/main/python/chronos/example/auto_model">Auto tuning prophet on nyc taxi dataset</a>
-                <p>Tag: <button value="forecast">forecast</button>&nbsp;<button value="hyperparameter_tuning">AutoML</button></p>
+                <p>Tag: 
+                    <button value="forecast">forecast</button>&nbsp;
+                    <button value="hyperparameter_tuning">AutoML</button>&nbsp;
+                    <button value="AutoLSTM" class="roundbutton">AutoLSTM</button>&nbsp;
+                    <button value="AutoProphet" class="roundbutton">AutoProphet</button>
+                </p>
             </summary>
             <img src="../../../_images/GitHub-Mark-32px.png"><a href="https://github.com/intel-analytics/BigDL/tree/main/python/chronos/example/auto_model">View source on GitHub</a>
             <p>This example collection will demonstrate Chronos auto models (i.e. autolstm & autoprophet) perform automatic time series forecasting on nyc_taxi dataset. The auto model will search the best hyperparameters automatically.</p>
@@ -185,7 +257,12 @@
         <details id="distributedFashion">
             <summary>
                 <a href="https://github.com/intel-analytics/BigDL/tree/main/python/chronos/example/distributed">Use Chronos forecasters in a distributed fashion</a>
-                <p>Tag: <button value="forecast">forecast</button>&nbsp;<button value="distributed">distributed</button></p>
+                <p>Tag: 
+                    <button value="forecast">forecast</button>&nbsp;
+                    <button value="distributed">distributed</button>&nbsp;
+                    <button value="Seq2SeqForecaster" class="roundbutton">Seq2SeqForecaster</button>&nbsp;
+                    <button value="TCNForecaster" class="roundbutton">TCNForecaster</button>
+                </p>
             </summary>
             <img src="../../../_images/GitHub-Mark-32px.png"><a href="https://github.com/intel-analytics/BigDL/tree/main/python/chronos/example/distributed">View source on GitHub</a>
             <p>Users can easily train their forecasters in a distributed fashion to handle extra large dataset and speed up the process (training and data processing) by utilizing a cluster or pseudo-distribution on a single node. The functionality is powered by Project Orca.</p>
@@ -195,7 +272,13 @@
         <details id="ONNX">
             <summary>
                 <a href="https://github.com/intel-analytics/BigDL/tree/main/python/chronos/example/onnx">Use ONNXRuntime to speed-up forecasters' inferecing</a>
-                <p>Tag: <button value="forecast">forecast</button>&nbsp;<button value="onnxruntime">onnxruntime</button>&nbsp;<button value="hyperparameter_tuning">AutoML</button></p>
+                <p>Tag: 
+                    <button value="forecast">forecast</button>&nbsp;
+                    <button value="onnxruntime">onnxruntime</button>&nbsp;
+                    <button value="hyperparameter_tuning">AutoML</button>&nbsp;
+                    <button value="AutoTSEstimator" class="roundbutton">AutoTSEstimator</button>&nbsp;
+                    <button value="Seq2SeqForecaster" class="roundbutton">Seq2SeqForecaster</button>
+                </p>
             </summary>
             <img src="../../../_images/GitHub-Mark-32px.png"><a href="https://github.com/intel-analytics/BigDL/tree/main/python/chronos/example/onnx">View source on GitHub</a>
             <p>This example will demonstrate how to use ONNX to speed up the inferencing(prediction/evalution) on forecasters and AutoTSEstimator. In this example, onnx speed up the inferencing for ~4X.</p>
@@ -205,7 +288,11 @@
         <details id="Quantize">
             <summary>
                 <a href="https://github.com/intel-analytics/BigDL/tree/main/python/chronos/example/quantization">Quantize Chronos forecasters method to speed-up inference</a>
-                <p>Tag: <button value="forecast">forecast</button>&nbsp;<button value="quantization">quantization</button></p>
+                <p>Tag: 
+                    <button value="forecast">forecast</button>&nbsp;
+                    <button value="quantization">quantization</button>&nbsp;
+                    <button value="TCNForecaster" class="roundbutton">TCNForecaster</button>
+                </p>
             </summary>
             <img src="../../../_images/GitHub-Mark-32px.png"><a href="https://github.com/intel-analytics/BigDL/tree/main/python/chronos/example/quantization">View source on GitHub</a>
             <p>Users can easily quantize their forecasters to low precision and speed up the inference process (both throughput and latency) by on a single node. The functionality is powered by Project Nano.</p>
@@ -215,17 +302,24 @@
         <details id="SimualateTimeSeriesData">
             <summary>
                 <a href="https://github.com/intel-analytics/BigDL/tree/main/python/chronos/example/simulator">Simualate time series data with similar pattern as example data</a>
-                <p>Tag: <button value="simulation">simulation</button></p>
+                <p>Tag: 
+                    <button value="simulation">simulation</button>&nbsp;
+                    <button value="DPGANSimulator" class="roundbutton">DPGANSimulator</button>
+                </p>
             </summary>
             <img src="../../../_images/GitHub-Mark-32px.png"><a href="https://github.com/intel-analytics/BigDL/tree/main/python/chronos/example/simulator">View source on GitHub</a>
             <p>This example shows how to generate synthetic data with similar distribution as training data with the fast and easy DPGANSimulator API provided by Chronos.</p>
         </details>
         <hr>
 
-        <details id="TCMFForecaster">
+        <details id="TCMF">
             <summary>
                 <a href="https://github.com/intel-analytics/BigDL/tree/main/python/chronos/example/tcmf">High dimension time series forecasting with Chronos TCMFForecaster</a>
-                <p>Tag: <button value="forecast">forecast</button>&nbsp;<button value="distributed">distributed</button></p>
+                <p>Tag: 
+                    <button value="forecast">forecast</button>&nbsp;
+                    <button value="distributed">distributed</button>&nbsp;
+                    <button value="TCMFForecaster" class="roundbutton">TCMFForecaster</button>
+                </p>
             </summary>
             <img src="../../../_images/GitHub-Mark-32px.png"><a href="https://github.com/intel-analytics/BigDL/tree/main/python/chronos/example/tcmf">View source on GitHub</a>
             <p>This example demonstrates how to use BigDL Chronos TCMFForecaster to run distributed training and inference for high dimension time series forecasting task.</p>
@@ -235,7 +329,10 @@
         <details id="PenalizeUnderestimation">
             <summary>
                 <a href="https://github.com/intel-analytics/BigDL/tree/main/python/chronos/example/loss/penalize_underestimation.ipynb">Penalize underestimation with LinexLoss</a>
-                <p>Tag: <button value="forecast">forecast</button></p>
+                <p>Tag: 
+                    <button value="forecast">forecast</button>&nbsp;
+                    <button value="TCNForecaster" class="roundbutton">TCNForecaster</button>
+                </p>
             </summary>
             <img src="../../../_images/GitHub-Mark-32px.png"><a href="https://github.com/intel-analytics/BigDL/tree/main/python/chronos/example/loss/penalize_underestimation.ipynb">View source on GitHub</a>
             <p>This example demonstrates how to use TCNForecaster to penalize underestimation based on a built-in loss function LinexLoss.</p>
@@ -245,7 +342,11 @@
         <details id="GPUtrainingCPUacceleration">
             <summary>
                 <a href="https://github.com/intel-analytics/BigDL/tree/main/python/chronos/example/inference-acceleration">Accelerate the inference speed of model trained on other platform</a>
-                <p>Tag: <button value="forecast">forecast</button>&nbsp;<button value="customized_model">customized model</button></p>
+                <p>Tag: 
+                    <button value="forecast">forecast</button>&nbsp;
+                    <button value="customized_model">customized model</button>&nbsp;
+                    <button value="TCNForecaster" class="roundbutton">TCNForecaster</button>
+                </p>
             </summary>
             <img src="../../../_images/GitHub-Mark-32px.png"><a href="https://github.com/intel-analytics/BigDL/tree/main/python/chronos/example/inference-acceleration">View source on GitHub</a>
             <p>In this example, we show an example to train the model on GPU and accelerate the model by using onnxruntime on CPU.</p>