Show HN: Converta capturas de tela em código HTML limpo usando o GPT Vision (ferramenta OSS)
(github.com/abi)App para converter capturas de tela em código
- Um app simples que converte capturas de tela em HTML/Tailwind CSS
- Usa GPT-4 Vision para gerar o código e DALL-E 3 para criar imagens semelhantes
- Veja a seção de exemplos abaixo para conferir a demo
Atualizações
- Adicionada uma configuração para desativar a geração de imagens com DALL-E quando ela não for necessária
- Agora é possível visualizar o código diretamente no app
- É possível instruir a IA a atualizar o código caso ela aplique estilos incorretamente ou deixe alguma seção de fora
Primeiros passos
- App composto por frontend em React/Vite e backend em FastAPI
- É necessária uma chave da API da OpenAI com acesso à API do GPT-4 Vision
- São fornecidas instruções para executar o backend e o frontend, permitindo usar o app localmente
Perguntas frequentes (FAQ)
- São fornecidas soluções caso ocorram erros durante a configuração do backend
- Há orientações sobre como obter uma chave da API da OpenAI que inclua o modelo GPT4 Vision
- Há instruções sobre como enviar feedback, solicitar recursos e relatar bugs
Exemplos
- São fornecidos exemplos do original e da réplica de páginas como NYTimes, Instagram e Hacker News
Versão hospedada
- É preciso ter uma chave da OpenAI e acesso ao GPT-4 Vision
- Na seção Primeiros passos, há instruções para instalação local
Opinião do GN⁺
Este app é uma ferramenta inovadora para converter capturas de tela em código web, com destaque para o uso das tecnologias mais recentes de IA, GPT-4 Vision e DALL-E 3. Isso o torna interessante e atraente por oferecer a desenvolvedores e designers a chance de economizar tempo e se concentrar mais em trabalho criativo. Além disso, a possibilidade de o usuário instruir diretamente a IA para modificar o código melhora a experiência de uso e contribui para aumentar a precisão da IA.
1 comentários
Comentários no Hacker News
Opinião de que essa tecnologia parece mágica e, embora se entenda o conceito de que redes neurais modelam um conjunto de funções que mapeiam entrada em saída, é surpreendente que o GPT modele o processo de mapear uma imagem para tokens de texto em HTML+Tailwind e de o navegador renderizar isso.
Pergunta sobre se essa ferramenta pode ser vista como um compilador de diagramas e se poderia fazer parte de um pipeline de build que converte artefatos gerados em ferramentas como Sketch ou Figma em HTML/CSS/JS.
Exemplo de prompt para construir um aplicativo de página única com Tailwind, HTML e JS com base em uma captura de tela de página web fornecida pelo usuário, com instruções que enfatizam a reprodução exata do design.
Opinião pessoal de que, embora outro método possa ser uma direção melhor do que prompting defensivo, o simples fato de essa tecnologia funcionar já é surpreendente.
Menção a um vídeo de pesquisa no YouTube dizendo que adicionar a frase "isso é muito importante para a minha carreira" melhora a qualidade da saída, com a opinião de que essa frase melhora a qualidade em várias tarefas.
Reflexão de que, como essa tecnologia amplia o escopo dos problemas que podem ser resolvidos, surge a questão do que deve ser criado e da necessidade de olhar para os problemas e resolvê-los de forma diferente.
Opinião de que é surpreendente realizar essa tarefa usando um modelo geral, mas que os dados para aprendizado supervisionado podem ser gerados com facilidade.
Informação de que será oferecida uma versão hospedada via Pico por meio de uma página no GitHub, junto com uma pergunta sobre o motivo da escolha do Pico.
Elogio ao fato de que a forma de mostrar ao vivo a demonstração do site gerado usando
iframecomsrcdocé simples e elegante.Opinião de que, ao querer copiar um site existente, usar Httrack pode gerar um resultado mais parecido e economizar os custos da API do GPT.
Preocupação de que a criação de sites de phishing ficará muito mais rápida.
Pergunta sobre se essa ferramenta é perfeita para responder a solicitações em constante mudança de gerentes de projeto e se também funciona com entradas vagas como "Make it pop".