如何在React Web应用中使用搭载TfidVectorizer的图书推荐模型

你当前的推荐逻辑用Python实现，和JavaScript技术栈不直接兼容，可按照以下步骤完成接入：

第一步：序列化Python侧的依赖对象 #

首先将你代码里依赖的cosine_sim余弦相似度矩阵、indices书名到索引的映射表、book_summary图书元数据表这三个对象持久化存储，避免每次服务启动都重新生成特征：

import pickle

# 执行序列化存储
with open('cosine_sim.pkl', 'wb') as f:
    pickle.dump(cosine_sim, f)

with open('indices.pkl', 'wb') as f:
    pickle.dump(indices, f)

with open('book_summary.pkl', 'wb') as f:
    pickle.dump(book_summary, f)

第二步：搭建Python API服务 #

用轻量Web框架将推荐逻辑封装成HTTP接口，这里以Flask为例：

1. 安装依赖：pip install flask flask-cors
2. 编写接口代码：

from flask import Flask, request, jsonify
from flask_cors import CORS
import pickle
import pandas as pd

# 加载预训练的对象
with open('cosine_sim.pkl', 'rb') as f:
    cosine_sim = pickle.load(f)
with open('indices.pkl', 'rb') as f:
    indices = pickle.load(f)
with open('book_summary.pkl', 'rb') as f:
    book_summary = pickle.load(f)

app = Flask(__name__)
CORS(app) # 处理跨域请求

# 你的推荐函数
def get_recommendations(book_title, cosine_sim=cosine_sim):
    if book_title not in indices:
        return []
    idx = indices[book_title]
    similarity_scores = list(enumerate(cosine_sim[idx]))
    similarity_scores = sorted(similarity_scores, key=lambda x: x[1], reverse=True)
    similarity_scores =  similarity_scores[1:6]
    book_indices = [i[0] for i in similarity_scores]
    return book_summary['book_title'].iloc[book_indices].tolist()

# 定义推荐接口
@app.route('/api/recommend', methods=['POST'])
def recommend():
    data = request.get_json()
    book_title = data.get('book_title', '')
    result = get_recommendations(book_title)
    return jsonify({
        "recommendations": result
    })

if __name__ == '__main__':
    # 开发环境启动，生产环境换gunicorn等服务
    app.run(port=5000, debug=True)

启动服务后，你可以在本地http://localhost:5000访问这个接口。

第三步：对接Node后端（可选） #

如果你现有Node后端需要做统一的请求转发、鉴权、日志处理，可以在Node侧新增一个接口，转发请求到Python服务：

// Node侧接口示例（Express框架）
app.post('/api/books/recommend', async (req, res) => {
  try {
    const { book_title } = req.body;
    // 转发请求到Python服务
    const response = await fetch('http://localhost:5000/api/recommend', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ book_title })
    });
    const data = await response.json();
    res.json(data);
  } catch (err) {
    res.status(500).json({ error: '推荐服务异常' });
  }
})

如果不需要Node做中间层，也可以直接让React前端请求Python服务的接口。

第四步：React前端调用 #

在React组件中发起请求获取推荐结果，示例代码如下：

import { useState } from 'react';

function BookRecommend() {
  const [bookTitle, setBookTitle] = useState('');
  const [recommendations, setRecommendations] = useState([]);

  const getRecommendations = async () => {
    try {
      // 如果你走Node中间层，就换成你Node服务的对应接口地址
      const res = await fetch('http://localhost:5000/api/recommend', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ book_title: bookTitle })
      });
      const data = await res.json();
      setRecommendations(data.recommendations);
    } catch (err) {
      alert('获取推荐失败');
    }
  }

  return (
    <div>
      <input 
        type="text" 
        value={bookTitle} 
        onChange={(e) => setBookTitle(e.target.value)} 
        placeholder="输入图书名称"
      />
      <button onClick={getRecommendations}>获取推荐</button>
      <ul>
        {recommendations.map((book, idx) => (
          <li key={idx}>{book}</li>
        ))}
      </ul>
    </div>
  )
}

export default BookRecommend;

其他可选方案 #

如果不想额外维护Python服务，且你的图书数据集规模不大，可以将TF-IDF逻辑替换为JavaScript版本的实现，使用natural等JS NLP库重新生成相似度矩阵，直接在Node侧运行推荐逻辑，无需跨语言调用。

内容的提问来源于stack exchange，提问作者Yash Vishe