nouvelles

J'ai utilisé POE pour reproduire un petit jeu, difficulté : zéro|AI frais test

2024-07-16

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


Auteur|Lapin de Jade Sel et Poivre
E-mail|[email protected]

Lorsque Claude 3.5 Sonnet est sorti, la fonction de démonstration d'artefacts a également été mise à jour. A cette époque, j'ai été choqué par l'effet de démonstration.

Concernant les artefacts, il permet aux utilisateurs de créer et de référencer de grandes quantités de contenu indépendant dans les conversations.

Quand nous avons interrogé Claude sur «Extraits de code, documents texte ou conceptions de sites Web» et d'autres contenus, les artefacts apparaissent dans une fenêtre dédiée, affichées côte à côte avec la conversation. Si le résultat n'est pas satisfaisant, nous pouvons immédiatement modifier, itérer et améliorer la création de Claude.


L'image montre l'effet HTML généré par Preview via le dialogue avec Claude 3.5 Sonnet dans Poe. Adresse du dialogue : https://poe.com/s/YEms220OFPLfoZhPKfLI

Maintenant, l'attente est enfin arrivéePoe a officiellement mis à jour la fonction Aperçu, l'effet est similaire à la démonstration en temps réel d'Artifacts, et il prend également en charge la génération en temps réel de trois modèles : Claude 3.5 Sonnet, ChatGPT-4o et Gemini 1.5 Pro.


L'image de gauche montre les mises à jour de Claude 3.5 Sonnet et Artifacts, et l'image de droite montre l'aperçu de Poe.

Interrompre une phrase, voici une brève explicationQu’est-ce que Poé ?

Poe est une plateforme d'IA lancée par Quora, un « Zhihu » (communauté de questions et réponses) nord-américain, fin 2022. Les utilisateurs peuvent grâce à elle communiquer avec différents modèles d'IA, y compris des modèles bien connus tels que ChatGPT et Claude. L'intention originale de Poe est de fournir une plate-forme de discussion diversifiée, permettant aux utilisateurs de choisir celui qui convient le mieux parmi plusieurs modèles d'IA pour l'interaction. Qu'il s'agisse de poser des questions, de demander de l'aide pour la programmation ou d'avoir des conversations détendues, Poe peut la satisfaire. . Lorsque Poe a mis à jour la fonction de démo Aperçu, j'étais tellement heureux !


Cela dit, j’ai hâte de jeter un coup d’œil à quelques cas pratiques.


1

Scénario 1 : Créer une belle page Web de jeu

Sur Internet, nous voyons souvent divers sites de collecte d'outils. S'il existait un outil qui pourrait nous aider à créer facilement notre propre site Web de collection visuelle, cela ne nous ferait-il pas gagner beaucoup de temps de programmation ? Récemment, j'ai découvert un site Web de jeux. Chaque fois que je clique dessus, j'ai l'impression d'ouvrir une boîte aveugle qui contient divers jeux, outils et expériences de réseau.

Je me demandais simplement : puis-je utiliser la fonction Aperçu de Poe ?Créez une page de démonstration en direct comme celle-ci , ou même créer un site Web de collection d'outils ? Afin de vérifier cette idée, j'ai décidé de l'essayer en créant d'abord une page statique. C'est la première étape de base !

J'utilise Poe directement pour parler au Sonnet Claude 3.5. Ce qui a commencé comme une question purement textuelle a généré du texte et des solutions ;


Plus tard, j'ai ajouté "Prévisualisez l'affichage directement dans les aperçus", l'effet en temps réel était immédiatement apparent, et l'effet était vraiment bon.

Astuce : https://toms.toys/ Visitez cette page, créez un tutoriel de jeu et affichez-le directement dans les aperçus.


Après l'avoir généré, j'ai essayé de cliquer sur les mots rouges, mais j'ai constaté que le clic ne bougeait pas, donc la page Web générée était une page Web statique, mais elle ressemblait à 80 % à la couleur du logo et à celle du logo. les autres cases d'index étaient également très claires, au moins elles avaient la saveur de la version originale de Son.


Enregistrement de la conversation : https://poe.com/s/Pe9cXFpmFHQqPAZHZOgU

Maintenant, avec cette base, je peux déjà créer moi-même un site Web d’outils exclusifs. Imaginez que toutes sortes d'outils pratiques soient rassemblés dans un site Web personnalisé, et que vous puissiez l'utiliser en un clic à tout moment et en tout lieu. C'est vraiment pratique et cool !

1

Scénario 2 : Démonstration de l'analyse du rapport financier NVIDIA 2024

Dans le passé, de nombreux résultats des rapports financiers d'analyse de l'IA étaient du texte. Nous essayons maintenant d'utiliser des graphiques pour démontrer l'effet.

Mots rapides :

Pouvez-vous analyser les informations ? https://investor.nvidia.com/news/press-release-details/2024/NVIDIA-Announces-Financial-Results-for-Fourth-Quarter-and-Fiscal-2024/ et transformez-le en une démo interactive digeste pour vous aider je comprends

Poe's Preview utilisait initialement une simple démonstration interactive pour montrer les principaux indicateurs financiers de NVIDIA. En cliquant sur différents boutons, vous pouvez afficher des graphiques de revenus, de bénéfices et de bénéfices par action. Cela semble assez puissant, pas du tout inférieur à Artifacts.

La version professionnelle optimisée est ici. Elle compare non seulement divers indicateurs, mais fournit également un aperçu complet de la situation financière de NVIDIA, y compris la présentation des données et l'analyse professionnelle. L'effet global n'est pas mauvais, il suffit de regarder l'image.

Enregistrement de la conversation : https://poe.com/s/NaFg8czE3NKSDu1vehH1

1

Scénario 3 : Créer des fiches de connaissances en chimie

Je me souviens que l'un des cas de candidature Web générés par le compte officiel de Poe estCartes de connaissancesCartes mémo :

https://poe.com/s/HDAXQjBX9qmsInjjgV4X, pourquoi ne pas l'utiliser comme prototype pour créer une carte de connaissances en chimie ?


La réalisation des cartes est également très simple. Après quelques itérations de base, les effets sortiront. Les principales itérations et modifications sont les suivantes :

  • Informations textuelles de base :Les cartes comportent des concepts au recto et des explications des concepts au verso.

  • Mot:Le texte précédent et suivant se distinguent par leur taille, leur couleur de fond, etc.

  • Ton:La tonalité générale est la couleur Moran, qui semble plus confortable.

Dialogue d'effet de carte : https://poe.com/s/1TgDhUkoKmhjMq75yXhF

Les amis attentifs peuvent voir qu'en plus du retournement et de l'interaction, j'ai également ajoutéID utilisateur, en temps réel,Augmentation du caractère unique et de la nature en temps réel de la carte.


1

Scène 4 : Animation de simulation du cycle de l'eau

Aujourd'hui, nous allons rêver à nos années de lycée et créer un processus d'animation du cycle de l'eau afin que la page puisse automatiquement lire des effets d'animation.

Mots rapides :

Utilisez React pour animer la façon dont l'eau circule. Pour rendre les choses plus compliquées, ajoutez des emoji ou des svg.

J'ai besoin d'un composant React pour un processus de boucle d'eau. À gauche se trouve une animation montrant les quatre étapes d’évaporation, de condensation, de précipitation et de collecte ; à droite se trouve la description textuelle correspondante. Veuillez utiliser l'API Web Speech pour ajouter une fonction de lecture automatique de la parole, afin que le contenu de la parole soit cohérent avec le texte. Animé en SVG, chaque étape dure 8 secondes. La conception globale doit être concise, claire et facile à comprendre. Assurez-vous que les animations sont plus fluides et que le texte est plus simple.Et prévisualisez l'affichage directement dans les aperçus

Processus de dialogue : https://poe.com/s/OujTxBMnSknxHaqmBhXs

Pas seulementDémonstration automatique d'animation, près deUne description condensée du processus du cycle de l’eau , très clair et distinct. Lorsque les enseignants enseignent des concepts complexes, ils peuvent facilement créer des présentations tout en préparant les didacticiels, de manière rapide et intuitive. Il s'agit d'un artefact permettant aux enseignants de gagner du temps et du travail !

1

Scénario 5 : Créez votre propre site Web d'outil de décompression

J'ai parcouru le site Web il y a deux jours et j'ai trouvé un site Web intéressant. Ce site Web affiche des effets de souris de style années 90. Il est conçu pour afficher cet effet de souris nostalgique. Il montre une série d'effets de souris implémentés via JavaScript, qui peuvent suivre le mouvement de votre souris ou le toucher de votre doigt. Vous pouvez cliquer n'importe où pour changer différents effets, tels que les effets arc-en-ciel, etc. Essayez ensuite d'utiliser la fonction Aperçu de Poe.

Mots rapides :

Créez un artefact de décompression, voici les informations :

https://cursoreffects.com/

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

Style simple pour la première fois :


Le style de la première version était trop simple, j'ai donc demandé à Claude 3.5 Sonnet de l'embellir.Des boutons verts et des arrière-plans blancs ont été ajoutés et les effets de la souris ont été augmentés de 4 à 11.


Mais à ce moment-là, j'ai constaté que le « texte » et les « effets de curseur » occupaient tout l'écran, et je ne pouvais pas mieux voir l'effet des clics de souris. Continuez à vous ajuster et dites à Claude 3.5 Sonnet :Libérez l'espace central tout en continuant à embellir l'effet visuel, il existe les 2 styles d’effets différents suivants.

Nous constaterons que la couleur de cette version utilisedégradé de couleur, très rafraîchissant en même temps ; la position médiane est également libérée, et l'effet global est plutôt bon.


effet dégradé rose


effet dégradé bleu

En fait, l'effet ci-dessus est tout à fait satisfaisant, mais je souhaite que la page entière soit plus concise. Si nous regardons attentivement, nous trouverons :

  • Il y a beaucoup de texte sur toute la page et les deux lignes de petits caractères au milieu ont des significations qui se chevauchent. L'une d'elles peut être supprimée ;

  • Le surnom des effets spéciaux du curseur ci-dessous prend trop de place et attire trop d'attention. Il peut être transformé en un bouton qui change au fur et à mesure que le joueur clique.

J'ai ensuite continué en disant à Claude 3.5 Sonnet qu'il devait être concis et clair. L'effet final est le suivant. La couleur est relativement claire et le contenu affiché sur toute la page est relativement complet sans contenu inutile.


Après l'optimisation finale, la police a été remplacée par un style plus approprié. Toute la couleur d'arrière-plan était dégradée de manière aléatoire, ce qui était très intéressant.

Outil de décompression auto-construit : https://poe.com/s/xPxoi0qCl4JVsXw3GxqV

1

enfin

Que ce soit Poe ou Claude, l’apparition de Preview/Artifacts fait l’écrantexte, codevisualiser,Cette étape devient plus simple et plus facile à mettre en œuvre.


  • Pour les développeurs, Artifacts peut générer et réparer du code, réduisant ainsi le temps de codage manuel ;

  • Pour la collaboration en équipe, le fait de pouvoir visualiser, éditer et créer du contenu en temps réel sur la même plateforme réduit considérablement la perte entre les transmissions d'informations.

  • Pour les enseignants, utilisez Claude 3.5 Sonnet pour générer du contenu pédagogique et des présentations afin de simplifier le processus de production. Les étudiants peuvent accéder plus facilement aux ressources d’apprentissage et utiliser des démonstrations en temps réel pour renforcer leur intérêt pour l’apprentissage.

Qu'il s'agisse de développeurs, de collaboration en équipe ou d'éducateurs, l'efficacité du travail et de la vie quotidienne a été grandement améliorée. Il y a beaucoup de scènes comme celle-ci dans la vie...


Après avoir fini de créer l'outil de décompression, j'ai directement partagé l'outil de décompression fait maison avec mon ami programmeur. C'était une conversation avec lui.


Il a dit : "Il faudrait une journée pour écrire un code comme celui-ci", mais je n'y ai passé qu'une demi-heure au maximum aujourd'hui (PS : Code Novice) N'est-ce pas le début d'une sorte d'IA entrant dans les maisons. des gens ordinaires ?

Nous espérons que davantage d’IA entrera dans les foyers des gens ordinaires et dans la vision de chacun à l’avenir.

Les références:

  1. Site officiel de Poe : https://poe.com/

  2. Présentation de la mise à jour Claude 3.5 Sonnet :

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

  3. Artefact de décompression original : https://cursoreffects.com/

  4. Station de collecte et d'agrégation de cas Vitrine des artefacts Claude :

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

Référence de cas de candidature Web officiellement générée par Poe :

  1. Présentation interactive : https://poe.com/s/NlX2WRElDUvtuuMSFrZq

  2. Cartes de connaissances Flashcards : https://poe.com/s/HDAXQjBX9qmsInjjgV4X

  3. Boîte à rythmes électronique Boîte à rythmes : https://poe.com/s/G4HshkCQCaXVfg0ndPZK

  4. Grand collisionneur de couleurs : https://poe.com/s/neKbyqEJYUtiRjeC6b5f