React Native ExpoでHuggingface Inference API serverlessを使う(blobの扱い方)

const generateImage = async() => {
  try {
    const { data } = await axios.post(
      apiUrl,
      {
        inputs: text,
        negative_prompt: negativePrompt,
      },
      {
        headers: {
          Authorization: `Bearer ${huggingFaceKey}`,
          'Content-Type': 'application/json'
        },
        responseType: 'blob'
      }
    );
    console.log('受信したdata', data)
    const imageUrl = await convertBlobToImage({data})
    return { imageUrl: imageUrl, message: '画像は開いた後に長押しで保存できます'}
  } catch(e) {
    console.log('generate image error', e)
    return { imageUrl: null, message: errorMessage}
  }
}

受信したデータ {"_data": {"__collector": {}, "blobId": "FFB3D3CF-0B91-41B8-95C1-7BCD2B05C90D", "name": "animagine-xl-3.1", "offset": 0, "size": 124246, "type": "image/jpeg"}}

file:///Users/admin/Library/Developer/CoreSimulator/Devices/3FD454CE-44DF-4B49-B093-F9EA7172056D/data/Containers/Data/Application/CE70546E-33BF-4984-8BEE-6CCEA1BE1235/Library/Caches/ExponentExperienceData/@votepurchase/my-gpt/ImageManipulator/40259C37-AC2C-401F-BE8E-F36DB61FDD1E.jpg

import { Platform } from 'react-native';
import { manipulateAsync, SaveFormat } from 'expo-image-manipulator';

// メインの関数
const convertBlobToImage = async({data}) => {
  try {
    const base64String = await convertBase64String({data}) // BlobデータをBase64文字列に変換
    const base64Code = removeDataURIPrefix(base64String) // Base64文字列を整形1
    const base64image = `data:image/jpeg;base64,${base64Code}` // Base64文字列を整形2
    const { uri } = await manipulateAsync(  // Base64文字列をjpgに変換してローカルにキャッシュ
      base64image,
      [],
      { compress: 1, format: SaveFormat.JPEG }
    );
    return uri // ローカルuriを返す
  } catch(e) {
    console.log('convert blob to image error', e)
  }
}

// プラットフォームに応じて適切な方法でBase64文字列に変換する
const convertBase64String = async({data}) => {
  if(Platform.OS === 'ios') {
    const url = URL.createObjectURL(new Blob([data]));
    const res = await request(url)
    const base64String = await toDataURI(res)
    return base64String
  } else if(Platform.OS === 'android') {
    const base64String = await convertBlobToBase64({data})
    return base64String
  } else {
    throw new Error('convert base64 string error');
  }
}

// Androidでは、FileReaderを使用してBlobをBase64文字列に変換
const convertBlobToBase64 = async({data}) => {
  return new Promise((resolve, reject) => {
    const fileReaderInstance = new FileReader();
    fileReaderInstance.readAsDataURL(data);
    fileReaderInstance.onload = () => {
      const base64data = fileReaderInstance.result;
      resolve(base64data);
    };
    fileReaderInstance.onerror = (error) => {
      reject(error);
    };
  });
}

// iOSではXMLHttpRequestを使用してBlobデータをPOSTリクエストとして送信し、レスポンスをBlobとして受け取る
const request = (url, data) =>
  new Promise((resolve) => {
    const req = new XMLHttpRequest();
    req.open('POST', url, true);
    req.responseType = 'blob';
    req.onload = () => {
      // At this point, req.response is a Blob.
      resolve(req.response);
    };
    req.send(data);
  });

// iOS用処理その2 BlobをData URIに変換する
const toDataURI = (blob) =>
  new Promise((resolve) => {
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = () => {
      const uri = reader.result?.toString();
      resolve(uri);
    };
  });

const removeDataURIPrefix = (dataURI) => {
  return dataURI.replace(/^data:.*?;base64,/, '');
};

export { convertBlobToImage }