Implements Pillow image generation example

[dom96]

Deployed URL: https://python-image-gen.runtime-playground.workers.dev

Mostly generated using GenAI.

CC @ryanking13

[hoodmane]

One copy instead of two:

Suggested change

	image_bytes = buffer.getvalue()
	# Create and return response with appropriate headers
	return Response(
	to_js(image_bytes).buffer,
	headers={
	"Content-Type": content_type,
	"Cache-Control": "public, max-age=3600",
	},
	)
	image_bytes = create_proxy(buffer.getvalue())
	jsbuffer = image_bytes.getBuffer()
	try:
	# Create and return response with appropriate headers
	return Response(
	jsbuffer.data,
	headers={
	"Content-Type": content_type,
	"Cache-Control": "public, max-age=3600",
	},
	)
	finally:
	image_bytes.destroy()
	jsbuffer.release()

[dom96]

Hmm, I tried this and it doesn't work: I get a corrupted image. This is what it's returning:

[hoodmane]

The problem is presumably that the Response constructor is somehow messing up array buffer views. We should figure out where that is messed up and fix it.

[hoodmane]

cc @ryanking13 this might be a good issue for you to investigate.

[ryanking13]

Yeah, it looks like it doesn't take Uint8Array type as a Response. The error log that I get in the console is

TypeError: Unsupported type in Response: Uint8Array

Raw ArrayBuffer seems to work fine, but it doesn't seem to handle ArrayBufferView.

I was able to make it work with the following workaround but it involves copying in slice anyways.

        image_bytes = create_proxy(buffer.getvalue())
        jsbuffer = image_bytes.getBuffer()

        # ...
        return Response(
          jsbuffer.data.slice(0, jsbuffer.data.byteLength).buffer,
        )

[hoodmane]

Perhaps we need a fix to JavaScript Response:

const a = new TextEncoder().encode("hello there!!")
const b = a.subarray(3)
const r = new Response(b)
console.log(await r.text()); // 'lo there!!'

[hoodmane]

Okay nevermind that clearly works.

[hoodmane]

What if we move this into it's own .html file and do

  endpoints = Path(__file__).parent / "endpoints.html"
  return Response(endpoints.read_text(), headers={"Content-Type": "text/html"})

[dom96]

Nice, this is a great example too that we should put in our docs somewhere

[hoodmane]

It'd be good to improve this when we figure out what's going on with the Reponse constructor but this is good for now.

[hoodmane]

Okay nevermind that clearly works.