Blooming : Image Style Transfer Website

'Blooming 🌼' is a website to change the image style to the style you want.

Given one content image and one style image, we create a new, target image which should contain our desired content and style components.

An example is shown below, where the content image is of a woman, and the style image is of Starry night. The generated target image still contains the woman but is stylized with the colors and textures of the style image.

Features

Tech Stack

Backend: Flask
Frontend: React
Middleware: Gunicorn
Nginx
Docker
Database: MySQL

Frontend	Backend	etc

Used Model

Image Style Transfer model from Tensorflow-hub

System Architecture

Initialization

• clone the repository

  $ git clone https://github.com/SiliconValleyInternship-Lambda/ImageStyleTransfer.git
  $ cd ImageStyleTransfer
  

1. Backend: Flask 🌶

• Install required pip packages

  $ cd flask_backend
  $ pip install -r requirements.txt
  

  pip packages

  flask
  jsonify
  requests
  tensorflow>=2.0.0
  tensorflow-hub
  pillow
  pymysql
  

• Flask run

  $ flask run
  

2. Frontend: React ❄

• Install npm packages

  $ cd react_frontend
  $ npm install
  

  npm packages (libraries)

  "@emotion/core"
  "@emotion/react"
  "@emotion/styled"
  "@material-ui/core"
  "@material-ui/icons"
  "@testing-library/jest-dom"
  "@testing-library/react"
  "@testing-library/user-event"
  "axios"
  "bootstrap"
  "material-ui-icons"
  "react",
  "react-bootstrap"
  "react-dom"
  "react-dropzone"
  "react-grid-gallery"
  "react-notifications"
  "react-notifications-component"
  "react-router-dom"
  "react-scripts"
  "react-spinners"
  "semantic-ui-css"
  "semantic-ui-react"
  "styled-components"
  "web-vitals"
  

• build and run

  $ npm run build
  $ npm start
  

3. Docker 🐳

• docker compose build and up

$ cd ImageStyleTransfer
$ docker-compose up --build

1. build the docker image

   $ docker-compose build
   

2. docker compose run

   $ docker-compose up
   

   Note:

   docker compose run with daemon mode

   $ docker-compose up -d
   

Nginx

• Frontend

  http://localhost:80
  

• Backend

  http://localhost:8000
  

Flask Python application

http://localhost:5000

React application

http://localhost:3000

4. Database: MySQL 🗂

http://host_ip:3306

Author

• 2021 Silicon Valley Winter Online Internship Program - Team L 'Lambda'

Boyun Seo	Soyeong Kim	Soobin Jung	Hakjun Moon
@boyuuuun	@kimsoyeong	@SoobinJung1013	@MHJworld