2 side projects

pair coded with ChatGPT

Wei Gao

NUS Friday Hacks

Aug 25, 2023

About me

Wei Gao https://wgea.io/

@wgao19 github

ex-Shopee web FE engineer

now at a financial institution

we'll be talking about today

• side project 1
• side project 2
• some thoughts on "pair coding" with ChatGPT

disclaimer

I'm not a GPT or LLM expert, I won't answer questions like whether I think ChatGPT will take your job or if it should be banned for your homework.

First project:
A scroll animation

"I'll ask ChatGPT to do it" 

A scroll animation

• animate the paper plane on page scroll
• paper plane to follow track as defined in spec, and turn angle tangent to the direction of the path
• replace the image of the girl with another frame when the paper plane is released

some brainstorms...

• maintain a list of coordinates to move to with an onScroll event
• some svg magic
• use a library

chatgpt: use a library 😅

Working solution from ChatGPT

https://glitch.com/edit/#!/mapotofu-plane

https://svgwg.org/svg2-draft/types.html#__svg__SVGGeometryElement__getPointAtLength

https://glitch.com/edit/#!/mapotofu-plane?path=script.js

https://design.mapotofu.org/

Lesson #1: You can GET UP & 🏃🏻‍♀️ QUICKly w/ChatGPT

...really quickly

you're doing more of code reviewing v.s. actual coding

but you're also taken away the opportunity to figure out the puzzle by yourself

platform status: scroll driven animation

• https://developer.chrome.com/articles/scroll-driven-animations/
• https://scroll-driven-animations.style/
• twitter @bramus

Second project:
Square a Cat

non-committal gpt & Google search

• 💰 Paid apps
• 🖥️ Online services i.e. https://squareanimage.com
• 🐈 GitHub projects
  • https://scikit-image.org/ 
  • https://github.github.io/image-crop-element/examples/ 

Let's build it
(with ChatGPT)

• feasibility study & first working copy
• research & tech design
• implementation
• refinements

crux of this problem:
can I do this in browser?

• upload multiple images
• render the image in a square
• rasterize the image for download

...all in browser locally (no network requests)

crux of this problem:
can I do this in browser?

• upload an image
• render the image in a square
• rasterize the image for download

...all in browser locally (no network requests)

https://glitch.com/edit/#!/classic-crystal-idea

ChatGPT: not a crux for me

options to raster images in browsers

• Canvas can rasterize images into various formats
• SVG with Data URL: can render a downloadable link but it will be *.svg
• Server-Side-Rendering
• WebGL: renders 3D graphics (overkill)
• Web APIs and Libraries: internally uses Canvas
• Blob: to render into PNG or JPEG, typically render into a canvas and then create downloadable blob from there

https://www.w3schools.com/jsref/canvas_drawimage.asp
https://www.w3schools.com/jsref/tryit.asp?filename=tryhtml5_canvas_drawimage2

ctx.drawImage()

Hey ChatGPT, put this code into React please

Let's build it
(with ChatGPT)

• feasibility study & first working copy
• research & tech design
• implementation
• refinements

Tech stack

• PWA template on Create React App
• React for component building
• Recoil for state management

• carousel: renders canvases with swipe gesture
  needs to be performance-aware
   
• thumbnail gallery: renders image over background of chosen color on an svg
   
• color picker & apply button: manage states

state management (recoil)

Performance considerations

Some GPT product research

Some GPT product research (continued)

ChatGPT: iPhone 14 Pro does not exist

Some GPT performance analysis

It'd be 8~11 times faster if we are to use Instagram's resolution directly

Me (rookie canvas developer): Should I optimize by drawing smaller resolution or compressing the images?

ChatGPT: You should do both!

How are the two optimizations different - drawing lower resolution v.s. file compression

Downsampling:

• Purpose: Reduce the physical dimensions of the image.
• Result: Results in a reduction in the number of pixels and therefore file size.

Adjusting Quality with canvas.toDataURL:

• Purpose: Reduces the file size by adjusting the compression rate of the image.
• Result: The physical dimensions (in pixels) remain the same, but the image quality and file size are reduced.

How does canvas decide which pixel to draw when drawing higher resolution images to lower resolution?

"Downsampling" - reducing the resolution of the image to fit the target dimensions. There are various downsampling algorithms:

- Nearest-neighbor sampling

- Bilinear sampling

- Bicubic sampling

- Lanczos resampling

- ...

Browsers choose which downsampling algorithms to use

Let's build it
(with ChatGPT)

• feasibility study & first working copy
• research & tech design
• implementation
• refinements

reminder slide for code tour

transform: translateX(dx)

finishSliding()

Let's build it
(with ChatGPT)

• feasibility study & first working copy
• research & tech design
• implementation
• refinements

Refinements

• styling
• PWA
• tracking

https://github.com/wgao19/square-a-cat

More cool stuff

https://squareanimage.com

https://www.tunetheweb.com/blog/what-does-the-image-decoding-attribute-actually-do/

Let's give ChatGPT a score card

you can get up and running with ChatGPT pretty quickly

you will be doing more code review as opposed to actual coding

you should focus more on defining the right problems to solve