Skip to content

Commit

Permalink
Informações sobre os resultados na tela de resultados
Browse files Browse the repository at this point in the history
  • Loading branch information
ThalesBezerra21 committed Jul 31, 2024
1 parent 78f98d9 commit 8df4042
Show file tree
Hide file tree
Showing 5 changed files with 216 additions and 9 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import java.util.Locale
val benchmarkingModelsLabels = listOf(
//"llama",
"gemma",
"qwen",
//"qwen",
)

class AppViewModel(application: Application) : AndroidViewModel(application) {
Expand Down
7 changes: 3 additions & 4 deletions android/MLCChat/app/src/main/java/ai/mlc/mlcchat/HomeView.kt
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -15,16 +18,13 @@ 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
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
Expand All @@ -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
Expand Down
44 changes: 40 additions & 4 deletions android/MLCChat/app/src/main/java/ai/mlc/mlcchat/ResultView.kt
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -72,6 +79,7 @@ fun ResultView(
.padding(paddingValues)
.fillMaxSize(),
){

Column(
modifier = Modifier
.fillMaxWidth()
Expand All @@ -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,
Expand Down Expand Up @@ -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
))
Expand Down Expand Up @@ -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))
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -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,
)
}
Original file line number Diff line number Diff line change
@@ -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
)
}
}

0 comments on commit 8df4042

Please sign in to comment.