notizia

Ho usato POE per riprodurre un piccolo gioco, difficoltà: zero|AI fresh test

2024-07-16

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


Autore|Coniglio di giada sale e pepe
Invia un'e-mail a |[email protected]

Quando è stato rilasciato Claude 3.5 Sonnet, è stata aggiornata anche la funzione di dimostrazione degli Artifacts. A quel tempo, sono rimasto scioccato dall'effetto della dimostrazione.

Per quanto riguarda Artifacts, consente agli utenti di creare e fare riferimento a grandi quantità di contenuti indipendenti nelle conversazioni.

Quando abbiamo chiesto a Claude “Frammenti di codice, documenti di testo o progetti di siti Web” e altri contenuti, gli artefatti appaiono in una finestra dedicata, visualizzata parallelamente alla conversazione. Se l'output non è soddisfacente, possiamo immediatamente modificare, iterare e migliorare la creazione di Claude.


L'immagine mostra l'effetto HTML generato da Anteprima attraverso il dialogo con Claude 3.5 Sonetto in Poe. Indirizzo del dialogo: https://poe.com/s/YEms220OFPLfoZhPKfLI

Ora l'attesa è finalmente arrivataPoe ha ufficialmente aggiornato la funzione Anteprima, l'effetto è simile alla dimostrazione in tempo reale di Artifacts e supporta anche la generazione in tempo reale di tre modelli: Claude 3.5 Sonnet, ChatGPT-4o e Gemini 1.5 Pro.


L'immagine a sinistra mostra gli aggiornamenti di Claude 3.5 Sonnet e Artifacts, e l'immagine a destra mostra l'anteprima di Poe

Interrompendo una frase, ecco una breve spiegazioneCos'è Poe?

Poe è una piattaforma di intelligenza artificiale lanciata da Quora, una "Zhihu" (comunità di domande e risposte) nordamericana, alla fine del 2022. Attraverso di essa gli utenti possono comunicare con diversi modelli di intelligenza artificiale, inclusi modelli noti come ChatGPT e Claude. L'intenzione progettuale originale di Poe è quella di fornire una piattaforma di chat diversificata, consentendo agli utenti di scegliere quella più adatta a loro tra più modelli di intelligenza artificiale per l'interazione, sia che si tratti di porre domande, chiedere aiuto con la programmazione o avere conversazioni rilassate, Poe può farlo soddisfarlo. Quando Poe ha aggiornato la funzione Anteprima demo, ero così felice!


Detto così tanto, non vedo l’ora. Diamo un’occhiata ad alcuni casi pratici.


1

Scenario 1: crea una pagina web di gioco di bell'aspetto

Su Internet vediamo spesso diversi siti web di raccolta di strumenti. Se esistesse uno strumento che potesse aiutarci a creare facilmente il nostro sito web di raccolte visive, non risparmierebbe molto tempo di programmazione? Di recente ho scoperto un sito Web di giochi. Ogni volta che clicco su di esso, mi sento come se stessi aprendo una scatola cieca. Contiene vari giochi, strumenti ed esperimenti di rete. È semplicemente una raccolta perfetta di strumenti di gioco.

Mi stavo solo chiedendo: posso usare la funzione Anteprima di Poe?Crea una pagina demo live come questa o addirittura creare un sito Web per la raccolta di strumenti? Per verificare questa idea, ho deciso di provarlo creando prima una pagina statica. Questo è il primo passo fondamentale!

Utilizzo direttamente Poe per parlare con il Sonetto di Claude 3.5. Ciò che era iniziato come una domanda puramente testuale ha generato testo e soluzioni;


Successivamente ho aggiunto "Visualizza l'anteprima del display direttamente in Anteprime", l'effetto in tempo reale è stato immediatamente evidente ed è stato davvero buono.

Suggerimento: https://toms.toys/ Visita questa pagina, crea un tutorial di gioco e visualizzalo direttamente in Anteprime.


Dopo averlo generato, ho provato a fare clic sulle parole rosse, ma ho scoperto che il clic non si spostava, quindi la pagina Web generata era una pagina Web statica, ma sembrava simile all'80%. anche gli altri riquadri erano molto chiari, almeno avevano il sapore della versione originale di Son.


Registro della conversazione: https://poe.com/s/Pe9cXFpmFHQqPAZhZOgU

Ora, con queste basi, posso già costruire da solo un sito web con strumenti esclusivi. Immagina che tutti i tipi di strumenti pratici siano raccolti in un sito Web personalizzato e puoi utilizzarlo con un clic sempre e ovunque. È davvero comodo e interessante!

1

Scenario 2: dimostrazione dell'analisi del report finanziario NVIDIA 2024

In passato, molti risultati dei report finanziari dell'analisi dell'intelligenza artificiale erano costituiti da testo. Ora proviamo a utilizzare i grafici per dimostrarne l'effetto.

Parole suggerite:

Puoi analizzare le informazioni? https://investor.nvidia.com/news/press-release-details/2024/NVIDIA-Announces-Financial-Results-for-Fourth-Quarter-and-Fiscal-2024/ e trasformarlo in una demo interattiva digeribile per aiutare me lo capisco

L'anteprima di Poe inizialmente utilizzava una semplice dimostrazione interattiva per mostrare i principali indicatori finanziari di NVIDIA. Facendo clic su diversi pulsanti, puoi visualizzare i grafici delle entrate, dei profitti e degli utili per azione. Sembra abbastanza potente, per nulla inferiore ad Artifacts.

È qui la versione professionale ottimizzata. Non solo confronta vari indicatori, ma fornisce anche una panoramica completa dello stato finanziario di NVIDIA, inclusa la presentazione dei dati e l'analisi professionale. L'effetto complessivo non è male, basta guardare l'immagine.

Registro della conversazione: https://poe.com/s/NaFg8czE3NKSDu1vehH1

1

Scenario 3: creazione di schede di conoscenza chimica

Ricordo che uno dei casi di applicazione web generati dall'account ufficiale di Poe èCarte di conoscenzaSchede didattiche:

https://poe.com/s/HDAXQjBX9qmsInjjgV4X, perché non usarlo come prototipo per creare una scheda di conoscenza della chimica?


Anche la produzione delle carte è molto semplice. Dopo alcune iterazioni di base, verranno visualizzati gli effetti. Le principali iterazioni e modifiche sono le seguenti:

  • Informazioni di testo di base:Le carte hanno concetti sul davanti e spiegazioni dei concetti sul retro.

  • Parola:Il testo precedente e quello successivo si distinguono per dimensione, colore di sfondo, ecc.

  • tono:La tonalità di colore generale è il colore Moran, che sembra più confortevole.

Dialogo sugli effetti delle carte: https://poe.com/s/1TgDhUkoKmhjMq75yXhF

Gli amici attenti possono vedere che oltre al lancio e all'interazione, ho anche aggiuntoID utente, in tempo reale,Aumentata l'unicità e la natura in tempo reale della carta.


1

Scena 4: simulazione dell'animazione del ciclo dell'acqua

Oggi sogneremo i tempi del liceo e creeremo un processo di animazione del ciclo dell'acqua in modo che la pagina possa riprodurre automaticamente gli effetti di animazione.

Parole suggerite:

Crea un'animazione utilizzando React per mostrare come circola l'acqua. Se è più complicato, aggiungi emoji o SVG.

Ho bisogno di un componente React per un processo di ciclo dell'acqua. A sinistra c'è un'animazione che mostra le quattro fasi di evaporazione, condensazione, precipitazione e raccolta, a destra c'è la descrizione testuale corrispondente; Utilizza l'API Web Speech per aggiungere la funzione di riproduzione vocale automatica, in modo che il contenuto vocale sia coerente con il testo. Animato utilizzando SVG, ogni fase dura 8 secondi. Il design complessivo dovrebbe essere conciso, chiaro e di facile comprensione. Assicurati che le animazioni siano più fluide e che il testo sia più snello.E visualizza l'anteprima del display direttamente in Anteprime

Processo di dialogo: https://poe.com/s/OujTxBMnSknxHaqmBhXs

Non soloDimostrazione automatica dell'animazione, accanto aUna descrizione condensata del processo del ciclo dell'acqua , molto chiaro e distinto. Quando gli insegnanti insegnano concetti complessi, possono creare facilmente presentazioni mentre preparano il materiale didattico, in modo rapido e intuitivo. Questo è un artefatto che fa risparmiare tempo e fatica per gli insegnanti!

1

Scenario 5: crea il tuo sito web con uno strumento di decompressione

Stavo esplorando il sito Web due giorni fa e ho trovato un sito Web interessante. Questo sito Web è un sito Web che mostra effetti del mouse in stile anni '90. È progettato per visualizzare questo effetto mouse nostalgico. Mostra una serie di effetti del mouse implementati tramite JavaScript, che possono seguire il movimento del mouse o il tocco delle dita. Puoi fare clic ovunque per cambiare effetti diversi, come effetti arcobaleno, ecc. Quindi prova a utilizzare la funzione Anteprima di Poe.

Parole suggerite:

Crea un artefatto di decompressione, queste sono le informazioni:

Italiano: https://cursoreffects.com/

https://github.com/tholman/effetti-cursore

Stile semplice per la prima volta:


Lo stile della prima versione era troppo semplice, quindi ho chiesto a Claude 3.5 Sonnet di abbellirlo.Sono stati aggiunti pulsanti verdi e sfondi bianchi e gli effetti del mouse sono stati aumentati da 4 a 11.


Ma in quel momento, ho scoperto che il "testo" e gli "effetti cursore" occupavano l'intero schermo e non potevo vedere meglio l'effetto dei clic del mouse. Continua ad adattare e dì a Claude 3.5 Sonetto:Libera lo spazio centrale continuando ad abbellire l'effetto visivo, sono disponibili i seguenti 2 diversi stili di effetti.

Scopriremo che utilizza il colore di questa versionecolore sfumato, molto rinfrescante allo stesso tempo; anche la posizione centrale viene liberata e l'effetto complessivo è piuttosto buono.


effetto sfumato rosa


effetto sfumato blu

In effetti, l'effetto sopra è abbastanza soddisfacente, ma voglio che l'intera pagina sia più concisa. Se guardiamo attentamente troveremo:

  • C'è molto testo nell'intera pagina e le due righe di piccoli caratteri al centro hanno significati sovrapposti, uno dei quali può essere cancellato;

  • Il soprannome degli effetti speciali del cursore di seguito occupa troppo spazio e attira troppa attenzione. Può essere ripetuto in un pulsante che cambia quando il giocatore fa clic.

Ho poi continuato a dire a Claude 3.5 Sonnet di essere più conciso e chiaro. L'effetto finale è il seguente. I colori sono relativamente chiari e il contenuto visualizzato sull'intera pagina è relativamente completo senza contenuti ridondanti.


Dopo l'ottimizzazione finale, il carattere è stato sostituito con uno stile più appropriato. L'intero colore dello sfondo era sfumato in modo casuale, il che è stato molto interessante.

Strumento di decompressione autocostruito: https://poe.com/s/xPxoi0qCl4JVsXw3GxqV

1

infine

Che si tratti di Poe o di Claude, la comparsa di Anteprima/Artefatti fa bella mostra di sétesto, codicevisualizzare,Questo passaggio diventa più semplice e facile da implementare.


  • Per gli sviluppatori, Artifacts può generare e riparare codice, riducendo i tempi di codifica manuale;

  • Per la collaborazione in team, la possibilità di visualizzare, modificare e creare contenuti in tempo reale sulla stessa piattaforma riduce notevolmente la perdita nella trasmissione delle informazioni.

  • Per gli educatori, utilizzare Claude 3.5 Sonnet per generare contenuti didattici e presentazioni per semplificare il processo di produzione. Gli studenti possono accedere più facilmente alle risorse didattiche e utilizzare dimostrazioni in tempo reale per aumentare il loro interesse nell'apprendimento.

Che si tratti di sviluppatori, collaborazione in team o educatori, l'efficienza del lavoro e della vita quotidiana è stata notevolmente migliorata. Ci sono molte scene come questa nella vita...


Dopo aver finito di creare lo strumento di decompressione, ho condiviso direttamente lo strumento di decompressione fatto in casa con il mio amico programmatore. Questa è stata una conversazione con lui.


Ha detto: "Ci vorrebbe un giorno per scrivere un codice come questo", ma oggi ci ho dedicato solo mezz'ora al massimo (PS: programmatore alle prime armi) Non è questo l'inizio di una sorta di intelligenza artificiale che entra nelle case della gente comune?

Ci auguriamo che in futuro sempre più IA entrino nelle case delle persone comuni e nella visione di tutti.

Riferimenti:

  1. Sito ufficiale di Poe: https://poe.com/

  2. Introduzione all'aggiornamento del sonetto Claude 3.5:

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

  3. Artefatto di decompressione originale: https://cursoreffects.com/

  4. Stazione di raccolta e aggregazione dei casi Claude Artifacts Showcase:

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

Poe ha generato ufficialmente il riferimento al caso dell'applicazione web:

  1. Presentazione interattiva: https://poe.com/s/NlX2WRElDUvtuuMSFrZq

  2. Schede di conoscenza Flashcard: https://poe.com/s/HDAXQjBX9qmsInjjgV4X

  3. Drum machine elettronica Drum Machine: https://poe.com/s/G4HshkCQCaXVfg0ndPZK

  4. Collisore di colori di grandi dimensioni: https://poe.com/s/neKbyqEJYUtiRjeC6b5f