import { QBreadcrumbs, QBreadcrumbsEl } from './QBreadcrumbs-d508f268.js';
import { QSeparator } from './QSeparator-f2beec84.js';
import { QItem, QItemSection } from './QItem-1f9e6dcc.js';
import { QList } from './QList-5be5d7fb.js';
import { MarkdownViewer } from './MarkdownViewer-d011cacb.js';
import { _export_sfc } from './_plugin-vue_export-helper-e9a2c33e.js';
import { createElementBlock, createBaseVNode, createVNode, withCtx, resolveComponent, openBlock, createTextVNode, pushScopeId, popScopeId } from './__federation_expose_Modules-a9c6a6fc.js';

const content = `

#### **Before Starting**

In this section, we will illustrate the execution of each component in the Machine Learning Pipeline by providing a specific case along with a demonstration of the corresponding execution codes.

For this example:
- **Pipeline**: we will choose **Daily demand power forecasting** pipeline as example for demonstration.
- **Dataset**: is sourced from [Kaggle](https://www.kaggle.com/). The dataset consists of electricity power consumption data collected at 15-minute intervals over a span of nearly two years (from January 1, 2020, to November 2, 2021).

When attempting to execute these code snippets in your own environment, it may be necessary to install several Python packages, either as dependencies or independently such as *Pandas*, *NumPy*, *Matplotlib*, *Scikit-learn*, and others.

#### **Overview of Pipeline Components**

![MarineGEO circle logo](/images/pipeline_components.png#5_steps_pipeline)

- Retrieval of training job metadata: metadata including 
Training job metadata, including Experiment Name, ID, creation date, and parameters, and others is generated and stored in the system database for management.
- Data pre-processing: helps to improve the overall quality of the data for better results during deep neural network training.
- Model building: this process including model initializing, model training, hyperparameters tunning and model testing.
- Model exporting: stores optimal models in system database for serving purpose. 

For the details of each component, please go to [Pipeline components section](/docs/components/mlpipeline/mlpipeline-components).

#### **Running Pipeline**

The pipeline take user-defined parameters in the form of a dictionary object as input. For this example, we denote those parameters as ***params***.

##### ***Retrieval of Training Job Metadata***

![MarineGEO circle logo](/images/pipeline_components_1.png#1st_steps_pipeline)

Metadata including:
- Experiment ID: 60831d1b-5ead-41d2-a777-c140e1dc59a4*
- Experiment name: dummy-experiment*
- Created on: 2023.05.23*
- Pipeline ID: 001*
- Pipeline version ID: 001*
- Dataset ID: 017*
- Training parameters: ***params****
- Training status: ***Running***

> (*) The provided information serves as an example for demonstration purposes and does not represent actual data.

These metadata will help manage the training job.

##### ***Data Pre-processing***

![MarineGEO circle logo](/images/pipeline_components_2.png#2nd_steps_pipeline)

This component consists of multiple sub-tasks:

###### **1. Data Loading**

*Input:*

\`\`\`
// data source is depending on the user reference. It can be Amazon S3 or private dataset.
data_path = params["data_source"] 
raw = pd.read_csv(data_path)
raw.head()
\`\`\`

*Ouput:*

> ![MarineGEO circle logo](/images/sample_code/2-1-data_loading-3.png)

We can have a look at the first 5 columns of the dataset.

###### **2. Exploratory Data Analysis (EDA)**

###### **2.1. Data Type Checking**

*Input:*

\`\`\`
raw.info()
\`\`\`

*Output*:

> ![MarineGEO circle logo](/images/sample_code/2-2-1-eda-data-types.png)
  
  
We can see the information of data types of each attributes in dataset. However, the *date* do not have the type as we expected.  
Therefore, we need to change the data type of *date* attribute.

*Input:*

\`\`\`
raw['date'] = pd.to_datetime(raw['date'])
\`\`\`

*Output:*

> ![MarineGEO circle logo](/images/sample_code/2-2-1-eda-data-types-corrected.png)

We have corrected the data types of date from *object* to *datetime64*.

###### **2.2. Data Cleaning**

Initially, we verify whether the dataset contains any duplicate values and subsequently eliminate them if detected.

*Input:*

\`\`\`
print(f"The dataset have {raw.duplicated().sum()} duplicate values.")
\`\`\`

*Output:*

> \`\`\` The dataset have 0 duplicate values. \`\`\`

Next, we examine the dataset for any missing values.

*Input:*

\`\`\`
date_dataset = raw['date'].tolist()
date_range = pd.date_range(start=date_dataset[0], end=date_dataset[-1], freq='15T').strftime('%Y-%m-%d %H:%M:%S%z')
missing_date = date_range[np.isin(date_range, date_dataset) == False]
missing_df = pd.DataFrame(missing_date, columns=['date'])
print(f"The number expected datetime values: {date_range.shape[0]}")
print(f"The number of available datetime values: {len(date_dataset)}")
print(f"The number missing datetime values: {missing_df.shape[0]} ({missing_df.shape[0]/date_range.shape[0]*100:.2f}%)")
\`\`\`

*Output:*

> \`\`\`
> The number of expected datetime values: 64476 
> The number of available datetime values: 64188
> The number of missing datetime values: 288 (0.45%) 
> \`\`\`

Then proceed to replace them if found.

*Input:*

\`\`\`
raw = pd.concat([raw, missing_df], axis=0)
raw.sort_values(by='date', inplace=True)
raw = raw.fillna(method='ffill')
\`\`\`

*Output:*

> \`\`\`
> The number of expected datetime values: 64476 
> The number of available datetime values: 64476
> The number of missing datetime values: 0 (0.00%) 
> \`\`\`

Following that, we assess the dataset for any outliers and subsequently replace them. We detect outliers by plotting boxplot.

*Input:*

\`\`\`
raw.describe()
plt.figure(figsize=(15,7))
plt.title("Skewed Distribution", fontsize=15)
sns.boxplot(data = raw["power"], palette="Dark2")
plt.show()
\`\`\`

*Output:*

> ![MarineGEO circle logo](/images/sample_code/2-2-2-eda-data-cleaning-outliers.png)
>
> ![MarineGEO circle logo](/images/sample_code/2-2-2-eda-data-cleaning-boxplot.png)
  
Based on the analysis of the boxplot, it can be concluded that the dataset does not contain any outliers.  
  
###### **3. Data Splitting**

For unbiased evaluation of performance purposes, the dataset is divided into three sets: the training set, the validation set, and the test set.
  
*Input:*

\`\`\`
train_portion = params["train_portion"] # 0.8
valid_portion = params["valid_portion"] # 0.1
test_portion = params["test_portion"]   # 0.1
n = raw.shape[0]

raw_train = raw.iloc[:int(train_portion * n)]
raw_valid = raw.iloc[int(train_portion * n):int((train_portion + valid_portion) * n)]
raw_test = raw.iloc[int((train_portion + valid_portion) * n):]

print(f"Train set samples: {raw_train.shape[0]}")
print(f"Valid set samples: {raw_valid.shape[0]}")
print(f"Test set samples: {raw_test.shape[0]}")
\`\`\`

*Output*:
> \`\`\`
> Train set samples: 51580
> Valid set samples: 6448
> Test set samples: 6448
> \`\`\`
  

###### **4. Feature Engineering**

**Demand power forecast** pipeline have the following features:
- Time-based Features* : minute, hour, weekday, holiday, month.
- Lagged Variables.
- Rolling Statistics: expanding window sum of daily power.

*Input:*

\`\`\`
// function \`feature computing\` is predefined executed code to generate feature values

raw_train_with_cov = feature_computing(raw_train)
raw_valid_with_cov = feature_computing(raw_valid)
raw_test_with_cov = feature_computing(raw_test)
print(f"Features: {raw_train_with_cov.columns.to_list()}")
print(f"Train set shape after feature engineering: {raw_train_with_cov.shape}")

// same with validation set and test set
\`\`\`

*Output*:
> \`\`\`
> Features: ['min_spline_0', 'min_spline_1', 'min_spline_2', 'hour_spline_0', 'hour_spline_1', 'hour_spline_2', 'hour_spline_3', 'hour_spline_4', 'hour_spline_5', 'hour_spline_6', 'hour_spline_7', 'hour_spline_8', 'hour_spline_9', 'hour_spline_10', 'hour_spline_11', 'day_of_week_spline_0', 'day_of_week_spline_1', 'day_of_week_spline_2', 'holiday', 'expanding_sum', 'day_before_holiday', 'power']
> Train set shape after feature engineering: (51580, 22)
> \`\`\`

###### **5. Data Normalizing**

In this step, we use Min-Max scaling option

*Input:*

\`\`\`
// declare and initialize the scaler
scaler = MinMaxScaler()
scaler_train = scaler.fit(raw_train_with_cov.values)
scaler_target_train = scaler_target.fit(np.reshape(raw_train_with_cov.values[:, predict_variable_index], (-1, 1)))

// scaling the value
scaled_train = scaler_train.transform(raw_train_with_cov.values)
scaled_valid = scaler_train.transform(raw_valid_with_cov.values)
scaled_test = scaler_train.transform(raw_test_with_cov.values)

// same with validation set and test set
print(scled_train.describe())
\`\`\`

*Output:*

>![MarineGEO circle logo](/images/sample_code/2-5-normalize-data.png)

After normalizing, the data is in range of [0,1].

##### ***Model Building***

![MarineGEO circle logo](/images/pipeline_components_3.png#3rd_steps_pipeline)

###### **Model Selection**

*Input:*

\`\`\`
// model declaration
class ModelArchitecture(nn.Module):
    def __init__(self, hyperparam_1, hyperparam_2, hyperparam_3, hyperparam_4):
        // layer 1 definition
        // layer 2 definition
        // layer 3 definition
        // ...
        // layer n definition
    
    def foward(self, input):
        output_1 = layer_1(input)
        output_2 = layer_2(output_1)
        output_3 = layer_3(output_2)
        // ...
        output_n = layer_n-1(output_n-1)
        return output_n

// model Initialize
hyperparam_1 = params["hyperparam_1]
hyperparam_2 = params["hyperparam_2]
hyperparam_3 = params["hyperparam_3]
hyperparam_4 = params["hyperparam_4]

model = ModelArchitecture(hyperparam_1, hyperparam_2, hyperparam_3, hyperparam_4)
\`\`\`

###### **Model Training**

Training configuration.

*Input:*
\`\`\`
# learning rate
lr = 9e-5

# select gpu or cpu
device = 'cuda:0'

# set number of epochs
epochs = 150

# set batch size
batch_size = 64

# select optimizer
optimizer = Adam()

# select loss function
loss_function = MSE()

# Divide train set, validation set, and test set into batches
# A batch is including: x is input data, Y is groundtruth data
train_batches = batchify(scaled_train, batch_size)
valid_batches = batchify(scaled_validate, batch_size)
test_batches = batchify(scaled_test, batch_size)
\`\`\`

Start training.

*Input:*

\`\`\`
// model training
for epoch in epochs:
    print(f"> START EPOCH: {epoch}")
    for x, Y in train_batches:
        y = model(x) // get prediction value
        loss = loss_function(y, Y) // calculate loss between prediction y and true value Y

        // calculate gradient, step size and update model parameters
        optimizer.zero_grad()
        loss.backward()
        optimizer.step()
    
    if (epoch % 10 == 0):
        // model validation every 10 epochs
        loss_valid = model_validation()
        print(f"> Valid loss: {loss_valid}")
\`\`\`

*Output:*

> ![MarineGEO circle logo](/images/sample_code/4-model-training.png)

###### **Hyperparameters Optimization**

During hyperparameter optimization, our system will attempt the model training step using various combinations of hyperparameters.

###### **Model Testing**

Following the training process, the model is tested on the designated test set. This step ensures an unbiased evaluation of the model's performance, as the test set consists of data that the model has not been exposed to during training.

##### ***Model Exporting***

![MarineGEO circle logo](/images/pipeline_components_4.png#4th_steps_pipeline)

The metadata of the model and training experiment is exported and stored in the system database for future reference and management. For example, the metadata such as:
- Training status: Completed*
- Training duration: 3 hour 1 minute*
- Model weight : \`weight.pt\` (stored as file)
- Model parameters: hyperparameter_1, hyperparameter_2, hyperparameter_3, ...*
- Model MAPE metric: 12%*
- Model artifacts such as learning curve, model prediction plot on test set.

> (*) The provided information serves as an example for demonstration purposes and does not represent actual data.
`;

const sample_vue_vue_type_style_index_0_scoped_8204ac2e_lang = '';

const _sfc_main = {
  components: {
    MarkdownViewer
  },
  data() {
    return {
      value: content,
      activeBeforeStarting: true,
      activeOverviewofPipelineComponents: false,
      activeRetrievalTrainingJobMetadata: false,
      activeDataPreprocess: false,
      activeDataLoading: false,
      activeEDA: false,
      activeDataTypeChecking: false,
      activeDataCleaning: false,
      activeDataSplitting: false,
      activeFeatureEngineering: false,
      activeDataNormalizing: false,
      activeModelBuilding: false,
      activeModelSelection: false,
      activeModelTraining: false,
      activeHyperparametersOptimization: false,
      activeModelTesting: false,
      activeModelExporting: false
    };
  },
  methods: {
    setActive(section) {
      this.activeBeforeStarting = false;
      this.activeOverviewofPipelineComponents = false;
      this.activeRetrievalTrainingJobMetadata = false;
      this.activeDataPreprocess = false;
      this.activeDataLoading = false;
      this.activeEDA = false;
      this.activeDataTypeChecking = false;
      this.activeDataCleaning = false;
      this.activeDataSplitting = false;
      this.activeFeatureEngineering = false;
      this.activeDataNormalizing = false;
      this.activeModelBuilding = false;
      this.activeModelSelection = false;
      this.activeModelTraining = false;
      this.activeHyperparametersOptimization = false;
      this.activeModelTesting = false;
      this.activeModelExporting = false;
      if (section == 'activeBeforeStarting') {
        this.activeBeforeStarting = true;
      } else if (section == 'activeOverviewofPipelineComponents') {
        this.activeOverviewofPipelineComponents = true;
      } else if (section == 'activeRetrievalTrainingJobMetadata') {
        this.activeRetrievalTrainingJobMetadata = true;
      } else if (section == 'activeDataPreprocess') {
        this.activeDataPreprocess = true;
      } else if (section == 'activeEDA') {
        this.activeEDA = true;
      } else if (section == 'activeDataTypeChecking') {
        this.activeDataTypeChecking = true;
      } else if (section == 'activeDataCleaning') {
        this.activeDataCleaning = true;
      } else if (section == 'activeDataSplitting') {
        this.activeDataSplitting = true;
      } else if (section == 'activeFeatureEngineering') {
        this.activeFeatureEngineering = true;
      } else if (section == 'activeDataNormalizing') {
        this.activeDataNormalizing = true;
      } else if (section == 'activeModelBuilding') {
        this.activeModelBuilding = true;
      } else if (section == 'activeModelSelection') {
        this.activeModelSelection = true;
      } else if (section == 'activeModelTraining') {
        this.activeModelTraining = true;
      } else if (section == 'activeHyperparametersOptimization') {
        this.activeHyperparametersOptimization = true;
      } else if (section == 'activeModelTesting') {
        this.activeModelTesting = true;
      } else if (section == 'activeModelExporting') {
        this.activeModelExporting = true;
      }
    }
  }
};
const _withScopeId = n => (pushScopeId("data-v-8204ac2e"), n = n(), popScopeId(), n);
const _hoisted_1 = {
  class: "row",
  style: {
    "column-gap": "10px"
  }
};
const _hoisted_2 = {
  class: "col"
};
const _hoisted_3 = {
  class: "row nav-text"
};
const _hoisted_4 = {
  class: "col"
};
const _hoisted_5 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("span", null, "Docs", -1));
const _hoisted_6 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("span", null, "Components", -1));
const _hoisted_7 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("span", null, "Machine Learning Pipeline", -1));
const _hoisted_8 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("span", null, "Sample Codes", -1));
const _hoisted_9 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("div", {
  class: "title"
}, [/*#__PURE__*/createBaseVNode("span", null, "Sample Codes")], -1));
const _hoisted_10 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("div", {
  class: "subtitle"
}, [/*#__PURE__*/createBaseVNode("span", null, "Samples execute codes for Machine Learning Pipelines Components")], -1));
const _hoisted_11 = {
  class: "col-3"
};
const _hoisted_12 = {
  style: {
    "position": "sticky",
    "top": "20px",
    "color": "#9d9d9d"
  }
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_markdown_viewer = resolveComponent("markdown-viewer");
  return openBlock(), createElementBlock("div", _hoisted_1, [createBaseVNode("div", _hoisted_2, [createBaseVNode("div", _hoisted_3, [createBaseVNode("div", _hoisted_4, [createVNode(QBreadcrumbs, null, {
    default: withCtx(() => [createVNode(QBreadcrumbsEl, {
      to: "/docs"
    }, {
      default: withCtx(() => [_hoisted_5]),
      _: 1
    }), createVNode(QBreadcrumbsEl, {
      to: "/docs/components"
    }, {
      default: withCtx(() => [_hoisted_6]),
      _: 1
    }), createVNode(QBreadcrumbsEl, {
      to: "/docs/components/mlpipeline"
    }, {
      default: withCtx(() => [_hoisted_7]),
      _: 1
    }), createVNode(QBreadcrumbsEl, {
      to: "/docs/components/mlpipeline/sample-codes"
    }, {
      default: withCtx(() => [_hoisted_8]),
      _: 1
    })]),
    _: 1
  })])]), _hoisted_9, _hoisted_10, createVNode(QSeparator), createBaseVNode("div", null, [createVNode(_component_markdown_viewer, {
    value: $data.value
  }, null, 8, ["value"])])]), createBaseVNode("div", _hoisted_11, [createBaseVNode("div", _hoisted_12, [createVNode(QList, {
    dense: ""
  }, {
    default: withCtx(() => [createVNode(QItem, {
      active: $data.activeBeforeStarting,
      "active-class": "text-bold",
      "manual-focus": "",
      dense: "",
      clickable: "",
      to: {
        hash: '#before-starting'
      },
      onClick: _cache[0] || (_cache[0] = $event => $options.setActive('activeBeforeStarting'))
    }, {
      default: withCtx(() => [createVNode(QItemSection, {
        class: "q-item-text"
      }, {
        default: withCtx(() => [createTextVNode("Before Starting")]),
        _: 1
      })]),
      _: 1
    }, 8, ["active"]), createVNode(QItem, {
      active: $data.activeOverviewofPipelineComponents,
      "active-class": "text-bold",
      "manual-focus": "",
      dense: "",
      clickable: "",
      to: {
        hash: '#overview-of-pipeline-components'
      },
      onClick: _cache[1] || (_cache[1] = $event => $options.setActive('activeOverviewofPipelineComponents'))
    }, {
      default: withCtx(() => [createVNode(QItemSection, {
        class: "q-item-text"
      }, {
        default: withCtx(() => [createTextVNode("Overview of Pipeline Components")]),
        _: 1
      })]),
      _: 1
    }, 8, ["active"]), createVNode(QItem, {
      "inset-level": 0.5
    }, {
      default: withCtx(() => [createVNode(QList, {
        dense: ""
      }, {
        default: withCtx(() => [createVNode(QItem, {
          active: $data.activeRetrievalTrainingJobMetadata,
          "active-class": "text-bold",
          "manual-focus": "",
          dense: "",
          clickable: "",
          to: {
            hash: '#retrieval-of-training-job-metadata'
          },
          onClick: _cache[2] || (_cache[2] = $event => $options.setActive('activeRetrievalTrainingJobMetadata'))
        }, {
          default: withCtx(() => [createVNode(QItemSection, {
            class: "q-item-text"
          }, {
            default: withCtx(() => [createTextVNode("Retrieval of Training Job Metadata")]),
            _: 1
          })]),
          _: 1
        }, 8, ["active"]), createVNode(QItem, {
          active: $data.activeDataPreprocess,
          "active-class": "text-bold",
          "manual-focus": "",
          dense: "",
          clickable: "",
          to: {
            hash: '#data-pre-processing'
          },
          onClick: _cache[3] || (_cache[3] = $event => $options.setActive('activeDataPreprocess'))
        }, {
          default: withCtx(() => [createVNode(QItemSection, {
            class: "q-item-text"
          }, {
            default: withCtx(() => [createTextVNode("Data Pre-processing")]),
            _: 1
          })]),
          _: 1
        }, 8, ["active"]), createVNode(QItem, {
          "inset-level": 0.5
        }, {
          default: withCtx(() => [createVNode(QList, {
            dense: ""
          }, {
            default: withCtx(() => [createVNode(QItem, {
              active: $data.activeDataLoading,
              "active-class": "text-bold",
              "manual-focus": "",
              dense: "",
              clickable: "",
              to: {
                hash: '#1.-data-loading'
              },
              onClick: _cache[4] || (_cache[4] = $event => $options.setActive('activeDataLoading'))
            }, {
              default: withCtx(() => [createVNode(QItemSection, {
                class: "q-item-text"
              }, {
                default: withCtx(() => [createTextVNode("1. Data Loading")]),
                _: 1
              })]),
              _: 1
            }, 8, ["active", "to"]), createVNode(QItem, {
              active: $data.activeEDA,
              "active-class": "text-bold",
              "manual-focus": "",
              dense: "",
              clickable: "",
              to: {
                hash: '#2.-exploratory-data-analysis-(eda)'
              },
              onClick: _cache[5] || (_cache[5] = $event => $options.setActive('activeEDA'))
            }, {
              default: withCtx(() => [createVNode(QItemSection, {
                class: "q-item-text"
              }, {
                default: withCtx(() => [createTextVNode("2. Exploratory Data Analysis (EDA)")]),
                _: 1
              })]),
              _: 1
            }, 8, ["active", "to"]), createVNode(QItem, {
              "inset-level": 0.5
            }, {
              default: withCtx(() => [createVNode(QList, {
                dense: ""
              }, {
                default: withCtx(() => [createVNode(QItem, {
                  active: $data.activeDataTypeChecking,
                  "active-class": "text-bold",
                  "manual-focus": "",
                  dense: "",
                  clickable: "",
                  to: {
                    hash: '#2.1.-data-type-checking'
                  },
                  onClick: _cache[6] || (_cache[6] = $event => $options.setActive('activeDataTypeChecking'))
                }, {
                  default: withCtx(() => [createVNode(QItemSection, {
                    class: "q-item-text"
                  }, {
                    default: withCtx(() => [createTextVNode("2.1. Data Type Checking")]),
                    _: 1
                  })]),
                  _: 1
                }, 8, ["active", "to"]), createVNode(QItem, {
                  active: $data.activeDataCleaning,
                  "active-class": "text-bold",
                  "manual-focus": "",
                  dense: "",
                  clickable: "",
                  to: {
                    hash: '#2.2.-data-cleaning'
                  },
                  onClick: _cache[7] || (_cache[7] = $event => $options.setActive('activeDataCleaning'))
                }, {
                  default: withCtx(() => [createVNode(QItemSection, {
                    class: "q-item-text"
                  }, {
                    default: withCtx(() => [createTextVNode("2.2. Data Cleaning")]),
                    _: 1
                  })]),
                  _: 1
                }, 8, ["active", "to"])]),
                _: 1
              })]),
              _: 1
            }, 8, ["inset-level"]), createVNode(QItem, {
              active: $data.activeDataSplitting,
              "active-class": "text-bold",
              "manual-focus": "",
              dense: "",
              clickable: "",
              to: {
                hash: '#3.-data-splitting'
              },
              onClick: _cache[8] || (_cache[8] = $event => $options.setActive('activeDataSplitting'))
            }, {
              default: withCtx(() => [createVNode(QItemSection, {
                class: "q-item-text"
              }, {
                default: withCtx(() => [createTextVNode("3. Data Splitting")]),
                _: 1
              })]),
              _: 1
            }, 8, ["active", "to"]), createVNode(QItem, {
              active: $data.activeFeatureEngineering,
              "active-class": "text-bold",
              "manual-focus": "",
              dense: "",
              clickable: "",
              to: {
                hash: '#4.-feature-engineering'
              },
              onClick: _cache[9] || (_cache[9] = $event => $options.setActive('activeFeatureEngineering'))
            }, {
              default: withCtx(() => [createVNode(QItemSection, {
                class: "q-item-text"
              }, {
                default: withCtx(() => [createTextVNode("4. Feature Engineering")]),
                _: 1
              })]),
              _: 1
            }, 8, ["active", "to"]), createVNode(QItem, {
              active: $data.activeDataNormalizing,
              "active-class": "text-bold",
              "manual-focus": "",
              dense: "",
              clickable: "",
              to: {
                hash: '#5.-data-normalizing'
              },
              onClick: _cache[10] || (_cache[10] = $event => $options.setActive('activeDataNormalizing'))
            }, {
              default: withCtx(() => [createVNode(QItemSection, {
                class: "q-item-text"
              }, {
                default: withCtx(() => [createTextVNode("5. Data Normalizing")]),
                _: 1
              })]),
              _: 1
            }, 8, ["active", "to"])]),
            _: 1
          })]),
          _: 1
        }, 8, ["inset-level"]), createVNode(QItem, {
          active: $data.activeModelBuilding,
          "active-class": "text-bold",
          "manual-focus": "",
          dense: "",
          clickable: "",
          to: {
            hash: '#model-building'
          },
          onClick: _cache[11] || (_cache[11] = $event => $options.setActive('activeModelBuilding'))
        }, {
          default: withCtx(() => [createVNode(QItemSection, {
            class: "q-item-text"
          }, {
            default: withCtx(() => [createTextVNode("Model Building")]),
            _: 1
          })]),
          _: 1
        }, 8, ["active"]), createVNode(QItem, {
          "inset-level": 0.5
        }, {
          default: withCtx(() => [createVNode(QList, {
            dense: ""
          }, {
            default: withCtx(() => [createVNode(QItem, {
              active: $data.activeModelSelection,
              "active-class": "text-bold",
              "manual-focus": "",
              dense: "",
              clickable: "",
              to: {
                hash: '#model-selection'
              },
              onClick: _cache[12] || (_cache[12] = $event => $options.setActive('activeModelSelection'))
            }, {
              default: withCtx(() => [createVNode(QItemSection, {
                class: "q-item-text"
              }, {
                default: withCtx(() => [createTextVNode("Model Selection")]),
                _: 1
              })]),
              _: 1
            }, 8, ["active"]), createVNode(QItem, {
              active: $data.activeModelTraining,
              "active-class": "text-bold",
              "manual-focus": "",
              dense: "",
              clickable: "",
              to: {
                hash: '#model-training'
              },
              onClick: _cache[13] || (_cache[13] = $event => $options.setActive('activeModelTraining'))
            }, {
              default: withCtx(() => [createVNode(QItemSection, {
                class: "q-item-text"
              }, {
                default: withCtx(() => [createTextVNode("Model Training")]),
                _: 1
              })]),
              _: 1
            }, 8, ["active"]), createVNode(QItem, {
              active: $data.activeHyperparametersOptimization,
              "active-class": "text-bold",
              "manual-focus": "",
              dense: "",
              clickable: "",
              to: {
                hash: '#hyperparameters-optimization'
              },
              onClick: _cache[14] || (_cache[14] = $event => $options.setActive('activeHyperparametersOptimization'))
            }, {
              default: withCtx(() => [createVNode(QItemSection, {
                class: "q-item-text"
              }, {
                default: withCtx(() => [createTextVNode("Hyperparameters Optimization")]),
                _: 1
              })]),
              _: 1
            }, 8, ["active"]), createVNode(QItem, {
              active: $data.activeModelTesting,
              "active-class": "text-bold",
              "manual-focus": "",
              dense: "",
              clickable: "",
              to: {
                hash: '#model-testing'
              },
              onClick: _cache[15] || (_cache[15] = $event => $options.setActive('activeModelTesting'))
            }, {
              default: withCtx(() => [createVNode(QItemSection, {
                class: "q-item-text"
              }, {
                default: withCtx(() => [createTextVNode("Model Testing")]),
                _: 1
              })]),
              _: 1
            }, 8, ["active"])]),
            _: 1
          })]),
          _: 1
        }, 8, ["inset-level"]), createVNode(QItem, {
          active: $data.activeModelExporting,
          "active-class": "text-bold",
          "manual-focus": "",
          dense: "",
          clickable: "",
          to: {
            hash: '#model-exporting'
          },
          onClick: _cache[16] || (_cache[16] = $event => $options.setActive('activeModelExporting'))
        }, {
          default: withCtx(() => [createVNode(QItemSection, {
            class: "q-item-text"
          }, {
            default: withCtx(() => [createTextVNode("Model Exporting")]),
            _: 1
          })]),
          _: 1
        }, 8, ["active"])]),
        _: 1
      })]),
      _: 1
    }, 8, ["inset-level"])]),
    _: 1
  })])])]);
}
const sample = /*#__PURE__*/_export_sfc(_sfc_main, [['render', _sfc_render], ['__scopeId', "data-v-8204ac2e"]]);

export { sample as default };
