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



OpenAI ChatGPT の API_KEY を取得する方法

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

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

👉 Account API Keys - OpenAI API hatena-bookmark

OpenAI ChatGPT の API_KEY を取得する

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



ChatGPT の「表」をターミナルで表示する方法

ターミナルでコマンドラインで実行している人はこうなります。


サザエさんの登場人物を表で説明して

ChatGPT の「表」をターミナルで表示する方法

見づらいです。

Markdown がテキストとしてそのまま表示されていますね。

 

■ Markdown CLI「Glow」を使う

👉 charmbracelet/glow: Render markdown on the CLI, with pizzazz! 💅🏻 hatena-bookmark

以下のように使います。

echo "[Glow](https://github.com/charmbracelet/glow)"

Markdown 文字列を標準出力としてパイプで渡すと変換して表示してくれます。

ChatGPTの出力処理部分に追加して実行すると、

ChatGPT の「表」をターミナルで表示する方法

見やすい形で表示されました!

しかし、「デヴィ夫人」てサザエさんに出たん?