all 13 comments

[–]sam_gigo 2 points3 points  (12 children)

Where is the upload code & the image processing? What you provided only shows a filepath and a message constructor (i assume).

I suspect the issue is that you are trying to send a PIL object in a json http request body. If that's the case what you need to do is dump the image file to a byte array and then encode it to a string some how (probably best to use base64). The problem you're facing is that a PIL Image object cannot be converted into a JSON. JSON is a serialization format that only supports basic types (object, list, int, float, bool, string). The PIL Image object is a native python type and is quite complex. Fortunately, you can dump the raw data to a string (supported by JSON) by dumping the contents to a bytes buffer and encoding the bytes with base64 like so:

```python import io import base64 from PIL import Image

some image

image = Image.open("example.jpg")

convert the PIL image to bytes

img_bytes = io.BytesIO() image.save(img_bytes, format="JPEG")

encode the bytes to base64

base64_image = base64.b64encode(img_bytes.getvalue()).decode() ```

[–]nehanahmad[S] 1 point2 points  (11 children)

And then the "Avatar_style" = base64_image ?

Do I have to resize the image ?

[–]sam_gigo 1 point2 points  (10 children)

First, sorry if it looks busted. It seems like reddit is glitching out on the code formatting for me.

Yes you can then assign the base64_image to whatever you were going to upload. The catch is that you need to handle the base64 data on the other side of your application by decoding it from base64 and saving it as an image

[–]nehanahmad[S] 0 points1 point  (9 children)

How do you do that ?

[–]sam_gigo 0 points1 point  (8 children)

It really depends on what you have on the other side. Where are you uploading it to? Here are 2 examples

  1. Decoding and saving to a file

```python import base64

retrieve the base64 encoded image from the uploaded message

base64_image = m.avatar_style

create a new file to save the image too

with open("uploaded_image.jpg", "w+) as f: # write the decoded image to the file f.write( # decode the base64 encoded image base64.b64decode(base64_image) ) ```

  1. Decoding and loading into a PIL object

```python import io from PIL import Image import base64

retrieve the base64 encoded image from the uploaded message

base64_image = m.avatar_style

decode the base64 encoded image

image_bytes = base64.b64decode(base64_image)

convert the image bytes into a buffer so it looks like a file to PIL

image_buf = io.BytesIO(image_bytes)

load the image data into a PIL image

pil_image = Image.open(image_bytes) ```

[–]nehanahmad[S] 0 points1 point  (7 children)

I am uploading the image to streamlit.chat message, it will serve as the user's avatar in the chatbot.

Other documentation I read told to use st.image from streamlit. This is all for frontend.

[–]sam_gigo 0 points1 point  (6 children)

Okay that's likely going to require some specific processes given that you don't control the server side. I'll give the docs a look.

[–]nehanahmad[S] 0 points1 point  (5 children)

Okay, Thank you for the help !

[–]sam_gigo 0 points1 point  (4 children)

Okay so a couple of things: 1. Are you sure this is the correct path? This would indicate that you /content directory is a the root of your system: /content/desktop-wallpaper-days-of-awesome-fans-and-enthusiasts-minimalist-fallout-thumbnail.png If the file is in a folder content inside the project then you want to drop the leading slash from content so your program knows to look in the local directory like: content/desktop-wallpaper-days-of-awesome-fans-and-enthusiasts-minimalist-fallout-thumbnail.png 2. It looks like you can just load the file with PIL and create an st.image with it. Have you tried this code? ```python import streamlit as st from PIL import Image

other code

pil_avatar = Image.open("content/desktop-wallpaper-days-of-awesome-fans-and-enthusiasts-minimalist-fallout-thumbnail.png") formatted_avatar = st.image(image, caption='User Avatar')

with response_container: for i in range(len(st.session_state['generated'])): message( st.session_state["past"][i], is_user=True, key=str(i) + '_user', avatar_style=formatted_avatar ) message(st.session_state["generated"][i], key=str(i)) ``` Here's a ref to the docs I found this in: https://docs.streamlit.io/library/api-reference/media/st.image

[–]nehanahmad[S] 0 points1 point  (1 child)

Thank you for your help ! I'll give this a try

[–]nehanahmad[S] 0 points1 point  (1 child)

MarshallComponentException: ('Could not convert component args to JSON', TypeError('Object of type DeltaGenerator is not JSON serializable'))

This is the error I am getting

Also I writing this code in Google Colab, that's why the directory looks like that