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 inlaunch.json
from configuration dropdown.Press green play button or
F5
to start debugging.
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.
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)

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()}!"

Last updated
Was this helpful?