[v1.0.3] Merge pull request #1 from aporia-ai/making-order

Improving project's order

.github/workflows/release.yml

@@ -12,7 +12,7 @@ jobs:
       with:
         python-version: '3.8'
         architecture: x64
-    - run: make build-game
+    - run: make build
     - run: pip3 install poetry
     - run: poetry build
     - run: poetry publish --username=__token__ --password=${{ secrets.PYPI_TOKEN }}

.gitignore

@@ -2,7 +2,6 @@
 __pycache__/
 *.py[cod]
 *$py.class
-# src/train_invaders/game.wasm
 
 # C extensions
 *.so

Dockerfile → Dockerfile.game

@@ -1,6 +1,8 @@
-FROM ubuntu as build
+# Build game
+FROM ubuntu as game_builder
 RUN apt-get update && \
 	apt-get install -y git python3 && \
+	apt-get install libatomic1 && \
 	mkdir /build && \
 	cd /build && \
 	git clone https://github.com/emscripten-core/emsdk.git
@@ -15,6 +17,9 @@ ENV PATH="${PATH}:/build/emsdk/upstream/bin"
 RUN cd /project && \
 	chmod +x /build/emsdk/emsdk_env.sh && \
 	make compile-game
+RUN cd /project/public && \
+	base64 game.wasm -w 0 > game.txt
 
+# Export game
 FROM scratch AS export
-COPY --from=build /project/public/game.wasm .
+COPY --from=game_builder /project/public/game.txt .

Dockerfile.view

@@ -0,0 +1,15 @@
+# Build view
+FROM node:12 as view_builder
+RUN mkdir -p /app
+WORKDIR /app
+COPY ./src/view/package.json /app
+COPY ./src/view/package-lock.json /app
+RUN npm install
+COPY ./src/view /app
+RUN npm run build
+RUN cd /app/dist && \
+	base64 index.html -w 0 > view.txt
+
+# Export view.txt
+FROM scratch AS export
+COPY --from=view_builder /app/dist/view.txt .

Dockerfile.view.dockerignore

@@ -0,0 +1,4 @@
+src/assets
+src/game
+src/train_invaders
+src/view/node_modules

Makefile

@@ -2,7 +2,7 @@ SHELL := /bin/bash
 
 DEFAULT_VERSION=1.0.0
 
-# Build wasm game
+# Compile wasm game
 compile-game:
 	cd src && \
 	clang \
@@ -24,7 +24,14 @@ compile-game:
 
 # Build game
 build-game:
-	DOCKER_BUILDKIT=1 docker build --file Dockerfile --output ./src/train_invaders .
+	DOCKER_BUILDKIT=1 docker build --file Dockerfile.game --output ./src/view/src/assets .
+
+# Build view
+build-view:
+	DOCKER_BUILDKIT=1 docker build --file Dockerfile.view --output ./src/train_invaders .
+
+# Build TrainInvaders
+build: build-game build-view
 
 # Install dependencies
 install-deps:

README.md

@@ -77,10 +77,11 @@ NO. The game will start and be played **in parallel to the training** and will e
 Have an awesome idea for a new feature? PRs are more than welcome!
 
 1. Clone the project
-2. Implement your idea
-3. Made changes in the game? re-compile it with `make build-game`
-4. Run `pip install . --upgrade`
-5. Test the changes in your notebook
+2. Run `make build-game` to get a local and compiled copy of the game (if not exists)
+2. Enter `src/view` directory and run `npm run serve` to run the local environment
+2. Implement your ideas
+3. Made changes in the game (C files)? Re-run `make build-game` from root dir and check them out
+5. Enter root directory, run `make build`, `pip install . --upgrade` and test the changes in your notebook
 6. PR us!
 
 ## Thanks to 🙏
@@ -90,7 +91,9 @@ Have an awesome idea for a new feature? PRs are more than welcome!
 
 [Vue](https://github.com/vuejs/vue) for the awesome FE framework.
 
-## You may also like... ❤️
+## You may also ❤️
 [Aporia](https://www.aporia.com/?utm_source=train-invaders&utm_medium=docs&utm_campaign=train-invaders) - Customized monitoring for your ML models.
 
+[MLNotify](https://mlnotify.aporia.com/) - Get notified when training is complete.
+
 [MLOps Toys](https://mlops.toys/?utm_source=train-invaders&utm_medium=docs&utm_campaign=train-invaders) - A curated list of useful MLOps tools.

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "train_invaders"
-version = "v1.0.2"
+version = "v1.0.3"
 description = "Jupyter Notebook + Space Invaders!?"
 authors = ["Aporia"]
 readme = "README.md"
@@ -13,7 +13,7 @@ classifiers = [
 
 [tool.poetry.dependencies]
 python = "^3.6"
-ipython = "^7.0.0"
+ipython = "<=7.16"
 
 [tool.poetry.dev-dependencies]
 flake8 = "^3.7.9"

src/train_invaders/index.js

@@ -13,6 +13,7 @@ if (typeof window !== 'undefined' && 'Jupyter' in window) {
 
     if (!cell.__gameInitiated) {
         cell.__isRunning = true
+
         // On cell execution stop
         Jupyter.notebook.events.on('finished_execute.CodeCell', function (evt, data) {
             if (data.cell.cell_id === cellId) {
@@ -21,12 +22,15 @@ if (typeof window !== 'undefined' && 'Jupyter' in window) {
                 cell.__isRunning = false
             }
         });
+
         // On cell execution start
         Jupyter.notebook.events.on('execute.CodeCell', function (evt, data) {
             if (data.cell.cell_id === cellId) {
                 cell.__isRunning = true
             }
         });
+
+        // Notify view when training is finished
         window.addEventListener("message", event => {
             if (event.data.event === `gameTrainingState`) {
                 if (!cell.__isRunning) {
@@ -35,10 +39,12 @@ if (typeof window !== 'undefined' && 'Jupyter' in window) {
                 }
             }
         });
+
         cell.__gameInitiated = true
     }
 }
 
+// Handle game closing
 if(!window.__isThereGameCloseListener) {
     function gameCloseHandler(event) {
         if (event.data.event === `gameClose`) {
@@ -52,11 +58,6 @@ if(!window.__isThereGameCloseListener) {
     window.__isThereGameCloseListener = true
 }
 
-// If online, run the game
-if(navigator.onLine) {
-    getGameIframe().contentDocument.write(atob("$$GAME_HTML_BASE64$$"))
-    getGameIframe().focus()
-} else {
-    getGameIframe().height = 25
-    getGameIframe().contentDocument.write(`[TrainInvaders] No internet connection :(`)
-}
+// Inject base64 view to the iframe
+getGameIframe().contentDocument.write(atob("$$GAME_HTML_BASE64$$"))
+getGameIframe().focus()

src/train_invaders/start.py

@@ -1,4 +1,3 @@
-import base64
 from pathlib import Path
 import sys
 from types import FrameType
@@ -7,7 +6,6 @@
 from IPython.display import display, HTML, Javascript
 
 train_invaders_dir = Path(__file__).parent
-assets_dir = train_invaders_dir / "assets"
 iframe_html = """
     <iframe
         class="game-iframe"
@@ -20,12 +18,8 @@
 """
 
 
-def _get_base64_file(path: Path) -> str:
-    with open(path, mode="rb") as asset:
-        return base64.b64encode(asset.read()).decode("utf-8")
-
-
 def _get_template(path: Path, mapping: Optional[Dict[str, Any]] = None) -> str:
+    """Gets the file and injects the values of the keys from the mapping."""
     with open(path, mode="r") as template_file:
         file = template_file.read()
         if mapping is not None:
@@ -35,41 +29,24 @@ def _get_template(path: Path, mapping: Optional[Dict[str, Any]] = None) -> str:
 
 
 def _call_tracer(frame: FrameType, event: str, arg: Any):
-    # Hook fit/train.. methods calls
+    """Hook fit / train / train_on_batch methods and run the game on their call."""
     if event == "call" and (
         frame.f_code.co_name == "fit"
         or frame.f_code.co_name == "train"
         or frame.f_code.co_name == "train_on_batch"
     ):
 
-        view_script = _get_template(
-            path=train_invaders_dir / "view.js",
-            mapping={
-                "GAME_BINARY_BASE64": _get_base64_file(train_invaders_dir / "game.wasm"),
-                "GAME_HEART_ICON": _get_base64_file(assets_dir / "heart.png"),
-                "GAME_APORIA_LOGO": _get_base64_file(assets_dir / "aporia-logo.png"),
-                "GAME_SUCCESS_ICON": _get_base64_file(assets_dir / "success.png"),
-            },
-        )
-
-        game_html = _get_template(
-            path=train_invaders_dir / "index.html",
-            mapping={
-                "GAME_VIEW_SCRIPT": view_script,
-                "GAME_VIEW_CSS": _get_template(train_invaders_dir / "styles.css"),
-                "GAME_BACKGROUND_BASE64": _get_base64_file(assets_dir / "bg.png"),
-            },
-        )
-
+        # Inject iframe
         display(HTML(iframe_html))
 
-        script_str = _get_template(
-            path=train_invaders_dir / "index.js",
-            mapping={
-                "GAME_HTML_BASE64": base64.b64encode(game_html.encode("utf-8")).decode("utf-8")
-            },
-        )
+        # Inject view inside the logic script
+        with open(train_invaders_dir / "view.txt", mode="r") as view:
+            script_str = _get_template(
+                path=train_invaders_dir / "index.js",
+                mapping={"GAME_HTML_BASE64": view.read()},
+            )
 
+        # Inject the logic
         display(Javascript(script_str))