feat/Implement TTS feature

frontend/app/src/main/java/com/example/speechbuddy/compose/SpeechBuddyApp.kt

@@ -10,6 +10,7 @@ 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
+import com.example.speechbuddy.compose.texttospeech.TextToSpeechScreen
 
 @Composable
 fun SpeechBuddyApp() {
@@ -29,6 +30,9 @@ fun SpeechBuddyNavHost(
             LandingScreen(
                 onLoginClick = {
                     navController.navigate("login")
+                },
+                onGuestClick = {
+                    navController.navigate("text_to_speech")
                 }
             )
         }
@@ -72,5 +76,8 @@ fun SpeechBuddyNavHost(
                 onNextClick = {}
             )
         }
+        composable("text_to_speech"){
+            TextToSpeechScreen()
+        }
     }
 }

frontend/app/src/main/java/com/example/speechbuddy/compose/landing/LandingScreen.kt

@@ -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) {
@@ -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)
             }
         }
@@ -49,6 +51,6 @@ fun LandingScreen(
 @Composable
 private fun LandingScreenPreview() {
     SpeechBuddyTheme {
-        LandingScreen(onLoginClick = {})
+        LandingScreen(onGuestClick = {}, onLoginClick = {})
     }
 }

frontend/app/src/main/java/com/example/speechbuddy/compose/texttospeech/TextToSpeechScreen.kt

@@ -0,0 +1,138 @@
+package com.example.speechbuddy.compose.texttospeech
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+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.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
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+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.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.models.ButtonStatusType
+import com.example.speechbuddy.viewmodel.TextToSpeechViewModel
+
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun TextToSpeechScreen(
+    viewModel: TextToSpeechViewModel = hiltViewModel()
+) {
+    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,
+        ) {
+            TitleUi(
+                title = stringResource(id = R.string.tts_text),
+                description = stringResource(id = R.string.tts_explain)
+            )
+
+            Spacer(modifier = Modifier.height(20.dp))
+
+            OutlinedTextField(
+                value = viewModel.textInput,
+                onValueChange = {
+                    viewModel.setText(it)
+                },
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .verticalScroll(rememberScrollState())
+                    .height(300.dp),
+                textStyle = MaterialTheme.typography.bodyMedium,
+                shape = RoundedCornerShape(10.dp),
+                colors = TextFieldDefaults.outlinedTextFieldColors(
+                    focusedBorderColor = MaterialTheme.colorScheme.tertiary,
+                    unfocusedBorderColor = MaterialTheme.colorScheme.outline
+                )
+            )
+
+            Spacer(modifier = Modifier.height(20.dp))
+
+            TextToSpeechButton(
+                buttonStatus = uiState.buttonStatus,
+                onPlay = { viewModel.ttsStart(context) },
+                onStop = { viewModel.ttsStop() }
+            )
+        }
+    }
+}
+
+@Composable
+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)
+            )
+        }
+    }
+}

frontend/app/src/main/java/com/example/speechbuddy/ui/models/TextToSpeechUiState.kt

@@ -0,0 +1,10 @@
+package com.example.speechbuddy.ui.models
+
+data class TextToSpeechUiState(
+    val buttonStatus: ButtonStatusType = ButtonStatusType.PLAY
+)
+
+enum class ButtonStatusType {
+    PLAY,
+    STOP
+}

frontend/app/src/main/java/com/example/speechbuddy/viewmodel/TextToSpeechViewModel.kt

@@ -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
+                    )
+                }
+            }
+        }
+    }
+
+}

frontend/app/src/main/res/values/strings.xml

@@ -38,4 +38,8 @@
     <string name="nickname_length_error">닉네임을 입력해주세요</string>
     <string name="alert_dialog_login_error">로그인 오류</string>
     <string name="alert_dialog_signup_error">회원가입 오류</string>
+    <string name="tts_text">소리로 말해보아요</string>
+    <string name="tts_explain">키보드로 텍스트를 입력해주세요</string>
+    <string name="play_text">재생하기</string>
+    <string name="stop_text">정지</string>
 </resources>