当前位置: 首页 > news >正文

gen-ui-python

gen-ui-python

https://github.com/fanqingsong/gen-ui-python?tab=readme-ov-file

https://github.com/bracesproul/gen-ui-python

Generative UI with LangChain Python 🦜🔗

Generative UI with LangChain Python

Overview

图片

 

This application aims to provide a template for building generative UI applications with LangChain Python. It comes pre-built with a few UI features which you can use to play about with gen ui. The UI components are built using Shadcn.

技术栈

前端技术栈

  • 框架: Next.js 14.2.3 (React 18)
  • 语言: TypeScript
  • 样式: Tailwind CSS + Shadcn/ui
  • 状态管理: Jotai
  • 图表库: Tremor React + MUI X Charts
  • AI集成: LangChain.js + Vercel AI SDK
  • UI组件: Radix UI + Lucide React
  • 构建工具: Yarn

后端技术栈

  • 框架: FastAPI + Uvicorn
  • 语言: Python 3.9-3.11
  • AI框架: LangChain + LangGraph
  • 数据库: MongoDB (Motor异步驱动)
  • API服务: LangServe
  • 依赖管理: UV (替代Poetry)
  • 类型检查: MyPy + Ruff

部署与运维

  • 容器化: Docker + Docker Compose
  • 环境管理: 多环境配置 (开发/生产)
  • 镜像加速: 华为云镜像仓库
  • 热重载: 开发环境支持

项目架构

gen-ui-python/
├── frontend/                 # Next.js 前端应用
│   ├── app/                 # App Router 页面
│   ├── components/          # UI 组件库
│   ├── ai/                  # AI 相关工具和钩子
│   ├── lib/                 # 工具函数
│   └── utils/               # 实用工具
├── backend/                 # FastAPI 后端服务
│   └── gen_ui_backend/     # 后端核心模块
│       ├── server.py       # FastAPI 服务器
│       ├── chain.py        # LangChain 链式处理
│       ├── ai_config.py    # AI 配置管理
│       ├── tools/          # 工具模块 (天气、GitHub等)
│       └── charts/         # 图表相关功能
├── docker-compose.yml       # 开发环境配置
├── docker-compose.prod.yml  # 生产环境配置
└── env.template            # 环境变量模板
 

核心功能模块

  1. AI 对话系统

    • 基于 LangChain 的对话链
    • 支持多轮对话和上下文管理
    • 集成 OpenAI GPT 模型
  2. 工具集成

    • 天气查询工具
    • GitHub 仓库操作
    • 发票生成工具
    • 可扩展的工具架构
  3. 图表可视化

    • 动态图表生成
    • 数据可视化组件
    • 交互式图表展示
  4. 响应式UI

    • 基于 Shadcn/ui 的现代设计
    • 移动端适配
    • 暗色/亮色主题支持

流式显示技术

🔄 实时流式显示原理

本项目采用先进的流式显示技术,让用户能够实时看到AI生成内容的过程,而不是等待完整响应。

传统方式 vs 流式显示

传统方式

用户: 请写一首关于春天的诗
[等待... 等待... 等待... 10秒后]
AI: 春风吹绿柳,花开满枝头...
 

流式显示

用户: 请写一首关于春天的诗
AI: 春
AI: 春风
AI: 春风吹
AI: 春风吹绿
AI: 春风吹绿柳
AI: 春风吹绿柳,
AI: 春风吹绿柳,花
AI: 春风吹绿柳,花开满枝头...
 

技术实现架构

用户输入 → 后端AI处理 → 流式事件 → 前端实时渲染↓           ↓            ↓          ↓聊天界面   LangChain     server.tsx   浏览器显示
 

核心组件

用户体验优势

  • 即时反馈: 用户立即知道系统在工作
  • 减少等待焦虑: 看到进度而不是空白屏幕
  • 更好的交互: 可以实时看到AI的"思考过程"
  • 更自然的对话: 像真人对话一样逐步显示
  • 服务端流式处理 (frontend/utils/server.tsx)

    • createStreamableUI(): 创建可流式更新的UI组件
    • streamRunnableUI(): 将LangChain流式事件转换为RSC流
    • 事件处理器实时处理每个流式事件
  • 客户端实时渲染 (frontend/components/prebuilt/chat.tsx)

    • element.ui: 实时接收流式UI更新
    • element.lastEvent: 等待最终结果
    • 状态管理实时更新界面
  • 数据流向

    后端AI服务 → 前端服务端组件 → createStreamableUI → 客户端浏览器↓              ↓                    ↓              ↓LangChain     server.tsx        流式UI更新      实时显示
    
     

 

http://www.hskmm.com/?act=detail&tid=19193

相关文章:

  • SPI和普通设计模式区别
  • 2025国内裱纸机厂家最新推荐排行榜:聚焦智能高速与全自动机型,权威精选综合实力 TOP3 厂家
  • 【题解】P13345 [EGOI 2025] IMO
  • 2025电线电缆厂家最新权威推荐榜:聚焦电线电缆实力企业,覆盖多场景需求助力精准选购
  • 9.27课后作业
  • 调度算法,上古三算法
  • 2025 年电脑租赁公司最新推荐排行榜:深度解析 TOP3 优质租电脑公司,助企业个人租赁电脑选择指南
  • 完整教程:✨WPF编程基础【1.2】:XAML中的属性
  • 学位论文中 公式的插入,格式调整、编号以及引用
  • 2025 北京羊蝎子餐厅推荐排行榜:TOP3最新必吃榜单,聚焦朝阳昌平东城等区域,揭秘北京羊蝎子餐厅必吃的门店!
  • 复刻江协激光触发器
  • Eurocrypt 2021 s Accepted Papers
  • Linux云服务器如何手动配置DNS?
  • Python 输入、输出的用法
  • 第一章——概论 - AlgosEng
  • 劝娃妈和娃不要学老人坐姿有感:老人无奈才坐成那样的。。AI协助分析很到位
  • 使用JOL查看对象布局
  • 集训队互测投题——封印
  • 一天一款实用的AI工具,第4期,AI翻译成英语
  • Docker基础与工程部署
  • 安装MariaDB服务器流程介绍在Ubuntu 22.04系统
  • 三种神器让LLM输出结构化数据:LangChain、LlamaIndex与Function Calling实战指南
  • win11安装ensp
  • 自己湿热内蕴出汗痒和岳母生病2天不洗澡发痒的不同-完美解释小孩为啥没那么容易痒
  • vue: ubuntu安装vue环境
  • golang实现ai聊天窗口
  • 源码反码补码
  • 图的分类法:解耦数据和图表类型
  • IDEA 2024的零卡死配置
  • 数据结构