eight0153/CartPole-NEAT

# NEAT Web Interface
The idea is that this web application will provide a graphical 
interface to explore training data that is generated by the NEAT algorithm.
The web interface will be made up of two main services:
1. a RESTful API backed by a relational database
2. an interactive web application.

The API will be implement with flask and be backed by a PostgreSQL database. 
Both NEAT and the web application will consume this API.

The web application will provide a way to interact with, and visualise, training data 
produced by the NEAT algorithm. It will visualise the neural structures generated by NEAT
and ideally provide videos of a given neural structure or creature trying to solve an 
OpenAI Gym environment.

# Getting Started
1.  Make sure you have [Docker](https://docs.docker.com/install/), [Docker Compose](https://docs.docker.com/compose/install/), 
    [Node.js](https://nodejs.org/en/), and [npm](https://www.npmjs.com/get-npm) installed (npm should come bundled with Node.js).

2.  Open your terminal at the repository root directory and then cd into ```web/frontend``` and run ```npm install```:
    ```shell
    $ cd web/frontend
    $ npm install
    ```
 
3.    Go back up one level to the ```web``` directory:
    ```shell
    $ cd ..
    ```
    
4.    Create and setup a ```.env``` file. See the following [section](#configuring-environment-settings) on configuring environment settings.
 
5.    Build with Docker Compose:
    ```shell
    $ docker-compose build
    ```
    
6.    Start the API and web app services:
    ```shell
    $ docker-compose up -d
    ```
    
7.    Test the API:
    ```shell
    $ curl http://127.0.0.1:5000/api
    {
        "hello": "world"
    }
    ```
    or go to http://127.0.0.1:5000/ in your web browser.
    
8.    Open psql on the PostgreSQL server:
    ```shell
    $ docker exec -it api_postgres_1 sh
    / # psql ${POSTGRES_DB} --username=${POSTGRES_USER}
    ```
    You can quit psql with ```\q``` and exit the docker container with ```exit```.
 
9.  Open pgadmin by navigating to http://127.0.0.1:5050/ in your web browser.
    To connect to the PostgreSQL database add a new database via the GUI and for the address enter ```172.18.0.2```. 
    _Note:_ This IP address may be different when you run it. To check what IP address the server is running on run the command:
    ```bash
    $ docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' <postgresql_container_name>
    ```
  
10.  Vist the webpage by navigating to ```http://localhost:3000/``` in your web browser.
    
11.  Stop the API:
    ```shell
    $ docker-compose stop
    ```
    
## Configuring Environment Settings
The four docker services (PostgreSQL database, Pgadmin, flask API, and the 
reactjs server) require some environment variables to be set. Docker Compose will 
automatically load environment variables from a ```.env``` file if one exists in
the same directory as the ```docker-compose.yml``` file. You can create a 
```.env``` file with the following steps:
1.    Create the file ```.env``` in the ```web/``` directory.
    ```shell
    $ cd web/
    $ touch .env
    ```
    
2.    Fill in the following fields:
    1.    POSTGRES_USER
    2.    POSTGRES_PASSWORD
    3.    POSTGRES_DB
    4.    POSTGRES_PORT
    5.  PG_ADMIN_EMAIL
    6.  PG_ADMIN_PASSWORD
    7.  PG_ADMIN_PORT
    8.    FLASK_PORT
    9.  REACT_PORT

### Sample ```.env``` File
```text
POSTGRES_USER=AzureDiamond
POSTGRES_PASSWORD=hunter2
POSTGRES_DB=bash_irc_chat_log
POSTGRES_PORT=5432
PG_ADMIN_EMAIL=AzureDiamond@bashirc.com
PG_ADMIN_PASSWORD=hunter2
PG_ADMIN_PORT=5050
FLASK_PORT=5000
REACT_PORT=3000
```