Merge pull request #58 from mlexchange/onsite-dev

Onsite dev

.github/workflows/publish-image.yml

@@ -0,0 +1,45 @@
+name: Create and publish image
+
+on:
+  push:
+    branches: ['main']
+    tags: ['v*']
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  build-and-push-image:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Log in to the Container registry
+        uses: docker/login-action@v2
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: Dockerfile
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

Dockerfile

@@ -0,0 +1,18 @@
+FROM python:3.9
+
+# Create and set working directory
+WORKDIR /app
+
+# Install Python dependencies
+RUN python -m pip install --upgrade pip
+COPY requirements.txt ./
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the remainder of the code into the image
+COPY . ./
+
+EXPOSE 8075
+# Run Dash app with gunicorn
+CMD ["gunicorn", "-b", "0.0.0.0:8075", "--reload", "app:server"]
+# Better than the alternative running of app.py directly with
+#CMD ["python", "app.py"]

README.md

@@ -14,8 +14,8 @@ pip install -r requirements.txt
 2. Configure a connection to the Tiled server via a `.env` file with the following environment variables:
 
 ```
-TILED_URI='https://mlex-segmentation.als.lbl.gov'
-API_KEY='<key-provided-on-request>'
+TILED_URI=https://mlex-segmentation.als.lbl.gov
+API_KEY=<key-provided-on-request>
 ```
 
 3. Start a local server: 
@@ -24,6 +24,15 @@ API_KEY='<key-provided-on-request>'
 python app.py
 ```
 
+### Local tiled connection
+
+To start local tiled connection:
+1. Add `SERVE_LOCALLY=True` flag to `env` file (or to your environmental variables)
+2. Start the app once, which will create `data/` directory and download 2 sample projects with 2 images each.
+3. Open a second terminal and run `tiled serve directory --public data`.
+
+The app will now connect to the local tiled server.
+
 # Copyright
 MLExchange Copyright (c) 2023, The Regents of the University of California, through Lawrence Berkeley National Laboratory (subject to receipt of any required approvals from the U.S. Dept. of Energy). All rights reserved.
 

app.py

@@ -1,9 +1,10 @@
-from dash import Dash
+from dash import Dash, dcc
 import dash_mantine_components as dmc
 from components.control_bar import layout as control_bar_layout
 from components.image_viewer import layout as image_viewer_layout
 from callbacks.image_viewer import *
 from callbacks.control_bar import *
+from callbacks.segmentation import *
 
 app = Dash(__name__)
 server = app.server
@@ -16,7 +17,8 @@
                 control_bar_layout(),
                 image_viewer_layout(),
             ],
-        )
+        ),
+        dcc.Store(id="current-ann-mode"),
     ],
 )
 

assets/style.css

@@ -1,9 +1,8 @@
-/* These css classes highlight the selected annotation color (class)  */
+.flex-row {
+    display: flex;
+    flex-direction: row;
+}
 
-.red>.red-icon,
-.grape>.grape-icon,
-.violet>.violet-icon,
-.blue>.blue-icon,
-.yellow>.yellow-icon {
-    border: 3px solid black;
+.mantine-Grid-col>.mantine-1avyp1d {
+    margin: auto;
 }