AIや機械学習（ML）の統合により、Reactアプリケーションの機能性とユーザー体験を大幅に向上させることができます。本章では、AI APIのReactへの統合、ユーザー体験を向上させるAIの活用例、そして型安全なAIデータのハンドリングについて解説します。

1. AI APIのReactへの統合 (ChatGPT API, TensorFlow.js)

ChatGPT APIの統合

• 概要:
  • OpenAIが提供する自然言語処理API。
  • チャットボットや生成型AI機能の実装が可能。

導入手順

1. APIキーの取得:

   • OpenAIのアカウントを作成し、APIキーを取得。

2. HTTPクライアントの設定:

   • axiosなどを使用してAPIを呼び出す。

実装例

import React, { useState } from "react";
import axios from "axios";

const ChatGPTComponent = () => {
  const [input, setInput] = useState("");
  const [response, setResponse] = useState("");

  const handleSubmit = async () => {
    const res = await axios.post(
      "https://api.openai.com/v1/completions",
      {
        model: "text-davinci-003",
        prompt: input,
        max_tokens: 150,
      },
      {
        headers: {
          Authorization: `Bearer YOUR_API_KEY`,
        },
      }
    );
    setResponse(res.data.choices[0].text);
  };

  return (
    <div>
      <textarea
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Ask ChatGPT something..."
      />
      <button onClick={handleSubmit}>Send</button>
      <div>{response}</div>
    </div>
  );
};

export default ChatGPTComponent;

TensorFlow.jsの統合

• 概要:
  • JavaScriptで機械学習モデルを構築・実行可能。
  • ブラウザ内でリアルタイムにAI機能を提供。

実装例: 画像認識

import React, { useRef, useState } from "react";
import * as tf from "@tensorflow/tfjs";
import * as mobilenet from "@tensorflow-models/mobilenet";

const ImageRecognition = () => {
  const [result, setResult] = useState(null);
  const imgRef = useRef(null);

  const handlePredict = async () => {
    const model = await mobilenet.load();
    const predictions = await model.classify(imgRef.current);
    setResult(predictions[0].className);
  };

  return (
    <div>
      <img
        ref={imgRef}
        src="https://example.com/sample-image.jpg"
        alt="sample"
        crossOrigin="anonymous"
      />
      <button onClick={handlePredict}>Predict</button>
      {result && <p>Prediction: {result}</p>}
    </div>
  );
};

export default ImageRecognition;

2. ユーザー体験を向上させるAI活用例

1. カスタマーサポートチャットボット

• 概要:
  • ユーザーからの問い合わせにリアルタイムで応答。
  • ChatGPT APIを使用して柔軟な対話を実現。

2. レコメンデーションシステム

• 概要:
  • ユーザーの行動データを分析して、個別化された提案を行う。
  • TensorFlow.jsを用いたモデルをブラウザ内で実行可能。

3. 音声認識と翻訳

• 概要:
  • 音声入力をテキストに変換し、リアルタイムで翻訳。
  • Web Speech APIとAI翻訳APIを組み合わせて実装。

3. 型安全なAIデータのハンドリング

型安全性の重要性

• AI APIやMLモデルから返されるデータは複雑になるため、型定義を行うことで安全性を確保。

TypeScriptによる型定義

ChatGPT APIの型定義

interface ChatGPTResponse {
  id: string;
  object: string;
  created: number;
  model: string;
  choices: {
    text: string;
    index: number;
    logprobs: null | object;
    finish_reason: string;
  }[];
}

const handleResponse = (response: ChatGPTResponse) => {
  console.log(response.choices[0].text);
};

TensorFlow.jsの型定義

interface Prediction {
  className: string;
  probability: number;
}

const handlePrediction = (predictions: Prediction[]) => {
  predictions.forEach((prediction) => {
    console.log(`${prediction.className}: ${prediction.probability * 100}%`);
  });
};

---

AI/MLとの統合は、Reactアプリケーションに新たな可能性をもたらします。本章で紹介した方法を基に、AIを活用した革新的なアプリケーションを構築しましょう。