個人開発でのLLM活用10連発

https://scrapbox.io/files/6697d0887a0d6f001c63e33d.jpg

Photo by pastak.icon

🏮 個人開発祭り #4の発表資料です 🏮

こんばんは

daiiz.icon daiiz (@daizplus) です

Helpfeel エンジニア

設計、実装、ドッグフーディングの繰り返しの日々

前回

得意領域を広げる個人開発

興味関心がある身近なデータを集めまくる

データを起点にして次の挑戦領域を発見する

自分が作ったものを毎日使う

アイデアの本質が見えるまで深堀りする

ときどき刺激を加える

個人開発歴

大学生の頃から

10年以上

色々と作ってきた

思いつき次第試したい

自分が毎日使いたい

多くの人に使ってもらいたい

詳しくは #作ったの関連ページ

個人開発の傾向

いくつか並行して開発を進めている

分野ごとの広がりを整理を試みた様子

https://gyazo.com/f00c6b9d7c526c10376a7aaaa9bbcc1e

画像を扱う題材が好き

個人開発でLLMを使っていく話

手を動かして慣れていくしかないですよね！

LLM時代の検索を考える観察日記

https://gyazo.com/b5af2d6bddc7865c30e3f771640602b8

LLMでお絵かきする

言語モデルで絵を描く

拡散モデルではなく

LLMでお絵かきする

SVGならできる！

SVG大好き

SVG Screenshot

週刊SVG芸

ミャクミャクのバリアント生成チャレンジ 2024/5

https://gyazo.com/bdbcd576dad07e6eeb8cf23d78e6ebcc

few-shotで原画を与えて自由に変形してもらう

SVGでの表現の限界に挑戦してくれる

SVG Drawingの進化に乞うご期待

https://gyazo.com/c0798b219aef610255aa9f5c0f911fa5

https://svg-drawing.herokuapp.com/

ちょっとしたSVG素材を作る

アイコンやプレースホルダー画像など

Claude 3.5のArtifacts機能が最高に便利

https://gyazo.com/11493d907a44bbdcb403c04612b1f2e8

出先の隙間時間に作業を進められる

外でもスマホでも個人開発できるようになった！

チャットクライアントを作る

開発アイデアやコードがデフォルトでコンテキストに乗る

いちから前提を話さなくていい

具体的なコードで会話できる

開発TODOメモやイベント情報を混ぜた秘書を作れる

https://gyazo.com/0f61cdb64190ec5284e8576130a0a188

チャットクライアントを作る

LLMとのチャットUIの研究を兼ねている

例: テキスト入力欄は画面上部にあったほうがいい

例: 会話の中で、コンテキストに含めるものを選択したい

https://gyazo.com/c547cfac3073dbf29e2c678af7dd39f6

https://gyazo.com/ee3269accbceb81daa0d073efac9b604

最近Goolge AI Studioにも実装されていた

チャットクライアントを作る

エクスポート機能を実装するべき

より強いモデル情報を引き継げる

簡単なブログ記事にもなれる？

HTML形式で出力しておくといい

ブラウザで読める（人間可読）

他のクライアントにもファイルとして渡せる

例: Google AI Studioで続きの議論をする様子

https://gyazo.com/eb9facbbb7695301492208b0f4262f98

情報分析する

積読になっているブックマークをときどき見直したい

ブックマーク検索ツールも開発中

Snapshot machine

定点観測機能

https://gyazo.com/bf7eace76e0d5dc89301c35e5d3b924b https://x.com/daizplus/status/1782579167705641227

新しい順に読みたい

追加日ではなく

古い記事がバズっていたりすることもある

情報分析する

ウェブページを画像としても保存している

https://gyazo.com/413fa487276576448662be54fd318080

https://gyazo.com/704394c17ca2f8f7cd8e099ea2e7328e

情報分析する

マルチモーダルLLMにスクリーンショットをそのまま渡す

先頭から高さ1000pxの領域で十分

プロンプトの例

code:js

const prompts = [

"スクリーンショット画像から情報を抽出して、このコンテンツの作成日を推定してください。",

"時刻が不明確な場合は 00:00 としてください。",

"複数の候補が考えられる場合は、確度が高い順に並べて回答してください。",

"日時情報を抽出できなかった場合は、空の配列を返してください。",

"---",

只今の日時は、${nowDateStr} です。,

];

情報分析する

入力画像の例

（説明用に回答根拠箇所のマーキングを付与している）

https://gyazo.com/bc2ae867c4cb5681b578a501c9a5f0c3

https://scrapbox.io/files/66978f753ab2a8001d8fdc97.jpg

記事の作成日を推定させる

該当箇所が複数あれば、確度順に全部答えてもらう

Cosenseのページなど、推定不能な場合は空になる

DBでも複数の値を記録できるようにしておく

あとで人間がチェックする

記事作成日を推定できた様子

灰色の文字で表記。紫色の長方形はリンクタイトルをマスキングしたもの。

Gemini 1.5 Flash APIを使用

https://gyazo.com/df9d7fac8dc362e30e7cabc8f33f58fa