Skip to content

CLAUDE.md

Latest commit

 

History

History
110 lines (84 loc) · 4.23 KB

CLAUDE.md

File metadata and controls

110 lines (84 loc) · 4.23 KB

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

プロジェクト概要

このプロジェクトは、カラー画像を8色に限定したピクセルアート風の画像に変換するWebサービスです。

主要要件

  • 画像変換: カラー画像を8色のパレットに減色し、低解像度のピクセルアート風に変換
  • Webサービス: ユーザーがブラウザから画像をアップロードして変換結果をダウンロード可能
  • デプロイ: GitHub Actions/GitHub Pagesを使用してWebアプリケーションをホスト

技術スタック

  • バックエンド: Python 3.10+
    • Pillow (PIL) - 画像処理
    • NumPy - 数値計算とクラスタリング
    • scikit-learn - K-means クラスタリングによる色の減色
  • フロントエンド: HTML/CSS/JavaScript (シンプルな静的サイト)
  • デプロイ: GitHub Pages + Pyodide (ブラウザ内Python実行)

プロジェクト構造

ImageToPixelArt/
├── src/
│   ├── pixel_art_converter.py  # 画像変換アルゴリズムのコア実装
│   └── color_quantization.py   # 8色への減色処理
├── web/
│   ├── index.html              # メインページ
│   ├── style.css               # スタイルシート
│   └── app.js                  # フロントエンドロジック
├── tests/
│   └── test_converter.py       # ユニットテスト
├── examples/
│   └── sample_images/          # テスト用サンプル画像
├── .github/
│   └── workflows/
│       └── deploy.yml          # GitHub Actions デプロイ設定
├── requirements.txt            # Python依存関係
└── README.md                   # プロジェクト説明書

画像変換アルゴリズム

処理フロー

  1. 画像の読み込み: Pillowを使用して画像を読み込み
  2. リサイズ: 画像を指定サイズ（例: 64x64ピクセル）にリサイズ
  3. 色の抽出: 画像から全ピクセルの色情報を取得
  4. K-meansクラスタリング: 8つのクラスタに分類して代表色を決定
  5. 色の置換: 各ピクセルを最も近い代表色に置換
  6. ピクセル化: 最終的な低解像度画像として出力

主要パラメータ

  • n_colors: 使用する色数（デフォルト: 8）
  • pixel_size: ピクセルアートのブロックサイズ（デフォルト: 8）
  • output_width: 出力画像の幅（デフォルト: 128ピクセル）

開発用コマンド

# 仮想環境の作成と有効化
python -m venv venv
# Windows: venv\Scripts\activate
# Mac/Linux: source venv/bin/activate

# 依存関係のインストール
pip install -r requirements.txt

# テストの実行
python -m pytest tests/

# ローカルでWebサーバーを起動（開発用）
python -m http.server 8000 --directory web/

# 画像変換のCLIテスト
python src/pixel_art_converter.py input.jpg output.png --colors 8 --pixel-size 8

デプロイ戦略

GitHub Pages + Pyodide

  • Pyodideを使用してブラウザ内でPythonコードを実行
  • 完全に静的なサイトとしてGitHub Pagesでホスト
  • サーバーレスでコスト効率的

GitHub Actions ワークフロー

  1. mainブランチへのプッシュでトリガー
  2. Pythonコードをブラウザ対応形式に変換
  3. GitHub Pagesにデプロイ

実装上の注意点

  1. ブラウザ互換性: Pyodide使用時は、一部のPythonライブラリが制限される可能性がある
  2. パフォーマンス: 大きな画像の処理には時間がかかるため、適切なサイズ制限を設ける
  3. メモリ管理: ブラウザ内での実行のため、メモリ使用量に注意
  4. エラーハンドリング: ユーザーフレンドリーなエラーメッセージを表示

今後の拡張可能性

  • カスタムカラーパレットの指定機能
  • ディザリング効果の追加
  • アニメーションGIFのサポート
  • バッチ処理機能
  • 画像フィルター（レトロゲーム風など）の追加

重要な注意事項

すべての返信は日本語で行うこと。