# Part 2 — UI Rendering \[Simplest UI Application]

### Table of contents

1. [HTML file](#step-1-html-file)
2. [Python script](#step-2-python-script)
3. [Updating debug.env && config.json](#step-3-updating-debug.env-and-and-config.json)
4. [Results](#step-4-results)

### Step 1 — HTML file

This is very similar to a modal window application.\
But now instead of a modal window — a **whole browser page**!

![memo](https://github.githubassets.com/images/icons/emoji/unicode/1f4dd.png) you can preview your HTML in [our Application Designer](https://app.supervisely.com/apps/designer)

Let's create some simple HTML:

**src/gui.html**

```html
<div>
	<sly-field title="INFO: Test massage"
			   description="this is a common template for displaying information"
			   style="padding-top: 0; padding-bottom: 0">

		<sly-icon slot="icon" :options="{ color: '#13ce66', bgColor: '#e1f7eb', rounded: false }">
			<i class="zmdi zmdi-info"></i>
		</sly-icon>
	</sly-field>
	<sly-field title="WARNING: Test message"
			   description="this is a common template for displaying warnings">
		<sly-icon slot="icon" :options="{ color: '#fba607', bgColor: '#ffeee3', rounded: false }">
			<i class="zmdi zmdi-alert-triangle"></i>
		</sly-icon>
	</sly-field>
	<sly-field title="ERROR: Test message"
			   description="this is a common template for displaying errors">
		<sly-icon slot="icon" :options="{ color: '#de1212', bgColor: '#ffebeb', rounded: false }">
			<i class="zmdi zmdi-alert-circle"></i>
		</sly-icon>
	</sly-field>
</div>
```

### Step 2 — Python Script

To keep the application running all the time, we will use the `app.run` method.

**src/main.py**

```python
import supervisely_lib as sly
from dotenv import load_dotenv  # pip install python-dotenv
                                # don't forget to add to requirements.txt!

load_dotenv("../debug.env")
load_dotenv("../secret_debug.env", override=True)

app = sly.AppService()


def main():
    sly.logger.info('Application starting...')
    app.run()


if __name__ == "__main__":
    sly.main_wrapper("main", main)
```

### Step 3 — Updating debug.env && config.json

1. Write `TASK_ID` While True Script from [Part 7](https://github.com/supervisely-ecosystem/how-to-create-app/tree/master/chapter-03-ui/part-07-while-true-script#step-3--results) to `debug.env`\
   We also need to specify the path along which our application can cache debugging data `DEBUG_APP_DIR` and `DEBUG_CACHE_DIR`

**debug.env**

```python
PYTHONUNBUFFERED=1

TASK_ID=7715

context.teamId=238
context.workspaceId=333

DEBUG_APP_DIR="/home/user/app_debug_data/"
DEBUG_CACHE_DIR="/home/user/app_debug_cache/"

LOG_LEVEL="debug"
```

1. Write path to GUI file to `config.json`

**config.json**

```json
{
  "name": "UI Rendering",
  "type": "app",
  "categories": [
    "quickstart"
  ],
  "description": "There will be some description",
  "docker_image": "supervisely/base-py-sdk:6.1.93",
  "main_script": "chapter-03-headless/part-02-ui-rendering/src/main.py",
  "gui_template": "chapter-03-headless/part-02-ui-rendering/src/gui.html",
  "task_location": "workspace_tasks",
  "icon": "https://img.icons8.com/color/100/000000/2.png",
  "icon_background": "#FFFFFF"
}
```

### Step 4 — Results

{% embed url="<https://www.youtube.com/watch?v=bUaAbjJbRh4>" %}
UI Rendering
{% endembed %}


---

# 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/advanced/in-depth-app-development/chapter-3-ui/part-2-ui-rendering-simplest-ui-application.md?ask=<question>
```

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.