noticias

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

Autor ｜ Conejo de Jade con Sal y Pimienta
Correo electrónico ｜[email protected]

Cuando se lanzó Claude 3.5 Sonnet, la función de demostración de artefactos también se actualizó. En ese momento, me sorprendió el efecto de demostración.

En cuanto a Artifacts, permite a los usuarios crear y hacer referencia a grandes cantidades de contenido independiente en conversaciones.

Cuando le preguntamos a Claude sobre “Fragmentos de código, documentos de texto o diseños de sitios web” y otro contenido, los Artefactos aparecen en una ventana dedicada, que se muestra al lado de la conversación. Si el resultado no es satisfactorio, podemos modificar, iterar y mejorar inmediatamente la creación de Claude.

La imagen muestra el efecto HTML generado por Preview a través del diálogo con Claude 3.5 Sonnet en Poe. Dirección de diálogo: https://poe.com/s/YEms220OFPLfoZhPKfLI

Ahora por fin ha llegado la esperaPoe ha actualizado oficialmente la función Vista previa, el efecto es similar a la demostración en tiempo real de Artifacts y también admite la generación en tiempo real de tres modelos: Claude 3.5 Sonnet, ChatGPT-4o y Gemini 1.5 Pro.

La imagen de la izquierda muestra las actualizaciones de Claude 3.5 Sonnet y Artifacts, y la imagen de la derecha muestra la vista previa de Poe.

Interrumpiendo una frase, aquí tienes una breve explicación.¿Qué es Poe?。

Poe es una plataforma de IA lanzada por Quora, un "Zhihu" (comunidad de preguntas y respuestas) norteamericana, a finales de 2022. A través de ella, los usuarios pueden comunicarse con diferentes modelos de IA, incluidos modelos conocidos como ChatGPT y Claude. La intención de diseño original de Poe es proporcionar una plataforma de chat diversa, que permita a los usuarios elegir el que mejor les convenga entre múltiples modelos de IA para interactuar, ya sea haciendo preguntas, pidiendo ayuda con la programación o teniendo conversaciones relajadas, Poe puede. satisfacerlo. Cuando Poe actualizó la función de demostración de Vista previa, ¡me sentí muy feliz!

Habiendo dicho tanto, no puedo esperar. Echemos un vistazo a algunos casos prácticos.

1

Escenario 1: crear una página web de juego atractiva

En Internet, a menudo vemos varios sitios web de recopilación de herramientas. Si existiera una herramienta que pudiera ayudarnos a crear fácilmente nuestro propio sitio web de colección visual, ¿no nos ahorraría mucho tiempo de programación? Recientemente, descubrí un sitio web de juegos. Cada vez que hago clic en él, siento que estoy abriendo una caja ciega. Contiene varios juegos, herramientas y experimentos de red. Es simplemente una colección perfecta de herramientas de juegos.

Me preguntaba: ¿Puedo usar la función Vista previa de Poe?Crea una página de demostración en vivo como esta ¿O incluso crear un sitio web de recopilación de herramientas? Para verificar esta idea, decidí probarla creando primero una página estática. ¡Este es el primer paso básico!

Utilizo Poe directamente para hablar con el Claude 3.5 Sonnet. Lo que empezó como una pregunta puramente textual generó texto y soluciones;

Luego agregué "Obtenga una vista previa de la pantalla directamente en Vistas previas”, el efecto en tiempo real fue evidente de inmediato y el efecto fue realmente bueno.

Consejo: https://toms.toys/ Visita esta página, crea un tutorial de juego y muéstralo directamente en Vistas previas.

Después de generarlo, intenté hacer clic en las palabras rojas, pero descubrí que el clic no se movía, por lo que la página web generada era una página web estática, pero se veía 80% similar. El color del logotipo básicamente coincidía y el. Otros cuadros de índice también eran muy claros, al menos tenía el sabor de la versión original.

Registro de conversación: https://poe.com/s/Pe9cXFpmFHQqPAZhZOgU

Ahora, con esta base, ya puedo crear un sitio web con una herramienta exclusiva por mi cuenta. Imagine que todo tipo de herramientas prácticas están reunidas en un sitio web personalizado y puede usarlo con un clic en cualquier momento y en cualquier lugar. ¡Es realmente conveniente y genial!

1

Escenario 2: demostración del análisis del informe financiero de NVIDIA 2024

En el pasado, muchos resultados de informes financieros de análisis de IA eran texto. Ahora intentamos utilizar gráficos para demostrar el efecto.

Palabras rápidas:

¿Puedes analizar la información? https://investor.nvidia.com/news/press-release-details/2024/NVIDIA-Announces-Financial-Results-for-Fourth-Quarter-and-Fiscal-2024/ y conviértalo en una demostración interactiva digerible para ayudar yo lo entiendo

La vista previa de Poe utilizó inicialmente una demostración interactiva simple para mostrar los principales indicadores financieros de NVIDIA. Al hacer clic en diferentes botones, puede ver gráficos de ingresos, ganancias y ganancias por acción. Se siente bastante poderoso, no inferior en absoluto a Artifacts.

La versión profesional optimizada está aquí. No solo compara varios indicadores, sino que también proporciona una descripción general completa del estado financiero de NVIDIA, incluida la presentación de datos y el análisis profesional. El efecto general no es malo, solo mire la imagen.

Registro de conversación: https://poe.com/s/NaFg8czE3NKSDu1vehH1

1

Escenario 3: hacer tarjetas de conocimientos químicos

Recuerdo que uno de los casos de aplicación web generados por la cuenta oficial de Poe esTarjetas de conocimientoTarjetas didácticas:

https://poe.com/s/HDAXQjBX9qmsInjjgV4X, ¿por qué no utilizar esto como prototipo para hacer una tarjeta de conocimientos de química?

La producción de tarjetas también es muy sencilla. Después de algunas iteraciones básicas, aparecerán los efectos. Las principales iteraciones y modificaciones son las siguientes:

• Información básica del texto:Las tarjetas tienen conceptos en el frente y explicaciones de los conceptos en el reverso.

• Palabra:El texto anterior y siguiente se distinguen por tamaño, color de fondo, etc.

• tono:El tono de color general es el color Moran, que parece más cómodo.

Diálogo efecto carta: https://poe.com/s/1TgDhUkoKmhjMq75yXhF

Los amigos atentos pueden ver que además de voltear e interactuar, también agreguéIdentificación de usuario, tiempo real,Aumentó la singularidad y la naturaleza en tiempo real de la tarjeta.

1

Escena 4: Simulación de la animación del ciclo del agua.

Hoy volveremos a soñar con nuestros días de escuela secundaria y crearemos un proceso de animación del ciclo del agua para que la página pueda reproducir automáticamente efectos de animación.

Palabras rápidas:

Haz una animación usando React para mostrar cómo circula el agua. Si es más complicado, agrega emoji o svg.

Necesito un componente React para un proceso de circuito de agua. A la izquierda hay una animación que muestra las cuatro etapas de evaporación, condensación, precipitación y recolección; a la derecha está la descripción del texto correspondiente. Utilice Web Speech API para agregar la función de reproducción automática de voz, de modo que el contenido de la voz sea coherente con el texto. Animado usando SVG, cada etapa dura 8 segundos. El diseño general debe ser conciso, claro y fácil de entender. Asegúrese de que las animaciones sean más fluidas y el texto más sencillo.Y obtenga una vista previa de la pantalla directamente en Vistas previas

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

No soloDemostración automática de animación., junto aUna descripción condensada del proceso del ciclo del agua. , muy claro y distinto. Cuando los profesores enseñan conceptos complejos, pueden crear fácilmente presentaciones mientras preparan el material didáctico, de forma rápida e intuitiva. ¡Este es un artefacto que ahorra tiempo y trabajo a los profesores!

1

Escenario 5: cree su propio sitio web de herramientas de descompresión

Estaba navegando por el sitio web hace dos días y encontré un sitio web interesante. Este sitio web es un sitio web que muestra efectos de mouse al estilo de los 90. Está diseñado para mostrar este efecto de mouse nostálgico. Muestra una serie de efectos de mouse implementados a través de JavaScript, que pueden seguir el movimiento del mouse o el toque de los dedos. Puede hacer clic en cualquier lugar para cambiar diferentes efectos, como efectos de arco iris, etc. Luego intente usar la función Vista previa de Poe.

Palabras rápidas:

Crea un artefacto de descompresión, esta es la información:

https://cursoreffects.com/

https://github.com/tholman/efectos-del-cursor

Estilo simple por primera vez:

El estilo de la primera versión era demasiado simple, así que le pedí a Claude 3.5 Sonnet que lo embelleciera.Se agregaron botones verdes y fondos blancos y los efectos del mouse se aumentaron de 4 a 11.。

Pero en ese momento, descubrí que el "texto" y los "efectos de cursor" ocupaban toda la pantalla y no podía ver mejor el efecto de los clics del mouse. Continúe ajustando y dígale al Soneto de Claude 3.5:Libera el espacio intermedio mientras continúas embelleciendo el efecto visual., existen los siguientes 2 estilos diferentes de efectos.

Encontraremos que el color de esta versión usadegradado de color, muy refrescante al mismo tiempo; la posición media también se libera y el efecto general es bastante bueno.

efecto degradado rosa

efecto degradado azul

De hecho, el efecto anterior es bastante satisfactorio, pero quiero que toda la página sea más concisa. Si miramos de cerca encontraremos:

• Hay mucho texto en toda la página y las dos líneas de caracteres pequeños en el medio tienen significados superpuestos, uno de los cuales se puede eliminar;

• El apodo de efectos especiales del cursor a continuación ocupa demasiado espacio y atrae demasiada atención. Se puede convertir en un botón que cambia a medida que el jugador hace clic.

Luego continué diciéndole a Claude 3.5 Sonnet que fuera más conciso y claro. El efecto final es el siguiente: los colores son relativamente claros y el contenido que se muestra en toda la página es relativamente completo sin contenido redundante.

Después de la optimización final, la fuente fue reemplazada por un estilo más apropiado. Todo el color de fondo tenía un degradado aleatorio, lo cual fue muy interesante.

Herramienta de descompresión de construcción propia: https://poe.com/s/xPxoi0qCl4JVsXw3GxqV

1

por fin

Ya sea Poe o Claude, la apariencia de Vista previa/Artefactos hace que la pantallatexto, códigovisualizar,Este paso se vuelve más simple y fácil de implementar.

• Para los desarrolladores, Artifacts puede generar y reparar código, reduciendo el tiempo de codificación manual;

• Para la colaboración en equipo, poder ver, editar y crear contenido en tiempo real en la misma plataforma reduce en gran medida la pérdida entre la transmisión de información.

• Para los educadores, utilice Claude 3.5 Sonnet para generar contenido didáctico y presentaciones para simplificar el proceso de producción. Los estudiantes pueden acceder más fácilmente a los recursos de aprendizaje y utilizar demostraciones en tiempo real para mejorar su interés en aprender.

Ya sean desarrolladores, colaboración en equipo o educadores, la eficiencia del trabajo y la vida diaria ha mejorado enormemente. Hay muchas escenas como esta en la vida...

Después de terminar de crear la herramienta de descompresión, compartí directamente la herramienta de descompresión casera con mi amigo programador. Esta fue una conversación con él.

Dijo: "Me llevaría un día escribir un código como este", pero hoy solo le dediqué media hora como máximo (PD: codificador novato). ¿No es este el comienzo de una especie de IA que ingresa a los hogares? de la gente corriente?

Esperamos que en el futuro más IA ingrese a los hogares de la gente común y a la visión de todos.

Referencias:

1. Sitio web oficial de Poe: https://poe.com/

2. Introducción a la actualización de Claude 3.5 Sonnet:

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

3. Artefacto de descompresión original: https://cursoreffects.com/

4. Estación de recopilación y agregación de casos Claude Artifacts Showcase:

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

Referencia de caso de aplicación web generada oficialmente por Poe:

1. Presentación interactiva: https://poe.com/s/NlX2WRElDUvtuuMSFrZq

2. Tarjetas de conocimientos Tarjetas didácticas: https://poe.com/s/HDAXQjBX9qmsInjjgV4X

3. Caja de ritmos electrónica Caja de ritmos: https://poe.com/s/G4HshkCQCaXVfg0ndPZK

4. Gran colisionador de colores: https://poe.com/s/neKbyqEJYUtiRjeC6b5f