Nachricht

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

Autor｜Salz- und Pfeffer-Jade-Kaninchen
E-Mail: [email protected]

Als Claude 3.5 Sonnet veröffentlicht wurde, wurde auch die Funktion der Artefaktdemonstration aktualisiert. Damals war ich schockiert über den Demonstrationseffekt.

In Bezug auf Artefakte können Benutzer große Mengen unabhängiger Inhalte in Gesprächen erstellen und darauf verweisen.

Als wir Claude fragten: „Codeschnipsel, Textdokumente oder Website-Designs” und anderen Inhalten werden die Artefakte in einem speziellen Fenster neben der Konversation angezeigt. Wenn die Ausgabe nicht zufriedenstellend ist, können wir Claudes Kreation sofort ändern, iterieren und verbessern.

Das Bild zeigt den HTML-Effekt, der von Preview durch Dialog mit Claude 3.5 Sonnet in Poe generiert wird. Dialogadresse: https://poe.com/s/YEms220OFPLfoZhPKfLI

Jetzt hat das Warten endlich begonnenPoe hat die Vorschaufunktion offiziell aktualisiertDer Effekt ähnelt der Echtzeitdemonstration von Artefakten und unterstützt auch die Echtzeitgenerierung von drei Modellen: Claude 3.5 Sonnet, ChatGPT-4o und Gemini 1.5 Pro.

Das Bild links zeigt die Aktualisierungen von Claude 3.5 Sonnet und Artifacts, und das Bild rechts zeigt Poes Vorschau

Um einen Satz zu unterbrechen, hier eine kurze ErklärungWas ist Poe?。

Poe ist eine KI-Plattform, die Ende 2022 von Quora, einer nordamerikanischen „Zhihu“ (Frage-und-Antwort-Community), eingeführt wurde. Benutzer können darüber mit verschiedenen KI-Modellen kommunizieren, darunter bekannte Modelle wie ChatGPT und Claude. Die ursprüngliche Designabsicht von Poe besteht darin, eine vielfältige Chat-Plattform bereitzustellen, die es Benutzern ermöglicht, aus mehreren KI-Modellen das am besten geeignete für die Interaktion auszuwählen. Ganz gleich, ob es darum geht, Fragen zu stellen, um Hilfe bei der Programmierung zu bitten oder entspannte Gespräche zu führen, Poe kann diesen Anforderungen gerecht werden . Als Poe die Vorschau-Demofunktion aktualisierte, war ich so glücklich!

Nachdem ich so viel gesagt habe, kann ich es kaum erwarten, einen Blick auf ein paar praktische Fälle zu werfen.

1

Szenario 1: Erstellen Sie eine gut aussehende Spiele-Webseite

Im Internet sehen wir oft verschiedene Websites mit Werkzeugsammlungen. Wenn es ein Tool gäbe, mit dem wir ganz einfach unsere eigene Website für visuelle Sammlungen erstellen könnten, würde das nicht viel Programmierzeit sparen? Kürzlich habe ich eine Spiele-Website entdeckt, bei der ich das Gefühl habe, eine Blindbox zu öffnen. Es ist einfach eine perfekte Sammlung von Spiele-Tools.

Ich habe mich nur gefragt: Kann ich die Vorschaufunktion von Poe verwenden?Erstellen Sie eine Live-Demoseite wie diese , oder sogar eine Werkzeugsammlungs-Website erstellen? Um diese Idee zu überprüfen, habe ich beschlossen, sie zunächst auszuprobieren und eine statische Seite zu erstellen. Dies ist der grundlegende erste Schritt!

Ich verwende Poe direkt, um mit dem Claude 3.5 Sonnet zu sprechen. Was als reine Textfrage begann, generierte Text und Lösungen;

Später fügte ich hinzu:Sehen Sie sich die Anzeige direkt in der Vorschau in der Vorschau an„Der Echtzeiteffekt war sofort sichtbar und der Effekt war wirklich gut.

Tipp: https://toms.toys/ Besuchen Sie diese Seite, erstellen Sie ein Spiel-Tutorial und zeigen Sie es direkt in der Vorschau an.

Nachdem ich es erstellt hatte, versuchte ich, auf die roten Wörter zu klicken, stellte jedoch fest, dass sich der Klick nicht bewegte, sodass es sich bei der generierten Webseite um eine statische Webseite handelte, die jedoch zu 80 % ähnlich aussah. Die Farbe des Logos stimmte im Wesentlichen überein Auch andere Indexboxen waren sehr übersichtlich, zumindest hatte es den Flair der Originalversion von Son.

Gesprächsaufzeichnung: https://poe.com/s/Pe9cXFpmFHQqPAZhZOgU

Mit dieser Grundlage kann ich nun selbst eine exklusive Tool-Website erstellen. Stellen Sie sich vor, dass alle möglichen praktischen Tools auf einer benutzerdefinierten Website zusammengefasst sind und Sie sie jederzeit und überall mit einem Klick verwenden können. Das ist wirklich praktisch und cool!

1

Szenario 2: Demonstration der NVIDIA-Finanzberichtsanalyse 2024

In der Vergangenheit handelte es sich bei vielen Finanzberichten der KI-Analyse um Textausgaben. Jetzt versuchen wir, den Effekt mithilfe von Diagrammen zu veranschaulichen.

Aufforderungsworte:

Können Sie die Informationen analysieren? https://investor.nvidia.com/news/press-release-details/2024/NVIDIA-Announces-Financial-Results-for-Fourth-Quarter-and-Fiscal-2024/ und verwandeln Sie es in eine leicht verdauliche interaktive Demo, um zu helfen Ich verstehe es

Poe's Preview nutzte zunächst eine einfache interaktive Demonstration, um die wichtigsten Finanzindikatoren von NVIDIA zu zeigen. Durch Klicken auf verschiedene Schaltflächen können Sie Diagramme zu Umsatz, Gewinn und Gewinn pro Aktie anzeigen. Es fühlt sich ziemlich leistungsstark an und ist Artifacts in keiner Weise unterlegen.

Die optimierte professionelle Version vergleicht nicht nur verschiedene Indikatoren, sondern bietet auch einen umfassenden Überblick über den Finanzstatus von NVIDIA, einschließlich Datenpräsentation und professioneller Analyse. Der Gesamteffekt ist nicht schlecht, schauen Sie sich nur das Bild an.

Gesprächsaufzeichnung: https://poe.com/s/NaFg8czE3NKSDu1vehH1

1

Szenario 3: Chemie-Wissenskarten erstellen

Ich erinnere mich an einen der Webanwendungsfälle, die von Poes offiziellem Konto generiert wurdenWissenskartenLernkarten:

https://poe.com/s/HDAXQjBX9qmsInjjgV4X, warum nicht dies als Prototyp verwenden, um eine Chemie-Wissenskarte zu erstellen?

Die Herstellung von Karten ist ebenfalls sehr einfach. Nach einigen grundlegenden Iterationen ergeben sich folgende Auswirkungen:

• Grundlegende Textinformationen:Die Karten enthalten Konzepte auf der Vorderseite und Erläuterungen zu den Konzepten auf der Rückseite.

• Wort:Der vorangehende und der folgende Text werden durch Größe, Hintergrundfarbe usw. unterschieden.

• Ton:Der Gesamtfarbton ist Moran-Farbe, was angenehmer aussieht.

Karteneffektdialog: https://poe.com/s/1TgDhUkoKmhjMq75yXhF

Aufmerksame Freunde können sehen, dass ich neben dem Umblättern und der Interaktion auch etwas hinzugefügt habeBenutzer-ID, Echtzeit,Die Einzigartigkeit und Echtzeitcharakteristik der Karte wurde erhöht.

1

Szene 4: Simulation einer Wasserkreislaufanimation

Heute träumen wir zurück in unsere Schulzeit und erstellen einen Animationsprozess für den Wasserkreislauf, damit auf der Seite automatisch Animationseffekte abgespielt werden können.

Aufforderungsworte:

Verwenden Sie React, um die Wasserzirkulation zu animieren. Um es komplizierter zu machen, fügen Sie Emoji oder SVG hinzu.

Ich benötige eine React-Komponente für einen Wasserkreislaufprozess. Links ist eine Animation zu den vier Phasen Verdunstung, Kondensation, Niederschlag und Sammlung zu sehen, rechts die entsprechende Textbeschreibung. Bitte verwenden Sie die Web Speech API, um eine automatische Sprachwiedergabefunktion hinzuzufügen, damit der Sprachinhalt mit dem Text übereinstimmt. Mit SVG animiert, dauert jede Phase 8 Sekunden. Das Gesamtdesign sollte prägnant, klar und leicht verständlich sein. Stellen Sie sicher, dass die Animationen flüssiger und der Text schlanker sind.Und sehen Sie sich die Anzeige direkt in der Vorschau an

Dialogprozess: https://poe.com/s/OujTxBMnSknxHaqmBhXs

Nicht nurAutomatische Demonstration der Animation, nebenEine komprimierte Beschreibung des Wasserkreislaufprozesses , sehr klar und deutlich. Wenn Lehrer komplexe Konzepte unterrichten, können sie schnell und intuitiv Präsentationen erstellen und gleichzeitig Kursunterlagen vorbereiten. Dies ist ein zeit- und arbeitssparendes Artefakt für Lehrer!

1

Szenario 5: Erstellen Sie Ihre eigene Dekomprimierungstool-Website

Ich habe vor zwei Tagen auf der Website gestöbert und eine interessante Website gefunden, die Mauseffekte im 90er-Jahre-Stil zeigt. Es zeigt eine Reihe von durch JavaScript implementierten Mauseffekten, die Ihrer Mausbewegung oder Fingerberührung folgen können. Sie können auf eine beliebige Stelle klicken, um zwischen verschiedenen Effekten zu wechseln, z. B. Regenbogeneffekten usw. Versuchen Sie es dann mit der Vorschaufunktion von Poe.

Aufforderungsworte:

Erstellen Sie ein Dekomprimierungsartefakt. Dies sind die Informationen:

https://cursoreffects.com/

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

Zum ersten Mal einfacher Stil:

Der Stil der ersten Version war zu einfach, deshalb habe ich Claude 3.5 Sonnet gebeten, ihn zu verschönern.Grüne Schaltflächen und weiße Hintergründe wurden hinzugefügt und die Mauseffekte wurden von 4 auf 11 erhöht.。

Zu diesem Zeitpunkt stellte ich jedoch fest, dass „Text“ und „Cursoreffekte“ den gesamten Bildschirm einnahmen und ich die Auswirkungen von Mausklicks nicht besser sehen konnte. Passen Sie weiter an und sagen Sie zu Claude 3.5 Sonett:Geben Sie den mittleren Raum frei und verschönern Sie gleichzeitig den visuellen Effektgibt es die folgenden zwei verschiedenen Effektstile.

Wir werden feststellen, dass die Farbe dieser Version verwendet wirdFarbverlauf, gleichzeitig sehr erfrischend; auch die Mittelposition wird frei, und der Gesamteffekt ist ziemlich gut.

rosa Farbverlaufseffekt

blauer Farbverlaufseffekt

Tatsächlich ist der obige Effekt recht zufriedenstellend, aber ich möchte, dass die gesamte Seite prägnanter ist. Wenn wir genau hinsehen, finden wir:

• Die gesamte Seite enthält viel Text und die beiden Zeilen mit kleinen Zeichen in der Mitte haben überlappende Bedeutungen. Eine davon kann gelöscht werden.

• Der Spitzname für Cursor-Spezialeffekte nimmt zu viel Platz ein und erregt zu viel Aufmerksamkeit. Er kann in eine Schaltfläche umgewandelt werden, die sich ändert, wenn der Spieler klickt.

Ich habe Claude 3.5 Sonnet dann weiterhin gesagt, dass es prägnant und klar sein sollte. Die Farbe ist relativ hell und der auf der gesamten Seite angezeigte Inhalt ist relativ vollständig, ohne unnötigen Inhalt.

Nach der letzten Optimierung wurde die Schriftart durch einen passenderen Stil ersetzt. Die gesamte Hintergrundfarbe war ein zufälliger Farbverlauf, was sehr interessant war.

Selbstgebautes Dekomprimierungstool: https://poe.com/s/xPxoi0qCl4JVsXw3GxqV

1

zu guter Letzt

Ob Poe oder Claude, das Erscheinungsbild von Vorschau/Artefakten prägt den BildschirmText, Codevisualisieren,Dieser Schritt wird einfacher und leichter umzusetzen.

• Für Entwickler kann Artifacts Code generieren und reparieren und so die manuelle Codierungszeit reduzieren;

• Für die Teamzusammenarbeit reduziert die Möglichkeit, Inhalte in Echtzeit auf derselben Plattform anzuzeigen, zu bearbeiten und zu erstellen, den Verlust zwischen Informationsübertragungen erheblich.

• Pädagogen können mit Claude 3.5 Sonnet Lehrinhalte und Präsentationen erstellen und so den Produktionsprozess vereinfachen. Schüler können einfacher auf Lernressourcen zugreifen und Echtzeitdemonstrationen nutzen, um ihr Interesse am Lernen zu steigern.

Ob es sich um Entwickler, Teamzusammenarbeit oder Lehrkräfte handelt, die Effizienz der täglichen Arbeit und des Lebens wurde erheblich verbessert. Solche Szenen gibt es im Leben viele...

Nachdem ich mit der Erstellung des Dekomprimierungstools fertig war, teilte ich das selbstgemachte Dekomprimierungstool direkt mit meinem befreundeten Programmierer. Dies war ein Gespräch mit ihm.

Er sagte: „Es würde einen Tag dauern, einen solchen Code zu schreiben“, aber ich habe heute höchstens eine halbe Stunde damit verbracht (PS: Code-Neuling). Ist das nicht der Beginn einer Art KI, die in die Häuser eindringt? der einfachen Leute?

Wir freuen uns darauf, dass in Zukunft mehr KI in die Häuser der gewöhnlichen Menschen und in die Visionen aller eindringt.

Verweise:

1. Offizielle Poe-Website: https://poe.com/

2. Einführung zum Claude 3.5 Sonnet-Update:

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

3. Ursprüngliches Dekomprimierungsartefakt: https://cursoreffects.com/

4. Fallsammel- und Aggregationsstation Claude Artifacts Showcase:

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

Von Poe offiziell generierte Fallreferenz für Webanwendungen:

1. Interaktive Präsentation: https://poe.com/s/NlX2WRElDUvtuuMSFrZq

2. Lernkarten für Wissenskarten: https://poe.com/s/HDAXQjBX9qmsInjjgV4X

3. Elektronische Drum-Maschine Drum Machine: https://poe.com/s/G4HshkCQCaXVfg0ndPZK

4. Großer Farbcollider: https://poe.com/s/neKbyqEJYUtiRjeC6b5f