소식

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

저자|소금과 후추 제이드래빗
이메일｜[email protected]

Claude 3.5 Sonnet이 출시되었을 때 Artifacts 데모 기능도 업데이트되었습니다. 당시 데모 효과에 충격을 받았습니다.

아티팩트와 관련하여 사용자는 대화에서 대량의 독립적인 콘텐츠를 생성하고 참조할 수 있습니다.

우리가 클로드에게 “코드 조각, 텍스트 문서 또는 웹사이트 디자인” 및 기타 콘텐츠의 경우 아티팩트가 전용 창에 나타나 대화와 나란히 표시됩니다. 출력이 만족스럽지 않으면 즉시 Claude의 창작물을 수정, 반복 및 개선할 수 있습니다.

그림은 Poe에서 Claude 3.5 Sonnet과의 대화를 통해 Preview로 생성된 HTML 효과를 보여줍니다. 대화 주소: https://poe.com/s/YEms220OFPLfoZhPKfLI

이제 드디어 기다림이 다가왔습니다Poe가 공식적으로 미리보기 기능을 업데이트했습니다., 효과는 Artifacts의 실시간 데모와 유사하며 Claude 3.5 Sonnet, ChatGPT-4o 및 Gemini 1.5 Pro의 세 가지 모델의 실시간 생성도 지원합니다.

왼쪽 사진은 클로드 3.5 소네트와 아티팩트 업데이트, 오른쪽 사진은 포의 미리보기

문장을 중단하고 여기에 간단한 설명이 있습니다.포는 무엇입니까?。

Poe는 북미 'Zhihu'(질의응답 커뮤니티) Quora가 2022년 말 출시한 AI 플랫폼이다. 사용자는 이를 통해 ChatGPT, Claude 등 잘 알려진 모델을 포함해 다양한 AI 모델과 소통할 수 있다. Poe의 원래 디자인 의도는 사용자가 질문을 하거나 프로그래밍에 대한 도움을 요청하거나 편안한 대화를 나누는 등 다양한 AI 모델 중에서 가장 적합한 것을 선택할 수 있도록 다양한 채팅 플랫폼을 제공하는 것입니다. 그것을 만족시키십시오. Poe가 Preview 데모 기능을 업데이트했을 때 정말 기뻤습니다!

너무 많이 말했으니 이제 몇 가지 실제 사례를 살펴보겠습니다.

1

시나리오 1: 멋진 게임 웹 페이지 만들기

인터넷에서 우리는 다양한 도구 모음 사이트를 자주 보게 됩니다. 우리만의 비주얼 컬렉션 웹사이트를 쉽게 만들 수 있는 도구가 있다면 프로그래밍 시간을 많이 절약할 수 있지 않을까요? 최근에 발견한 게임 웹사이트는 클릭할 때마다 블라인드 박스를 여는 듯한 느낌을 줍니다. 거기에는 다양한 게임과 도구, 네트워크 실험이 들어있습니다. 그야말로 완벽한 게임 도구 모음입니다.

궁금합니다. Poe의 미리보기 기능을 사용할 수 있나요?이와 같은 라이브 데모 페이지를 만드십시오. , 아니면 도구 모음 웹사이트를 구축하시겠습니까? 이 아이디어를 검증하기 위해 먼저 정적 페이지를 만들어 사용해 보기로 했습니다. 이것이 기본적인 첫 번째 단계입니다.

저는 Claude 3.5 Sonnet과 대화하기 위해 Poe를 직접 사용합니다. 순수한 텍스트 질문으로 시작된 것이 텍스트와 솔루션을 생성했습니다.

나중에 나는 "미리보기에서 직접 디스플레이 미리보기”, 실시간 효과가 즉각적으로 나타나며 효과가 정말 좋았습니다.

팁: https://toms.toys/ 이 페이지를 방문하여 게임 튜토리얼을 만들고 미리보기에 직접 표시하세요.

생성 후 빨간색 글자를 클릭해 보았는데 클릭이 움직이지 않는 것을 확인하여 생성된 웹페이지는 정적 웹페이지였지만 기본적으로 로고 색상이 일치해 보였고, 다른 색인 상자도 매우 명확했습니다. 적어도 원본 버전의 풍미가 있었습니다.

대화 기록: https://poe.com/s/Pe9cXFpmFHQqPAZhZOgU

이제 이 기반을 통해 나는 이미 혼자서 전용 도구 웹사이트를 구축할 수 있습니다. 온갖 실용적인 도구들이 모여 있는 맞춤형 웹사이트를 상상해 보세요. 언제 어디서나 클릭 한 번으로 사용할 수 있으니 정말 편리하고 멋집니다!

1

시나리오 2: NVIDIA 2024 재무 보고서 분석 시연

과거에는 많은 AI 분석 재무 보고서 출력이 텍스트였습니다. 이제는 차트를 사용하여 효과를 입증하려고 합니다.

프롬프트 단어:

정보를 분석할 수 있나요? https://investor.nvidia.com/news/press-release-details/2024/NVIDIA-Announces-Financial-Results-for-Fourth-Quarter-and-Fiscal-2024/ 이해하기 쉬운 대화형 데모로 전환하여 도움을 받으세요 나는 그것을 이해한다

Poe's Preview는 처음에 NVIDIA의 주요 재무 지표를 보여주기 위해 간단한 대화형 데모를 사용했습니다. 다른 버튼을 클릭하면 수익, 이익 및 주당 순이익 차트를 볼 수 있으며 Artifacts보다 전혀 열등하지 않은 매우 강력한 느낌을 줍니다.

최적화된 전문가 버전이 여기에 있습니다. 다양한 지표를 비교할 뿐만 아니라 데이터 프레젠테이션 및 전문적인 분석을 포함하여 NVIDIA의 재무 상태에 대한 포괄적인 개요를 제공합니다. 그림만 보면 됩니다.

대화 기록 : https://poe.com/s/NaFg8czE3NKSDu1vehH1

1

시나리오 3: 화학 지식 카드 만들기

Poe의 공식 계정에서 생성된 웹 애플리케이션 사례 중 하나가 기억납니다.지식 카드플래시카드:

https://poe.com/s/HDAXQjBX9qmsInjjgV4X, 이것을 프로토타입으로 활용하여 화학 지식 카드를 만들어 보는 것은 어떨까요?

카드 제작도 매우 간단합니다. 몇 번의 기본 반복을 거치면 주요 반복 및 수정 사항은 다음과 같습니다.

• 기본 텍스트 정보:카드 앞면에는 개념이 있고 뒷면에는 개념에 대한 설명이 있습니다.

• 단어:앞뒤 텍스트는 크기, 배경색 등으로 구분됩니다.

• 음정:전체적인 컬러톤은 모란 컬러로 더욱 편안해 보입니다.

카드 효과 대화: https://poe.com/s/1TgDhUkoKmhjMq75yXhF

세심한 친구들은 뒤집기와 상호 작용 외에도 내가 추가한 것을 볼 수 있습니다.사용자 ID, 실시간,카드의 고유성과 실시간 특성이 향상되었습니다.

1

장면 4: 물 순환 애니메이션 시뮬레이션

오늘 우리는 고등학교 시절을 회상하고 페이지에서 자동으로 애니메이션 효과를 재생할 수 있도록 물 순환 애니메이션 프로세스를 만들어 보겠습니다.

프롬프트 단어:

React를 사용하여 물이 순환하는 방식을 보여주는 애니메이션을 만드세요. 더 복잡하다면 이모티콘이나 svg를 추가하세요.

워터 루프 프로세스를 위한 React 구성 요소가 필요합니다. 왼쪽에는 증발, 응축, 침전, 수집의 4단계를 보여주는 애니메이션이 있고, 오른쪽에는 해당 텍스트 설명이 나와 있습니다. 음성 내용이 텍스트와 일치하도록 Web Speech API를 사용하여 자동 음성 재생 기능을 추가하세요. SVG를 사용하여 애니메이션화되었으며 각 단계는 8초 동안 지속됩니다. 전체적인 디자인은 간결하고 명확하며 이해하기 쉬워야 합니다. 애니메이션이 더 부드럽고 텍스트가 더 가늘어졌는지 확인하세요.미리보기에서 직접 디스플레이를 미리 보세요.

대화 과정: https://poe.com/s/OujTxBMnSknxHaqmBhXs

뿐만 아니라애니메이션 자동 데모, 옆에물 순환 과정에 대한 요약된 설명 , 매우 명확하고 뚜렷합니다. 교사가 복잡한 개념을 가르칠 때 코스웨어를 준비하면서 빠르고 직관적으로 프레젠테이션을 쉽게 만들 수 있습니다. 이것은 교사의 시간과 노동력을 절약해 주는 유물입니다!

1

시나리오 5: 자신만의 압축 해제 도구 웹사이트 구축

이틀 전에 웹사이트를 탐색하다가 흥미로운 웹사이트를 발견했습니다. 이 웹사이트는 90년대 스타일의 마우스 효과를 표시하는 웹사이트입니다. 이는 마우스 움직임이나 손가락 터치를 따라갈 수 있는 JavaScript를 통해 구현된 일련의 마우스 효과를 보여줍니다. 무지개 효과 등과 같은 다양한 효과를 전환하려면 아무 곳이나 클릭할 수 있습니다. 그런 다음 Poe의 미리보기 기능을 사용해 보세요.

프롬프트 단어:

압축 해제 아티팩트를 생성합니다. 정보는 다음과 같습니다.

https://cursoreffects.com/

https://github.com/tholman/커서 효과

처음으로 심플한 스타일:

첫 번째 버전의 스타일이 너무 단순해서 클로드 3.5 소네트에게 아름답게 꾸며달라고 요청했습니다.녹색 버튼과 흰색 배경이 추가되었으며, 마우스 효과가 4에서 11로 증가되었습니다.。

그런데 이때는 "텍스트"와 "커서 효과"가 전체 화면을 차지하고, 마우스 클릭의 효과를 더 잘 볼 수 없다는 것을 알게 되었습니다. 계속해서 조정하고 Claude 3.5 Sonnet에게 다음과 같이 말합니다.시각적 효과를 계속 아름답게 유지하면서 중간 공간을 확보하십시오., 효과에는 다음과 같은 2가지 스타일이 있습니다.

이 버전의 색상은 다음과 같습니다.그라데이션 색상, 매우 상쾌함과 동시에 중간 위치도 해방되고 전체적인 효과가 꽤 좋습니다.

핑크 그라데이션 효과

파란색 그라데이션 효과

사실 위의 효과는 꽤 만족스럽습니다만, 전체 페이지를 좀 더 간결하게 만들었으면 좋겠습니다. 자세히 살펴보면 다음과 같은 사실을 알 수 있습니다.

• 페이지 전체에 텍스트가 많고, 가운데 두 줄의 작은 문자는 중복되는 의미를 가지고 있으며, 그 중 하나는 삭제할 수 있습니다.

• 아래의 커서 특수 효과 별명은 너무 많은 공간을 차지하고 너무 많은 관심을 끌고 있으며 플레이어가 클릭하면 변경되는 버튼으로 반복될 수 있습니다.

그런 다음 Claude 3.5 Sonnet을 좀 더 간결하고 명확하게 설명했습니다. 최종 효과는 색상이 비교적 밝고 전체 페이지에 표시되는 내용이 중복되는 내용 없이 비교적 완성도가 높습니다.

최종 최적화 후에는 글꼴이 좀 더 적절한 스타일로 바뀌었습니다. 전체 배경색이 무작위로 그라데이션되어 있어서 매우 흥미로웠습니다.

자체 구축된 압축 해제 도구: https://poe.com/s/xPxoi0qCl4JVsXw3GxqV

1

마침내

포든 클로드든 미리보기/아티팩트의 등장이 화면을 압도한다텍스트, 코드시각화하다,이 단계는 구현하기가 더 간단해지고 쉬워집니다.

• 개발자의 경우 Artifacts는 코드를 생성하고 복구하여 수동 코딩 시간을 단축할 수 있습니다.

• 팀 협업의 경우 동일한 플랫폼에서 실시간으로 콘텐츠를 보고 편집하고 구축할 수 있으므로 정보 전송 간의 손실이 크게 줄어듭니다.

• 교육자의 경우 Claude 3.5 Sonnet을 사용하여 교육 콘텐츠와 프레젠테이션을 생성하여 제작 과정을 단순화하세요. 학생들은 학습 리소스에 더욱 쉽게 접근하고 실시간 데모를 통해 학습에 대한 관심을 높일 수 있습니다.

개발자든, 팀 협업이든, 교육자든 일상 업무와 생활의 효율성이 크게 향상되었습니다. 살다보면 이런 장면이 많을텐데...

압축해제 도구를 완성한 후 프로그래머 친구와 직접 만든 압축해제 도구를 공유하면서 나눈 대화였습니다.

그는 "이런 코드를 작성하려면 하루가 걸릴 것"이라고 말했지만, 오늘은 기껏해야 30분밖에 걸리지 않았습니다. (PS: 초보 코더) 이것이 일종의 AI가 집에 들어오는 시작이 아닐까요? 보통 사람들의?

우리는 앞으로 더 많은 AI가 일반 사람들의 가정과 모든 사람의 비전에 들어오기를 기대합니다.

참고자료:

1. 포 공식 홈페이지: https://poe.com/

2. Claude 3.5 Sonnet 업데이트 소개:

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

3. 원본 압축 해제 아티팩트: https://cursoreffics.com/

4. 사례 수집 및 집계 스테이션 Claude Artifacts 쇼케이스:

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

Poe가 공식적으로 생성한 웹 애플리케이션 사례 참조:

1. 대화형 프레젠테이션: https://poe.com/s/NlX2WRElDUvtuuMSFrZq

2. 지식 카드 플래시카드: https://poe.com/s/HDAXQjBX9qmsInjjgV4X

3. 전자드럼머신 드럼머신: https://poe.com/s/G4HshkCQCaXVfg0ndPZK

4. 대형 컬러 충돌기: https://poe.com/s/neKbyqEJYUtiRjeC6b5f