Skip to content

Commit

Permalink
🔀 Merge pull request #13 from snuhcs-course/feat/tts-implementation-f…
Browse files Browse the repository at this point in the history
…rontend

Text-to-speech in the house!
  • Loading branch information
sukchan-0811 authored Oct 29, 2023
2 parents 2c7ced6 + 0b046bb commit 1c9890a
Show file tree
Hide file tree
Showing 8 changed files with 214 additions and 51 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,13 @@ import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import com.example.speechbuddy.compose.emailverification.EmailVerificationScreen
import com.example.speechbuddy.compose.home.HomeScreen
import com.example.speechbuddy.compose.landing.LandingScreen
import com.example.speechbuddy.compose.login.LoginScreen
import com.example.speechbuddy.compose.emailverification.EmailVerificationScreen
import com.example.speechbuddy.compose.resetpassword.ResetPasswordScreen
import com.example.speechbuddy.compose.signup.SignupScreen


@Composable
fun SpeechBuddyApp() {
val navController = rememberNavController()
Expand All @@ -26,9 +25,12 @@ fun SpeechBuddyNavHost(
navController: NavHostController
) {
// val activity = (LocalContext.current as Activity)
NavHost(navController = navController, startDestination = "home") {
NavHost(navController = navController, startDestination = "landing") {
composable("landing") {
LandingScreen(
onGuestClick = {
navController.navigate("home")
},
onLoginClick = {
navController.navigate("login")
}
Expand Down Expand Up @@ -57,7 +59,7 @@ fun SpeechBuddyNavHost(
navController = navController,
)
}
composable("signup/{emailInput}") {backStackEntry ->
composable("signup/{emailInput}") { backStackEntry ->
val emailInput = backStackEntry.arguments?.getString("emailInput")
SignupScreen(
onBackClick = {
Expand All @@ -72,7 +74,6 @@ fun SpeechBuddyNavHost(
navController.navigateUp()
},
onNextClick = {}

)
}
composable("home") {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import com.example.speechbuddy.ui.SpeechBuddyTheme
@Composable
fun LandingScreen(
modifier: Modifier = Modifier,
onGuestClick: () -> Unit,
onLoginClick: () -> Unit,
) {
Surface(modifier = modifier.fillMaxSize(), color = MaterialTheme.colorScheme.primaryContainer) {
Expand All @@ -38,7 +39,8 @@ fun LandingScreen(
) {
ButtonUi(
text = stringResource(id = R.string.guess_mode_action),
onClick = { /*TODO*/ })
onClick = onGuestClick
)
ButtonUi(text = stringResource(id = R.string.login_action), onClick = onLoginClick)
}
}
Expand All @@ -49,6 +51,6 @@ fun LandingScreen(
@Composable
private fun LandingScreenPreview() {
SpeechBuddyTheme {
LandingScreen(onLoginClick = {})
LandingScreen(onGuestClick = {}, onLoginClick = {})
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,15 @@ package com.example.speechbuddy.compose.texttospeech

import androidx.compose.foundation.layout.Arrangement
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.fillMaxSize
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.sizeIn
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.PlayArrow
import androidx.compose.material3.Button
Expand All @@ -22,29 +21,41 @@ import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import com.example.speechbuddy.R
import com.example.speechbuddy.compose.utils.TitleUi
import com.example.speechbuddy.ui.SpeechBuddyTheme
import com.example.speechbuddy.ui.models.ButtonStatusType
import com.example.speechbuddy.viewmodel.TextToSpeechViewModel

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TextToSpeechScreen(
modifier: Modifier = Modifier
viewModel: TextToSpeechViewModel = hiltViewModel()
) {
Surface(modifier = modifier.fillMaxSize()) {
val uiState by viewModel.uiState.collectAsState()
val context = LocalContext.current

Surface(
modifier = Modifier
.fillMaxSize()
) {
Column(
modifier = Modifier
.padding(24.dp)
.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
TitleUi(
title = stringResource(id = R.string.tts_text),
Expand All @@ -54,49 +65,73 @@ fun TextToSpeechScreen(
Spacer(modifier = Modifier.height(20.dp))

OutlinedTextField(
value = "",
onValueChange = {},
value = viewModel.textInput,
onValueChange = {
viewModel.setText(it)
},
modifier = Modifier
.fillMaxWidth()
.sizeIn(minHeight = 300.dp, maxHeight = 500.dp),
.verticalScroll(rememberScrollState())
.height(300.dp),
textStyle = MaterialTheme.typography.bodyMedium,
shape = RoundedCornerShape(10.dp)
shape = RoundedCornerShape(10.dp),
colors = TextFieldDefaults.outlinedTextFieldColors(
focusedBorderColor = MaterialTheme.colorScheme.tertiary,
unfocusedBorderColor = MaterialTheme.colorScheme.outline
)
)

Spacer(modifier = Modifier.height(20.dp))

Button(
onClick = {},
colors = ButtonDefaults.buttonColors(
containerColor = Color.Transparent,
contentColor = MaterialTheme.colorScheme.onBackground
),
contentPadding = PaddingValues(0.dp)
) {
Row(
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically
) {
val textStyle = MaterialTheme.typography.headlineMedium
Text(
text = stringResource(id = R.string.play_text),
style = textStyle
)
Icon(
imageVector = Icons.Filled.PlayArrow,
contentDescription = stringResource(id = R.string.play_text),
modifier = Modifier.size(textStyle.lineHeight.value.dp)
)
}
}
TextToSpeechButton(
buttonStatus = uiState.buttonStatus,
onPlay = { viewModel.ttsStart(context) },
onStop = { viewModel.ttsStop() }
)
}
}
}

@Preview
@Composable
private fun TextToSpeechScreenPreview() {
SpeechBuddyTheme {
TextToSpeechScreen()
private fun TextToSpeechButton(
buttonStatus: ButtonStatusType,
onPlay: () -> Unit,
onStop: () -> Unit
) {
val textToSpeechButtonColors = ButtonDefaults.buttonColors(
containerColor = Color.Transparent,
contentColor = MaterialTheme.colorScheme.onBackground
)

when (buttonStatus) {
ButtonStatusType.PLAY -> Button(
onClick = onPlay,
colors = textToSpeechButtonColors
) {
Text(
style = MaterialTheme.typography.headlineMedium,
text = stringResource(id = R.string.play_text)
)
Icon(
Icons.Filled.PlayArrow,
contentDescription = stringResource(id = R.string.play_text),
modifier = Modifier.size(36.dp)
)
}

ButtonStatusType.STOP -> Button(
onClick = onStop,
colors = textToSpeechButtonColors
) {
Text(
style = MaterialTheme.typography.headlineMedium,
text = stringResource(id = R.string.stop_text)
)
Icon(
painterResource(R.drawable.stop_icon),
contentDescription = stringResource(id = R.string.stop_text),
modifier = Modifier.size(36.dp)
)
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
package com.example.speechbuddy.ui.models

data class TextToSpeechUiState(
val buttonStatus: ButtonStatusType = ButtonStatusType.PLAY
)

enum class ButtonStatusType {
PLAY,
STOP
}
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ class LoginViewModel @Inject internal constructor(
}

fun login() {
if (!isValidEmail(emailInput) && emailInput.isEmpty()) {
if (!isValidEmail(emailInput)) {
_uiState.update { currentState ->
currentState.copy(
isValidEmail = false,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
package com.example.speechbuddy.viewmodel

import android.content.Context
import android.os.Bundle
import android.speech.tts.TextToSpeech
import android.speech.tts.UtteranceProgressListener
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.lifecycle.ViewModel
import com.example.speechbuddy.ui.models.ButtonStatusType
import com.example.speechbuddy.ui.models.TextToSpeechUiState
import dagger.hilt.android.lifecycle.HiltViewModel
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow
import kotlinx.coroutines.flow.asStateFlow
import kotlinx.coroutines.flow.update
import java.util.Locale
import javax.inject.Inject

@HiltViewModel
class TextToSpeechViewModel @Inject internal constructor(
) : ViewModel() {

private val _uiState = MutableStateFlow(TextToSpeechUiState())
val uiState: StateFlow<TextToSpeechUiState> = _uiState.asStateFlow()

private var textToSpeech: TextToSpeech? = null

var textInput by mutableStateOf("")
private set

fun setText(input: String) {
textInput = input
}

private fun clearText() {
textInput = ""
}

fun ttsStop() {
textToSpeech?.stop()
}

fun ttsStart(context: Context) {
// disable button
_uiState.update { currentState ->
currentState.copy(
buttonStatus = ButtonStatusType.STOP
)
}

textToSpeech = TextToSpeech(context) {
if (it == TextToSpeech.SUCCESS) {
textToSpeech?.let { txtToSpeech ->
txtToSpeech.language = Locale.KOREAN
txtToSpeech.setSpeechRate(1.0f)

val params = Bundle()
params.putString(TextToSpeech.Engine.KEY_PARAM_UTTERANCE_ID, "")
txtToSpeech.setOnUtteranceProgressListener(object :
UtteranceProgressListener() {
override fun onStart(utteranceId: String?) {
// Speech has started, button is already disabled
}

override fun onStop(utteranceId: String?, interrupted: Boolean) {
_uiState.update { currentState ->
currentState.copy(
buttonStatus = ButtonStatusType.PLAY
)
}
}

override fun onDone(utteranceId: String?) {
// Speech has finished, re-enable the button
_uiState.update { currentState ->
currentState.copy(
buttonStatus = ButtonStatusType.PLAY
)
}
clearText()
}

@Deprecated("Deprecated in Java")
override fun onError(utteranceId: String?) {
// There was an error, re-enable the button
_uiState.update { currentState ->
currentState.copy(
buttonStatus = ButtonStatusType.PLAY
)
}
}
})

txtToSpeech.speak(
textInput,
TextToSpeech.QUEUE_ADD,
params,
"UniqueID"
)
}
} else {
// Initialization failed, re-enable the button
_uiState.update { currentState ->
currentState.copy(
buttonStatus = ButtonStatusType.PLAY
)
}
}
}
}

}
Binary file added frontend/app/src/main/res/drawable/stop_icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 1c9890a

Please sign in to comment.