はじめに

はじめまして、Hridoy Chandra Das(リド)（）です。

Google Gemini AI Model を使用してAndroidの簡単なアプリケーションを作成する方法を学びたいと思います。

Androidアプリのアーキテクチャ（MVVM）を使用したGemini AI搭載のAIチャットボットの構築方法について、丁寧にご紹介いたします。

Gemini AI モデルとは

Google Gemini AI モデルは、Googleが開発した自然言語処理のための先進的なモデルです。Geminiは、大規模なデータセットを用いて訓練され、人間のような文章を生成することができます。Geminiは、様々なタスクに応用できる汎用的なモデルであり、チャットボット、テキスト生成、質問応答システムなどのアプリケーションに使用されています。

「Gemini」は、当社の1.0 Proモデルを特に調整したバージョンと共に、現在40以上の言語で利用可能であり、230以上の国と地域で利用できます。
日本語で質問すれば日本語で答えてくれます。

Gemini Proの価格設定

現在、開発者はGoogle AI Studioを通じて、最大60リクエスト/分まで無料でGemini ProとGemini Pro Visionにアクセスできます。これにより、ほとんどのアプリ開発ニーズに適しています。Vertex AIの開発者は、来年初めの一般提供まで、同じモデルと同じレート制限で、無料で試すことができます。その後、Google AI StudioとVertex AIの両方で、1,000文字または1枚の画像あたりに料金が発生します。

新プロジェクトを作成

アプリテンプレート：BaseTemplateAndroidApp を使用して新しいプロジェクトを作成しました。

PackageStructure.md

# パッケージ構造

com.hridoy.chatgemini   # ルートパッケージ
  |
  ├── common              # 共通パッケージ～すべての重要なコンポーネントとユーティリティ
  |   └── utils           # ユーティリティクラス / Kotlin拡張
  |
  ├── data                # データ処理用
  |   └── ChatData        # APIキーの提供と画像付きおよび画像なしのチャット応答の取得
  |
  ├── domain              # ドメイン
  │   └── model           # モデル（チャット）
  │         └── Chat      # チャットデータクラス
  |
  ├── navigation          # ナビゲーション
  |
  ├── presentation        # UI / View、state、およびeventレイヤー
  |   ├── event           # イベント
  |   ├── screens         # すべての画面がここに配置されます
  │   ├── state           # UIの状態
  │   └── viewmodel       # ビューモデル
  |
  ├── theme               # プロジェクトのテーマ
  |
  ├── BaseApp             # プロジェクトベースアプリケーションクラス
  └── MainActivity        # メインアクティビティ

プロジェクトに使うデペンデンシーライブラリー:

build.gradle.kts

  // Gemini AI
  implementation("com.google.ai.client.generativeai:generativeai:0.2.0")
  implementation("io.coil-kt:coil-compose:2.5.0")
  implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.7.0")
  implementation("androidx.compose.material:material-icons-extended:1.6.1")

以下のリンクから取得したAPIキーを使用してください：
https://aistudio.google.com/app/prompts/new_chat

このAPIキーを使用することで、プロジェクトがGemini AIと通信できるようになります。

プロジェクトを構築するには、local.propertiesファイルに次の行を追加する必要があります：

local.properties

API_KEY=YOUR_API_KEY

Chat データクラスを作成

Chat.kt

/**
 * Chat data class
 *
 * @param prompt: String
 * @param bitmap: Bitmap?
 * @param isFromUser: Boolean
 */
data class Chat(
    val prompt: String,
    val bitmap: Bitmap?,
    val isFromUser: Boolean,
)

データレスポンスの取得

警告
今日は例外処理を改善しませんでしたが必要であれば、これを処理してください。

ChatData.kt

object ChatData {
    // Provide your API key here(local.properties) -> API_KEY=YOUR_API_KEY
    val api_key = BuildConfig.API_KEY      //You can use directly

    //画像なしで応答を取得する
    suspend fun getResponse(prompt: String): Chat {
        val generativeModel = GenerativeModel(
            modelName = "gemini-pro",
            apiKey = api_key,
        )

        try {
            val response = withContext(Dispatchers.IO) {
                generativeModel.generateContent(prompt)
            }

            return Chat(
                prompt = response.text ?: "error",
                bitmap = null,
                isFromUser = false,
            )
        } catch (e: Exception) {
            return Chat(
                prompt = e.message ?: "error",
                bitmap = null,
                isFromUser = false,
            )
        }
    }

    /**
     * Get response with image
     *
     * @param prompt: String
     * @param bitmap: Bitmap
     * @return Chat
     */
     
   //画像付きのレスポンスを取得する
    suspend fun getResponseWithImage(
        prompt: String,
        bitmap: Bitmap,
    ): Chat {
        val generativeModel = GenerativeModel(
            modelName = "gemini-pro-vision",
            apiKey = api_key,
        )

        try {
            val inputContent = content {
                image(bitmap)
                text(prompt)
            }

            val response = withContext(Dispatchers.IO) {
                generativeModel.generateContent(inputContent)
            }

            return Chat(
                prompt = response.text ?: "error",
                bitmap = null,
                isFromUser = false,
            )
        } catch (e: Exception) {
            return Chat(
                prompt = e.message ?: "error",
                bitmap = null,
                isFromUser = false,
            )
        }
    }
}

UIイベントを作成

ChatUiEvent.kt

/**
 * Chat UI event
 */
sealed class ChatUiEvent {
    data class UpdatePrompt(val newPrompt: String) : ChatUiEvent()

    data class SendPrompt(
        val prompt: String,
        val bitmap: Bitmap?,
    ) : ChatUiEvent()

    // show indicator
    data object ShowIndicator : ChatUiEvent()
}

UI State(状態管理)

ChatState.kt

/**
 * Chat state class
 *
 * @param chatList: MutableList<Chat>
 * @param prompt: String
 * @param bitmap: Bitmap?
 * @param showIndicator: Boolean
 */
data class ChatState(
    val chatList: MutableList<Chat> = mutableListOf(),
    var prompt: String = "",
    val bitmap: Bitmap? = null,
    val showIndicator: Boolean = false,
)

viewModel

このデモンストレーションでは、画像なしと画像付きの応答を取得する方法を使用します。

ChatViewModel.kt

/**
 * Chat view model
 */
class ChatViewModel : ViewModel() {
    private val _chatState = MutableStateFlow(ChatState())
    val chatState = _chatState.asStateFlow()

    /**
     * Handle chat UI event
     *
     * @param event: ChatUiEvent
     */
    fun onEvent(event: ChatUiEvent) {
        when (event) {
            is ChatUiEvent.SendPrompt -> {
                if (event.prompt.isNotEmpty()) {
                    addPrompt(event.prompt, event.bitmap)
                    // Trigger the loading indicator when sending prompt
                    showIndicator()

                    if (event.bitmap != null) {
                        getResponseWithImage(event.prompt, event.bitmap)
                    } else {
                        getResponse(event.prompt)
                    }
                }
            }

            is ChatUiEvent.UpdatePrompt -> {
                _chatState.update {
                    it.copy(prompt = event.newPrompt)
                }
            }

            is ChatUiEvent.ShowIndicator -> {
                showIndicator()
            }
        }
    }
    
    /**
     * Add prompt
     *
     * @param prompt: String
     * @param bitmap: Bitmap?
     */
    private fun addPrompt(
        prompt: String,
        bitmap: Bitmap?,
    ) {
        // Add prompt to chat list
        _chatState.update {
            it.copy(
                chatList = it.chatList.toMutableList().apply {
                    add(0, Chat(prompt, bitmap, true))
                },
                prompt = "",
                bitmap = null,
            )
        }
    }

    /**
     * Get response
     *
     * @param prompt: String
     */
    private fun getResponse(prompt: String) {
        viewModelScope.launch {
            val chat = ChatData.getResponse(prompt)
            _chatState.update {
                it.copy(
                    chatList = it.chatList.toMutableList().apply {
                        add(0, chat)
                    },
                    // Hide loading indicator after response
                    showIndicator = false,
                )
            }
        }
    }

    /**
     * Get response with image
     *
     * @param prompt: String
     * @param bitmap: Bitmap
     */
    private fun getResponseWithImage(
        prompt: String,
        bitmap: Bitmap,
    ) {
        viewModelScope.launch {
            val chat = ChatData.getResponseWithImage(prompt, bitmap)
            _chatState.update {
                it.copy(
                    chatList = it.chatList.toMutableList().apply {
                        add(0, chat)
                    },
                    // Hide loading indicator after response
                    showIndicator = false,
                )
            }
        }
    }

    /**
     * Show indicator
     */
    private fun showIndicator() {
        // Show loading indicator
        _chatState.update {
            it.copy(showIndicator = true)
        }
    }
}

Chat Screen UI作成

Jetpack Composeを使用してビューを作成しました。以下のGitHub Gistをご覧ください。

結果: GitHub サンプル

かなりシンプルです…

以上、最後までお読みいただきありがとうございました。