Webサイト向けAI画像生成のウィジェットコード

画像生成ウィジェットは、短いテキストの説明をページ上でそのまま画像に変えます。訪問者が見たいものを入力すると、選んだモデルが画像を作り、結果がダウンロードリンク付きでウィジェットに表示されます。フロントエンドを作る必要も、サーバーでファイルを扱う必要もありません。

画像ウィジェットの仕組み

1. 訪問者が説明を入力します。例: 「夕暮れの灯台、水彩画風」。
2. ウィジェットはウィジェットIDを使ってプロンプトをapi14に送ります。APIキーと設定はサーバーに残ったままです。
3. 画像モデルが画像を生成し、ウィジェットが ダウンロード リンクと一緒に表示します。

リクエストはすべてモデルの通常価格でUSD残高から差し引かれ、後述の管理設定によってウィジェットが使える金額が決まります。

ウィジェットコード

ウィジェット でウィジェットを作成し、種類に 画像 を選んで保存します。するとエディターにコードが表示されます。

<script src="https://api14.com/widget.js" data-widget="YOUR_WIDGET_ID" async></script>

生成ツールを表示したい位置に貼り付けてください。既存の要素内に描画するには data-target="#gallery" を、結果の表示領域を広げるには data-height="520px" を使います (画像ウィジェットの既定値は420px)。隅のボタンから開きたい場合は フローティングボタン の配置を選びましょう。

押さえておきたい設定

• モデル: 選択欄にはカタログの画像モデルが価格付きで並びます。既存の画像を編集やアップスケールするだけのモデルはここでは役に立ちません。ウィジェットはテキストプロンプトから始まるためです。
• APIキー: ウィジェットを動かすキーを選ぶか、リストの最後にある 新しいAPIキーを作成 を選びます。そのキーの1日の利用上限、リクエスト頻度、許可するモデルがウィジェットに適用されます。
• テキスト: タイトル、入力欄のプレースホルダー (良い例文があると訪問者が始めやすくなります)、ボタンの文言を設定します。
• 外観: アクセントカラー、テーマ (訪問者に合わせる、ライト、ダーク)、角の丸みをデザインに合わせます。

画像ウィジェットが活きる場面

• ブログやクリエイティブなコミュニティ: 訪問者が自分のアイデアを絵にできます。
• 代理店やスタジオ: ランディングページで手軽なコンセプトツールとして。
• 教育: 生徒が説明を画像にして、それを題材に話し合えます。

公開する前に

設定、ウィジェットのサイト にドメインを登録してください。ウィジェットは登録したサイトからのリクエストにのみ応答します。1日の利用上限を設定し、エディターのプレビューでいくつかプロンプトを試し、デスクトップとスマートフォンの両方で結果を確認しましょう。

アカウントがなくても ウィジェットページ で画像ウィジェットをデザインできます。すべてのオプションは ウィジェットのドキュメント で詳しく説明しています。