|
1 | 1 | # Perfect Text Overlay - パーフェクトテキストオーバーレイ |
2 | 2 |
|
3 | 3 | [](https://opensource.org/licenses/MIT) |
| 4 | +[](https://www.npmjs.com/package/perfect-text-overlay) |
4 | 5 |
|
5 | 6 | > 画像生成とテキストレンダリングを分離することで、AI生成画像の文字化け問題を解決します。 |
6 | 7 |
|
7 | 8 | 🌐 [English](README.md) | [简体中文](README.zh-CN.md) | [繁體中文](README.zh-TW.md) | **日本語** | [한국어](README.ko.md) |
8 | 9 |
|
9 | 10 | --- |
10 | 11 |
|
11 | | -## 概要 |
| 12 | +## クイックスタート |
12 | 13 |
|
13 | | -AIが生成した画像には、特に中国語・日本語・韓国語(CJK)などの非ラテン文字で、文字が化けたり不完全になったりする問題がよくあります。このスキルは、画像生成とテキストレンダリングを2つの独立したステップに分離することで、この問題を解決します: |
| 14 | +```bash |
| 15 | +# インストール |
| 16 | +npm install -g perfect-text-overlay |
14 | 17 |
|
15 | | -1. **テキストなしのクリーンなベース画像を生成** |
16 | | -2. **最適なテキスト配置領域を分析** |
17 | | -3. **プロフェッショナルなタイポグラフィとエフェクトでテキストをレンダリング** |
| 18 | +# 環境チェック |
| 19 | +pto check |
18 | 20 |
|
19 | | -## 機能 |
| 21 | +# フォントダウンロード(オプション) |
| 22 | +pto download-fonts --all |
20 | 23 |
|
21 | | -- 🎯 **多言語サポート**:簡体字中国語・繁体字中国語・日本語・韓国語・英語 |
22 | | -- 🖼️ **複数の画像タイプ**:ポスター・フローチャート・インフォグラフィック・ソーシャルメディア画像 |
23 | | -- ✨ **プロフェッショナルなタイポグラフィ**:シャドウ・アウトライン・背景ボックス |
24 | | -- 🔤 **無料商用フォント**:6つのオープンソースフォントを含む(SIL OFL / Apache 2.0) |
25 | | -- 🎨 **スマートレイアウト分析**:テキスト配置の安全ゾーンを自動検出 |
| 24 | +# 使用 |
| 25 | +pto separate "タイトル'こんにちは世界'のポスターを作成" |
| 26 | +``` |
26 | 27 |
|
27 | | -## 自然言語インストール(AI Agent 向け) |
| 28 | +## 機能概要 |
28 | 29 |
|
29 | | -以下のプロンプトを LLM Agent(Claude Code、Kimi Code、Cursor など)にコピー&ペーストしてください: |
| 30 | +AIが生成した画像には、特に中国語・日本語・韓国語(CJK)などの非ラテン文字で、文字が化けたり不完全になったりする問題がよくあります。本ツールは以下のステップでこの問題を解決します: |
30 | 31 |
|
31 | | -``` |
32 | | -ワークスペースに perfect-text-overlay スキルをインストールしてください。 |
33 | | -クローン元:https://github.com/stephenlzc/perfect-text-overlay |
34 | | -すべての依存関係を設定し、日本語テキスト抽出テストを実行してインストールを確認してください。 |
35 | | -``` |
| 32 | +1. **分離** プロンプト → 画像専用プロンプト + テキスト要件 |
| 33 | +2. **生成** クリーンなベース画像(お好みのAIツール使用) |
| 34 | +3. **分析** 画像から最適なテキスト配置領域を特定 |
| 35 | +4. **レンダリング** 完璧なテキスト(プロフェッショナルなタイポグラフィ使用) |
36 | 36 |
|
37 | | -## ワークフロー |
| 37 | +## インストール |
38 | 38 |
|
39 | | -``` |
40 | | -ステップ 1:プロンプトの分離 |
41 | | -├─ ユーザープロンプトからテキスト要件を抽出 |
42 | | -├─ 画像専用プロンプトを生成(テキスト記述なし) |
43 | | -└─ 出力:画像プロンプト + テキスト要件 |
44 | | -
|
45 | | -ステップ 2:画像生成 |
46 | | -├─ 画像専用プロンプトを使用してベース画像を生成 |
47 | | -└─ 出力:テキストなしのクリーンな画像 |
48 | | -
|
49 | | -ステップ 3:画像分析 |
50 | | -├─ 画像を分析し、テキスト配置の安全ゾーンを特定 |
51 | | -├─ レイアウト構造を検出(フローチャート用) |
52 | | -└─ 出力:座標付きレイアウト提案 |
53 | | -
|
54 | | -ステップ 4:ユーザーカスタマイズ |
55 | | -├─ ユーザーに5つのカスタマイズ質問をする |
56 | | -│ 1. シーンタイプ(ポスター/フローチャート/インフォグラフィック) |
57 | | -│ 2. テキスト内容の確認 |
58 | | -│ 3. フォントスタイルの選択 |
59 | | -│ 4. テキスト位置の設定 |
60 | | -│ 5. エフェクトとスタイルオプション |
61 | | -└─ 出力:ユーザー選択 |
62 | | -
|
63 | | -ステップ 5:テキストオーバーレイ |
64 | | -├─ プロフェッショナルなタイポグラフィでテキストをレンダリング |
65 | | -└─ 出力:完璧なテキストを含む最終画像 |
66 | | -``` |
| 39 | +### 要件 |
| 40 | +- Node.js 18+ |
| 41 | +- Python 3.8+ |
| 42 | +- Pythonパッケージ:`pip install Pillow numpy` |
67 | 43 |
|
68 | | -## インストール |
| 44 | +### NPMインストール(推奨) |
| 45 | +```bash |
| 46 | +npm install -g perfect-text-overlay |
| 47 | +``` |
69 | 48 |
|
| 49 | +### Gitクローン |
70 | 50 | ```bash |
71 | | -# リポジトリをクローン |
72 | 51 | git clone https://github.com/stephenlzc/perfect-text-overlay |
73 | 52 | cd perfect-text-overlay |
74 | | - |
75 | | -# 依存関係をインストール |
76 | | -pip install Pillow numpy |
77 | | - |
78 | | -# オプション:追加のシステムフォントをインストール |
79 | | -# macOS: フォントは自動的に検出されます |
80 | | -# Linux: sudo apt-get install fonts-noto-cjk |
81 | | -# Windows: フォントは自動的に検出されます |
| 53 | +npm install |
82 | 54 | ``` |
83 | 55 |
|
84 | | -## 使用方法 |
| 56 | +## CLI使用方法 |
85 | 57 |
|
86 | | -### 基本的な例 |
| 58 | +```bash |
| 59 | +# プロンプトを分離 |
| 60 | +pto separate -p "映画ポスター、タイトルは'インターステラー'" |
87 | 61 |
|
88 | | -```python |
89 | | -from scripts.prompt_separator import separate_prompt |
90 | | -from scripts.image_analyzer import analyze_image, get_text_placement_suggestions |
91 | | -from scripts.text_renderer import render_text_on_image |
| 62 | +# 画像を分析 |
| 63 | +pto analyze -i base.png -r '{"text_groups":[{"content":"こんにちは"}]}' |
92 | 64 |
|
93 | | -# ステップ 1:プロンプトを分離 |
94 | | -user_input = "ポスターを作成して、タイトルは'こんにちは世界'" |
95 | | -result = separate_prompt(user_input) |
| 65 | +# テキストをレンダリング |
| 66 | +pto render -i base.png -o final.png -p placements.json |
96 | 67 |
|
97 | | -# result['image_prompt']: "ポスターを作成..." |
98 | | -# result['text_requirements']: {"text_groups": [{"content": "こんにちは世界"}]} |
| 68 | +# 完全なワークフロー |
| 69 | +pto workflow -p "ポスター、タイトル'セール'" -i base.png -o final.png |
99 | 70 |
|
100 | | -# ステップ 2:ベース画像を生成(お好みの画像生成器を使用) |
101 | | -# ... result['image_prompt'] を使用して画像を生成 ... |
| 71 | +# フォントをダウンロード |
| 72 | +pto download-fonts --list |
| 73 | +pto download-fonts --all |
| 74 | +``` |
102 | 75 |
|
103 | | -# ステップ 3:画像を分析 |
104 | | -text_requirements = result['text_requirements'] |
105 | | -analysis = analyze_image("generated_image.png", text_requirements) |
106 | | -placements = get_text_placement_suggestions(analysis, text_requirements) |
| 76 | +## Node.js API |
107 | 77 |
|
108 | | -# ステップ 4:ユーザー選択(通常はUI経由で収集) |
109 | | -user_choices = { |
110 | | - "font_style": "modern", |
111 | | - "text_size": "auto", |
112 | | - "effects": ["shadow", "outline"], |
113 | | - "text_color": (255, 215, 0), # ゴールド |
114 | | -} |
| 78 | +```javascript |
| 79 | +const { separatePrompt, analyzeImage, renderTextOnImage } = require('perfect-text-overlay'); |
115 | 80 |
|
116 | | -# ステップ 5:テキストをレンダリング |
117 | | -output_path = render_text_on_image( |
118 | | - image_path="generated_image.png", |
119 | | - output_path="final_image.png", |
120 | | - placements=placements, |
121 | | - user_choices=user_choices |
122 | | -) |
| 81 | +async function createPoster() { |
| 82 | + // 1. プロンプトを分離 |
| 83 | + const result = await separatePrompt('ポスター、タイトル"こんにちは"'); |
| 84 | + |
| 85 | + // 2. 画像を分析(result.image_promptで画像生成後) |
| 86 | + const analysis = await analyzeImage('base.png', result.text_requirements); |
| 87 | + |
| 88 | + // 3. テキストをレンダリング |
| 89 | + await renderTextOnImage('base.png', 'final.png', |
| 90 | + analysis.placements, |
| 91 | + { font_style: 'modern', effects: ['shadow'] } |
| 92 | + ); |
| 93 | +} |
123 | 94 | ``` |
124 | 95 |
|
125 | | -### フォントスタイル |
| 96 | +## フォントスタイル |
126 | 97 |
|
127 | | -以下のフォントスタイルがサポートされています: |
| 98 | +| スタイル | 言語 | 説明 | |
| 99 | +|----------|------|------| |
| 100 | +| `modern` | 中国語 | モダン・シンプル | |
| 101 | +| `traditional` | 中国語 | 伝統的な宋体 | |
| 102 | +| `traditional_tw` | 中国語(台湾)| 繁体字中国語 | |
| 103 | +| `korean` | 韓国語 | 韓国語最適化 | |
| 104 | +| `english` | 英語/ラテン | Robotoフォント | |
| 105 | +| `calligraphy` | 任意 | アート・書道 | |
| 106 | +| `cartoon` | 任意 | キュート・カートゥーン | |
128 | 107 |
|
129 | | -| スタイル | フォント | 言語 | ライセンス | |
130 | | -|------|------|----------|---------| |
131 | | -| `modern` | Noto Sans CJK SC Bold | 簡体字中国語 | SIL OFL 1.1 | |
132 | | -| `traditional` | Noto Serif CJK SC Bold | 簡体字中国語 | SIL OFL 1.1 | |
133 | | -| `traditional_tw` | Noto Sans CJK TC Bold | 繁体字中国語(台湾) | SIL OFL 1.1 | |
134 | | -| `korean` | Noto Sans CJK KR Bold | 韓国語 | SIL OFL 1.1 | |
135 | | -| `english` | Roboto Bold | 英語/ラテン | Apache 2.0 | |
136 | | -| `cartoon` | Noto Sans CJK SC Bold | ユニバーサル | SIL OFL 1.1 | |
137 | | -| `calligraphy` | システムフォント | システム依存 | 異なる | |
| 108 | +フォントダウンロード:`pto download-fonts --all` |
138 | 109 |
|
139 | 110 | ## プロジェクト構造 |
140 | 111 |
|
141 | 112 | ``` |
142 | 113 | perfect-text-overlay/ |
143 | | -├── assets/ |
144 | | -│ └── fonts/ # 無料商用フォント |
145 | | -│ ├── NotoSansCJKsc-Bold.otf # 源ノ角ゴシック簡体 |
146 | | -│ ├── NotoSerifCJKsc-Bold.otf # 源ノ明朝簡体 |
147 | | -│ ├── NotoSansCJKtc-Bold.otf # 源ノ角ゴシック繁体 |
148 | | -│ ├── NotoSansCJKkr-Bold.otf # 源ノ角ゴシック韓国語 |
149 | | -│ ├── Roboto-Bold.ttf # Roboto 英語 |
150 | | -│ ├── OpenSans-Bold.ttf # Open Sans 英語 |
151 | | -│ └── LICENSE.md |
152 | | -├── references/ |
153 | | -│ ├── trigger_keywords.md # 多言語トリガーキーワード |
154 | | -│ ├── layout_patterns.md # タイポグラフィのベストプラクティス |
155 | | -│ └── flowchart_symbols.md # フローチャートデザイン標準 |
156 | | -├── scripts/ |
157 | | -│ ├── prompt_separator.py # プロンプトからテキストを抽出 |
158 | | -│ ├── image_analyzer.py # 画像レイアウトを分析 |
159 | | -│ └── text_renderer.py # 画像にテキストをレンダリング |
160 | | -├── SKILL.md # 詳細なスキルドキュメント |
161 | | -└── README.md # メインドキュメント(英語) |
162 | | -``` |
163 | | - |
164 | | -## サポートされるユースケース |
165 | | - |
166 | | -### 1. タイトル付きポスター |
167 | | -``` |
168 | | -ユーザー:"SF映画のポスターを作成して、タイトルは'インターステラー'" |
169 | | -↓ |
170 | | -ステップ 1:画像プロンプト = "sci-fi movie poster, space theme..." |
171 | | - テキスト = "インターステラー" |
172 | | -↓ |
173 | | -ステップ 2:ベース画像を生成 |
174 | | -↓ |
175 | | -ステップ 3:下部中央配置を提案 |
176 | | -↓ |
177 | | -ステップ 4:モダンフォント、下部中央、シャドウ+アウトライン |
178 | | -↓ |
179 | | -ステップ 5:下部に大きなタイトルをレンダリング |
180 | | -``` |
181 | | - |
182 | | -### 2. フローチャート |
183 | | -``` |
184 | | -ユーザー:"ユーザー登録フローチャートを作成:1.情報入力 2.メール確認 3.完了" |
185 | | -↓ |
186 | | -ステップ 1:フローチャートノードを検出 |
187 | | -↓ |
188 | | -ステップ 2:ベース画像を生成 |
189 | | -↓ |
190 | | -ステップ 3:3つのノード位置を検出 |
191 | | -↓ |
192 | | -ステップ 4:水平フロー、ボックス+矢印を追加 |
193 | | -↓ |
194 | | -ステップ 5:接続矢印付きの3つのボックスノードをレンダリング |
195 | | -``` |
196 | | - |
197 | | -### 3. インフォグラフィック |
| 114 | +├── bin/cli.js # CLIエントリ |
| 115 | +├── lib/index.js # Node.js API |
| 116 | +├── scripts/ # Pythonスクリプト |
| 117 | +│ ├── prompt_separator.py |
| 118 | +│ ├── image_analyzer.py |
| 119 | +│ └── text_renderer.py |
| 120 | +├── assets/fonts/ # フォント(オンデマンドダウンロード) |
| 121 | +└── types/ # TypeScript定義 |
198 | 122 | ``` |
199 | | -ユーザー:"インフォグラフィックを作成して、'売上:$100K'と'成長:+50%'を表示" |
200 | | -↓ |
201 | | -ステップ 1:データポイントを抽出 |
202 | | -↓ |
203 | | -ステップ 2:ベース画像を生成 |
204 | | -↓ |
205 | | -ステップ 3:各統計データの安全ゾーンを検索 |
206 | | -↓ |
207 | | -ステップ 4:大きな数字、コントラストカラー |
208 | | -↓ |
209 | | -ステップ 5:プロフェッショナルなデータビジュアライゼーションをレンダリング |
210 | | -``` |
211 | | - |
212 | | -## API リファレンス |
213 | | - |
214 | | -### プロンプト分離器 |
215 | | - |
216 | | -```python |
217 | | -from scripts.prompt_separator import separate_prompt |
218 | | - |
219 | | -result = separate_prompt("タイトル'Hello World'のポスターを作成") |
220 | | -# 返り値: { |
221 | | -# "has_text": True, |
222 | | -# "image_prompt": "Create poster...", |
223 | | -# "text_requirements": {...} |
224 | | -# } |
225 | | -``` |
226 | | - |
227 | | -### 画像分析器 |
228 | 123 |
|
229 | | -```python |
230 | | -from scripts.image_analyzer import analyze_image, get_text_placement_suggestions |
231 | | - |
232 | | -analysis = analyze_image("image.png", text_requirements) |
233 | | -placements = get_text_placement_suggestions(analysis, text_requirements) |
234 | | -``` |
235 | | - |
236 | | -### テキストレンダラー |
237 | | - |
238 | | -```python |
239 | | -from scripts.text_renderer import render_text_on_image |
240 | | - |
241 | | -render_text_on_image( |
242 | | - image_path="input.png", |
243 | | - output_path="output.png", |
244 | | - placements=[...], |
245 | | - user_choices={...} |
246 | | -) |
247 | | -``` |
| 124 | +## ドキュメント |
248 | 125 |
|
249 | | -## トリガーキーワード |
250 | | - |
251 | | -ユーザー入力に以下が含まれる場合、このスキルがトリガーされます: |
252 | | - |
253 | | -- **画像タイプキーワード**:ポスター、フローチャート、インフォグラフィック、バナーなど |
254 | | -- **テキスト要件キーワード**:書く、タイトル、テキスト、キャプションなど |
255 | | - |
256 | | -完全な多言語キーワードリストについては [references/trigger_keywords.md](references/trigger_keywords.md) を参照してください。 |
257 | | - |
258 | | -## フォントライセンス |
259 | | - |
260 | | -含まれるすべてのフォントは無料で商用利用可能です: |
261 | | - |
262 | | -- **Noto Sans/Serif CJK**: SIL Open Font License 1.1 |
263 | | -- **Roboto**: Apache License 2.0 |
264 | | -- **Open Sans**: SIL Open Font License 1.1 |
265 | | - |
266 | | -完全なライセンス詳細については [assets/fonts/LICENSE.md](assets/fonts/LICENSE.md) を参照してください。 |
267 | | - |
268 | | -## 貢献 |
269 | | - |
270 | | -貢献を歓迎します!気軽にプルリクエストを送信してください。 |
| 126 | +- [API Reference](API.md) - 詳細APIドキュメント |
| 127 | +- [Contributing](CONTRIBUTING.md) - 貢献ガイド |
| 128 | +- [CHANGELOG](CHANGELOG.md) - バージョン履歴 |
271 | 129 |
|
272 | 130 | ## ライセンス |
273 | 131 |
|
274 | | -このプロジェクトは MIT ライセンスの下でライセンスされています - 詳細は [LICENSE](LICENSE) ファイルを参照してください。 |
275 | | - |
276 | | -## 謝辞 |
277 | | - |
278 | | -- [Noto Fonts](https://github.com/notofonts/noto-cjk) by Google & Adobe |
279 | | -- [Roboto](https://github.com/googlefonts/roboto) by Google |
280 | | -- [Open Sans](https://github.com/googlefonts/opensans) by Google |
| 132 | +MIT © [stephenlzc](https://github.com/stephenlzc) |
281 | 133 |
|
282 | 134 | --- |
283 | 135 |
|
284 | | -**他の言語で読む:** |
285 | | -[English](README.md) | [简体中文](README.zh-CN.md) | [繁體中文](README.zh-TW.md) | [한국어](README.ko.md) |
| 136 | +## 🌍 他の言語 |
| 137 | + |
| 138 | +- [English](README.md) - English Documentation |
| 139 | +- [简体中文](README.zh-CN.md) - 简体中文文档 |
| 140 | +- [繁體中文](README.zh-TW.md) - 繁體中文文檔 |
| 141 | +- [한국어](README.ko.md) - 한국어 문서 |
0 commit comments