Drawing with LLMs

Ristの社員チームが金メダルを獲得したKaggleコンペティション「Drawing with LLMs」の解法紹介です。

このコンペティションは、あるお絵描きのお題「Description」が与えられ、それを正確に表現するSVG画像を生成するタスクでした。

Transcript

1. Drawing with LLMs チーム Grand Painting Artists
2. ©Rist Inc. 02 • コンペ概要 ◦ 基本情報 ◦ 評価指標 ◦ ポイント • 弊チームの解法（6位解法） ◦ 概要 ◦ 詳細 • 上位解法 • まとめ・ギャラリー 目次 Drawing with LLMs
3. ©Rist Inc. 03 • 開催期間：2025/02/25~2025/05/27 • 参加チーム数：1,347 • タスク： ◦ あるお絵描きのお題「Description」が与えられ、それを正確に表現するSVG画像を生成する。 ▪ コンペ名は”Drawing with LLMs”であり、ホストがGemma2でのStartNotebookを提供して いることからも、LLMを使ったアプローチが期待されていることがわかる。 ◦ 3つの制限を満たすようにSVGファイルを作る必要がある。 ▪ 制限1: 10,000Bytesを超えない ▪ 制限2: 許可された要素と属性のみ含む（CSSのstyle要素は不可） ▪ 制限3: ラスタ画像データや外部ソースのデータを含めない • コンペ形式：パッケージコンペ（初） ◦ 指定されたインターフェースのpredictメソッドを実装したModelクラスを含むコードを提出 ◦ 提出したコードは、実行環境でパッケージとしてimportされる。 • テストデータ数：500。 制限時間が9時間なので 1Description あたり1分と少し。 コンペ概要 - 基本情報
4. ©Rist Inc. 04 修正前 • SVG画像とDescriptionとの類似度をSigLIPで測る。 ◦ SVG画像にDescriptionを書き込めば高スコアになるというシンプルなハックが見つかり、修正が入った。 コンペ概要 - 評価指標 Image from SVG random_crop_resize jpeg_compression median_filter fft_low_pass bilateral_filter jpeg_compression random_crop_resize jpeg_compression Processed Image A Processed Image B PaliGemma2 PaliGemma2 Aesthetic CLIP VQA score OCR score AES score Description SVG generation QA 修正後（最終版） • 複数のモデルを使い、多角的な評価を行う。 ◦ PaliGemma2: VQA score（description表現の正確さ）・OCR score（文字の少なさ） ◦ CLIP Basedモデル: AES score（美しさ・審美性） 4文字までok ImageProcessA ImageProcessB
5. ©Rist Inc. 05 コンペ概要 - 詳細 VQA • 1Descriptionにつき、4つのQAが用意される ◦ それぞれのAnswerは2択、もしくは4択 • スコアの計算方法 ◦ 各選択肢は先頭にA, B, C, Dのアルファベットが振られ、PaliGemma2の出 力の先頭が正答アルファベットのトークンとなる確率がVQAスコアとなる ◦ 確率は、先頭の全選択肢分のアルファベットのlogitを集め、それらの softmaxをとることで計算 ◦ プロンプト: "<image>answer en Question: {question}\nChoices:\n" 提出時、擬似的にスコア（本資料では以下、擬似スコア）を計算できる • 評価モデルとそのコードが公開されているので、提出時に生成したSVGを自分た ちである程度評価することが可能。 • AES, OCR は、ほとんど実際のスコアと同じものを計算できる。 ◦ ImageProcessのランダム性により、わずかな差は存在する。 • VQAのみ実際のスコアが出せない ◦ PaliGemma2に渡される実際のQAがわからないため。 kaggle提供データのQAの例 （画像は参考に生成したもの） A purple forest at dusk
6. ©Rist Inc. 06 コンペ概要 - 見どころ LLMか、Diffusionか • LLMを使うアプローチはコンペの趣旨に合致しており、高いパフォーマンスを発揮できれば技術的な探究という 観点から大きな価値がある。一方で、LLMはあくまで言語モデルであるため、画像描画コードであるSVGをどこ まで正確に理解・生成できるのかについては疑問が残る。 • 画像生成といえば一般的にDiffusionモデルが主流であり、今回のコンペにおいても、こちらの手法の方が取り組 みやすそうな印象 Metric Hacking は存在するか • 生成画像を多様なモデルで多角的に評価する新しい試みは、指標やルールの隙を見つけ出すのがうまいKaggler たちの攻撃にどこまで耐えられるのか ChatGPT zero-shot "Unicorn" Stable Diffusion 2.1
7. ©Rist Inc. 07 弊チームの解法（6位解法）
8. ©Rist Inc. 08 弊チームの解法 - 概要 ラスタ画像生成 → SVG変換 画像生成 → SVG変換 を繰り返し、候補群を用意する。そのうち擬似スコア最大のSVGを提出。 とにかく候補数を増やすことに集中した。 候補群 提出 ラスタ画像 変換後SVG x9 Score: 0.75 Score: 0.78 Score: 0.71 Score: 0.76 Score: 0.80 Score: 0.72 Score: 0.84 Score: 0.79 Score: 0.82 A lighthouse overlooking the ocean
9. ©Rist Inc. 09 弊チームの解法 - Local Validation 評価データを生成。Descriptionはバリエーション豊かに、QAはホストのQAに近い形式に。 • 課題：kaggleから提供されたdescriptionはわずか15個であり、評価には心許ない ◦ 質問カテゴリが3種類しか存在せず、バリエーション不足感 ◦ 画像生成モデルが内包するランダム性により、実行するたびに結果が大きく変動 • 対策：100のデータ（description + QA）を生成。→ コンペ終盤までLBと強く相関。 1. descriptionを大量に生成する。DeepSeekV3使用。 ◦ Kaggleから提供された15個（以下 Kaggle-15）のdescriptionをPromptに含め、FewShotで descriptionを生成。 2. 多様性を保つように選び出す。 ◦ Kaggle-15に含まれるDescriptionどうしのSigLIP類似度は最小で0.74程度であることをふまえ、 新しく生成したものは他のいずれのDescriptionとの類似度が0.7以下になるようにした。 3. 選んだDescriptionに対するQAを生成する。DeepSeekV3使用。 ◦ 100個のDescriptionsそれぞれに対して、Kaggle-15のQAをPromptに含めFewShotでQA生成。 生成したDescriptionとQAの例。画像はそれぞれのDescriptionを使って実際に生成。
10. ©Rist Inc. 010 弊チームの解法 - ラスタ画像生成 • FLUX.1-schnell ◦ ローカル開発や個人利用向けの小型モデル ◦ ライセンス: apache-2.0 ◦ 画像サイズ: 384 ◦ FLUXはプロンプトへの忠実度が非常に高い。 ◦ StableDiffusion系はDescriptionを表現する能力自体は十分高いが、 細かいスタイル（e.g. flat design, pastel color）の指定が効きにくい • プロンプト ◦ 2種類のプロンプトを使用（9候補の内、5つをa、4つをbで生成） a. "Stylized vector art of {description}, up to 4 colors, max 5 objects, bold, flat, clean lines" b. "Modern flat illustration with cartoon-style outlines of {description}, simple shapes, solid colors" • 後処理 ◦ FLUXがテキストを描画してしまうことがあるため、テキストのエリア を平均色に置換。 ◦ EasyOCRでテキスト位置を検出。 SVG変換しやすくAESの高い画像を生成することが重要。 SVG変換しにくい画像 SVG変換しやすい画像 テキストの塗りつぶし
11. ©Rist Inc. 011 弊チームの解法 - SVG変換 1) ラスタ画像 → SVG ◦ vtracerを使用。 2) Polygonの単純化（2ループ以降 かつ size > 15KB） ◦ rdpアルゴリズム（rdp） 3) SVGの層化 ◦ K-Meansにより、色で各polygonを16のクラスターにわける ◦ 一番大きなクラスターを削除、その平均色のrectを背景とする 4) OCR / AES 対策 ◦ OCR対策：”Z”のデコイを右下に配置。ハルシネーション対策。 ◦ AES対策：角丸の枠を設定、枠縁の色とデコイの色を探索 5) 記法の最適化・後処理（見た目に影響なし） ◦ scour + 改行コード削除など。 6) サイズ確認 ◦ 8.5KB < size < 10KB → OK ◦ それ以外 → vtracerのパラメーター調整後、1)からやり直し 7) Fallback（5回繰り返しても10KB以下にできない） ◦ 領域分割後、サイズを超えないように一つずつpolygonを追加する ラスタ画像からSVGへ変換。変換時の損失をできるだけ小さくする。 生成画像 1) 22.6KB 2) 13.6KB 3) 11.2KB 4) 11.7KB → 5) 8.4KB A pair of hiking boots on a rocky mountain trail Fallback 7) 9.9KB
12. ©Rist Inc. 012 弊チームの解法 - 擬似スコア・パイプラインの効率化 • AES score: 評価モデルで実際に推論 • OCR score: 常に1.0とする ◦ easyocrにより画像から文字が消え、デコイによりハルシネーションを抑えられるものとする • VQA score: 汎用的なQAを1種類のみ用意。1Description 1QA となり大幅に時間を節約できる。 ◦ "<image>Does the image match the description: `{question}`? yes or no" ◦ 回答の最初がyesの確率をVQAスコアとする。確率の計算時、"yes"や"no"のみではなく、"Yes"や"No" など大文字を含むトークンも対象とすることで実際のQAとのアライメントが向上した。 擬似スコア：候補を順位づけするための代用スコア。QAがないので実際のスコアは出せない。 パイプラインの効率化：重複する計算を省略し、候補生成1回にかかる時間を短くする。 • FLUX.1-schnellのテキストのエンコードは各プロンプトにつき最初の1回のみとし、2回目以降は エンコード済みのembeddingを使い回す ◦ 5.5s * N → 3.3s + 2.4s * N ◦ 9生成の場合、49.5s → 24.9s となり、画像生成にかかる時間が半分になった。
13. ©Rist Inc. 013 上位解法紹介
14. ©Rist Inc. 014 • Descriptionをテキストとして埋め込む（2ndのチームも同じ） ◦ PaliGemma2がテキストを読むようになり、VQAスコアが大きく改善する。 ◦ 本来OCRスコアがテキスト埋め込みのペナルティを課すはずだが、AES・VQAのための画像処理プロセスと、 OCRのための画像処理プロセスの差異を利用し、VQA側のみ文字が浮き出るようにする。 • 追加で3文字を隠さずに直接書き込む（2ndのチームも同じ） ◦ この文字の種類とスタイルによりAESが改善。3文字なのでOCRによるペナルティは無い。 • 上記2つ以外にも、色のパターンや他の文字の埋め込みなど、複数の最適化が行われている。 Metric Hacking 上位解法紹介 - 1st random_crop_resize jpeg_compression median_filter fft_low_pass bilateral_filter jpeg_compression random_crop_resize jpeg_compression SVG Image ImageProcessA ImageProcessB VQA score OCR score AES score 文字が出現
15. ©Rist Inc. 015 1. FLUX.1-schnellにより、異なる4つのプロンプトでそれぞれ2枚ずつ、合計8枚の候補を作成。 2. vtracerでSVG変換後、OCR対策として文字「Z」を描画する。 3. PaliGemma2のVisionEncoderで使われているSigLIPにより、Descriptionとの類似度を計算。上位2枚を採用す る。（PaliGemma2全体によるVQAをスキップすることで大幅に時間を短縮している） 4. 10 iterations の勾配降下で2枚の候補を最適化後、AESがより高くなった1方のみ、200 iterations 最適化。 ◦ 損失関数: AES loss、SigLIP similarity loss、MSE loss ◦ 勾配効果による学習を行うためには、入力であるSVGからLoss計算までを微分可能にする必要がある。SVG はpydiffvgにより、またAugmentation部分はPytorchのモジュールを使うことでこれを実現。 テキスト埋め込みなし、純粋に画像生成だけで高スコアを達成 上位解法紹介 - 3rd 概要 SVG変換後 最適化後 ImageProcess後
16. ©Rist Inc. 016 Image from SVG random_crop_resize jpeg_compression median_filter fft_low_pass bilateral_filter jpeg_compression Processed Image C SigLIP Aesthetic CLIP Similarity loss Aesthetic loss Description Selected 2 SVGs pydiffvg (Differentiable) Pytorch Module (Differentiable) random_crop_resize jpeg_compression median_filter fft_low_pass bilateral_filter jpeg_compression Processed Image A MSE loss 元の画像との差分が小 さくなるように 上位解法紹介 - 3rd 学習
17. ©Rist Inc. 017 まとめ・ギャラリー
18. ©Rist Inc. 018 まとめ • Diffusionモデルを使ったアプローチが大半で、LLMによるアプローチはほとんど見られなかった。今回のタスク設定では Diffusionモデルの方が優位だったようだが、Qwenでもzero-shotで0.5~0.6程度のスコアが出る上に、強化学習によりス コアが向上する傾向が見られ、そのポテンシャルは十分に確認できた。 • Metric Hackingは存在した。しかし、それに気づいたチームはごく僅かで、評価指標としてそれなりに機能していた。おか げでコンペの満足度は高かった。感覚的な画像品質の向上がスコアに直結している印象を受けた。Discussionでは「作 成したSVGは綺麗な仕上がりとなり、満足している」というコメントが多く見られた。 • FLUXはSD系のモデルと比べて大きく進化していた。特にプロンプトに忠実に従う能力が改善していた。実際、コンペ中 にスコアが一番伸びたのはSDXL-flashからFLUX.1-schnellにモデルを切り替えたタイミングだった。 • パッケージコンペは正直扱いにくいものだった。提出時のwrapperの影響でマルチスレッド処理を実行できなかった（実際 にはworkaroundがあったらしく、また最新の環境では解消されたらしい）。Notebook環境では問題なく動くのに、提出す るとエラーが出ることが何度かあった。実行環境との違いが何なのか突き止めにくく、デバッグが大変だった。
19. ©Rist Inc. 019 ギャラリー（Description + SVG） khaki triangles and azure crescents black and white checkered pants a starlit night over snow-covered peaks a chameleon blending into a rainbow of fallen leaves A glowing sword stuck in a cracked stone pedesta A futuristic robot holding a bouquet of flowers jagged obsidian cliffs piercing through a foggy horizon A copper windmill turning lazily in a gentle breeze.
20. ©Rist Inc. 020 ギャラリー（SVG）
21. ©Rist Inc. 021 クイズ：このSVG画像はどんなDescriptionから生成された？OOを埋めてください。 A1. 「夕暮れ時」に、きらめく「池」の上に浮遊する「トンボ」 A2. 「彫刻」された「カボチャ」の中で揺らめく「ろうそく」が、暗い「玄関先」に置かれている。 Q1. OO（時刻）に、きらめく OO（場所） の上に浮遊する OO（生物） Q2. OO（状態）された OO（物体）の中で揺らめく OO（物体）が、暗い OO（場所）に置かれている。 VQAスコアが高いsvg画像は、このようなクイズに正解しやすい画像といえます。（答えは本項下部）