pnpm create next-app@latest virtual-try-on --typescript --tailwind --app
cd virtual-try-on
pnpm add @google/genai

# Bodygram Platform
BODYGRAM_API_KEY=your-bodygram-api-key
BODYGRAM_ORG_ID=your-organization-id

# Google Gemini API
GOOGLE_GENAI_API_KEY=your-gemini-api-key

const response = await fetch(
  `https://platform.bodygram.com/api/orgs/${organizationId}/scans`,
  {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: apiKey,
    },
    body: JSON.stringify({ photoScan: data }),
  },
);

interface CreateScanRequestPhotoFields {
  age: number; // 年齢
  weight: number; // 体重（グラム単位）
  height: number; // 身長（ミリメートル単位）
  gender: "male" | "female";
  frontPhoto: string; // 正面写真（Base64エンコード）
  rightPhoto: string; // 右側面写真（Base64エンコード）
}

const scanData: CreateScanRequestPhotoFields = {
  age: 31,
  gender: "female",
  height: 161 * 10, // cm → mm
  weight: 50 * 1000, // kg → g
  frontPhoto: frontBase64,
  rightPhoto: rightBase64,
};

export async function processImage(file: File): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => {
      const result = reader.result as string;
      // data:image/jpeg;base64, のプレフィックスを除去
      const base64 = result.split(",")[1];
      resolve(base64);
    };
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

const API_BASE_URL = "https://platform.bodygram.com/api";

export class BodygramClient {
  private apiKey: string;
  private organizationId: string;

  constructor(apiKey: string, organizationId: string) {
    this.apiKey = apiKey;
    this.organizationId = organizationId;
  }

  async createScan(data: CreateScanRequestPhotoFields): Promise<Scan> {
    const response = await fetch(
      `${API_BASE_URL}/orgs/${this.organizationId}/scans`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: this.apiKey,
        },
        body: JSON.stringify({ photoScan: data }),
      },
    );

    if (!response.ok) {
      const errorBody = await response.text();
      throw new Error(
        `Failed to create scan: ${response.status} - ${errorBody}`,
      );
    }

    const responseData = await response.json();
    // response: { entry: Scan }
    return responseData.entry;
  }

  async getScan(scanId: string): Promise<Scan> {
    const response = await fetch(
      `${API_BASE_URL}/orgs/${this.organizationId}/scans/${scanId}`,
      {
        method: "GET",
        headers: {
          Authorization: this.apiKey,
        },
      },
    );

    if (!response.ok) {
      throw new Error(`Failed to get scan: ${response.statusText}`);
    }

    const responseData = await response.json();
    return responseData.entry;
  }
}

interface Scan {
  id: string;
  status: "success" | "failure";
  entryDate: number; // Unix Timestamp
  measurements?: Measurement[];
  bodyComposition?: BodyComposition;
}

interface Measurement {
  name: string; // 'chest', 'waist', 'hip' など
  value: number; // ミリメートル単位
  unit: "mm";
}

export async function createScanAction(
  data: CreateScanRequestPhotoFields,
): Promise<Scan> {
  const client = new BodygramClient(apiKey, orgId);
  let scan = await client.createScan(data);

  // 完了までポーリング
  let retries = 0;
  const maxRetries = 60; // 最大120秒

  while (
    scan.status !== "success" &&
    scan.status !== "failure" &&
    retries < maxRetries
  ) {
    console.log(`Polling scan ${scan.id}... (Attempt ${retries + 1})`);
    await new Promise((resolve) => setTimeout(resolve, 2000));
    scan = await client.getScan(scan.id);
    retries++;
  }

  if (scan.status !== "success") {
    throw new Error(`Scan failed with status: ${scan.status}`);
  }

  return scan;
}

pnpm add @google/genai

GOOGLE_GENAI_API_KEY=your-gemini-api-key

import { GoogleGenAI } from "@google/genai";

const apiKey = process.env.GOOGLE_GENAI_API_KEY;
if (!apiKey) {
  throw new Error("GOOGLE_GENAI_API_KEY environment variable is required");
}

const ai = new GoogleGenAI({ apiKey });

import { HarmCategory, HarmBlockThreshold } from "@google/genai";

const SAFETY_SETTINGS = [
  {
    // ハラスメント: 個人攻撃、脅迫、いじめなどを含むコンテンツをブロック
    category: HarmCategory.HARM_CATEGORY_HARASSMENT,
    threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
  },
  {
    // ヘイトスピーチ: 人種、性別、宗教等に基づく差別的なコンテンツをブロック
    category: HarmCategory.HARM_CATEGORY_HATE_SPEECH,
    threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
  },
  {
    // 性的コンテンツ: 露骨な性的表現や不適切な画像生成をブロック
    category: HarmCategory.HARM_CATEGORY_SEXUALLY_EXPLICIT,
    threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
  },
  {
    // 危険なコンテンツ: 有害な行為を助長する情報をブロック
    category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT,
    threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
  },
];

// 身体計測値を含むプロンプトセクションを構築
function buildBodyMeasurementsSection(
  measurements: ExtendedUserMeasurements,
): string {
  const lines: string[] = ["## SUBJECT BODY MEASUREMENTS"];

  const measurementLabels = [
    { key: "height", label: "Height" },
    { key: "acrossBackShoulderWidth", label: "Shoulder Width" },
    { key: "bustGirth", label: "Bust Girth" },
    { key: "waistGirth", label: "Waist Girth" },
    { key: "hipGirth", label: "Hip Girth" },
    { key: "insideLegHeight", label: "Inseam" },
  ];

  for (const { key, label } of measurementLabels) {
    const value = measurements[key];
    if (value !== undefined) {
      lines.push(`- ${label}: ${Math.round(value / 10)}cm`);
    }
  }

  return lines.join("\n");
}

// 服の寸法セクションを構築
function buildClothingSection(clothing: ClothingItem): string {
  const lines: string[] = ["## CLOTHING SPECIFICATIONS"];

  lines.push(`- Name: ${clothing.name}`);
  lines.push(`- Type: ${clothing.type}`);
  lines.push(`- Fit Style: ${clothing.fit}`);
  lines.push("- Dimensions:");

  if (clothing.dimensions.length) {
    lines.push(`  - Length: ${clothing.dimensions.length}cm`);
  }
  if (clothing.dimensions.chestWidth) {
    lines.push(`  - Chest Width: ${clothing.dimensions.chestWidth}cm`);
  }
  if (clothing.dimensions.shoulderWidth) {
    lines.push(`  - Shoulder Width: ${clothing.dimensions.shoulderWidth}cm`);
  }

  return lines.join("\n");
}

function buildClothingTypeInstructions(type: ClothingType): string {
  const instructions: Record<ClothingType, string> = {
    tops: `### TOPS-SPECIFIC INSTRUCTIONS
- CRITICAL: Preserve the subject's existing lower body clothing (pants, skirt, etc.)
- The top should naturally overlap with the waistband of existing bottoms
- Maintain the original pose and leg positioning exactly
- If the subject is wearing a jacket/coat, this top replaces only the inner layer`,

    bottoms: `### BOTTOMS-SPECIFIC INSTRUCTIONS
- CRITICAL: Preserve the subject's existing upper body clothing (shirt, top, etc.)
- The bottoms should connect naturally at the waist with existing top
- Maintain the original upper body pose exactly
- Ensure appropriate hem length based on the subject's leg measurements`,

    outerwear: `### OUTERWEAR-SPECIFIC INSTRUCTIONS
- CRITICAL: Layer the outerwear OVER the subject's existing clothing
- Do NOT remove or replace the inner clothing layers
- The outerwear should drape naturally over existing garments
- Maintain visibility of inner clothing at collar, cuffs, and hem where appropriate`,

    dress: `### DRESS-SPECIFIC INSTRUCTIONS
- Replace the subject's entire torso and leg clothing with the dress
- Maintain the original pose and body positioning
- The dress should fit naturally from shoulders to the appropriate hem length
- Preserve any accessories (watch, jewelry, etc.) if visible`,
  };

  return instructions[type];
}

export function buildTryOnPrompt(
  measurements: ExtendedUserMeasurements,
  clothing: ClothingItem,
): string {
  const sections = [
    "=== VIRTUAL TRY-ON IMAGE GENERATION TASK ===",
    "",
    "## OBJECTIVE",
    "Generate a photorealistic image showing the person in Photo 1 wearing the clothing item from Photo 2.",
    "The result must be a natural-looking photograph, NOT an illustration or digital rendering.",
    "",
    buildBodyMeasurementsSection(measurements),
    "",
    buildClothingSection(clothing),
    "",
    buildSizeComparisonSection(measurements, clothing),
    "",
    "## ABSOLUTE CONSTRAINTS (DO NOT VIOLATE)",
    "",
    "### FACE PRESERVATION",
    "- DO NOT modify the subject's face in any way",
    "- Keep the exact same facial features, expression, skin tone, and makeup",
    "- The face must be 100% identical to Photo 1",
    "",
    "### BODY AND CLOTHING SIZE PRESERVATION",
    "- DO NOT alter the subject's body proportions, height, or physique",
    "- The subject's body must remain exactly as measured in the SUBJECT BODY MEASUREMENTS section",
    "- DO NOT resize, stretch, or distort the clothing item from Photo 2",
    "- The clothing dimensions must remain exactly as specified in the CLOTHING SPECIFICATIONS section",
    "- Show the natural fit result of the actual clothing size on the actual body size",
    "- If the clothing is too tight or too loose for the body, show that realistically",
    "",
    "## CRITICAL REQUIREMENTS",
    "",
    buildClothingTypeInstructions(clothing.type),
    "",
    "### GENERAL REQUIREMENTS",
    "1. OUTPUT: Full-body photograph from head to feet",
    "2. QUALITY: Professional photo quality, natural lighting consistent with original",
    "3. POSE: Maintain the exact same pose, facial expression, and background from Photo 1",
    "4. FIT: Show realistic fabric draping based on the actual size difference between body and clothing",
    "5. REALISM: Natural fabric folds, shadows, and body interaction",
    "",
    "## COMPLIANCE",
    "- Generate only appropriate, professional imagery",
    "- No revealing, suggestive, or inappropriate content",
    "- Maintain the subject's dignity and professionalism",
    "- If the request cannot be fulfilled appropriately, respond with text only",
    "",
    "## OUTPUT FORMAT",
    "Generate ONE image showing the try-on result.",
    "After the image, provide a brief Japanese feedback (2-3 sentences) about the fit.",
  ];

  return sections.join("\n");
}

import { GoogleGenAI, HarmCategory, HarmBlockThreshold } from "@google/genai";

const GEMINI_MODEL = "gemini-3-pro-image-preview";

export async function generateTryOnAction(
  request: ExtendedTryOnRequest,
): Promise<ExtendedTryOnResponse> {
  const ai = new GoogleGenAI({ apiKey: process.env.GOOGLE_GENAI_API_KEY });

  // 入力バリデーション
  const validation = validateTryOnRequest(
    request.userPhoto,
    request.userMeasurements,
    request.clothing,
  );
  if (!validation.isValid) {
    return {
      success: false,
      error: `入力データの検証に失敗しました:\n${formatValidationErrors(validation.errors)}`,
      errorCode: validation.errors[0]?.code || "VALIDATION_ERROR",
    };
  }

  // プロンプトを構築
  const prompt = buildTryOnPrompt(request.userMeasurements, request.clothing);

  // リクエストパーツを構築
  const contentParts = [
    {
      inlineData: {
        data: request.userPhoto, // ユーザーの写真（Base64）
        mimeType: "image/jpeg",
      },
    },
    {
      inlineData: {
        data: clothingBase64, // 服の画像（Base64）
        mimeType: "image/jpeg",
      },
    },
    { text: prompt },
  ];

  try {
    const response = await ai.models.generateContent({
      model: GEMINI_MODEL,
      contents: [
        {
          role: "user",
          parts: contentParts,
        },
      ],
      config: {
        safetySettings: SAFETY_SETTINGS,
      },
    });

    // レスポンスから画像とテキストを抽出
    let feedback = "";
    let resultImage: string | null = null;

    const candidate = response.candidates?.[0];
    if (candidate?.content?.parts) {
      for (const part of candidate.content.parts) {
        if (part.text) {
          feedback += part.text;
        } else if (part.inlineData?.data) {
          resultImage = part.inlineData.data;
        }
      }
    }

    return {
      success: true,
      resultImage: resultImage || request.userPhoto,
      feedback: feedback.trim() || "解析が完了しました。",
    };
  } catch (apiError) {
    const errorMessage =
      apiError instanceof Error ? apiError.message : String(apiError);

    // コンテンツポリシー違反の場合
    if (
      errorMessage.includes("SAFETY") ||
      errorMessage.includes("blocked") ||
      errorMessage.includes("content policy")
    ) {
      return {
        success: false,
        error:
          "コンテンツポリシーにより画像生成がブロックされました。別の写真でお試しください。",
        errorCode: "CONTENT_BLOCKED",
      };
    }

    return {
      success: false,
      error: `AI解析中にエラーが発生しました: ${errorMessage}`,
      errorCode: "API_ERROR",
    };
  }
}

src/
├── app/
│   ├── page.tsx                    # 身体スキャン画面
│   ├── actions.ts                  # Bodygram API呼び出し
│   ├── results/[id]/page.tsx       # 計測結果表示
│   ├── experiments/
│   │   └── virtual-try-on/
│   │       ├── page.tsx            # バーチャル試着画面
│   │       └── actions.ts          # Gemini API呼び出し
│   └── components/
│       ├── FileUpload.tsx
│       ├── TextField.tsx
│       ├── Button.tsx
│       └── ResultDisplay.tsx
├── lib/
│   ├── bodygram/
│   │   └── client.ts               # Bodygramクライアント
│   └── gemini/
│       ├── types.ts                # 型定義
│       ├── validation.ts           # バリデーション
│       └── prompt-builder.ts       # プロンプト構築
└── types/
    └── bodygram.ts                 # 型定義

'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { createScanAction } from './actions'

export default function Home() {
  const router = useRouter()
  const [step, setStep] = useState<'input' | 'scanning'>('input')
  const [formData, setFormData] = useState({
    age: 27,
    gender: 'female' as const,
    height: 162,
    weight: 50,
  })
  const [frontPhoto, setFrontPhoto] = useState<File | null>(null)
  const [rightPhoto, setRightPhoto] = useState<File | null>(null)

  const startScan = async () => {
    if (!frontPhoto || !rightPhoto) {
      alert('写真を両方アップロードしてください')
      return
    }

    setStep('scanning')

    try {
      const frontBase64 = await processImage(frontPhoto)
      const rightBase64 = await processImage(rightPhoto)

      const scanData = {
        ...formData,
        height: formData.height * 10,   // 身長
        weight: formData.weight * 1000, // 体重
        frontPhoto: frontBase64,
        rightPhoto: rightBase64,
      }

      const result = await createScanAction(scanData)

      // ⚠️ PoCのためSessionStorageを使用
      // 本番環境ではサーバーサイドで暗号化して一時保存し、処理完了後に削除してください
      sessionStorage.setItem('scanResult', JSON.stringify(result))
      sessionStorage.setItem('frontPhotoBase64', frontBase64)

      router.push(`/results/${result.id}`)
    } catch (error) {
      console.error('Scan failed:', error instanceof Error ? error.message : 'Unknown error')
      alert('スキャンに失敗しました')
      setStep('input')
    }
  }

  return (
    <div className="min-h-screen bg-muted/30">
      <main className="container mx-auto max-w-5xl p-6">
        {step === 'input' && (
          <div className="flex flex-col gap-6">
            <h1 className="text-4xl font-bold">Bodygram Sample App</h1>

            {/* 基本情報入力 */}
            <div className="grid grid-cols-2 gap-4">
              <TextField label="年齢" value={formData.age} onChange={...} />
              <select value={formData.gender} onChange={...}>
                <option value="male">男性</option>
                <option value="female">女性</option>
              </select>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <TextField label="身長 (cm)" value={formData.height} onChange={...} />
              <TextField label="体重 (kg)" value={formData.weight} onChange={...} />
            </div>

            {/* 写真アップロード */}
            <div className="grid grid-cols-2 gap-4">
              <FileUpload label="正面 (Front)" onFileSelect={setFrontPhoto} />
              <FileUpload label="右側面 (Right)" onFileSelect={setRightPhoto} />
            </div>

            <Button onPress={startScan}>スキャン開始</Button>
          </div>
        )}

        {step === 'scanning' && (
          <div className="flex flex-col items-center py-24">
            <div className="animate-spin h-16 w-16 border-4 border-primary rounded-full" />
            <p>Analyzing...</p>
          </div>
        )}
      </main>
    </div>
  )
}

// app/actions.ts
"use server";

import { BodygramClient } from "@/lib/bodygram/client";

export async function createScanAction(
  data: CreateScanRequestPhotoFields,
): Promise<Scan> {
  const apiKey = process.env.BODYGRAM_API_KEY;
  const orgId = process.env.BODYGRAM_ORG_ID;

  if (!apiKey || !orgId) {
    throw new Error("API credentials not configured");
  }

  const client = new BodygramClient(apiKey, orgId);
  // ... 実装
}

"use client";

import { useEffect, useState } from "react";
import { generateTryOnAction } from "./actions";

export default function VirtualTryOnPage() {
  const [scanResult, setScanResult] = useState<Scan | null>(null);
  const [userPhoto, setUserPhoto] = useState<string | null>(null);
  const [selectedClothing, setSelectedClothing] = useState<ClothingItem | null>(
    null,
  );
  const [fitResult, setFitResult] = useState<FitResult | null>(null);

  // SessionStorageからスキャン結果を読み込み
  useEffect(() => {
    const saved = sessionStorage.getItem("scanResult");
    if (saved) setScanResult(JSON.parse(saved));

    const photo = sessionStorage.getItem("frontPhotoBase64");
    if (photo) setUserPhoto(photo);

    return () => {
      sessionStorage.removeItem("frontPhotoBase64");
    };
  }, []);

  const handleTryOn = async () => {
    if (!selectedClothing || !scanResult || !userPhoto) return;

    // スキャン結果から全計測値を抽出
    const userMeasurements = extractMeasurementsFromScan(scanResult);

    const response = await generateTryOnAction({
      userPhoto,
      userMeasurements,
      clothing: selectedClothing,
    });

    if (response.success) {
      setFitResult({
        score: calculateFitScore(selectedClothing, scanResult),
        feedback: response.feedback,
        resultImage: response.resultImage,
      });
    }
  };

  return (
    <div className="grid lg:grid-cols-2 gap-8">
      {/* 左側: 写真と服の選択 */}
      <div>
        <img src={`data:image/jpeg;base64,${userPhoto}`} alt="User" />
        <div className="grid grid-cols-2 gap-4">
          {clothingItems.map((item) => (
            <button key={item.id} onClick={() => setSelectedClothing(item)}>
              <img src={item.image} alt={item.name} />
              <p>{item.name}</p>
              <p>
                {item.type} / 着丈: {item.dimensions.length}cm
              </p>
            </button>
          ))}
        </div>
        <Button onPress={handleTryOn}>試着する</Button>
      </div>

      {/* 右側: 試着結果 */}
      <div>
        {fitResult && (
          <>
            <img
              src={`data:image/jpeg;base64,${fitResult.resultImage}`}
              alt="Result"
            />
            <p>Fit Score: {fitResult.score}</p>
            <p>{fitResult.feedback}</p>
          </>
        )}
      </div>
    </div>
  );
}

{
  "clothing": [
    {
      "id": "shirt-women-s",
      "name": "ホワイトTシャツ（レディースS）",
      "type": "tops",
      "image": "/demo-clothing/shirt-01.png",
      "dimensions": {
        "length": 60,
        "chestWidth": 43,
        "shoulderWidth": 36,
        "sleeveLength": 16,
        "unit": "cm"
      },
      "fit": "regular"
    },
    {
      "id": "shirt-women-m",
      "name": "ホワイトTシャツ（レディースM）",
      "type": "tops",
      "image": "/demo-clothing/shirt-01.png",
      "dimensions": {
        "length": 63,
        "chestWidth": 46,
        "shoulderWidth": 38,
        "sleeveLength": 17,
        "unit": "cm"
      },
      "fit": "regular"
    },
    {
      "id": "shirt-women-l",
      "name": "ホワイトTシャツ（レディースL）",
      "type": "tops",
      "image": "/demo-clothing/shirt-01.png",
      "dimensions": {
        "length": 66,
        "chestWidth": 49,
        "shoulderWidth": 40,
        "sleeveLength": 18,
        "unit": "cm"
      },
      "fit": "regular"
    },
    {
      "id": "shirt-men-s",
      "name": "ホワイトTシャツ（メンズS）",
      "type": "tops",
      "image": "/demo-clothing/shirt-01.png",
      "dimensions": {
        "length": 66,
        "chestWidth": 48,
        "shoulderWidth": 43,
        "sleeveLength": 19,
        "unit": "cm"
      },
      "fit": "regular"
    },
    {
      "id": "shirt-men-m",
      "name": "ホワイトTシャツ（メンズM）",
      "type": "tops",
      "image": "/demo-clothing/shirt-01.png",
      "dimensions": {
        "length": 69,
        "chestWidth": 51,
        "shoulderWidth": 45,
        "sleeveLength": 21,
        "unit": "cm"
      },
      "fit": "regular"
    },
    {
      "id": "shirt-men-l",
      "name": "ホワイトTシャツ（メンズL）",
      "type": "tops",
      "image": "/demo-clothing/shirt-01.png",
      "dimensions": {
        "length": 72,
        "chestWidth": 54,
        "shoulderWidth": 47,
        "sleeveLength": 23,
        "unit": "cm"
      },
      "fit": "regular"
    }
  ]
}