Flutter Web 实现ChatGPT对话与Function Call

Flutter-ChatGPT

基于Flutter Web实现ChatGPT多轮聊天、翻译、Prompt文本生成、企业知识库、本地文档问答、functions_call等功能,页面流式输出采用StreamBuilder Widget实现,各业务模块Repository均提供直连OpenAI接口与python后端API接口流式输出功能实例

Github仓库地址

backend

采用FastApi实现后端LangChain调用OpenAI接口

backend-data

  • 提供初始化向量文档,构建向量索引代码位于vector_index.py

backend-service

  • function_call.py 提供openai function call相关实例功能
  • model_query.py 提供python方法调用参数封装模型,涉及文档问答与多轮对话
  • vector_index.py 提供本地知识库/上传文档向量化相关实例功能

backend-env

提供设置OpenAI参数设置[OPENAI_API_KEY]

ini 复制代码
# openai
openai.log = "debug"
openai.api_key = os.environ["OPENAI_API_KEY"]

backend-main.py

提供FastApi接口功能实例,包括response stream流处理

backend-requirments.txt

依赖组件配置,可通过terminal执行

复制代码
pip install -r requirments.txt

frontend

采用Flutter实现Web-UI(Material3)功能,具体功能可查看screenshot,已增加页面字符国际化配置

frontend-db

web浏览器IndexedDB数据库操作与模型实例

frontend-pages

业务功能模块,包含以下内容:

  1. 智能对话
  2. 智能翻译
  3. 智能写作
  4. 智能文档
  5. 智能任务
  • 各模块遵循repository-model-provider-view分包方式
  • 各view模块按功能复杂度拆分widgets与states 具体拆分粒度按实际业务要求处理,尽可能执行局部刷新
  • 通过[go_router][StatefulShellBranch]实现各页面路由状态管理
  • 通过Riverpod管理Widget UI-States(riverpod.dev/)
  • 页面逐字打印采用SteamBuild Widget实现,具体代码如下message_bot.dart
kotlin 复制代码
    ///
    /// 流式请求[request task stream message]
    ///
    Stream<String>? stream(WidgetRef ref, bool mounted) {
      return
          //ref.read(taskStateProvider.notifier).sendMessageStream('', '', () {
          ref.read(taskStateProvider.notifier).sendMessageStreamApi('', '', () {
        if (!mounted) return;
        ref.read(allowInputTaskProvider.notifier).update((state) => false);
      }, () {
        if (!mounted) return;
        ref.read(allowInputTaskProvider.notifier).update((state) => true);
      });
    }

    ///
    /// StreamBuilder
    ///
    class MessageBotStream extends ConsumerWidget {
      const MessageBotStream(this.stream, this.controller, {super.key});

      final Stream<String>? stream;

      //滚动控制
      final ScrollController controller;

      @override
      Widget build(BuildContext context, WidgetRef ref) {
        return StreamBuilder(
          stream: stream,
          key: Key('${Random().nextDouble()}'),
          builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
            if (snapshot.hasError) {
              return Text("${t.app.error}: ${snapshot.error}");
            }
            if (snapshot.hasData) {
              String content = snapshot.data ?? "";
              scrollEnd(controller, 200);
              if (content.isNotEmpty) return Text(content);
            }
            return const MessageLoading();
          },
        );
      }
    }

frontend-assets

提供业务模块使用图标与i18n国际化语言配置,slang国际化内容生成gen

演示效果截图

具体前往查看screenshot,或者本地运行前后端项目(需自行提供OpenAI Key)

引用pub flutter库(pub.dev/)

Flutter SDK version: 3.13.2 (stable)

Dart SDK version: 3.1.0 (stable)

animated_text_kit: ^4.2.2
flutter_spinkit: ^5.2.0
go_router: ^10.1.2
hooks_riverpod: ^2.3.10
logger: ^2.0.1
shared_preferences: ^2.2.1
sembast_web: ^2.1.3
http: ^1.1.0
file_picker: ^5.5.0
slang: ^3.23.0
slang_flutter: ^3.23.0

相关推荐
yuanpan1 分钟前
如何将python项目打包成Windows环境的exe应用提供给客户使用
开发语言·windows·python
程序员一诺1 分钟前
【爬虫开发】爬虫开发从0到1全知识教程第14篇:scrapy爬虫框架,介绍【附代码文档】
后端·爬虫·python·数据
njsgcs12 分钟前
python getattr调用当前文件引用的模块内的方法,实例
开发语言·python
独好紫罗兰29 分钟前
洛谷题单3-P2669 [NOIP 2015 普及组] 金币-python-流程图重构
开发语言·python·算法
跳跳糖炒酸奶33 分钟前
第四章、Isaacsim在GUI中构建机器人(3):添加摄像头和传感器
人工智能·python·算法·ubuntu·机器人
凯强同学41 分钟前
第十四届蓝桥杯大赛软件赛省赛Python 研究生组:4.互质数的个数
python·职场和发展·蓝桥杯
utmhikari2 小时前
【日常随笔】万字长文,如何用pyside6开发一个python桌面工具
前端·python·pyqt
小杨4044 小时前
python入门系列十四(多进程)
人工智能·python·pycharm
用户277844910499319 小时前
借助DeepSeek智能生成测试用例:从提示词到Excel表格的全流程实践
人工智能·python
张风捷特烈20 小时前
Flutter 伪3D绘制#03 | 轴测投影原理分析
android·flutter·canvas