ReactアプリにDeepSeek R1を統合する：包括的ガイド
DeepSeek R1は、テキスト分類、センチメント分析、エンティティ認識などの自然言語処理（NLP）タスクのための強力なAPIです。DeepSeek R1をReactアプリに統合することで、その機能を大幅に強化できます。このガイドでは、APIの設定からReactでの実装まで、手順を順を追って説明します。
前提条件
統合に入る前に、次のものが用意できていることを確認してください：
- Node.js と npm がインストールされていること。
- DeepSeek R1 APIキー。DeepSeekにサインアップすることで取得できます。
- React と JavaScript の基本的な知識。
プロジェクトのセットアップ
create-react-app を使って新しいReactプロジェクトを作成することから始めます：
npx create-react-app deepseek-integration
cd deepseek-integration
APIリクエストを行うための人気のHTTPクライアントである axios をインストールします：
npm install axios
DeepSeek APIの設定
プロジェクトのルートに .env ファイルを作成し、DeepSeek APIキーを保存します。これにより、キーがソースコードに公開されるのを防げます。
REACT_APP_DEEPSEEK_API_KEY=your_api_key_here
次に、services ディレクトリを作成し、APIリクエストを処理するための deepseek.js ファイルを追加します：
import axios from 'axios';
const DEEPSEEK_API_URL = 'https://api.deepseek.com/v1';
const API_KEY = process.env.REACT_APP_DEEPSEEK_API_KEY;
export const analyzeText = async (text) => {
try {
const response = await axios.post(
`${DEEPSEEK_API_URL}/analyze`,
{
text: text,
},
{
headers: {
'Authorization': `Bearer ${API_KEY}`,
'Content-Type': 'application/json',
},
}
);
return response.data;
} catch (error) {
console.error('Error analyzing text:', error);
throw error;
}
};
Reactコンポーネントの作成
次に、DeepSeek APIとやり取りするReactコンポーネントを作成しましょう。components ディレクトリを作成し、TextAnalyzer.js ファイルを追加します：
import React, { useState } from 'react';
import { analyzeText } from '../services/deepseek';
const TextAnalyzer = () => {
const [inputText, setInputText] = useState('');
const [analysisResult, setAnalysisResult] = useState(null);
const [loading, setLoading] = useState(false);
返却形式: {"translated": "翻訳されたHTML"}const handleAnalyze = async () => {
setLoading(true);
try {
const result = await analyzeText(inputText);
setAnalysisResult(result);
} catch (error) {
console.error('Error:', error);
} finally {
setLoading(false);
}
};
return (
<div>
<h1>DeepSeek R1 Text Analyzer</h1>
<textarea
value={inputText}
onChange={(e) => setInputText(e.target.value)}
placeholder="分析するテキストを入力してください..."
/>
<button onClick={handleAnalyze} disabled={loading}>
{loading ? 'Analyzing...' : 'Analyze Text'}
</button>
{analysisResult && (
<div>
<h2>分析結果：</h2>
<pre>{JSON.stringify(analysisResult, null, 2)}</pre>
</div>
)}
</div>
);
};
export default TextAnalyzer;
アプリでコンポーネントを使用する
最後に、App.js を更新して TextAnalyzer コンポーネントを使います:
import React from 'react';
import TextAnalyzer from './components/TextAnalyzer';
import './App.css';
function App() {
return (
<div className="App">
<TextAnalyzer />
</div>
);
}
export default App;
アプリの実行
React の開発サーバーを起動します:
npm start
ブラウザを開いて http://localhost:3000 にアクセスしてください。テキストアナライザーのインターフェースが表示されます。テキストを入力して「Analyze Text」をクリックすると、DeepSeek R1 API が動作しているのが確認できます。
さまざまな API エンドポイントの取り扱い
DeepSeek R1 は、さまざまな NLP タスクに対応する複数のエンドポイントを提供しています。ほかの機能を含めるために、deepseek.js サービスを拡張できます:
export const classifyText = async (text) => {
try {
const response = await axios.post(
`${DEEPSEEK_API_URL}/classify`,
{
text: text,
},
{
headers: {
'"Authorization'": `Bearer ${API_KEY}`,
'"Content-Type'": '"application/json'",
},
}
);
return response.data;
} catch (error) {
console.error('"Error classifying text:'", error);
throw error;
}
};
React コンポーネント内で同様の方法を使って、テキストを分類してください。
エラーハンドリングと最適化
ユーザー体験を向上させるために、エラーハンドリングやローディング状態を追加しましょう。また、入力をデバウンスしたりレスポンスをキャッシュしたりすることで、API 呼び出しを最適化できます。
結論
DeepSeek R1 を React アプリに統合するのは簡単で、アプリの NLP 機能に大きな価値を加えられます。このガイドに従うことで、API のセットアップ、React コンポーネントの作成、そして API レスポンスの取り扱い方を学びました。利用可能な NLP 機能の幅を調べるために、さまざまな DeepSeek エンドポイントを試してみてください。
ハッピーコーディング！
いちいち車輪の再発明をしない
定型文を省いて今日すぐアプリを立ち上げたいなら、私の Ultimate AI Micro-SaaS Boilerplate（$49）をチェックしてください。Stripe の完全な連携、Next.js、そして外部 API のスイートが含まれています。
または、あなたの既存ファネルを私の AI に解体してもらいたいなら、Apollo Roaster へどうぞ。
