网站建设系统改版,商城网站都有哪 些功能,电销助手app,惠州网站建设html5文章目录 引言功能效果开发准备依赖使用gradle依赖库MVIFlow设计富文本显示 总结 引言 Compose Multiplatformkotlin Multiplatfrom 今天已经到compose v1.7.3#xff0c;从界面UI框架上实战开发看#xff0c;很多api都去掉实验性注解#xff0c;表示稳定使用了#xff01;… 文章目录 引言功能效果开发准备依赖使用gradle依赖库MVIFlow设计富文本显示 总结 引言 Compose Multiplatformkotlin Multiplatfrom 今天已经到compose v1.7.3从界面UI框架上实战开发看很多api都去掉实验性注解表示稳定使用了然后继续这套框架做技术预研上马目前所有系统即Android、iOS、macOs、Windows、Linux(没有系统可验证)、Browser。 现在AI大模型是前沿技术广泛引用的排头兵这次引入deepseek的多轮会话v3大模型使用调用api的方式完成数据的显示。 *** 基于保密不会将重要的算法、工厂引擎代码透露。
功能效果 目前成功在Android真机Macbook pro2022Windows10iOS 17模拟器运行本地构建要依赖的库实在是太多了稍微一个错编译就是很漫长还有相当多技术在预研后面后把完整代码公布出来。
运行效果图gif预览,点进去看不到要登录下gitee gif图太大了没法压缩到10mb,给出链接iOS/macOs
Windows版电脑有水印不好截图放下载包.exe 开发准备
依托Android的compose框架为界面开发Android studio最新版Android Studio Koala | 2024.1.1 Patch 1 Build #AI-241.18034.62.2411.12071903, built on July 11, 2024本地的JDK为17或21我把第三方库comShot引进来就要21 XCode是编译iOS的现在只运行过在模拟器所有系统配置好环境变量。 开发电脑两台Windows 10专业版MacBook2022两边都可自主同步编译主要问题是gradle.properties文件中指定了项目的JDK路径 两台电脑是不一致的必须清楚自己的JDK版本和路径$java -version 。去deepseek获取免费一个月的api key其实换openAI的key也可以但是注意api的路径和域名确定当前compose plugin最新版本目前我的所有依赖都是最新版本已经踏平了很多坑。明确需求部分实现 1.多轮机器对话 ,支持多个大模型切换 2.本地会话记录sqlDelight数据库 3.黑暗模式切换支持所有系统支持代码框包裹 4.富文本对代码支持对公式函数支持 5.系统图册选择后模型问答 6.截图后的模型问答desktop端自由裁剪很难移动端还行 7.多端编译一套代码开发适配不同机型和系统磨平差异性 8.desktop端可随处弹出一个小功能窗快捷询问移动端则可以是语音和浮窗长驻 9.系统粘贴版监听本地存储粘贴记录 10.本地知识库构建离线小模型处理多场景搜索算法智能调用 10.MVIFlow流ViewModelKoin3开发架构设计我并没有引入第三方的框架来做我去研读了下FlowMVI的设计它引入了太多其他库而且把逻辑块的设计完全剥离感觉自己没完全理解不敢用最终目的就是异步的流式编程在声明式开发中用户意图单向流动到界面数据源唯一可信界面就能按我们的意图渲染再结合副作用effect觉得比原生好用好多就是现在不太会画canvas 完全自动运行类似手机AI应用帮我们点饭解决隐私权限模拟点击持续日志信息队列分析
依赖使用 在multiplatform compose 开发建议还是多依赖第三方的团队sdk实在没有的再搞接口expect去实现因为多端差异性开发工作量实在是大整个UI框架现在迭代速度也挺快的运行的效果差异巨大不同系统差异当同系统下还有机型差异系统版本插件就键盘弹起的坑、状态栏样式等都不及预期。 通用类commonMain openai-client这个库用kotlin把整个大模型请求都包装好了我在java时用okhttp3是成功实现SSE数据流的结果但在kotlin multiplatform时每次接口数据都是等一会然后所有data包一次性返回来我对比过openai-client的请求源码分析也没太大逻辑差别暂时解决不了原生kotlin用ktor3请求SSE效果有实现可以告知- ktor3.0 kotlinx-json ,这是网络请求库和序列化在大模型的请求参数中每个实体类的值都会转为Json参数然后post/json的方式获取data 包正常的SSE返回应该每个包都是data :{}里面的chioe[]又可能为空所以记得善用序列化的注解不同的大模型对参数要求有小差异不出现也要声明把值至为null不然没有时偶尔报错导致程序解析中断。 multiplatform-settings本地数据持久化之前的文章也提过现在理解透彻后重新实现了依赖注入的单例改为suspend的协程异步执行虽然优化了线程当异步时小心业务使用的逻辑错误取值时不在同一个线程。 napier日志库Android的日志LogcatiOS在consoleDesktop在terminal都要初始化后才能使用。 precompose路由页面跳转库这个自带viewModel内部也使用koin注入所以每个composable页面使用的viewModel都继承precompose库下的viewModel我里面封装了NavigateRoute整个路由表。 sqlDelight数据库会话记录历史存放工具要自己写sql语句 comShotAndroid和windows的composalbe组件截图就是对UI控件的截图我尝试整个屏幕构建一个透明的composable组件然后触发截图但是在自由拖拽矩形时没法跳出应用外的界面后面再研究下。 vinceglb/FileKit文件选择器以前不知道有这库本地文件都是用okio expect保存的 coil3图片异步加载gif/video只支持Android可选sketch库 webview,io.github.kevinnzou:compose-webview-multiplatform修复很及时注意和路由库使用的bug用voyager和它不兼容 系统特性类 富文本显示https://github.com/halilozercan/compose-richtext只支持Android和Desktop而且调试bug不多 富文本编辑或显示https://github.com/MohamedRejeb/compose-rich-editor全平台但是挺多问题的iOS不同写法会内容闪烁只支持行内代码‘’不支持块代码包裹如‘’‘ java’‘’。 权限库dev.icerock.moko:permissions其他可选真不多。
gradle依赖库
[versions]
agp 8.5.0
#ksp 2.0.20-1.0.24
kotlin 2.1.0
ksp 2.1.0-1.0.29
compose-compiler 1.5.4
java 21
compose 1.7.6
kotlinxDatetime 0.6.0
compose-material3 1.3.1
activityCompose 1.9.2
compose-plugin 1.7.3
androidAppCompatVersion 1.7.0
sqlDelight 2.0.2
buildkonfigGradlePlugin 0.15.1
koin 4.0.0
mokoMvvmVersion 0.16.1
androidLifecycleVersion 2.2.0
stately 2.0.6
ktor 3.1.0
uuid 0.8.4
settings 1.3.0
mokopermission 0.18.1
perference 1.2.0
permissionX 1.8.0
coil3 3.1.0
windowSize 0.5.0
sheet 0.1.2
pagingCommonVersion 3.3.0-alpha02-0.5.1
#precompose 1.6.2
precompose 1.7.0-alpha01 #预发布
okio 3.9.0
bugly 4.1.9
file 0.8.8
coroutines-core 1.10.1
coreSplashscreen 1.0.1
datastorePreferences 1.1.1
lifecycleRuntimeKtx 2.7.0
#coreKtx 1.10.1
coreKtx1.15.0
jna 5.15.0
toast4j 0.2.0
kotlinxCoroutinesSwing 1.10.1
kotlinxSerializationJson 1.7.3
desugar_jdk_libs 2.1.3
accompanist-systemUIController 0.36.0
androidx-lifecycle 2.8.4
androidx-navigation 2.8.0-alpha10
napier 2.7.1
richtext 1.0.0-alpha02
richedit 1.0.0-rc11
reveal 3.2.0
capture 0.3.0
ktoken 0.3.0
openai-client 4.0.1
webview1.9.40[libraries]
#UI框架相关
buildkonfig-gradle-plugin { module com.codingfeline.buildkonfig:buildkonfig-gradle-plugin, version.ref buildkonfigGradlePlugin }
core-splashscreen { module androidx.core:core-splashscreen, version.ref coreSplashscreen }
androidx-activity-compose { module androidx.activity:activity-compose, version.ref activityCompose }
androidx-core { group androidx.core, name core-ktx, version.ref coreKtx }
kotlinx-coroutines-core { module org.jetbrains.kotlinx:kotlinx-coroutines-core, version.ref coroutines-core }
kotlinx-coroutines-swing { module org.jetbrains.kotlinx:kotlinx-coroutines-swing, version.ref kotlinxCoroutinesSwing }
kotlinX-serializationJson { module org.jetbrains.kotlinx:kotlinx-serialization-core, version.ref kotlinxSerializationJson }uuid { module com.benasher44:uuid, version.ref uuid }
windowSize { module dev.chrisbanes.material3:material3-window-size-class-multiplatform, version.ref windowSize }
bottomSheet { module com.github.skydoves:flexible-bottomsheet-material3, version.ref sheet }
paging-compose { module app.cash.paging:paging-compose-common, version.ref pagingCommonVersion }
kotlin-datetime { module org.jetbrains.kotlinx:kotlinx-datetime, version.ref kotlinxDatetime }
toast4j { module de.mobanisto:toast4j, version.ref toast4j }
jna { module net.java.dev.jna:jna, version.ref jna }
desugar_jdk_libs { module com.android.tools:desugar_jdk_libs, version.ref desugar_jdk_libs }
androidx-lifecycle-viewmodel-compose { module org.jetbrains.androidx.lifecycle:lifecycle-viewmodel-compose, version.ref androidx-lifecycle }
androidx-navigation-compose { module org.jetbrains.androidx.navigation:navigation-compose, version.ref androidx-navigation }
accompanist-systemUIController { module com.google.accompanist:accompanist-systemuicontroller, version.ref accompanist-systemUIController }
napier { module io.github.aakira:napier, version.ref napier }
stdlib { module org.jetbrains.kotlin:kotlin-stdlib, version.ref kotlin }
compose-webviews { module io.github.kevinnzou:compose-webview-multiplatform, version.ref webview }#没有iOS的富文本处理
richtext-core { module com.halilibo.compose-richtext:richtext-ui, version.ref richtext }
richtext-mark { module com.halilibo.compose-richtext:richtext-commonmark, version.ref richtext }
richtext-markdown { module com.halilibo.compose-richtext:richtext-markdown, version.ref richtext }
richtext-material { module com.halilibo.compose-richtext:richtext-ui-material, version.ref richtext }
richtext-material3 { module com.halilibo.compose-richtext:richtext-ui-material3, version.ref richtext }
rich-editor { module com.mohamedrejeb.richeditor:richeditor-compose, version.ref richedit }reveal { module com.svenjacobs.reveal:reveal-core, version.ref reveal }
#capture-shot { module ir.mahozad.multiplatform:comshot, version.ref capture }#Android特有
androidx-perference { module androidx.preference:preference-ktx, version.ref perference }
androidx-lifecycle { group androidx.lifecycle, name lifecycle-runtime-ktx, version.ref lifecycleRuntimeKtx }
appCompat { module androidx.appcompat:appcompat, version.ref androidAppCompatVersion }
lifecycle-extension { module androidx.lifecycle:lifecycle-extensions, version.ref androidLifecycleVersion }
android-bugly { module com.tencent.bugly:crashreport, version.ref bugly }
permissionX-android { module com.guolindev.permissionx:permissionx, version.ref permissionX }#数据处理
file-picker { module io.github.vinceglb:filekit-compose, version.ref file }
okio-core { module com.squareup.okio:okio, version.ref okio }
datastore-preferences { module androidx.datastore:datastore-preferences, version.ref datastorePreferences }
multiplatform-settings { module com.russhwolf:multiplatform-settings, version.ref settings }
multiplatform-coroutines { module com.russhwolf:multiplatform-settings-coroutines, version.ref settings }
multiplatform-datastore { module com.russhwolf:multiplatform-settings-datastore, version.ref settings }
multiplatform-serialization { module com.russhwolf:multiplatform-settings-serialization, version.ref settings }compose-ui { module androidx.compose.ui:ui, version.ref compose }
compose-ui-tooling { module androidx.compose.ui:ui-tooling, version.ref compose }
compose-ui-tooling-preview { module androidx.compose.ui:ui-tooling-preview, version.ref compose }
compose-material3 { module androidx.compose.material3:material3, version.ref compose-material3 }#依赖注入
koin-android { module io.insert-koin:koin-android, version.ref koin }
koin-androidx-compose { module io.insert-koin:koin-androidx-compose, version.ref koin }
koin-core { module io.insert-koin:koin-core, version.ref koin }
koin-compose { module io.insert-koin:koin-compose, version.ref koin }
stately-common { module co.touchlab:stately-common, version.ref stately }#权限申请兼容Android
mokopermission { module dev.icerock.moko:permissions, version.ref mokopermission }
mokopermission-compose { module dev.icerock.moko:permissions-compose, version.ref mokopermission }
mokoMvvmCompose { module dev.icerock.moko:mvvm-compose, version.ref mokoMvvmVersion }
precompose-navigator { module moe.tlaster:precompose, version.ref precompose }
precompose-koin { module moe.tlaster:precompose-koin, version.ref precompose }
precompose-viewmodel { module moe.tlaster:precompose-viewmodel, version.ref precompose }
mokoMvvmCore { module dev.icerock.moko:mvvm-core, version.ref mokoMvvmVersion }#数据库
android-driver { module app.cash.sqldelight:android-driver, version.ref sqlDelight }
native-driver { module app.cash.sqldelight:native-driver, version.ref sqlDelight }
sqldelight-extensions { module app.cash.sqldelight:coroutines-extensions, version.ref sqlDelight }
sqlDelight-runtime { module app.cash.sqldelight:runtime, version.ref sqlDelight }
primitive-adapters { module app.cash.sqldelight:primitive-adapters, version.ref sqlDelight }
sqlite-driver { module app.cash.sqldelight:sqlite-driver, version.ref sqlDelight }#ktor 3.0网络连接
ktor-client-core { module io.ktor:ktor-client-core, version.ref ktor }
ktor-client-logging { module io.ktor:ktor-client-logging, version.ref ktor }
#ktor-client-curl { module io.ktor:ktor-client-curl, version.ref ktor }
#ktor-client-auth { module io.ktor:ktor-client-auth, version.ref ktor }
#ktor engines
#ktor-client-apache { module io.ktor:ktor-client-apache, version.ref ktor }
#ktor-client-jetty { module io.ktor:ktor-client-jetty, version.ref ktor }
ktor-client-okhttp { module io.ktor:ktor-client-okhttp, version.ref ktor }
ktor-client-android { module io.ktor:ktor-client-android, version.ref ktor }
ktor-client-ios { module io.ktor:ktor-client-darwin, version.ref ktor }
ktor-client-content-negotiation { module io.ktor:ktor-client-content-negotiation, version.ref ktor }
ktor-serialization-kotlinx-json { module io.ktor:ktor-serialization-kotlinx-json, version.ref ktor }
ktor-client-cio { module io.ktor:ktor-client-cio, version.ref ktor }
ktoken { group com.aallam.ktoken, name ktoken, version.ref ktoken }
openai-client { module com.aallam.openai:openai-client, version.ref openai-client }#https://coil-kt.github.io/coil/getting_started/
#coil3-core { module io.coil-kt.coil3:coil, version.ref coil3 }
coil3-compose { module io.coil-kt.coil3:coil-compose, version.ref coil3 }
coil3-svg { module io.coil-kt.coil3:coil-svg, version.ref coil3 }
coil3-ktor { module io.coil-kt.coil3:coil-network-ktor3, version.ref coil3 }
#coil3-ktor { module io.coil-kt.coil3:coil-network-ktor2, version.ref coil3 }
#video/gif只有Android版
#coil3-video { module io.coil-kt.coil3:coil-video, version.ref coil3 }
#coil3-gif { module io.coil-kt.coil3:coil-gif, version.ref coil3 }[plugins]
androidApplication { id com.android.application, version.ref agp }
androidLibrary { id com.android.library, version.ref agp }
kotlinAndroid { id org.jetbrains.kotlin.android, version.ref kotlin }
kotlinMultiplatform { id org.jetbrains.kotlin.multiplatform, version.ref kotlin }
kotlinCocoapods { id org.jetbrains.kotlin.native.cocoapods, version.ref kotlin }
jvm { id org.jetbrains.kotlin.jvm, version.ref kotlin }
kotlinxSerialization { id org.jetbrains.kotlin.plugin.serialization, version.ref kotlin }
jetbrainsCompose { id org.jetbrains.compose, version.ref compose-plugin }
compose-compiler { id org.jetbrains.kotlin.plugin.compose, version.ref kotlin }
buildKonfig { id com.codingfeline.buildkonfig, version.ref buildkonfigGradlePlugin }
sqlDelight { id app.cash.sqldelight, version.ref sqlDelight }
ksp { id com.google.devtools.ksp, version.ref ksp }
MVIFlow设计
使用//主动获取数据 chatViewModel.processConfig(ModelConfigIntent.LoadData)
package com.hwj.ai.ui.viewmodelimport com.hwj.ai.data.repository.GlobalRepository
import com.hwj.ai.global.CODE_IS_DARK
import com.hwj.ai.global.getCacheBoolean
import com.hwj.ai.global.getMills
import com.hwj.ai.models.LLMModel
import com.hwj.ai.ui.global.GlobalIntent
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.IO
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.asStateFlow
import kotlinx.coroutines.flow.update
import kotlinx.coroutines.launch
import moe.tlaster.precompose.viewmodel.ViewModel
import moe.tlaster.precompose.viewmodel.viewModelScopeclass ChatViewModel(private val globalRepo: GlobalRepository) : ViewModel() {private val _drawerShouldBeOpened MutableStateFlow(false)val drawerShouldBeOpened _drawerShouldBeOpened.asStateFlow()fun openDrawer() {_drawerShouldBeOpened.value true}fun resetOpenDrawerAction() {_drawerShouldBeOpened.value false}//全局参数状态private val _configObs MutableStateFlow(ModelConfigState())val configState _configObs.asStateFlow()private var lastTime getMills()//本地主题值修改private val _darkObs MutableStateFlow(false)val darkState _darkObs.asStateFlow()fun processConfig(intent: ModelConfigIntent) {when (intent) {is ModelConfigIntent.LoadData - {fetchModelConfig()}is ModelConfigIntent.UpdateData - {if (getMills() - lastTime 30000) {fetchModelConfig()}}}}fun processGlobal(intent: GlobalIntent) {when (intent) {is GlobalIntent.CheckDarkTheme - {fetchDarkStatus()}}}private fun fetchModelConfig() {_configObs.update { it.copy(isLoading true) }viewModelScope.launch(Dispatchers.IO) {try {val result globalRepo.fetchModelConfig()_configObs.update { it.copy(isLoading false, data result) }} catch (e: Exception) {_configObs.update { it.copy(error e.toString()) }}}}private fun fetchDarkStatus() {viewModelScope.launch {val isDark getCacheBoolean(CODE_IS_DARK)_darkObs.value isDark}}
}data class ModelConfigState(val isLoading: Boolean false,val data: ListLLMModel? null,val error: String? null
)
//解决不了基类的写法
//data class ModelConfigState(val json: String? null) : BaseUiStateString(data json)sealed class ModelConfigIntent {//获取所有的大模型数据解析后保存到本地object LoadData : ModelConfigIntent()//判断时间间隔是否需要更新数据主动拉取data class UpdateData(val time: Long) : ModelConfigIntent()
} MyState 继承自 UiState
//data class MyState(
// val items: ListString emptyList() // 你可以根据具体需要定制数据类型
//) : BaseUiStateListString(data items)富文本显示
//android windowsComposable
private fun TestBotMsgCard1(message: MessageModel) {
// val chatViewModel koinViewModel(ChatViewModel::class)
// val isDark chatViewModel.darkState.collectAsState().valueval richTextStyle RichTextStyle(codeBlockStyle CodeBlockStyle(textStyle TextStyle(fontFamily FontFamily.Default,fontWeight FontWeight.Normal,fontSize 13.sp,color BackCodeTxtColor,),wordWrap true,modifier Modifier.background(color BackCodeGroundColor,shape RoundedCornerShape(6.dp))),stringStyle RichTextStringStyle())//第一种
// com.halilibo.richtext.ui.material.RichText(
// modifier Modifier.padding(
// horizontal 18.dp,
// vertical 12.dp
// ).background(MaterialTheme.colorScheme.onPrimary),
// style richTextStyle,
//
// ) {
// //字体颜色对了但是没能解析富文本的符合Text(message.answer.trimIndent(), color MaterialTheme.colorScheme.onTertiary)
//
// //没能改字体颜色
// Markdown(message.answer.trimIndent())
// }//第二
// val richTextState rememberRichTextState()
// richTextState.setMarkdown(message.answer.trimIndent())
// richTextState.config.codeSpanBackgroundColor BackCodeGroundColor
// richTextState.config.codeSpanColor BackCodeTxtColor
// ThemeChatLite {
// RichTextEditor(
// modifier Modifier.padding(
// horizontal 18.dp,
// vertical 12.dp
// ).background(MaterialTheme.colorScheme.onPrimary), state richTextState,
// textStyle LocalTextStyle.current.copy(color MaterialTheme.colorScheme.onTertiary)
// )//第三
// val parser CommonmarkAstNodeParser()
// RichText( modifier Modifier.padding(
// horizontal 18.dp,
// vertical 12.dp
// ).background(MaterialTheme.colorScheme.onPrimary),
// style richTextStyle,
// ){
// BasicMarkdown(astNode parser.parse(message.answer.trimIndent()))
// }//第四 追踪源码查看 RichTextMaterialTheme-》contentColorProvider 修改内部字体颜色自定义代码颜色RichTextThemeProvider(contentColorProvider { MaterialTheme.colorScheme.onTertiary }) {BasicRichText(modifier Modifier.padding(horizontal 18.dp,vertical 12.dp).background(MaterialTheme.colorScheme.onPrimary),style richTextStyle,) {Markdown(message.answer.trimIndent())}}}//ios端
//不会屏闪也可现实代码但是没有代码框iOS端只要遇到代码就有线程报错日志
Composable
fun BotCommonCardApp(message: MessageModel) {val chatViewModel koinViewModel(ChatViewModel::class)val isDark chatViewModel.darkState.collectAsState().valueval subScope rememberCoroutineScope()val state rememberRichTextState()LaunchedEffect(Unit) {state.removeLink()state.config.codeSpanBackgroundColor BackCodeGroundColorstate.config.codeSpanColor BackCodeTxtColorchatViewModel.processGlobal(GlobalIntent.CheckDarkTheme)if (!state.isCodeSpan) {state.toggleCodeSpan()}
// java //无法解析这个 只有 Code span example ,但是3点是代码块一点是行内代码}val answerState remember { mutableStateOf() }LaunchedEffect(message.answer.trimIndent()) {subScope.launch(Dispatchers.IO) { //貌似频繁IOval newMsg message.answer.trimIndent().replace(java, ).replace(, )answerState.value newMsg}}RichText(state state.apply {state.setMarkdown(answerState.value)},modifier Modifier.padding(horizontal 18.dp, vertical 12.dp).background(MaterialTheme.colorScheme.onPrimary),color MaterialTheme.colorScheme.onTertiary,style TextStyle(fontFamily FontFamily.Default,fontWeight FontWeight.Normal,fontSize 13.sp,color MaterialTheme.colorScheme.onTertiary))
}总结 大模型的多轮对话实现总体不难只是很多小问题现在我只是实现了主体对话功能把多端都跑起来了进而熟悉整个MVI的开发设计以前对依赖注入Koin不够重视觉得没啥应用在声明式开发中现在非常好用绝大数工具实体都不用new对象而且借助remember和flow做到状态随处感知界面渲染代码 少很多后续引入各种库的高级用法优化代码结构。现在是AI大火跨端开发AI应用探索下这技术路线的可行性过于先进确实很多问题只能自己解决多用chatgpt给点思路也行。 kotlin multiplatform 开发框架最大好处是直接用kotlin实现跨端逻辑代码再结合compose multiplatform框架把UI框架也补全了不需要像Futter要引入两个渲染引擎一个引擎使用 C/C 开发直接调用 OpenGL/Skia 的 API 进行绘制从而摆脱 iOS 的 UIKit 以及 Android 的 View 组件直接渲染成需要的样式保证样式高度统一另一个是 Dart 语言的 Runtime用于解析并运行 Dart 语言编译的 Bundle导致apk包很大。今年的编译器IDEA也支持运行开发kotlin multiplatform项目Fleet编译器不整了目前生态库也不断加入比上一年开始完善很多前期配置好后面的编译就很省事前期的拉库是个漫长等待。
