SHARK UI

Introduction

Welcome to SHARK UI! This repo contains a basic app to demonstrate how to use the Shortfin Web APIs for text-to-image and text-to-text inference.

Installation

To get SHARK UI up and running:

1. Clone the project

   git clone https://github.com/nod-ai/shark-ui.git
   cd shark-ui

2. Configure dependencies

   1. Install node and npm

      1. Prefer the latest LTS version of node (even-numbered major version)
      2. For "using", select nvm if available, otherwise select fnm
      3. For "with", select npm

   2. Install project dependencies, by running (from the project root):

      npm install

3. Add your environment to the project root:

   echo "VITE_TEXT_TO_IMAGE_API_ORIGIN=http://localhost:<port-on-virtual-machine-serving-text-to-image-api>" > .env

4. If you are connecting to a server on a virtual machine, have your local machine forward the port.

   • TIP: try this when the VM's firewall is preventing the browser from accessing the UI or using the API
   • Via SSH:

     • i.e. serving both the browser UI and the text-to-image API from the same virtual machine using the default ports

       ssh <user>@<origin-for-virtual-machine> \
           -L 8000:localhost:8000 \
           -L 5173:localhost:5173

     • In general:

       ssh <user>@<origin-for-virtual-machine-serving-text-to-image-api> \
           -L <port-on-virtual-machine-serving-text-to-image-api>:localhost:<port-on-local-machine-forwarding-text-to-image-api>

       ssh <user>@<origin-for-virtual-machine-serving-browser-ui> \
           -L <port-on-virtual-machine-serving-browser-ui>:localhost:<port-on-local-machine-forwarding-browser-ui>

Usage

1. If you haven't already:

   1. Complete installation
   2. Serve the text-to-image API from Shortfin, i.e. for SDXL

2. Serve the project (and avoid minification) by running:

   npm run dev 

3. Open the "localhost" URL in your browser of choice.

4. Take it for a spin!

Development

1. If you haven't already, complete the basic installation

2. In VSCode, add the extensions recommended by the project.

3. Serve the project with HMR by running:

   npm run dev

   NOTE: Shows Vue Dev Tools for debugging UI

4. Lint early and often with ESLint by running:

   npm run lint

5. Run Unit Tests with Vitest:

   npm run test:unit

6. Run End-to-End Tests against the development server with Cypress:

   npm run test:e2e:dev

   NOTE: It is much faster than doing so against the production build.

Deployment

1. If you haven't already, complete the basic installation

2. Type-Check, compile and minify for production by running:

   npm run build

3. Test the production build (e.g. in CI environments):

   npm run test:e2e