vue.js调用python测接口，实现响应式的输出代码
python 代码
async def knowledge_base_chat(query: str = Body(..., description="用户输入", examples=["你好"]),
knowledge_base_name: str = Body(..., description="知识库名称", examples=["samples"]),
top_k: int = Body(VECTOR_SEARCH_TOP_K, description="匹配向量数"),
score_threshold: float = Body(
SCORE_THRESHOLD,
description="知识库匹配相关度阈值，取值范围在0-1之间，SCORE越小，相关度越高，取到1相当于不筛选，建议设置在0.5左右",
ge=0,
le=2
),
history: List[History] = Body(
[],
description="历史对话",
examples=[[
{"role": "user",
"content": "我们来玩成语接龙，我先来，生龙活虎"},
{"role": "assistant",
"content": "虎头虎脑"}]]
),
stream: bool = Body(False, description="流式输出"),
model_name: str = Body(LLM_MODELS[0], description="LLM 模型名称。"),
temperature: float = Body(TEMPERATURE, description="LLM 采样温度", ge=0.0, le=1.0),
max_tokens: Optional[int] = Body(
None,
description="限制LLM生成Token数量，默认None代表模型最大值"
),
prompt_name: str = Body(
"default",
description="使用的prompt模板名称(在configs/prompt_config.py中配置)"
),
request: Request = None,
):
kb = KBServiceFactory.get_service_by_name(knowledge_base_name)
if kb is None:
return BaseResponse(code=404, msg=f"未找到知识库 {knowledge_base_name}")
history = [History.from_data(h) for h in history]
async def knowledge_base_chat_iterator(
query: str,
top_k: int,
history: Optional[List[History]],
model_name: str = LLM_MODELS[0],
prompt_name: str = prompt_name,
) -> AsyncIterable[str]:
nonlocal max_tokens
callback = AsyncIteratorCallbackHandler()
if isinstance(max_tokens, int) and max_tokens <= 0:
max_tokens = None
model = get_ChatOpenAI(
model_name=model_name,
temperature=temperature,
max_tokens=max_tokens,
callbacks=[callback],
)
docs = search_docs(query, knowledge_base_name, top_k, score_threshold)
context = "\n".join([doc.page_content for doc in docs])
if len(docs) == 0: # 如果没有找到相关文档，使用empty模板
prompt_template = get_prompt_template("knowledge_base_chat", "empty")
else:
prompt_template = get_prompt_template("knowledge_base_chat", prompt_name)
input_msg = History(role="user", content=prompt_template).to_msg_template(False)
chat_prompt = ChatPromptTemplate.from_messages(
[i.to_msg_template() for i in history] + [input_msg])
chain = LLMChain(prompt=chat_prompt, llm=model)
# Begin a task that runs in the background.
task = asyncio.create_task(wrap_done(
chain.acall({"context": context, "question": query}),
callback.done),
)
source_documents = []
for doc in docs:
text = doc.page_content.rstrip(' [链接]:\n') + '\n'
if text not in source_documents:
source_documents.append(text)
if len(source_documents) == 0: # 没有找到相关文档
source_documents = []
if stream:
async for token in callback.aiter():
# Use server-sent-events to stream the response
print(f"answer：{token}")
yield json.dumps({"answer": token}, ensure_ascii=False)
yield json.dumps({"docs": source_documents}, ensure_ascii=False)
else:
answer = ""
async for token in callback.aiter():
answer += token
yield json.dumps({"answer": answer,
"docs": source_documents},
ensure_ascii=False)
await task
return StreamingResponse(knowledge_base_chat_iterator(query=query,
top_k=top_k,
history=history,
model_name=model_name,
prompt_name=prompt_name),
media_type="text/event-stream")
vue.js 代码
<template>
<div>
<h2>Streamed Responses:</h2>
<div v-for="(message, index) in messages" :key="index">{{ message }}</div>
</div>
</template>
<script>
import {TRUE} from "sass";
export default {
data() {
return {
messages: [],
reader: null, // 用于存储流的阅读器
};
},
mounted() {
this.postDataAndStreamResponse();
},
beforeUnmount() {
if (this.reader) {
this.reader.cancel(); // 组件销毁时取消流阅读
}
},
methods: {
async postDataAndStreamResponse() {
try {
const response = await fetch('http://XXXXX/chat/knowledge_base_chat', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'text/event-stream',
},
body: JSON.stringify({
"query": "怎么打官司",
"knowledge_base_name": "samples",
"top_k": 5,
"score_threshold": 0.5,
"history": [{
"role": "user",
"content": "我们来玩成语接龙，我先来，生龙活虎"
}, {
"role": "assistant",
"content": "虎头虎脑"
}],
"stream": true,
"model_name": "qwen-api",
"temperature": 0.5,
"max_tokens": 1000,
"prompt_name": "default"
})
});
this.reader = response.body.getReader();
this.readStream();
} catch (error) {
console.error('Stream fetch error:', error);
// 这里可以添加用户友好的错误处理
}
},
async readStream() {
try {
const decoder = new TextDecoder();
while (TRUE) { // 使用循环而非递归
const { value, done } = await this.reader.read();
if (done) break; // 如果没有更多数据，则退出循环
const text = decoder.decode(value, { stream: true });
this.messages.push(text);
}
} catch (error) {
console.error('Stream read error:', error);
// 这里可以添加用户友好的错误处理
}
},
},
};
</script>