> For the complete documentation index, see [llms.txt](https://cbe-berkeley.gitbook.io/advanced-berkeley-comfort-abc-model/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cbe-berkeley.gitbook.io/advanced-berkeley-comfort-abc-model/documentation/web-interface.md).

# Web interface

Description about Web user interface

## Overview

This graphical user interface allows you to interact with the ABC model. The interface performs the following steps to run the model:

1. **Create JSON file** - Generate a JSON file with the input conditions set by the user on the interface.
2. **Send to API** - Send the JSON file to the ABC model API.
3. **Receive results** - Receive the simulation results from the ABC model API.
4. **Visualize results** - Visualize the results on the interface.

## Entry page

This is the entry page of the Advanced Berkeley Comfort Tool. On this page, you can set the conditions for the thermal environment you want to simulate. 

We will explain in more detail below but let's first try a quick simulation using the following features:

1. **Set the number of conditions** - Add conditions to simulate, such as Condition #1, Condition #2, etc.
2. **Change/Delete condition names** - Rename conditions or delete unnecessary ones.
3. **Set input conditions -** In each condition, configure exposure time and thermal environment settings (e.g., a person is sitting at 25C of air temperature for 60 minutes ). 
4. **Run simulation** - Click the **"Simulation"** button.

<figure><img src="https://53252572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzEowbR1lycfIEnfU8Xwf%2Fuploads%2F8sBRIRoNLrBQUc2dZcAo%2Fimage.png?alt=media&amp;token=f943cfe2-caaf-4295-aeb1-c6a3aeb05aed" alt=""><figcaption></figcaption></figure>

## Main page

This page appears after running a simulation. The left side displays the input conditions, and the right side shows the output results. You can edit the input conditions and run the simulation again on this page.

**Input section (left side):**

* Edit your input conditions here.

**Output section (right side):**

* **Time-series results:** Displays your selected result over time.
* **3D manikin:** Visualizes results for different body parts. Clicking on any time point in the time-series data updates the manikin with data from that moment.
* **Body segment selector:** Select different body segments (Overall, Head, Chest, Arm, etc.) to display.
* **Result item selector:** Select result items (Comfort, Sensation, Skin temperature, Core temperature, etc.) to display.
* **CSV export button:** Save all the simulation results to your local device.

<figure><img src="https://53252572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzEowbR1lycfIEnfU8Xwf%2Fuploads%2FpCLcNatwZkkPih1Bislo%2Fimage.png?alt=media&amp;token=0cc6c67f-0a8d-4160-aede-d14990f58ea7" alt=""><figcaption></figcaption></figure>