Lobe UI - 基于 AntDesign 开发的 AIGC Web 应用的开源 UI 组件库

Lobe UI - 基于 AntDesign 开发的 AIGC Web 应用的开源 UI 组件库,轻松构建自己的 ChatGPT 应用

今天推荐一个可以快速开发 ChatGPT UI 界面的组件库,质量很高,拿来就能用。

Lobe UI 是由 lobehub 团队开发的一套 web UI 组件库,和我之前推荐的很多通用型的 UI 组件库不同,Lobe UI 是专门为目前火热的 AIGC 应用开发而打造,让我们可以快速构建出类似于 ChatGPT 这样的指令输入型生成式 AI 应用。

Lobe UI 官网

  • 高性能速度快:Lobe UI 在运行时会自动裁剪不必要的样式属性,组件性能很高;
  • 支持主题定制:官方提供了一种简单的方法来自定义主题,我们可以更改颜色、字体等外观,轻松构建符合自身产品主题的界面;
  • 支持 light / dark 界面:支持自动暗模式识别,原理是 NextUI 在检测到 HTML theme prop 变化时自动更改主题。

Lobe UI 能做什么?

ChatGPT 已经爆火了一年多了,我们知道,通过申请 OpenAi 的账号,我们可以拥有 ChatGPT 的能力来将 ChatGPT 的能力接入到自己产品中。现在国内很多大厂出品的 AI 产品也都提供这样的开发服务。

不知道大家在工作中有没有接到要搭建 AIGC 的需求,今天向大家推荐的 Lobe UI,就是专门用来开发聊天式 AIGC 应用的 UI 套件,这套组件内置了很多拿来就直接用的组件,完全不需要自己来早轮子,可以让我们以极快的速度搭建应用。

聊天消息组件

安装 Lobe UI

需要注意的是,Lobe UI 包仅支持 ESM,使用 使用 NextJS 编译,所以只能使用下面这种方式安装:

为了正确使用 nextjs ssr,需要在 next.config.js 中添加 transpilePackages: [‘@lobehub/ui’],比如:

组件使用示范

Lobe UI 组件是基于 Antd 组件开发的,所以和 Antd 组件完全兼容,我们可以使用 Antd 样式作为默认的 css-in-js 样式解决方案。

这样就可以开始开发我们的 GPT 应用了。

LobeUI 官方提供了很多 AIGC 专用的组件,比如指令输入框、表情选择器、聊天图标、聊天窗口、聊天消息列表等,都是非常实用的组件,开发 GPT 界面几乎都要用到。

代码高亮组件

看到这些组件,打破了我原来以为一个 GPT 应用非常简单的刻板印象,界面简洁、容易上手其实是产品和 UI 设计能力的体现,但要开发出来完整的应用,复杂程度一点也不小。

指令输入框

在官方的组件文档中,有完善的参数说明和代码例子,不过目前只有英文文档,好在借助翻译工具阅读起来也不是太难,我大概翻了一下,很多时候其实不需要翻译,文档写得很清楚,也都是前端开发常见的那些单词,很容易上手。

Lobe UI 是一套免费开源的前端 UI 组件库,开发团队 lobehub 已经把项目的源代码基于 MIT 开源协议完全开放,根据这个协议,我们可以自由地下载来使用,放心用在个人和商业项目上。

原文链接:https://www.thosefree.com/lobe-ui

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

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

相关文章

Objective-C学习笔记(内存管理、property参数)4.9

1.引用计数器retainCount:每个对象都有这个属性,默认值为1,记录当前对象有多少人用。 为对象发送一条retain/release消息,对象的引用计数器加/减1,为对象发一条retainCount,得到对象的引用计数器值,当计数器…

上海计算机学会 2023年6月月赛 乙组T3 工作安排(结构体排序、贪心算法)

第三题:T3工作安排 标签:结构体排序、贪心算法 题意:有 n n n份任务。完成第 i i i份任务需要 t i t_i ti​的时间,在这份任务没有完成之前,每一个单位时间会收到 f i f_i fi​单位的罚款。求以什么顺序安排这些任务&…

鸿蒙实战开发-如何实现选择并查看文档与媒体文件

介绍 应用使用ohos.file.picker、ohos.multimedia.mediaLibrary、ohos.file.fs 等接口,实现了picker拉起文档编辑保存、拉起系统相册图片查看、拉起视频并播放的功能。 效果预览 使用说明: 在首页,应用展示出最近打开过的文档信息&#xf…

【AcWing】蓝桥杯集训每日一题Day22|区间DP|博弈论|1388.游戏(C++)

1388.游戏 1388. 游戏 - AcWing题库难度:中等时/空限制:1s / 64MB总通过数:1429总尝试数:1925来源:usaco training 3.3算法标签博弈论DP区间DP 题目内容 玩家一和玩家二共同玩一个小游戏。 给定一个包含 N 个正整数的…

【MATLAB 分类算法教程】_3麻雀搜索算法优化支持向量机SVM分类 - 教程和对应MATLAB代码

分类代码案例3:麻雀搜索算法优化支持向量机SVM分类 - MATLAB完全代码教程 1. 初始化代码2.读取数据代码3.数据预处理代码4.利用麻雀搜索算法SSA求解最佳的SVM参数c和g代码5.根据最佳的参数进行SVM模型训练代码6.SVM模型预测代码7.准确率分析以及分类结果对比作图代码本文以红酒…

Python中的生成器与迭代器:概念、区别及其实用性解析

Python中的生成器与迭代器:概念、区别及其实用性解析 在Python编程中,生成器(Generators)和迭代器(Iterators)是处理序列数据的两个重要概念。它们为处理大量数据或复杂数据结构提供了高效且灵活的方式。本…

SpringCloudAlibaba-整合sentinel(四)

目录地址: SpringCloudAlibaba整合-CSDN博客 这里只关注代码部分,至于sentinel服务UI的实用,后面可以补上 这里做一个改造: 因为sentinel可以和openfeign结合使用,为微服务做熔断降级; 为了方便微服务之间…

马云最新发声:AI时代刚刚到来,一切才刚开始,我们正当其时!

大家好,我是木易,一个持续关注AI领域的互联网技术产品经理,国内Top2本科,美国Top10 CS研究生,MBA。我坚信AI是普通人变强的“外挂”,所以创建了“AI信息Gap”这个公众号,专注于分享AI全维度知识…

3. Spring 注解存储对象 Bean的命名规范

从Java5.0开始,Java开始支持注解。Spring做为Java生态中的领军框架,从2.5版本后也开始支持注解。相比起之前使用xml来配置Spring框架,使用注解提供了更多的控制Spring框架的方式。 SpringFramework版本对应jdk版本重要特性SpringFramework 1…

Unity之Unity面试题(五)

内容将会持续更新,有错误的地方欢迎指正,谢谢! Unity之Unity面试题(五) TechX 坚持将创新的科技带给世界! 拥有更好的学习体验 —— 不断努力,不断进步,不断探索 TechX —— 心探索、心进取…

《Linux运维实战:Kylin V10操作系统开启安装软件保留缓存设置》

总结:整理不易,如果对你有帮助,可否点赞关注一下? 更多详细内容请参考:Linux运维实战总结 一、操作步骤 1、改系统/etc/yum.conf配置文件,开启安装软件保留缓存设置 [rootecs-90c2-0003 ~]# vim /etc/yum.…

Ticket Servers: Distributed Unique Primary Keys on the Cheap(经济高效的分布式ID生成方案) 翻译

本文是对Ticket Servers: Distributed Unique Primary Keys on the Cheap https://code.flickr.net/2010/02/08/ticket-servers-distributed-unique-primary-keys-on-the-cheap/ 的翻译,此文主要讲述了flicker公司的用于生成分布式ID的Ticker Servers 的背景、原理、…

爬虫逆向实战(40)-某江酒店登陆(AES、MD5)

一、数据接口分析 主页地址:某江酒店 1、抓包 通过抓包可以发现数据接口是/api/member/login 2、判断是否有加密参数 请求参数是否加密? 通过查看“载荷”模块可以发现,有TDFingerprint、blackBoxMd5、password和sw四个加密参数&#x…

Android自定义控件ScrollView实现上下滑动功能

本文实例为大家分享了Android ScrollView实现上下滑动功能的具体代码,供大家参考,具体内容如下 package com.example.zhuang; import android.content.Context; import android.util.AttributeSet; import android.util.DisplayMetrics; import android…

Python---Numpy酒鬼漫步

import numpy as np# 模拟随机游走过程,返回每一步的结果(0或1) def random_walks(steps):draws np.random.randint(0, 2, sizesteps)return draws# 根据随机游走的结果计算每一步的方向步长,返回方向数组(1或-1&…

HTML5学习记录

简介 超文本标记语言&#xff08;HyperText Markup Language&#xff0c;简称HTML&#xff09;&#xff0c;是一种用于创建网页的标准标记语言。 编辑器 下载传送门https://code.visualstudio.com/ 下载编辑器插件 标题 标题通过 <h1> - <h6> 标签进行定义。 …

科技助力输电线安全隐患预警,基于YOLOv5全系列参数【n/s/m/l/x】模型开发构建电力设备场景下输电线安全隐患目标检测预警系统

电力的普及让我们的生活变得更加便利&#xff0c;四通八达的电网连接着生活的方方面面&#xff0c;电力能源主要是依托于庞大复杂的电网电力设备进行传输的&#xff0c;有效地保障电网场景下输电线的安全对于保障我们日常生活所需要的电力有着重要的意义&#xff0c;但是电力设…

Spring Boot项目启动时执行指定的方法

项目场景&#xff1a; 本文介绍Spring Boot项目启动时执行指定的方法两种常用方式和他们之间的区别。 实现方案&#xff1a; 方式一&#xff1a;使用注解PostConstruct Component public class PostConstructTest {PostConstructpublic void postConstruct() {System.out.prin…

【Web开发】jquery图片放大镜效果制作变焦镜头图片放大

jquery图片放大镜效果制作变焦镜头图片放大实现 整体步骤流程&#xff1a; 1. 前端html实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"…