Coder Social home page Coder Social logo

tus-image-project's Introduction

TUS Image Project

これは学校の課題です

Demo

Index Gauss Pixel Eyes

目的

写真をアップロードし、顔認識して、顔の部分を自動的にモザイクにしてもらうウェブアプリケーション

Framework

データベースレイヤーがない、プレゼンテーションレイヤーとビジネスレイヤーしかない。大筋はリクエストをPython関数に渡し、Python関数の中に処理する、処理した結果を返す。

Usage

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

# create virtual environment
python -m venv venv

# linux
source venv/bin/activate
# win
source venv/Scripts/activate

# install denpandencies
pip install -r requirements.txt

実行する

# linux
export FLASK_APP=pixelate
# windows
set FLASK_APP=pixelate

flask run

作業のながれ

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

# change branch
git checkout -b feature/<自分で名前をつける>

ファイルを修正した後

git add .
git commit -m "自分のメッセージ"
git push -u origin feature/<自分で名前をつける>

そしてPull Requestsを作ってください。feature/<自分で名前をつける>というbranchで何回commitもできるので、Pull Requestsを作ったでも、修正はまだ追加できる。

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

Pull Requestsを完成したあと、右側でReviewersをクリック、ほかの人にコードのレビューしてもらう。すべてレビューする人はOKだったら、main branchにmergeする

# 今の作業をセーブ
git add . 
git commit -m "save"

git checkout main
git pull
git checkout <自分作業のbranch>
git merge main

衝突があるかもしれません、そのときはmain branchに従うまたは自分で修正します

Path

/

  • Method: GET
  • Params: None
  • Content-Type: text/html
  • Return: html(ウェブページ)

詳細

  • アップロード
  • モザイクのスタイルの選択
  • モザイクのパターンの選択
  • preview機能

/upload-image

  • Method: POST
  • Params: 以下参照
  • Content-Type: multipart/form-data
  • Return: bytes(processed image)

処理流れ

  • 写真を取得する
    • データサイズ制限
    • サイズ制限
  • モザイクのパラメータを取得する
  • 画像に顔認識する
  • モザイクのパラメータによって写真を処理する
  • 処理した写真を返す

リクエスト

name type description
mosaic_type string リクエストのモザイクのパターン
mosaic_style json リクエストのモザイクのスタイル
image blob 画像の内容

レスポンス

name type description
image blob 画像の内容

参考

Blob

画面仕様

/ /(after upload) 全体
- - -

デザインイメージ

機能

顔認識

  • OpenCV
    • Viola & Johns 顔検出器

返すもの List[Position]

pixelate/face_detect/main.py

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

モザイクをつける

一つのスタイル/パターンで、一つのクラスで実装する

  • 目に黒い線をひく
  • モザイクパターン
    • ガウス
    • ピクセル
  • 使うもの
    • OpenCV

クラスデザイン

-

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

class EyesLineMosaicFilter(AbstractMosaicFilter):
  """
  目に黒い線をひく
  """
  pass

class BlurMosaicFilter(AbstractMosaicFilter):
  pass

class GaussBlurMosaicFilter(BlurMosaicFilter):
  """
  モザイクパターン - ガウス
  """
  pass

class PixelBlurMosaicFilter(BlurMosaicFilter):
  """
  モザイクパターン - ピクセル
  """
  pass

tus-image-project's People

Contributors

huhudev-git avatar k1105 avatar mitsukifukuya avatar

Watchers

 avatar

tus-image-project's Issues

フロントエンドの作成

あらすじ

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

仕様図

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

顔認識の機能の実装

あらすじ

顔認識の機能を実装する

詳細

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

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.

参考

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

あらすじ

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

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

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

あらすじ

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

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

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

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

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ごとに必要なスタイルをまとめて、整理する必要がある。 整理したスタイルは、以下のように実装する予定です

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

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

あらすじ

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

作業フォルダ

pixelate/tests

テストリスト

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.