umix

️ Isenção de responsabilidade de segurança : Não use em produção. Este é um software experimental. Aqui estão dragões?

umix.dev

Umix é uma extensão de navegador e ferramenta de desenvolvedor para remixar sites. Vamos tornar a web divertida.

Se você estiver apenas interessado em experimentar, vá ao nosso playground Repl.it. Ou assista ao nosso vídeo.

Continue se quiser usá-lo em sites do mundo real.

Umix como extensão do navegador

Observação: o Umix está com aprovação pendente na Chrome Extension Store. Por enquanto, você pode integrá-lo manualmente através do modo de desenvolvedor. Atualmente, oferecemos suporte apenas aos navegadores Chrome e Chromium (Edge, Arc, Brave, Opera, etc.)

1. Clique para baixar o ZIP do projeto
2. Descompacte umix-master.zip .
3. Digite chrome://extensions na barra de endereço URL
4. Ative o modo de desenvolvedor

5. Clique em Carregar descompactado

6. Selecione a pasta umix-master
7. Lucro.

Umix como ferramenta de desenvolvedor

Basta colocar uma tag <script> no final do seu corpo... é muito fácil – sem peculiaridades, sem API externa, apenas os recursos da IA ​​ao seu alcance.

 < script src = "https://umix.dev/lib.js" > < / script > 

Inspiração

A Web é chata.

Painéis monótonos. Interfaces idênticas. Todos os aplicativos têm a mesma aparência.

A Web deveria ser divertida.

Nossas primeiras memórias, amigos e identidades foram feitas na web. Mergulhados em bate-papos IRC, CSS personalizados do MySpace e documentos aleatórios da Wikipédia, encontramos um lar – um lar em uma comunidade de pessoas que também achavam a Web divertida.

Embora a Web tenha amadurecido nos últimos dois anos, há um charme inegável em seu passado mais hackeável e divertido.

O que isso faz

Remixar a web. Umix é uma extensão de navegador e ferramenta de desenvolvedor que permite aos usuários da Internet remixar, reimaginar e compartilhar novamente interfaces da web com facilidade.

Imagine ser capaz de passar o mouse sobre qualquer parte da página, pedir a uma IA para alterá-la de acordo com seus desejos e ver sua criação ao vivo – isso é Umix.

Como o construímos

No frontend, construímos uma extensão do Chrome que atravessa o DOM na memória e atualiza o HTML com base na resposta do nosso backend.

No backend, temos um servidor Node.js que trata das solicitações do frontend. Equipamos o GPT-4 com um navegador da web, para que ele possa navegar em sites e buscar conteúdo quando não tiver certeza do que fazer. Isso acontece várias vezes, permitindo-nos obter informações ao vivo da web.

Por fim, construímos uma ferramenta de desenvolvedor que permite a qualquer desenvolvedor web integrar o Umix como uma biblioteca JavaScript. Isso permite que os desenvolvedores habilitem experiências de remixagem nativas em seus próprios sites.

Desafios que enfrentamos

• Falta de confiabilidade dos LLMs - o GPT-4 teve alucinações (inventou coisas) várias vezes ou não sabia a resposta para várias perguntas durante os testes - não podíamos construir diretamente sobre o OpenAI e precisávamos conectar o GPT-4 a outras ferramentas. Nós o conectamos a um navegador da web usando langchain.js e solicitamos que ele buscasse informações/documentação factuais para ferramentas de sites, caso não tivesse certeza sobre a resposta.
• A estrutura do DOM é difícil – tivemos que lidar com maneiras de lidar com elementos wrapper, atributos excessivos e classes de substituição
• Projetando a UI – criar uma UI muito intuitiva, especialmente para uso em remixagem, é extremamente difícil. Finalmente chegamos a uma abordagem muito semelhante à ferramenta de seleção da v0.dev
• Diversão CSR/CORS + Devtool – criar uma ferramenta de desenvolvedor segura, protegida e robusta e uma extensão do Chrome, garantindo ao mesmo tempo que os requisitos de segurança fossem atendidos, exigiu muitas horas árduas de choro

O que vem por aí para Umix

Fizemos uma pequena postagem de demonstração no Twitter (X) há 12 horas e já foi visualizada mais de 25.000 vezes .

Já temos 80 pessoas em nossa lista de espera (a partir das 4h)

É hora de tornar a Web divertida. Juntos, podemos remixar a web.