三大实战项目搭建

Day8RAG 知识库项目搭建Vue3FastAPI目标跑通「上传 PDF → 解析 → 向量检索 → 问答」的完整流程一、后端FastAPI极简代码1. 安装依赖bash运行pip install fastapi uvicorn pdfplumber faiss-cpu sentence-transformers python-multipart2. 核心代码main.pypython运行from fastapi import FastAPI, UploadFile, File from fastapi.responses import JSONResponse import pdfplumber import faiss import numpy as np from sentence_transformers import SentenceTransformer app FastAPI() # 初始化模型和向量库 model SentenceTransformer(all-MiniLM-L6-v2) index faiss.IndexFlatL2(384) # 384维向量 text_chunks [] # 1. 上传并解析PDF app.post(/upload) async def upload_pdf(file: UploadFile File(...)): with pdfplumber.open(file.file) as pdf: text \n.join([page.extract_text() for page in pdf.pages]) # 分块每块500字 chunks [text[i:i500] for i in range(0, len(text), 500)] embeddings model.encode(chunks) # 存入向量库 index.add(np.array(embeddings)) text_chunks.extend(chunks) return {status: success, chunks_count: len(chunks)} # 2. 问答接口 app.post(/chat) async def chat(question: str): # 问题向量化检索 q_emb model.encode([question]) _, indices index.search(np.array(q_emb), k2) context \n.join([text_chunks[i] for i in indices[0]]) # 拼接prompt简化版 answer f根据文档{context[:200]}... 回答{question}的相关信息是XXX return {answer: answer} if __name__ __main__: import uvicorn uvicorn.run(app, host0.0.0.0, port8000)3. 启动服务bash运行python main.py访问http://localhost:8000/docs就能直接测试接口。二、前端Vue3TS极简代码1. 安装依赖bash运行npm create vitelatest rag-front -- --template vue-ts cd rag-front npm install axios element-plus2. 核心页面src/App.vuevuetemplate el-container el-upload action/api/upload :before-uploadbeforeUpload :on-successhandleUploadSuccess el-button上传PDF文档/el-button /el-upload el-input v-modelquestion placeholder输入你的问题 stylemargin-top:20px / el-button clickhandleChat stylemargin-top:10px提问/el-button div classanswer-box stylemargin-top:20px{{ answer }}/div /el-container /template script setup langts import { ref } from vue import axios from axios const question ref() const answer ref() const beforeUpload (file: File) { if (file.type ! application/pdf) { alert(仅支持PDF文件) return false } return true } const handleUploadSuccess () { alert(上传成功可开始提问) } const handleChat async () { const res await axios.post(http://localhost:8000/chat, { question: question.value }) answer.value res.data.answer } /script3. 配置跨域vite.config.tstsimport { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()], server: { proxy: { /api: { target: http://localhost:8000, changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ) } } } })4. 启动前端bash运行npm run dev打开http://localhost:5173上传 PDF、提问就能看到 RAG 效果 Day9Agent 办公助手项目搭建目标实现「工具调用」能力让 AI 能 “调用计算器 / 查天气”一、后端工具调用逻辑扩展 Day8 的 main.pypython运行import json # 定义工具 tools [ { name: calculator, description: 用于计算数学表达式, parameters: {expression: str如23*4} } ] # 工具执行函数 def call_tool(name, params): if name calculator: return {result: eval(params[expression])} return {error: 工具不存在} # 修改chat接口增加工具调用逻辑 app.post(/agent_chat) async def agent_chat(question: str): # 简化版判断是否需要调用计算器 if any(c in question for c in [, -, *, /, 等于多少]): # 模拟模型决定调用工具 tool_call {name: calculator, parameters: {expression: .join([c for c in question if c in 0123456789-*/])}} tool_result call_tool(tool_call[name], tool_call[parameters]) answer f计算结果{tool_result[result]} else: answer 这是普通问答结果 return {answer: answer}二、前端扩展对话历史修改App.vue增加对话列表vuetemplate div classchat-container div v-formsg in messages :keymsg.id :classmsg.role {{ msg.content }} /div el-input v-modelquestion keyup.enterhandleAgentChat / /div /template script setup langts import { ref } from vue import axios from axios const messages ref([]) const question ref() const handleAgentChat async () { messages.value.push({ role: user, content: question.value }) const res await axios.post(/api/agent_chat, { question: question.value }) messages.value.push({ role: assistant, content: res.data.answer }) question.value } /script style scoped .user { text-align: right; background: #e6f7ff; padding: 8px; margin: 8px 0; } .assistant { text-align: left; background: #f0f0f0; padding: 8px; margin: 8px 0; } /style Day10多模态文档问答项目搭建目标支持图片 扫描 PDF 解析实现图文问答一、后端增加 OCR 能力1. 安装依赖bash运行pip install paddlepaddle paddleocr pdf2image2. 增加图片解析接口python运行from PIL import Image from paddleocr import PaddleOCR ocr PaddleOCR(use_angle_clsTrue, langch) app.post(/upload_image) async def upload_image(file: UploadFile File(...)): image Image.open(file.file) result ocr.ocr(image, clsTrue) text \n.join([line[1][0] for line in result[0]]) # 存入向量库和文本一样分块向量化 chunks [text[i:i500] for i in range(0, len(text), 500)] embeddings model.encode(chunks) index.add(np.array(embeddings)) text_chunks.extend(chunks) return {status: success, ocr_text: text[:100]}二、前端增加图片上传修改App.vue的上传组件vueel-upload action/api/upload_image acceptimage/* :on-successhandleUploadSuccess el-button上传图片/el-button /el-upload Day11流式对话SSE/WebSocket实现目标实现 AI 回答逐字输出解决等待卡顿问题一、后端 SSE 接口python运行from fastapi.responses import StreamingResponse import asyncio app.get(/stream_chat) async def stream_chat(question: str): async def event_generator(): answer 根据文档查询结果我来为你解答 for char in answer: yield fdata: {char}\n\n await asyncio.sleep(0.05) # 控制输出速度 return StreamingResponse(event_generator(), media_typetext/event-stream)二、前端 SSE 对接vuescript setup langts const connectSSE (question: string) { const source new EventSource(/api/stream_chat?question${encodeURIComponent(question)}) source.onmessage (event) { // 逐字追加到当前回答 messages.value[messages.value.length - 1].content event.data } } /script✅ 验收标准按步骤做完你将拥有一个完整的 AI 应用 Demo支持 PDF / 图片上传解析支持 RAG 知识库问答支持 Agent 工具调用支持流式对话输出基于 Vue3TS 开发可直接写进简历