From 8df4042574ff447ef4e2c43ac2b593f60556a8af Mon Sep 17 00:00:00 2001 From: ThalesBezerra21 Date: Wed, 31 Jul 2024 17:43:08 -0300 Subject: [PATCH] =?UTF-8?q?Informa=C3=A7=C3=B5es=20sobre=20os=20resultados?= =?UTF-8?q?=20na=20tela=20de=20resultados?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../main/java/ai/mlc/mlcchat/AppViewModel.kt | 2 +- .../src/main/java/ai/mlc/mlcchat/HomeView.kt | 7 +- .../main/java/ai/mlc/mlcchat/ResultView.kt | 44 +++++++- .../ai/mlc/mlcchat/components/Accordion.kt | 100 ++++++++++++++++++ .../java/ai/mlc/mlcchat/components/Chip.kt | 72 +++++++++++++ 5 files changed, 216 insertions(+), 9 deletions(-) create mode 100644 android/MLCChat/app/src/main/java/ai/mlc/mlcchat/components/Accordion.kt create mode 100644 android/MLCChat/app/src/main/java/ai/mlc/mlcchat/components/Chip.kt diff --git a/android/MLCChat/app/src/main/java/ai/mlc/mlcchat/AppViewModel.kt b/android/MLCChat/app/src/main/java/ai/mlc/mlcchat/AppViewModel.kt index d39f5904..242049d7 100644 --- a/android/MLCChat/app/src/main/java/ai/mlc/mlcchat/AppViewModel.kt +++ b/android/MLCChat/app/src/main/java/ai/mlc/mlcchat/AppViewModel.kt @@ -30,7 +30,7 @@ import java.util.Locale val benchmarkingModelsLabels = listOf( //"llama", "gemma", - "qwen", + //"qwen", ) class AppViewModel(application: Application) : AndroidViewModel(application) { diff --git a/android/MLCChat/app/src/main/java/ai/mlc/mlcchat/HomeView.kt b/android/MLCChat/app/src/main/java/ai/mlc/mlcchat/HomeView.kt index 1824693c..f0e273ed 100644 --- a/android/MLCChat/app/src/main/java/ai/mlc/mlcchat/HomeView.kt +++ b/android/MLCChat/app/src/main/java/ai/mlc/mlcchat/HomeView.kt @@ -1,5 +1,8 @@ package ai.mlc.mlcchat +import ai.mlc.mlcchat.components.AccordionItem +import ai.mlc.mlcchat.components.AccordionText +import ai.mlc.mlcchat.components.Chip import ai.mlc.mlcchat.components.LoadingTopBottomIndicator import android.content.Context import androidx.compose.foundation.Image @@ -15,8 +18,6 @@ import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size -import androidx.compose.foundation.layout.width -import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.BarChart @@ -24,7 +25,6 @@ import androidx.compose.material.icons.filled.Chat import androidx.compose.material3.Button import androidx.compose.material3.AlertDialog import androidx.compose.material3.ButtonDefaults -import androidx.compose.material3.CircularProgressIndicator import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text @@ -37,7 +37,6 @@ import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.layout.ContentScale diff --git a/android/MLCChat/app/src/main/java/ai/mlc/mlcchat/ResultView.kt b/android/MLCChat/app/src/main/java/ai/mlc/mlcchat/ResultView.kt index 49e6c264..85354af7 100644 --- a/android/MLCChat/app/src/main/java/ai/mlc/mlcchat/ResultView.kt +++ b/android/MLCChat/app/src/main/java/ai/mlc/mlcchat/ResultView.kt @@ -2,7 +2,10 @@ package ai.mlc.mlcchat import ai.mlc.mlcchat.api.PostResult import ai.mlc.mlcchat.api.postResult +import ai.mlc.mlcchat.components.AccordionItem +import ai.mlc.mlcchat.components.AccordionText import ai.mlc.mlcchat.components.AppTopBar +import ai.mlc.mlcchat.components.Chip import ai.mlc.mlcchat.interfaces.BenchmarkingResult import ai.mlc.mlcchat.utils.benchmark.system.getPhoneData import android.util.Log @@ -21,14 +24,18 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.verticalScroll +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.Warning import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect +import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign @@ -72,6 +79,7 @@ fun ResultView( .padding(paddingValues) .fillMaxSize(), ){ + Column( modifier = Modifier .fillMaxWidth() @@ -81,6 +89,24 @@ fun ResultView( horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(15.dp) ) { + + AccordionItem( + modifier = Modifier.fillMaxWidth(0.8f), + title = "Help" + ){ + AccordionItem(title = "What is prefill?") { + AccordionText( + text = "Prefill tok/s measures how many tokens the model can process per second during this initial setup phase." + ) + } + AccordionItem(title = "What is decode?") { + AccordionText( + text = "Decode tok/s measures how many tokens the model can generate per second during this decoding phase." + ) + } + Chip(text = "std = Standard deviation") + } + results.map { ResultCard( result = it, @@ -112,21 +138,24 @@ fun ResultCard( val context = LocalContext.current val samples = result.samples + val prefill = remember { samples.prefill.getMeasurements() } + val decode = remember { samples.decode.getMeasurements() } + LaunchedEffect(Unit) { if(!postResults) return@LaunchedEffect val power = getPowerConsumption(result, resultViewModel.getIdleSamples()) val energy = getEnergyConsumption(result, resultViewModel.getIdleSamples()) - + postResult(PostResult( phone = getPhoneData(context), load_time = result.loadTime?.toInt(), ram = samples.ram.getMeasurements(), cpu = samples.cpu.getMeasurements(), gpu = samples.gpu.getMeasurements(), - decode = samples.decode.getMeasurements(), - prefill = samples.prefill.getMeasurements(), + decode = decode, + prefill = prefill, energyAverage = if(!energy.isNaN()) energy else null, powerAverage = if(!power.isNaN()) power else null )) @@ -159,7 +188,14 @@ fun ResultCard( } ResultTable(result = result, resultViewModel = resultViewModel) - + + if(prefill.median.isNaN() || decode.median.isNaN()){ + Chip( + text = "Tok/s values not measured", + icon = Icons.Default.Warning + ) + } + Spacer(modifier = Modifier.height(15.dp)) } } diff --git a/android/MLCChat/app/src/main/java/ai/mlc/mlcchat/components/Accordion.kt b/android/MLCChat/app/src/main/java/ai/mlc/mlcchat/components/Accordion.kt new file mode 100644 index 00000000..8acd6bea --- /dev/null +++ b/android/MLCChat/app/src/main/java/ai/mlc/mlcchat/components/Accordion.kt @@ -0,0 +1,100 @@ +package ai.mlc.mlcchat.components + +import androidx.compose.animation.AnimatedVisibility +import androidx.compose.foundation.background +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.KeyboardArrowDown +import androidx.compose.material.icons.filled.KeyboardArrowUp +import androidx.compose.material3.Icon +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.dp +import androidx.compose.runtime.getValue +import androidx.compose.runtime.setValue +import androidx.compose.ui.Alignment +import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.Shape +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.font.Font +import androidx.compose.ui.text.font.FontWeight + +@Composable +fun AccordionItem( + modifier: Modifier = Modifier, + isExpanded: Boolean = false, + backgroundColor: Color = Color.Transparent, + shape: Shape = RoundedCornerShape(10.dp), + title: String, + titleModifier: Modifier = Modifier, + iconModifier: Modifier = Modifier, + titleColor: Color = MaterialTheme.colorScheme.onSecondary, + titleStyle: TextStyle = MaterialTheme.typography.bodyMedium, + titleWeight: FontWeight = FontWeight.SemiBold, + content: @Composable () -> Unit +) { + var expanded by remember { mutableStateOf(isExpanded) } + + Column( + modifier = modifier + .fillMaxWidth() + .clip(shape) + .background(backgroundColor) + .clickable { + expanded = !expanded + } + .padding(16.dp) + ) { + Row( + verticalAlignment = Alignment.CenterVertically, + modifier = Modifier.fillMaxWidth() + ) { + Text( + modifier = titleModifier.weight(1f), + color = titleColor, + text = title, + style = titleStyle, + fontWeight = titleWeight, + ) + Icon( + modifier = iconModifier, + imageVector = if (expanded) Icons.Default.KeyboardArrowUp else Icons.Default.KeyboardArrowDown, + contentDescription = if (expanded) "Collapse" else "Expand", + tint = titleColor + ) + } + AnimatedVisibility(visible = expanded) { + Column { + Spacer(modifier = Modifier.height(8.dp)) + content() + } + } + } +} + +@Composable +fun AccordionText( + modifier: Modifier = Modifier, + text: String, + color: Color = MaterialTheme.colorScheme.onPrimary, + style: TextStyle = MaterialTheme.typography.bodySmall +){ + Text( + modifier = modifier, + text = text, + color = color, + style = style, + ) +} diff --git a/android/MLCChat/app/src/main/java/ai/mlc/mlcchat/components/Chip.kt b/android/MLCChat/app/src/main/java/ai/mlc/mlcchat/components/Chip.kt new file mode 100644 index 00000000..0b2601e0 --- /dev/null +++ b/android/MLCChat/app/src/main/java/ai/mlc/mlcchat/components/Chip.kt @@ -0,0 +1,72 @@ +package ai.mlc.mlcchat.components + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.Star +import androidx.compose.material3.Icon +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.Shape +import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.unit.dp + + +@Composable +fun Chip( + modifier: Modifier = Modifier, + backgroundColor: Color = MaterialTheme.colorScheme.primary, + shape: Shape = RoundedCornerShape(10.dp), + + textModifier: Modifier = Modifier, + textPaddingValues: PaddingValues = PaddingValues(10.dp), + textColor: Color = MaterialTheme.colorScheme.onPrimary, + fontWeight: FontWeight = FontWeight.SemiBold, + textStyle: TextStyle = MaterialTheme.typography.bodySmall, + text: String, + + icon: ImageVector? = null, // Default icon, can be customized + iconDescription: String = "Chip icon", + iconModifier: Modifier = Modifier.size(16.dp), // Default size, can be customized + iconTint: Color = textColor // Default tint same as text color, can be customized +) { + Row( + modifier = modifier + .clip(shape) + .background(backgroundColor) + .padding(textPaddingValues), + verticalAlignment = Alignment.CenterVertically + ) { + if(icon !== null) { + Icon( + imageVector = icon, + contentDescription = iconDescription, + tint = iconTint, + modifier = iconModifier + ) + Spacer(modifier = Modifier.width(4.dp)) + } + + Text( + modifier = textModifier, + text = text, + fontWeight = fontWeight, + color = textColor, + style = textStyle + ) + } +} \ No newline at end of file