# Installation

By clicking the tab in each page, you can get the information related to the title of the tab.

{% tabs %}
{% tab title="Packing Environment" %}
We use Docker to pack our analysis tool, if you don't have Docker, please download and install it.

* ***Windows*** download: [Windows Docker install link](https://hub.docker.com/)
* ***Mac*** download: [Mac Docker install link](https://docs.docker.com/desktop/install/mac-install/)

If you are experiencing trouble installing Docker, we also provide a web page tool with memory limitations. Please click the `Web Page Usage` tab to get more information.

{% endtab %}

{% tab title="Web Page Usage" %}

1. Create a [GitHub](https://github.com/) account. If you've already had a GitHub account, please sign in.

<figure><img src="https://3227270621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eW3hrips7DELaARDAVi%2Fuploads%2FjtRjiAzdjzCkIKXD89Be%2FMy%20project-1%20(45).png?alt=media&#x26;token=eb8c075b-1d71-459d-9d1f-d426806bb5ce" alt=""><figcaption></figcaption></figure>

2. Go to our [audioviz's github](https://github.com/Keycatowo/audioviz-webui). Change the branch to `cloud` branch.

<figure><img src="https://3227270621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eW3hrips7DELaARDAVi%2Fuploads%2FQsosT3yzXhhADCBoN41l%2FMy%20project-1%20(38).png?alt=media&#x26;token=c21f38a1-8a8b-4d74-bc9a-d9ca37a694e1" alt=""><figcaption></figcaption></figure>

3. Create a fork of audioviz program to your own GitHub account. &#x20;

<figure><img src="https://3227270621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eW3hrips7DELaARDAVi%2Fuploads%2FKUiC1hbbEvGQOpQxDFOW%2FMy%20project-1%20(39).png?alt=media&#x26;token=941a1e2a-1393-4bdb-85c2-1d84a8cbfceb" alt=""><figcaption></figcaption></figure>

4. Open [Streamlit](https://streamlit.io/) and create an account.&#x20;

<figure><img src="https://3227270621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eW3hrips7DELaARDAVi%2Fuploads%2F9KyAspFoTc9sHc4XRfCZ%2FMy%20project-1%20(44).png?alt=media&#x26;token=28190939-e8cd-476f-b29a-1815d03026a0" alt=""><figcaption></figcaption></figure>

5. After sign in, choose `Connect GitHub account`.

<figure><img src="https://3227270621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eW3hrips7DELaARDAVi%2Fuploads%2FK6ywtYIOltptSM2tInWS%2FMy%20project-1%20(40).png?alt=media&#x26;token=0cab31b8-2049-4cf8-9bec-b2583a926046" alt=""><figcaption></figcaption></figure>

6. Click the `New app` button to start creating your own app.

<figure><img src="https://3227270621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eW3hrips7DELaARDAVi%2Fuploads%2FlhDU2KEo0eYLRZlyTkCE%2FMy%20project-1%20(46).png?alt=media&#x26;token=b1c95bab-9c1f-48a8-b4e6-6f9dd8454e30" alt=""><figcaption></figcaption></figure>

7. Give the authorization of your GitHub for audioviz's repository.

<figure><img src="https://3227270621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eW3hrips7DELaARDAVi%2Fuploads%2FqnpaLaoBbuBexYua58Sm%2FMy%20project-1%20(42).png?alt=media&#x26;token=5d491ed1-ba32-46a8-9de1-45a088966d50" alt=""><figcaption></figcaption></figure>

8. Fill in the place where arrows are pointing. Then click the `Deploy` button and you can deploy your own audioviz program.

<figure><img src="https://3227270621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eW3hrips7DELaARDAVi%2Fuploads%2FtycDaEKrutdaS1C4gJwx%2FMy%20project-1%20(43).png?alt=media&#x26;token=e350edbc-9a59-4e61-9304-a5bdd88e2e4b" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Docker installation" %}

### **For Windows/Mac with Intel chip system:**

1. If you do not have an account of dockerhub, please register one first.

<figure><img src="https://3227270621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eW3hrips7DELaARDAVi%2Fuploads%2FQxwz2gpdktyAOm3tabuT%2FMy%20project-1%20(25).png?alt=media&#x26;token=2bde9ce9-fdbe-4334-979a-7da382807ddd" alt=""><figcaption></figcaption></figure>

2. Click the `Download for Windows` button to download the dockhub. Run the `Docker Desktop Installer.exe` file for installation.

<figure><img src="https://3227270621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eW3hrips7DELaARDAVi%2Fuploads%2FPNRfpXwueSL9S5JrCMyi%2FInkedMy%20project-1%20(26).jpg?alt=media&#x26;token=b128e295-1faf-4c44-a916-3f15f1033f69" alt=""><figcaption></figcaption></figure>

3. Press OK for the configuration. For easy finding, it's also recommended to check the desktop icon.&#x20;

<figure><img src="https://3227270621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eW3hrips7DELaARDAVi%2Fuploads%2FB0fyPJboRYJr5Ls6nTpp%2FMy%20project-1%20(27).png?alt=media&#x26;token=7f0c9803-0c36-4078-aa58-d5893dd0dfe4" alt=""><figcaption></figcaption></figure>

4. It'll take some time for installation. After installation, click the `Close and restart` button to set up the environment.

<figure><img src="https://3227270621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eW3hrips7DELaARDAVi%2Fuploads%2FGhVnjUkpqAPAA0F2VkR8%2Fimage.png?alt=media&#x26;token=9e3914b8-154b-4063-9f21-3f80e6131baa" alt=""><figcaption></figcaption></figure>

### An example of Docker installation steps in Mac system with Apple silicon

1. Download the latest version of Docker Desktop from [Docker's site](https://docs.docker.com/desktop/install/mac-install/).
2. Open the downloaded file and drag the Docker.dmg file to your **Applications** folder.

<figure><img src="https://3227270621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eW3hrips7DELaARDAVi%2Fuploads%2FH9Oam7Rqg4ZbULauh2kU%2Fimage.png?alt=media&#x26;token=c32898f4-5c55-41a1-bd40-b6e38688acba" alt=""><figcaption></figcaption></figure>

3. Open the Docker app from the Applications folder.
4. Type in your Mac's password when prompted.

<figure><img src="https://3227270621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eW3hrips7DELaARDAVi%2Fuploads%2FHHIW5yg8VA2YVVREszHT%2Fimage.png?alt=media&#x26;token=3ab51513-c936-4b62-a29c-d038ac8744ef" alt=""><figcaption></figcaption></figure>

5. After this, Docker will configure itself automatically.

<figure><img src="https://3227270621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eW3hrips7DELaARDAVi%2Fuploads%2FGtnbGW5w51ixE2JWB5aW%2Fimage.png?alt=media&#x26;token=5a6dbd6c-5ad1-473f-944d-dca2c08a26d8" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Instructions for Start Running audioviz" %}

1. Open your Docker Desktop and you will see the following window:

<figure><img src="https://3227270621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eW3hrips7DELaARDAVi%2Fuploads%2F33MdgJXWjz0BVCm2qnbZ%2Fdocker%E4%BB%8B%E9%9D%A2.PNG?alt=media&#x26;token=d0916904-26e3-4e5c-b872-5871d3e11bb7" alt=""><figcaption></figcaption></figure>

2. Click the search bar.

<figure><img src="https://3227270621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eW3hrips7DELaARDAVi%2Fuploads%2FIPZp3YoAQpRysPrvP8Gl%2FMy%20project-1%20(29).png?alt=media&#x26;token=b2d96186-9bb7-4ccb-b9bb-bb95346a571b" alt=""><figcaption></figcaption></figure>

3. For <mark style="background-color:blue;">**Windows/Mac with Intel chip system**</mark>**:** Type to search for <mark style="background-color:blue;">**audioviz**</mark> and click the `Pull` button to pull down the package. For <mark style="background-color:purple;">**Mac with Apple silicon system**</mark>: Type to search for <mark style="background-color:purple;">**trangdulam/audioviz\_osx**</mark> and click the `Pull` button to pull down the package.

<figure><img src="https://3227270621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eW3hrips7DELaARDAVi%2Fuploads%2FHtO9CMj6etfADiHcRsvc%2FMy%20project-1%20(30).png?alt=media&#x26;token=19d15787-b0dd-4b9e-89a9-2911bbd892cc" alt=""><figcaption></figcaption></figure>

4. Click the `Images` page. You can find the package of audioviz you've just pulled. Then click the triangular button to start running audioviz.

<figure><img src="https://3227270621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eW3hrips7DELaARDAVi%2Fuploads%2FHNpOu9XrNknJBR19oCty%2FMy%20project-1%20(31).png?alt=media&#x26;token=ae640d8d-dcaf-4304-87a2-0759388fbabe" alt=""><figcaption></figcaption></figure>

5. Click the drop down menu of Optional settings.

<figure><img src="https://3227270621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eW3hrips7DELaARDAVi%2Fuploads%2FIf8zRaruS9WTHXQGAbs5%2FMy%20project-1%20(32).png?alt=media&#x26;token=fc237872-de1f-4ad5-999a-835e8dd7667b" alt=""><figcaption></figcaption></figure>

6. For the connection ports, please type <mark style="background-color:red;">**8501**</mark> for usage. Then click the `Run` button.

<figure><img src="https://3227270621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eW3hrips7DELaARDAVi%2Fuploads%2FDnl2u6YqsrukgFPRB2g5%2FMy%20project-1%20(33).png?alt=media&#x26;token=47a87ca5-fd7a-4295-a634-f2ff3102d702" alt=""><figcaption></figcaption></figure>

7. By clicking the port you've set above, you can open audioviz for audio analysis!

<figure><img src="https://3227270621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eW3hrips7DELaARDAVi%2Fuploads%2FcRj2TrOafIdtFbbNwXqt%2FMy%20project-1%20(34).png?alt=media&#x26;token=6923f764-3663-4820-bdb9-9a26f3f91e1e" alt=""><figcaption></figcaption></figure>

If you want to terminate the program, please click the stop button.&#x20;

<figure><img src="https://3227270621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eW3hrips7DELaARDAVi%2Fuploads%2Fk7fLE8bKsp57nlF17TAa%2FMy%20project-1%20(35).png?alt=media&#x26;token=5789222e-c85f-49c8-b5d7-36f02ef42653" alt=""><figcaption></figcaption></figure>

If you've already pull the package of audioviz, just follow `Step8` to `Step11` to run the program.
{% endtab %}

{% tab title="Error Handle Example" %}
If you've encounter the WSL problem, please follow the instructions in [this page](https://docs.microsoft.com/windows/wsl/wsl2-kernel) to set up your environment

<figure><img src="https://3227270621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eW3hrips7DELaARDAVi%2Fuploads%2F7Vnh1b2es0V2skDnE23o%2Fnewer%20WSL%20kernel%20version.PNG?alt=media&#x26;token=c51d717c-8d4d-497b-8060-d4bf7f0cfe6c" alt=""><figcaption></figcaption></figure>

* An example of tackling the WSL problem

*Windows system*

1. Type `wsl --update` in the PowerShell of Windows system.
   {% endtab %}
   {% endtabs %}