ClearML/clearml-docs
1
0
Fork 0
mirror of https://github.com/clearml/clearml-docs synced 2025-03-10 06:01:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add Gradio and Streamlit apps (#817)

Browse Source
This commit is contained in:
pollfly 2024-04-02 17:19:34 +03:00 committed by GitHub
parent a8b6015f71
commit f5c6d06602
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 220 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
docs/webapp/applications/apps_gradio.md Normal file
View File

@ -0,0 +1,53 @@
---
title: Gradio Launcher
---
:::info Enterprise Feature
The Gradio Launcher App is available under the ClearML Enterprise plan.
:::
[Gradio](https://gradio.app/) is a framework for creating visual web interfaces for your models. The ClearML Gradio
launcher application spins up a Gradio execution environment and serves your Gradio app on a machine of your choice.
Once you start a Gradio launcher instance, you will be provided with an [externally accessible link](#traffic_router) to
your Gradio app, where you can make use of your models.
The Gradio launcher monitors the Gradio app activity and shuts down if it is inactive for a specified maximum idle time.
<a id="traffic_router"/>
:::important Task Traffic Router
The Gradio Launcher relies on the ClearML Traffic Router which facilitates user authentication, and redirects requests
to the IP/port served by the Gradio app.
:::
Once you start a Gradio launcher instance, you can view the following information in its dashboard:
* Gradio App status indicator
* <img src="/docs/latest/icons/ico-gradio-active.svg" alt="Active server" className="icon size-md space-sm" /> - App is running and is actively in use
* <img src="/docs/latest/icons/ico-gradio-loading.svg" alt="Loading server" className="icon size-md space-sm" /> - App is setting up
* <img src="/docs/latest/icons/ico-gradio-idle.svg" alt="Idle server" className="icon size-md space-sm" /> - App is idle
* <img src="/docs/latest/icons/ico-gradio-stopped.svg" alt="Stopped server" className="icon size-md space-sm" /> - App is stopped
* Idle time
* Gradio App - Externally accessible link to your Gradio app. You can send this link to your colleagues, so they can
access the app. Click <img src="/docs/latest/icons/ico-copy-to-clipboard.svg" alt="Copy" className="icon size-sm space-sm" />
to copy link
* Gradio Git repo - Repository that holds the Gradio app script
* Live preview of the Gradio app
* Console Log The console log shows the launcher instance's activity, including server setup progress, server status
changes
## Gradio Launcher Instance Configuration
* **Gradio Instance Name** - Name for the Gradio launcher instance. This will appear in the instance list
* **Project name** - Project where your Gradio launcher app instance task will be stored
* **Task name** - Name of task for your Gradio launcher app instance
* **Git Repository** - Git repository containing the Gradio script
* **Git Branch** - Git branch containing the Gradio script
* **Gradio Script Name** - Name of Gradio script to be executed
* **Queue** - The [ClearML Queue](../../fundamentals/agents_and_queues.md#what-is-a-queue) to which the Gradio launcher
app instance task will be enqueued (make sure an agent is assigned to that queue)
* **Docker Image** - Docker image the ClearML Agent will use for running the Gradio app
* **Arguments** - Arguments to be passed to the script
* **Idle Time Limit** (Hours) - Maximum idle time (Period in which no requests are received by the Gradio app) after
which the Gradio app and the launcher instance will shut down.

2
docs/webapp/applications/apps_overview.md
View File

@ -20,6 +20,8 @@ ClearML provides the following applications:
* [**Trigger Manager**](apps_trigger_manager.md) - Define tasks to be run when predefined events occur (available under ClearML Enterprise Plan)
* [**Jupyter Lab**](apps_jupyter_lab.md) - Launch a Jupyter Lab session on a remote machine (available under ClearML Enterprise Plan)
* [**VS Code**](apps_vscode.md) - Launch a VS Code session on a remote machine (available under ClearML Enterprise Plan)
* [**Gradio Launcher**](apps_gradio.md) - Create visual web interfaces for your models with Gradio (available under ClearML Enterprise Plan)
* [**Streamlit Launcher**](apps_streamlit.md) - Create visual web interfaces for your models with Streamlit (available under ClearML Enterprise Plan)
:::info Autoscalers
Autoscaling ([GPU Compute](apps_gpu_compute.md), [AWS Autoscaler](apps_aws_autoscaler.md), and [GCP Autoscaler](apps_gcp_autoscaler.md))

53
docs/webapp/applications/apps_streamlit.md Normal file
View File

@ -0,0 +1,53 @@
---
title: Streamlit Launcher
---
:::info Enterprise Feature
The Streamlit Launcher App is available under the ClearML Enterprise plan.
:::
[Streamlit](https://streamlit.io/) is a framework for creating visual web interfaces for your models. The ClearML Streamlit
launcher application spins up a Streamlit execution environment and serves your Streamlit app on a machine of your choice.
Once you start a Streamlit launcher instance, you will be provided with an [externally accessible link](#traffic_router) to your Streamlit app,
where you can make use of your models.
The Streamlit launcher monitors the Streamlit app activity and shuts down if it is inactive for a specified maximum idle
time.
<a id="traffic_router"/>
:::important Task Traffic Router
The Streamlit Launcher relies on the ClearML Traffic Router which facilitates user authentication, and redirects requests
to the IP/port served by the Streamlit app.
:::
Once you start a Streamlit launcher instance, you can view the following information in its dashboard:
* Streamlit App status indicator
* <img src="/docs/latest/icons/ico-streamlit-active.svg" alt="Active server" className="icon size-md space-sm" /> - App is running and is actively in use
* <img src="/docs/latest/icons/ico-streamlit-loading.svg" alt="Loading server" className="icon size-md space-sm" /> - App is setting up
* <img src="/docs/latest/icons/ico-streamlit-idle.svg" alt="Idle server" className="icon size-md space-sm" /> - App is idle
* <img src="/docs/latest/icons/ico-streamlit-stopped.svg" alt="Stopped server" className="icon size-md space-sm" /> - App is stopped
* Idle time
* Streamlit App - Externally accessible link to your Streamlit app. You can send this link to your colleagues, so they can
access the app. Click <img src="/docs/latest/icons/ico-copy-to-clipboard.svg" alt="Copy" className="icon size-sm space-sm" />
to copy link
* Streamlit Git repo - Repository that holds the Streamlit app script
* Live preview of the Streamlit app
* Console Log The console log shows the launcher instance's activity, including server setup progress, server status
changes
## Streamlit Launcher Instance Configuration
* **Streamlit Instance Name** - Name for the Streamlit launcher instance. This will appear in the instance list
* **Project name** - Project where your Streamlit launcher app instance task will be stored
* **Task name** - Name of task for your Streamlit launcher app instance
* **Git Repository** - Git repository containing the Streamlit script
* **Git Branch** - Git branch containing the Streamlit script
* **Streamlit Script Name** - Name of Streamlit script to be executed
* **Queue** - The [ClearML Queue](../../fundamentals/agents_and_queues.md#what-is-a-queue) to which the Streamlit launcher
app instance task will be enqueued (make sure an agent is assigned to that queue)
* **Docker Image** - Docker image the ClearML Agent will use for running the Streamlit app
* **Arguments** - Arguments to be passed to the script
* **Idle Time Limit** (Hours) - Maximum idle time (Period in which no requests are received by the Streamlit app) after
which the Streamlit app and the launcher instance will shut down.

4
sidebars.js
View File

@ -140,7 +140,9 @@ module.exports = {
'webapp/applications/apps_task_scheduler',
'webapp/applications/apps_trigger_manager',
'webapp/applications/apps_jupyter_lab',
'webapp/applications/apps_vscode'
'webapp/applications/apps_vscode',
'webapp/applications/gradio',
'webapp/applications/streamlit'
]
},

14
static/icons/ico-gradio-active.svg Normal file
View File

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<g>
<path d="m30.67,6.82l21.91,12.02v7l-21.91-12.02v-7Z" fill="rgba(255, 124, 0, .75)"/>
<path d="m52.58,18.84l-22,12.06v7.05l22-12.06v-7.05Z" fill="#ff7c00"/>
<path d="m8.58,18.84l22,12.06v7.05l-22-12.06v-7.05Z" fill="rgba(255, 124, 0, .75)"/>
<path d="m30.67,6.78l-22.08,12.06v7.05l22.08-12.06v-7.05Z" fill="#ff7c00"/>
<path d="m52.58,37.54v-6.55l-21.91-12.02v7l20.46,11.22c.5.09.99.2,1.46.35Z" fill="rgba(255, 124, 0, .75)"/>
<path d="m49,37c1.25,0,2.45.19,3.58.54v-6.55l-22,12.06v7.05l6.7-3.68c1.18-5.39,5.97-9.43,11.72-9.43Z" fill="#ff7c00"/>
<polygon points="8.58 38.04 30.58 50.11 30.58 43.06 8.58 31 8.58 38.04" fill="rgba(255, 124, 0, .75)"/>
<path d="m30.67,18.93l-22.08,12.06v7.05l22.08-12.06v-7.05Z" fill="#ff7c00"/>
</g>
<path d="m49,39c-5.52,0-10,4.48-10,10s4.48,10,10,10,10-4.48,10-10-4.48-10-10-10Z" fill="#21b553"/>
<path d="m52.42,48.23l-4.06-3.38c-.65-.54-1.64-.08-1.64.77v6.76c0,.85.99,1.31,1.64.77l4.06-3.38c.48-.4.48-1.14,0-1.54Z" fill="#fff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

14
static/icons/ico-gradio-idle.svg Normal file
View File

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<g>
<path d="m30.67,6.82l21.91,12.02v7l-21.91-12.02v-7Z" fill="rgba(255, 124, 0, .75)"/>
<path d="m52.58,18.84l-22,12.06v7.05l22-12.06v-7.05Z" fill="#ff7c00"/>
<path d="m8.58,18.84l22,12.06v7.05l-22-12.06v-7.05Z" fill="rgba(255, 124, 0, .75)"/>
<path d="m30.67,6.78l-22.08,12.06v7.05l22.08-12.06v-7.05Z" fill="#ff7c00"/>
<path d="m52.58,37.54v-6.55l-21.91-12.02v7l20.46,11.22c.5.09.99.2,1.46.35Z" fill="rgba(255, 124, 0, .75)"/>
<path d="m49,37c1.25,0,2.45.19,3.58.54v-6.55l-22,12.06v7.05l6.7-3.68c1.18-5.39,5.97-9.43,11.72-9.43Z" fill="#ff7c00"/>
<polygon points="8.58 38.04 30.58 50.11 30.58 43.06 8.58 31 8.58 38.04" fill="rgba(255, 124, 0, .75)"/>
<path d="m30.67,18.93l-22.08,12.06v7.05l22.08-12.06v-7.05Z" fill="#ff7c00"/>
</g>
<path d="m49,39c-5.52,0-10,4.48-10,10s4.48,10,10,10,10-4.48,10-10-4.48-10-10-10Z" fill="#50beff"/>
<path id="idle-s" d="m50.44,49.24v-4.48c0-.67-.55-1.22-1.22-1.22s-1.22.55-1.22,1.22v4.88s.01.04.01.05c-.01.33.1.66.35.91l4.31,3.61c.12.09.34.25.56.25.43,0,.77-.35.77-.77,0-.21-.1-.39-.23-.55l-3.33-3.91Z" fill="#fff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

32
static/icons/ico-gradio-loading.svg Normal file
View File

@ -0,0 +1,32 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<style>
@keyframes anim {
from {
r: 2px;
}
to {
r: 6px;
}
to {
r: 8px;
}
}
.circle {
animation-name: anim;
animation-duration: 1.2s;
animation-iteration-count: infinite;
}
</style>
<g>
<path d="m30.67,6.82l21.91,12.02v7l-21.91-12.02v-7Z" fill="rgba(255, 124, 0, .75)"/>
<path d="m52.58,18.84l-22,12.06v7.05l22-12.06v-7.05Z" fill="#ff7c00"/>
<path d="m8.58,18.84l22,12.06v7.05l-22-12.06v-7.05Z" fill="rgba(255, 124, 0, .75)"/>
<path d="m30.67,6.78l-22.08,12.06v7.05l22.08-12.06v-7.05Z" fill="#ff7c00"/>
<path d="m52.58,37.54v-6.55l-21.91-12.02v7l20.46,11.22c.5.09.99.2,1.46.35Z" fill="rgba(255, 124, 0, .75)"/>
<path d="m49,37c1.25,0,2.45.19,3.58.54v-6.55l-22,12.06v7.05l6.7-3.68c1.18-5.39,5.97-9.43,11.72-9.43Z" fill="#ff7c00"/>
<polygon points="8.58 38.04 30.58 50.11 30.58 43.06 8.58 31 8.58 38.04" fill="rgba(255, 124, 0, .75)"/>
<path d="m30.67,18.93l-22.08,12.06v7.05l22.08-12.06v-7.05Z" fill="#ff7c00"/>
</g>
<circle class="circle" cx="16" cy="16" r="8" fill="#D3FF00" style="transform: translate(33px, 33px)" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

12
static/icons/ico-gradio-stopped.svg Normal file
View File

@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path d="M30.67 6.81999L52.58 18.84V25.84L30.67 13.82V6.81999Z" fill="#FF7C00" fill-opacity="0.75"/>
<path d="M52.58 18.84L30.58 30.9V37.95L52.58 25.89V18.84Z" fill="#FF7C00"/>
<path d="M8.57999 18.84L30.58 30.9V37.95L8.57999 25.89V18.84Z" fill="#FF7C00" fill-opacity="0.75"/>
<path d="M30.67 6.78L8.59 18.84V25.89L30.67 13.83V6.78Z" fill="#FF7C00"/>
<path d="M52.58 37.54V30.99L30.67 18.97V25.97L51.13 37.19C51.63 37.28 52.12 37.39 52.59 37.54H52.58Z" fill="#FF7C00" fill-opacity="0.75"/>
<path d="M49 37C50.25 37 51.45 37.19 52.58 37.54V30.99L30.58 43.05V50.1L37.28 46.42C38.46 41.03 43.25 36.99 49 36.99V37Z" fill="#FF7C00"/>
<path d="M8.57999 38.04L30.58 50.11V43.06L8.57999 31V38.04Z" fill="#FF7C00" fill-opacity="0.75"/>
<path d="M30.67 18.93L8.59 30.99V38.04L30.67 25.98V18.93Z" fill="#FF7C00"/>
<path d="M49 39C43.48 39 39 43.48 39 49C39 54.52 43.48 59 49 59C54.52 59 59 54.52 59 49C59 43.48 54.52 39 49 39Z" fill="#50BEFF"/>
<rect x="45" y="45" width="8" height="8" rx="1" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

11
static/icons/ico-streamlit-active.svg Normal file
View File

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<g>
<path d="m49,37c1.12,0,2.2.16,3.22.45l5.54-14.2v-.03c.2-.6-.42-1.15-.99-.83h-.01l-15.71,8.3,4.57,6.8c1.07-.31,2.21-.49,3.38-.49Z" fill="#7d353b"/>
<path d="m45.62,37.49l-4.57-6.8-8.22-12.25c-.4-.59-1.28-.59-1.66,0l-8.22,12.25,9.05,4.78,8.9,4.7c1.33-1.23,2.94-2.16,4.73-2.68Z" fill="#bd4043"/>
<path d="m40.89,40.17l-8.9-4.7h0s-9.05-4.78-9.05-4.78l-15.71-8.3s-.04-.01-.06-.01c-.57-.27-1.16.3-.95.87l8,20.41h0s.02.04.02.06c.33.76,1.05,1.23,1.83,1.42.07.01.11.03.19.04.08.02.19.04.28.05.02,0,.03,0,.05,0h.01s.02,0,.03,0h.02s.02,0,.03,0h.02s.02,0,.03,0c6.86.75,13.76.98,20.64.71.59-2.26,1.82-4.25,3.49-5.78Z" fill="#ff4b4b"/>
</g>
<g>
<path d="m49,39c-5.52,0-10,4.48-10,10s4.48,10,10,10,10-4.48,10-10-4.48-10-10-10Z" fill="#21b553"/>
<path d="m52.42,48.23l-4.06-3.38c-.65-.54-1.64-.08-1.64.77v6.76c0,.85.99,1.31,1.64.77l4.06-3.38c.48-.4.48-1.14,0-1.54Z" fill="#fff"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 968 B

9
static/icons/ico-streamlit-idle.svg Normal file
View File

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<g>
<path d="m49,37c1.12,0,2.2.16,3.22.45l5.54-14.2v-.03c.2-.6-.42-1.15-.99-.83h-.01l-15.71,8.3,4.57,6.8c1.07-.31,2.21-.49,3.38-.49Z" fill="#7d353b"/>
<path d="m45.62,37.49l-4.57-6.8-8.22-12.25c-.4-.59-1.28-.59-1.66,0l-8.22,12.25,9.05,4.78,8.9,4.7c1.33-1.23,2.94-2.16,4.73-2.68Z" fill="#bd4043"/>
<path d="m40.89,40.17l-8.9-4.7h0s-9.05-4.78-9.05-4.78l-15.71-8.3s-.04-.01-.06-.01c-.57-.27-1.16.3-.95.87l8,20.41h0s.02.04.02.06c.33.76,1.05,1.23,1.83,1.42.07.01.11.03.19.04.08.02.19.04.28.05.02,0,.03,0,.05,0h.01s.02,0,.03,0h.02s.02,0,.03,0h.02s.02,0,.03,0c6.86.75,13.76.98,20.64.71.59-2.26,1.82-4.25,3.49-5.78Z" fill="#ff4b4b"/>
</g>
<path d="m49,39c-5.52,0-10,4.48-10,10s4.48,10,10,10,10-4.48,10-10-4.48-10-10-10Z" fill="#50beff"/>
<path id="idle-s" d="m50.44,49.24v-4.48c0-.67-.55-1.22-1.22-1.22s-1.22.55-1.22,1.22v4.88s.01.04.01.05c-.01.33.1.66.35.91l4.31,3.61c.12.09.34.25.56.25.43,0,.77-.35.77-.77,0-.21-.1-.39-.23-.55l-3.33-3.91Z" fill="#fff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

8
static/icons/ico-streamlit-loading.svg Normal file
View File

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<g>
<path d="m49,37c1.12,0,2.2.16,3.22.45l5.54-14.2v-.03c.2-.6-.42-1.15-.99-.83h-.01l-15.71,8.3,4.57,6.8c1.07-.31,2.21-.49,3.38-.49Z" fill="#7d353b"/>
<path d="m45.62,37.49l-4.57-6.8-8.22-12.25c-.4-.59-1.28-.59-1.66,0l-8.22,12.25,9.05,4.78,8.9,4.7c1.33-1.23,2.94-2.16,4.73-2.68Z" fill="#bd4043"/>
<path d="m40.89,40.17l-8.9-4.7h0s-9.05-4.78-9.05-4.78l-15.71-8.3s-.04-.01-.06-.01c-.57-.27-1.16.3-.95.87l8,20.41h0s.02.04.02.06c.33.76,1.05,1.23,1.83,1.42.07.01.11.03.19.04.08.02.19.04.28.05.02,0,.03,0,.05,0h.01s.02,0,.03,0h.02s.02,0,.03,0h.02s.02,0,.03,0c6.86.75,13.76.98,20.64.71.59-2.26,1.82-4.25,3.49-5.78Z" fill="#ff4b4b"/>
</g>
<circle class="circle" cx="16" cy="16" r="8" fill="#D3FF00" style="transform: translate(33px, 33px)" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 820 B

9
static/icons/ico-streamlit-stopped.svg Normal file
View File

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<g>
<path d="m49,37c1.12,0,2.2.16,3.22.45l5.54-14.2v-.03c.2-.6-.42-1.15-.99-.83h-.01l-15.71,8.3,4.57,6.8c1.07-.31,2.21-.49,3.38-.49Z" fill="#7d353b"/>
<path d="m45.62,37.49l-4.57-6.8-8.22-12.25c-.4-.59-1.28-.59-1.66,0l-8.22,12.25,9.05,4.78,8.9,4.7c1.33-1.23,2.94-2.16,4.73-2.68Z" fill="#bd4043"/>
<path d="m40.89,40.17l-8.9-4.7h0s-9.05-4.78-9.05-4.78l-15.71-8.3s-.04-.01-.06-.01c-.57-.27-1.16.3-.95.87l8,20.41h0s.02.04.02.06c.33.76,1.05,1.23,1.83,1.42.07.01.11.03.19.04.08.02.19.04.28.05.02,0,.03,0,.05,0h.01s.02,0,.03,0h.02s.02,0,.03,0h.02s.02,0,.03,0c6.86.75,13.76.98,20.64.71.59-2.26,1.82-4.25,3.49-5.78Z" fill="#ff4b4b"/>
</g>
<path d="M49 39C43.48 39 39 43.48 39 49C39 54.52 43.48 59 49 59C54.52 59 59 54.52 59 49C59 43.48 54.52 39 49 39Z" fill="#50BEFF"/>
<rect x="45" y="45" width="8" height="8" rx="1" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 912 B