news

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

Author｜Salt and Pepper Rabbit
Email: [email protected]

When Claude 3.5 Sonnet was released, the Artifacts demonstration function was also updated. I was shocked by the demonstration effect at that time.

Regarding Artifacts, it allows users to create and reference large amounts of independent content in conversations.

When we asked Claude aboutCode snippets, text documents, or website designs” When we create content such as a conversation, the Artifacts appear in a dedicated window, side by side with the conversation. If we are not satisfied with the output, we can immediately modify, iterate and improve Claude’s creation.

The picture shows the HTML effect generated by Preview in Poe through a dialogue with Claude 3.5 Sonnet. Dialogue address: https://poe.com/s/YEms220OFPLfoZhPKfLI

Now, finally, I have waited so long.Poe officially updated the Preview functionThe effect is similar to that of the Artifacts real-time demonstration, and it supports real-time generation of three models: Claude 3.5 Sonnet, ChatGPT-4o and Gemini 1.5 Pro.

The left picture shows the Claude 3.5 Sonnet and Artifacts update, and the right picture shows the Poe Preview

Let me just say this: here is a brief explanationWhat is Poe?。

Poe is an AI platform launched by Quora, the North American "Zhihu" (question-and-answer community) at the end of 2022. Users can use it to communicate with different AI models, including well-known models such as ChatGPT and Claude. Poe was originally designed to provide a diverse chat platform that allows users to choose the most suitable AI model for interaction from multiple AI models, whether asking questions, seeking help from programming, or having a casual conversation. When Poe updated the Preview demonstration function, I was really overjoyed!

Having said so much, I can’t wait any longer, let’s take a look at some practical cases.

1

Scenario 1: Create a good-looking game website

We often see various tool collection websites on the Internet. If there is a tool that can help us easily create our own visual collection website, wouldn’t it save a lot of programming time? Recently I found a game website. Every time I click in, I feel like I’ve opened a blind box. There are various games, tools and network experiments in it. It is simply a perfect game tool collection website.

I was wondering: Can I use Poe's Preview function toCreate a similar live demo page, or even create a tool collection website? In order to verify this idea, I decided to make a static page first, which is the first basic step!

I used Poe to talk directly to Claude 3.5 Sonnet. At first, it was just pure text questions, and it generated text and plans;

Later I added, "Preview directly in Previews", and the real-time effect was immediately apparent, and the effect was really good.

Tip: https://toms.toys/ Visit this page and create a game tutorial, and preview it directly in Previews.

After the generation, I tried to click on the red words, but found that I couldn’t click on them. So this generated a static web page, but it looks 80% similar. The logo color is basically the same, and the other index boxes are also very clear. At least it has the flavor of the original.

Conversation record: https://poe.com/s/Pe9cXFpmFHQqPAZhZOgU

Now with this foundation, I can build a dedicated tool website by myself. Imagine that all kinds of practical tools are gathered in a customized website, and you can use them anytime and anywhere with just a click. It is really convenient and cool!

1

Scene 2: Nvidia 2024 financial report analysis demonstration

Previously, many AI analyses of financial reports only output text. Now we will try to use charts to demonstrate the effect.

Tips:

Could you please break down the information https://investor.nvidia.com/news/press-release-details/2024/NVIDIA-Announces-Financial-Results-for-Fourth-Quarter-and-Fiscal-2024/ and turn it into a digestible interactive presentation to help me understand it?

Poe's preview initially used a simple interactive demonstration to show NVIDIA's main financial indicators. By clicking different buttons, you can view charts of revenue, profit, and earnings per share. It feels quite strong and is not inferior to Artifacts at all.

The optimized professional version is here. It not only compares various indicators, but also provides a comprehensive overview of NVIDIA's financial status, including data presentation and professional analysis. The overall effect is good. Just look at the picture.

Conversation record: https://poe.com/s/NaFg8czE3NKSDu1vehH1

1

Scene 3: Making Chemistry Knowledge Cards

Remember one of the web application examples generated by the Poe official account isKnowledge CardsFlashcards:

https://poe.com/s/HDAXQjBX9qmsInjjgV4X, why not use this as a prototype and make a chemistry knowledge card?

The production of the card is also very simple. After a few iterations, the effect is basically out. The main iterations and modifications are as follows:

• Basic text information:The concept is on the front of the card and the concept explanation is on the back.

• Word:The front and back text are distinguished by size, background color, etc.

• tone:The overall tone adopts Moran tone, which looks more comfortable.

Card effect dialogue: https://poe.com/s/1TgDhUkoKmhjMq75yXhF

Careful friends can see that in addition to flipping and interaction, I also addedUser ID, real time,Increased the uniqueness and real-time nature of the card.

1

Scene 4: Simulating water cycle animation

Today, let’s go back to high school and make a water cycle animation process so that the page can automatically play the animation effect.

Tips:

Use React to create animations that show how water circulates. To make it more complex, add emoji or svg.

I need a React component for the water cycle. On the left is an animation showing the four stages of evaporation, condensation, precipitation, and pooling; on the right is the corresponding text description. Please use the Web Speech API to add automatic speech playback, and the speech content should be consistent with the text. Use SVG to create animations, and each stage lasts 8 seconds. The overall design should be concise and easy to understand. Please make the animation smoother and the text more concise. And preview it directly in Previews

Dialogue process: https://poe.com/s/OujTxBMnSknxHaqmBhXs

Not onlyAnimation automatic demonstration, and next to it there isA condensed description of the water cycle, which is very clear and concise. When teachers are talking about some complex concepts, they can easily create demonstration effects when preparing courseware, which is fast and intuitive. This is a time-saving and labor-saving tool for teachers!

1

Scenario 5: Build your own decompression tool website

I was browsing the web a few days ago and found an interesting website. This website is a website that shows the 90s style mouse effects. It aims to show the nostalgic mouse effects. It shows a series of mouse effects implemented by JavaScript, which can follow your mouse movement or finger touch. You can click anywhere to switch different effects, such as rainbow effects, etc. Then try using Poe's Preview function.

Tips:

Create a decompression artifact, here is the data:

https://cursoreffects.com/

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

First time simple style:

The first version was too simple, so I asked Claude 3.5 Sonnet to embellish it.Added green buttons and white background, and increased the number of mouse effects from 4 to 11。

But at this time, I found that the "text" and "cursor effects" took up the entire screen, and I couldn't see the effect of the mouse click better. Continue to adjust and tell Claude 3.5 Sonnet:Leave the middle space empty while continuing to beautify the visual effect, there are two different styles of effects as follows.

We will find that this version uses the colorGradient, and very refreshing at the same time; the middle position is also left empty, and the overall effect is pretty good.

Pink gradient effect

Blue gradient effect

In fact, the above effect is quite satisfactory, but I want the whole page to be more concise. If we look closely, we will find:

• There is a lot of text in the entire page, and the two lines of small characters in the middle have overlapping meanings. One of them can be deleted;

• The cursor special effect nickname below takes up too much space and attracts too much attention. It can be iterated into a button that changes as the player clicks it.

I then continued to tell Claude 3.5 Sonnet to make it simpler and clearer. The final effect is as follows. The colors are relatively light and elegant, and the content displayed on the entire page is relatively complete, without any redundant content.

After final optimization, the font was replaced with one that was more in line with the style, and the entire background color was randomly gradient, which was very interesting.

Self-built decompression tool: https://poe.com/s/xPxoi0qCl4JVsXw3GxqV

1

at last

Whether it is Poe or Claude, the appearance of Preview / Artifacts makes the screenText, codevisualize,This step becomes simpler and easier to achieve.

• For developers, Artifacts can generate and fix code, reducing manual coding time;

• For team collaboration, being able to view, edit and build content in real time on the same platform greatly reduces the loss of information communication.

• For educators, using Claude 3.5 Sonnet to generate teaching content and presentations simplifies the production process. Students can more easily access learning resources and use real-time demonstrations to enhance their learning interest.

Whether it is a developer, a team collaboration, or an educator, the efficiency of daily work and life has been greatly improved. There are many scenes like this in life...

When I finished making the decompression tool, I shared it with a programmer friend of mine. This is the conversation I had with him.

He said: "It would take a day to write code like this", but today I only took half an hour at most to implement it (PS: I'm a code novice). Isn't this the beginning of AI entering the homes of ordinary people?

We look forward to more AI entering ordinary households and everyone’s field of vision in the future.

References:

1. Poe official website: https://poe.com/

2. Claude 3.5 Sonnet Update Introduction:

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

3. Original decompression tool: https://cursoreffects.com/

4. Case collection aggregation site Claude Artifacts Showcase:

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

Poe official generated web application case reference:

1. Interactive Presentation: https://poe.com/s/NlX2WRElDUvtuuMSFrZq

2. Flashcards: https://poe.com/s/HDAXQjBX9qmsInjjgV4X

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

4. Large Color Collider: https://poe.com/s/neKbyqEJYUtiRjeC6b5f