ChatGPTアプリで表を出力させる - Markdown Text for Android JetpackCompose

ChatGPT は Markdown 出力することができますよね。

それを Jetpack Compose で表示させましょう。

ChatGPTアプリで表を出力させる - Markdown Text for Android JetpackCompose

すごく分かりやすいですね。



以下のライブラリを使いました。

👉 jeziellago/compose-markdown: Markdown Text for Android Jetpack Compose 📋. hatena-bookmark

利用記述はシンプルに作成されています。


@Composable  
fun ComplexExampleContent() {  
  MarkdownText(
    modifier = Modifier.padding(8.dp),
    markdown = markdown,
    textAlign = TextAlign.Center,
    fontSize = 12.sp,
    color = LocalContentColor.current,
    maxLines = 3,
    fontResource = R.font.montserrat_medium,
    style = MaterialTheme.typography.overline,
  )  
}

続いて、Markdown で Mermaid や Planet UML で図を出力もできそうです。

ちなみに、このライブラリは、さらに以下のライブラリたちに順に依存しています。

👉 Markwon/app-sample at master · noties/Markwon hatena-bookmark
👉 CommonMark hatena-bookmark


Android JetpackCompose での OptionMenu - Alternative for OptionMenu in JetpackCompose

Android JetpackCompose で TopAppBar に入れるべく「メニューボタン」をどうするか。

こんな感じになりました。

今現在は、この　Box + DropDownMenu でいこうかと思っています。

以下記事から。

A DropdownMenu behaves similarly to a Popup, and will use the position of the parent layout to position itself on screen. Commonly a DropdownMenu will be placed in a Box with a sibling that will be used as the 'anchor'.

DropdownMenu は Popup と同様の動作をし、親レイアウトの位置を利用して画面上に配置されます。DropdownMenu
は「アンカー」として使用される兄弟を持つ Box に配置されます。

👉 android - Jetpack compose popup menu - Stack Overflow hatena-bookmark


@Composable
fun MenuButton() {

  val context = LocalContext.current
  var expanded by remember { mutableStateOf(false) }

  Box {

    IconButton(onClick = { expanded = true }) {
      Icon(Icons.Filled.MoreVert, null)
    }

    DropdownMenu(
      expanded = expanded,
      onDismissRequest = { expanded = false },
    ) {
      DropdownMenuItem(
        onClick = {
          expanded = false
          context.startActivity(
            Intent(Intent.ACTION_VIEW, Uri.parse("https://platform.openai.com/account/usage"))
          )
        }
      ) {
        Text(text = "Usage")
      }
      Divider()
      DropdownMenuItem(onClick = {
        expanded = false
        context.startActivity(
          Intent(Intent.ACTION_VIEW, Uri.parse("https://platform.openai.com/docs/api-reference"))
        )
      }) {
        Text(text = "API reference")
      }
    }

  }

}

こんなところでしょうか。

TopAppBar にセットするなら、以下のように action へ。


TopAppBar(
  title = { Text("Simple TopAppBar") },
  navigationIcon = {
    IconButton(onClick = { /* doSomething() */ }) {
      Icon(Icons.Filled.Menu, contentDescription = null)
    }
  },
  actions = {
    MenuButton()
  }
)

汎用性を上げるなら引数を考慮して、label と action のペアのリストを渡してループ、などするとよいです。

👉 DropdownMenu | androidx.compose.material  |  Android Developers hatena-bookmark


OpenAI ChatGPT の API_KEY を取得する方法

アカウント作成している方は取得できます。

以下のリンクにアクセスしてコピーです。

👉 Account API Keys - OpenAI API hatena-bookmark

OpenAI ChatGPT の API_KEY を取得する

あとは必要とする入力欄にペーストすればOKです。