Skip to content

Commit db4f341

Browse files
author
Demo User
committed
docs: Update all language README files with npm installation
- Simplify all READMEs while keeping essential information - Add npm install instructions to all language versions - Add CLI and API usage examples for all languages - Keep language switcher links at the bottom - Remove outdated Python-only examples, keep npm-focused docs Languages updated: - English (README.md) - 简体中文 (README.zh-CN.md) - 繁體中文 (README.zh-TW.md) - 日本語 (README.ja.md) - 한국어 (README.ko.md)
1 parent 2c86e2b commit db4f341

5 files changed

Lines changed: 362 additions & 933 deletions

File tree

README.ja.md

Lines changed: 89 additions & 233 deletions
Original file line numberDiff line numberDiff line change
@@ -1,285 +1,141 @@
11
# Perfect Text Overlay - パーフェクトテキストオーバーレイ
22

33
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
4+
[![npm version](https://badge.fury.io/js/perfect-text-overlay.svg)](https://www.npmjs.com/package/perfect-text-overlay)
45

56
> 画像生成とテキストレンダリングを分離することで、AI生成画像の文字化け問題を解決します。
67
78
🌐 [English](README.md) | [简体中文](README.zh-CN.md) | [繁體中文](README.zh-TW.md) | **日本語** | [한국어](README.ko.md)
89

910
---
1011

11-
## 概要
12+
## クイックスタート
1213

13-
AIが生成した画像には、特に中国語・日本語・韓国語(CJK)などの非ラテン文字で、文字が化けたり不完全になったりする問題がよくあります。このスキルは、画像生成とテキストレンダリングを2つの独立したステップに分離することで、この問題を解決します:
14+
```bash
15+
# インストール
16+
npm install -g perfect-text-overlay
1417

15-
1. **テキストなしのクリーンなベース画像を生成**
16-
2. **最適なテキスト配置領域を分析**
17-
3. **プロフェッショナルなタイポグラフィとエフェクトでテキストをレンダリング**
18+
# 環境チェック
19+
pto check
1820

19-
## 機能
21+
# フォントダウンロード(オプション)
22+
pto download-fonts --all
2023

21-
- 🎯 **多言語サポート**:簡体字中国語・繁体字中国語・日本語・韓国語・英語
22-
- 🖼️ **複数の画像タイプ**:ポスター・フローチャート・インフォグラフィック・ソーシャルメディア画像
23-
-**プロフェッショナルなタイポグラフィ**:シャドウ・アウトライン・背景ボックス
24-
- 🔤 **無料商用フォント**:6つのオープンソースフォントを含む(SIL OFL / Apache 2.0)
25-
- 🎨 **スマートレイアウト分析**:テキスト配置の安全ゾーンを自動検出
24+
# 使用
25+
pto separate "タイトル'こんにちは世界'のポスターを作成"
26+
```
2627

27-
## 自然言語インストール(AI Agent 向け)
28+
## 機能概要
2829

29-
以下のプロンプトを LLM Agent(Claude Code、Kimi Code、Cursor など)にコピー&ペーストしてください
30+
AIが生成した画像には、特に中国語・日本語・韓国語(CJK)などの非ラテン文字で、文字が化けたり不完全になったりする問題がよくあります。本ツールは以下のステップでこの問題を解決します
3031

31-
```
32-
ワークスペースに perfect-text-overlay スキルをインストールしてください。
33-
クローン元:https://github.com/stephenlzc/perfect-text-overlay
34-
すべての依存関係を設定し、日本語テキスト抽出テストを実行してインストールを確認してください。
35-
```
32+
1. **分離** プロンプト → 画像専用プロンプト + テキスト要件
33+
2. **生成** クリーンなベース画像(お好みのAIツール使用)
34+
3. **分析** 画像から最適なテキスト配置領域を特定
35+
4. **レンダリング** 完璧なテキスト(プロフェッショナルなタイポグラフィ使用)
3636

37-
## ワークフロー
37+
## インストール
3838

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`
6743

68-
## インストール
44+
### NPMインストール(推奨)
45+
```bash
46+
npm install -g perfect-text-overlay
47+
```
6948

49+
### Gitクローン
7050
```bash
71-
# リポジトリをクローン
7251
git clone https://github.com/stephenlzc/perfect-text-overlay
7352
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
8254
```
8355

84-
## 使用方法
56+
## CLI使用方法
8557

86-
### 基本的な例
58+
```bash
59+
# プロンプトを分離
60+
pto separate -p "映画ポスター、タイトルは'インターステラー'"
8761

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":"こんにちは"}]}'
9264

93-
# ステップ 1:プロンプトを分離
94-
user_input = "ポスターを作成して、タイトルは'こんにちは世界'"
95-
result = separate_prompt(user_input)
65+
# テキストをレンダリング
66+
pto render -i base.png -o final.png -p placements.json
9667

97-
# result['image_prompt']: "ポスターを作成..."
98-
# result['text_requirements']: {"text_groups": [{"content": "こんにちは世界"}]}
68+
# 完全なワークフロー
69+
pto workflow -p "ポスター、タイトル'セール'" -i base.png -o final.png
9970

100-
# ステップ 2:ベース画像を生成(お好みの画像生成器を使用)
101-
# ... result['image_prompt'] を使用して画像を生成 ...
71+
# フォントをダウンロード
72+
pto download-fonts --list
73+
pto download-fonts --all
74+
```
10275

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
10777

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');
11580

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+
}
12394
```
12495

125-
### フォントスタイル
96+
## フォントスタイル
12697

127-
以下のフォントスタイルがサポートされています:
98+
| スタイル | 言語 | 説明 |
99+
|----------|------|------|
100+
| `modern` | 中国語 | モダン・シンプル |
101+
| `traditional` | 中国語 | 伝統的な宋体 |
102+
| `traditional_tw` | 中国語(台湾)| 繁体字中国語 |
103+
| `korean` | 韓国語 | 韓国語最適化 |
104+
| `english` | 英語/ラテン | Robotoフォント |
105+
| `calligraphy` | 任意 | アート・書道 |
106+
| `cartoon` | 任意 | キュート・カートゥーン |
128107

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`
138109

139110
## プロジェクト構造
140111

141112
```
142113
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定義
198122
```
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-
### 画像分析器
228123

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+
## ドキュメント
248125

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) - バージョン履歴
271129

272130
## ライセンス
273131

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)
281133

282134
---
283135

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

Comments
 (0)