ニュース

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

著者｜ソルトアンドペッパー翡翠ウサギ
メール｜[email protected]

Claude 3.5 Sonnet がリリースされたとき、Artifacts デモの機能もアップデートされましたが、その時のデモ効果には衝撃を受けました。

アーティファクトに関しては、ユーザーが会話内で大量の独立したコンテンツを作成および参照できるようになります。

クロードに「」について尋ねると、コード スニペット、テキスト ドキュメント、または Web サイトのデザイン」やその他のコンテンツを作成すると、アーティファクトが専用ウィンドウに表示され、会話と並べて表示されます。出力に満足できない場合は、Claude の作成をすぐに修正、反復、改善できます。

この図は、Poe の Claude 3.5 Sonnet との対話を通じてプレビューによって生成された HTML 効果を示しています。対談アドレス：https://poe.com/s/YEms220OFPLfoZhPKfLI

いよいよ待ちに待った時が来ましたPoeがプレビュー機能を正式にアップデートしました、その効果は Artifacts のリアルタイム デモンストレーションに似ており、Claude 3.5 Sonnet、ChatGPT-4o、Gemini 1.5 Pro の 3 つのモデルのリアルタイム生成もサポートしています。

左側の写真は Claude 3.5 Sonnet と Artifacts のアップデートを示し、右側の写真は Poe のプレビューを示しています。

文を中断して簡単に説明しますポーとは何ですか？。

Poe は、北米の「Zhihu」（質問と回答のコミュニティ）である Quora によって 2022 年末に開始された AI プラットフォームです。ユーザーは、ChatGPT や Claude などのよく知られたモデルを含む、さまざまな AI モデルと通信できます。 Poe の本来の設計目的は、多様なチャット プラットフォームを提供することであり、ユーザーは、質問したり、プログラミングについて助けを求めたり、リラックスした会話をしたりするために、複数の AI モデルから最適なものを選択できるようになります。それを満足させます。 Poe がプレビュー デモ機能を更新したときは、とてもうれしかったです。

ここまで言いましたが、待ちきれません。実際の事例をいくつか見てみましょう。

1

シナリオ 1: 見栄えの良いゲーム Web ページを作成する

インターネット上では、さまざまなツールをまとめた Web サイトがよく見られます。独自のビジュアル コレクション Web サイトを簡単に作成できるツールがあれば、プログラミング時間を大幅に節約できると思いませんか?最近、ゲームのウェブサイトを発見しました。クリックするたびに、さまざまなゲーム、ツール、ネットワーク実験が揃っているのです。

ちょっと疑問に思ったのですが、Poe のプレビュー機能は使用できますか?このようなライブデモページを作成します 、あるいはツールコレクション Web サイトを構築することもできますか? このアイデアを検証するために、まず静的ページを作成して試してみることにしました。これが基本的な最初のステップです。

私は Poe を使用してクロード 3.5 ソネットと直接会話します。純粋にテキストの質問として始まったものは、テキストと解決策を生成しました。

後で私は「プレビューで表示を直接プレビューする」とリアルタイムで効果が現れ、とても良い効果が得られました。

ヒント: https://toms.toys/ このページにアクセスして、ゲーム チュートリアルを作成し、プレビューに直接表示します。

生成後、赤い文字をクリックしてみましたが、クリックしても動かず、生成された Web ページは静的な Web ページでしたが、ロゴの色は 80% 似ていました。他のインデックスボックスも非常に明確で、少なくともオリジナルバージョンの味がありました。

会話記録：https://poe.com/s/Pe9cXFpmFHQqPAZhZOgU

これで、専用のツール Web サイトを自分で構築できるようになりました。あらゆる種類の実用的なツールがカスタマイズされた Web サイトに集められ、いつでもどこでもクリックするだけで使用できると想像してみてください。本当に便利でクールです。

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 の公式アカウントによって生成された Web アプリケーションの事例の 1 つが次のようなものだったと記憶しています。知識カードフラッシュカード:

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: 独自の解凍ツール Web サイトを構築する

2 日前に Web サイトを閲覧していて、興味深い Web サイトを見つけました。この Web サイトは、90 年代風のマウス エフェクトを表示するように設計されています。これは、JavaScript によって実装された一連のマウス効果を示しており、マウスの動きや指のタッチに追従することができます。どこをクリックしても、虹効果などのさまざまな効果を切り替えることができます。 次に、Poe のプレビュー機能を使用してみます。

即興の言葉:

解凍アーティファクトを作成します。情報は次のとおりです。

https://cursoreffects.com/

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

初めてのシンプルスタイル：

最初のバージョンのスタイルはシンプルすぎたので、クロード 3.5 ソネットに美化を依頼しました。緑のボタンと白の背景が追加され、マウス効果が 4 から 11 に増加しました。。

しかし、この時点では「テキスト」と「カーソル効果」が画面全体を占めており、マウスクリックの効果がよくわかりませんでした。調整を続けて、クロード 3.5 ソネットにこう言います。視覚効果を美しく保ちながら、中央のスペースを解放します。, エフェクトには以下の2種類があります。

このバージョンの色は次のとおりです。グラデーションカラー非常に爽快であると同時に、ミドルポジションも解放され、全体的な効果はかなり良好です。

ピンクのグラデーション効果

青のグラデーション効果

実際、上記の効果は十分満足できるものですが、ページ全体をもっと簡潔にしたいと考えています。よく見ると次のことがわかります。

• ページ全体に多くのテキストがあり、真ん中の 2 行の小さな文字は重複する意味を持っています。そのうちの 1 つは削除できます。

• 以下のカーソル特殊効果のニックネームはスペースを取りすぎ、注目を集めすぎます。プレイヤーがクリックすると変化するボタンに繰り返すことができます。

その後、Claude 3.5 Sonnet をより簡潔かつ明確にするよう指示し続けました。最終的な効果は次のとおりです。色は比較的明るく、ページ全体に表示されるコンテンツは冗長なコンテンツがなく比較的完全です。

最終的な最適化の後、フォントはより適切なスタイルに置き換えられ、背景色全体がランダムにグラデーションになりました。これは非常に興味深いものでした。

自作解凍ツール: https://poe.com/s/xPxoi0qCl4JVsXw3GxqV

1

やっと

ポーにせよクロードにせよ、プレビュー/アーティファクトの出現が画面を作りますテキスト、コード視覚化して、このステップはよりシンプルになり、実装が容易になります。

• 開発者にとって、Artifacts はコードを生成および修復できるため、手動によるコーディング時間を短縮できます。

• チームのコラボレーションでは、同じプラットフォーム上でコンテンツをリアルタイムで表示、編集、構築できるため、情報送信間のロスが大幅に軽減されます。

• 教育者の場合は、Claude 3.5 Sonnet を使用して教育コンテンツとプレゼンテーションを生成し、制作プロセスを簡素化します。学生は学習リソースに簡単にアクセスし、リアルタイムのデモンストレーションを使用して学習への関心を高めることができます。

開発者、チームの共同作業、教育者など、日常の仕事や生活の効率が大幅に向上しました。人生にはこういう場面がたくさんある…

解凍ツールの作成が完了した後、プログラマーの友人に直接自作の解凍ツールを共有しました。

彼は、「このようなコードを書くには 1 日かかるでしょう」と言いましたが、今日はせいぜい 30 分しか費やしませんでした (追記: 初心者のプログラマー) これは、ある種の AI が家庭に普及する始まりではないでしょうか。普通の人の？

将来的には、より多くの AI が一般の人々の家庭やあらゆる人のビジョンに浸透することを楽しみにしています。

参考文献:

1. ポー公式サイト：https://poe.com/

2. Claude 3.5 Sonnet アップデートの紹介:

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

3. 元の解凍アーティファクト: https://cursorEffects.com/

4. 事例収集および集約ステーション Claude Artifacts ショーケース:

   https://claudeartifacts.com/?category=すべて

Poe が公式に生成した Web アプリケーションのケース リファレンス:

1. インタラクティブなプレゼンテーション: https://poe.com/s/NlX2WRElDUvtuuMSFrZq

2. ナレッジカード フラッシュカード: https://poe.com/s/HDAXQjBX9qmsInjjgV4X

3. 電子ドラムマシン Drum Machine：https://poe.com/s/G4HshkCQCaXVfg0ndPZK

4. ラージカラーコライダー: https://poe.com/s/neKbyqEJYUtiRjeC6b5f