[feature] Web UI for Sybil

JoeSHMOEK commented 6 months ago

Context/Goal:

To complete M5, we need to build and deploy a UI to the SNET Marketplace.
This will allow users to send in their requests in the form of JSON configuration files, and CSV formatted data.
The UI will be made available to customers through this page: https://beta.singularitynet.io/servicedetails/org/temporai/service/sybil

Details:

The DAPP sandbox can be used to test the UI against an existing SNET deployment
- Documentation can be found here: https://github.com/singnet/snet-dapp
- https://dev.singularitynet.io/docs/ai-developers/dapp-ui-component/
- https://github.com/improbable-eng/grpc-web/blob/master/client/grpc-web/docs/code-generation.md
The UI will require a reference to the sybil.proto configuration to compile.
- sybil.proto is located here: https://github.com/Tempor-ai/sybil/blob/grpc_schema/src/appserver/sybil.proto

Needs:

UI Shall contain a single element for uploading either a model JSON configuration file or model YAML configuration files for the Train function:

Example file contents of model JSON configuration file:

{
"type": "meta_lr",
"scorers": ["smape", "mape"],
"params": {
"preprocessors": [
  {"type": "dartsimputer", "params": {"strategy": "mean"}},
  {"type": "minmaxscaler"}
],
"base_models": [
  {"type": "darts_naive"},
  {"type": "darts_seasonalnaive"},
  {"type": "darts_autotheta"},
  {"type": "darts_autoets"},
  {"type": "darts_autoarima"},
  {"type": "darts_tbats"},
  {"type": "darts_linearregression"}
]
}
}

Example file contents of model YAML configuration file:

type: meta_lr
scorers: [smape, mape]
params:
preprocessors:
type: dartsimputer
params:
strategy: mean
type: minmaxscaler
base_models:
type: darts_naive
type: darts_seasonalnaive
type: darts_autotheta
type: darts_autoets
type: darts_autoarima
type: darts_tbats
type: darts_linearregression

UI Shall contain a single element for uploading CSV formatted data for the Train function:

Example file contents of CSV data:

ds,y
1949-01-01,112
1949-02-01,118
1949-03-01,132
1949-04-01,129
1949-05-01,121
1949-06-01,135
1949-07-01,148
1949-08-01,148
1949-09-01,136
1949-10-01,119
1949-11-01,104
1949-12-01,118
1950-01-01,115
1950-02-01,126
1950-03-01,141
1950-04-01,135
1950-05-01,125
1950-06-01,149
1950-07-01,170
...

UI shall have its JavaScript code uploaded to Tempor-ai/sybil on the m5-staging branch under the /ui directory.
UI shall be tested using a test deployment of Sybil and SNET, on the UAT machine.

Wants:

UI development should support the DAPP sandbox.
UI development should not need AGIX or AGI tokens to function.

Kevin-Chen0 commented 6 months ago

@JoeSHMOEK, please see Issue #91 as @parv-bhargava and @SairamVenkatachalam are working on developing the .json and .yaml files via the example notebooks. @ishaan-ghosh can then use these files to test the UI.

JoeSHMOEK commented 5 months ago

The current goal is to setup a local development environment for the Web UI. @jrehm135 and @JoeSHMOEK are going through the following docs to build this:

JoeSHMOEK commented 5 months ago

The following config is being used for .env file

REACT_APP_SANDBOX_SERVICE_ENDPOINT=sybil-test.tempor.ai:8010
REACT_APP_SANDBOX_ORG_ID=temporai1
REACT_APP_SANDBOX_SERVICE_ID=temporAITestService
REACT_APP_WEB3_PROVIDER=[wss://ropsten.infura.io/ws/v3/{infura_project_id}](wss://ropsten.infura.io/ws/v3/%7Binfura_project_id%7D)

Its unknown currently what should be placed in the "infura_project_id" field of the REACT_APP_WEB3_PROVIDER config, SNET needs to be asked how to receive this information

JoeSHMOEK commented 5 months ago

I found this infura link from the SNETD log output: https://sepolia.infura.io/v3/09027f4a13e841d48dbfefc67e7685d5

This could potentially be the infura link that is needed for the DAPP

Following up with SNET Onboarding Support to determine what to use for the REACT_APP_WEB3_PROVIDER field: https://chat.singularitynet.io/chat/pl/ji9hg6y9k7d68dhduffidn5wco

UPDATE: SNET Onboarding Support responded that "REACT_APP_WEB3_PROVIDER" can be left blank.

JoeSHMOEK commented 5 months ago

For step 1) of https://dev.singularitynet.io/docs/ai-developers/dapp-ui-component/, we are receiving dependency resolution errors after running the following commands: Environment Info:

$ npm --version
10.5.0
$ node --version
v21.7.2

 git clone git@github.com:singnet/snet-dapp.git
 cd snet-dapp
 npm install
npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: snet-dapp-redesign@0.1.0
npm ERR! Found: @material-ui/core@4.12.4
npm ERR! node_modules/@material-ui/core
npm ERR!   @material-ui/core@"^4.11.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @material-ui/core@"^3.0.0" from @material-ui/lab@3.0.0-alpha.30
npm ERR! node_modules/@material-ui/lab
npm ERR!   @material-ui/lab@"^3.0.0-alpha.30" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

We attempted to resolve the dependency issues, however there appears to be several conflicting version upgrades that involve a major version change (Resolving these dependencies without any context could introduce risk into development and deployment). We think that it would be better to contact support to ask how to proceed.

Question posted to Mattermost: https://chat.singularitynet.io/chat/pl/jkmi4xebobds5erwuzpa3mq7eh

Resolution: We added the following line to the package.json inside of the local snet-dapp repo, and switched to using yarn instead of npm.

  "resolutions":
  {
    "concat-stream": "github:singnet/concat-stream"
  },

joeshmoe@joeshmoe-MS-7B86:~/playground/snet-dapp$ yarn install

JoeSHMOEK commented 5 months ago

For step 4) of https://dev.singularitynet.io/docs/ai-developers/dapp-ui-component/, we are receiving an error of unknown cause

Environment Info:

$ protoc --version
libprotoc 3.6.1

$ protoc --plugin=protoc-gen-ts=./node_modules/.bin/protoc-gen-ts --js_out=import_style=commonjs,binary,namespace_prefix=sybil_temporai_sybil --ts_out=service=true:. sybil.proto 
import_style=commonjs,binary,namespace_prefix=sybil_temporai_sybil/: No such file or directory

Resolution:

Create a new directory and install "protoc-gen-ts"
```
mkdir foo
npm install protoc-gen-ts
```

Copy the library from the new directory to snet-dapp

cd ../snet-dapp
./foo/node_modules/ts-protoc-gen/ ./node_modules/

Create an output directory and run the protoc command to generate stubs

mkdir output
protoc  --plugin=protoc-gen-ts=./node_modules/.bin/protoc-gen-ts  --js_out=import_style=commonjs,binary,namespace_prefix=sybil_temporai_sybil:output/  --ts_out=service=true:output sybil.proto

Tempor-ai / sybil