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:

   • Run:

     echo "VITE_TEXT_TO_IMAGE_API_ORIGIN=http://localhost:<server-port>" > .env

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

     • Helps when the VM has a firewall

     • i.e. via SSH:

       ssh -L <server-port>:localhost:<local-port> user@server_origin

   NOTE: https is not yet supported

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