screenshot-to-code
ts-pattern
screenshot-to-code | ts-pattern | |
---|---|---|
17 | 38 | |
50,163 | 10,983 | |
- | - | |
9.7 | 8.6 | |
15 days ago | 11 days ago | |
Python | TypeScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
screenshot-to-code
- Screenshot to Code
-
Show HN: Turn a recording of an app into a functional prototype with Claude Opus
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.
- Evaluating Claude 3 for Converting Screenshots to Code
-
You Don't Need React
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:
-
Convert a screenshot to a working Flutter app
PS: I got the idea from tldraw/make-real and abi/screenshot-to-code projects. So all credit to them π
-
Get Ready to Rock Web Development: Screenshot to Code with GPT-4V!
Screenshot to Code GitHub Repo: https://github.com/abi/screenshot-to-code
- Has anyone came up with a way to create images from your own photos?
- FLaNK Stack Weekly for 20 Nov 2023
- GitHub - abi/screenshot-to-code: Drop in a screenshot and convert it to clean HTML/Tailwind/JS code
ts-pattern
-
You Don't Need React
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
- Stop nesting ternaries
-
Building React Components Using Unions in TypeScript
ts-pattern
- Pattern Matching Library for TypeScript
-
TypeScript Is Surprisingly OK for Compilers
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.
-
How to achieve type safety here possible without "type hacks"?
https://github.com/gvergnaud/ts-pattern might help
- ts-pattern v5
-
[AskJS] C# in every Node.js job posting?
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.
- Simplifying Dynamic Classes in Vue with the class-variance-authority library | cdruc.com
- Rust Appreciation Thread
What are some alternatives?
Scada-LTS - Scada-LTS is an Open Source, web-based, multi-platform solution for building your own SCADA (Supervisory Control and Data Acquisition) system.
pattern-grab - π€π» Regular Expression Data Grabber
awesome-public-real-time-datasets - A list of publicly available datasets with real-time data maintained by the team at bytewax.io
ts-adt - Generate Algebraic Data Types and pattern matchers
CoC2023 - Community over Code, Apache NiFi, Apache Kafka, Apache Flink, Python, GTFS, Transit, Open Source, Open Data
await-to-js - Async await wrapper for easy error handling without try-catch
make-real - Draw a ui and make it real
union-types - A Typescript library for creating discriminating union types.
TinyLlama - The TinyLlama project is an open endeavor to pretrain a 1.1B Llama model on 3 trillion tokens.
ts-option
StyleTTS2 - StyleTTS 2: Towards Human-Level Text-to-Speech through Style Diffusion and Adversarial Training with Large Speech Language Models
typescript-coverage-report - Node command tool to generate TypeScript coverage report