ローカルで試したところ、ほとんどの問題は次のとおりでした。
- フルスクリーン表示では、エスケープバーがコンテンツに重なり、操作できなくなることがあります。
- 「Run Artifacts」がすぐに表示されないことがありますが、投稿アイコンなどにカーソルを合わせると表示されるようです（おそらく）。
- 結果が表示されないインスタンスが1つだけありました。インジケーターは見えましたが、何も起こりませんでした。
全体として、非常によく機能しています。
デモの一部を以下に示します。
デモをうまく作成するのはそれほど簡単ではありません。いつものように、プロンプトが詳細であるほど良い結果が得られます。
場合によっては、追加の精度が必要になります。常にすべてのリソースが含まれているわけではなく、応答性がなかったり、ページ読み込みを待つためのコードが必要になったりします。また、外部ライブラリの使用は失敗の可能性を高めます。
この機能はあまりにも楽しかったです。
プロンプト（放物線運動のシミュレーション）
放物線運動をシミュレートするページを作成してください。ページは次のことを行う必要があります。
- ユーザーが放物体の初速度、角度、高さを入力できるようにする。
- 放物体の軌道のライブアニメーションを表示する。
- 飛行時間、最高到達高度、到達距離の計算値を表示する。
- 入力パラメータのリアルタイム調整のためにスライダーを使用する。
- 最初からやり直すための「リセット」ボタンを含める。
ビデオ
プロンプト（絵文字雨ゲーム）
ユーザーが気分を選択すると、画面から絵文字が降り注ぐページを作成してください。ページは次のことを行う必要があります。
- 「ハッピー」、「不機嫌」、「ピザ」などの気分オプションを提供する。
- 、
、
などの絵文字を画面上部から無限に落下させる。 - ユーザーが絵文字をクリックして、面白い効果音とともに「収集」できるようにする。
- 「収集したピザスライス：27」のような面白いカウンターを含める。
- アニメーションの楽しさのためにHTML、CSS、JavaScriptを使用する。
ビデオ
プロンプト（シンプルな太陽系ビジュアライザー）
太陽系を視覚化するページを作成してください。ページは次のことを行う必要があります。
- 惑星の軌道を示す、縮小されたアニメーションの詳細な太陽系を表示する。
- ユーザーが惑星をクリックして、サイズ、太陽からの距離、公転周期などの情報を表示できるようにする。
- ユーザーがズームインおよびズームアウトできるようにする。
- 公転運動の速度を速めたり遅くしたりするためのスライダーを含める。
- インタラクティブ性とアニメーションのためにHTML、CSS、JavaScriptを使用する。
- コンテナが幅と高さ100%を使用するようにする。
ビデオ
プロンプト（CSSアニメーションプレイグラウンド）
ユーザーがCSSアニメーションとトランジションを試すことができるページを作成してください。ページは次のことを行う必要があります。
- ユーザーがCSSでアニメーションできるさまざまな要素（ボタン、divなど）を表示する。
- ユーザーがアニメーションプロパティ（例：transform、opacity、translate、rotate）のリストから選択できるようにする。
- アニメーションの期間、タイミング関数、遅延を調整するためのスライダーを提供する。
- ユーザーがアニメーションをリアルタイムでプレビューし、変更がアニメーションにどのように影響するかを確認できるようにする。
- JavaScriptを使用してCSSプロパティを動的に更新し、HTML/CSSでスタイリングする。
ビデオ
プロンプト（インタラクティブデータダッシュボード）
インタラクティブなチャートを備えたデータダッシュボードを視覚化するページを作成してください。ページは次のことを行う必要があります。
- 棒グラフ、折れ線グラフ、円グラフなど、さまざまなデータセット（例：売上、人口、気象データ）を表す複数のチャートを表示する。
- ユーザーがドロップダウンメニューまたはスライダーを使用して、期間、カテゴリ、または場所でデータをフィルタリングできるようにする。
- ユーザーがフィルターを操作すると、チャートがリアルタイムで更新される。
- 選択したデータの記述統計（例：平均、中央値、最頻値）を表示する。
- チャートのレンダリングにChart.jsまたはD3.jsを使用し、データフィルタリングと統計計算を処理するためにJavaScriptを使用する。