huhudev-git / tus-image-project

Collage Groupwork Project

Hi there, I'm huhu👋

Hi, I'm huhu, a Full Stack Developer 🚀 from China. Now living in Japan Tokyo.

• 🔭 I’m currently working on Kubernetes
• 🌱 I’m currently learning Economics
• 📫 How to reach me: [email protected]
• 💬 Ask me about anything, I am happy to help

Languages and Tools:

And more...

tus-image-project's Issues

モザイクパターンにつき、パターンごとにスタイルの調査

あらすじ

現在モザイククラスは下のように設計している

tus-image-project/pixelate/mosaic_style/abstract_mosaic_style.py

Lines 4 to 10 in ad5f038

	class AbstructMosaicStyle(abc.ABC):
	"""モザイクパターンのスタイルパラメータ
	"""
	@abc.abstractclassmethod
	def from_json(cls, json_data):
	return cls()

tus-image-project/pixelate/models/image.py

Lines 3 to 9 in ad5f038

	class Image():
	def __init__(self, image_data: bytes):
	self.data = image_data
	def get_size(self):
	pass

tus-image-project/pixelate/models/position.py

Lines 2 to 8 in ad5f038

	class Position():
	def __init__(self, startX: int, startY: int, endX: int, endY: int) -> None:
	self.startX = startX
	self.startY = startY
	self.endX = endX
	self.endY = endY

tus-image-project/pixelate/mosaic_filter/abstract_mosaic_filter.py

Lines 9 to 26 in ad5f038

	class AbstractMosaicFilter(abc.ABC):
	# フロントエンドのほうのモザイクパターンの名前
	name = None
	@abc.abstractmethod
	def process(self, image: Image, style: AbstructMosaicStyle, positions: List[Position]) -> bytes:
	'''写真を処理し、モザイクをつけた写真を返す
	Args:
	image (bytes): アップロードした写真
	style (Any): モザイクのスタイル
	positions (List[Position]): 顔認識の位置
	Returns:
	bytes: モザイクをつけた写真
	'''
	pass

そこで、具体的なFilterは三パターンある

• EyesLineMosaicFilter
• GaussBlurMosaicFilter
• PixelBlurMosaicFilter

それぞれのパタ―ンについて、スタイルは異なる、例えば：線の厚さ、ガウスの強さ、ピクセルの大きさなど
Filterごとに必要なスタイルをまとめて、整理する必要がある。 整理したスタイルは、以下のように実装する予定です

tus-image-project/pixelate/mosaic_style/abstract_mosaic_style.py

Lines 4 to 10 in ad5f038

	class AbstructMosaicStyle(abc.ABC):
	"""モザイクパターンのスタイルパラメータ
	"""
	@abc.abstractclassmethod
	def from_json(cls, json_data):
	return cls()

フロントエンドの作成

あらすじ

アプリケーションのフロントエンドを作成する（モバイルバージョン）

仕様図

/	/(after upload)	全体

作業方法

git clone https://github.com/huhudev-git/tus-image-project.git
cd tus-image-project

# change branch
git checkout -b feature/frontend

ファイルを修正した後

git add .
git commit -m "自分のメッセージ"
git push -u origin feature/frontend

そしてPull Requestを作ってください

参考：プルリクエストの作成方法

作業フォルダ

• pixelate/templates
  • htmlファイルなど
• pixelate/static
  • 静的ファイルなど(js, css, img)
  • 使う方法：{{ url_for('static', filename='style.css') }}

確認方法

READMEのUsageに従い、実行環境をインストールする、flask runで実行した後、http://localhost:5000で確認してください

参考

Flaskはjinjaというテンプレートエンジンを使っている。情報工学実験２のウェブアプリケーションと同じものであるので、そこに参考してください。jinjaを使って、または単にHTMLを使ってページを作成する、どちらも構わない。自分好きなように作成してください

• Template
• Static Files

顔認識の機能の実装

あらすじ

顔認識の機能を実装する

詳細

入力のは画像のbytesのデータ
出力のはList[Position]

tus-image-project/pixelate/models/position.py

Lines 2 to 8 in ad5f038

	class Position():
	def __init__(self, startX: int, startY: int, endX: int, endY: int) -> None:
	self.startX = startX
	self.startY = startY
	self.endX = endX
	self.endY = endY

つまり、位置情報の配列

ファイル

pixelate/face_detect/main.py中の

def face_detect(image: bytes) -> List[Position]:
    pass

で実行お願いします。pixelate/face_detect/のフォルダに何を作成しても構わない。参考のコードはREADME/deep-learning-face-detectionに置いている

以下いずれを利用する、またはほか何かを使っても構わない

• OpenCV
  • Haar cascades
  • HOG + Linear SVM
  • Deep learning-based face detectors.

参考

• Blur and anonymize faces with OpenCV and Python
• Face detection with OpenCV and deep learning

機能ごとにテストを作成する

あらすじ

現在はプログラムを実行して、テストしかできないため、機能ごとに、テストを実装する。Github ActionでCIで実行する。

作業フォルダ

pixelate/tests

テストリスト

• 顔認識機能テスト
• モザイクつける機能テスト
  • 目に黒線
  • ガウス
  • ピクセル
• httpリクエスト、レスポンス検証
• htmlテンプレートのロジック
• モザイクスタイルの検証
• ほか基本なテスト

モザイクをつける機能の実装

あらすじ

OpenCVを使い、写真にモザイクをつける
#1 をしてから、このタスクをやってください

作業フォルダ

pixelate/mosaic_filter

仕様

class AbstractMosaicFilter(abc.ABC):


    # フロントエンドのほうのモザイクパターンの名前
    name = None


    @abc.abstractmethod
    def process(self, image: Image, style: AbstructMosaicStyle, positions: List[Position]) -> bytes:
        '''写真を処理し、モザイクをつけた写真を返す

        Args:
            image (bytes): アップロードした写真
            style (Any): モザイクのスタイル
            positions (List[Position]): 顔認識の位置

        Returns:
            bytes: モザイクをつけた写真
        '''
        pass

を参考に、以下三つのモザイクパターンを実装する

• pixelate/mosaic_filter/eyes_line_mosaic_filter.py - EyesLineMosaicFilter
• pixelate/mosaic_filter/gauss_blur_mosaic_filter.py - GaussBlurMosaicFilter
• pixelate/mosaic_filter/pixel_blur_mosaic_filter.py - PixelBlurMosaicFilter

---

入力

• image: Image
• style: AbstructMosaicStyle
• positions: List[Position]

出力

• モザイクをつけた写真: bytes

EyesLineMosaicFilter

目に黒い線をつけるモザイクパターン

GaussBlurMosaicFilter

ガウスモザイクパターン

PixelBlurMosaicFilter

ピクセルモザイクパターン