关于flutter:Flutter-Web-实现ChatGPT对话与Function-Call

40次阅读

共计 2431 个字符，预计需要花费 7 分钟才能阅读完成。

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

Github 仓库地址

采纳 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]

# 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

采纳 Flutter 实现 Web-UI（Material3）性能，具体性能可查看 screenshot，已减少页面字符国际化配置

frontend-db

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

frontend-pages

业务功能模块，蕴含以下内容：

智能对话
智能翻译
智能写作
智能文档
智能工作

各模块遵循 repository-model-provider-view 分包形式
各 view 模块按性能复杂度拆分 widgets 与 states
具体拆分粒度按理论业务要求解决，尽可能执行部分刷新
通过 [go\_router][StatefulShellBranch] 实现各页面路由状态治理
通过 Riverpod 治理 Widget UI-States(https://riverpod.dev/)
页面逐字打印采纳 SteamBuild Widget 实现，具体代码如下 message\_bot.dart：

    ///
    /// 流式申请[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)

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