Hello World!

Create simple supervisely app with GUI

Introduction

In this tutorial you will learn how to create Supervisely apps with GUI on pure python using Supervisely app engine and widgets. We will create a simple "Hello, World!" app that will generate names using Text and Button widgets.

main.py is just 26 lines of code.

Requirements

Install latest supervisely version to have access to all available widgets and names library for names generation

names # requires for names generation
supervisely

How to debug this tutorial

Step 1. Prepare ~/supervisely.env file with credentials. Learn more here.

Step 2. Clone repository with source code.

git clone https://github.com/supervisely-ecosystem/ui-widgets-demos
cd ui-widgets-demos

Step 3 Open repository directory in Visual Studio Code.

code -r .

Step 4 Create Virtual Environment

./create_venv.sh

Step 5. Open the .vscode/launch.json file in the project and specify the path to your script in launching configuration arguments.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Uvicorn", # ⬅️ Configuration name to select from the dropdown menu in "Run and Debug" section
            "type": "python",
            "request": "launch",
            "module": "uvicorn",
            "args": [
                "hello_world.src.main:app", # ⬅️ Path to your script
                "--host",
                "0.0.0.0",
                "--port",
                "8000",
                "--ws",
                "websockets",
                "--reload"
            ],
            "jinja": true,
            "justMyCode": true,
            "env": {
                "PYTHONPATH": "${workspaceFolder}:${PYTHONPATH}",
                "LOG_LEVEL": "DEBUG",
            }
        }
    ]
}

Step 6. Start debugging hello_world/src/main.py:

• Go to Run and Debug section (Ctrl+Shift+D).

• Select configuration name Uvicorn that you specified in launch.json from configuration dropdown.

• Press green play button or F5 to start debugging.

debug

Hello, World! app

Import libraries

import os

import names  # requires
import supervisely as sly
from dotenv import load_dotenv
from supervisely.app.widgets import Button, Card, Container, Text

Init API client

Init API for communicating with Supervisely instance. First, we load environment variables with credentials:

load_dotenv("local.env")
load_dotenv(os.path.expanduser("~/supervisely.env"))
api = sly.Api()

Initialize Text and Button widgets.

hello_msg = Text(text="Hello, World!", status="text")
start_btn = Button(text="Generate Name", icon="zmdi zmdi-play")

Create app layout

Prepare a layout for app using Card widget with the content parameter and place 2 widgets that we've just created in the Container widget. Place order in the Container is also important, we want the "hello text" to be above the name generation button.

layout = Card(
    title="Hello, World!", 
    content=Container([hello_msg, start_btn])
    )

Create app using layout

Create an app object with layout parameter.

app = sly.Application(layout=layout)

Layout

Handle button clicks

Use the decorator as shown below to handle button click. When we change hello_msg.text value, data will be pushed to web browser via web sockets.

@start_btn.click
def generate_name():
    hello_msg.text = f"Hello, {names.get_first_name()}!"

Result