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,一经查实,立即删除!

相关文章

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

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

马云最新发声: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 —— 心探索、心进取…

爬虫逆向实战(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…

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;但是电力设…

【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"…

【测试开发学习历程】python面向对象

1 面向对象的基本概念 面向对象&#xff1a;是把构成问题事务分解成各个对象&#xff0c;建立对象的目的不是为了完成一个步骤&#xff0c;而是为了描叙某个事物在整个解决问题的步骤中的行为。 怎么理解面向对象&#xff1f; 面向对象是一种编程思想&#xff0c;就是把要解决…

ruoyi-nbcio-plus基于vue3的flowable的自定义业务提交申请组件的升级修改

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/ 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a…

NAV2 ros galactic安装教程

sudo apt install ros-galactic-gazebo-* 这个必须下载 sudo apt-get install -y ros-galactic-rmw* 这个也是 使用操作系统中的包管理器安装 Nav2 包: sudo apt install ros-galactic-navigation2 sudo apt install ros-galactic-nav2-bringup安装Turtlebot 3 软件包: sudo…

Java快速入门系列-8(Web开发基础)

第8章 Web开发基础 8.1 Servlet与JSP8.1.1 Servlet简介8.1.2 JSP简介与使用8.1.3 Servlet与JSP协作8.2 Web服务器与Tomcat8.2.1 安装与配置Tomcat8.2.2 配置与管理Web应用8.3 MVC设计模式与Java Web应用8.3.1 MVC原理8.3.2 MVC在Java Web中的应用8.4 RESTful API设计与实现8.4.…

参数化方案对耦合模式影响试验

今天建立几个实验 HIST_model_test_lthf_tbf HIST_model_test_lthf_phiq HIST_model_test_sshf_tbf HIST_model_test_pblh_zli HIST_model_test_nocouple 十天过去了&#xff0c;这次运行的速度显然慢了好多&#xff0c;还没运行到2000年&#xff0c;没办法只能就地取材了。 我…

虚拟货币:数字金融时代的新工具

在数字化时代的到来之后&#xff0c;虚拟货币逐渐成为了一种广为人知的金融工具。虚拟货币是一种数字化的资产&#xff0c;它不像传统货币那样由政府或中央银行发行和监管。相反&#xff0c;虚拟货币通过密码学技术和分布式账本技术来实现去中心化的发行和交易。 虚拟货币的代…

xss跨站脚本攻击笔记

1 XSS跨站脚本攻击 1.1 xss跨站脚本攻击介绍 跨站脚本攻击英文全称为(Cross site Script)缩写为CSS&#xff0c;但是为了和层叠样式表(CascadingStyle Sheet)CSS区分开来&#xff0c;所以在安全领域跨站脚本攻击叫做XSS 1.2 xss跨战脚本攻击分类 第一种类型:反射型XSS 反射…

JVM规范中的运行时数据区

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a;每天一个知识点 ✨特色专栏&#xff1a…

Qt 多窗体

前言 在 Qt编程中经常会遇到要在多个界面之间切换的情况&#xff0c;如从登录界面跳转到主界面&#xff0c;从主界面跳转到设置界面&#xff0c;再返回到主界面。我们将会用一个简单的示例来实现多窗体功能。 登录窗口 创建基类为QMainWindow&#xff0c;类名为LoginWin。再使用…

SpringBoot中的Redis的简单使用

在Spring Boot项目中使用Redis作为缓存、会话存储或分布式锁等组件&#xff0c;可以简化开发流程并充分利用Redis的高性能特性。以下是使用Spring Boot整合Redis的详细步骤&#xff1a; 1. 环境准备 确保开发环境中已安装&#xff1a; Java&#xff1a;用于编写和运行Spring…