agencyenterprise · NewtonSander · May 10, 2023 · May 10, 2023 · May 10, 2023 · May 10, 2023
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -32,7 +32,7 @@ jobs:
         uses: snok/[email protected]
         with:
           virtualenvs-create: true
-          virtualenvs-in-project: false
+          virtualenvs-in-project: true
           installer-parallel: true
 
       - name: Load cached poetry dependencies

diff --git a/.github/workflows/web.yml b/.github/workflows/web.yml
@@ -0,0 +1,48 @@
+name: build web
+
+on:
+  pull_request:
+    paths:
+      - "src/web/app/**"
+
+jobs:
+  web:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.head_ref }}
+
+      - name: Use node
+        uses: actions/setup-node@v4
+        with:
+          cache: "npm"
+          cache-dependency-path: "src/web/app/package-lock.json"
+
+      - name: Installing project dependencies
+        run: npm install
+        working-directory: src/web/app
+
+      - name: "Create env file"
+        run: |
+          touch src/web/app/.env
+          echo VUE_APP_BACKEND_URL=localhost:8080 >> src/web/app/.env
+
+      - name: Building the project
+        run: npm run build
+        working-directory: src/web/app
+
+      - uses: vimtor/[email protected]
+        name: Create zip file
+        with:
+          files: src/web/app/dist/
+          dest: src/web/app/dist.zip
+
+      - name: Commit & Push changes
+        uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: Updating web build [skip ci]
+          file_pattern: src/web/app/dist.zip
diff --git a/Dockerfile b/Dockerfile
@@ -1,4 +1,9 @@
-FROM python:3.10.0 as build
+FROM python:3.11.0 as build
+
+# Install system dependencies for HDF5
+RUN apt-get update && apt-get install -y \
+    libhdf5-dev python3-h5py \
+    && rm -rf /var/lib/apt/lists/*
 
 WORKDIR /ndk
 
@@ -19,15 +24,15 @@ ENV POETRY_VIRTUALENVS_CREATE=false
 RUN ./venv/bin/poetry install && \
     ./venv/bin/pip install git+https://github.com/trustimaging/stride@2520c59
 
-FROM python:3.10.0-slim
+FROM python:3.11.0-slim
 
 COPY --from=build /ndk /ndk
 WORKDIR /ndk
 
 RUN ./venv/bin/pip install --upgrade pip
 
 RUN apt-get update && \
-    apt-get install -y g++ jq make unzip wget ffmpeg && \
+    apt-get install -y g++ jq make unzip wget ffmpeg libhdf5-dev python3-h5py  && \
     apt-get clean && \
     rm -rf /var/lib/apt/lists/*
 

diff --git a/Makefile b/Makefile
@@ -1,15 +1,15 @@
-.PHONY:help lint lint-check test test-coverage test-unit test-integration docs
+.PHONY:help lint lint-check test test-coverage test-unit test-integration docs web
 
 help:
-	@echo "Available commands are: \n*lint, lint-check, spellcheck, test, test-unit, test-integration docs"
+	@echo "Available commands are: \n*lint, lint-check, spellcheck, test, test-unit, test-integration docs web"
 
 lint:
 	poetry run isort src tests docs/examples
 	poetry run black src tests docs/examples
-	poetry run flake8 src tests docs/examples
-	poetry run mypy src docs/examples
-	poetry run codespell src docs/examples
-	poetry run pydocstyle src
+	poetry run flake8 --exclude=src/web/app/ src tests docs/examples
+	poetry run mypy --exclude=src/web/app/ src docs/examples
+	poetry run codespell --skip="src/web/app" src docs/examples
+	poetry run pydocstyle --match-dir="^(src/web/app)" src
 	poetry run pyright
 
 spellcheck:
@@ -25,10 +25,10 @@ spellcheck:
 lint-check:
 	poetry run isort --check src tests docs/examples
 	poetry run black --check src tests docs/examples
-	poetry run flake8  src tests docs/examples
-	poetry run mypy src docs/examples
-	poetry run codespell src docs/examples
-	poetry run pydocstyle src
+	poetry run flake8 --exclude=src/web/app/  src tests docs/examples
+	poetry run mypy --exclude=src/web/app/ src docs/examples
+	poetry run codespell --skip="src/web/app" src docs/examples
+	poetry run pydocstyle --match-dir="^(src/web/app)" src
 	poetry run pyright --warnings
 
 test:
@@ -44,4 +44,7 @@ test-integration:
 	poetry run pytest tests -m "integration"
 
 docs:
-	poetry run mkdocs build
+	poetry run mkdocs build
+
+web:
+	poetry run ndk-ui
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -7,3 +7,10 @@ services:
       - ./notebooks:/ndk/notebooks
     ports:
       - 8888:8888
+
+  ndk-ui:
+    image: ghcr.io/agencyenterprise/neurotechdevkit:latest
+    working_dir: /ndk
+    command: python src/web/app.py
+    ports:
+      - 8080:8080
diff --git a/docs/contributing.md b/docs/contributing.md
@@ -37,11 +37,21 @@ If you don't want to install NDK's dependencies on your machine, you can run it
 
 * Run the container, which will start a jupyter notebook server:
    ```
-   docker compose up
+   docker compose up ndk
    ```
 
 * Connect to the jupyter notebook directly in your browser or with your IDE.
 
+
+Alternatively, you can start the web user interface with:
+
+   ```
+   docker compose up ndk-ui
+   ```
+
+* Open the address `http://127.0.0.1:8080/` in your browser to access it.
+
+
 #### Running locally
 
 This project requires Python `>=3.9` and `<3.11` to be installed. You can find the Python version you have installed by running `python --version` in a terminal. If you don't have Python installed or are running an unsupported version, you can download a supported version from [python.org](https://www.python.org/downloads/).

diff --git a/docs/examples/plot_phased_array_source.py b/docs/examples/plot_phased_array_source.py
@@ -213,7 +213,7 @@
 phased_3d = ndk.sources.PhasedArraySource3D(
     position=[0.0, 0.0, 0.0],
     direction=[1.0, 0.0, 0.0],
-    center_line=np.array([0.0, 0.0, 1.0]),
+    center_line=[0.0, 0.0, 1.0],
     num_points=20_000,
     num_elements=16,
     pitch=1.5e-3,

diff --git a/docs/examples/plot_ultrasound_imaging_multiplane.py b/docs/examples/plot_ultrasound_imaging_multiplane.py
@@ -29,7 +29,7 @@
 """
 
 # %%
-from typing import List
+from typing import List, cast
 
 import matplotlib.pyplot as plt
 import numpy as np
@@ -129,6 +129,7 @@ def create_scenario(tilt_angle: float = 0.0) -> Scenario3:
 # - rho - density
 # - alpha - attenuation
 fig, axs = plt.subplots(1, 3, figsize=(15, 5))
+axs = cast(np.ndarray, axs)
 
 for idx, attribute in enumerate(["vp", "rho", "alpha"]):
     im = axs[idx].imshow(getattr(scenario.problem.medium, attribute).data)
@@ -271,7 +272,7 @@ def calc_simulation_time(scenario: Scenario3):
 
 # Plot with some offsets
 CHANNEL_OFFSET = 1000
-_ = plt.plot(
+plt.plot(
     time[valid_time_mask] * 1e3,
     rf_signal_visualize[valid_time_mask]
     + np.linspace(-0.5, 0.5, num=NUM_VISUALIZE, endpoint=True)
@@ -282,9 +283,9 @@ def calc_simulation_time(scenario: Scenario3):
         for (channel_idx, echo_idx) in zip(channel_idxs, pulse_idxs)
     ],
 )
-_ = plt.legend()
-_ = plt.title("Example radiofrequency signals (RF)")
-_ = plt.xlabel("time [ms]")
+plt.legend()
+plt.title("Example radiofrequency signals (RF)")
+plt.xlabel("time [ms]")
 
 # %% [markdown]
 # Plotting across elements (for a single shot) shows the typical

diff --git a/docs/examples/plot_ultrasound_imaging_scanline.py b/docs/examples/plot_ultrasound_imaging_scanline.py
@@ -30,7 +30,7 @@
 """
 
 # %%
-from typing import List
+from typing import List, cast
 
 import matplotlib.pyplot as plt
 import numpy as np
@@ -129,6 +129,7 @@ def create_scenario(tilt_angle: float = 0.0) -> Scenario3:
 # - rho - density
 # - alpha - attenuation
 fig, axs = plt.subplots(1, 3, figsize=(15, 5))
+axs = cast(np.ndarray, axs)
 
 for idx, attribute in enumerate(["vp", "rho", "alpha"]):
     im = axs[idx].imshow(getattr(scenario.problem.medium, attribute).data)
@@ -220,16 +221,16 @@ def calc_simulation_time(scenario: Scenario3):
 time_mask = (40e-6 < time_arr) & (time_arr < 140e-6)
 
 # Plot with some offsets
-_ = plt.plot(
+plt.plot(
     time_arr[time_mask] * 1000,
     rf_signals[time_mask][:, channel_idxs]
     + np.linspace(-1000, 1000, num=NUM_VISUALIZE, endpoint=True),
     label=[f"channel-{channel_idx}" for channel_idx in channel_idxs],
 )
-_ = plt.legend()
-_ = plt.title("Example radiofrequency signals (RF)")
-_ = plt.xlabel("time [ms]")
-_ = plt.ylabel("amplitude and channel offset [a.u]")
+plt.legend()
+plt.title("Example radiofrequency signals (RF)")
+plt.xlabel("time [ms]")
+plt.ylabel("amplitude and channel offset [a.u]")
 
 # %% [markdown]
 # The transmitted signals consisted of a high-frequency pulse, so

diff --git a/docs/images/web_ui.jpg b/docs/images/web_ui.jpg
diff --git a/docs/images/web_ui_first.png b/docs/images/web_ui_first.png
diff --git a/docs/installation.md b/docs/installation.md
@@ -45,11 +45,19 @@ As a last step **before running NDK**, follow the instructions below depending o
 
 ??? "Before running on MacOS"
 
+<<<<<<< HEAD
+    The two main compiler options for MacOS are **clang** and **gcc**.
+
+    ### clang
+
+    If you prefer to use **clang** you will have to install `libomp` and `llvm`, you will also have to export a few environment variables needed by the compiler.
+=======
     The single compiler option for MacOS is **clang**.
 
     ### clang
 
     To setup your environment you will have to install `libomp` and `llvm`, you will also have to export a few environment variables needed by the compiler.
+>>>>>>> main
 
     1. Install libomp
 
@@ -89,6 +97,34 @@ As a last step **before running NDK**, follow the instructions below depending o
         source ~/.zshrc
         ```
 
+<<<<<<< HEAD
+    ### gcc
+
+    On MacOS the `gcc` executable is a symbolic link to `clang`, so by defining ~~DEVITO_ARCH=gcc~~ devito will try to add `gcc` flags to the `clang` compiler, and the compilation will most probably fail.
+
+    You can tell devito to use the correct `gcc` compiler doing the following:
+
+    1. Install gcc-11
+
+        ```
+        brew install gcc@11
+        ```
+
+    1. Run the command that exports the `DEVITO_ARCH` environment variable:
+
+        ```
+        echo 'export DEVITO_ARCH="gcc-11"' >> ~/.zshrc
+        ```
+
+    1. Load the modified zsh configuration file:
+
+        ```
+        source ~/.zshrc
+        ```
+
+
+=======
+>>>>>>> main
 ??? "Before running on Linux"
 
     1. Export the `DEVITO_ARCH` environment variable, or add it to your shell profile:

diff --git a/docs/user_interface.md b/docs/user_interface.md
@@ -0,0 +1,61 @@
+!!! note
+    This functionality is currently under development.
+
+# User Interface
+
+Neurotech Development Kit has a built-in web server that allows you to create and run simulations using your web browser.
+
+
+<figure markdown>
+  ![Web UI](./images/web_ui.jpg){ width="900" }
+</figure>
+
+
+
+## Running
+
+There are multiple ways of running the web server, you can choose between:
+
+### Pip
+
+1. Follow the [installation tutorial](installation.md)
+
+1. Open a terminal and execute
+
+    ```
+    ndk-ui
+    ```
+
+### Virtual environment
+
+1. Follow the *running locally* section of the [contributing tutorial](contributing.md#running-locally)
+
+1. Open a terminal in the project location and run the following command
+
+    ```
+    make web
+    ```
+
+### Docker
+
+1. Install [Docker](https://docs.docker.com/engine/install/#desktop).
+
+1. Open a terminal and run the following command:
+
+   ```
+   docker run -p 8080:8080 -e WEB_SERVER_HOST=0.0.0.0 -w "/ndk" -it ghcr.io/agencyenterprise/neurotechdevkit:latest python src/web/app.py
+   ```
+
+
+## Using
+
+After executing the last step of any of the options described above you will be able to open the address `http://127.0.0.1:8080/` in your browser.
+
+You should be able to select one of the pre-defined scenarios and see its layout:
+
+
+<figure markdown>
+  ![Web UI First](./images/web_ui_first.png){ width="900" }
+</figure>
+
+
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -29,6 +29,7 @@ theme:
 nav:
   - Home: index.md
   - Installation: installation.md
+  - User Interface: user_interface.md
   - Usage:
       - Scenarios: usage/loading_scenarios.md
       - Sources: usage/defining_sources.md