docs: add tensorboard user guide (#2)

* docs: add tensorboard documentation

* Changing the tensorboard usage docs to the controls and page section, adding an intro and changing the tensorboard section on the workspace page accordingly.

* removing tensorboard card from the concepts index page.

---------

Co-authored-by: Egon Borges <[email protected]>

apps/docs/content/docs/concepts/index.mdx

@@ -37,3 +37,4 @@ impacts the results and learning analysis.
     href="/docs/concepts/inference"
   />
 </Cards>
+

apps/docs/content/docs/concepts/network.mdx

@@ -257,6 +257,14 @@ In deepsirius context, fine tuning is the process of retraining a trained
 network with a new set of datasets, if the dataset has different number of
 classes, the drop classifier options should be selected.
 
+<Callout type="info" className="">
+  To perform fine-tuning iterations, you need to add the desired number of new iterations 
+  to the total iterations previously completed. For instance, if you previously performed 1000 iterations 
+  and want to add 100 more, the input should be 1100 iterations.
+  This means the network retains the history of iterations and loss.
+</Callout>
+
+
 ### Drop-classifier
 
 **Behavior when `drop_classifier` is 'selected':**

apps/docs/content/docs/concepts/workspace.mdx

@@ -383,10 +383,7 @@ _Gallery view of a network node showing the tensorboard option._
   This feature is only available for the network and finetune nodes.
 </Callout>
 
-This feature triggers a secondary service that starts a tensorboard view of the
-logs of the training process of the deep learning model. The tensorboard view is
-a tool that helps the user monitor the training process of the deep learning
-model. While the tensorboard view is active, the user can see the training
-evolution of the selected network. If the user leaves the page, the service will
-be stopped and the user will need to start it again to see the training
-evolution.
+When a training job is running, the user can click on the "Open Tensorboard"
+button in the gallery page to open the tensorboard interface in a new tab of the
+browser. Read more about the how to use the tensorboard interface in the
+[controls and pages section](/docs/controls/tensorboard).

apps/docs/content/docs/controls/meta.json

@@ -0,0 +1,4 @@
+{
+    "title": "Controls and pages",
+    "pages": ["controls", "tensorboard"]
+  }

apps/docs/content/docs/controls/tensorboard.mdx

@@ -0,0 +1,118 @@
+---
+title: Using TensorBoard
+description:
+  Use of tensorboard for visualization of training and inference data.
+---
+
+import { Callout } from "fumadocs-ui/components/callout";
+import { ImageZoom } from "fumadocs-ui/components/image-zoom";
+
+import GalleryTensorboard from "@/public/assets/screenshots/page-workspace-gallery-tensorboard.png";
+import PageTensorboard from "@/public/assets/screenshots/page-full-tensorboard.png";
+import TensorImages from "@/public/assets/tensoboard_images.png";
+import TensorLoss from "@/public/assets/tensorboard_loss.png";
+
+When a training job is running, you can monitor the training progress and
+visualize the training data using
+[TensorBoard](https://www.tensorflow.org/tensorboard). TensorBoard is a
+visualization tool that comes with TensorFlow and is used to visualize the
+training process, metrics, and model architecture. It is particularly useful for
+monitoring the training process, debugging, and optimizing the model.
+
+<ImageZoom
+  alt="Launching tensorboard from the gallery page"
+  src={GalleryTensorboard}
+  className="!my-0 !w-full rounded-sm"
+/>
+_Launching tensorboard from the gallery page of a busy finetune node._
+
+The service runs on the same node as the training job and can be accessed
+through the browser via a URL provided in the job logs. When the user clicks on
+the "Open Tensorboard" button in the gallery page, the a new tab will open with
+the tensorboard interface and the user can monitor the training process while
+the job is running. When the job is running, the user can also see a clickable
+link in the gallery, in case the user closes the tensorboard tab. After the job
+is finished, the tensorboard will be disconnected.
+
+<ImageZoom
+  alt="Tensorboard interface"
+  src={PageTensorboard}
+  className="!my-0 rounded-sm"
+/>
+_Tensorboard interface opened in a new tab of the browser._
+
+## Using the Scalars Dashboard
+
+### Navigate to Scalars
+
+In the TensorBoard interface, you will see a sidebar on the left. Click on
+"Scalars" to access the Scalars dashboard.
+
+<Callout type="info" className="">
+  The loss will be shown each 20 iterations steps once the network starts
+  training. The history of the training will be saved and in subsequent
+  fine-tuning process the tensorboard will initialize with previous loss. This
+  means if you want to access history you can just open a fine-tune of 1
+  iteration to open a tensorboard (that won't train, see finetune section).
+</Callout>
+
+### Viewing Scalars
+
+The Scalars dashboard displays graphs of scalar values that are logged during
+training. Those values for DeepSirius are loss and validation loss.
+
+<ImageZoom
+  alt="Loss tensorboard"
+  src={TensorLoss}
+  className="!my-0 rounded-sm"
+/>
+_Tensorboard scalar visualiation with 13k loss._
+
+### Customizing Display
+
+- **Tags:** Tags correspond to the different scalar values logged (e.g., loss,
+  accuracy). You can select or deselect tags to customize the displayed graphs.
+- **Smoothing:** Use the smoothing slider above the graphs to adjust the level
+  of smoothing applied to the scalar graphs. This helps to reduce noise and
+  better visualize trends.
+
+### Refreshing Data
+
+- **Automatic Refresh:** You can adjust the refresh rate by clicking on the
+  settings icon (gear icon) in the top right corner and setting the "Reload data
+  every" option. However, once the job is finished the refresh will show its
+  disconnected.
+- **Manual Refresh:** If you need to manually refresh the data, click the
+  refresh button located near the top right of the Scalars dashboard. This is
+  useful if automatic refresh is too slow or if you suspect new data has been
+  logged but not yet displayed.
+
+### Detailed View
+
+- **Hover for Details:** Hover over any point on the graph to see the exact
+  value at that step.
+- **Zoom:** Click and drag on the graph to zoom into a specific range.
+  Double-click to reset the zoom.
+
+### Exporting Data
+
+- **Download CSV:** You can export the scalar data by clicking on "show dowload
+  options" at the top left, and pressing the download button at the bottom right
+  of the graph for SVG file or downlonad the CSV/JSON at the bottom right.
+
+## Using the Images Dashboard
+
+Each class will otuput a probability map, once the tensorboard and the job is
+running, you can see the output of each patch in the image section. Above each
+image will contain information if its a ground truth image, an inference image
+or the original image and the step of inference. To acess other available steps,
+slide the bar right above each image.
+
+<ImageZoom
+  alt="Loss tensorboard"
+  src={TensorImages}
+  className="!my-0 rounded-sm"
+/>
+_Tensorboard Image Visualization: Only training inference is selected. For the 13,000th
+step, the images are displayed in the following order: the original label (ground
+truth), the original image, and the output probability map of the class._