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

news2024/11/23 6:18:07

官方文档
参考文档

import asyncio
import time
import requests
from fastapi import FastAPI
from nicegui import app, ui


class ChatPage:
    temperature: ui.slider = None
    top_p: ui.slider = None
    api_key: ui.input = None
    model_name: ui.input = None
    prompt: ui.textarea = None
    send: ui.button = None
    spinner: ui.spinner = None
    chat_messages: ui.markdown = None

    def __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_ += i
            await 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 = False
        self.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.coloradmin.cn/o/1054609.html

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

相关文章

番外5:下载+安装+配置Linux

任务前期工作: 01. 电脑已安装好VMware Workstation软件; 02.提前下载好Rhel-8.iso映像文件(文件较大一般在9.4GB,建议采用迅雷下载),本人使用的以下版本(地址ed2k://|file|rhel-8.4-x86_64-dvd…

Tomcat启动后的日志输出为乱码

天行健,君子以自强不息;地势坤,君子以厚德载物。 每个人都有惰性,但不断学习是好好生活的根本,共勉! 文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。…

实现三栏布局的十种方式

本文节选自我的博客:实现三栏布局的十种方式 💖 作者简介:大家好,我是MilesChen,偏前端的全栈开发者。📝 CSDN主页:爱吃糖的猫🔥📣 我的博客:爱吃糖的猫&…

Mysql技术文档--之Mysql联查使用-快速了解联查看我这一篇就够了!国庆开卷!

阿丹: 开头先祝贺大家国庆快乐!!! 在MySQL中,联结(JOIN)是用于将两个或多个表中的数据根据指定的条件进行关联查询的操作。通过联结,你可以从多个表中检索相关的数据,并…

市场调研的步骤与技巧:助你了解市场需求

在当今快速发展的市场中,进行有效的市场研究对于了解消费者的行为、偏好和趋势至关重要。适当的市场研究可以帮助公司获得对目标受众的有价值的见解,创造更好的产品和服务,并提高客户满意度。今天,小编和大家一起讨论一下怎么做市…

10.1 今日任务:select实现服务器并发

#include <myhead.h>#define ERR_MSG(msg) do{\fprintf(stderr, "__%d__:", __LINE__); \perror(msg);\ }while(0)#define PORT 8888 //端口号&#xff0c;范围1024~49151 #define IP "192.168.112.115" //本机IP&#xff0c;ifco…

[Linux] 4.常用初级指令

pwd&#xff1a;显示当前文件路径 ls:列出当前文件夹下有哪些文件 mkdir空格文件名&#xff1a;创建一个新的文件夹 cd空格文件夹名&#xff1a;进入文件夹 cd..&#xff1a;退到上一层文件夹 ls -a&#xff1a;把所有文件夹列出来 .代表当前文件夹 ..代表上层文件夹 用…

第 365 场 LeetCode 周赛题解

A 有序三元组中的最大值 I 参考 B B B 题做法… class Solution { public:using ll long long;long long maximumTripletValue(vector<int> &nums) {int n nums.size();vector<int> suf(n);partial_sum(nums.rbegin(), nums.rend(), suf.rbegin(), [](int x…

Facebook Delos 中的虚拟共识协议

背景 Facebook 的软件系统栈一般包括两层&#xff1a;上层是数据平面&#xff0c; 下层是控制平面。 facebook software stack 数据平面包括大量的服务&#xff0c;他们需要存储和处理海量数据。控制平面用来支撑数据平面&#xff0c;起到一些控制作用&#xff1a;调度、配置…

XSS-labs

XSS常见的触发标签_xss标签_H3rmesk1t的博客-CSDN博客 该补习补习xss漏洞了 漏洞原理 网站存在 静态 和 动态 网站 xss 针对的网站 就是 动态网站 动态网站会根据 用户的环境 与 需求 反馈出 不同的响应静态页面 代码写死了 只会存在代码中有的内容 通过动态网站 用户体…

2023年中国火化设备行业现状分析:随着城市化进程的推进,市场需求将持续增长[图]

火化设备行业是指生产和提供用于尸体火化处理的设备和相关服务的行业。火化设备主要用于将尸体进行高温焚烧&#xff0c;将尸体转化为骨灰&#xff0c;以达到尸体处理和殡葬的目的。 火化设备行业优点 资料来源&#xff1a;共研产业咨询&#xff08;共研网&#xff09; 我国火…

C++面试八股(一)

目录 C和C的区别 1、语言特性 2、内存管理 3、C的库更加丰富 4、对异常的处理 什么是封装继承多态&#xff1f; 封装 继承 多态 new和malloc的区别 STL容器有哪些&#xff1f;容器对应的使用场景&#xff1f;&#xff08;挑一个你认为最熟悉的容器&#xff09; vector、…

评估指标Pre\Rec\F1\AUC

AUC的计算方法同时考虑了分类器对于正例和负例的分类能力&#xff0c;在样本不平衡的情况下&#xff0c;依然能够对分类器作出合理的评价。AUC代表模型预估样本之间的排序关系&#xff0c;即正负样本之间预测的gap越大&#xff0c;auc越大. 来自 https://blog.csdn.net/pearl8…

wustctf2020_name_your_cat

wustctf2020_name_your_cat Arch: i386-32-little RELRO: Partial RELRO Stack: Canary found NX: NX enabled PIE: No PIE (0x8048000)32位&#xff0c;开了NX和canary int shell() {return system("/bin/sh"); }有个后门函数 unsigned int…

AutoHotkey ---- 统一所有软件的快捷键(分析篇)

文章目录 引言理论编程方案 引言 快捷键大家都不陌生.但是目前的快捷键普遍存在以下几个问题。 不统一,即word、ppt、浏览器、各种编辑器、邮件客户端等等&#xff0c;都有属于自己的一套快捷键。快捷键冲突&#xff0c;即不同软件使用了相同的快捷键&#xff0c;而且作用域是…

GNN PyG~torch_geometric 学习理解

目录 1. PyG Introduction 2. PyG Installation 2.1 PyG 安装常见错误及原因 2.2 PyG 具体安装步骤 3. torch_geometric packages torch_geometric.data.Data Dataset 与 DataLoader Dropout、BatchNorm 3. torch_geometric: 理解edge_index 3.1 理解 mini-batch edg…

[H5动画制作系列]帧代码运行顺序测试

刚开始接触Animate CC(过去叫:Flash),对于帧代码的执行顺序十分迷惑。所以,专门做一个简单代码顺序测试. 准备工作: 代码图层actions,第1帧和第10帧为关键帧。 背景图层bg,就一个字符串红色Test.界面如下: 代码测试步骤: 第1帧参考代码如下: 第10帧参考代码如下: …

​68条萝卜刀《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书

​68条萝卜刀《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书 ​68条萝卜刀《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书

打包python模块代码到pypi

python中&#xff0c;我们会在自己业务中&#xff0c;重复性的使用某些功能。我们可以把这些公用的模块&#xff0c;打包上传&#xff0c;然后给需要的人使用&#xff0c;pypi给我们提供了这个机会 本期目录 一、准备工作 二、编写文件 三、上传下载 一、准备工作 1、需要git…

k8s实战案例之部署Nginx+Tomcat+NFS实现动静分离

1、基于镜像分层构建及自定义镜像运行Nginx及Java服务并基于NFS实现动静分离 1.1、业务镜像设计规划 根据业务的不同,我们可以导入官方基础镜像,在官方基础镜像的基础上自定义需要用的工具和环境,然后构建成自定义出自定义基础镜像,后续再基于自定义基础镜像,来构建不同服…