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

Update webapp images (#200)

Browse Source
This commit is contained in:
pollfly
2022-03-13 15:07:06 +02:00
committed by GitHub
parent 1ba4fb73b8
commit 913aac4bec
232 changed files with 195 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/webapp/webapp_exp_comparing.md
View File

@@ -22,7 +22,7 @@ The **ClearML Web UI** provides a deep experiment comparison, allowing to locate
- Examine samples with a viewer (for images and video), and a player (for audio) (see [reporting media](../guides/reporting/media_reporting.md)).
The **ClearML** experiment comparison provides [comparison features](#comparison-features) making it easy to compare experiments.
The ClearML experiment comparison provides [comparison features](#comparison-features) making it easy to compare experiments.
## Selecting Experiments to Compare
@@ -166,7 +166,7 @@ This image shows scalars grouped by metric and variant.
## Plots
Visualize the comparison of any data that **ClearML** automatically captures or that is explicitly reported in experiments,
Visualize the comparison of any data that ClearML automatically captures or that is explicitly reported in experiments,
in the **PLOTS** tab.
**To compare plots:**
@@ -277,23 +277,15 @@ Show differences in other experiments in reference to a new base experiment. To
* Click on <img src="/docs/latest/icons/ico-switch-base.svg" alt="Switch base experiment" className="icon size-md space-sm" /> on the top right of the experiment that will be the new base.
* Click on <img src="/docs/latest/icons/ico-pan.svg" alt="Pan" className="icon size-md space-sm" /> the new base experiment and drag it all the way to the left
![image](../img/webapp_compare_22.png)
### Dynamic Ordering of the Compared Experiments
To reorder the experiments being compared, press <img src="/docs/latest/icons/ico-pan.svg" alt="Pan" className="icon size-md space-sm" /> on the top right of the experiment that
needs to be moved, and drag the experiment to its new position.
![image](../img/webapp_compare_21.png)
needs to be moved, and drag the experiment to its new position.
### Removing an Experiment from the Comparison
Remove an experiment from the comparison, by pressing <img src="/docs/latest/icons/ico-remove-compare.svg" alt="Minus" className="icon size-md space-sm" />
on the top right of the experiment that needs to be removed.
![image](../img/webapp_compare_23.png)
### Sharing Experiments
To share a comparison table, copy the full URL from the address bar and send it to a teammate to collaborate. They will

8
docs/webapp/webapp_exp_table.md
View File

@@ -12,7 +12,7 @@ To assist in focusing on active experimentation, experiments and models can be a
in the active experiments and models tables. See [Archiving](webapp_archiving.md).
:::
![Experiment table](../img/webapp_exp_table_01.png)
![Experiment table](../img/webapp_experiment_table.png)
## Experiments Table Columns
@@ -20,7 +20,7 @@ The experiments table default and customizable columns are described in the foll
| Column | Description | Type |
|---|---|---|
| **TYPE** | Type of experiment. **ClearML** supports multiple [task types](../fundamentals/task.md#task-types) for experimentation, and a variety of workflows and use cases. | Default |
| **TYPE** | Type of experiment. ClearML supports multiple [task types](../fundamentals/task.md#task-types) for experimentation, and a variety of workflows and use cases. | Default |
| **NAME** | Experiment name. | Default |
| **TAGS** | Descriptive, user-defined, color-coded tags assigned to experiments. Use tags to classify experiments, and filter the list. See [tagging experiments](webapp_exp_track_visual.md#tagging-experiments). | Default |
| **STATUS** | Experiment state (status). See a list of the [task states and state transitions](../fundamentals/task.md#task-states). | Default |
@@ -60,7 +60,7 @@ Use experiments table customization for various use cases, including:
* Tracking hyperparameters - Track hyperparameters by adding them as columns, and applying filters and sorting.
Changes are persistent (cached in the browser), and represented in the URL so customized settings can be saved in a browser
bookmark and shared with other **ClearML** users to collaborate.
bookmark and shared with other ClearML users to collaborate.
:::note
The following experiments-table customizations are saved on a **per project** basis:
@@ -156,7 +156,7 @@ operations on the selected experiments. Actions can be performed only on the exp
of experiments that can be affected by each action. The same information can be found in the bottom menu, in a tooltip that
appears when hovering over an action icon.
![Experiment table batch operations](../img/webapp_exp_table_batch_operations.png)
![Experiment table batch operations](../img/webapp_experiment_table_context_menu.png)
## Selecting Multiple Experiments

230
docs/webapp/webapp_exp_track_visual.md
View File

@@ -2,7 +2,7 @@
title: Tracking Experiments and Visualizing Results
---
While an experiment is running, and any time after it finishes, track it and visualize the results in the **ClearML Web UI**,
While an experiment is running, and any time after it finishes, track it and visualize the results in the ClearML Web UI,
including:
* [Execution details](#execution-details) - Code, the base Docker image used for [ClearML Agent](../clearml_agent.md), output destination for artifacts, and the logging level.
@@ -56,65 +56,55 @@ table is not visible when the full screen details view is open. Perform experime
</details>
## Execution Details
In the EXECUTION tab of an experiment's detail page, there are records of:
## Execution
An experiment's **EXECUTION** tab of lists the following:
* Source code
* ClearML Agent configuration
* Output details
* Uncommitted changes
* Installed Python packages
* Container details
* Output details
In full-screen mode, the source code and output details are grouped in the **DETAILS** section.
### Source Code, ClearML Agent Configuration, and Output Details
### Source Code
The source code details of the EXECUTION tab of an experiment include:
The Source Code section of an experiment's **EXECUTION** tab includes:
* The experiment's repository
* Commit ID
* Script path
* Working directory
Additionally, there is information about the ClearML Agent configuration. The ClearML Agent base image is a pre-configured
Docker that ClearML Agent will use to remotely execute this experiment (see [Building Docker containers](../clearml_agent.md#exporting-a-task-into-a-standalone-docker-container)).
The output details include:
* The output destination used for storing model checkpoints (snapshots) and artifacts (see also, [default_output_uri](../configs/clearml_conf.md#config_default_output_uri)
in the configuration file, and [output_uri](../references/sdk/task.md#taskinit)
in `Task.init` parameters).
* The logging level for the experiment, which uses the standard Python [logging levels](https://docs.python.org/3/howto/logging.html#logging-levels).
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![Execution details section](../img/webapp_tracking_18.png)
</div>
</details>
![Source code section](../img/webapp_exp_source_code.png)
### Uncommitted Changes
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
ClearML displays the git diff of the experiment in the Uncommitted Changes section.
![Uncommitted changes section](../img/webapp_tracking_19.png)
![Uncommitted changes section](../img/webapp_exp_uncommitted_changes.png)
</div>
</details>
### Installed Packages
The Installed Packages section lists the experiment's installed Python packages and their versions.
![Installed packages section](../img/webapp_exp_installed_packages.png)
### Container
The Container section list the following information:
* Image - a pre-configured Docker that ClearML Agent will use to remotely execute this experiment (see [Building Docker containers](../clearml_agent.md#exporting-a-task-into-a-standalone-docker-container))
* Arguments - add Docker arguments
* Setup shell script - a bash script to be executed inside the Docker before setting up the experiment's environment
### Installed Python Packages and Their Versions
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![Container section](../img/webapp_exp_container.png)
![Installed packages section](../img/webapp_tracking_20.png)
### Output
The Output details include:
* The output destination used for storing model checkpoints (snapshots) and artifacts (see also, [default_output_uri](../configs/clearml_conf.md#config_default_output_uri)
in the configuration file, and `output_uri` in [`Task.init`](../references/sdk/task.md#taskinit) parameters).
</div>
</details>
* The logging level for the experiment, which uses the standard Python [logging levels](https://docs.python.org/3/howto/logging.html#logging-levels).
![Execution details section](../img/webapp_exp_output.png)
## Configuration
@@ -124,66 +114,37 @@ All parameters and configuration objects appear in the **CONFIGURATION** tab.
### Hyperparameters
:::important
In older versions of **ClearML Server**, the **CONFIGURATION** tab was named **HYPER PARAMETERS**, and it contained all parameters. The renamed tab contains a **HYPER PARAMETER** section, and subsections for hyperparameter groups.
In older versions of ClearML Server, the **CONFIGURATION** tab was named **HYPER PARAMETERS**, and it contained all parameters. The renamed tab contains a **HYPER PARAMETER** section, and subsections for hyperparameter groups.
:::
Hyperparameters are grouped by their type and appear in **CONFIGURATION** **>** **HYPER PARAMETERS**.
#### Command Line Arguments
The **Args** parameter group shows automatically logged `argparse` arguments, and all older experiments parameters, except TensorFlow Definitions. Hover over a parameter, and the type, description, and default value appear, if they were provided.
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
The **Args** parameter group shows automatically logged `argparse` arguments, and all older experiments parameters, except
TensorFlow Definitions. Hover over a parameter, and the type, description, and default value appear, if they were provided.
![Command line arguments configuration group](../img/webapp_tracking_22.png)
</div>
</details>
#### Environment Variables
If the `CLEARML_LOG_ENVIRONMENT` variable was set, the **Environment** group will show environment variables (see [this FAQ](../faq.md#track-env-vars)).
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![Environment variables configuration group](../img/webapp_tracking_23.png)
</div>
</details>
#### Custom Parameter Groups
Custom parameter groups show parameter dictionaries if the parameters were connected to the Task, using the `Task.connect` method,
with a `name` argument provided.
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![Custom parameters group](../img/webapp_tracking_25.png)
</div>
</details>
#### TensorFlow Definitions
The **TF_DEFINE** parameter group shows automatic TensorFlow logging.
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![TF_DEFINE parameter group](../img/webapp_tracking_26.png)
</div>
</details>
Once an experiment is run and stored in **ClearML Server**, any of these hyperparameters can be [modified](webapp_exp_tuning.md#modifying-experiments).
### User Properties
@@ -191,45 +152,24 @@ Once an experiment is run and stored in **ClearML Server**, any of these hyperpa
User properties allow to store any descriptive information in a key-value pair format. They are editable in any experiment,
except experiments whose status is *Published* (read-only).
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![User properties section](../img/webapp_tracking_21.png)
</div>
</details>
### Configuration Objects
ClearML tracks experiment (Task) model configuration objects, which appear in **Configuration Objects** **>** **General**.
These objects include those that are automatically tracked, and those connected to a Task in code (see [Task.connect_configuration](../references/sdk/task.md#connect_configuration)).
ClearML supports providing a name for a Task model configuration object (see the [name](../references/sdk/task.md#connect_configuration)
parameter in `Task.connect_configuration`).
![Configuration objects](../img/webapp_tracking_24.png)
ClearML supports providing a name for a Task model configuration object (see the `name`
parameter in [`Task.connect_configuration`](../references/sdk/task.md#connect_configuration)).
![Custom configuration objects](../img/webapp_tracking_28.png)
:::important
In older versions of **ClearML Server**, the Task model configuration appeared in the **ARTIFACTS** tab, **MODEL CONFIGURATION** section. Task model configurations now appear in the **Configuration Objects** section, in the **CONFIGURATION** tab.
:::
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot - Configuration objects </summary>
<div className="cml-expansion-panel-content">
![Configuration objects](../img/webapp_tracking_24.png)
</div>
</details>
<br/>
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot - Custom configuration object</summary>
<div className="cml-expansion-panel-content">
![Custom configuration objects](../img/webapp_tracking_28.png)
</div>
</details>
## Artifacts
@@ -256,56 +196,22 @@ including design, label enumeration, and general information, go to the **MODELS
if it is in a local file.
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![Models in Artifacts tab](../img/webapp_exp_artifacts_01.png)
</div>
</details>
### Other Artifacts
**To retrieve another artifact:**
Other artifacts, which are uploaded but not dynamically tracked after the upload, appear in the **OTHER** section.
They include the file path, file size, and hash.
1. In the **ARTIFACTS** tab **>** **DATA AUDIT** or **OTHER** **>** Select an artifact **>** Either:
**To retrieve Other artifacts:**
* Download the artifact <img src="/docs/latest/icons/ico-download.svg" className="icon size-md space-sm" />, if it is stored in remote storage.
* Copy its location to the clipboard <img src="/docs/latest/icons/ico-clipboard.svg" alt="Copy Clipboard" className="icon size-md space-sm" />,
In the **ARTIFACTS** tab **>** **OTHER** **>** Select an artifact **>** Either:
* Download the artifact <img src="/docs/latest/icons/ico-download.svg" className="icon size-md space-sm" />, if it is stored in remote storage.
* Copy its location to the clipboard <img src="/docs/latest/icons/ico-clipboard.svg" alt="Copy Clipboard" className="icon size-md space-sm" />,
if it is in a local file.
#### Data Audit
Artifacts which are uploaded and dynamically tracked by ClearML appear in the **DATA AUDIT** section. They include the file path, file size, hash, and metadata stored with the artifact.
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![Data audit section](../img/webapp_tracking_29.png)
</div>
</details>
#### Other
Other artifacts, which are uploaded but not dynamically tracked after the upload, appear in the **OTHER** section. They include the file path, file size, and hash.
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![Other artifacts section](../img/webapp_tracking_30.png)
</div>
</details>
## General Information
General experiment details appear in the **INFO** tab. This includes information describing the stored experiment:
@@ -326,19 +232,8 @@ General experiment details appear in the **INFO** tab. This includes information
* Processor
* Python version
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![Info tab](../img/webapp_tracking_31.png)
</div>
</details>
## Experiment Results
@@ -414,15 +309,8 @@ Non-time-series plots appear in **RESULTS** **>** **PLOTS**. These include data
tools, and ClearML explicit reporting. These may include 2D and 3D plots, tables (Pandas and CSV files), and Plotly plots.
Individual plots can be shown / hidden or filtered by title.
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![Plots tab](../img/webapp_tracking_35.png)
</div>
</details>
#### Plot Controls
@@ -460,7 +348,11 @@ These controls allow you to better analyze the results. Hover over a plot, and t
### Debug Samples
View debug samples by metric at any iteration. The most recent iteration appears first. Use the viewer / player to inspect images, audio, video samples and do any of the following:
View debug samples by metric at any iteration. The most recent iteration appears first.
![Debug Samples tab](../img/webapp_tracking_43.png)
Use the viewer / player to inspect images, audio, video samples and do any of the following:
* Move to the same sample in a different iteration (move the iteration slider).
* Show the next or previous iteration's sample.
@@ -468,28 +360,8 @@ View debug samples by metric at any iteration. The most recent iteration appears
* Zoom.
* View the sample's iteration number, width, height, and coordinates.
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot - Debug samples</summary>
<div className="cml-expansion-panel-content">
![Debug Samples tab](../img/webapp_tracking_43.png)
</div>
</details>
<br/>
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot - Viewer </summary>
<div className="cml-expansion-panel-content">
![Debug Samples image viewer](../img/webapp_tracking_44.png)
</div>
</details>
<br/>
**To view debug samples:**
1. Click the **DEBUG SAMPLES** tab. The most recent iteration appears at the top.

4
docs/webapp/webapp_exp_tuning.md
View File

@@ -98,9 +98,9 @@ and formats for specifying locations include:
:::note Set Output Destination for Artifacts
Also set the output destination for artifacts in code (see the `output_uri` parameter of the
[Task.init](../references/sdk/task.md#taskinit)
method), and in the **ClearML** configuration file
method), and in the ClearML configuration file
for all experiments (see [default_output_uri](../configs/clearml_conf.md#config_default_output_uri)
on the **ClearML** Configuration Reference page).
on the ClearML Configuration Reference page).
:::
#### Log Level

2
docs/webapp/webapp_home.md
View File

@@ -8,7 +8,7 @@ The **Dashboard** provides the following options:
* Create new projects
* Open the [**Workers & Queues**](webapp_workers_queues.md) tab to monitor resource utilization and to manage queues.
![image](../img/0100.png)
![Dashboard](../img/webapp_dashboard.png)
**To select a project, experiment, or model:**

2
docs/webapp/webapp_overview.md
View File

@@ -9,7 +9,7 @@ The **ClearML Web UI** is the graphical user interface for the ClearML platform,
* Profile management
* Direct access to the ClearML community (Slack Channel, Youtube, and GitHub).
![image](../img/webapp_screenshots.gif)
![image](../img/gif/webapp_exp_table_cust.gif)
The ClearML Web UI is composed of the following pages:

6
docs/webapp/webapp_projects_page.md
View File

@@ -9,13 +9,11 @@ projects in your workspace. Projects that contain nested subprojects are identif
An exception is the **All Experiments** folder, which shows all projects’ and subprojects’ contents in a single, flat
list.
![Projects page](../img/webapp_projects_page.png)
![Projects page](../img/webapp_project_page.png)
If a project has any subprojects, clicking its folder will open its own project page. Access the projects’ top-level
contents (i.e. experiments, models etc.) via the folder with the bracketed (`[ ]`) project name.
![Subprojects in projects](../img/webapp_projects_inside.png)
If a project does not contain any subprojects, clicking on its folder will open its experiment table (or [Project Overview](webapp_project_overview.md)
page when relevant).
@@ -23,7 +21,7 @@ page when relevant).
Project folders display summarized project information.
![Project card](../img/webapp_projects_card.png)
![Project card](../img/webapp_project_card.png)
When relevant, the folder has a tab which displays the number of subprojects in the project. Click the tab to view a list of
subprojects. Click on a subproject's name to navigate to it.