Amazon Web Services - Using Custom UI Templates in SageMaker

Amazon SageMaker is a fully managed Machine Learning service provided by AWS that helps developers and data scientists build, train, and deploy machine learning models quickly and efficiently in the cloud.

• Provides tools for building, training, and deploying ML models.
• Supports real-time and batch predictions.
• Integrates with AWS services like Lambda, S3, and API Gateway.
• Helps automate Machine Learning workflows.
• Reduces infrastructure management for developers.

This project demonstrates how to deploy a Machine Learning model using Amazon SageMaker and integrate it with a custom web application using AWS services.

Steps

Step 1: Create a SageMaker Notebook

1. Open AWS Console.

2. Search for Amazon SageMaker AI in the AWS search bar and open the service.

3. Create a Notebook Instance

• Enter the notebook instance name as “sagemaker-custom-ui-lab”.
• Choose notebook instance type “ml.t2.medium”.
• Select an existing IAM role or create a new IAM role.
• Click “Create notebook instance”.
• Wait until status becomes "InService".

Step 2: Train a Simple Machine Learning Model in SageMaker

1. Open Jupyter Notebook.

• Click new and choose "conda_python3".

2. Run This Model

• First, run the following command in a new notebook cell to install the required libraries.

• Add a new Cell and Run this.

3. Download the Model file

• Click the Jupyter logo to open the file explorer.
• Locate the file named “model.joblib”.
• Select the file by checking the checkbox beside it.
• Click “Download” to save the file to your system.

Step 3: Upload the Model file to Amazon S3

• Open Amazon s3.
• Create a Bucket.
• Configure Bucket.
• Choose Name “sagemaker-custom-ui-username”.
• Keep default setting.
• Click on “Create bucket”.
• Open the Bucket.
• Upload Model file.
• Verify Upload.

Step 4: Deploy Model to SageMaker Endpoint

Important Note

SageMaker deployment requires:

• A model archive (model.tar.gz)
• An inference script (inference.py)

So first we will create these files inside Jupyter.

1. Create inference.py in a New Cell.

2. Create model.tar.gz

• Create another new cell and run.

• Download the model.tar.gz file.
• Upload the model.tar.gz on S3.
• Copy the S3 URI of model.tar.gz "s3://your-bucket-name/model.tar.gz".

3. Deploy Endpoint

• Create another new cell and run.
• Replace: "YOUR_S3_PATH" with the S3 URI that you copied.

4. Endpoint Testing

• Create another new cell and run.

Step 5: Create AWS Lambda function

• Open AWS lambda.
• Create function.

• Go to the “Configuration” tab and select “Permissions”.
• Click on the IAM Role name link under Execution Role.
• Click “Add permissions”.
• Select “Attach policies”.
• Search for “AmazonSageMakerFullAccess”.
• Select the policy and click “Add permissions”.

• Go back to Lambda function page.
• Replace the default code.

• Click “Deploy” and wait until the message “Successfully updated the function sagemaker-predict-function” appears.
• Click “Test”.
• Enter the Event Name as “test-event”.
• Paste the following test event code.
• Click “Save”.
• Click “Test” again to execute the Lambda function.

Step 6: Create API Gateway

• Open API Gateway.
• Click on “Create API”.
• Choose API type “Rest API”.
• API name “sagemaker-api”.
• Click “Create API”.

Step 7: Create POST Method

• Go to Resources and click “create resources”.
• Resource Name “predict”.
• Click “Create Resource”.
• Select /predict.
• Click “Create method”.
• Select POST.
• Choose Lambda function.
• Choose "sagemaker-predict-function".

• Enable CORS

• Click on “Deploy API”.
• Stage “new stage”.
• Stage Name “prod”.
• Click on “Deploy”.

• Copy the invoke URL.

Step 8: Create Custom HTML UI

• Open Notepad or VS Code.
• Create a index.html file.

• Replace YOUR_API_URL with your actual API Gateway invoke URL.
• Upload this index.html in your s3 bucket.
• Go to properties.
• Scroll down to Static Website Hosting and enable it.
• Go to permissions and disable “Block all public access”.
• Scroll to bucket policy and edit it.
• Paste this code.

Step 9: Test Application

• Go to properties of S3.
• Scroll to static website hosting.
• Copy the Bucket website endpoint.
• Pate the URL in your browser.
• Enter Input.
• Click “Predict”.

In the Iris dataset:

• [0] = Iris-setosa
• [1] = Iris-versicolor
• [2] = Iris-virginica

Related Articles

• AWS Sagemaker
• AWS API Gateway
• AWS Lambda
• AWS S3