This project uses Docker, Docker Compose, React, and Flask. Some familiarity with these technologies is assumed throughout this guide.
NOTE: The only requirement is to have Docker and Docker-compose installed on your system!
-
Clone the repository:
git clone https://github.com/OverStruck/deep-dream-maker.git
-
Build development images:
docker-compose -f docker-compose.dev.yml build
-
Run the services/containers:
docker-compose -f docker-compose.dev.yml up
Alternatively you can also build the images and run them at the same time:
docker-compose -f docker-compose.dev.yml up --build
After the containers are running and fully initialized, you can go to http://localhost:9993/
in your favorite web browser and start playing with the app.
Because we are using docker compose, to start editing source code, you can simply head over to your local repository folder and start editing anything you want. The react development server and the flask development server will auto-reload everytime changes are save to a file.
When using the development docker compose file docker-compose.dev.yml
, volumes will be setup automatically. If you haven't worked with volumes, before, please read on that to learn more about what they are. Volumes are what allow you to edit code locally and have the development servers in the containers reload automatically.
This project is essentially a web application, which means there is a front-end and a back-end. The front-end is written in React and uses Material UI. The back-end is written in python and uses Flask.
The respository contains to main folders: webapp and server. Naturally, the front-end is hosted in the webapp folder and the back-end is in the server folder. Each of those folders contains two docker files: Dockerfile
and DockerFile.prod
. For development you'll want to use the first docker file Dockerfile
.
.prod
in DockerFile.prod
stands for production and should be use when you want to build the production version of the software.
The webapp was created using React's Create React App. The source code you'll be interested in working on is inside the src folder.
Folder structure:
- components
- Each react component is here
- routes
- Each "page" is here (i.e Home and About)
- utils
- Just contains utility code
The server was created using Flask in Python. The source code you'll be interested in working on is inside the app folder.
Folder structure:
- api
- Each api end-point is here. For example a request to
/getProgress
is handled bygetProgress.py
)
- Each api end-point is here. For example a request to
- deepdream
- The actual code that process images is here
- utils
- Just contains utility code. The most interesting function here is
processFile
which actually sends the image to the deepdream function in the folder above.
- Just contains utility code. The most interesting function here is
The production version of the server uses gunicorn instead of the built-in development server in Flask. If you want to change the settings for gunicorn, please use the config.py
file inside of the gunicorn folder.
The file wsgi.py
is the entry point for gunicorn. There shouldn't really be a reason to edit this, but feel free if you feel it'll improve something.
Feel free to offer suggestions to improve this guide is there's something else you'd like clarification on.