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 = `

#### **Overview of Model Serving Process**

![MarineGEO circle logo](/images/serving_process.png#serving_process)

- User Interface 
    - The D2 system provides a separate user interface for each serving endpoint API. Users can access it through the list of serving endpoint API page.
    - Upon accessing the page, users are required to provide a sample input in the input box. This sample input serves as the data on which the model will be based to make the desired forecast.
- Retrieve model information
    - Based on the serving endpoint, D2 can retrieve metadata to load the model with the corresponding checkpoint queried from the system storage.
- Data pre-processing
    - Perform two steps of data processing: feature engineering and data normalization.
- Generate forecasting result
    - Input the processed data into the model, obtain the result, and then rescale the output data.
- Server response with forecasting result
    - Send the forecasting result to the User Interface along with a visualization graph of the result.

#### **Testing Endpoint API**

##### ***Request body***

![MarineGEO circle logo](/images/testing_serving_api_request.png#testing_serving_api_request)

1. Set Parameters: These parameters are essential metadata that the system requires to query the model checkpoint. The following parameters need to be set:
- Training ID: The unique identifier for the training job.
- Model ID: The identifier for the trained model. 

![MarineGEO circle logo](/images/testing_serving_api_request_set_parameters.png#testing_serving_api_request_set_parameters)

2. Data Sample Input Box

![MarineGEO circle logo](/images/testing_serving_api_request_input_data.png#testing_serving_api_request_input_data)

This section allows users to input the sample data on which the model will be based to make the forecast. The sample data should be provided in JSON format, as shown below:
> \`\`\`
> [
>       {
>           "date" : { value }
>           "target_variable_name" : { value }
>           "covariate_variable_1" : { value }
>           "covariate_variable_2" : { value }
>           "covariate_variable_3" : { value }
>           "..." : { value }
>       },
>       {
>           ...
>       }
> ]
> \`\`\`

To make the request to the server, click \`\`\` \`Excecute\` \`\`\` button.

![MarineGEO circle logo](/images/testing_serving_api_request_input_data_execute_btn.png#testing_serving_api_request_input_data_execute_btn)

##### ***Response data***

![MarineGEO circle logo](/images/testing_serving_api_response.png#testing_serving_api_response)

1. Response body data: The server responds with data in JSON format, containing the following keys:

> \`\`\`
> [
>       {
>           "status" : { value } // The status of the server response.
>           "took" : { value } // The amount of time taken to generate the forecast.
>           "data" : [ { value } ] // The forecast values as JSON format.
>       }
> ]
> \`\`\`

2. Forecasting visualization plot: shows a visualization plot that displays the input values along with the corresponding forecasting values generated by the model.

![MarineGEO circle logo](/images/testing_serving_api_response_plot.png#testing_serving_api_response_plot)

`;

const index_vue_vue_type_style_index_0_scoped_ad1c853a_lang = '';

const _sfc_main = {
  components: {
    MarkdownViewer
  },
  data() {
    return {
      value: content,
      activeOvewviewofModelServingProcess: true,
      activeTestingEndpointAPI: false,
      activeRequestBody: false,
      activeResponseData: false
    };
  },
  methods: {
    setActive(section) {
      this.activeOvewviewofModelServingProcess = false;
      this.activeTestingEndpointAPI = false;
      this.activeRequestBody = false;
      this.activeResponseData = false;
      if (section == 'activeOvewviewofModelServingProcess') {
        this.activeOvewviewofModelServingProcess = true;
      } else if (section == 'activeTestingEndpointAPI') {
        this.activeTestingEndpointAPI = true;
      } else if (section == 'activeRequestBody') {
        this.activeRequestBody = true;
      } else if (section == 'activeResponseData') {
        this.activeResponseData = true;
      }
    }
  },
  mounted() {
    window.scrollTo(0, 0);
  }
};
const _withScopeId = n => (pushScopeId("data-v-ad1c853a"), 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, "How to use", -1));
const _hoisted_7 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("span", null, "Testing Serving Endpoint Apis", -1));
const _hoisted_8 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("div", {
  class: "title"
}, [/*#__PURE__*/createBaseVNode("span", null, "Testing serving endpoint API")], -1));
const _hoisted_9 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createBaseVNode("div", {
  class: "subtitle"
}, [/*#__PURE__*/createBaseVNode("span", null, "Turtorial for testing serving endpoint API")], -1));
const _hoisted_10 = {
  class: "col-3"
};
const _hoisted_11 = {
  style: {
    "position": "sticky",
    "top": "20px",
    "color": "#888888"
  }
};
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/how-to-use"
    }, {
      default: withCtx(() => [_hoisted_6]),
      _: 1
    }), createVNode(QBreadcrumbsEl, {
      to: "/docs/how-to-use/starting-training-procedure"
    }, {
      default: withCtx(() => [_hoisted_7]),
      _: 1
    })]),
    _: 1
  })])]), _hoisted_8, _hoisted_9, createVNode(QSeparator), createBaseVNode("div", null, [createVNode(_component_markdown_viewer, {
    value: $data.value
  }, null, 8, ["value"])])]), createBaseVNode("div", _hoisted_10, [createBaseVNode("div", _hoisted_11, [createVNode(QList, {
    dense: ""
  }, {
    default: withCtx(() => [createVNode(QItem, {
      active: $data.activeOvewviewofModelServingProcess,
      "active-class": "text-bold",
      "manual-focus": "",
      dense: "",
      clickable: "",
      to: {
        hash: '#overview-of-model-serving-process'
      },
      onClick: _cache[0] || (_cache[0] = $event => $options.setActive('activeOvewviewofModelServingProcess'))
    }, {
      default: withCtx(() => [createVNode(QItemSection, {
        class: "q-item-text"
      }, {
        default: withCtx(() => [createTextVNode("Overview of Model Serving Process")]),
        _: 1
      })]),
      _: 1
    }, 8, ["active"]), createVNode(QItem, {
      active: $data.activeTestingEndpointAPI,
      "active-class": "text-bold",
      "manual-focus": "",
      dense: "",
      clickable: "",
      to: {
        hash: '#testing-endpoint-api'
      },
      onClick: _cache[1] || (_cache[1] = $event => $options.setActive('activeTestingEndpointAPI'))
    }, {
      default: withCtx(() => [createVNode(QItemSection, {
        class: "q-item-text"
      }, {
        default: withCtx(() => [createTextVNode("Testing Endpoint API")]),
        _: 1
      })]),
      _: 1
    }, 8, ["active"]), createVNode(QItem, {
      "inset-level": 0.5
    }, {
      default: withCtx(() => [createVNode(QItemSection, {
        class: "q-item-text"
      }, {
        default: withCtx(() => [createVNode(QList, {
          dense: ""
        }, {
          default: withCtx(() => [createVNode(QItem, {
            active: $data.activeRequestBody,
            "active-class": "text-bold",
            "manual-focus": "",
            dense: "",
            clickable: "",
            to: {
              hash: '#request-body'
            },
            onClick: _cache[2] || (_cache[2] = $event => $options.setActive('activeRequestBody'))
          }, {
            default: withCtx(() => [createVNode(QItemSection, {
              class: "q-item-text"
            }, {
              default: withCtx(() => [createTextVNode("Request Body")]),
              _: 1
            })]),
            _: 1
          }, 8, ["active"]), createVNode(QItem, {
            active: $data.activeResponseData,
            "active-class": "text-bold",
            "manual-focus": "",
            dense: "",
            clickable: "",
            to: {
              hash: '#response-data'
            },
            onClick: _cache[3] || (_cache[3] = $event => $options.setActive('activeResponseData'))
          }, {
            default: withCtx(() => [createVNode(QItemSection, {
              class: "q-item-text"
            }, {
              default: withCtx(() => [createTextVNode("Response Data")]),
              _: 1
            })]),
            _: 1
          }, 8, ["active"])]),
          _: 1
        })]),
        _: 1
      })]),
      _: 1
    }, 8, ["inset-level"])]),
    _: 1
  })])])]);
}
const index = /*#__PURE__*/_export_sfc(_sfc_main, [['render', _sfc_render], ['__scopeId', "data-v-ad1c853a"]]);

export { index as default };
