notícias

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Autor｜Coelho de Jade Sal e Pimenta
E-mail｜[email protected]

Quando o Claude 3.5 Sonnet foi lançado, a função de demonstração de artefatos também foi atualizada. Naquela época, fiquei chocado com o efeito de demonstração.

Em relação aos Artefatos, permite aos usuários criar e referenciar grandes quantidades de conteúdo independente em conversas.

Quando perguntamos a Claude sobre “Trechos de código, documentos de texto ou designs de sites”E outros conteúdos, os artefatos aparecem em uma janela dedicada, exibida lado a lado com a conversa. Se o resultado não for satisfatório, podemos modificar, iterar e melhorar imediatamente a criação de Claude.

A imagem mostra o efeito HTML gerado pelo Preview através do diálogo com Claude 3.5 Sonnet em Poe. Endereço de diálogo: https://poe.com/s/YEms220OFPLfoZhPKfLI

Agora a espera finalmente chegouPoe atualizou oficialmente a função Preview, o efeito é semelhante à demonstração em tempo real de artefatos e também suporta a geração em tempo real de três modelos: Claude 3.5 Sonnet, ChatGPT-4o e Gemini 1.5 Pro.

A imagem à esquerda mostra as atualizações do Claude 3.5 Sonnet and Artifacts, e a imagem à direita mostra a visualização de Poe

Interrompendo uma frase, aqui vai uma breve explicaçãoO que é Poe?。

Poe é uma plataforma de IA lançada pela Quora, uma "Zhihu" (comunidade de perguntas e respostas) norte-americana, no final de 2022. Os usuários podem se comunicar com diferentes modelos de IA por meio dela, incluindo modelos conhecidos como ChatGPT e Claude. A intenção original do design do Poe é fornecer uma plataforma de bate-papo diversificada, permitindo aos usuários escolher o mais adequado entre vários modelos de IA para interação. Seja fazendo perguntas, pedindo ajuda com programação ou tendo conversas descontraídas, Poe pode satisfazê-lo. . Quando Poe atualizou a função de demonstração de visualização, fiquei muito feliz!

Dito isso, mal posso esperar. Vamos dar uma olhada em alguns casos práticos.

1

Cenário 1: Crie uma página de jogo bonita

Na Internet, frequentemente vemos vários sites de coleta de ferramentas. Se houvesse uma ferramenta que pudesse nos ajudar a criar facilmente nosso próprio site de coleção visual, não economizaria muito tempo de programação? Recentemente, descobri um site de jogos. Cada vez que clico nele, sinto como se estivesse abrindo uma caixa cega. Ele contém vários jogos, ferramentas e experimentos de rede.

Eu estava pensando: posso usar a função Preview do Poe?Crie uma página de demonstração ao vivo como esta , ou até mesmo construir um site de coleta de ferramentas? Para verificar essa ideia, decidi experimentá-la criando primeiro uma página estática. Este é o primeiro passo básico!

Eu uso Poe diretamente para falar com o Soneto Claude 3.5. O que começou como uma questão puramente textual gerou texto e soluções;

Mais tarde adicionei "Visualize a exibição diretamente em Visualizações”, o efeito em tempo real foi imediatamente aparente e o efeito foi muito bom.

Dica: https://toms.toys/ Visite esta página, crie um tutorial do jogo e exiba-o diretamente nas Pré-visualizações.

Depois de gerá-lo, tentei clicar nas palavras vermelhas, mas descobri que o clique não se movia, então a página gerada era uma página estática, mas parecia 80% semelhante. A cor do logotipo basicamente correspondia e a cor do logotipo era basicamente igual. outras caixas de índice também eram muito claras, pelo menos tinham o sabor da versão original.

Registro da conversa: https://poe.com/s/Pe9cXFpmFHQqPAZhZOgU

Agora com essa base já posso construir sozinho um site de ferramentas exclusivas. Imagine que todos os tipos de ferramentas práticas estão reunidas em um site customizado, e você pode usá-lo com um clique a qualquer hora e em qualquer lugar. É muito prático e legal!

1

Cenário 2: demonstração de análise de relatório financeiro NVIDIA 2024

No passado, muitos resultados de relatórios financeiros de análise de IA eram texto. Agora tentamos usar gráficos para demonstrar o efeito.

Palavras de alerta:

Você consegue analisar as informações? https://investor.nvidia.com/news/press-release-details/2024/NVIDIA-Announces-Financial-Results-for-Fourth-Quarter-and-Fiscal-2024/ e transforme-o em uma demonstração interativa digerível para ajudar eu entendo isso

O Preview de Poe inicialmente usou uma demonstração interativa simples para mostrar os principais indicadores financeiros da NVIDIA. Ao clicar em botões diferentes, você pode visualizar gráficos de receita, lucro e lucro por ação. Parece bastante poderoso, nem um pouco inferior aos artefatos.

A versão profissional otimizada está aqui. Ela não apenas compara vários indicadores, mas também fornece uma visão geral abrangente da situação financeira da NVIDIA, incluindo apresentação de dados e análise profissional. O efeito geral não é ruim, basta olhar a imagem.

Registro de conversa: https://poe.com/s/NaFg8czE3NKSDu1vehH1

1

Cenário 3: Fazendo cartões de conhecimento químico

Lembro que um dos casos de aplicações web gerados pela conta oficial de Poe éCartões de conhecimentoCartões de memória:

https://poe.com/s/HDAXQjBX9qmsInjjgV4X, por que não usar isso como um protótipo para fazer um cartão de conhecimentos de química?

A produção de cartas também é muito simples. Após algumas iterações básicas, os efeitos aparecerão. As principais iterações e modificações são as seguintes:

• Informações básicas do texto:Os cartões possuem conceitos na frente e explicações dos conceitos no verso.

• Palavra:O texto anterior e seguinte são diferenciados por tamanho, cor de fundo, etc.

• tom:O tom geral da cor é Moran, que parece mais confortável.

Diálogo de efeito de cartão: https://poe.com/s/1TgDhUkoKmhjMq75yXhF

Amigos atentos podem ver que além de virar e interagir, também adicioneiID do usuário, em tempo real,Aumentou a exclusividade e a natureza em tempo real do cartão.

1

Cena 4: Simulando animação do ciclo da água

Hoje vamos sonhar com nossos tempos de colégio e criar um processo de animação do ciclo da água para que a página possa reproduzir efeitos de animação automaticamente.

Palavras de alerta:

Use React para animar a circulação da água. Para tornar tudo mais complicado, adicione emoji ou svg.

Preciso de um componente React para um processo de loop de água. À esquerda está uma animação mostrando os quatro estágios de evaporação, condensação, precipitação e coleta; à direita está a descrição do texto correspondente; Use a API Web Speech para adicionar a função de reprodução automática de fala, para que o conteúdo da fala seja consistente com o texto. Animado em SVG, cada estágio dura 8 segundos. O design geral deve ser conciso, claro e fácil de entender. Certifique-se de que as animações sejam mais suaves e o texto mais enxuto.E visualize a exibição diretamente em Visualizações

Processo de diálogo: https://poe.com/s/OujTxBMnSknxHaqmBhXs

Não somenteDemonstração automática de animação, ao lado deUma descrição condensada do processo do ciclo da água , muito claro e distinto. Quando os professores ensinam conceitos complexos, eles podem criar apresentações facilmente enquanto preparam o material didático, de forma rápida e intuitiva. Este é um artefato que economiza tempo e trabalho para professores!

1

Cenário 5: Crie seu próprio site de ferramenta de descompressão

Eu estava navegando no site há dois dias e encontrei um site interessante. Este site é um site que exibe efeitos de mouse no estilo dos anos 90. Ele foi projetado para exibir esse efeito de mouse nostálgico. Ele mostra uma série de efeitos de mouse implementados por meio de JavaScript, que podem seguir o movimento do mouse ou o toque do dedo. Você pode clicar em qualquer lugar para alternar diferentes efeitos, como efeitos de arco-íris, etc. Então tente usar a função Preview do Poe.

Palavras de alerta:

Crie um artefato de descompressão, esta é a informação:

https://cursoreffects.com/

https://github.com/tholman/cursor-effects

Estilo simples pela primeira vez:

O estilo da primeira versão era muito simples, então pedi ao Claude 3.5 Sonnet para embelezá-lo.Botões verdes e fundos brancos foram adicionados, e os efeitos do mouse foram aumentados de 4 para 11.。

Mas, neste momento, descobri que “texto” e “efeitos de cursor” ocupavam toda a tela e não consegui ver melhor o efeito dos cliques do mouse. Continue a ajustar e diga ao Soneto Claude 3.5:Libere o espaço intermediário enquanto continua a embelezar o efeito visual, existem os seguintes 2 estilos diferentes de efeitos.

Descobriremos que a cor desta versão usaCor gradiente, muito refrescante ao mesmo tempo; a posição intermediária também é liberada e o efeito geral é muito bom.

efeito gradiente rosa

efeito gradiente azul

Na verdade, o efeito acima é bastante satisfatório, mas quero que a página inteira seja mais concisa. Se olharmos de perto encontraremos:

• Há muito texto em toda a página e as duas linhas de pequenos caracteres no meio têm significados sobrepostos, um dos quais pode ser excluído;

• O apelido de efeitos especiais do cursor abaixo ocupa muito espaço e atrai muita atenção. Ele pode ser iterado em um botão que muda conforme o jogador clica.

Continuei então a dizer ao Soneto Claude 3.5 que deveria ser conciso e claro. O efeito final é o seguinte: A cor é relativamente clara e o conteúdo exibido em toda a página é relativamente completo, sem conteúdo desnecessário.

Após a otimização final, a fonte foi substituída por um estilo mais apropriado. Toda a cor de fundo ficou com gradiente aleatório, o que foi muito interessante.

Ferramenta de descompressão autoconstruída: https://poe.com/s/xPxoi0qCl4JVsXw3GxqV

1

afinal

Seja Poe ou Claude, a aparência de Pré-visualização/Artefatos torna a telatexto, códigovisualizar,Esta etapa se torna mais simples e fácil de implementar.

• Para desenvolvedores, os artefatos podem gerar e reparar código, reduzindo o tempo de codificação manual;

• Para colaboração em equipe, poder visualizar, editar e construir conteúdo em tempo real na mesma plataforma reduz muito a perda entre as transmissões de informações.

• Para educadores, utilize o Claude 3.5 Sonnet para gerar conteúdos didáticos e apresentações para simplificar o processo de produção. Os alunos podem acessar mais facilmente os recursos de aprendizagem e usar demonstrações em tempo real para aumentar seu interesse em aprender.

Quer se trate de desenvolvedores, colaboração em equipe ou educadores, a eficiência do trabalho e da vida diária melhorou bastante. Existem muitas cenas assim na vida...

Depois de terminar de fazer a ferramenta de descompressão, compartilhei diretamente a ferramenta de descompressão caseira com meu amigo programador.

Ele disse: “Levaria um dia para escrever um código como este”, mas hoje gastei no máximo meia hora nele (PS: Code Novice). Não é este o início de uma espécie de IA entrando nas casas. de pessoas comuns?

Esperamos que mais IA entre nas casas das pessoas comuns e na visão de todos no futuro.

Referências:

1. Site oficial do Poe: https://poe.com/

2. Introdução à atualização do Soneto Claude 3.5:

   https://www.anthropic.com/news/claude-3-5-sonnet

3. Artefato de descompressão original: https://cursoreffects.com/

4. Estação de coleta e agregação de casos Claude Artifacts Showcase:

   https://claudeartifacts.com/?category=All

Referência de caso de aplicação web gerada oficialmente por Poe:

1. Apresentação interativa: https://poe.com/s/NlX2WRElDUvtuuMSFrZq

2. Cartões de conhecimento Flashcards: https://poe.com/s/HDAXQjBX9qmsInjjgV4X

3. Bateria eletrônica Drum Machine: https://poe.com/s/G4HshkCQCaXVfg0ndPZK

4. Grande Colisor de Cores: https://poe.com/s/neKbyqEJYUtiRjeC6b5f