発表：AIウェブアーティファクト

お知らせ
21

ローカルで試したところ、ほとんどの問題は次のとおりでした。

  • フルスクリーン表示では、エスケープバーがコンテンツに重なり、操作できなくなることがあります。
  • 「Run Artifacts」がすぐに表示されないことがありますが、投稿アイコンなどにカーソルを合わせると表示されるようです（おそらく）。
  • 結果が表示されないインスタンスが1つだけありました。インジケーターは見えましたが、何も起こりませんでした。

全体として、非常によく機能しています。:+1:

デモの一部を以下に示します。
デモをうまく作成するのはそれほど簡単ではありません。いつものように、プロンプトが詳細であるほど良い結果が得られます。
場合によっては、追加の精度が必要になります。常にすべてのリソースが含まれているわけではなく、応答性がなかったり、ページ読み込みを待つためのコードが必要になったりします。また、外部ライブラリの使用は失敗の可能性を高めます。

この機能はあまりにも楽しかったです。:smile:

プロンプト（放物線運動のシミュレーション）

放物線運動をシミュレートするページを作成してください。ページは次のことを行う必要があります。

  1. ユーザーが放物体の初速度、角度、高さを入力できるようにする。
  2. 放物体の軌道のライブアニメーションを表示する。
  3. 飛行時間、最高到達高度、到達距離の計算値を表示する。
  4. 入力パラメータのリアルタイム調整のためにスライダーを使用する。
  5. 最初からやり直すための「リセット」ボタンを含める。
ビデオ

プロンプト（絵文字雨ゲーム）

ユーザーが気分を選択すると、画面から絵文字が降り注ぐページを作成してください。ページは次のことを行う必要があります。

  1. 「ハッピー」、「不機嫌」、「ピザ」などの気分オプションを提供する。
  2. :smile:、:angry:、:pizza: などの絵文字を画面上部から無限に落下させる。
  3. ユーザーが絵文字をクリックして、面白い効果音とともに「収集」できるようにする。
  4. 「収集したピザスライス：27」のような面白いカウンターを含める。
  5. アニメーションの楽しさのためにHTML、CSS、JavaScriptを使用する。
ビデオ

プロンプト（シンプルな太陽系ビジュアライザー）

太陽系を視覚化するページを作成してください。ページは次のことを行う必要があります。

  1. 惑星の軌道を示す、縮小されたアニメーションの詳細な太陽系を表示する。
  2. ユーザーが惑星をクリックして、サイズ、太陽からの距離、公転周期などの情報を表示できるようにする。
  3. ユーザーがズームインおよびズームアウトできるようにする。
  4. 公転運動の速度を速めたり遅くしたりするためのスライダーを含める。
  5. インタラクティブ性とアニメーションのためにHTML、CSS、JavaScriptを使用する。
  6. コンテナが幅と高さ100%を使用するようにする。
ビデオ

プロンプト（CSSアニメーションプレイグラウンド）

ユーザーがCSSアニメーションとトランジションを試すことができるページを作成してください。ページは次のことを行う必要があります。

  1. ユーザーがCSSでアニメーションできるさまざまな要素（ボタン、divなど）を表示する。
  2. ユーザーがアニメーションプロパティ（例：transform、opacity、translate、rotate）のリストから選択できるようにする。
  3. アニメーションの期間、タイミング関数、遅延を調整するためのスライダーを提供する。
  4. ユーザーがアニメーションをリアルタイムでプレビューし、変更がアニメーションにどのように影響するかを確認できるようにする。
  5. JavaScriptを使用してCSSプロパティを動的に更新し、HTML/CSSでスタイリングする。
ビデオ

プロンプト（インタラクティブデータダッシュボード）

インタラクティブなチャートを備えたデータダッシュボードを視覚化するページを作成してください。ページは次のことを行う必要があります。

  1. 棒グラフ、折れ線グラフ、円グラフなど、さまざまなデータセット（例：売上、人口、気象データ）を表す複数のチャートを表示する。
  2. ユーザーがドロップダウンメニューまたはスライダーを使用して、期間、カテゴリ、または場所でデータをフィルタリングできるようにする。
  3. ユーザーがフィルターを操作すると、チャートがリアルタイムで更新される。
  4. 選択したデータの記述統計（例：平均、中央値、最頻値）を表示する。
  5. チャートのレンダリングにChart.jsまたはD3.jsを使用し、データフィルタリングと統計計算を処理するためにJavaScriptを使用する。
ビデオ

「いいね！」 3
22

はい、同意します。それはイライラしますね。こちらで追跡しています: Exiting expanded artifacts is tricky on tablets

私も一度か二度再現しましたが、原因を突き止めようとしています。@david これはember decorator関連ではないかと疑っています。

興味深いですね…一貫した再現方法があれば教えてください。

「いいね！」 3
23

API経由でアクセスされるグローバル共有（信頼レベル0）のデータエクスプローラークエリで機能しますか？もし機能するなら、フォーラムアクティビティの楽しくダイナミックなビジュアルを生成する可能性があります。

自分でテストする時間はなかったのですが、このユースケースで試してくれる人がいるかもしれません:slight_smile:

「いいね！」 3
24

カスタムツールで配線することもできますが、かなりの手間がかかるでしょう。そのユースケースでは、カスタムツールでグラフをレンダリングさせるのが一番良いかもしれません。このアイデアで遊んでみましょう。

ただし、ビジュアライゼーションを共有することは確かに可能です。お見せします。

「いいね！」 4
26

はい、これはAI Web Artifactsだけでなく、LLMを使用してHTML、JavaScript、CSSを作成する場合にも当てはまります。

開発をプレーン/バニラのHTML、JavaScript、CSSに保つことができれば、つまり外部ライブラリを含まない場合、動作しバグのないコードが得られる可能性が劇的に高まります。また、ライブラリがよりマイナーであればあるほど、モデルはより少ないトレーニングデータを与えられたことになり、モデルが応答を完了するために幻覚を見る可能性が高くなり、バグが増えることになります。

「いいね！」 2
27

エンドポイントがタイムアウトした場合に発生するのだと思います。
ログの唯一のエラーは次のとおりです。

The image shows a log of a timeout error in a Ruby application, with detailed traceback information for each stage of execution. (Captioned by AI)
The image shows a log of a timeout error in a Ruby application, with detailed traceback information for each stage of execution. (Captioned by AI)839×871 145 KB

しかし、今日は奇妙です。再度テストしたところ、すべてのリクエストが失敗しました。
OpenAI status は緑色です。寝ている間に何も変わっていないので、何が起こっているのかわかりません。

「Run Test」ボタンも 500 エラーを返し、ログにはタイムアウトが表示されます。
image

ちなみに、ユーザーの観点からは、エラーメッセージ（空白ではなく）と再試行する方法があれば歓迎されるのではないかと思います。

「いいね！」 1
28

OpenAI 12 days of shipmasに関連している可能性がありますか？

OpenAIフォーラムの常連として、モデルの浮き沈みを多く目にします。過去2週間、問題の報告は増加していますが、これらの問題はメジャーリリースや新しいモデルの前の問題に似ています。

「いいね！」 3
29

このページのアーティファクトにあるコードの一部がサイト全体に影響を与えていると思います。

「いいね！」 5
31

非常に基本的な質問ですが…フォーラムでアーティファクトを共有するにはどうすればよいですか？ \u003cdiv class=\"ai-artifact\" data-ai-artifact-id=\"XX\"\u003e\u003c/div\u003e のようなものをコピー＆ペーストするだけですか？その場合、私だけが見て使用できます。

32

会話を共有しましたか？

「いいね！」 2
33

いいえ。そして、その投稿を完全に逃していました。ありがとうございます！

「いいね！」 4
34

プログラムに「/n」という文字が連続して表示されるだけです。スクリーンショットを添付しました。なぜこうなるのでしょうか？

The image is a blank white screen with a vertical navigation bar on the left side and a cursor on the right. (Captioned by AI)
The image is a blank white screen with a vertical navigation bar on the left side and a cursor on the right. (Captioned by AI)1112×532 3.79 KB

「いいね！」 1
35

それはどのIlmですか

「いいね！」 1
36

Gemini 1.5 Pro を使用しています

37

それも見ました。彼らのバグなので、2.0フラッシュを試して、XMLツールに切り替えてみてください。

「いいね！」 3
38

私の限られた経験では、Claude 3.5 Sonnet を使用して、Web Creator と繰り返しやり取りを行い、ある程度の進歩はありますが、最終的には忘れてしまい、新しいセッションでやり直す必要があります。プロンプトを無駄にして忘れるリスクを冒すよりも、手動でコードを修正する方が簡単だと感じます。

生成されたコードを編集できますか？

既存の成果物で新しいコンテキストを開始できますか？（Web Creator に尋ねたところ、できないと言われました。）

「いいね！」 3
39

マーク、これは難しいですね。アーティファクトの内部をやり直しています。

不安定な編集にもうんざりしています。提供するノブの数をまだ決めていません。

システムをAiderのようなArchitectアプローチに移行しました。ツールがLLMを呼び出して更新を実行するため、はるかに確実に実行でき、ドリフトの問題もなくなりました。ただし、新しいシステムは、避けられない重複があるため、より多くのトークンを使用する可能性があるという欠点があります。

アーティファクトが公開されていれば、既存のアーティファクトから開始できるようにするかもしれません（クローンさせる）。これをどのように実現できるか考えてみます。セキュリティには特に注意が必要です。

「いいね！」 3
40

現在、アーティファクトをキャプチャし、増分または手動の変更を行うために、このワークフローに落ち着きました。

  • アーティファクトが良好な状態になるまで、Web Creatorで反復処理します。
  • Web Creatorに、コメントなしでコード（HTML、CSS、JS）を書き出すように促します。
  • コードをオフラインにコピー/貼り付けします。
  • オプションでコードを編集します。

次に、クリエーターが忘れ始めたり、悪い状態になったりした場合は、次のように新しいチャットを開始できます。

こんにちは、このアーティファクトコードがあります。動作するコードなので、そのまま使用してください。その後、次の変更を行ってください… [コードを貼り付け]

41

通常、Web Creator でイテレーションを行うと、「新しい機能でアーティファクトを更新します」のようなメッセージが表示され、次に HTML、CSS、JavaScript のブロックが記述され、その後、アーティファクトを実行できる「更新されたアーティファクトを表示」が表示されます。

今日は一貫して「アーティファクトを更新します」と表示され、コードブロックが記述されますが、その後コードとアーティファクト（もし作成されていれば）が削除されます。そのため、「アーティファクトを更新します」というメッセージだけが残ります。Creator の投稿を編集しても、それしか表示されません。

何も更新または変更していません。コンソールにもエラーはありません。Claude 3.5 Sonnet です。

42

最新版にアップデートしましたか？システムの大規模なリファクタリングが完了し、多くの新しいノブと読み取りアーティファクトツールが追加されました。

「いいね！」 3