# Hello World!
## 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`](https://github.com/supervisely-ecosystem/ui-widgets-demos/blob/master/hello_world/src/main.py) is just 26 lines of code.
## Requirements
Install latest [`supervisely`](https://pypi.org/project/supervisely/) version to have access to all [available widgets](https://ecosystem.supervisely.com/docs/table) and [`names`](https://pypi.org/project/names/) library for names generation
```python
names # requires for names generation
supervisely
```
## How to debug this tutorial
**Step 1.** Prepare `~/supervisely.env` file with credentials. [Learn more here.](/getting-started/basics-of-authentication.md#how-to-use-in-python)
**Step 2.** Clone [repository](https://github.com/supervisely-ecosystem/ui-widgets-demos) with source code.
```bash
git clone https://github.com/supervisely-ecosystem/ui-widgets-demos
cd ui-widgets-demos
```
**Step 3** Open repository directory in Visual Studio Code.
```bash
code -r .
```
**Step 4** Create [Virtual Environment](https://docs.python.org/3/library/venv.html)
```python
./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.
```python
{
"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`](https://github.com/supervisely-ecosystem/ui-widgets-demos/blob/master/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.
## Hello, World! app
### Import libraries
```python
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:
```python
load_dotenv("local.env")
load_dotenv(os.path.expanduser("~/supervisely.env"))
api = sly.Api()
```
### Initialize `Text` and `Button` widgets.
```python
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.
```python
layout = Card(
title="Hello, World!",
content=Container([hello_msg, start_btn])
)
```
### Create app using layout
Create an app object with layout parameter.
```python
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.
```python
@start_btn.click
def generate_name():
hello_msg.text = f"Hello, {names.get_first_name()}!"
```
Result
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://developer.supervisely.com/app-development/apps-with-gui/hello-world.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
