React Nativeから使うStability AI：画像生成APIの活用

1. はじめに

環境広場、今年はいちだんと賑やかでした。
クラウドソリューション開発部の寺谷です。会場で展示した子ども向け画像生成アプリは、気づけばブース前に小さな行列。タップひとつで絵が出るたび、「もう一回！」の連打コールで僕の腕も連打。
イベントの様子はこちらにまとめています。
今日はその心臓部 Stability AI を深掘りします。AIについて、料金、APIの使い方（React Native）、
そして日本語と英語プロンプト比較まで一気にどうぞ。

2. AIについて（言葉で絵をつくる仕組み）

生成AIは、ランダムなノイズから出発し、何度も計算を繰り返してノイズを減らしつつ、プロンプトの内容に合う方向へ画像全体を同時に整えていくそうです。
たとえば「青空の下で遊ぶ猫、水彩画風に描いて」と伝えると、ステップを重ねる中で「青空」「草原」「猫の形」「水彩のにじみ」といった要素の可能性が少しずつ強まり、最後に1枚の画像として定まります。

生成の大まかな流れ

ノイズ画像を用意
テキストを数値化（プロンプトの意味をベクトルに）
ノイズを少しずつ除去（毎ステップ、テキストの方向に全体を調整）
完成（指定のスタイル・構図に近い画像が出力）

3. Stability AIについて（なにができて、どう使う？）

Stability AI は、画像生成モデル（Stable Diffusion 系）を中心に、開発者が使える画像生成APIを提供している会社です。ブラウザやモバイル、サーバーから直接叩けるHTTP APIが用意されており、React Nativeからも簡単に呼び出せます。

React Nativeの実装視点のポイント

HTTPで完結：fetch/FormData で送れるので、ネイティブ拡張は不要
再現性：seed を固定すると毎回ほぼ同じ画像に近づく
サイズ/比率：width/height や aspect_ratio で版面を調整
フォーマット：output_format を jpeg にすると軽くて扱いやすい（モバイル向き）
エラー/待ち時間：タイムアウト（例：20秒）や多重タップ防止を入れる

料金

Stability AI の API はクレジット制です。
これは「使った分だけポイントが減っていくプリペイド式」のようなもので、1 credit = 約 $0.01（1.48円）。生成や編集の処理ごとに、あらかじめ決まったクレジット数が消費されます。
価格について
Stable Image Core（環境広場で利用）
・1回の生成＝3 credits（約 $0.03／枚）

Stable Image Ultra（最高品質）
・1回の生成＝8 credits（約 $0.08／枚）

APIの使い方（React Native）

今回は、環境広場のアプリで採用した Stable Image Core API を利用した実装例をご紹介します。
画像生成には FormData 形式でパラメータを送信します。以下に、主要パラメータの役割をまとめた表を掲載します。

Stable Image Core API に FormData でパラメータを送り、Base64の画像データURIを返す関数について下記に添付します。

import Config from 'react-native-config';

export type GenerateImageOptions = {
  prompt: string;
  negative_prompt?: string;
  width?: number;
  height?: number;
  model?: 'sd3.5-medium' | 'sd3.5-large' | 'sd3.5-large-turbo' | 'sdxl' | 'stable-diffusion-v1-5';
  aspect_ratio?: '1:1' | '16:9' | '9:16';
};

export async function generateImageFromStability({
  prompt,
  negative_prompt = '',
  width = 512,
  height = 512,
  model = 'sd3.5-medium',
  aspect_ratio = '1:1',
}: GenerateImageOptions): Promise<string> {
  const API_KEY = Config.IMAGE_API_KEY;
  if (!API_KEY) throw new Error('IMAGE_API_KEY is not set in .env');

  const endpoint = 'https://api.stability.ai/v2beta/stable-image/generate/core';
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), 20000); // 20秒タイムアウト

  const form = new FormData();
  form.append('model', model);
  form.append('prompt', prompt);
  form.append('negative_prompt', negative_prompt);
  form.append('width', width.toString());
  form.append('height', height.toString());
  form.append('aspect_ratio', aspect_ratio);
  form.append('seed', Math.floor(Math.random() * 1e9).toString());
  form.append('output_format', 'jpeg');

  const response = await fetch(endpoint, {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${API_KEY}`,
      Accept: 'application/json',
    },
    body: form as any,
    signal: controller.signal,
  }).finally(() => clearTimeout(timeoutId));

  if (!response.ok) {
    const contentType = response.headers.get('content-type');
    const errorData = contentType?.includes('application/json')
      ? await response.json()
      : await response.text();
    throw new Error(`Image generation failed: ${JSON.stringify(errorData)}`);
  }

  const data = await response.json();

  if (data.image) return `data:image/jpeg;base64,${data.image}`;
  if (data.artifacts?.[0]?.base64) return `data:image/jpeg;base64,${data.artifacts[0].base64}`;

  throw new Error('No image data returned');
}

import Config from 'react-native-config';

export type GenerateImageOptions = {

prompt: string;

negative_prompt?: string;

width?: number;

height?: number;

model?: 'sd3.5-medium' | 'sd3.5-large' | 'sd3.5-large-turbo' | 'sdxl' | 'stable-diffusion-v1-5';

aspect_ratio?: '1:1' | '16:9' | '9:16';

};

export async function generateImageFromStability({

prompt,

negative_prompt = '',

width = 512,

height = 512,

model = 'sd3.5-medium',

aspect_ratio = '1:1',

}: GenerateImageOptions): Promise<string> {

const API_KEY = Config.IMAGE_API_KEY;

if (!API_KEY) throw new Error('IMAGE_API_KEY is not set in .env');

const endpoint = 'https://api.stability.ai/v2beta/stable-image/generate/core';

const controller = new AbortController();

const timeoutId = setTimeout(() => controller.abort(), 20000); // 20秒タイムアウト

const form = new FormData();

form.append('model', model);

form.append('prompt', prompt);

form.append('negative_prompt', negative_prompt);

form.append('width', width.toString());

form.append('height', height.toString());

form.append('aspect_ratio', aspect_ratio);

form.append('seed', Math.floor(Math.random() * 1e9).toString());

form.append('output_format', 'jpeg');

const response = await fetch(endpoint, {

method: 'POST',

headers: {

Authorization: `Bearer ${API_KEY}`,

Accept: 'application/json',

body: form as any,

signal: controller.signal,

}).finally(() => clearTimeout(timeoutId));

if (!response.ok) {

const contentType = response.headers.get('content-type');

const errorData = contentType?.includes('application/json')

? await response.json()

: await response.text();

throw new Error(`Image generation failed: ${JSON.stringify(errorData)}`);

}

const data = await response.json();

if (data.image) return `data:image/jpeg;base64,${data.image}`;

if (data.artifacts?.[0]?.base64) return `data:image/jpeg;base64,${data.artifacts[0].base64}`;

throw new Error('No image data returned');

}

認証：.env の IMAGE_API_KEY を react-native-config で参照。
送信：FormData に model / prompt / (negative_prompt) / width / height / aspect_ratio / seed / output_format を追加。
数値は .toString() で文字列化。output_format:’jpeg’で軽量＆表示が速い。
再現性：seed を固定すれば同じプロンプトで近い画像に。
タイムアウト：AbortControllerで20秒に設定。
受信：data:image/jpeg;base64,… を返すので、そのままに使える。

4. 日本語と英語プロンプト比較

今回は Stable Image Core API を使い、テキスト入力から直接画像を生成するデモ機能を実装しました。同じ意味の指示を日本語と英語で入力し、その結果を比較しています。

入力したプロンプト
日本語：青空で遊ぶ猫、水彩画風に描いて
英語：A cat playing under the blue sky, watercolor style

生成結果の違い

日本語の場合

猫が水辺で泳いでいる写真風の画像が生成され、意図していた青空と水彩タッチからやや外れた印象になりました。

英語の場合

青空の下で遊ぶ猫が、全体的に水彩タッチで描かれたイラストとして出力され、狙いに近い仕上がりになりました。

今回のように英語のほうが精度が高い理由は、学習データの偏りにあると考えられます。

Stable Diffusion や Stable Image Core API などの生成AIは、大量の画像と説明文のペアをもとに学習していますが、その説明文の大半は英語となっているようです。
一方、日本語の事例は比較的少ないため、どうしても解釈の精度に差が出てしまったと思われます。

5. まとめ

今回、環境広場さっぽろで展示した子ども向け画像生成アプリを通して、Stability AI の Stable Image Core API を実際に使ってみました。React Native からもシンプルな実装で利用でき、イベント会場でもストレスなく動作してくれる性能は十分でした。クレジット制で料金も分かりやすく、小規模イベントや試験導入にも向いています。
また、日本語と英語で同じ内容を入力しても生成結果に差が出るなど、実際に触ってみて分かる発見もありました(環境広場では英語プロンプトにしていました)。特に英語プロンプトの方が精度が高い傾向は、学習データの特性を理解するきっかけになります。
Stability AI は開発者にとって扱いやすく、短時間で「見て楽しい」体験を作れる強力なツールです。今後は、日本語対応の精度向上や新しいモデルの登場にも期待しつつ、さらに面白い活用方法を探っていきたいと思います。

エコモットでは、モノづくりに共感してくれる仲間を募集中です！弊社に少しでも興味がある方、ぜひ下記の採用ページをご覧ください！

募集要項（当社HP）

React Nativeから使うStability AI：画像生成APIの活用

1. はじめに

2. AIについて（言葉で絵をつくる仕組み）

3. Stability AIについて（なにができて、どう使う？）

料金

APIの使い方（React Native）

4. 日本語と英語プロンプト比較

生成結果の違い

5. まとめ

最近の投稿

カテゴリー

採用情報

IoTプラットフォーム「FASTIO」

1. はじめに

2. AIについて（言葉で絵をつくる仕組み）

3. Stability AIについて（なにができて、どう使う？）

料金

APIの使い方（React Native）

4. 日本語と英語プロンプト比較

生成結果の違い

5. まとめ

最近の投稿

人気の投稿

カテゴリー

採用情報

IoTプラットフォーム「FASTIO」