Supervisely
About SuperviselyEcosystemContact usSlack
  • 💻Supervisely Developer Portal
  • 🎉Getting Started
    • Installation
    • Basics of authentication
    • Intro to Python SDK
    • Environment variables
    • Supervisely annotation format
      • Project Structure
      • Project Meta: Classes, Tags, Settings
      • Objects
      • Tags
      • Image Annotation
      • Video Annotation
      • Point Clouds Annotation
      • Point Cloud Episode Annotation
      • Volumes Annotation
    • Python SDK tutorials
      • Images
        • Images
        • Image and object tags
        • Spatial labels on images
        • Keypoints (skeletons)
        • Multispectral images
        • Multiview images
        • Advanced: Optimized Import
        • Advanced: Export
      • Videos
        • Videos
        • Video and object tags
        • Spatial labels on videos
      • Point Clouds
        • Point Clouds (LiDAR)
        • Point Cloud Episodes and object tags
        • 3D point cloud object segmentation based on sensor fusion and 2D mask guidance
        • 3D segmentation masks projection on 2D photo context image
      • Volumes
        • Volumes (DICOM)
        • Spatial labels on volumes
      • Common
        • Iterate over a project
        • Iterate over a local project
        • Progress Bar tqdm
        • Cloning projects for development
    • Command Line Interface (CLI)
      • Enterprise CLI Tool
        • Instance administration
        • Workflow automation
      • Supervisely SDK CLI
    • Connect your computer
      • Linux
      • Windows WSL
      • Troubleshooting
  • 🔥App development
    • Basics
      • Create app from any py-script
      • Configuration file
        • config.json
        • Example 1. Headless
        • Example 2. App with GUI
        • v1 - Legacy
          • Example 1. v1 Modal Window
          • Example 2. v1 app with GUI
      • Add private app
      • Add public app
      • App Compatibility
    • Apps with GUI
      • Hello World!
      • App in the Image Labeling Tool
      • App in the Video Labeling Tool
      • In-browser app in the Labeling Tool
    • Custom import app
      • Overview
      • From template - simple
      • From scratch - simple
      • From scratch GUI - advanced
      • Finding directories with specific markers
    • Custom export app
      • Overview
      • From template - simple
      • From scratch - advanced
    • Neural Network integration
      • Overview
      • Serving App
        • Introduction
        • Instance segmentation
        • Object detection
        • Semantic segmentation
        • Pose estimation
        • Point tracking
        • Object tracking
        • Mask tracking
        • Image matting
        • How to customize model inference
        • Example: Custom model inference with probability maps
      • Serving App with GUI
        • Introduction
        • How to use default GUI template
        • Default GUI template customization
        • How to create custom user interface
      • Inference API
      • Training App
        • Overview
        • Tensorboard template
        • Object detection
      • High level scheme
      • Custom inference pipeline
      • Train and predict automation model pipeline
    • Advanced
      • Advanced debugging
      • How to make your own widget
      • Tutorial - App Engine v1
        • Chapter 1 Headless
          • Part 1 — Hello world! [From your Python script to Supervisely APP]
          • Part 2 — Errors handling [Catching all bugs]
          • Part 3 — Site Packages [Customize your app]
          • Part 4 — SDK Preview [Lemons counter app]
          • Part 5 — Integrate custom tracker into Videos Annotator tool [OpenCV Tracker]
        • Chapter 2 Modal Window
          • Part 1 — Modal window [What is it?]
          • Part 2 — States and Widgets [Customize modal window]
        • Chapter 3 UI
          • Part 1 — While True Script [It's all what you need]
          • Part 2 — UI Rendering [Simplest UI Application]
          • Part 3 — APP Handlers [Handle Events and Errors]
          • Part 4 — State and Data [Mutable Fields]
          • Part 5 — Styling your app [Customizing the UI]
        • Chapter 4 Additionals
          • Part 1 — Remote Developing with PyCharm [Docker SSH Server]
      • Custom Configuration
        • Fixing SSL Certificate Errors in Supervisely
        • Fixing 400 HTTP errors when using HTTP instead of HTTPS
      • Autostart
      • Coordinate System
      • MLOps Workflow integration
    • Widgets
      • Input
        • Input
        • InputNumber
        • InputTag
        • BindedInputNumber
        • DatePicker
        • DateTimePicker
        • ColorPicker
        • TimePicker
        • ClassesMapping
        • ClassesColorMapping
      • Controls
        • Button
        • Checkbox
        • RadioGroup
        • Switch
        • Slider
        • TrainValSplits
        • FileStorageUpload
        • Timeline
        • Pagination
      • Text Elements
        • Text
        • TextArea
        • Editor
        • Copy to Clipboard
        • Markdown
        • Tooltip
        • ElementTag
        • ElementTagsList
      • Media
        • Image
        • LabeledImage
        • GridGallery
        • Video
        • VideoPlayer
        • ImagePairSequence
        • Icons
        • ObjectClassView
        • ObjectClassesList
        • ImageSlider
        • Carousel
        • TagMetaView
        • TagMetasList
        • ImageAnnotationPreview
        • ClassesMappingPreview
        • ClassesListPreview
        • TagsListPreview
        • MembersListPreview
      • Selection
        • Select
        • SelectTeam
        • SelectWorkspace
        • SelectProject
        • SelectDataset
        • SelectItem
        • SelectTagMeta
        • SelectAppSession
        • SelectString
        • Transfer
        • DestinationProject
        • TeamFilesSelector
        • FileViewer
        • Dropdown
        • Cascader
        • ClassesListSelector
        • TagsListSelector
        • MembersListSelector
        • TreeSelect
        • SelectCudaDevice
      • Thumbnails
        • ProjectThumbnail
        • DatasetThumbnail
        • VideoThumbnail
        • FolderThumbnail
        • FileThumbnail
      • Status Elements
        • Progress
        • NotificationBox
        • DoneLabel
        • DialogMessage
        • TaskLogs
        • Badge
        • ModelInfo
        • Rate
        • CircleProgress
      • Layouts and Containers
        • Card
        • Container
        • Empty
        • Field
        • Flexbox
        • Grid
        • Menu
        • OneOf
        • Sidebar
        • Stepper
        • RadioTabs
        • Tabs
        • TabsDynamic
        • ReloadableArea
        • Collapse
        • Dialog
        • IFrame
      • Tables
        • Table
        • ClassicTable
        • RadioTable
        • ClassesTable
        • RandomSplitsTable
        • FastTable
      • Charts and Plots
        • LineChart
        • GridChart
        • HeatmapChart
        • ApexChart
        • ConfusionMatrix
        • LinePlot
        • GridPlot
        • ScatterChart
        • TreemapChart
        • PieChart
      • Compare Data
        • MatchDatasets
        • MatchTagMetas
        • MatchObjClasses
        • ClassBalance
        • CompareAnnotations
      • Widgets demos on github
  • 😎Advanced user guide
    • Objects binding
    • Automate with Python SDK & API
      • Start and stop app
      • User management
      • Labeling Jobs
  • 🖥️UI widgets
    • Element UI library
    • Supervisely UI widgets
    • Apexcharts - modern & interactive charts
    • Plotly graphing library
  • 📚API References
    • REST API Reference
    • Python SDK Reference
Powered by GitBook
On this page
  • Options
  • Support for Pretrained and Custom models
  • Support for link to Files or Folders in Team File
  • Custom UI content in Pretrained Models and Custom Models tabs
  • Nested model lists
  • GUI Template Methods
  • gui.get_checkpoint_info()
  • gui.get_model_info()
  • gui.get_device()
  • gui.get_model_source()
  • gui.get_custom link()
  • Example

Was this helpful?

Edit on GitHub
  1. App development
  2. Neural Network integration
  3. Serving App with GUI

Default GUI template customization

PreviousHow to use default GUI templateNextHow to create custom user interface

Last updated 6 months ago

Was this helpful?

We provide features that allow you to customize our basic GUI template for your specific case. More information about using our GUI template can be found on .

Options

Support for Pretrained and Custom models

We support two ways to download neural network weights: external URLs (Pretrained) and internal paths from Team Files (Custom).

If you get your models from your , the artifacts will be uploaded to Team Files, and your Serving App can use the same file structure and be compatible with the Training App. Your app must support Custom models for this case.

If your model weights and configs are saved outside of Supervisely, you can use Pretrained models to provide detailed info in the GUI about each model.

By default, both modes are active and shown in the GUI as two tabs. If you don't want to use Pretrained models, don't implement the get_models() method in your Model class. If you don't want to use Custom models, override the support_custom_models() method to return False as shown below:

def support_custom_models(self) -> bool:
    return False

Support for link to Files or Folders in Team File

For Custom Models, you can set the link type. The default value is file. If you want to use a link to a folder in Team Files and download the directory to use in your Serving App, override the get_custom_model_link_type() method to return the folder value as shown below:

def get_custom_model_link_type(self) -> Literal["file", "folder"]:
    return "folder"

Custom UI content in Pretrained Models and Custom Models tabs

You can use this, for example, to provide more info or media content about your models in the Serving App.

If you want to add some additional info to the Pretrained models tab, you can override the add_content_to_pretrained_tab() method:

def add_content_to_pretrained_tab(self, gui: GUI.BaseInferenceGUI) -> sly.app.widgets.Widget:
    return sly.app.widgets.NotificationBox("some text")

If you want to add some additional info to Custom models tab, you can override the add_content_to_custom_tab() method:

def add_content_to_custom_tab(self, gui: GUI.BaseInferenceGUI) -> sly.app.widgets.Widget:
    return sly.app.widgets.NotificationBox("some text")

You can use existing GUI content in your custom insertions because of the gui parameter provided here. For example, you can subscribe to changing selection in the models table to change something in your custom widgets block.

Nested model lists

If you have a case where you have some pretrained model architectures, and each architecture contains some of the pretrained weights (for example, trained on different datasets or with different parameters), we support Nested models.

In this case, a Select field will be added to choose the architecture, and the model table will contain checkpoints of this architecture.

You can change theget_models() method to use Nested Models. The default format of the method is List[Dict[str, str]]. The required format for using Nested models is Dict[str, Dict[str, List[Dict[str, str]]]].

How it looks like in the example code:

{
    "model_name_1": {
        "paper_from": "ICCV",
        "year": "2021",
        "checkpoints": [
            {
                "Name": "checkpoint_name_1",
                "Dataset": "COCO",
                ...
            },
            {
                "Name": "checkpoint_name_2",
                ...
            }
        ]
    },
    "model_name_2": {
        ...
    }
}

how it looks in the interface (using the application Serve MMSegmentation as an example):

checkpoints, paper_from and year are reserved names in our GUI Template. checkpoints stores list of models info to display in the table, paper_from and year are used to show this as right text in Select field with models:

GUI Template Methods

These methods can be used in your model logic, such as in the load_on_device() method, to retrieve information from the GUI provided by the user.

gui.get_checkpoint_info()

This method returns a dictionary of the selected checkpoint from the model table, only if Pretrained models are supported in your app.

checkpoint_info = self.gui.get_checkpoint_info()

gui.get_model_info()

This method is useful only if you use Nested Models. It returns a dictionary in the format: {selected_architecture_name: checkpoint_info} where selected_architecture_name is the name of the model from the Select field, and checkpoint_info is the result of the gui.get_checkpoint_info() method.

model_info = self.gui.get_model_info()

gui.get_device()

This method returns the name of the selected device to run the model, for example, cpu or cuda:0. The result of this method is automatically provided to the device parameter in the load_on_device(model_dir, device) method.

device = self.gui.get_device()

gui.get_model_source()

This method returns the type of tab that the user selected, either Pretrained models or Custom models.

source_type = self.gui.get_model_source()

gui.get_custom link()

If the model source is Custom models, this method returns the link to the file or folder from Team Files.

custom_model_link = self.gui.get_custom_link()

Example

The default GUI template also supports insertion of any Supervisely to Pretrained models and Custom models tabs. The custom widgets block is placed at the bottom of the tab.

As an example, you can see file in repository of .

For more details, you can refer to the file in the repository.

🔥
Widgets
main.py
Serve ViTPose app
main.py
Serve MMSegmentation app
this page
Training App