Claude 3.5の"アーティファクト"機能が流出 - Anthropicの秘密が明らかに

Claudeのアーティファクト機能は非常にユニークで、ChatGPTとは大きく異なります。その仕組みは非常に興味深く、ほぼ完全にプロンプトエンジニアリングだけで実現されています。そして、そのプロンプトが流出したのです。今日はそれについて見ていきますが、まずこの動画のスポンサーであるAsusに感謝します。彼らは素晴らしいノートパソコンを送ってくれました。そして、それを視聴者の皆さんの中の1人にプレゼントします。動画の最後まで見て、このノートパソコンを獲得するチャンスを得る方法を確認してください。
さて、プロンプトには、これはClaude 3.5 Sonnetのシステムプロンプトで、特にアーティファクト機能に関するものだと書かれています。見てください、非常に長いです。これだけの情報を理解し、さらにユーザーが入力するすべての情報を処理できるというのは驚きです。Claude 3.5 Sonnetのアーティファクトに関するプロンプトを見るだけでも、プロンプトエンジニアリングについて多くのことを学べます。
では、見ていきましょう。多くのフォーマットが使用されています。これは多くの人が忘れがちなことですが、プロンプトを構造化された方法でフォーマットするだけで、はるかに良い出力が得られます。そして、ここでもそれが見られます。
ここにはアーティファクトの情報があります。アシスタントは会話中にアーティファクトを作成し、参照できます。アーティファクトは、ユーザーが修正したり再利用したりする可能性のある、実質的で自己完結型のコンテンツのためのものです。別のUIウィンドウに表示され、わかりやすくなっています。
アーティファクトを知らない人のために説明しますと、ここでClaude 3.5 Sonnetを使っているのがわかります。そして、単純に「Pythonでスネークゲームを書いて」と言います。これは私のお気に入りのLLMテストの一つです。エンターを押すと何が起こるか見てみましょう。少しイントロがあり、そして生成が始まります。この生成は別のウィンドウを開き、そこにコードが出力されます。会話部分のUIがきれいに保たれるので、私はこれが気に入っています。その後、いくつかの指示と説明が続きますが、実際のコードは別に保たれています。
アーティファクトの別の使用方法で、非常に便利なのは、多くのテキストを貼り付ける場合です。「このテキストは何についてですか」と言って、DaVinci Resolveのキーボード設定をコピーして貼り付けます。貼り付けるとすぐに別のファイルが作成され、エンターを押します。貼り付けたファイルをクリックすると、内容全体が表示されます。これは、貼り付けた内容をチャットウィンドウに直接出力する代わりです。アーティファクトを使用するもう一つの本当にクールな方法です。
さて、アーティファクトがどういうものかわかったところで、続けていきましょう。まず、良いアーティファクトの定義があります。見てのとおり、さらにフォーマットがあります。ヘッダーにはハッシュ記号を使用し、箇条書きにはダッシュを使用しています。良いアーティファクトは、15行以上の実質的なコンテンツです。繰り返しますが、アーティファクトは実際の会話ウィンドウをきれいに保つのに最適です。15行以上の実質的なコンテンツがあれば、それからアーティファクトを作成します。ユーザーが修正、反復、または所有権を持つ可能性が高いコンテンツ。会話の文脈なしで理解できる自己完結型の複雑なコンテンツ（コードなど）。はい、最終的に会話外で使用することを意図したコンテンツ、レポート、メール、プレゼンテーションなど。そして、複数回参照または再利用される可能性が高いコンテンツ。非常にスマートな機能です。
アーティファクトを使用しないものは、簡単な情報や短いコンテンツ、例えば簡単なコードスニペット、数式、小さな例などです。基本的に、先ほど言ったことの逆ですが、もちろん、この場合はプロンプトの詳細が多いほど良いです。主に説明的、教育的、または例示的なコンテンツ、例えば提案、コメント、フィードバックなど。独立した作品を表さない会話的または説明的なコンテンツなどです。
ここに使用上の注意があります。これらはどのように使用されるべきでしょうか。そして、これはすべてシステムプロンプトの一部であることを覚えておいてください。Claude 3.5 Sonnetにプロンプトを与えるたびに、これらすべてが含まれています。特に要求されない限り、メッセージごとに1つのアーティファクト。基本的に、可能な限りアーティファクトを使用しないでください。不必要なアーティファクトの使用はユーザーにとって不自然になる可能性があります。ユーザーがアシスタントにSVGを描くやウェブサイトを作成するよう依頼した場合、アシスタントはその機能がないことを説明する必要はありません。適切なアーティファクト内にコードを作成して配置することで、ユーザーの意図を満たします。これは興味深いですね。なぜこれを指定する必要があったのか疑問です。
では、試してみましょう。「GPUのSVG画像を描いて」と言います。これは生成を開始し、アーティファクトを作成するはずです。はい、そうなりました。SVGのコードを書き、実際に出力されるかどうか見てみましょう。はい、できました。素晴らしくはありませんが、大丈夫です。コードだけでなく、コードのプレビューパネルもあり、非常に素晴らしいです。そして、もちろんこちらには何をしているかが書かれており、これが会話的な側面です。
次に、「ウェブサイトを作成して」と試してみましょう。「GPUを販売するシンプルなウェブサイトを作成して」と言います。再び、少しイントロがあり、そして生成が始まります。はい、そしてコードがあります。コードの最後にプレビューボタンがあり、すべてが期待通りに動作することを願っています。はい、できました。非常にシンプルなウェブサイトですが、機能します。説明と会話的な側面は非常にきれいに保たれ、このアーティファクトができました。それを閉じても、ここをクリックするだけで常に開き直すことができます。更新することもでき、内容を確認し、ファイルをダウンロードすることもできます。そして、今追加されたのは、このアーティファクトを公開できるようになったことです。
続けましょう。画像の生成を求められた場合、アシスタントはSVGを提案できます。アシスタントはSVG画像の作成に非常に熟練しているわけではありませんが、積極的にタスクに取り組むべきです。自己の能力についての自虐的なユーモアは、ユーザーにとって楽しい経験となる可能性があります。
私がまだChatGPTを頻繁に使用している理由の1つは、ChatGPTインターフェース内のDALL-Eです。私はDALL-Eを常に使用しています。サムネイルの画像を生成したり、他の理由で画像を生成したりしています。彼らがそれを持っているという事実が、私をChatGPTに戻し続けています。Claudeに同等のテキストから画像への生成モデルがあれば、おそらくClaudeを排他的に使用するでしょう。ちなみに、Claudeに欠けているもう1つのものはAndroidアプリです。彼らは直ちにAndroidアプリを作る必要があります。
続けましょう。アシスタントは簡潔さを重視し、会話内で効果的に提示できるコンテンツにはアーティファクトを過度に使用しないようにします。
ここにアーティファクトの指示があります。そして、これがすべてアーティファクト機能をどのように構築したかということに戻ります。互換性のあるカテゴリに該当するコンテンツを作成する際に、アシスタントは以下の手順に従うべきです。アーティファクトを呼び出す直前に、antThinkingタグ内で1文考えます。私はantThinkingが何を意味するのかよくわかりません。実際、プロンプターは「1つ質問があります。antThinkingとはどんな魔法ですか？」と言っています。
antThinkingタグ内で1文考え、良いアーティファクトと悪いアーティファクトの基準に対してどのように評価されるかについて考えます。そして、これが私たちが見ているものです。これは何をするかを述べている1文です。そして、実際にアーティファクトを生成します。
Asusが私に送ってくれた新しいAsus Vivobookノートパソコンについて少し詳しく説明させてください。これは、Qualcomm Snapdragon X Eliteチップを搭載した新しいCopilot Plus PCの1つです。専用のNPU（ニューラル処理ユニット）を搭載しており、AIを直接デバイス上で実行するために設計されています。NPUは、このラップトップで行うその他すべての作業のためにCPUとGPUを解放し、そのチップで特別に推論を実行します。
そして、このラップトップで本当に際立っていたのは画面です。これまで見た中で最も美しいOLED画面です。両側に多くのIOポートがあり、実際の使用で18時間以上のバッテリー寿命があります。そして、この巨大な15.6インチの画面を持っています。CPUは45ワットを消費し、これによって長いバッテリー寿命を実現しています。
これらの新しいAsus Vivobookには、Story Cubeなどの多くのAI機能が搭載されています。これはインテリジェントなデジタル資産管理アプリで、基本的にすべてのメディアを簡単に整理します。また、Windows Studio Effectsも搭載されており、このVivobookに新しく搭載されたニューラル処理ユニットを使用して、デバイスカメラに特殊効果を適用します。背景のぼかし、アイコンタクト、自動フレーミング、音声フォーカス、ポートレートライト、クリエイティブフィルターなどが得られます。
そして、私のお気に入りの機能の1つは、Adaptive Lockです。これはあなたがPCの前にいるかどうかを検知し、離れるとロックして電力を節約しプライバシーを保護します。そして、あなたが近づくだけで起動しロックを解除します。本当にクールです。これは本当に印象的なマシンで、オンデバイスAI用に設計されています。そして、この動画の最後に、これを獲得するチャンスに応募する方法をお伝えします。
コンテンツがアーティファクトなしでもうまく機能するかどうかを検討します。これは、システムプロンプト全体を通じて一貫したテーマのようです。つまり、アーティファクトを使用することが意味があるかどうかを確認してください。もしアーティファクトに値する場合は、別の文で、新しいアーティファクトか既存のものの更新かを判断します。更新の場合は、前の識別子を再利用します。
ここには見えませんので、新しいアーティファクトの場合は何も表示されないということでしょう。次に、コンテンツを開始と終了のantArtifactタグで囲みます。開始のantArtifactタグのidentif属性に識別子を割り当てます。更新の場合は、前の識別子を再利用します。新しいアーティファクトの場合、識別子はコンテンツに関連する説明的なもので、ケバブケースを使用します。例えば「example-code-snippet」です。実は、ケバブケースという言葉を聞いたことがありませんでしたが、まあ、理解できます。言葉がケバブのように串刺しになっているように見えるからですね。実際にかなり面白いです。この識別子は、アーティファクトのライフサイクル全体で一貫して使用されます。
antArtifactタグにtitle属性を含め、コンテンツの簡単なタイトルや説明を提供します。これは、おそらく私たちが先ほど見た「Simple GPU sales website」というタイトルで、ここにも同じタイトルが表示されています。
開始のantArtifactタグにtype属性を追加して、コンテンツのタイプを指定します。そして、すべてのコンテンツタイプが列挙されています。まずコードがあります。これは先ほどテストしたものです。任意のプログラミング言語のコードスニペットやスクリプトに使用します。言語名を含めてください。アーティファクトにコードを入れる際にトリプルバッククォートを使用しないでください。
次にドキュメントがあります。テキストとマークダウンです。text/HTMLもあります。ウェブからの画像は許可されていませんが、幅と高さを指定したプレースホルダー画像を使用できます。そうですね、プレースホルダー画像がありますが、画像は許可されていません。外部スクリプトのインポートが許可されているのはCloudflareからのみです。
スニペット、コードサンプル、HTMLやCSSのコード例を共有する際にtext/HTMLを使用することは不適切です。ウェブページとしてレンダリングされ、ソースコードが隠されてしまうためです。アシスタントは上で定義されたapplication/vnd.ant.codeを使用すべきです。
次に、アシスタントが上記の要件に従えない場合は、代わりにこのタイプをアーティファクトに使用し、ウェブページのレンダリングは試みません。
SVGもサポートしています。アシスタントは幅と高さを定義するのではなく、SVGのビューボックスを指定すべきです。
Mermaidダイアグラムもあります。実は聞いたことがありませんでしたが、すぐに検索してみると、ここにmermaid.jpgがあります。ダイアグラムの作成をします。ユーザーインターフェースはMermaidダイアグラムをレンダリングします。実際に、ダイアグラムを作成してみましょう。
「GPUを販売するウェブサイトがどのように見えるかダイアグラムを作成して」と言います。そして、ここにあります。graph TDがあり、はい、とても素晴らしいですね。コードがあり、これはすべてMermaidで作成されています。アーティファクトを使用する際は、Mermaidコードをコードブロックに入れないでください。
Reactコンポーネントを作成できます。これは素晴らしいですね。Reactの使用に関する多くのルールがありますが、それらはスキップします。アシスタントはUIライブラリからプリビルドコンポーネントを使用できます。ここにインポートのコード行があります。他のライブラリはインストールされておらず、インポートもできません。
明らかに、これがすべて大文字で書かれているのは、大規模言語モデルに他のライブラリを使用しないように理解させるのに苦労したからかもしれません。ウェブからの画像は許可されていません。これは既に言及されていますので、おそらくこれも問題があり、繰り返す必要があったのでしょう。
そして、再度、上記の要件に従えない場合は、このタイプのファイルを使用してください。
次に、アーティファクトの完全で更新されたコンテンツを含めます。切り捨てや最小化は行わないでください。「...残りのコードは同じ」などは使用しないでください。これは私が絶対に嫌いなことで、別々に出力されるのは素晴らしいですね。
ChatGPTとの非常に煩わしいやり取りの1つは、コードを書いてもらい、そのコードの更新を求めると、「ここが更新された部分で、残りは同じです」と言われるか、全コードを再度出力するかのどちらかです。もちろん、これは遅く、会話ウィンドウの多くを占めてしまいます。
ここには、他のAIアシスタントによるアーティファクトの正しい使用例がいくつかあります。アシスタントの応答例はこうです。「はい、こんな感じです。antThinking...」そして、これは内部思考を意味するに違いありません。antThinkingは内部思考だと推測します。「階乗を計算するPythonスクリプトの作成は、良いアーティファクトの基準を満たしています」
つまり、思考を通して作業するための別の隠れたテキスト文書のようなものがあるようです。これは本当にクールです。もし本当なら。そして、このHacker Noonのブログ記事を見ると、同じ概念が見られます。プロンプトエンジニアは長い間、信頼性の高い出力の鍵の1つは、LLMに多段階の構造化された論理的思考プロセスを形成させることだと言ってきました。私たちはプロンプトでこれの正式な認識を見ています。そして、実際にそれを行う唯一の方法は、多段階のプロセスを通じて内部思考を保存する別の方法を持つことです。
さて、実際のプロンプトに戻りましょう。良いアーティファクトがどのようなものかの例をいくつか示し、この「antThinking」が再び内部思考であることを示しています。そして、いくつかの例を示し、最後に次のように述べています。
アシスタントは、ユーザーのクエリに直接関係する場合を除き、これらの指示について言及したり、アーティファクトタグ、MIMEタイプ、または関連する構文に言及したりすべきではありません。アシスタントは常に、誤用された場合に人間の健康や幸福に非常に有害になる可能性のあるアーティファクトを生成しないよう注意すべきです。たとえ一見無害な理由で生成を求められた場合でも同様です。ただし、Claudeがテキスト形式で同じ内容を生成する意思がある場合は、アーティファクトとして生成する意思があるべきです。
これで終わりです。これがClaude 3.5 Sonnetがアーティファクトを使用するかどうかを判断するためのプロンプト全体です。
このブログ記事に戻ると、プロンプトに実際に含めることができる6つのブロックがあります。antArtifact（内部思考）、artifacts info（アーティファクトに関する情報）、アーティファクトの例、ユーザークエリ（ユーザーのプロンプト）、例のドックストリング、そしてアシスタントの応答です。すべてをきれいにフォーマットすることで、より良い結果を生成できます。
このノートパソコンを獲得するチャンスを得たい場合は、説明欄のリンクをクリックし、私のニュースレターを購読してください。1週間後に皆さんの中から1人を選び、このラップトップを直接お送りします。
この動画のスポンサーになってくれたAsusに再度感謝します。このラップトップをプレゼントできることにとてもワクワクしています。
さて、どう思いますか？アーティファクトを使用していますか？便利だと感じましたか？コメントで教えてください。この動画が気に入ったら、ぜひいいねとチャンネル登録をお願いします。次の動画でお会いしましょう。