TwelveLabs API を使用したショッパブルビデオアプリケーションの構築

// TwelveLabsインデックスから動画を読み込む
 const loadVideos = useCallback(async () => {
   const defaultIndexId = process.env.NEXT_PUBLIC_DEFAULT_INDEX_ID;
   if (!defaultIndexId) {
     console.error('Default index ID not configured');
     return;
   }


   setIsLoadingVideos(true);
   try {
     const response = await fetch(`/api/videos?index_id=${defaultIndexId}&limit=50`);
     if (!response.ok) {
       throw new Error(`Failed to fetch videos: ${response.statusText}`);
     }


     const data = await response.json();
     setVideos(data.data || []);


     // デフォルトで最新の動画を選択（APIは新しい順に返すためリストの最初）
     if (data.data && data.data.length > 0) {
       setSelectedVideoId(data.data[0]._id);
     }

// 動画が選択されたときに動画の詳細を読み込む
 const loadVideoDetail = useCallback(async (videoId: string) => {
   const defaultIndexId = process.env.NEXT_PUBLIC_DEFAULT_INDEX_ID;
   if (!defaultIndexId || !videoId) {
     return;
   }


   setIsLoadingVideoDetail(true);


// ...


   try {
     const response = await fetch(`/api/videos/${videoId}?indexId=${defaultIndexId}`);
     if (!response.ok) {
       throw new Error(`Failed to fetch video detail: ${response.statusText}`);
     }


     const data = await response.json();
     setVideoDetail(data);


     // 動画URLを設定する前に、カスタムメタデータが存在するか確認し、必要に応じて生成する
     await checkAndGenerateMetadata(videoId, defaultIndexId, data);


     // HLSデータが利用可能な場合、動画のURLを設定する（メタデータ確認の後）
     if (data.hls?.video_url) {
       setVideoUrl(data.hls.video_url);
     }     


// ...

// 必要に応じてメタデータを確認・生成する
 const checkAndGenerateMetadata = useCallback(async (videoId: string, indexId: string, videoData: VideoDetail, forceReanalyze = false) => {
   // 1) 既存のメタデータが存在する場合はそれを使用する（forceReanalyzeでない限り）
   if (!forceReanalyze && videoData.user_metadata && Object.keys(videoData.user_metadata).length > 0) {
     if (videoData.user_metadata.products) {
       let existingProducts;
       try {
         // メタデータがJSON文字列として保存されている場合はパースする
         if (typeof videoData.user_metadata.products === 'string') {
           existingProducts = JSON.parse(videoData.user_metadata.products);
         } else {
           existingProducts = videoData.user_metadata.products;
         }


         setProducts(existingProducts);


// ...


     setIsAnalyzingVideo(false); // 既存のメタデータを使用する場合は分析を停止する
     return;
   }


   // 2) 存在しない場合は、今すぐ分析を実行する
   setIsAnalyzingVideo(true);


   try {
     const analyzeResponse = await fetch(`/api/analyze?videoId=${videoId}${forceReanalyze ? '&forceReanalyze=true' : ''}`);


         // ...


     const analyzeData = await analyzeResponse.json();

export async function GET(req: Request) {
   const { searchParams } = new URL(req.url);
   const videoId = searchParams.get("videoId");
   const forceReanalyze = searchParams.get("forceReanalyze") === "true";


   const prompt = `
  動画に映っているすべての商品を、以下の詳細情報とともにリストアップしてください：


- timeline: [秒単位の開始時間, 終了時間]
- brand: ブランド名
- product_name: 正式な商品名
- location: [x%, y%, 幅%, 高さ%] — 16:9のアスペクト比の動画プレーヤーに対する相対的なパーセンテージ値
- price: 表示または言及されている場合の価格。動画から直接価格情報を見つけられない場合は、外部検索または自身の情報を使用してください
- description: 商品について話されている内容、または表示されている内容を説明してください


⚠️ 同一シーンに複数の商品が表示される場合は、それぞれの位置座標を個別に分けてリストアップしてください。


レスポンスは有効なJSON配列形式（マークダウン等なし）のみで返してください：


[
 {
   "timeline": [start, end],
   "brand": "brand_name",
   "product_name": "product_name",
   "location": [x%, y%, width%, height%],
   "price": "price_info",
   "description": "product_description"
 }
]
`
// ...


   const url = `${TWELVELABS_API_BASE_URL}/analyze`;


   const requestBody = {
       prompt: prompt,
       video_id: videoId,
       stream: false
   };


   const options = {
       method: "POST",
       headers: {
           "Content-Type": "application/json",
           "x-api-key": API_KEY,
       },
       body: JSON.stringify(requestBody)
   };


   try {
     const response = await fetch(url, options);
         // ...


     // data.dataだけでなく、完全なデータオブジェクトを返す
     return NextResponse.json(data, { status: 200 });
   } 


         // ...


}

// 生成されたメタデータを保存する
       const saveRequestBody = {
         videoId: videoId,
         indexId: indexId,
         metadata: {
           products: products,
           analyzed_at: new Date().toISOString(),
           reanalyzed: forceReanalyze
         }
       };


       const saveResponse = await fetch('/api/videos/saveMetadata', {
         method: 'PUT',
         headers: {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify(saveRequestBody)
       });

                 onClick={() => {
                   if (shouldEnableShopButton) {


                             // ...


                     // 検索クエリを作成
                     let searchQuery;
                     if (shouldFilterBrand) {
                       // ブランドがフィルターされている場合は、商品名のみを使用
                       searchQuery = product.product_name;
                     } else {
                       // ブランドが有効な場合は、ブランド+商品名を使用
                       searchQuery = `${product.brand} ${product.product_name}`;
                     }


                     const q = encodeURIComponent(searchQuery);
                     window.open(`https://www.amazon.com/s?k=${q}`, '_blank');
                   }
                 }}