React Native、TensorFlow.js、ExpoでAI姿勢矫正アプリを作る

# 新しいExpoプロジェクトを作成
npx create-expo-app ai-workout-trainer
cd ai-workout-trainer

# TensorFlow.jsとその依存関係をインストール
npm install @tensorflow/tfjs @tensorflow-models/pose-detection @react-native-async-storage/async-storage

# カメラ、WebGL（GPUサポート用）、ファイルシステム用のExpoモジュールをインストール
npm install expo-camera expo-gl expo-gl-cpp expo-file-system

# 描画用のキャンバスライブラリをインストール。React Native Skiaを使用します。
npm install @shopify/react-native-skia

// src/useTensorFlow.js
import { useEffect, useState } from 'react';
import * as tf from '@tensorflow/tfjs';
import '@tensorflow/tfjs-react-native';
import * as poseDetection from '@tensorflow-models/pose-detection';

export const useTensorFlow = () => {
  const [isReady, setIsReady] = useState(false);
  const [model, setModel] = useState(null);

  useEffect(() => {
    const setup = async () => {
      // 1. TensorFlow.jsの準備ができるまで待つ
      await tf.ready();

      // 2. MoveNet{detector}を作成
      const detectorConfig = {
        modelType: poseDetection.movenet.modelType.SINGLEPOSE_LIGHTNING,
      };
      const detector = await poseDetection.createDetector(
        poseDetection.SupportedModels.MoveNet,
        detectorConfig
      );
      setModel(detector);

      // 3. 準備完了フラグを設定
      setIsReady(true);
      console.log('TF and model ready!');
    };

    setup();
  }, []);

  return { model, isReady };
};

// App.js
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Dimensions } from 'react-native';
import { Camera, CameraType } from 'expo-camera';
import { useTensorFlow } from './src/useTensorFlow';

const { width, height } = Dimensions.get('window');

export default function App() {
  const [cameraPermission, setCameraPermission] = useState(null);
  const { model, isReady } = useTensorFlow();

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      setCameraPermission(status === 'granted');
    })();
  }, []);

  if (cameraPermission === null) {
    return <View />;
  }
  if (cameraPermission === false) {
    return <Text>No access to camera</Text>;
  }

  return (
    <View style={styles.container}>
      <Text style={styles.loadingText}>
        {isReady ? 'Ready!' : 'Loading Model...'}
      </Text>
      <Camera
        style={styles.camera}
        type={CameraType.front}
        // 後ほどここにフレーム処理ロジックを追加します
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  camera: {
    width: width,
    height: height,
  },
  loadingText: {
    position: 'absolute',
    top: 50,
    color: 'white',
    fontSize: 18,
    zIndex: 10,
  },
});

// App.js (追加部分)
import { cameraWithTensors } from '@tensorflow/tfjs-react-native';
import * as FileSystem from 'expo-file-system';

// CameraをcameraWithTensors HOCでラップ
const TensorCamera = cameraWithTensors(Camera);

// ... Appコンポーネント内
const [poses, setPoses] = useState([]);
const cameraRef = React.useRef(null);

// この関数はカメラからの各フレームに対して呼び出されます
const handleCameraStream = (images) => {
    const loop = async () => {
      const nextImageTensor = images.next().value;

      if (!nextImageTensor) {
        // 新しい画像がない場合は何もしない
        requestAnimationFrame(loop);
        return;
      }

      // 1. ポーズを推定
      const estimatedPoses = await model.estimatePoses(nextImageTensor);
      setPoses(estimatedPoses);
      
      // 2. メモリを解放するためにtensorを dispose
      tf.dispose(nextImageTensor);

      // 3. 次のフレームにループ
      requestAnimationFrame(loop);
    };
    loop();
};

// ... return文内で、<Camera>を<TensorCamera>に置き換え
<TensorCamera
    ref={cameraRef}
    style={styles.camera}
    type={CameraType.front}
    cameraTextureHeight={1920}
    cameraTextureWidth={1080}
    resizeHeight={200}
    resizeWidth={152}
    resizeDepth={3}
    onReady={handleCameraStream}
    autorender={true}
/>

// src/PoseSkeleton.js
import React from 'react';
import { Canvas, Path, Skia, Circle } from '@shopify/react-native-skia';
import { StyleSheet } from 'react-native';

const PoseSkeleton = ({ poses, cameraWidth, cameraHeight }) => {
  if (!poses || poses.length === 0) {
    return null;
  }

  // 骨格を形成するためのキーポイント間の接続を定義
  const skeletonConnections = [
    ['nose', 'left_eye'], ['left_eye', 'left_ear'],
    ['nose', 'right_eye'], ['right_eye', 'right_ear'],
    ['nose', 'left_shoulder'], ['nose', 'right_shoulder'],
    ['left_shoulder', 'right_shoulder'],
    ['left_shoulder', 'left_elbow'], ['left_elbow', 'left_wrist'],
    ['right_shoulder', 'right_elbow'], ['right_elbow', 'right_wrist'],
    ['left_shoulder', 'left_hip'], ['right_shoulder', 'right_hip'],
    ['left_hip', 'right_hip'],
    ['left_hip', 'left_knee'], ['left_knee', 'left_ankle'],
    ['right_hip', 'right_knee'], ['right_knee', 'right_ankle'],
  ];

  const pose = poses; // ポーズは1つのみ
  const keypoints = pose.keypoints.reduce((acc, keypoint) => {
    acc[keypoint.name] = keypoint;
    return acc;
  }, {});
  
  const path = Skia.Path.Make();
  skeletonConnections.forEach(([startName, endName]) => {
    const start = keypoints[startName];
    const end = keypoints[endName];
    if (start && end && start.score > 0.5 && end.score > 0.5) {
      path.moveTo(start.x, start.y);
      path.lineTo(end.x, end.y);
    }
  });

  return (
    <Canvas style={StyleSheet.absoluteFill}>
      {Object.values(keypoints).map((p) => {
        if (p.score > 0.5) { // 確信度の高いキーポイントのみ描画
          return <Circle key={p.name} cx={p.x} cy={p.y} r={5} color="cyan" />;
        }
        return null;
      })}
      <Path
        path={path}
        color="aqua"
        style="stroke"
        strokeWidth={3}
      />
    </Canvas>
  );
};

export default PoseSkeleton;

// App.js (追加部分)
import PoseSkeleton from './src/PoseSkeleton';
// ... Appコンポーネントのreturn文内で、TensorCameraの後に
{poses && poses.length > 0 && (
    <PoseSkeleton poses={poses} cameraWidth={width} cameraHeight={height} />
)}

// src/geometry.js
// 3点間の角度を計算する関数
export function calculateAngle(a, b, c) {
  const radians = Math.atan2(c.y - b.y, c.x - b.x) - Math.atan2(a.y - b.y, a.x - b.x);
  let angle = Math.abs(radians * 180.0 / Math.PI);
  if (angle > 180.0) {
    angle = 360 - angle;
  }
  return angle;
}

// App.js (追加部分)
import { calculateAngle } from './src/geometry';

// ... Appコンポーネント内
const [feedback, setFeedback] = useState('');

// ポーズが変更されるたびに実行されるこのuseEffect
useEffect(() => {
    if (poses && poses.length > 0) {
      const keypoints = poses.keypoints.reduce((acc, keypoint) => {
          acc[keypoint.name] = keypoint;
          return acc;
      }, {});

      const leftHip = keypoints['left_hip'];
      const leftKnee = keypoints['left_knee'];
      const leftAnkle = keypoints['left_ankle'];

      if (leftHip && leftKnee && leftAnkle &&
          leftHip.score > 0.5 && leftKnee.score > 0.5 && leftAnkle.score > 0.5) {
        
        // 左ひざの角度を計算
        const kneeAngle = calculateAngle(leftHip, leftKnee, leftAnkle);

        // スクワット深度のシンプルなロジック
        if (kneeAngle > 160) {
          setFeedback('Start Squat');
        } else if (kneeAngle < 100) {
          setFeedback('Good Squat! 👍');
        } else {
          setFeedback('Go Lower!');
        }
      }
    }
}, [poses]);

// ... return文内で、フィードバック用のTextコンポーネントを追加
<Text style={styles.feedbackText}>{feedback}</Text>

// ... StyleSheet内に、フィードバックテキストのスタイルを追加
feedbackText: {
    position: 'absolute',
    bottom: 100,
    left: 20,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    color: 'white',
    fontSize: 24,
    padding: 10,
    borderRadius: 5,
    zIndex: 10,
}