Bug in ADK web when load artifact to display images.

[NBestsuNgan]

my config
"google-adk==1.14.0",
"google-genai==1.37.0",
"google-cloud-aiplatform[evaluation,agent-engines]~=1.119.0",

it have worked before but now it can't display artifact correctly in adk web, but it send artifact name with artifact_delta in a invocation payload correctly and front end can catch those link to display image. just, wonder why not it can not display in adk web.

[adk-bot]

Response from ADK Answering Agent (experimental, answer may be inaccurate)

TLDR: Starting with google-adk version 1.2.0, the ADK web UI now relies on the mime_type of an artifact to render it correctly. Please ensure that when you save an image artifact, you are setting the mime_type (e.g., 'image/png', 'image/jpeg') on the Part object.

---

Hello @NBestsuNgan,

Thank you for reaching out. You've encountered an issue that is likely due to a change introduced in version 1.2.0 of the google-adk library.

Previously, the ADK web interface might have used different heuristics to identify and render images. However, to make rendering more robust and standardized, this was changed. As noted in the changelog for version 1.2.0, the web UI now uses the mime_type of the artifact to determine how to display it. [1]

The issue you're seeing is the typical browser behavior for a broken image link, which happens when the UI doesn't recognize the artifact as an image because the mime_type is likely missing or incorrect.

To fix this, you need to make sure you are setting the appropriate mime_type when you create the artifact. Here is an example of how to correctly save an image artifact:

import google.genai.types as types
from google.adk.agents.callback_context import CallbackContext

# Assume 'image_bytes' contains your image data in bytes
# and 'context' is your available CallbackContext or ToolContext.

# Create a Part object with the image data and the correct mime_type.
# For example, 'image/png' or 'image/jpeg'.
image_part = types.Part.from_data(
    data=image_bytes,
    mime_type="image/png"  # Or "image/jpeg", etc.
)

# Save the artifact
try:
    version = await context.save_artifact(
        filename="my_image.png",
        artifact=image_part
    )
    print(f"Successfully saved image artifact, version: {version}")
except ValueError as e:
    print(f"Error saving artifact: {e}")

You can find more details on working with artifacts in the official documentation. [2]

Please check your code where the artifact is being saved and ensure the mime_type is being set correctly. This should resolve the display issue in the ADK web interface.

Let us know if you have any other questions.

[1] https://github.com/google/adk-python/blob/main/CHANGELOG.md
[2] https://google.github.io/adk-docs/artifacts/

[NBestsuNgan]

file_extension = file_name.split(".")[-1]
if file_extension.lower() in ('jpg', 'jpeg'):
    image_artifact = types.Part(
        inline_data=types.Blob(data=image_bytes, mime_type="image/jpeg")
    )
elif file_extension.lower() in ('png'):
    image_artifact = types.Part(
        inline_data=types.Blob(data=image_bytes, mime_type="image/png")
    )

artifact_version = await tool_context.save_artifact(
    filename=gcs_uri, artifact=image_artifact
)

H AI, I think I handler it correctly but it still don't display as before, and i think from_data is not have in types too.