#daiizメモ

ときどきいいことを書きます

グラデーション

昨日インストールしたGemini CLIを使ってみている。

daiiz.hatenablog.com

コーディングエージェントの本質とは全く関係ない話だが、文字のグラデーションが格好いい。自作のAIエージェントOkonomiでもやりたい。

Image from Gyazo

Gemini CLIはオープンソースなのでGitHubでコードを読める。特徴的な文字列「Agent powering down.」で検索して実装箇所を探してみる。やっぱりInkを使っているようだ。文字のグラデーションにはink-gradientを使っていた。

import Gradient from 'ink-gradient';

<Gradient colors={Colors.GradientColors}>
    <Text bold>{title}</Text>
</Gradient>

SessionSummaryDisplay.tsx @google-gemini/gemini-cli

色の定義はこのへんで行われていた。

ついでに最初の画面のでかいロゴ文字も再現したい。ink-gradientのREADMEを読んでいたらink-big-textを知った。これも使ってみよう。ちなみにGemini CLIではこのライブラリは使われておらず、自前で"GEMINI"のアスキーアートを用意していた。

AsciiArt.ts @google-gemini/gemini-cli

Claude Codeのコードは読めないけど、見た感じ、これくらいリッチなターミナルデザインを高速に作るにはInkだろうと予想していた。なのでOkonomiもInk製である。さっそく真似してみた。配色はこれからで変えるとして、開発時のテンションが上がってよい!!!

Image from Gyazo