云信AI部署

2025年05月 JavaScript技术栈：LangChain与FastAPI集成开发在Web开发中的创新应用

云信安装大师
90
AI 质量分
3 5 月, 2025
4 分钟阅读
0 阅读

2025年05月 JavaScript技术栈：LangChain与FastAPI集成开发在Web开发中的创新应用

引言

在2025年的Web开发领域，AI集成已成为提升应用智能化的关键。本文将介绍如何将LangChain（JavaScript版）与Python的FastAPI后端无缝集成，创建一个既能处理复杂AI任务又保持高性能的现代Web应用。这种技术组合特别适合需要自然语言处理能力的Web应用开发。

准备工作

环境要求

  • Node.js v18+ (推荐v20)
  • Python 3.10+
  • npm 9+
  • pip 23+

需要安装的包

代码片段 
# JavaScript前端/Node.js环境
npm install langchain @langchain/core axios

# Python后端环境
pip install fastapi uvicorn langchain python-multipart

项目结构

代码片段 
ai-web-app/
├── frontend/          # JavaScript前端
│   ├── public/
│   ├── src/
│   │   ├── langchain/ # LangChain相关代码
│   │   └── api/       # API调用封装
├── backend/           # FastAPI后端
│   ├── main.py        # FastAPI主文件
│   └── ai_services/   # AI服务模块

第一步：设置FastAPI后端

1. 创建基础的FastAPI服务

backend/main.py:

代码片段 
from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel

app = FastAPI(title="AI Web Service")

# 允许跨域请求（开发环境）
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_methods=["*"],
    allow_headers=["*"],
)

class ChatRequest(BaseModel):
    message: str
    history: list = []

@app.post("/api/chat")
async def chat_endpoint(request: ChatRequest):
    """处理聊天请求的基础端点"""
    try:
        # 这里将在后续添加LangChain处理逻辑
        return {"response": "这是来自FastAPI的默认响应"}
    except Exception as e:
        raise HTTPException(status_code=500, detail=str(e))

if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=8000)

启动服务：

代码片段 
uvicorn main:app --reload

2. 集成Python版LangChain

添加AI服务模块 backend/ai_services/chat_service.py:

代码片段 
from langchain.chains import LLMChain
from langchain.prompts import PromptTemplate
from langchain_community.llms import Ollama  # 使用本地Ollama模型

class ChatService:
    def __init__(self):
        self.setup_llm()

    def setup_llm(self):
        """初始化LLM模型"""
        self.llm = Ollama(model="llama3")

        self.prompt = PromptTemplate(
            input_variables=["input", "history"],
            template="""
            你是一个有帮助的AI助手。根据以下对话历史和最新问题提供有帮助的回答。

            历史对话:
            {history}

            最新问题: {input}

            回答:
            """
        )

        self.chain = LLMChain(llm=self.llm, prompt=self.prompt)

    async def generate_response(self, input_text: str, history: list = None):
        """生成AI响应"""
        if history is None:
            history = []

        history_str = "\n".join(history[-5:])  # 只保留最近的5条历史

        response = await self.chain.arun({
            "input": input_text,
            "history": history_str
        })

        return response.strip()

更新 main.py:

代码片段 
from ai_services.chat_service import ChatService

chat_service = ChatService()

@app.post("/api/chat")
async def chat_endpoint(request: ChatRequest):
    try:
        response = await chat_service.generate_response(
            request.message, 
            request.history
        )
        return {"response": response}
    except Exception as e:
        raise HTTPException(status_code=500, detail=str(e))

第二步：构建JavaScript前端

1. LangChain客户端设置

frontend/src/langchain/setup.js:

代码片段 
import { Ollama } from "@langchain/community/llms/ollama";
import { LLMChain } from "langchain/chains";
import { PromptTemplate } from "@langchain/core/prompts";

// 配置本地或远程Ollama服务地址
const ollamaBaseUrl = "http://localhost:11434";

export async function setupClientSideChain() {
  // 客户端直接运行的轻量级模型（适合简单任务）
  const llm = new Ollama({
    baseUrl: ollamaBaseUrl,
    model: "gemma:2b" // 更小更快的模型适合客户端运行
  });

  const prompt = PromptTemplate.fromTemplate(`
    你是一个高效的客户端AI助手。请简洁回答以下问题：

    问题: {input}

    回答:`);

  return new LLMChain({ llm, prompt });
}

2. API服务封装

frontend/src/api/index.js:

代码片段 
import axios from "axios";

const API_BASE_URL = "http://localhost:8000";

export const chatWithServer = async (message, history = []) => {
  try {
    const response = await axios.post(`${API_BASE_URL}/api/chat`, {
      message,
      history,
    });

    return response.data.response;

  } catch (error) {
    console.error("API调用失败:", error);
    throw error;
  }
};

// Hybrid模式：优先尝试客户端处理，失败时回退到服务器端处理
export const hybridChat = async (message, history) => {
  try {
    // Step1:尝试客户端快速响应（适合简单查询）
    const clientChain = await setupClientSideChain();
    const clientResponse = await clientChain.run({ input: message });

    // Step2:如果客户端响应太短或不确定，则请求服务器端处理（复杂逻辑）
    if (clientResponse.length < -20 || clientResponse.includes("我不确定")) {
      return await chatWithServer(message, history);
    }

    return clientResponse;

  } catch (error) {
    console.log("回退到纯服务器端模式");
    return await chatWithServer(message, history);
  }
};

3. React组件示例

frontend/src/components/ChatApp.jsx:

代码片段 
import React, { useState } from 'react';
import { hybridChat } from '../api';

export function ChatApp() {
  const [input, setInput] = useState('');
  const [messages, setMessages] = useState([]);

 async function handleSubmit(e) {
   e.preventDefault();

   if (!input.trim()) return;

   // Add user message to chat 
   setMessages(prev => [...prev, { sender: 'user', text: input }]);

   try {
     // Get AI response using hybrid approach 
     const aiResponse = await hybridChat(input);

     // Add AI response to chat 
     setMessages(prev => [...prev, { sender:'ai', text: aiResponse }]);

   } catch (error) {
     setMessages(prev => [...prev, 
       { sender:'system', text:'抱歉，发生错误，请稍后再试' }
     ]);
   }

   setInput('');
 }

 return (
   <div className="chat-container">
     <div className="messages">
       {messages.map((msg,i) => (
         <div key={i} className={`message ${msg.sender}`}>
           <p>{msg.text}</p>
         </div>
       ))}
     </div>

     <form onSubmit={handleSubmit}>
       <input 
         value={input}
         onChange={(e) => setInput(e.target.value)}
         placeholder="输入消息..."
       />
       <button type="submit">发送</button>
     </form>
   </div>
 );
}

Hybrid架构的优势与实现原理

  1. 性能优化：

    • 客户端轻量级处理：简单查询直接在浏览器中完成，减少网络延迟。
    • 服务器端复杂计算：资源密集型任务由FastAPI后端处理。

  2. 智能路由：
    “`javascript
    // hybridChat函数中的智能路由逻辑：

    if (clientResponse.length < -20 || clientResponse.includes(“我不确定”)) {
    return await chatWithServer(message, history);
    }

  3. 容错机制：

    • 自动降级：当客户端LLM不可用时自动切换到纯服务器模式。

  4. 状态同步：

    • 对话历史管理：确保两端处理的对话上下文一致。

Best Practices & Tips

  1. 模型选择策略：

    • 客户端：使用小型模型（如Gemma-2B）快速响应简单请求。
    • 服务器端：使用大型模型（如Llama3-70B）处理复杂推理。

  2. 性能监控：

代码片段 
// API调用时添加性能日志：
console.time('server_chat');
const response = await chatWithServer(message);
console.timeEnd('server_chat');
  1. 安全考虑：
代码片段 
# FastAPI中限制输入长度防止滥用 
@app.post("/api/chat")
async def chat_endpoint(request: ChatRequest): 
 if len(request.message) >1000:
 raise HTTPException(status_code=400, detail="消息过长")
  1. 缓存策略：
代码片段 
// LRU缓存常见查询结果 
const cache=new Map(); 

async function cachedChat(query){
 if(cache.has(query))return cache.get(query); 

 const result=await hybridChat(query); 
 cache.set(query.result); 

 return result; 
} 

//设置最大缓存数量并定期清理...

Conclusion总结

本文展示了如何将JavaScript生态中的LangChain与Python FastAPI结合构建现代化AI Web应用的完整流程。关键要点：

  1. 架构优势：Hybrid架构平衡了响应速度与计算能力需求。
  2. 开发效率：利用现有技术栈快速实现复杂功能。
  3. 扩展性：模块化设计便于后续添加更多AI功能。

未来可以进一步探索：
– WebAssembly加速客户端的LLM推理速度；
– WebSocket实现实时流式响应；

原创 高质量