如何利用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]中。 文心一言&…

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

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

【网络协议】IP

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

jmh的OperationsPerInvocation参数

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

七、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…

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

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

leetCode 376.摆动序列 贪心算法

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

labview 混合信号图 多曲线分组

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

ARM汇编基础指令整合

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

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

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

SELinux 介绍

背景 在工作中经常需要在 android 中增加一些东西, 而android有自己的安全限制,如果不懂SELinux,就不好添加。 Control Access Model https://zh.wikipedia.org/wiki/Chmod https://linux.die.net/man/1/chcon DAC DAC and Trojan Horses D…

一维数组和二维数组的使用(一)

目录 导读1. 一维数组1.1 一维数组的创建1.2 数组的初始化1.3 一维数组的使用1.4 一维数组在内存中的存储 2. 二维数组2.1 二维数组的创建2.2 二维数组的初始化2.3 二维数组的使用2.4 二维数组在内存中的存储 博主有话说 导读 本篇主要讲解一维数组和二维数组的创建和使用&…

dart flutter json 转 model 常用库对比 json_serializable json_model JsonToDart

1.对比 我是一个初学者,一直跟着教材用原生的json,最近发现实在太麻烦了.所以搜索了一下,发现真的有很多现成的解决方案. 网页 https://app.quicktype.io/?ldart 这个是测试下来最好用的 有很多选项,可以使用 json_serializable 也可以不使用 json_serializable 这是推荐最…

机器人入门(一)

机器人入门(一) 一、ROS是什么,能用来干什么?二、哪些机器人用到了ROS?三、ROS和操作系统是绑定的吗?四、ROS 1 和ROS 2的关系是什么?4.1架构中间件改变API改变数据格式改变 4.2特性4.3工具/生态…

前缀、中缀、后缀表达式相互转换工具

目录 1. 界面一览 2. 使用说明 3. 实例演示 3.1 输入中缀 3.2 输入前缀 3.3 输入后缀 3.4 选择错误的类型 4. 代码 5. 资源地址 关于什么是前缀、中缀、后缀表达式,相信你不知道这个东西,那你也不会点进来这篇博客,当然,…

计算机竞赛 深度学习机器视觉车道线识别与检测 -自动驾驶

文章目录 1 前言2 先上成果3 车道线4 问题抽象(建立模型)5 帧掩码(Frame Mask)6 车道检测的图像预处理7 图像阈值化8 霍夫线变换9 实现车道检测9.1 帧掩码创建9.2 图像预处理9.2.1 图像阈值化9.2.2 霍夫线变换 最后 1 前言 🔥 优质竞赛项目系列,今天要分…

CentOS上网卡不显示的问题

文章目录 1.问题描述 1.问题描述 ifconfig下看不到ens33网卡了。systemctl status network #查看网卡状态报下面的问题网上说的解决方式有以下三种: 第一种: 和 NetworkManager 服务有冲突,这个好解决,直接关闭 NetworkManger 服…

竞赛选题 大数据疫情分析及可视化系统

文章目录 0 前言2 开发简介3 数据集4 实现技术4.1 系统架构4.2 开发环境4.3 疫情地图4.3.1 填充图(Choropleth maps)4.3.2 气泡图 4.4 全国疫情实时追踪4.6 其他页面 5 关键代码最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 大数据疫…

【Linux】——基操指令(二)

个人主页 代码仓库 C语言专栏 初阶数据结构专栏 Linux专栏 LeetCode刷题 算法专栏 目录 前言 man指令 cp 指令 mv指令 echo指令 cat指令 more指令 less指令 head和tail指令 head指令 tail指令 前言 上篇文章给大家讲解了Linux环境下的一点基操指令&#xf…