screenshot-to-code
screenshot-to-code copied to clipboard
Support for react/vue/svelte?
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...
Yes, it should be relatively simple and we do plan to add that in the future.
I will do this in the weekend.
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
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.
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:
Interesting add support for apis for create interactive results.
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.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_defaultbecose It's not readily apparent how get image data for humans with this api, perhaps Gpt can recognize it 😄![]()
![]()
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 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.
already generate react code,but cant show preview, why
@ExpressGit there's a bug with React rendering where it sometimes doesn't work. If you switch between mobile and desktop, does it work?
I'd use it if svelte was supported.