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]
# openaiopenai.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
业务功能模块,蕴含以下内容:
- 智能对话
- 智能翻译
- 智能写作
- 智能文档
- 智能工作
- 各模块遵循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)
援用pub flutter库(https://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