style: Chat UI modify

Author: Onion99

README.md

@@ -41,8 +41,10 @@ Mine StableDiffusion is a **native, offline-first AI art generation app** that b
 - **🎨 Modern UI** - Beautiful Compose Multiplatform interface
 - **📱 True Multiplatform** - Shared codebase for Android & iOS & Desktop
 - **🔧 Model Flexibility** - Support for FLUX, SDXL, SD3, and many more
-- **⚡ Hardware Accelerated** - Vulkan 1.2+ (Android/Linux/Windows) & Metal (macOS)
-- **🏷️ Embedded Metadata** - Automatically saves generation parameters (prompts, seeds, etc.) directly into exported PNGs
+- **⚡ Hardware Accelerated** - Vulkan 1.2+ (Android/Linux/Windows) & Metal (macOS/iOS)
+- **🧩 Extensions & Plugins** - Full support for external LoRA models (`.safetensors`) offering stylized output
+- **🛠  Power Features** - Batch Image Generation, Flash Attention, Multi-step Samplers, Direct Convolution
+- **🏷️ Embedded Metadata** - Automatically saves generation parameters (prompts, seeds, dimensions, models, loras) directly into exported PNGs
 
 ---
 
@@ -99,14 +101,20 @@ _Best for high-detail 1024x1024+ generation. Requires more VRAM and time._
 
 ## 🌟 Key Features
 
-### Text-to-Image Generation
-Generate stunning images from text descriptions with various models
+### Text-to-Image / Batch Generation
+Generate single or multiple stunning images from text descriptions with various models synchronously.
 
 ```
 Input: "A serene mountain landscape at sunset, digital art"
-Output: High-quality AI-generated image
+Output: High-quality AI-generated image(s) with progress indicator
 ```
 
+### 🧩 LoRA Integration
+Effortlessly stylize generations by utilizing multiple `.safetensors` LoRA files with completely customizable strength dials directly from the sleek UI settings.
+
+### 📊 Transparent Sampler Algorithms
+Choose the perfect algorithm for your workflow directly on device (e.g. Euler, Euler a, DPM++ 2M, DDIM, LCM, TCD, and more) to master the noise-canceling mechanics.
+
 ### ⚙️ Advanced Settings Guide
 
 The **Advanced Settings** page provides fine-grained control over the inference engine. Below is a summary of each toggle and its impact:

composeApp/src/commonMain/kotlin/org/onion/diffusion/ui/screen/HomeScreen.kt

@@ -16,6 +16,7 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -336,7 +337,7 @@ private fun ChatMessagesList(chatMessages: List<ChatMessage>,snackbarHostState:
                 .padding(top = 70.dp, bottom = 90.dp),
             verticalArrangement = Arrangement.spacedBy(12.dp)
         ) {
-            items(chatMessages) { message ->
+            items(chatMessages, key = { it.id }) { message ->
                 Box(
                     modifier = Modifier
                         .fillMaxWidth()
@@ -373,7 +374,8 @@ private fun ChatMessagesList(chatMessages: List<ChatMessage>,snackbarHostState:
                             coroutineScope.launch {
                                 snackbarHostState.showSnackbar(getString(Res.string.text_copied))
                             }
-                        }
+                        },
+                        metadata = message.metadata
                     )
                 }
             }
@@ -568,7 +570,8 @@ fun ChatBubble(
     isUser: Boolean,
     onSaveImage: ((ByteArray) -> Unit)? = null,
     onRegenerate: (() -> Unit)? = null,
-    onCopyText: ((String) -> Unit)? = null
+    onCopyText: ((String) -> Unit)? = null,
+    metadata: Map<String, String>? = null
 ) {
     Box(
         modifier = Modifier.fillMaxWidth()
@@ -600,7 +603,8 @@ fun ChatBubble(
                 isUser = isUser,
                 onSaveImage = onSaveImage,
                 onRegenerate = onRegenerate,
-                onCopyText = onCopyText
+                onCopyText = onCopyText,
+                metadata = metadata
             )
         }
     }
@@ -660,12 +664,13 @@ private fun ChatBubbleMessage(
     isUser: Boolean,
     onSaveImage: ((ByteArray) -> Unit)? = null,
     onRegenerate: (() -> Unit)? = null,
-    onCopyText: ((String) -> Unit)? = null
+    onCopyText: ((String) -> Unit)? = null,
+    metadata: Map<String, String>? = null
 ) {
     if (isUser) {
         UserMessage(message = message, image = image, onCopyText = onCopyText)
     } else {
-        AiMessage(message = message, image = image, onSaveImage = onSaveImage, onRegenerate = onRegenerate, onCopyText = onCopyText)
+        AiMessage(message = message, image = image, onSaveImage = onSaveImage, onRegenerate = onRegenerate, onCopyText = onCopyText, metadata = metadata)
     }
 }
 
@@ -716,7 +721,8 @@ private fun AiMessage(
     image: ByteArray? = null,
     onSaveImage: ((ByteArray) -> Unit)? = null,
     onRegenerate: (() -> Unit)? = null,
-    onCopyText: ((String) -> Unit)? = null
+    onCopyText: ((String) -> Unit)? = null,
+    metadata: Map<String, String>? = null
 ) {
     Column(modifier = Modifier.fillMaxWidth()) {
         // 当消息为空且无图片时，显示创意加载动画
@@ -726,15 +732,28 @@ private fun AiMessage(
             // 正常显示逻辑
             if (image != null) {
                 Box(modifier = Modifier.wrapContentSize()) {
+                    // Try to pre-calculate aspect ratio to prevent layout shifts
+                    val widthStr = metadata?.get("width")
+                    val heightStr = metadata?.get("height")
+                    val imgModifier = Modifier
+                        .padding(bottom = 4.dp)
+                        .clip(RoundedCornerShape(8.dp))
+                        .let { m ->
+                            if (widthStr != null && heightStr != null && widthStr.toFloatOrNull() != null && heightStr.toFloatOrNull() != null) {
+                                val w = widthStr.toFloat()
+                                val h = heightStr.toFloat()
+                                m.aspectRatio(w / h)
+                            } else {
+                                m.wrapContentSize()
+                            }
+                        }
+
                     AsyncImage(
                         model = image,
                         contentDescription = stringResource(Res.string.ai_image),
                         alignment = Alignment.Center,
-                        contentScale = ContentScale.Inside,
-                        modifier = Modifier
-                            .clip(RoundedCornerShape(8.dp))
-                            .wrapContentSize()
-                            .padding(bottom = 4.dp)
+                        contentScale = ContentScale.Fit,
+                        modifier = imgModifier
                     )
                     // Premium Action Bar Overlay
                     Row(

composeApp/src/commonMain/kotlin/org/onion/diffusion/viewmodel/ChatViewModel.kt

@@ -299,6 +299,8 @@ class ChatViewModel  : ViewModel() {
                                 "cfg_scale" to cfgScale.value.toString(),
                                 "seed" to Clock.System.now().toEpochMilliseconds().toString(), // Note: verify if we should use the same seed as generation
                                 "model" to diffusionModelPath.value.substringAfterLast("/"),
+                                "width" to imageWidth.value.toString(),
+                                "height" to imageHeight.value.toString(),
                                  "loras" to enabledLoras.joinToString(",") { "${it.name}:${it.strength}" }
                             )
 

data-model/src/commonMain/kotlin/com/onion/model/ChatMessage.kt

@@ -1,9 +1,27 @@
 package com.onion.model
 
+import kotlin.random.Random
+
 data class ChatMessage(
         val message: String,
         val isUser: Boolean,
         val image: ByteArray? = null,
         val videoFrames: List<ByteArray>? = null,
-        val metadata: Map<String, String>? = null
-)
+        val metadata: Map<String, String>? = null,
+        val id: Long = Random.nextLong()
+) {
+        override fun equals(other: Any?): Boolean {
+                if (this === other) return true
+                if (other == null || this::class != other::class) return false
+
+                other as ChatMessage
+
+                if (id != other.id) return false
+
+                return true
+        }
+
+        override fun hashCode(): Int {
+                return id.hashCode()
+        }
+}