Solara throws TypeError: PIL.Image.Image is not JSON serializable

[RonaldAJ]

Expected Behavior

I had hoped that the example from https://plotly.com/python/datashader/ would run in solara.

Current Behavior

I get json serialization related errors:

Traceback (most recent call last):
  File "/home/ronald/binaries/portal/lib/python3.10/site-packages/jupyter_client/session.py", line 95, in json_packer
    return json.dumps(
  File "/usr/lib/python3.10/json/__init__.py", line 238, in dumps
    **kw).encode(obj)
  File "/usr/lib/python3.10/json/encoder.py", line 199, in encode
    chunks = self.iterencode(o, _one_shot=True)
  File "/usr/lib/python3.10/json/encoder.py", line 257, in iterencode
    return _iterencode(o, 0)
  File "/home/ronald/binaries/portal/lib/python3.10/site-packages/jupyter_client/jsonutil.py", line 125, in json_default
    raise TypeError("%r is not JSON serializable" % obj)
TypeError: <PIL.Image.Image image mode=RGBA size=1000x1000 at 0x7156D7A0FDC0> is not JSON serializable

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "/home/ronald/binaries/portal/lib/python3.10/site-packages/reacton/core.py", line 1900, in _reconsolidate
    effect()
  File "/home/ronald/binaries/portal/lib/python3.10/site-packages/reacton/core.py", line 1131, in __call__
    self._cleanup = self.callable()
  File "/home/ronald/binaries/portal/lib/python3.10/site-packages/solara/components/misc.py", line 300, in update_data
    fig_widget.layout = fig.layout
  File "/home/ronald/binaries/portal/lib/python3.10/site-packages/plotly/basedatatypes.py", line 717, in __setattr__
    super(BaseFigure, self).__setattr__(prop, value)
  File "/home/ronald/binaries/portal/lib/python3.10/site-packages/plotly/basedatatypes.py", line 2563, in layout
    self._layout = new_layout_data
  File "/home/ronald/binaries/portal/lib/python3.10/site-packages/plotly/basedatatypes.py", line 717, in __setattr__
    super(BaseFigure, self).__setattr__(prop, value)
  File "/home/ronald/binaries/portal/lib/python3.10/site-packages/traitlets/traitlets.py", line 716, in __set__
    self.set(obj, value)
  File "/home/ronald/binaries/portal/lib/python3.10/site-packages/traitlets/traitlets.py", line 706, in set
    obj._notify_trait(self.name, old_value, new_value)
  File "/home/ronald/binaries/portal/lib/python3.10/site-packages/traitlets/traitlets.py", line 1513, in _notify_trait
    self.notify_change(
  File "/home/ronald/binaries/portal/lib/python3.10/site-packages/ipywidgets/widgets/widget.py", line 700, in notify_change
    self.send_state(key=name)
  File "/home/ronald/binaries/portal/lib/python3.10/site-packages/ipywidgets/widgets/widget.py", line 586, in send_state
    self._send(msg, buffers=buffers)
  File "/home/ronald/binaries/portal/lib/python3.10/site-packages/ipywidgets/widgets/widget.py", line 825, in _send
    self.comm.send(data=msg, buffers=buffers)
  File "/home/ronald/binaries/portal/lib/python3.10/site-packages/comm/base_comm.py", line 147, in send
    self.publish_msg(
  File "/home/ronald/binaries/portal/lib/python3.10/site-packages/ipykernel/comm/comm.py", line 37, in publish_msg
    self.kernel.session.send(
  File "/home/ronald/binaries/portal/lib/python3.10/site-packages/jupyter_client/session.py", line 852, in send
    to_send = self.serialize(msg, ident)
  File "/home/ronald/binaries/portal/lib/python3.10/site-packages/jupyter_client/session.py", line 721, in serialize
    content = self.pack(content)
  File "/home/ronald/binaries/portal/lib/python3.10/site-packages/jupyter_client/session.py", line 104, in json_packer
    json_clean(obj),
  File "/home/ronald/binaries/portal/lib/python3.10/site-packages/jupyter_client/jsonutil.py", line 185, in json_clean
    out[str(k)] = json_clean(v)
  File "/home/ronald/binaries/portal/lib/python3.10/site-packages/jupyter_client/jsonutil.py", line 185, in json_clean
    out[str(k)] = json_clean(v)
  File "/home/ronald/binaries/portal/lib/python3.10/site-packages/jupyter_client/jsonutil.py", line 185, in json_clean
    out[str(k)] = json_clean(v)
  [Previous line repeated 2 more times]
  File "/home/ronald/binaries/portal/lib/python3.10/site-packages/jupyter_client/jsonutil.py", line 168, in json_clean
    return [json_clean(x) for x in obj]
  File "/home/ronald/binaries/portal/lib/python3.10/site-packages/jupyter_client/jsonutil.py", line 168, in <listcomp>
    return [json_clean(x) for x in obj]
  File "/home/ronald/binaries/portal/lib/python3.10/site-packages/jupyter_client/jsonutil.py", line 185, in json_clean
    out[str(k)] = json_clean(v)
  File "/home/ronald/binaries/portal/lib/python3.10/site-packages/jupyter_client/jsonutil.py", line 192, in json_clean
    raise ValueError("Can't clean for JSON: %r" % obj)
ValueError: Can't clean for JSON: <PIL.Image.Image image mode=RGBA size=1000x1000 at 0x7156D7A0FDC0>

Steps to Reproduce the Problem

I was trying to adjust the plotly example for datashader:
https://plotly.com/python/datashader/

import pandas as pd
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/uber-rides-data1.csv')
dff = df.query('Lat < 40.82').query('Lat > 40.70').query('Lon > -74.02').query('Lon < -73.91')

import datashader as ds
cvs = ds.Canvas(plot_width=1000, plot_height=1000)
agg = cvs.points(dff, x='Lon', y='Lat')
# agg is an xarray object, see http://xarray.pydata.org/en/stable/ for more details
coords_lat, coords_lon = agg.coords['Lat'].values, agg.coords['Lon'].values
# Corners of the image
coordinates = [[coords_lon[0], coords_lat[0]],
               [coords_lon[-1], coords_lat[0]],
               [coords_lon[-1], coords_lat[-1]],
               [coords_lon[0], coords_lat[-1]]]

from colorcet import fire
import datashader.transfer_functions as tf
img = tf.shade(agg, cmap=fire)[::-1].to_pil()

import plotly.express as px
# Trick to create rapidly a figure with map axes
fig = px.scatter_map(dff[:1], lat='Lat', lon='Lon', zoom=12)
# Add the datashader image as a tile map layer image
fig.update_layout(
    map_style="carto-darkmatter",
    map_layers=[{"sourcetype": "image", "source": img, "coordinates": coordinates}],
)

# Adaptation to solara
import solara
@solara.component
def Page():
    solara.FigurePlotly(
            fig
        )
    
    # Add the datashader image as a tile map layer image
    # fig.update_layout(
    #    map_style="carto-darkmatter",
    #    map_layers=[{"sourcetype": "image", 
    #                 "source": img, 
    #                 "coordinates": coordinates
    #                }],
    # )
display(Page())

Tried py.cafe don't get it working with dependencies.

1. I tried moving the fig.update_layout to location commented out

Specifications

• Solara Version: '1.42.0'
• Platform: Ubuntu 22 on Virtualbox
• Affected Python Versions: at least 3.10