happyz
/
llama.cpp
mirror of https://github.com/ggerganov/llama.cpp.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

misc: UI polish

This commit is contained in:
Han Yin 2025-06-27 12:02:44 -07:00
parent d211c4c605
commit 8c6e449ad2
4 changed files with 135 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
examples/llama.android/app/src/main/java/com/example/llama/MainActivity.kt
View File

@ -504,13 +504,6 @@ fun AppContent(
) )
} }
// Settings General Screen
composable(AppDestinations.SETTINGS_GENERAL_ROUTE) {
SettingsGeneralScreen(
viewModel = settingsViewModel
)
}
// Models Management Screen // Models Management Screen
composable(AppDestinations.MODELS_MANAGEMENT_ROUTE) { composable(AppDestinations.MODELS_MANAGEMENT_ROUTE) {
ModelsManagementScreen( ModelsManagementScreen(
@ -518,6 +511,13 @@ fun AppContent(
viewModel = modelsManagementViewModel viewModel = modelsManagementViewModel
) )
} }
// General Settings Screen
composable(AppDestinations.SETTINGS_GENERAL_ROUTE) {
SettingsGeneralScreen(
viewModel = settingsViewModel
)
}
} }
} }
} }

34
examples/llama.android/app/src/main/java/com/example/llama/data/preferences/UserPreferences.kt
View File

@ -23,16 +23,18 @@ class UserPreferences @Inject constructor (
) { ) {
companion object { companion object {
private val Context.dataStore: DataStore<Preferences> by preferencesDataStore(name = "settings")
// Performance monitoring preferences // Performance monitoring preferences
val PERFORMANCE_MONITORING_ENABLED = booleanPreferencesKey("performance_monitoring_enabled") private const val DATASTORE_SETTINGS = "settings"
val USE_FAHRENHEIT_TEMPERATURE = booleanPreferencesKey("use_fahrenheit_temperature") private val Context.settingsDataStore: DataStore<Preferences>
val MONITORING_INTERVAL_MS = longPreferencesKey("monitoring_interval_ms") by preferencesDataStore(name = DATASTORE_SETTINGS)
val THEME_MODE = intPreferencesKey("theme_mode")
// Default values private val PERFORMANCE_MONITORING_ENABLED = booleanPreferencesKey("performance_monitoring_enabled")
const val DEFAULT_MONITORING_INTERVAL_MS = 5000L private val USE_FAHRENHEIT_TEMPERATURE = booleanPreferencesKey("use_fahrenheit_temperature")
private val MONITORING_INTERVAL_MS = longPreferencesKey("monitoring_interval_ms")
private val THEME_MODE = intPreferencesKey("theme_mode")
// Constants
private const val DEFAULT_MONITORING_INTERVAL_MS = 5000L
// Theme mode values // Theme mode values
const val THEME_MODE_AUTO = 0 const val THEME_MODE_AUTO = 0
@ -44,7 +46,7 @@ class UserPreferences @Inject constructor (
* Gets whether performance monitoring is enabled. * Gets whether performance monitoring is enabled.
*/ */
fun isPerformanceMonitoringEnabled(): Flow<Boolean> { fun isPerformanceMonitoringEnabled(): Flow<Boolean> {
return context.dataStore.data.map { preferences -> return context.settingsDataStore.data.map { preferences ->
preferences[PERFORMANCE_MONITORING_ENABLED] != false preferences[PERFORMANCE_MONITORING_ENABLED] != false
} }
} }
@ -53,7 +55,7 @@ class UserPreferences @Inject constructor (
* Sets whether performance monitoring is enabled. * Sets whether performance monitoring is enabled.
*/ */
suspend fun setPerformanceMonitoringEnabled(enabled: Boolean) { suspend fun setPerformanceMonitoringEnabled(enabled: Boolean) {
context.dataStore.edit { preferences -> context.settingsDataStore.edit { preferences ->
preferences[PERFORMANCE_MONITORING_ENABLED] = enabled preferences[PERFORMANCE_MONITORING_ENABLED] = enabled
} }
} }
@ -62,7 +64,7 @@ class UserPreferences @Inject constructor (
* Gets whether temperature should be displayed in Fahrenheit. * Gets whether temperature should be displayed in Fahrenheit.
*/ */
fun usesFahrenheitTemperature(): Flow<Boolean> { fun usesFahrenheitTemperature(): Flow<Boolean> {
return context.dataStore.data.map { preferences -> return context.settingsDataStore.data.map { preferences ->
preferences[USE_FAHRENHEIT_TEMPERATURE] == true preferences[USE_FAHRENHEIT_TEMPERATURE] == true
} }
} }
@ -71,7 +73,7 @@ class UserPreferences @Inject constructor (
* Sets whether temperature should be displayed in Fahrenheit. * Sets whether temperature should be displayed in Fahrenheit.
*/ */
suspend fun setUseFahrenheitTemperature(useFahrenheit: Boolean) { suspend fun setUseFahrenheitTemperature(useFahrenheit: Boolean) {
context.dataStore.edit { preferences -> context.settingsDataStore.edit { preferences ->
preferences[USE_FAHRENHEIT_TEMPERATURE] = useFahrenheit preferences[USE_FAHRENHEIT_TEMPERATURE] = useFahrenheit
} }
} }
@ -82,7 +84,7 @@ class UserPreferences @Inject constructor (
* TODO-han.yin: replace with Enum value instead of millisecond value * TODO-han.yin: replace with Enum value instead of millisecond value
*/ */
fun getMonitoringInterval(): Flow<Long> { fun getMonitoringInterval(): Flow<Long> {
return context.dataStore.data.map { preferences -> return context.settingsDataStore.data.map { preferences ->
preferences[MONITORING_INTERVAL_MS] ?: DEFAULT_MONITORING_INTERVAL_MS preferences[MONITORING_INTERVAL_MS] ?: DEFAULT_MONITORING_INTERVAL_MS
} }
} }
@ -91,7 +93,7 @@ class UserPreferences @Inject constructor (
* Sets the monitoring interval in milliseconds. * Sets the monitoring interval in milliseconds.
*/ */
suspend fun setMonitoringInterval(intervalMs: Long) { suspend fun setMonitoringInterval(intervalMs: Long) {
context.dataStore.edit { preferences -> context.settingsDataStore.edit { preferences ->
preferences[MONITORING_INTERVAL_MS] = intervalMs preferences[MONITORING_INTERVAL_MS] = intervalMs
} }
} }
@ -100,7 +102,7 @@ class UserPreferences @Inject constructor (
* Gets the current theme mode. * Gets the current theme mode.
*/ */
fun getThemeMode(): Flow<Int> { fun getThemeMode(): Flow<Int> {
return context.dataStore.data.map { preferences -> return context.settingsDataStore.data.map { preferences ->
preferences[THEME_MODE] ?: THEME_MODE_AUTO preferences[THEME_MODE] ?: THEME_MODE_AUTO
} }
} }
@ -109,7 +111,7 @@ class UserPreferences @Inject constructor (
* Sets the theme mode. * Sets the theme mode.
*/ */
suspend fun setThemeMode(mode: Int) { suspend fun setThemeMode(mode: Int) {
context.dataStore.edit { preferences -> context.settingsDataStore.edit { preferences ->
preferences[THEME_MODE] = mode preferences[THEME_MODE] = mode
} }
} }

14
examples/llama.android/app/src/main/java/com/example/llama/ui/scaffold/NavigationDrawer.kt
View File

@ -147,19 +147,19 @@ private fun DrawerContent(
modifier = Modifier.padding(start = 8.dp, bottom = 8.dp) modifier = Modifier.padding(start = 8.dp, bottom = 8.dp)
) )
DrawerNavigationItem(
icon = Icons.Default.Settings,
label = "General Settings",
isSelected = currentRoute == AppDestinations.SETTINGS_GENERAL_ROUTE,
onClick = { onNavigate { navigationActions.navigateToSettingsGeneral() } }
)
DrawerNavigationItem( DrawerNavigationItem(
icon = Icons.Default.Folder, icon = Icons.Default.Folder,
label = "Models", label = "Models",
isSelected = currentRoute == AppDestinations.MODELS_MANAGEMENT_ROUTE, isSelected = currentRoute == AppDestinations.MODELS_MANAGEMENT_ROUTE,
onClick = { onNavigate { navigationActions.navigateToModelsManagement() } } onClick = { onNavigate { navigationActions.navigateToModelsManagement() } }
) )
DrawerNavigationItem(
icon = Icons.Default.Settings,
label = "General Settings",
isSelected = currentRoute == AppDestinations.SETTINGS_GENERAL_ROUTE,
onClick = { onNavigate { navigationActions.navigateToSettingsGeneral() } }
)
} }
} }

50
examples/llama.android/app/src/main/java/com/example/llama/ui/screens/SettingsGeneralScreen.kt
View File

@ -55,6 +55,12 @@ fun SettingsGeneralScreen(
onCheckedChange = { viewModel.setMonitoringEnabled(it) } onCheckedChange = { viewModel.setMonitoringEnabled(it) }
) )
Spacer(modifier = Modifier.height(8.dp))
HorizontalDivider()
Spacer(modifier = Modifier.height(8.dp))
SettingsSwitch( SettingsSwitch(
title = "Use Fahrenheit", title = "Use Fahrenheit",
description = "Display temperature in Fahrenheit instead of Celsius", description = "Display temperature in Fahrenheit instead of Celsius",
@ -64,11 +70,6 @@ fun SettingsGeneralScreen(
} }
SettingsCategory(title = "Theme") { SettingsCategory(title = "Theme") {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
) {
Text( Text(
text = "Theme Mode", text = "Theme Mode",
style = MaterialTheme.typography.titleMedium style = MaterialTheme.typography.titleMedium
@ -76,7 +77,7 @@ fun SettingsGeneralScreen(
Text( Text(
text = "Follow system setting or override with your choice", text = "Follow system setting or override with your choice",
style = MaterialTheme.typography.bodySmall, style = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant color = MaterialTheme.colorScheme.onSurfaceVariant
) )
@ -110,16 +111,12 @@ fun SettingsGeneralScreen(
} }
} }
} }
}
// ARM Features Visualizer with Tier Information description // ARM Features Visualizer with Tier Information description
SettingsCategory(title = "About your device") { SettingsCategory(title = "About your device") {
Column(
modifier = Modifier.padding(16.dp)
) {
Text( Text(
text = "ARM Capabilities", text = "ARM Capabilities",
style = MaterialTheme.typography.titleLarge style = MaterialTheme.typography.titleMedium
) )
Text( Text(
@ -137,7 +134,7 @@ fun SettingsGeneralScreen(
Text( Text(
text = "Optimization Tier: ${tier.name}", text = "Optimization Tier: ${tier.name}",
style = MaterialTheme.typography.bodyLarge style = MaterialTheme.typography.titleMedium
) )
Text( Text(
@ -148,15 +145,11 @@ fun SettingsGeneralScreen(
) )
} }
} }
}
SettingsCategory(title = "About this app") { SettingsCategory(title = "About this app") {
Column(
modifier = Modifier.padding(16.dp)
) {
Text( Text(
text = APP_NAME, text = APP_NAME,
style = MaterialTheme.typography.titleLarge style = MaterialTheme.typography.titleMedium
) )
Text( Text(
@ -169,12 +162,11 @@ fun SettingsGeneralScreen(
Text( Text(
text = "Local inference for LLM models on your device powered by Arm® technologies.", text = "Local inference for LLM models on your device powered by Arm® technologies.",
style = MaterialTheme.typography.bodyLarge style = MaterialTheme.typography.bodyMedium
) )
} }
} }
} }
}
@Composable @Composable
fun SettingsCategory( fun SettingsCategory(
@ -182,20 +174,16 @@ fun SettingsCategory(
content: @Composable () -> Unit content: @Composable () -> Unit
) { ) {
Column( Column(
modifier = Modifier modifier = Modifier.fillMaxWidth().padding(vertical = 8.dp)
.fillMaxWidth()
.padding(vertical = 8.dp)
) { ) {
Text( Text(
text = title, text = title,
style = MaterialTheme.typography.titleMedium, style = MaterialTheme.typography.labelLarge,
modifier = Modifier.padding(bottom = 8.dp) modifier = Modifier.padding(bottom = 8.dp)
) )
Card( Card(modifier = Modifier.fillMaxWidth()) {
modifier = Modifier.fillMaxWidth() Column( modifier = Modifier.fillMaxWidth().padding(16.dp)) {
) {
Column {
content() content()
} }
} }
@ -210,11 +198,6 @@ fun SettingsSwitch(
description: String, description: String,
checked: Boolean, checked: Boolean,
onCheckedChange: (Boolean) -> Unit onCheckedChange: (Boolean) -> Unit
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
) { ) {
Row( Row(
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
@ -241,6 +224,3 @@ fun SettingsSwitch(
) )
} }
} }
HorizontalDivider()
}