Интегрируем DeepSeek R1 в ваше React-приложение
DeepSeek R1 представляет собой значительный шаг вперед в области поиска, управляемого искусственным интеллектом, предоставляя разработчикам мощные возможности семантического поиска.
Предварительные требования
Перед началом убедитесь, что у вас есть:
- Node.js версии 16 и выше
- React версии 18 и выше
- Ключ API от DeepSeek (доступен через платформу DeepSeek)
- Базовые знания о хуках React и асинхронных операциях
Обзор архитектуры
Мы реализуем чистую архитектуру со следующими слоями:
- Слой службы API: отвечает за прямую коммуникацию с DeepSeek
- Слой управления состоянием: управляет состоянием поиска и результатами
- UI слой: отображает интерфейс и обрабатывает взаимодействия пользователя
Шаг 1: Настройка службы API
Создаем отдельный модуль службы для обработки всех взаимодействий с API DeepSeek:
// services/deepseekService.js
const DEEPSEEK_API_URL = 'https://api.deepseek.com/v1/r1/search';
export const searchDeepSeek = async (query, options = {}) => {
const { limit = 5, filters } = options;
try {
const response = await fetch(DEEPSEEK_API_URL, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${process.env.REACT_APP_DEEPSEEK_API_KEY}`,
},
body: JSON.stringify({
query,
limit,
...(filters && { filters }),
}),
});
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.message || 'DeepSeek API request failed');
}
return await response.json();
} catch (error) {
console.error('DeepSeek search error:', error);
throw error;
}
};
Шаг 2: Создание кастомного хука React
Реализуем кастомный хук для управления состоянием поиска и операций:
// hooks/useDeepSeek.js
import { useState, useCallback } from 'react';
import { searchDeepSeek } from '../services/deepseekService';
export const useDeepSeek = () => {
const [results, setResults] = useState([]);
const [loading, setLoading] = useState(false);