如何利用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.rhkb.cn/news/146045.html

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

相关文章

PHP 数码公司运营管理系统mysql数据库web结构apache计算机软件工程网页wamp

一、源码特点 PHP 数码公司运营管理系统系统是一套完善的web设计系统,对理解php编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。 php 数码公司运营管理系统 代码 https://download.csdn.net/download/qq_41…

Neural Networks for Fingerprint Recognition

Neural Computation ( IF 3.278 ) 摘要: 在采集指纹图像数据库后,设计了一种用于指纹识别的神经网络算法。当给出一对指纹图像时,算法输出两个图像来自同一手指的概率估计值。在一个实验中,神经网络使用几百对图像进行训练&…

Flutter笔记:AnimationMean、AnimationMax 和 AnimationMin 三个类的用法

Flutter笔记 AnimationMean、AnimationMax 和 AnimationMin三个类的用法 作者:李俊才 (jcLee95):https://blog.csdn.net/qq_28550263 邮箱 :291148484163.com 本文地址:https://blog.csdn.net/qq_28550263/…

阿里云网络、数据中心和服务器技术创新优势说明

阿里云服务器技术创新、网络技术创新、数据中心技术创新和智能运维:云服务器方升架构、自研硬件、自研存储硬件AliFlash和异构计算加速平台,以及全自研网络系统技术创新和数据中心巴拿马电源、液冷技术等技术创新说明,阿里云百科aliyunbaike.…

树莓派4B串口通信配置方式

目录 1树莓派4B的安装: 1.1安装Serial与使用 1.1.1安装serial 1.1.2打开串口 1.2设置硬件串口为GPIO串口(修改串口映射关系) 1.2.1修改配置文件 2.1minicom串口 2.1.1安装minicom 这篇博客源于:工创赛。需要让树莓派与STM…

设计模式探索:从理论到实践的编码示例 (软件设计师笔记)

😀前言 设计模式,作为软件工程领域的核心概念之一,向我们展示了开发过程中面对的典型问题的经典解决方案。这些模式不仅帮助开发者创建更加结构化、模块化和可维护的代码,而且也促进了代码的复用性。通过这篇文章,我们…

AdaBoost算法解密:从基础到应用的全面解析

目录 一、简介什么是AdaBoostAdaBoost的历史和重要性定义 二、基础概念集成学习(Ensemble Learning)定义示例 弱学习器和强学习器定义示例 三、AdaBoost算法原理样本权重(Sample Weights)定义示例 学习器权重(Learner …

C/C++与汇编混合编程

1. C/C调用汇编 C/C想调用汇编代码必须要注意名称修饰的问题 名称修饰(name decoration): 一种标准的C/C编译技术, 通过添加字符来修改函数名, 添加的字符指明了每个函数参数的确切类型。主要是为了支持函数重载, 但对于汇编来说其问题在于, C/C编译器让链接器去找被修饰过的名…

CSS box-shadow阴影

1、语法 box-shadow: h-shadow v-shadow blur spread color inset; 值描述h-shadow必需的。水平阴影的位置。允许负值v-shadow必需的。垂直阴影的位置。允许负值blur可选。模糊距离spread可选。阴影的大小color可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表inset可选。…

Windows驱动反调试的一种手段

Windows驱动反调试的一种手段 今天要介绍的是eprocess的0xbc位置 0x0bc DebugPort : Ptr32 Void DebugPort是在用windowsapi调试方式时候所使用的数据结构指针,那么如果我们能够循环清空这个值的话,就可以做到大部分windows调试api都无法正确调试进程 …

【论文笔记】DiffusionTrack: Diffusion Model For Multi-Object Tracking

原文链接:https://arxiv.org/abs/2308.09905 1. 引言 多目标跟踪通常分为两阶段的检测后跟踪(TBD)和一阶段的联合检测跟踪(JDT)。TBD对单帧进行目标检测后,使用跟踪器跨帧关联相同物体。使用的跟踪器包括使…

SLAM从入门到精通(tf的使用)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 在ros的机器人学习过程中,有一件事情是肯定少不了的。那就是坐标系的转换。其实这也很容易理解。假设有一个机器人,它有一个…

DC电源模块关于宽电压输入和输出的范围

BOSHIDA DC电源模块关于宽电压输入和输出的范围 DC电源模块是一种电子设备,能够将输入的直流电源转换成所需的输出电源,用于供电各种电子设备。其中,关于宽电压输入和输出的范围,是DC电源模块常见的设计要求之一。本文将详细介绍…

UG\NX二次开发 信息窗口的一些操作 NXOpen/ListingWindow

文章作者:里海 来源网站:王牌飞行员_里海_里海NX二次开发3000例,里海BlockUI专栏,C\C++-CSDN博客 简介: UG\NX二次开发 信息窗口的一些操作 NXOpen/ListingWindow 效果: 代码: #include "me.hpp" #include <NXOpen/ListingWindow.hxx> #include <…

安全渗透测试基础之漏洞扫描工具之Nessus使用介绍

前置条件:Nessus工具使用前要确保工具是服务状态 systemctl start nessusd.service 启动nessus服务 systemctl status nessusd.service 查看nessus服务状态 1.配置扫描模板 2.新增高级扫描 2.1 设置日程表: 2.2设置邮件收件人(可选): 2.3主机发现: 2.

【VIM】VIm-plug插件

如何查找需要的插件 https://github.com/mhinz/vim-startify https://github.com/vim-airline/vim-airline https://github.com/Yggdroot/indentLine github.com/w0ng/vim-hybrid github.com/altercationi/vim-colors-solarized guithub.com/morhetz/gruvbox github.com/sc…

基于SpringBoot的校园资料分享平台

目录 前言 一、技术栈 二、系统功能介绍 学生信息管理 学生统计管理 资料分享管理 公告资讯管理 首页资料分享 资料分享评论 我的收藏 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 随着信息互联网购物的飞速发展&#xff0c;国内放开了自媒体的政策…

APA技术架构与说明

1.自动泊车的硬件架构 2.APA自动泊车辅助系统 1&#xff09;APA主要包括以下典型功能 &#xff08;1&#xff09;泊车入库&#xff1a;利用超声波雷达或环视摄像头实现车位识别&#xff0c;并计算出合适行驶轨迹&#xff0c;对车辆进行横向/纵向控制使车辆驶入车位&#xff1…

cadence SPB17.4 S032 - 使用room来放置元件

文章目录 cadence SPB17.4 S032 - 使用room来放置元件概述笔记在orcad中设置子原理图的ROOM号码在空的Allegro工程中, 放入板框在allegro中建立room备注补充 - ROOM还得留着END cadence SPB17.4 S032 - 使用room来放置元件 概述 如果在allegro中直接手工或自动放置元件, 放好…

【知识点随笔分析 | 第五篇】简单介绍什么是QUIC

前言&#xff1a; 随着互联网的快速发展&#xff0c;传统的基于TCP的协议开始显现出一些局限性。TCP在连接建立和拥塞控制方面存在一定的延迟&#xff0c;这可能导致用户在访问网页、观看视频或玩网络游戏时感受到不必要的等待时间。而QUIC作为一种新兴的传输协议&#xff0c;试…