-
Notifications
You must be signed in to change notification settings - Fork 132
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update defImages function to support multiple file types and handle Blob conversion #705
Changes from all commits
94572ec
01a22ff
6ce6a75
0a7f203
88b39f0
9e485bf
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,100 @@ | ||
--- | ||
title: Images in Azure Blob Storage | ||
sidebar: | ||
order: 55 | ||
description: Leverage Azure SDK to handle image files in Blob Storage within prompts | ||
keywords: Azure Blob Storage, Azure SDK, image handling, Node.js Buffer, inline prompts | ||
|
||
--- | ||
|
||
import { Code } from '@astrojs/starlight/components'; | ||
import { Steps } from "@astrojs/starlight/components" | ||
import source from "../../../../../packages/sample/genaisrc/azure-blobs.genai.mts?raw" | ||
|
||
It is possible to use the Azure Node.JS SDK to download images from Azure Blog Storage | ||
and use them in the prompt. The `defImages` function support the node.js [Buffer] type. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The function name
|
||
|
||
## Configuration | ||
|
||
Install the [@azure/storage-blob](https://www.npmjs.com/package/@azure/storage-blob) and [@azure/identity](https://www.npmjs.com/package/@azure/identity) packages. | ||
|
||
```sh | ||
npm install -D @azure/storage-blob @azure/identity | ||
``` | ||
|
||
Make sure to login with the Azure CLI and set the subscription. | ||
|
||
```sh | ||
az login | ||
``` | ||
|
||
## Reading blobs | ||
|
||
Open a connection to the Azure Blob Storage and get a client to the container. | ||
We deconstruct the `account` and `container` from the `env.vars` object | ||
so that they can be set through the [cli](/genaiscript/reference/cli). | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The link provided for
|
||
|
||
```ts | ||
import { BlobServiceClient } from "@azure/storage-blob" | ||
import { DefaultAzureCredential } from "@azure/identity" | ||
|
||
const { account = "myblobs", container = "myimages" } = env.vars | ||
const blobServiceClient = new BlobServiceClient( | ||
`https://${account}.blob.core.windows.net`, | ||
new DefaultAzureCredential() | ||
) | ||
const containerClient = blobServiceClient.getContainerClient(container) | ||
``` | ||
|
||
If you do not have a specific blob in mind, you can iterate through the blobs, | ||
and download them into a buffer (`buf`). | ||
|
||
```ts "image" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The code fence "image" is incorrect or unnecessary, it should be removed.
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The code comment "image" seems to be misplaced or incorrect.
|
||
import { buffer } from "node:stream/consumers" | ||
|
||
for await (const blob of containerClient.listBlobsFlat()) { | ||
const blockBlobClient = containerClient.getBlockBlobClient(blob.name) | ||
const downloadBlockBlobResponse = await blockBlobClient.download(0) | ||
const body = await downloadBlockBlobResponse.readableStreamBody | ||
const image = await buffer(body) | ||
... | ||
``` | ||
|
||
## Using images in the prompt | ||
|
||
The `image` buffer can be passed in `defImages` to be used in the prompt. | ||
|
||
```ts | ||
defImages(image, { detail: "low" }) | ||
``` | ||
|
||
However since images can be "heavy", you will most likely have to use | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The sentence "However since images can be 'heavy', you will most likely have to use" could be clarified to specify that "heavy" refers to large file sizes which may require more processing time or resources.
|
||
[inline prompts](/genaiscript/reference/prompts/inline-prompts) to split into smaller queries. (Note the use of `_.`) | ||
|
||
```ts 'await runPrompt(_ =>' '_.' | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There is a syntax error in the code snippet, the single quotes and backticks are not correctly paired.
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The code fence 'await runPrompt(_ =>' ' _.' is incorrect or unnecessary, it should be removed.
|
||
for await (const blob of containerClient.listBlobsFlat()) { | ||
... | ||
const res = await runPrompt(_ => { | ||
_.defImages(image, { detail: "low" }) | ||
_.$`Describe the image.` | ||
}) | ||
// res contains the LLM response for the inner prompt | ||
... | ||
``` | ||
|
||
## Summarizing results | ||
|
||
To summarize all images, we store each image summary using the `def` function and | ||
add prompting to summarize the descriptions. | ||
|
||
```ts | ||
... | ||
def("IMAGES_SUMMARY", { filename: blob.name, content: res.text }) | ||
} | ||
$`Summarize IMAGES_SUMMARY.` | ||
``` | ||
|
||
## Full source | ||
|
||
<Code code={source} wrap={true} lang="js" title="azure-blobs.genai.mts" /> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The variable
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -15,3 +15,29 @@ | |
``` | ||
|
||
Read more about [OpenAI Vision](https://platform.openai.com/docs/guides/vision/limitations). | ||
|
||
## URLs | ||
|
||
Public URLs (that do not require authentication) will be passed directly to OpenAI. | ||
|
||
```js | ||
defImages( | ||
"https://github.com/microsoft/genaiscript/blob/main/docs/public/images/logo.png?raw=true" | ||
) | ||
``` | ||
|
||
Local files are loaded and encoded as a data uri. | ||
|
||
## Buffer, Blob | ||
|
||
The `defImages` function also supports [Buffer](https://nodejs.org/api/buffer.html) | ||
and [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob). | ||
|
||
|
||
This example takes a screenshot of bing.com and adds it to the images. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Typo in the word "bing.com", should be "Bing.com" as it is a proper noun.
|
||
|
||
```js | ||
const page = await host.browse("https://bing.com") | ||
const screenshot = await page.screenshot() // returns a node.js Buffer | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The function 'page.screenshot' is used but not defined in the documentation. There should be a definition or reference for it.
|
||
defImages(screenshot) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The function 'host.browse' is used but not defined in the documentation. There should be a definition or reference for it.
|
||
``` |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There is a typo in "Blog" which should be "Blob".