AI Generation

SenseCraft HMI は、Seeed Studio がディスプレイベースのデバイス向けに構築したインタラクティブなインターフェースデザインプラットフォームです。その中でも特に強力な機能のひとつが AI Generation で、自然言語で要望を説明するだけで画像や UI レイアウトを作成できます。SenseCraft HMI では、AI Generation は 2 つのモードで利用できます：

AI Image Generator：入力した説明をもとに、単体のカスタム画像を生成します。
AI Layout Generator：ボタン、テキスト欄、データ表示などの機能要素を含む、完全な UI レイアウトを作成します。

以下の手順に沿って、SenseCraft HMI の AI Generation 機能を実際に試してみましょう。

AI を使って画像を生成する

ステップ 1. 機能を有効化 ナビゲーションバーの AI Gen メニューをクリックし、AI Image Generator を選択します。

ステップ 2. プロンプトを入力 入力欄に、生成したい画像の詳細な説明を入力します。例：

「夜明けの最初の光に包まれた息をのむような山の景色。やわらかな朝霧の向こうから太陽がそっと顔を出し、静かな松林にあたたかな金色の光を落としている。世界がちょうど目を覚まし始めたような、穏やかで希望に満ちた雰囲気。」

ステップ 3. 生成開始 送信ボタンをクリックして生成を開始します。

ステップ 4. 処理を待つ AI がリクエストを処理するまで待ちます。説明の複雑さによりますが、通常は 10〜30 秒程度です。

ステップ 5. 反復的な調整 画像生成後は、AI との会話を続けながら微調整できます。たとえば：

「色をもっと鮮やかにしてください。」

ステップ 6. 結果を更新 再度送信ボタンを押すと、最新のフィードバックに基づいた新しいバージョンが生成されます。

ステップ 7. 納得できるまで調整 思いどおりの仕上がりになるまで、調整を繰り返します。

ステップ 8. 詳細を確認 生成されたサムネイルをクリックすると、右側に大きなプレビューが表示されます。

ステップ 9. ワークスペースへ追加 Add to My Page をクリックすると、生成した画像は画像ページとしてワークスペースに保存されます。
Insert to Canvas をクリックすると、生成した画像を Image コンポーネントとして現在のキャンバスに直接挿入できます。

AI を使ってレイアウトを作成する

ステップ 1. 機能を有効化 AI Gen メニューをクリックし、AI Layout Generator を選択します。

ステップ 2. レイアウト要件を説明 作成したいインターフェースの説明を入力します。必要なコンポーネントをできるだけ具体的に書いてください。例：

「温度表示、湿度ゲージ、天気予報アイコンを含む天気ダッシュボードを作成してください。」

ステップ 3. インターフェースを生成 送信ボタンをクリックして開始し、AI が完全なインターフェースレイアウトを構築するまで待ちます。

ステップ 4. レイアウトの微調整 初期レイアウト生成後は、会話を通じて位置やスタイルをさらに調整できます。たとえば：

「温度表示を右上に移動してください。」

ステップ 5. レイアウトを更新 再度送信ボタンをクリックすると、AI がフィードバックに基づいてコンポーネント配置を再調整します。

ステップ 6. 詳細をプレビュー サムネイルをクリックして、右側の詳細パネルでレイアウトを確認します。

ステップ 7. ワークスペースへ追加 Add to My Page をクリックすると、そのレイアウトは新しいページとしてワークスペースに保存されます。

AI 生成のベストプラクティス

1. 効果的なプロンプトを書くコツ

できるだけ具体的に：「ダッシュボードを作って」よりも、「中央に温度表示、右側に湿度、上部に時計があるダッシュボードを作って」の方が効果的です。
色やスタイルに言及する：たとえば「青と白の配色にして、すべての要素を角丸にする」のように指定します。
馴染みのあるデザインを参照する：たとえば「スマートサーモスタット風に」や「フィットネストラッカーの画面のように」と伝えると意図が伝わりやすくなります。

2. 反復的な改善

成功しやすいデザインは、複数回のフィードバックから生まれることが多いです：

まずは大まかな説明から始める。
初期デザインを生成する。
変更したい点について具体的なフィードバックを与える。
更新版を生成し、満足するまで繰り返す。

3. AI と手動編集を組み合わせる

より良い結果を得るために、次の進め方をおすすめします：

AI でたたき台作成：まず AI で基本レイアウトと主要コンポーネントをすばやく生成する。
手動で微調整：その後、要素の位置、サイズ、プロパティを手動で整える。
データバインディング：必要に応じて独自機能やデータソース接続を手動追加する。
大きな変更：新しいセクション全体を追加したい場合は、再度 AI を活用する。