screenshot-to-code icon indicating copy to clipboard operation
screenshot-to-code copied to clipboard

Support for react/vue/svelte?

Open egeres opened this issue 2 years ago • 8 comments

I've been ~wasting money for fun~ testing the project with some websites and it's really interesting. But right now, besides doing quick mockups, I see little applicability in real-life scenarios since raw HTML doesn't provide a workflow where you can easily compose with structures, parse information from a request and what not

Are there any plans on giving support for any of the major front-end frameworks? (Vue, React, Svelte...)

I wonder if it could be as simple as asking the model to then parse the output HTML into something else. Or, if on the other hand, there would be an advantage at directly asking the model to refactor code on the fly to create a more optimal structure...

egeres avatar Nov 24 '23 12:11 egeres

Yes, it should be relatively simple and we do plan to add that in the future.

abi avatar Nov 24 '23 13:11 abi

I will do this in the weekend.

clean99 avatar Nov 24 '23 14:11 clean99

I think this is still a bit difficult, because react and vue need to be converted to html to preview, which makes the production effect slow

zhengdechang avatar Nov 25 '23 13:11 zhengdechang

Related to workflows, i achieved this by experimenting with the JavaScript language and Vuejs, with javascript add one button to header for tooggle theme white to black, this has add icon the moon and sun for respresent color theme this recognize the use this strategi UX in then web.

prueba_toogle_theme

Here test call api in pokemon.api the message write exactly get data image , for print result write in profile image use data.sprites.frond_default becose It's not readily apparent how get image data for humans with this api, perhaps Gpt can recognize it :smile: prueba_call_api

Interesting add support for apis for create interactive results.

dialmedu avatar Nov 25 '23 14:11 dialmedu

Related to workflows, i achieved this by experimenting with the JavaScript language and Vuejs, with javascript add one button to header for tooggle theme white to black, this has add icon the moon and sun for respresent color theme this recognize the use this strategi UX in then web.

prueba_toogle_theme prueba_toogle_theme

Here test call api in pokemon.api the message write exactly get data image , for print result write in profile image use data.sprites.frond_default becose It's not readily apparent how get image data for humans with this api, perhaps Gpt can recognize it 😄 prueba_call_api prueba_call_api

Interesting add support for apis for create interactive results.

Could you please share the instructions for generating VueJS, as the current version can only generate HTML? It would be really helpful.

HongyiInstalily avatar Nov 27 '23 21:11 HongyiInstalily

@HongyiInstalily going to try and get in support for Vue this week, but I think you modify the prompts in prompt.py based on something like https://michaelcurrin.github.io/code-cookbook/recipes/javascript/packages/vue/no-build-step.html, you might be able to get it working yourself.

abi avatar Nov 27 '23 23:11 abi

already generate react code,but cant show preview, why

ExpressGit avatar Dec 25 '23 07:12 ExpressGit

@ExpressGit there's a bug with React rendering where it sometimes doesn't work. If you switch between mobile and desktop, does it work?

abi avatar Dec 25 '23 17:12 abi

I'd use it if svelte was supported.

ralyodio avatar Aug 08 '24 15:08 ralyodio