后端API
from langchain.prompts.pipeline import PipelinePromptTemplate
from langchain.prompts.prompt import PromptTemplate
@action(methods=['get'], detail=False)
def give_name(request):
user1 = '起名'
name1 = str(request.GET.get('name'))
sex1 = str(request.GET.get('sex'))
style1 = str(request.GET.get('style'))
# print(f'姓氏:{name}, 性别:{sex}, 风格:{style}')
print(name1,sex1,style1)
full_template = "{user}{name}{sex}{style}"
full_prompt = PromptTemplate.from_template(full_template)
# 第一层基本设计
user = """#你是一个擅长{user}的大师,请你起根据性别,姓氏,风格起三个名字。"""
user_prompt = PromptTemplate.from_template(user)
# 第二层基本设计
name = """#姓氏{name}"""
name_prompt = PromptTemplate.from_template(name)
# 第三层基本设计
sex = """#性别{sex}"""
sex_prompt = PromptTemplate.from_template(sex)
# 第四层基本设计
style = """#风格{style}"""
style_prompt = PromptTemplate.from_template(style)
input_prompts = [
("user", user_prompt),
("name", name_prompt),
("sex", sex_prompt),
("style", style_prompt),
]
# pipeline_prompt = PipelinePromptTemplate(final_prompt=full_prompt, pipeline_prompts=input_prompts)
pipeline_prompt = PipelinePromptTemplate(final_prompt=full_prompt, pipeline_prompts=input_prompts)
print(pipeline_prompt.format(user=user1,name=name1,sex=sex1,style=style1))
responses = Generation.call(
model="qwen-plus",
prompt=pipeline_prompt.format(user=user1,name=name1,sex=sex1,style=style1),
result_format='message',
stream=True, # 设置输出方式为流式输出
incremental_output=True # 增量式流式输出
)
response = StreamingHttpResponse(
generate_sse(responses),
content_type="text/event-stream",
)
response["Cache-Control"] = "no-cache"
return response
# tongyi = Tongyi()
# response = tongyi(pipeline_prompt.format(user=user1,name=name1,sex=sex1,style=style1))
# print(response)
# return HttpResponse(response)
# 流式输出
response = StreamingHttpResponse(
generate_sse(response),
content_type="text/event-stream",
)
response["Cache-Control"] = "no-cache"
return response
路由
path('givename', views.give_name, name='givename')
前端vue项目 js代码
import { ref } from "vue";
const name = ref("");
const sex = ref("");
const style = ref("");
let source = null
const resmes = ref("")
const connectToStream = () => {
console.log(name.value, sex.value, style.value);
// 创建一个新的EventSource实例,用于连接到服务器的API端点
// 通过查询参数传递content的值给服务器
source = new EventSource("http://127.0.0.1:8000/api/app01/givename?name=" + name.value + "&sex=" + sex.value + "&style=" + style.value);
// 当EventSource接收到消息时,处理新消息
// 将接收到的消息数据追加到resmes的当前值后面
source.onmessage = (event => {
resmes.value = resmes.value + event.data
});
// 当EventSource发生错误时,处理错误
// 打印错误信息到控制台,并关闭EventSource连接
// 防止未处理的错误导致持续的网络连接占用
source.onerror = (error => {
console.error('EventSource failed:', error);
source.close();
source = null;
});
}