[프로젝트] 지역 공공 포스터를 포스팅해보자. 3) 갤러리에서 이미지를 불러오기

화면 구성은 단순하게 처리했다. 네이버로 로그인을 먼저 하고, accesstoken을 받았다면, 갤러리에서 이미지 선택 버튼을 눌러서 갤러리를 열고 이미지를 선택하면 알아서 chatGPT api와 네이버 카페 api로 인자를 전달한다.

아래는 코드. 주석에 간단하게 설명 달았으니 참고하면 될 것 같다.

MainActivity.kt

class MainActivity : ComponentActivity() {
    // 선택한 이미지의 URI를 저장하는 변수
    private var imageUri by mutableStateOf<Uri?>(null)
    // 갤러리에서 이미지를 선택하기 위해 시작된 activity의 결과를 처리하기 위한 ActivityResultLauncher
    private lateinit var resultLauncher: ActivityResultLauncher<String>

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // 결과를 처리하기 위한 ActivityResultLauncher 초기화

        resultLauncher = registerForActivityResult(ActivityResultContracts.GetContent()) { uri: Uri? ->
            // 사용자가 이미지를 선택하면, 그 결과를 처리하는 코드
            imageUri = uri
            // 이미지를 Base64 문자열로 변환하여 OpenAI API로 전송
            imageUri?.let {
                // chatGPT API로 이미지를 전송하기 위해 Base64Image로 변환
                val base64Image = convertImageToBase64(it)
                // chatGPT API로 이미지를 처리하기 위한 코드
                ImageProcess(this).imageProcess(base64Image, it)
            }
        }

        // 화면에 표시할 내용을 설정
        setContent {
            PostingAutomationTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    // 화면에 표시할 내용을 생성한다. PipelineView는 이미지를 선택하고, 선택한 이미지를 화면에 표시한다.
                    PipelineView(this, imageUri) { openGallery(imageUri) }
                }
            }
        }
    }

    private fun openGallery(imageUri: Uri?) {
        // 갤러리에서 이미지를 선택하기 위한 코드

        // 갤러리를 열기 위해 resultLauncher의 launch 메서드를 호출한다.
        // "image/*"는 모든 종류의 이미지를 선택할 수 있음을 나타낸다.
        resultLauncher.launch("image/*")
    }

    private fun convertImageToBase64(imageUri: Uri): String {
        // 이미지의 URI를 사용하여 Bitmap 가져오기
        val inputStream = contentResolver.openInputStream(imageUri)
        val bitmap = BitmapFactory.decodeStream(inputStream)

        // Bitmap을 ByteArrayOutputStream으로 변환
        val byteArrayOutputStream = ByteArrayOutputStream()
        bitmap.compress(Bitmap.CompressFormat.JPEG, 100, byteArrayOutputStream)

        // ByteArrayOutputStream을 byte array로 변환
        val byteArray = byteArrayOutputStream.toByteArray()

        // byte array를 Base64 문자열로 변환
        return Base64.encodeToString(byteArray, Base64.DEFAULT)
    }
}

@Composable
fun PipelineView(context: Context, imageUri: Uri?, onOpenGalleryClick: () -> Unit) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,

        ) {
        Button(onClick = onOpenGalleryClick) {
            Text("갤러리에서 이미지 선택")
        }
        Spacer(modifier = Modifier.height(8.dp))
        Button(onClick = {
            NaverLogin(context).login()
        }){
            Text(text = "네이버로 로그인하기")
        }

        // 선택한 이미지가 있으면 이미지를 화면에 표시
        // rememberAsyncImagePainter는 이미지를 비동기적으로 로드하여 표시하는 Composable이다.
        // 이미지가 로드되면 화면에 표시된다.
        imageUri?.let {
            Image(painter = rememberAsyncImagePainter(model = it), contentDescription = null)
        }
    }
}