Image/Audio is not render

[chansinhui]

I had set up the langfuse v2.92.0 and minio in my local environment to trace media and audio files.
In langfuse, both image and audio are not render on UI.

can see the audio is 00:00 on the screenshot above, but I can download the wav files from minio.

while for image, the UI render the URL instead of the image.

Another question is, if we delete the image from Minio, the langfuse can't perform the re-upload and showed the previous url which has been deleted. Any guidance to allow re-upload of the image if it has been deleted from s3?

[dosubot[bot]]

Hey @chansinhui! I'm here to help you with any bugs, questions, or contributions. Let's tackle this together!

To address the issue of images and audio not rendering in the Langfuse UI, ensure the following configurations are correctly set up:

1. MinIO Configuration: Verify that your MinIO setup is correctly configured with the necessary environment variables. Ensure that LANGFUSE_S3_MEDIA_UPLOAD_ENABLED is set to true, and other related variables like LANGFUSE_S3_MEDIA_UPLOAD_BUCKET, LANGFUSE_S3_MEDIA_UPLOAD_ACCESS_KEY_ID, and LANGFUSE_S3_MEDIA_UPLOAD_SECRET_ACCESS_KEY are correctly set. The endpoint should be accessible, and LANGFUSE_S3_MEDIA_UPLOAD_FORCE_PATH_STYLE should be true for MinIO ^[1].

2. Media Rendering: Langfuse uses the LangfuseMediaView component to fetch and display media files. Ensure that the media URLs are correctly generated and accessible. The media files should be in supported formats (e.g., .png, .jpg, .webp for images and .mpeg, .mp3, .wav for audio) ^[2].

3. URL Handling: If the UI is displaying URLs instead of rendering the media, check if the URLs are correctly pointing to the media files and are accessible from the browser. The URLs should be publicly resolvable.

Regarding the re-upload of deleted media files, Langfuse does not have a built-in feature to automatically re-upload media files if they are deleted from MinIO. You would need to manually re-upload the files and update the references in Langfuse. There is currently no automatic mechanism to handle missing media files or to re-upload them if they are deleted from the storage backend ^[1].

To continue talking to Dosu, mention @dosu.

[chansinhui]

Thanks. I had made it accessible from browser now but it still displaying the URLs instead of rendering the media. when I click the URLs it will open another tab instead of just rendering inside the langfuse UI, while for the audio file, it still showing empty audio on the widget but I can see the wav files in Minio.

[chansinhui]

in 'JSON' tab, when I clicked on the embedded widget of media, it can be play by clicking on and open with another browser page as showed below. However in 'Pretty' tab, it can't be play and show empty.
JSON tab:

Pretty tab:

[hassiebp]

@chansinhui Could you please send an example trace to Langfuse cloud and share the trace Id / link?

Another question is, if we delete the image from Minio, the langfuse can't perform the re-upload and showed the previous url which has been deleted. Any guidance to allow re-upload of the image if it has been deleted from s3?

Files should not be 'manually' deleted from the storage bucket as no sync of the bucket's contents is made with the application state. In development, you'd need to additionally delete the corresponding record in the media table in postgres to allow for reuploads.

[hassiebp]

Also, I noticed that in your image URL on the screenshot above the minio host and port is 0.0.0.0:9000. Could you please change that to localhost:9000?

[chansinhui]

hmm I try the self host using v3 then seems able to render the image and audio in 'pretty' tab.
in previous v2.92.0 local deployment, there is no error/logs when pressing play button. I tested with '0.0.0.0:9000' and '127.0.0.1:9000' then able to upload the media files to minio and langfuse. if I using 'localhost' the presigned url generated will become 'http://langfuse.localhost:9000...' which is incorrect.

[hassiebp]

Have you set the env variable LANGFUSE_S3_MEDIA_UPLOAD_FORCE_PATH_STYLE=true? This is required for the minio setup.

So do I understand you correctly that with the v3 image everything works as expected?

[chansinhui]

yes. I did set LANGFUSE_S3_MEDIA_UPLOAD_FORCE_PATH_STYLE=true. Yaya, with v3 is working fine. thanks!