docs & test for image URL fetching

Author: 0slb

docs/language/components.md

@@ -773,7 +773,7 @@ Note that syntax must be specified as `multimedia` to show the image.
 
 #### Parameters
 
-- **src**: The path to the image file.
+- **src**: The path or URL to the image file.
 - **alt**: The alternative text to show when the image cannot be displayed.
 - **base64**: The base64 encoded image data. It can not be specified together with `src`.
 - **type**: The MIME type of the image **to be shown**. If not specified, it will be inferred from the file extension.

examples/104_financial_analysis.poml

@@ -23,7 +23,7 @@ Given the stock ticker, provide a full and up-to-date financial analysis coverin
 
 <img src="assets/104_chart_price.png" syntax="multimedia" />
 
-<img src="assets/104_chart_normalized_price.png" syntax="multimedia" />
+<img src="https://raw.githubusercontent.com/microsoft/poml/refs/heads/main/examples/assets/104_chart_normalized_price.png" syntax="multimedia" />
 
 <Hint>
 The table contains stock tickers of 7 companies. Please analyze and give financial analysis and comparison for them.

packages/poml/assets/componentDocs.json

@@ -1433,7 +1433,7 @@
         "name": "src",
         "type": "string",
         "choices": [],
-        "description": "The path to the image file.",
+        "description": "The path or URL to the image file.",
         "required": false
       },
       {

packages/poml/essentials.tsx

@@ -667,7 +667,7 @@ interface ImageProps extends PropsSyntaxBase, MultiMedia.ImageProps {
  *
  * @see {@link Inline} for other props available.
  *
- * @param {string} src - The path to the image file.
+ * @param {string} src - The path or URL to the image file.
  * @param {string} alt - The alternative text to show when the image cannot be displayed.
  * @param {string} base64 - The base64 encoded image data. It can not be specified together with `src`.
  * @param {string} type - The MIME type of the image **to be shown**. If not specified, it will be inferred from the file extension.

packages/poml/tests/util.test.tsx

@@ -57,6 +57,7 @@ describe('content', () => {
 
 describe('preprocessImage', () => {
   const sampleImagePath = __dirname + '/assets/tomCat.jpg';
+  const sampleImageURL = 'https://raw.githubusercontent.com/microsoft/poml/refs/heads/main/packages/poml/tests/assets/tomCat.jpg';
   const sampleImageBase64 = readFileSync(sampleImagePath).toString('base64');
 
   test('should process an image from a supported file path', async () => {
@@ -73,6 +74,12 @@ describe('preprocessImage', () => {
     expect(metadata.format).toBe('png');
   });
 
+  test('should process an image from an URL', async () => {
+    const result = await preprocessImage({ src: sampleImageURL });
+    expect(result.base64).toBeTruthy();
+    expect(result.mimeType).toBe('image/jpeg');
+  });
+
   test('should resize the image with the resize parameter', async () => {
     const result = await preprocessImage({ base64: sampleImageBase64, type: 'png', resize: 0.5 });
     expect(result.base64).toBeTruthy();

python/poml/_tags.py

@@ -1202,7 +1202,7 @@ def image(
         Note that syntax must be specified as `multimedia` to show the image.
 
         Args:
-            src (Optional[str]): The path to the image file.
+            src (Optional[str]): The path or URL to the image file.
             alt (Optional[str]): The alternative text to show when the image cannot be displayed.
             base64 (Optional[str]): The base64 encoded image data. It can not be specified together with `src`.
             type (Optional[str]): The MIME type of the image **to be shown**. If not specified, it will be inferred from the file extension.