如何利用niceGUI构建一个流式单轮对话界面

官方文档
参考文档

import asyncio
import time
import requests
from fastapi import FastAPI
from nicegui import app, uiclass ChatPage:temperature: ui.slider = Nonetop_p: ui.slider = Noneapi_key: ui.input = Nonemodel_name: ui.input = Noneprompt: ui.textarea = Nonesend: ui.button = Nonespinner: ui.spinner = Nonechat_messages: ui.markdown = Nonedef __init__(self, api_key="", model_name=""):self.left_page(api_key=api_key, model_name=model_name)self.chat_page()def left_page(self, api_key="", model_name=""):with ui.left_drawer(top_corner=True, bottom_corner=True).style('background-color: #d7e3f4;margin: auto'):self.api_key = ui.input(label='api 密钥', placeholder='请输入', value=api_key).props('filled')self.model_name = ui.input(label='模型名称', placeholder='请输入', value=model_name).props('filled')if api_key:self.api_key.disable()if model_name:self.model_name.disable()with ui.label("Temperature") as Temperature:self.temperature = ui.slider(min=0, max=1, value=0.7, step=0.01,on_change=lambda e: Temperature.set_text(f"Temperature: {e.value}"))with ui.label("Top_p") as Top_p:self.top_p = ui.slider(min=0, max=1, value=0.75, step=0.01,on_change=lambda e: Top_p.set_text(f"Top_p: {e.value}"))self.prompt = ui.textarea(label='Prompt', placeholder='请输入你的问题').props('filled')self.send = ui.button(icon="reply", text="发送", on_click=self.on_send).style("width: 100%;")def chat_page(self):self.chat_messages = ui.markdown()async def set_chat(self):content_ = ""for i in self.prompt.value:content_ += iawait asyncio.sleep(0.03)self.chat_messages.set_content(content_ + "```")self.chat_messages.set_content(content_ + "```")self.chat_messages.set_content(content_)await ui.run_javascript('window.scrollTo(0, document.body.scrollHeight)', respond=False)async def on_send(self, e):self.send.visible = Falseself.spinner = ui.spinner(size="lg")await self.set_chat()self.spinner.set_visibility(False)self.send.visible = True@ui.page('/')
def page(api_key="", model_name=""):ui.colors(primary="#1d1d1d")ChatPage(api_key=api_key, model_name=model_name)def frontend(app_: FastAPI) -> None:ui.run_with(app_,storage_secret='pick your private secret here',# NOTE setting a secret is optional but allows for persistent storage per user)

在这里插入图片描述

  • 左侧输入
  • 右侧流式渲染markdown

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/92212.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

文心一言 VS 讯飞星火 VS chatgpt (103)-- 算法导论10.1 1题

一、用go语言,仿照图 10-1,画图表示依次执行操作 PUSH(S,4)、PUSH(S,1)、PUSH(S,3)、POP(S)、PUSH(S,8)和 POP(S)每一步的结果,栈 S初始为空,存储于数组 S[1…6]中。 文心一言&…

EM@极坐标系@曲线的极坐标方程

文章目录 abstract平面上的极坐标极坐标极坐标中位置和点的对应关系极坐标的常用限定极坐标描述对称点极坐标变换为直角坐标 坐标系间同位置坐标的变换极坐标上建立同原点直角坐标直角坐标系上建立常用极坐标系极坐标与直角坐标的关系极坐标和坐标系平移👺例 曲线的…

第5章-宏观业务分析方法-5.3-主成分分析法

5.3.1 主成分分析简介 主成分分析是以最少的信息丢失为前提,将原有变量通过线性组合的方式综合成少数几个新变量;用新变量代替原有变量参与数据建模,这样可以大大减少分析过程中的计算工作量;主成分对新变量的选取不是对原有变量的简单取舍,而是原有变量重组后的结果,因此…

【C++/2023年10月1日】

【黑马程序员匠心之作|C教程从0到1入门编程,学习编程不再难】 https://www.bilibili.com/video/BV1et411b73Z/?p47&share_sourcecopy_web&vd_source1cc941c8f5681d0ce0140c7d0f5bf5d3 默认情况下输出一个小数,会显示6位有效数字 float4字节/double8字节/i…

【网络协议】IP

当连接多个异构的局域网形成强烈需求时,用户不满足于仅在一个局域网内进行通信,他们希望通过更高一层协议最终实现异构网络之间的连接。既然需要通过更高一层的协议将多个局域网进行互联,那么这个协议就必须为不同的局域网环境定义统一的寻址…

jmh的OperationsPerInvocation参数

背景 最近再看fllink的性能基准测试时,发现它使用了OperationsPerInvocation注解,本文就来记录下这个注解的含义 官方解释 从官方文档:http://javadox.com/org.openjdk.jmh/jmh-core/0.9/org/openjdk/jmh/annotations/OperationsPerInvoca…

opencv 常用的滤波器及应用技巧

常用滤波器: 标准滤波器(邻域平均法):该滤波器是所有滤波器里最简单的一种,输出的像素值由输入的滤波核所覆盖的像素值均值决定(每个邻域像素对其贡献的权重是相同的)。高斯滤波:该…

七、2023.10.1.Linux(一).7

文章目录 1、 Linux中查看进程运行状态的指令、查看内存使用情况的指令、tar解压文件的参数。2、文件权限怎么修改?3、说说常用的Linux命令?4、说说如何以root权限运行某个程序?5、 说说软链接和硬链接的区别?6、说说静态库和动态…

nginx隐藏版本号和标识

1.隐藏版本号:nginx-服务器banner泄漏风险_banner信息泄露_javachen__的博客-CSDN博客 2.隐藏nginx标识 cd /usr/local/nginx-1.24.0/src/corevi nginx.h在第14行 cd /usr/local/nginx-1.24.0/src/httpvi ngx_http_special_response.c在第22,29,36行 cd /usr/local/nginx-1.2…

JavaScript解构赋值介绍

JavaScript解构赋值介绍 JavaScript解构赋值是一种简化变量赋值的语法,允许从数组或对象中提取数据并将其赋值给变量。【https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment】 1.数组解构赋值 let numbers…

【知识梳理】多级页表的原理分析【地址形成过程】【扩充思考】

多级页表的地址形成过程 首先每个进程中都至少有一个页表(段页式可以有多个页表),都有一个页表基地址寄存器(PTBR),以下针对三级页表进行分析。 level1:PTBR代表的是一级页表的基地址&#xf…

leetCode 376.摆动序列 贪心算法

如果连续数字之间的差严格地在正数和负数之间交替,则数字序列称为 摆动序列 。第一个差(如果存在的话)可能是正数或负数。仅有一个元素或者含两个不等元素的序列也视作摆动序列。 例如, [1, 7, 4, 9, 2, 5] 是一个 摆动序列 &…

【C语言数据结构】队列-顺序存储(顺序队列)

队列-顺序存储 代码实现 代码实现 #include<stdio.h> #include<stdlib.h> #include<stdbool.h>#define MaxSize 100 #define ElemType inttypedef struct{//定义队列数据元素ElemType data[MaxSize];//定义队头和队尾指针&#xff08;说是指针&#xff0c;其…

中位数C++题解

T3 中位数 题目描述&#xff1a; 在玩正整数。他手里有一个串&#xff0c;每次会实施三种操作中的一种。 把没有加入的最小的正整数&#xff0c;从左边加入串中。把没有加入的最小的正整数&#xff0c;从右边加入串中。询问此时串的最中间的数&#xff0c;也就是假设当前有 个…

labview 混合信号图 多曲线分组

如果你遇到了混合信号图 多曲线分组显示的问题&#xff0c;本文能给你帮助。 在文章的最好&#xff0c;列出了参考程序下载链接。 一个混合信号图中可包含多个绘图区域。 但一个绘图区域仅能显示数字曲线或者模拟曲线之一&#xff0c;无法兼有二者。 以下显示的分两组&#…

ARM汇编基础指令整合

汇编语言的组成 伪操作 不参与程序的执行&#xff0c;但是用于告诉编译器程序该怎么编译 如&#xff1a; .text .global .end .if .else .endif .data 汇编指令 汇编器将一条汇编指令编译成一条机器码&#xff0c;在内存里一条指令…

RSA算法

算法简介 RSA是一种非对称加密方式。发送者把明文通过公钥加密后发送出去&#xff0c;接受者把密文通过私钥解密得到明文。 算法过程 生成公钥和私钥 选取两个质数p和q&#xff0c;np*q。n的长度就是密钥长度。φ(n)(p-1)*(q-1)φ(n)为n的欧拉函数。找到1-φ(n)间与φ(n)互质的…

DTO的作用

DTO只是一个代码规范的设计&#xff0c;无需过度执着于DTO。在小型项目中&#xff0c;很多情况没有必要使用DTO返回数据&#xff0c;直接用map也完全可以。 减少多余的参数&#xff0c;出于安全性、节约流量的考虑。 例如&#xff1a;密码&#xff0c;出于安全性考虑不返回前端…

公众号商城小程序的作用是什么

公众号是微信平台重要的生态体系之一&#xff0c;它可以与其它体系连接实现多种效果&#xff0c;同时公众号内容创作者非常多&#xff0c;个人或企业商家等&#xff0c;会通过公众号分享信息或获得收益等&#xff0c;而当商家需要在微信做私域经营或想要转化粉丝、售卖产品时就…

BL808学习日志-1-三核通讯

接上个博客&#xff0c;今天实验了一下BL808的IPC通讯&#xff0c;使用的是博流自己的SDK&#xff1b;参考手册上并没有说明各个寄存器&#xff0c;是通过网友的结论和自己的部分修改达成的。 一、实验代码 1.目前仅测试了LP内核和M0内核之间的通讯&#xff0c;使用SIPEED的M…