Overview

The SingularityNET network allows developers to register their AI services on an open marketplace and charge for access. Though the expectation is that service consumers will primarily call services from code, the SingularityNET Dapp offers a rich UI/UX for people to explore the services offered on the network. Providing an interface for consumers to interact with the service on the marketplace is a big driver for demand.

Core Tenets

1. Service developers are able to craft a custom UI locally
2. Service developers are able to register their custom UIs thru the publisher portal
3. Custom UIs handle collecting parameters and displaying results, while the SingularityNET Dapp itself handles the service request/response flow
4. SingularityNet storybook enables custom UIs to match the overall style and aesthetic of the SingularityNET Marketplace.

Approach

Explore SingularityNet storybook

SingularityNet storybook is a UI component explorer for service developers. This lists all common components used in the marketplace and can be reused for your service.

Build component locally

1. Download the snet-dapp code

    git clone git@github.com:singnet/snet-dapp.git
    cd snet-dapp
    npm install
    cp .env.sandbox .env
   

2. Update .env file
   1. REACT_APP_SANDBOX_SERVICE_ENDPOINT - The endpoint of the service running locally. snetd defaults to http://localhost:8088.
   2. REACT_APP_SANDBOX_ORG_ID - The org_id to which the service belongs. This value will be used for registering the custom UI
   3. REACT_APP_SANDBOX_SERVICE_ID - The service_id of the service. This value will be used for registering the custom UI
      
      

3. Start the AI service locally along with the snet daemon. Make sure the blockchain is disabled in the daemon configuration.

4. Building the custom UI
   1. Make sure you are inside the repo directory.
   2. Check if you have an executable file protoc-gen-ts in the path ./node_modules/.bin/. Else run npm i -D ts-protoc-gen
   3. 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

       protoc \
       --plugin=protoc-gen-ts=./node_modules/.bin/protoc-gen-ts \
       --js_out=import_style=commonjs,binary,namespace_prefix=<uniq_name_space>:. \
       --ts_out=service=true:. \
       example_service.proto
      

      uniq_name_space should be a combination of package_name + org_id + service_id. For the following proto file with org_id=snet and service_id=example-service the namespace_prefix would be example_service_snet_example_service.
      PS: All the - should be replaced by _

   4. The above script will generate four files. Copy the files *pb.js and *pb_service.js into your component’s folder and ignore the rest.
   5. Also at the top of generated files, add /**eslint-disable */
   6. You need to build the custom UI following the steps
      1. 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.
      2. 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
         

      3. Put the all the resources used by the custom UI under this directory including the js stubs
         
         
5. 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);
   

6. Run the DApp - Assuming that the snet daemon is running on port 8088, running the bellow commands should bring up the DApp in sandbox mode for local development.

    npm run sandbox
   

Last modified on : 02-Feb-23