This Dapp allows you to browse the list of AI services from the SingularityNET Registry and call them.
Install Node.js and npm and yarn
For getting dependencies:
yarn install
To serve the application locally and watch source files for modifications:
yarn start
or
npm run start
Currently the UI needed by a service to capture inputs and render the output must be provided by the service developer through Publisher. To create a Snet-dapp style user interface, a developer can use the next repository.
This approach will change in the future. Work on it is in progress
Cloning this repo:
git clone git@github.com:singnet/snet-dapp.git
Go to project folder:
cd snet-dapp
Get dependencies:
yarn install
Create the env file:
cp .env.sandbox .env
Update .env
file to reflect the actual values for each environment variable.
REACT_APP_SANDBOX_SERVICE_ENDPOINT
The daemon endpoint for call AI methods of your service.
REACT_APP_SANDBOX_ORG_ID
& REACT_APP_SANDBOX_SERVICE_ID
The org_id
to which the service belongs and the service_id
of the service. The values set for these variables will be used for registering the custom ui.
Start the AI service locally along with the snet daemon. Make sure the blockchain is disabled in the daemon configuration.
Building the custom ui
Generate js
stubs from .proto
files
For the custom ui to talk to the services on SingularityNET platform via the DApp, we are using gRPC-web by improbable-eng. Apart from the steps mentioned at the official documentation to generate js stubs
from .proto
definitions, you also need to provide the namespace_prefix
flag to the generator. Here is an example which illustrates the usage
For Linux
protoc \
--plugin=protoc-gen-ts=./node_modules/.bin/protoc-gen-ts \
--js_out=import_style=commonjs,binary,namespace_prefix=\
[package name]_[org id]_[service]:. --ts_out=service=grpc-web:. \
[proto file name].proto
For Windows CMD
protoc ^
--plugin=protoc-gen-ts=%cd%/node_modules/.bin/protoc-gen-ts.cmd ^ --js_out=import_style=commonjs,binary,namespace_prefix=^
[package name]_[org id]_[service]:. --ts_out=service=grpc-web:. ^
[proto file name].proto
You need build the custom UI following the steps
Create a new directory named after the org-id
to which this service belongs inside src/assets/thirdPartyServices
. It could be possible that the directory already exists, in which case you can use it instead of creating a new one.
Create a new directory named after the service-id
under the newly created directory in the above step
e.g. for a service with org-id: snet and service-id: example-service you will have to do the following assuming you are at the root of the snet-dapp
cd src/assets/thirdPartyServices
mkdir snet
cd snet
mkdir example_service
cd example_service
Put the all the resources used by the custom ui under this directory including the js stubs
.
Register the custom ui
Add an entry for the new service in src/assets/thirdPartyServices/index.js
if it does not already exist. Add the following line towards the end of the file. Make sure to replace orgId
, serviceId
and CustomUIComponent
accordingly.
thirdPartyCustomUIComponents.addCustomUIComponent(orgId, serviceId, CustomUIComponent);
Assuming that the snet daemon is running on the port that you specified in the REACT_APP_SANDBOX_SERVICE_ENDPOINT, running the bellow commands should bring up the DApp in sandbox mode for local development.
yarn start
or
npm run start