logo
Menu
Watch: Hands on with Haiku on Amazon Bedrock

Watch: Hands on with Haiku on Amazon Bedrock

Anthropic launched Claude 3 Haiku, and it's easy to get started using it on Amazon Bedrock - Prompt with text and image.

Mike Chambers
Amazon Employee
Published Mar 14, 2024
Last Modified Mar 15, 2024
Anthropic launched Claude 3 Haiku, I got really excited, so I pressed record and had a play.
In this video I walk through how to:
πŸ‘‰ Setup access to Claude 3 Haiku in Amazon Bedrock
πŸ‘‰ Use the Amazon Bedrock playground to experiment with text and images.
πŸ‘‰ Write some NodeJS code* that sends a text prompt to Haiku.
πŸ‘‰ Write some more NodeJS code* that sends text AND an image to Haiku.
(Video is vertical for mobile, if you're on desktop consider clicking through to YouTube.)

Links and Resources

And here is the code that I wrote in the video:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
// Adapted from code here: https://docs.aws.amazon.com/code-library/latest/ug/bedrock-runtime_code_examples_actions.html

// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0

import { fileURLToPath } from "url";

import {
AccessDeniedException,
BedrockRuntimeClient,
InvokeModelCommand,
} from "@aws-sdk/client-bedrock-runtime";

import fs from 'fs/promises';

// Function to load an image and convert it to Base64
async function loadImageAsBase64(filePath) {
try {
// Read the file content in binary format
const data = await fs.readFile(filePath);
// Convert the binary data to a Base64 string
const base64String = data.toString('base64');
return base64String;
} catch (error) {
console.error('Error loading the image:', error);
throw error; // Rethrow to handle it in the caller
}
}

/**
* @typedef {Object} ResponseBody
* @property {string} completion
*/


/**
* Invokes the Anthropic Claude 3 model to run an inference using the input
* provided in the request body.
*
* @param {string} prompt - The prompt that you want Claude to complete.
* @param {string} imagePath - The path to the image that you want to send to Claude.
* @returns {string} The inference response (completion) from the model.
*/

export const invokeClaude = async (prompt, imagePath) => {
const client = new BedrockRuntimeClient({ region: "us-east-1" });

const modelId = "anthropic.claude-3-haiku-20240307-v1:0";

const imageBase64 = await loadImageAsBase64(imagePath);

/* The different model providers have individual request and response formats.
* For the format, ranges, and default values for Anthropic Claude, refer to:
* https://docs.aws.amazon.com/bedrock/latest/userguide/model-parameters-claude.html
*/

const payload = {
messages: [
{
role: "user",
content: [
{
type: "image",
source: {
type: "base64",
media_type: "image/jpeg",
data: imageBase64
}
},
{
"type": "text",
"text": prompt
}
]
}
],
max_tokens: 500,
temperature: 0.5,
anthropic_version: "bedrock-2023-05-31"
};

const command = new InvokeModelCommand({
body: JSON.stringify(payload),
contentType: "application/json",
accept: "application/json",
modelId,
});

try {
const response = await client.send(command);
const decodedResponseBody = new TextDecoder().decode(response.body);

/** @type {ResponseBody} */
const responseBody = JSON.parse(decodedResponseBody);

return responseBody.content[0].text;
} catch (err) {
if (err instanceof AccessDeniedException) {
console.error(
`Access denied. Ensure you have the correct permissions to invoke ${modelId}.`,
);
} else {
throw err;
}
}
};

// Invoke the function if this file was run directly.
if (process.argv[1] === fileURLToPath(import.meta.url)) {
const prompt = 'Where was this image taken?';
const imagePath = 'image.jpg';

console.log("\nModel: Anthropic Claude v3");
console.log(`Prompt: ${prompt}`);

const completion = await invokeClaude(prompt, imagePath);
console.log("Completion:");
console.log(completion);
console.log("\n");
}
I am a Senior Developer Advocate for Amazon Web Services, specialising in Generative AI. You can reach me directly through LinkedIn, come and connect, and help grow the community.
Thanks - Mike
Β 

Any opinions in this post are those of the individual author and may not reflect the opinions of AWS.

1 Comment