# 5.1 Build Web Application with Custom Model Endpoint

이번 실습에서는 [4.3 Deploy SageMaker Endpoint With Pretrained Model](/sagemaker-image-workshop/lab4.-use-your-own-model-or-algorithm/4.3-deploy-sagemaker-endpoint-with-pretrained-model.md) 또는 [4.4 Build SageMaker Pipelines with Custom Container](/sagemaker-image-workshop/lab4.-use-your-own-model-or-algorithm/4.4-build-sagemaker-pipelines-with-custom-container.md)에서 생성한 sageMaker endpoint를 이용하여 웹 어플리케이션을 만들어보도록 하겠습니다.

{% hint style="info" %}
이전 세션에서 MLOps까지 구성한 경우 ‘**groupname-prod**’ 라는 이름의 엔드포인트가 **in-service 상태**인지 확인이 필요합니다.

이전 세션에서 MLOps를 진행하지 않고 SageMaker Notebook에서 Custom model을 바로 배포한 경우 배포 시 설정한 모델의 엔드포인트가 **in-service 상태**인지 확인이 필요합니다..
{% endhint %}

이번 세션에서 생성할 웹 어플리케이션의 전체적인 아키텍처는 아래와 같습니다.

<figure><img src="/files/IemPiptFQBRiDGIMlb9p" alt=""><figcaption></figcaption></figure>

위 아키텍처의 흐름을 설명하면 아래와 같습니다.

> 1. 사용자는 브라우저를 이용하여 Amazon Api Gateway를 통해 AWS Lambda에 배포 된 Web Application에 접근한다.&#x20;
> 2. Amazon Cognito를 통해 접속한 사용자를 인증하고 관리합니다.
> 3. 브라우저를 통해 입력한 영상을 javascript SDK를 이용하여 재생시킨다.
> 4. Teacher / Student 영상이 모두 재생중이면, [4.3 Deploy SageMaker Endpoint With Pretrained Model](/sagemaker-image-workshop/lab4.-use-your-own-model-or-algorithm/4.3-deploy-sagemaker-endpoint-with-pretrained-model.md) 혹은 [4.4 Build SageMaker Pipelines with Custom Container](/sagemaker-image-workshop/lab4.-use-your-own-model-or-algorithm/4.4-build-sagemaker-pipelines-with-custom-container.md) 실습에서 생성한 SageMaker Endpoint로 프레임을 송신한다.
> 5. SageMaker Endpoint는 추론 결과(Bounding Box, Pose Coordination 등)를 반환하고, Teacher / Student 영상의 프레임 추론 결과 간 Post processing을 통해 유사도를 판별한다.
> 6. 계산 한 유사도(Total Score / 프레임 상태 카운트)를 출력한다.

이제 위 아키텍처에 구성된 서비스들을 이용하여 간단한 Serverless Web application을 구현해보도록 하겠습니다.

실습을 진행하기 위해 아래 소스코드를 다운로드합니다.

{% file src="/files/OOjfYPhLzuawVCbGmpY8" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cheolmin-ki.gitbook.io/sagemaker-image-workshop/lab5.-build-application-with-your-model/5.1-build-web-application-with-custom-model-endpoint.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.