The goal of this project is to upload an image via a web interface and get labels (e.g., "Dog", "Car", "Beach") from AWS Rekognition.

What will be used

• S3: To store uploaded images.
• Rekognition: To analyze the images and return labels.
• Lambda: To trigger the analysis.
• API Gateway: To invoke the Lambda function via HTTP.

Create an S3 Bucket

Go to the S3 Console.

Create a new bucket (e.g., image-labeling-demo).

Enable public access if using it for hosting.

Enable CORS (in the bucket settings):

[
  {
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["GET", "PUT", "POST"],
    "AllowedOrigins": ["*"],
    "ExposeHeaders": []
  }
]

Create a Lambda Function

Go to the Lambda Console.

Create a new function (e.g., LabelImageFunction).

Give it permission to read from S3 and use Rekognition by attaching the following policy:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "rekognition:DetectLabels",
        "s3:GetObject"
      ],
      "Resource": "*"
    }
  ]
}

Define the lambda function:

import boto3
import json

rekognition = boto3.client('rekognition')

def lambda_handler(event, context):
    # Image info from request
    bucket = event['queryStringParameters']['bucket']
    image_key = event['queryStringParameters']['key']
    
    response = rekognition.detect_labels(
        Image={
            'S3Object': {
                'Bucket': bucket,
                'Name': image_key
            }
        },
        MaxLabels=10
    )
    
    return {
        'statusCode': 200,
        'headers': {'Content-Type': 'application/json'},
        'body': json.dumps(response['Labels'])
    }

Set Up API Gateway

• Create a new HTTP API.
• Add a route: GET /analyze.
• Connect it to your Lambda function.
• Deploy and note the Invoke URL.

Build a Simple HTML Frontend

Save the following as index.html and host it on S3 or test locally:

<input type="file" id="fileInput">
<button onclick="uploadAndAnalyze()">Analyze</button>
<pre id="output"></pre>

<script>
async function uploadAndAnalyze() {
    const file = document.getElementById('fileInput').files[0];
    const fileName = file.name;

    // Upload to S3
    await fetch(`https://your-bucket.s3.amazonaws.com/${fileName}`, {
        method: "PUT",
        body: file
    });

    // Call the Lambda via API Gateway
    const response = await fetch(`https://your-api-id.amazonaws.com/analyze?bucket=your-bucket&key=${fileName}`);
    const labels = await response.json();

    document.getElementById("output").textContent = JSON.stringify(labels, null, 2);
}
</script>

I gave a more detailed explanation about how to host static website in S3 here in the part named "Build the Frontend".