diff --git a/docs/images/user-interface/ui_custom_model_endpoint.png b/docs/images/user-interface/ui_custom_model_endpoint.png index df25476..6f0bb15 100644 Binary files a/docs/images/user-interface/ui_custom_model_endpoint.png and b/docs/images/user-interface/ui_custom_model_endpoint.png differ diff --git a/docs/images/user-interface/ui_login_screen.png b/docs/images/user-interface/ui_login_screen.png index b8af693..daf05ee 100644 Binary files a/docs/images/user-interface/ui_login_screen.png and b/docs/images/user-interface/ui_login_screen.png differ diff --git a/docs/images/user-interface/ui_model_response.png b/docs/images/user-interface/ui_model_response.png index 7dbaeb1..e5774fe 100644 Binary files a/docs/images/user-interface/ui_model_response.png and b/docs/images/user-interface/ui_model_response.png differ diff --git a/docs/images/user-interface/ui_model_response_comparison.png b/docs/images/user-interface/ui_model_response_comparison.png new file mode 100644 index 0000000..605a386 Binary files /dev/null and b/docs/images/user-interface/ui_model_response_comparison.png differ diff --git a/docs/images/user-interface/ui_no_model_response.png b/docs/images/user-interface/ui_no_model_response.png index af88620..238743b 100644 Binary files a/docs/images/user-interface/ui_no_model_response.png and b/docs/images/user-interface/ui_no_model_response.png differ diff --git a/docs/user-interface/env_oauth_config.md b/docs/user-interface/env_oauth_config.md index 3f4c4ec..c8a4104 100644 --- a/docs/user-interface/env_oauth_config.md +++ b/docs/user-interface/env_oauth_config.md @@ -11,7 +11,7 @@ This chapter is dedicated to the settings for running the User Interface locally ```bash IL_UI_ADMIN_USERNAME=admin IL_UI_ADMIN_PASSWORD=password -IL_UI_DEPLOYMENT=dev +IL_UI_DEPLOYMENT=native OAUTH_GITHUB_ID= OAUTH_GITHUB_SECRET= @@ -47,5 +47,7 @@ Once the app is created, there will be an option to create a secret. Press the C Update the .env files with the new ID and secret ID generated, `OAUTH_GITHUB_ID` = Client ID, `OAUTH_GITHUB_SECRET` = Client Secret +Change `IL_UI_DEPLOYMENT=native` to `IL_UI_DEPLOYMENT=github` in the .env file. + !!! note If you prefer to not set up the OAuth, we recommend for you to reach out to the UI Maintainers in our `#ui` [discord server](https://instructlab.ai/discord) or [slack channel](https://join.slack.com/t/instruct-lab/shared_invite/zt-2kieyqiz9-zhXSxGnXk6uL_f3hVbD53g) , where they will provide details for setting up an OAuth app for the instructlab-public org. diff --git a/docs/user-interface/playground_chat.md b/docs/user-interface/playground_chat.md index bbf80a5..c2bff5a 100644 --- a/docs/user-interface/playground_chat.md +++ b/docs/user-interface/playground_chat.md @@ -28,4 +28,8 @@ Go back to the playground chat, select newly added model and chat. ![UI Model Response](../images/user-interface/ui_model_response.png) +If you have multiple endpoints, you can directly compare answers between different LLMs + +![UI Model Response Comparisons](../images/user-interface/ui_model_response_comparison.png) + [Next Steps](knowledge_contributions.md){: .md-button .md-button--primary } diff --git a/docs/user-interface/ui_overview.md b/docs/user-interface/ui_overview.md index e65c8b5..d3c01f7 100644 --- a/docs/user-interface/ui_overview.md +++ b/docs/user-interface/ui_overview.md @@ -24,94 +24,178 @@ There are 2 ways to access the UI: Please note that this environment may contain experimental updates and is subject to frequent changes. -## Prerequisites +## Installation Guide -Before you can run the User Interface locally, you first must: +=== "Podman" -* Have a [GitHub](https://github.com/) account + ## Prerequisites -* Have Node.js installed + To run the UI locally `ilab-ui-native-installer.sh`, `podman` and `InstructLab` needs to be downloaded: -!!! warning - This guide was written with `Node.js v20.17.0`. If you are using an older version of Node.js, please be aware that the application - may not work as intended. + **ilab-ui-native-installer.sh** -## Installation Guide + ```bash + mkdir ui-local + cd ui-local + curl -o ilab-ui-native-installer.sh -fsSL https://raw.githubusercontent.com/instructlab/ui/refs/heads/main/installers/podman/ilab-ui-native-installer.sh + chmod a+x ilab-ui-native-installer.sh + ``` -1. Download the InstructLab UI by running the following command in your desired directory: - + **Podman Installation** + + === "macOS" + + ```bash + brew install podman + podman machine init + podman machine start + ``` + + === "Linux (Fedora)" + + ```bash + sudo dnf install podman + podman machine init + podman machine start + ``` + + For Instructlab installation and initalization run: + + ```bash + python3.11 -m venv venv + source ./venv/bin/activate + pip install instructlab + ilab config init --non-interactive ``` - git clone https://github.com/instructlab/ui + + ## Starting the UI + + Once the ilab is set up, run ilab-ui-native-installer.sh with the username and password of your preference to start the UI up. + + ```bash + ./ilab-ui-native-installer.sh install --username admin --password passw0rd! --deploy main ``` - - You can also download by visiting the [InstructLab UI GitHub page](https://github.com/instructlab/ui) and clicking the code, and then the download button. - -2. Set up the .env file. Go into the UI folder by running - + + UI Installer does the following: + + * Check if InstructLab is set up on the host. + * Extract the taxonomy repository directory path from the InstructLab configuration file + * Download and install the ilab-apiserver binary. It allows the UI to communicate actions to InstructLab and retrieve the results of the commands. + * Generates the secret.yaml file to fill in all the user-provided information and the discovered information securely. + * Download the InstructLab deployment YAML and update the YAML with the required parameters. + * Deploy the secrets and the deployment YAML on the Podman, to set up the UI. + * Once the installation is successfully completed, you can log in to the UI at `http://localhost:3000` with the username and password provided to the installer. + + ![UI Login Screen](../images/user-interface/ui_login_screen.png) + + ## Stopping the UI + + To stop the UI, the uninstall command can be used with the ilab-ui-native-installer.sh script. + + ```bash + ./ilab-ui-native-installer.sh uninstall + Are you sure you want to uninstall the InstructLab UI stack? (yes/no): yes + ``` + + ## Troubleshooting + + If pod startup times out with: + + ```bash + Error: playing YAML file: encountered while bringing up pod pathservice-pod: initializing source docker://quay.io/instructlab-ui/pathservice:latest: pinging container registry quay.io: Get "https://quay.io/v2/": dial tcp: lookup quay.io: no such host + ``` + + If Docker compatibility mode is enabled, try disabling it. + +=== "Local" + + ## Prerequisites + + Before you can run the User Interface locally, you first must: + + - Have a [GitHub](https://github.com/) account + - Have Node.js installed + + **1. Download the InstructLab UI** + + Run the following command in your desired directory: + + ```bash + git clone https://github.com/instructlab/ui ``` + + Or download it directly from the [InstructLab UI GitHub page](https://github.com/instructlab/ui). + + **2. Set up the `.env` file** + + Go into the UI folder: + + ```bash cd ui ``` - - Inside the UI folder, create a new file called `.env` and paste the following content inside: - - ```bash - IL_UI_ADMIN_USERNAME=admin - IL_UI_ADMIN_PASSWORD=password - IL_UI_DEPLOYMENT=dev - - OAUTH_GITHUB_ID= - OAUTH_GITHUB_SECRET= - - NEXTAUTH_SECRET=your_super_secret_random_string - NEXTAUTH_URL=http://localhost:3000 - - IL_GRANITE_API= - IL_GRANITE_MODEL_NAME= - IL_MERLINITE_API= - IL_MERLINITE_MODEL_NAME= - - GITHUB_TOKEN= - TAXONOMY_DOCUMENTS_REPO=github.com/instructlab-public/taxonomy-knowledge-docs - NEXT_PUBLIC_AUTHENTICATION_ORG= - NEXT_PUBLIC_TAXONOMY_REPO_OWNER= - NEXT_PUBLIC_TAXONOMY_REPO= - ``` - - As of now, we are only concerned with `IL_UI_ADMIN_USERNAME`, `IL_UI_ADMIN_PASSWORD` and `IL_UI_DEPLOYMENT`. But throughout this UI guide we will be visiting the .env frequently. - - __Save and close the .env file.__ - -3. Running Node commands to install and run. - - Back inside the UI folder, run this command to install needed files for the UI to run: - + + Inside the folder, create a file named `.env` and paste the following content: + + ```env + IL_UI_ADMIN_USERNAME=admin + IL_UI_ADMIN_PASSWORD=password + IL_UI_DEPLOYMENT=native + + OAUTH_GITHUB_ID= + OAUTH_GITHUB_SECRET= + + NEXTAUTH_SECRET=your_super_secret_random_string + NEXTAUTH_URL=http://localhost:3000 + + IL_GRANITE_API= + IL_GRANITE_MODEL_NAME= + IL_MERLINITE_API= + IL_MERLINITE_MODEL_NAME= + + GITHUB_TOKEN= + TAXONOMY_DOCUMENTS_REPO=github.com/instructlab-public/taxonomy-knowledge-docs + NEXT_PUBLIC_AUTHENTICATION_ORG= + NEXT_PUBLIC_TAXONOMY_REPO_OWNER= + NEXT_PUBLIC_TAXONOMY_REPO= ``` + + For now, we only care about `IL_UI_ADMIN_USERNAME`, `IL_UI_ADMIN_PASSWORD`, and `IL_UI_DEPLOYMENT`. + You’ll use the `.env` again later in this guide. + + _Save and close the file._ + + **3. Install dependencies and run the UI** + + Run this to install the needed files: + + ```bash npm install ``` - + !!! note - Depending on your internet speed and connectivity, this process may take a few minutes. - - When the installation is finished, start the UI by running: - - ``` + This may take a few minutes depending on your internet speed. + + Then, start the UI with: + + ```bash make start-dev-local - ``` - - The UI should now be up and running, you can visit it by entering `localhost:3000` in your browser, where it should bring you to the login screen. + ``` + + The UI will be accessible at [localhost:3000](http://localhost:3000). ![UI Login Screen](../images/user-interface/ui_login_screen.png) - - You may stop the UI at any time by running: - - ``` + + To stop the UI: + + ```bash make stop-dev-local ``` - -4. Logging in - - For now, we will log in by entering `admin` and `password` in the username and password fields respectively. You can change the username and password by editing the `IL_UI_ADMIN_USERNAME` and `IL_UI_ADMIN_PASSWORD` values in the .env file. - - We are not able to log in with GitHub right now since we haven't set up the GitHub token in the .env file. When logged in, you may see a popup saying that the UI is fetching your submissions, exit out of this notification. If you wish to set up the OAuth, visit the [.env and OAuth config page](env_oauth_config.md). -[Next Steps](playground_chat.md){: .md-button .md-button--primary } + **4. Logging in** + + For now, we will log in by entering admin and password in the username and password fields respectively. You can change the username and password by editing the IL_UI_ADMIN_USERNAME and IL_UI_ADMIN_PASSWORD values in the .env file. + + We are not able to log in with GitHub right now since we haven't set up the GitHub token in the .env file. When logged in, you may see a popup saying that the UI is fetching your submissions, exit out of this notification. If you wish to set up the OAuth, visit the .env and OAuth config page. + + +[Next Steps](playground_chat.md){ .md-button .md-button--primary }