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

<svg id="track" xmlns="http://www.w3.org/2000/svg" width="1460" height="1708" viewbox="0 0 1460 1708" fill="none">
   <path id="curve" d="M1061.5 179C919.5 69.4998 395.536 -86.0222 105 69.4998C-64.9999 160.5 -6.50002 483.65 172.5 600C271.72 664.493 500.5 743.5 1048 743.5C1172.42 743.5 1246.5 737.667 1326.5 743.5C1443.5 752.031 1525.5 1088.5 1372 1137C714.198 1344.84 860 1658 526 1658C233.737 1658 152.833 1682.33 103 1704" stroke="#ED5500" stroke-width="7" />
</svg>

"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

path.getTotalLength()

path.getPointAtLength()

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

(x, y)

path.getPointAtLength(fraction * totalLength)

const totalLength = path.getTotalLength()

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

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

Second project:
Square a Cat

 

follow @szzzzkkkk on IG 🤣

when posting multiple media, IG requires that all of them in a same aspect ratio

 

...such that their carousel doesn't have to resize

"how do you add borders to photos?"

non-committal gpt & Google search

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 (canvas)

gallery (svg)

color picker

apply button

uploader

  • 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)

atom: raw files

atom: color of choice

async selector:
rasterized images

write: upload file

read: rasterization & thumbnail gallery

write: color picker

read: rasterization & thumbnail gallery

select: raw files & color

await rasterization

Performance considerations

ChatGPT: Instagram uses 1080x1080

web developer: me got Chrome DevTools inspector

disclaimer: it did say "based on my knowledge as of Sept 2021..."

Some GPT product research

Some GPT product research (continued)

ChatGPT: iPhone 14 Pro does not exist

(but it actually knows it's supposed to 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

More cool stuff

https://squareanimage.com

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

Task Score
coding generic problem 🦄🦄🦄🦄
coding subject to specific requirements - -
product research 🦄🦄🦄
performance analysis 🦄🦄🦄
interpreting code 🦄🦄🦄🦄🦄🦄
explaining technology 🦄🦄🦄🦄🦄
writing talk script 😬

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

Recoil & async selectors

Recoil is a state management library for React that offers a way to manage global state across components. The main pieces are atoms (where you store states) and selectors (how you get accessed to values or deduced values).

 

Recoil selectors are like any other state selector you imagine but has most of your problems solved:

- have access to any atom

- asynchronous processes can hide behind Recoil selectors and they they cache the results by default

2 Side Projects Pair Coded with ChatGPT

By Wei Gao

2 Side Projects Pair Coded with ChatGPT

  • 100