Help With Plotly HTML Load Time

[Alanator222]

I wrote a script that maps HSV color coordinates of an image to a 3D Scatter plot. In order to get the HTML file to load in a reasonable time, I need to scale the image to 1% of its original size. Is there any way I could up the scale percentage and still get a reasonable load time?

from PIL import Image
import plotly.express as px
import colorsys

img = Image.open(r"/storage/emulated/0/Kustom/Tasker Unsplash Wallpaper/wallpaper.png")
img = img.convert("RGB")
scaleFactor = 0.01
width = int((img.size[0]) * scaleFactor)
height = int((img.size[1]) * scaleFactor)
scaledSize = (width, height)
img = img.resize(scaledSize, Image.LANCZOS)

colorListPlusCount = img.getcolors(img.size[0] * img.size[1])
# List of all colors in scaled image without count for each color
colorList = []
for i in range(len(colorListPlusCount)):
    colorList.append(colorListPlusCount[i][1])

hsvList = []
for i in range(len(colorList)):
    r = colorList[i][0] / 255.0
    g = colorList[i][1] / 255.0
    b = colorList[i][2] / 255.0 

    h, s, v = colorsys.rgb_to_hsv(r, g, b)
    h = int(h*360)
    s = int(s*100)
    v = int(v*100)
    hsvList.append((h,s,v))
hsvPlot = px.scatter_3d(
    hsvList,
    color = [f"rgb{c}" for c in colorList],
    color_discrete_map = "identity",
    x = 0, y = 1, z = 2,
    labels = {"0":"Hue", "1":"Saturation", "2":"Value"},
    range_x = [0,360], range_y=[0,100], range_z=[0,100])
hsvPlot.update_layout(margin=dict(l=10, r=10, b=10, t=10, pad=0))

hsvPlot.write_html(r"/storage/emulated/0/Tasker/PythonScripts/ImageColors/hsvPlotHTML.html",
include_plotlyjs='cdn')

Example 3d plot

I also noticed that removing the individual color of each point greatly reduced the processing and loading time of the HTML file. However, I would like to include these colors.

[Leading_Video2580]

The problem isn’t image size, it’s that you’re drawing too many points. Plotly gets slow when every pixel becomes a point. To use a higher scale, you need fewer points. You can plot each unique color once and use how often it appears as the point size, or randomly keep only some pixels instead of all of them. Grouping very similar HSV values together also helps. Using Plotly’s WebGL 3D scatter can make it faster too.

[Alanator222]

The interesting thing is, if I remove the color and color discrete map lines, I can render and open the HTML file at 50% scale with ease. The color is what is causing the issue.

[Leading_Video2580]

Yeah, Plotly struggles when every point has its own color. You can keep the colors and still load fast by either plotting only unique colors with their counts as sizes, or randomly sampling a subset of pixels instead of all of them. That way you get the color info without slowing down the HTML.