ClearML/clearml-docs
1
0
Fork 0
mirror of https://github.com/clearml/clearml-docs synced 2025-06-26 18:17:44 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

collapsible panel redesign (#487)

Browse Source
This commit is contained in:
pollfly
2023-02-22 12:29:36 +02:00
committed by GitHub
parent db692908ff
commit ca60eaf36b
15 changed files with 253 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
docs/apps/clearml_session.md
View File

@@ -17,26 +17,19 @@ machine that better meets resource needs. This feature provides local links to a
remote machine over a secure and encrypted SSH connection. By default, the JupyterLab and
VS Code remote sessions use ports 8878 and 8898 respectively.
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">JupyterLab Window</summary>
<div className="cml-expansion-panel-content">
<Collapsible title="JupyterLab Window" type="screenshot">
![image](../img/session_jupyter.png)
</div>
</details>
</Collapsible>
<br/>
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">VS Code Window</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="screenshot" title="VS Code Window">
![image](../img/session_vs_code.png)
</div>
</details>
<br/>
</Collapsible>
:::info Remote PyCharm
You can also work with PyCharm in a remote session over SSH. Use the [PyCharm Plugin](../guides/ide/integration_pycharm.md)

10
docs/deploying_clearml/clearml_config_for_clearml_server.md
View File

@@ -17,9 +17,7 @@ by setting [configuration options](../configs/clearml_conf.md).
clearml-init
```
<details className="cml-expansion-panel info">
<summary className="cml-expansion-panel-summary">Learn about creating multiple ClearML configuration files</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="info" title="Learn about creating multiple ClearML configuration files">
Additional ClearML configuration files can be created, for example, to use inside Docker containers when executing
a Task.
@@ -35,10 +33,8 @@ by setting [configuration options](../configs/clearml_conf.md).
For more information about running experiments inside Docker containers, see [ClearML Agent Deployment](../clearml_agent.md#deployment)
and [ClearML Agent Reference](../clearml_agent/clearml_agent_ref.md).
</div>
</details>
<br/>
</Collapsible>
If the setup wizard's response indicates that a configuration file already exists, follow the instructions in
[here](#add-clearml-to-a-configuration-file). The wizard does not edit or overwrite existing configuration files.

13
docs/deploying_clearml/upgrade_server_linux_mac.md
View File

@@ -2,12 +2,9 @@
title: Linux or macOS
---
<details className="cml-expansion-panel info">
<summary className="cml-expansion-panel-summary">Important: Upgrading from v0.14 or older</summary>
<div class="cml-expansion-panel-content">
<Collapsible title="Important: Upgrading from v0.14 or older" type="info">
For Linux only, if upgrading from <strong>Trains Server</strong> v0.14 or older, configure the <strong>ClearML Agent Services</strong>.
For Linux only, if upgrading from <strong>Trains Server</strong> v0.14 or older, configure the <strong>ClearML Agent Services</strong>.
* If ``CLEARML_HOST_IP`` is not provided, then **ClearML Agent Services** uses the external public address of the ClearML Server.
* If ``CLEARML_AGENT_GIT_USER`` / ``CLEARML_AGENT_GIT_PASS`` are not provided, then **ClearML Agent Services** can't access any private repositories for running service tasks.
@@ -16,15 +13,13 @@ title: Linux or macOS
export CLEARML_HOST_IP=server_host_ip_here
export CLEARML_AGENT_GIT_USER=git_username_here
export CLEARML_AGENT_GIT_PASS=git_password_here
:::note
For backwards compatibility, the environment variables ``TRAINS_HOST_IP``, ``TRAINS_AGENT_GIT_USER``, and ``TRAINS_AGENT_GIT_PASS`` are supported.
:::
</div>
</details>
</Collapsible>
<br/>
**To upgrade ClearML Server Docker deployment:**

7
docs/fundamentals/hpo.md
View File

@@ -33,16 +33,13 @@ The diagram above demonstrates the typical flow of hyperparameter optimization w
![Optimization results summary chart](../img/fundamentals_hpo_summary.png)
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">Parallel coordinate and scalar plots</summary>
<div className="cml-expansion-panel-content">
<Collapsible title="Parallel coordinate and scalar plots" type="screenshot">
![Parallel Coordinates](../img/fundamentals_hpo_parallel_coordinates.png)
![Scalars](../img/fundamentals_hpo_scalars.png)
</div>
</details>
</Collapsible>
### Supported Optimizers

28
docs/guides/frameworks/pytorch/notebooks/table/tabular_training_pipeline.md
View File

@@ -69,9 +69,7 @@ and `fill_numerical_NA`. It will connect a parameter dictionary to the Task whic
The pipeline will override the values of those keys when the pipeline executes the cloned Tasks of the base Task. In this way,
two sets of data are created in the pipeline.
<details className="cml-expansion-panel info">
<summary className="cml-expansion-panel-summary">ClearML tracks and reports the preprocessing step</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="info" title="ClearML tracks and reports the preprocessing step">
In the preprocessing data Task, the parameter values in ``data_task_id``, ``fill_categorical_NA``, and ``fill_numerical_NA`` are overridden.
```python
@@ -111,8 +109,7 @@ Finally, the training data and validation data are stored as artifacts.
![image](../../../../../img/preprocessing_and_encoding_07.png)
</div>
</details>
</Collapsible>
### Training Step
@@ -142,9 +139,7 @@ pipe.add_step(
)
```
<details className="cml-expansion-panel info">
<summary className="cml-expansion-panel-summary">ClearML tracks and reports the training step</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="info" title="ClearML tracks and reports the training step">
In the training Task, the ``data_task_id`` parameter value is overridden. This allows the pipeline controller to pass a
different Task ID to each instance of training, where each Task has an artifact containing different data.
@@ -173,8 +168,7 @@ The TensorFlow Definitions appear in the **TF_DEFINE** subsection.
![image](../../../../../img/train_tabular_predictor_02.png)
</div>
</details>
</Collapsible>
### Best Model Step
@@ -195,9 +189,7 @@ pipe.add_step(
The IDs of the training Tasks from the steps named `train_1` and `train_2` are passed to the best model Task. They take the form `${<stage-name>.<part-of-Task>}`.
<details className="cml-expansion-panel info">
<summary className="cml-expansion-panel-summary">ClearML tracks and reports the best model step</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="info" title="ClearML tracks and reports the best model step">
In the best model Task, the `train_tasks_ids` parameter is overridden with the Task IDs of the two training tasks.
@@ -221,8 +213,7 @@ The model details appear in the **MODELS** table **>** **>GENERAL**.
![image](../../../../../img/tabular_training_pipeline_04.png)
</div>
</details>
</Collapsible>
### Pipeline Start, Wait, and Cleanup
@@ -238,9 +229,7 @@ pipe.wait()
pipe.stop()
```
<details className="cml-expansion-panel info">
<summary className="cml-expansion-panel-summary">ClearML tracks and reports the pipeline's execution</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="info" title="ClearML tracks and reports the pipeline's execution">
ClearML reports the pipeline with its steps in **PLOTS**.
@@ -250,8 +239,7 @@ By hovering over a step or path between nodes, you can view information about it
![image](../../../../../img/tabular_training_pipeline_06.png)
</div>
</details>
</Collapsible>
## Running the Pipeline

28
docs/hyperdatasets/masks.md
View File

@@ -48,11 +48,8 @@ section of a Frame).
This example demonstrates an original image, its masks, and its frame containing
the `sources` and ROI metadata.
<details className="cml-expansion-panel info">
<summary className="cml-expansion-panel-summary">Example 1: View the frame</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="info" title="Example 1: View the frame">
This frame contains the `masks` list of dictionaries in `sources`,
and the `rois` array, as well as several top-level key-value pairs.
@@ -137,9 +134,7 @@ and the `rois` array, as well as several top-level key-value pairs.
}
```
</div>
</details>
<br/>
</Collapsible>
* In `sources`:
@@ -153,10 +148,7 @@ and the `rois` array, as well as several top-level key-value pairs.
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">Example image and masks</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="screenshot" title="Example image and masks">
Original Image
![image](../img/hyperdatasets/concepts_masks_image_only.png)
@@ -165,19 +157,13 @@ Mask image
![image](../img/hyperdatasets/concepts_masks.png)
</div>
</details>
<br/>
</Collapsible>
### Example 2
This example shows two masks for video from a camera. The masks label cars and the road.
<details className="cml-expansion-panel info">
<summary className="cml-expansion-panel-summary">Example 2: View the frame</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="info" title="Example 2: View the frame">
```json
"sources": [
@@ -227,9 +213,7 @@ This example shows two masks for video from a camera. The masks label cars and t
}
```
</div>
</details>
<br/>
</Collapsible>
* In `sources`:
* The source ID is `front`.

9
docs/hyperdatasets/previews.md
View File

@@ -19,9 +19,8 @@ The following is an example of preview metadata.
"timestamp": 0
}
```
<details className="cml-expansion-panel configuration">
<summary className="cml-expansion-panel-summary">View an entire frame containing a preview</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="configuration" title="View an entire frame containing a preview">
```json
{
@@ -95,9 +94,7 @@ The following is an example of preview metadata.
}
```
</div>
</details>
<br/>
</Collapsible>
Here's an example of Previews in the ClearML Enterprise WebApp (UI). Each thumbnail is a Preview.

25
docs/hyperdatasets/single_frames.md
View File

@@ -69,9 +69,7 @@ This is useful when working with a video. You can give all the video frames the
The panel below describes the details contained within a `frame`:
<details className="cml-expansion-panel configuration">
<summary className="cml-expansion-panel-summary">Frame Structure</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="configuration" title="Frame Structure">
* `id` (*string*) - The unique ID of this frame.
* `blob` (*string*) - Raw data.
@@ -130,9 +128,7 @@ The panel below describes the details contained within a `frame`:
* `saved` - The epoch time that the frame was saved.
* `timestamp` - For images from video, a timestamp that indicates the absolute position of this frame from the source (video).
</div>
</details>
<br/>
</Collapsible>
## WebApp
@@ -142,21 +138,16 @@ WebApp (UI).
When viewing a frame on the WebApp, all the information associated with it can be viewed, including its frame labels and
object annotations, its metadata, and other details.
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">SingleFrame in the WebApp frame viewer</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="screenshot" title="SingleFrame in the WebApp frame viewer">
This image shows a SingleFrame in the ClearML Enterprise WebApp (UI) [frame viewer](webapp/webapp_datasets_frames.md#frame-viewer).
![image](../img/hyperdatasets/frame_overview_01.png)
</div>
</details>
<br/>
</Collapsible>
<details className="cml-expansion-panel configuration">
<summary className="cml-expansion-panel-summary">SingleFrame details represented in the WebApp</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="configuration" title="SingleFrame details represented in the WebApp">
id : "287024"
@@ -197,9 +188,7 @@ This image shows a SingleFrame in the ClearML Enterprise WebApp (UI) [frame view
saved_in_version : "6ad8b10c668e419f9dd40422f667592c"
num_frames : 1
</div>
</details>
<br/>
</Collapsible>
For more information about using Frames in the WebApp, see [Working with Frames](webapp/webapp_datasets_frames.md).

25
docs/hyperdatasets/sources.md
View File

@@ -23,9 +23,7 @@ The examples below demonstrate the `sources` section of a Frame for different ty
This example demonstrates `sources` for video.
<details className="cml-expansion-panel info">
<summary className="cml-expansion-panel-summary">Example 1</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="info" title="Example 1">
```json
/* video from one of four cameras on car */
@@ -51,9 +49,7 @@ This example demonstrates `sources` for video.
```
</div>
</details>
<br/>
</Collapsible>
The `sources` example above details a video from a car that has two cameras. One camera
is the source with the ID `front` and the other is the source with the ID `rear`.
@@ -73,9 +69,8 @@ Sources includes a variety of content types. This example shows an mp4 video.
### Example 2: Images Sources
This example demonstrates `sources` images.
<details className="cml-expansion-panel info">
<summary className="cml-expansion-panel-summary">Example 2</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="info" title="Example 2">
```json
/* camera images */
@@ -90,9 +85,7 @@ This example demonstrates `sources` images.
}
```
</div>
</details>
<br/>
</Collapsible>
The `sources` of this frame contains the following information:
* `content_type` - This frame contains an image in `png` format.
@@ -105,9 +98,7 @@ The `sources` of this frame contains the following information:
This example demonstrates `sources` for video, `masks`, and `preview`.
<details className="cml-expansion-panel info">
<summary className="cml-expansion-panel-summary">Example 3</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="info" title="Example 3">
```json
@@ -182,9 +173,7 @@ This example demonstrates `sources` for video, `masks`, and `preview`.
}
```
</div>
</details>
<br/>
</Collapsible>
This frame shows the `masks` section in `sources`, and the top-level `rois` array.

30
docs/hyperdatasets/webapp/webapp_datasets_versioning.md
View File

@@ -73,9 +73,7 @@ Simple frame filtering returns frames containing at least one annotation with a
**To apply a simple frame filter,** select a label from the **LABEL FILTER** list.
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">Simple filter example</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="screenshot" title="Simple filter example">
* The **FRAMES** tab in the image below contains 101 frames.
@@ -86,8 +84,7 @@ Simple frame filtering returns frames containing at least one annotation with a
![Filtered version browser](../../img/hyperdatasets/frame_filtering_02.png)
</div>
</details>
</Collapsible>
### Advanced Frame Filtering
@@ -127,9 +124,7 @@ To clear all filters click <img src="/docs/latest/icons/ico-filter-reset.svg" al
#### Filtering Examples
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">ROI Rules</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="screenshot" title="ROI Rules">
* Create one ROI rule for the `teddy bear` label, which shows the same three frames as the simple frame filter (above).
@@ -144,13 +139,9 @@ To clear all filters click <img src="/docs/latest/icons/ico-filter-reset.svg" al
![Labeled ROIs in frame viewer](../../img/hyperdatasets/frame_filtering_05.png)
</div>
</details>
<br/>
</Collapsible>
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">Frame Rules</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="screenshot" title="Frame Rules">
Filter by metadata using Lucene queries.
@@ -162,13 +153,9 @@ Filter by metadata using Lucene queries.
![Frame metadata in frame viewer](../../img/hyperdatasets/frame_filtering_09.png)
</div>
</details>
<br/>
</Collapsible>
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">Source Rules</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="screenshot" title="Source Rules">
Filter by sources using Lucene queries.
@@ -178,8 +165,7 @@ Filter by sources using Lucene queries.
Lucene queries can also be used in ROI label filters and frame rules.
</div>
</details>
</Collapsible>
### Exporting Frames

23
docs/webapp/datasets/webapp_dataset_viewing.md
View File

@@ -62,39 +62,28 @@ Click on **DETAILS** on the top left of the info panel or hover over a version n
to view:
* **CONTENT** - Table summarizing version contents, including file names, file sizes, and hashes
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">Version Content</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="screenshot" title="Version Content">
![content](../../img/webapp_dataset_content.png)
</div>
</details>
<br/>
</Collapsible>
* **PREVIEW** - A preview of the dataset version's contents
access [plot tools](../webapp_exp_track_visual.md#scalar-plot-tools). Click on a debug sample to expand it.
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">Version Preview</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="screenshot" title="Version Preview">
![preview](../../img/webapp_dataset_preview.png)
</div>
</details>
<br/>
</Collapsible>
* **CONSOLE** - The dataset version’s console output
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">Version Console</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="screenshot" title="Version Console">
![console](../../img/webapp_dataset_console.png)
</div>
</details>
</Collapsible>
<br/>

36
docs/webapp/webapp_exp_track_visual.md
View File

@@ -32,28 +32,22 @@ table / full screen**.
The info panel keeps the experiment table in view so that [experiment actions](webapp_exp_table.md#experiment-actions)
can be performed from the table (as well as the menu in the info panel).
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="screenshot" title="View a screenshot">
![Info panel](../img/webapp_tracking_40.png)
</div>
</details>
</Collapsible>
### Full Screen Details View
The full screen details view allows for easier viewing and working with experiment tracking and results. The experiments
table is not visible when the full screen details view is open. Perform experiment actions from the menu.
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="screenshot" title="View a screenshot">
![Full screen view](../img/webapp_tracking_33.png)
</div>
</details>
</Collapsible>
## Execution
@@ -241,14 +235,11 @@ tools (e.g. Notion). See [Plot Controls](#plot-controls).
The complete experiment log containing everything printed to stdout and stderr appears in the **CONSOLE** tab. The full log
is downloadable. To view the end of the log, click **Jump to end**.
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="screenshot" title="View a screenshot">
![Console tab](../img/webapp_tracking_32.png)
</div>
</details>
</Collapsible>
@@ -270,26 +261,19 @@ are on the left side of the window. The tools include:
* **Group by** - Select one of the following:
* **Metric** - All variants for a metric on the same plot
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="screenshot" title="View a screenshot">
![Plots grouped by metric](../img/webapp_tracking_33.png)
</div>
</details>
<br/>
</Collapsible>
* **None** - Group by metric and variant (individual metric-variant plots).
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="screenshot" title="View a screenshot">
![Plots groups my metric and variant](../img/webapp_tracking_34.png)
</div>
</details>
</Collapsible>
* Show / hide plots - Click **HIDE ALL**, and then click <img src="/docs/latest/icons/ico-show.svg" alt="Eye Show All" className="icon size-md space-sm" />
on those you want to see.