screenshot-to-code VS ts-pattern

Thanks!

There's a dropdown where you can choose a stack for screenshots (Tailwind, React, Vue, etc.). I haven't updated the prompts for the video feature just yet. You can tweak the prompt yourself here: https://github.com/abi/screenshot-to-code/blob/6069c2a118592...

The quality of the output code is solid, I think. You can see the code for the examples: https://codepen.io/abi/pen/ExJPdop and https://codepen.io/abi/pen/jORWeYB

I think the biggest thing LLM code is typically missing is better abstractions/componentization. You could probably prompt around some of that.

You can use GPT-V to create functional components from images directly:

There was an open source project (https://github.com/abi/screenshot-to-code) that I borrowed the prompt from and made a custom GPT for myself where I just drag and drop the image. It’s not perfect but it’s pretty great overall!

Here are the prompts:

PS: I got the idea from tldraw/make-real and abi/screenshot-to-code projects. So all credit to them 🙌

Screenshot to Code GitHub Repo: https://github.com/abi/screenshot-to-code

ts-pattern has been a decent band-aid for the lack of native pattern matching, but obviously has downsides that could be avoided if it was built into the language.

https://github.com/gvergnaud/ts-pattern

ts-pattern

With how powerful the type system is you can implement pattern matching via a library pretty convincingly, https://github.com/gvergnaud/ts-pattern is definitely the go-to. That being said pattern matching is hardly a requirement for being ok for implementing compilers.

https://github.com/gvergnaud/ts-pattern might help

There's a proposal to add something like that to JavaScript but it's been stuck in limbo since 2017 although there are libraries like ts-pattern which implement it already.