Интеграция DeepSeek R1 в приложение на React

Интегрируем 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);