Amazon Rekognitionに接続して画像分析APIを使用する

npm add @aws-sdk/client-rekognition

import { defineStorage } from '@aws-amplify/backend';

export const storage = defineStorage({
  name: 'predictions_gen2'
});

import { PolicyStatement } from 'aws-cdk-lib/aws-iam';
import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource';
import { data } from './data/resource';
import { storage } from './storage/resource';

const backend = defineBackend({
 auth,
 data,
 storage
});

// Set environment variables for the S3 Bucket name
backend.data.resources.cfnResources.cfnGraphqlApi.environmentVariables = {
 S3_BUCKET_NAME: backend.storage.resources.bucket.bucketName,
};

const rekognitionDataSource = backend.data.addHttpDataSource(
 "RekognitionDataSource",
 `https://rekognition.${backend.data.stack.region}.amazonaws.com`,
 {
   authorizationConfig: {
     signingRegion: backend.data.stack.region,
     signingServiceName: "rekognition",
   },
 }
);

rekognitionDataSource.grantPrincipal.addToPrincipalPolicy(
 new PolicyStatement({
   actions: ["rekognition:DetectText", "rekognition:DetectLabels"],
   resources: ["*"],
 })
);

backend.storage.resources.bucket.grantReadWrite(
 rekognitionDataSource.grantPrincipal
);

export function request(ctx) {
  return {
    method: "POST",
    resourcePath: "/",
    params: {
      body: {
        Image: {
          S3Object: {
            Bucket: ctx.env.S3_BUCKET_NAME,
            Name: ctx.arguments.path,
          },
        },
      },
      headers: {
        "Content-Type": "application/x-amz-json-1.1",
        "X-Amz-Target": "RekognitionService.DetectText",
      },
    },
  };
}

export function response(ctx) {
  return JSON.parse(ctx.result.body)
    .TextDetections.filter((item) => item.Type === "LINE")
    .map((item) => item.DetectedText)
    .join("\n")
    .trim();
}

import { type ClientSchema, a, defineData } from "@aws-amplify/backend";

const schema = a.schema({
  identifyText: a
    .query()
    .arguments({
      path: a.string(),
    })
    .returns(a.string())
    .authorization((allow) => [allow.publicApiKey()])
    .handler(
      a.handler.custom({
        entry: "./identifyText.js",
        dataSource: "RekognitionDataSource",
      })
    ),
});

export type Schema = ClientSchema<typeof schema>;

export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: "apiKey",
    apiKeyAuthorizationMode: {
      expiresInDays: 30,
    },
  },
});

import { defineStorage } from "@aws-amplify/backend"

export const storage = defineStorage({
  name: "predictions_gen2",
  access: allow => ({
    'public/*': [
      allow.guest.to(['list', 'write', 'get'])
    ]
  })
})

import { Amplify } from "aws-amplify";
import outputs from "../amplify_outputs.json";

Amplify.configure(outputs);

import type { Schema } from '../../../amplify/data/resource';
import { Component } from '@angular/core';
import { generateClient } from 'aws-amplify/api';
import { uploadData } from 'aws-amplify/storage';
import { CommonModule } from '@angular/common';

// Generating the client
const client = generateClient<Schema>();

type IdentifyTextReturnType = Schema['identifyText']['returnType'];

@Component({
  selector: 'app-text-recognition',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div>
      <h1>Amazon Rekognition Text Recognition</h1>
      <div>
        <input type="file" (change)="handleTranslate($event)" />
        <button (click)="recognizeText()">Recognize Text</button>
        <div>
          <h3>Recognized Text:</h3>
          {{ textData }}
        </div>
      </div>
    </div>
  `,
})
export class TodosComponent {
  // Component properties instead of React state
  path: string = '';
  textData?: IdentifyTextReturnType;

  // Function to handle file upload to S3 bucket
  async handleTranslate(event: Event) {
    const target = event.target as HTMLInputElement;
    if (target.files && target.files.length > 0) {
      const file = target.files[0];
      const s3Path = 'public/' + file.name;

      try {
        await uploadData({
          path: s3Path,
          data: file,
        });

        this.path = s3Path;
      } catch (error) {
        console.error(error);
      }
    }
  }

  // Function to recognize text from the uploaded image
  async recognizeText() {
    // Identifying text in the uploaded image
    const { data } = await client.queries.identifyText({
      path: this.path, // File name
    });
    this.textData = data;
  }
}