mirror of
https://github.com/oceanprotocol/react-tutorial
synced 2024-11-21 17:26:58 +01:00
improve compute layout, add running raw algorithm
This commit is contained in:
Klaudiusz Dembler
parent
3fecbc4cbf
commit
de366ba87d
@ -7,7 +7,8 @@
|
||||
"react": "^16.12.0",
|
||||
"react-dom": "^16.12.0",
|
||||
"react-scripts": "^3.3.0",
|
||||
"web3": "^1.2.5"
|
||||
"web3": "^1.2.5",
|
||||
"prettier": "^1.19.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
118
src/Compute.js
118
src/Compute.js
@ -1,12 +1,13 @@
|
||||
import React, { useState } from 'react'
|
||||
import * as Assets from './asset'
|
||||
import { asset } from './asset'
|
||||
import { algoAsset, createComputeService, rawAlgoMeta } from './compute-asset'
|
||||
|
||||
export default function Compute({ ocean, web3 }) {
|
||||
const [ddoAsset, setDdoAsset] = useState({ id: '' })
|
||||
const [ddoAssetId, setDdoAssetId] = useState('')
|
||||
const [jobStatus, setJobStatus] = useState('')
|
||||
const [jobId, setJobId] = useState('')
|
||||
const [agreementId, setAgreementId] = useState('')
|
||||
const [ddoAlgorithm, setDdoAlgorithm] = useState({ id: '' })
|
||||
const [ddoAlgorithmId, setDdoAlgorithmId] = useState('')
|
||||
|
||||
// publish a dataset and an algorithm
|
||||
async function publish() {
|
||||
@ -14,22 +15,20 @@ export default function Compute({ ocean, web3 }) {
|
||||
const accounts = await ocean.accounts.list()
|
||||
console.log('Publishing asset.')
|
||||
|
||||
const service = await Assets.createComputeService(
|
||||
const service = await createComputeService(
|
||||
ocean,
|
||||
accounts[0],
|
||||
'0',
|
||||
'2020-03-10T10:00:00Z'
|
||||
)
|
||||
console.log(service)
|
||||
const ddoAssetNew = await ocean.assets.create(
|
||||
Assets.getAsset(),
|
||||
accounts[0],
|
||||
[service]
|
||||
)
|
||||
const ddoAssetNew = await ocean.assets.create(asset, accounts[0], [
|
||||
service
|
||||
])
|
||||
console.log('Asset successfully submitted.')
|
||||
console.log(ddoAssetNew)
|
||||
// keep track of this registered asset for consumption later on
|
||||
setDdoAsset(ddoAssetNew)
|
||||
setDdoAssetId(ddoAssetNew.id)
|
||||
alert('Asset successfully submitted.')
|
||||
} catch (error) {
|
||||
console.error(error.message)
|
||||
@ -41,33 +40,30 @@ export default function Compute({ ocean, web3 }) {
|
||||
const accounts = await ocean.accounts.list()
|
||||
console.log('Publishing algo.')
|
||||
|
||||
const ddoAlgorithmNew = await ocean.assets.create(
|
||||
Assets.getAlgoAsset(),
|
||||
accounts[0]
|
||||
)
|
||||
const ddoAlgorithmNew = await ocean.assets.create(algoAsset, accounts[0])
|
||||
console.log(ddoAlgorithmNew)
|
||||
console.log('Algo asset successfully submitted.')
|
||||
// keep track of this registered asset for consumption later on
|
||||
setDdoAlgorithm(ddoAlgorithmNew)
|
||||
setDdoAlgorithmId(ddoAlgorithmNew.id)
|
||||
alert('Algorithm successfully submitted.')
|
||||
} catch (error) {
|
||||
console.error(error.message)
|
||||
}
|
||||
}
|
||||
|
||||
// order and start the compute service
|
||||
async function start() {
|
||||
async function startCompute(algorithmId, algorithmMeta) {
|
||||
try {
|
||||
const accounts = await ocean.accounts.list()
|
||||
|
||||
// order the compute service
|
||||
const agreement = await ocean.compute.order(accounts[0], ddoAsset.id)
|
||||
const agreement = await ocean.compute.order(accounts[0], ddoAssetId)
|
||||
setAgreementId(agreement)
|
||||
// start a compute job
|
||||
const status = await ocean.compute.start(
|
||||
accounts[0],
|
||||
agreement,
|
||||
ddoAlgorithm.id
|
||||
algorithmId,
|
||||
algorithmMeta
|
||||
)
|
||||
setJobId(status.jobId)
|
||||
console.log(status)
|
||||
@ -77,6 +73,15 @@ export default function Compute({ ocean, web3 }) {
|
||||
}
|
||||
}
|
||||
|
||||
// order and start the compute service
|
||||
async function startWithPublishedAlgo() {
|
||||
return startCompute(ddoAlgorithmId)
|
||||
}
|
||||
|
||||
async function startWithRawAlgo() {
|
||||
return startCompute(undefined, rawAlgoMeta)
|
||||
}
|
||||
|
||||
async function getStatus() {
|
||||
try {
|
||||
const accounts = await ocean.accounts.list()
|
||||
@ -92,33 +97,60 @@ export default function Compute({ ocean, web3 }) {
|
||||
|
||||
// get results
|
||||
|
||||
if (!web3) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<h3>Compute</h3>
|
||||
<button onClick={() => publish()} disabled={!web3}>
|
||||
1) Publish dataset with compute service
|
||||
</button>
|
||||
<button onClick={() => publishalgo()} disabled={!web3}>
|
||||
2) Publish algorithm
|
||||
</button>
|
||||
<button onClick={() => start()} disabled={!web3}>
|
||||
3)Order and start compute service
|
||||
</button>
|
||||
<button onClick={() => getStatus()} disabled={!web3}>
|
||||
4)Get Job Status
|
||||
</button>
|
||||
<hr />
|
||||
Asset DID:
|
||||
<input type="text" value={ddoAsset.id} readOnly />
|
||||
<hr />
|
||||
Algo DID:
|
||||
<input type="text" value={ddoAlgorithm.id} readOnly />
|
||||
<hr />
|
||||
Job ID:
|
||||
<input type="text" value={jobId} readOnly />
|
||||
<hr />
|
||||
Compute status:
|
||||
<textarea rows="10" cols="180" value={jobStatus} readOnly />
|
||||
<ComputeSection>
|
||||
<button onClick={publish}>Publish dataset with compute service</button>
|
||||
Asset DID:
|
||||
<input type="text" value={ddoAssetId} readOnly />
|
||||
</ComputeSection>
|
||||
<ComputeSection>
|
||||
<button onClick={publishalgo}>Publish algorithm</button>
|
||||
Algo DID:
|
||||
<input type="text" value={ddoAlgorithmId} readOnly />
|
||||
</ComputeSection>
|
||||
<ComputeSection>
|
||||
<button
|
||||
onClick={startWithPublishedAlgo}
|
||||
disabled={!ddoAssetId || !ddoAlgorithmId}
|
||||
>
|
||||
Order and start compute service with published algorithm
|
||||
</button>
|
||||
<button onClick={startWithRawAlgo} disabled={!ddoAssetId}>
|
||||
Order and start compute service with raw algorithm
|
||||
</button>
|
||||
Job ID:
|
||||
<input type="text" value={jobId} readOnly />
|
||||
</ComputeSection>
|
||||
<ComputeSection>
|
||||
<button onClick={getStatus} disabled={!jobId}>
|
||||
Get Job Status
|
||||
</button>
|
||||
Compute status:
|
||||
<textarea rows="20" cols="120" value={jobStatus} readOnly />
|
||||
</ComputeSection>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function ComputeSection({ children }) {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
<hr />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
164
src/asset.js
164
src/asset.js
@ -1,120 +1,52 @@
|
||||
export function getAsset() {
|
||||
const asset = {
|
||||
main: {
|
||||
name: '10 Monkey Species Small',
|
||||
dateCreated: '2012-02-01T10:55:11Z',
|
||||
author: 'Mario',
|
||||
type: 'dataset',
|
||||
license: 'CC0: Public Domain',
|
||||
price: '0',
|
||||
files: [
|
||||
{
|
||||
index: 0,
|
||||
contentType: 'application/zip',
|
||||
checksum: '2bf9d229d110d1976cdf85e9f3256c7f',
|
||||
checksumType: 'MD5',
|
||||
contentLength: '12057507',
|
||||
compression: 'zip',
|
||||
encoding: 'UTF-8',
|
||||
url:
|
||||
'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/training.zip'
|
||||
},
|
||||
{
|
||||
index: 1,
|
||||
contentType: 'text/txt',
|
||||
checksum: '354d19c0733c47ef3a6cce5b633116b0',
|
||||
checksumType: 'MD5',
|
||||
contentLength: '928',
|
||||
url:
|
||||
'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/monkey_labels.txt'
|
||||
}
|
||||
]
|
||||
},
|
||||
additionalInformation: {
|
||||
categories: ['Biology'],
|
||||
tags: ['image data', 'classification', 'animals'],
|
||||
description: 'EXAMPLE ONLY ',
|
||||
copyrightHolder: 'Unknown',
|
||||
workExample: 'image path, id, label',
|
||||
links: [
|
||||
{
|
||||
name: 'example model',
|
||||
url:
|
||||
'https://drive.google.com/open?id=1uuz50RGiAW8YxRcWeQVgQglZpyAebgSM'
|
||||
},
|
||||
{
|
||||
name: 'example code',
|
||||
type: 'example code',
|
||||
url:
|
||||
'https://github.com/slothkong/CNN_classification_10_monkey_species'
|
||||
}
|
||||
],
|
||||
inLanguage: 'en'
|
||||
}
|
||||
}
|
||||
return asset
|
||||
}
|
||||
|
||||
export function getAlgoAsset() {
|
||||
const algoasset = {
|
||||
main: {
|
||||
name: 'My great algo',
|
||||
dateCreated: '2012-02-01T10:55:11Z',
|
||||
author: 'Alex',
|
||||
type: 'algorithm',
|
||||
algorithm: {
|
||||
format: 'docker-image',
|
||||
version: '0.1',
|
||||
container: {
|
||||
entrypoint: 'node $ALGO',
|
||||
image: 'node',
|
||||
tag: '10'
|
||||
}
|
||||
export const asset = {
|
||||
main: {
|
||||
name: '10 Monkey Species Small',
|
||||
dateCreated: '2012-02-01T10:55:11Z',
|
||||
author: 'Mario',
|
||||
type: 'dataset',
|
||||
license: 'CC0: Public Domain',
|
||||
price: '0',
|
||||
files: [
|
||||
{
|
||||
index: 0,
|
||||
contentType: 'application/zip',
|
||||
checksum: '2bf9d229d110d1976cdf85e9f3256c7f',
|
||||
checksumType: 'MD5',
|
||||
contentLength: '12057507',
|
||||
compression: 'zip',
|
||||
encoding: 'UTF-8',
|
||||
url:
|
||||
'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/training.zip'
|
||||
},
|
||||
license: 'CC0: Public Domain',
|
||||
price: '0',
|
||||
files: [
|
||||
{
|
||||
index: 0,
|
||||
contentType: 'application/text',
|
||||
contentLength: '12057507',
|
||||
compression: 'zip',
|
||||
encoding: 'UTF-8',
|
||||
url:
|
||||
'https://raw.githubusercontent.com/oceanprotocol/test-algorithm/master/javascript/algo.js'
|
||||
}
|
||||
]
|
||||
},
|
||||
additionalInformation: {
|
||||
description: 'My super algo '
|
||||
}
|
||||
}
|
||||
return algoasset
|
||||
}
|
||||
|
||||
export async function createComputeService(
|
||||
ocean,
|
||||
publisher,
|
||||
price,
|
||||
datePublished
|
||||
) {
|
||||
const { templates } = ocean.keeper
|
||||
const serviceAgreementTemplate = await templates.escrowComputeExecutionTemplate.getServiceAgreementTemplate()
|
||||
const name = 'dataAssetComputingServiceAgreement'
|
||||
const service = {
|
||||
type: 'compute',
|
||||
serviceEndpoint: ocean.brizo.getComputeEndpoint(),
|
||||
templateId: templates.escrowComputeExecutionTemplate.getId(),
|
||||
attributes: {
|
||||
main: {
|
||||
creator: publisher.getId(),
|
||||
datePublished,
|
||||
price,
|
||||
timeout: 3600,
|
||||
name
|
||||
{
|
||||
index: 1,
|
||||
contentType: 'text/txt',
|
||||
checksum: '354d19c0733c47ef3a6cce5b633116b0',
|
||||
checksumType: 'MD5',
|
||||
contentLength: '928',
|
||||
url:
|
||||
'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/monkey_labels.txt'
|
||||
}
|
||||
]
|
||||
},
|
||||
additionalInformation: {
|
||||
categories: ['Biology'],
|
||||
tags: ['image data', 'classification', 'animals'],
|
||||
description: 'EXAMPLE ONLY ',
|
||||
copyrightHolder: 'Unknown',
|
||||
workExample: 'image path, id, label',
|
||||
links: [
|
||||
{
|
||||
name: 'example model',
|
||||
url:
|
||||
'https://drive.google.com/open?id=1uuz50RGiAW8YxRcWeQVgQglZpyAebgSM'
|
||||
},
|
||||
serviceAgreementTemplate
|
||||
}
|
||||
{
|
||||
name: 'example code',
|
||||
type: 'example code',
|
||||
url: 'https://github.com/slothkong/CNN_classification_10_monkey_species'
|
||||
}
|
||||
],
|
||||
inLanguage: 'en'
|
||||
}
|
||||
return service
|
||||
}
|
||||
|
||||
70
src/compute-asset.js
Normal file
70
src/compute-asset.js
Normal file
@ -0,0 +1,70 @@
|
||||
export const algoAsset = {
|
||||
main: {
|
||||
name: 'My great algo',
|
||||
dateCreated: '2012-02-01T10:55:11Z',
|
||||
author: 'Alex',
|
||||
type: 'algorithm',
|
||||
algorithm: {
|
||||
format: 'docker-image',
|
||||
version: '0.1',
|
||||
container: {
|
||||
entrypoint: 'node $ALGO',
|
||||
image: 'node',
|
||||
tag: '10'
|
||||
}
|
||||
},
|
||||
license: 'CC0: Public Domain',
|
||||
price: '0',
|
||||
files: [
|
||||
{
|
||||
index: 0,
|
||||
contentType: 'application/text',
|
||||
contentLength: '12057507',
|
||||
compression: 'zip',
|
||||
encoding: 'UTF-8',
|
||||
url:
|
||||
'https://raw.githubusercontent.com/oceanprotocol/test-algorithm/master/javascript/algo.js'
|
||||
}
|
||||
]
|
||||
},
|
||||
additionalInformation: {
|
||||
description: 'My super algo'
|
||||
}
|
||||
}
|
||||
|
||||
export const rawAlgoMeta = {
|
||||
rawcode: `console.log('Hello world'!)`,
|
||||
format: 'docker-image',
|
||||
version: '0.1',
|
||||
container: {
|
||||
entrypoint: 'node $ALGO',
|
||||
image: 'node',
|
||||
tag: '10'
|
||||
}
|
||||
}
|
||||
|
||||
export async function createComputeService(
|
||||
ocean,
|
||||
publisher,
|
||||
price,
|
||||
datePublished
|
||||
) {
|
||||
const { templates } = ocean.keeper
|
||||
const serviceAgreementTemplate = await templates.escrowComputeExecutionTemplate.getServiceAgreementTemplate()
|
||||
const name = 'dataAssetComputingServiceAgreement'
|
||||
return {
|
||||
type: 'compute',
|
||||
serviceEndpoint: ocean.brizo.getComputeEndpoint(),
|
||||
templateId: templates.escrowComputeExecutionTemplate.getId(),
|
||||
attributes: {
|
||||
main: {
|
||||
creator: publisher.getId(),
|
||||
datePublished,
|
||||
price,
|
||||
timeout: 3600,
|
||||
name
|
||||
},
|
||||
serviceAgreementTemplate
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2,7 +2,7 @@ import React, { Component } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import { Ocean } from '@oceanprotocol/squid'
|
||||
import Web3 from 'web3'
|
||||
import * as Assets from './asset'
|
||||
import { asset } from './asset'
|
||||
import Compute from './Compute'
|
||||
|
||||
let web3
|
||||
@ -42,10 +42,7 @@ class App extends Component {
|
||||
async registerAsset() {
|
||||
try {
|
||||
const accounts = await this.state.ocean.accounts.list()
|
||||
const ddo = await this.state.ocean.assets.create(
|
||||
Assets.getAsset(),
|
||||
accounts[0]
|
||||
)
|
||||
const ddo = await this.state.ocean.assets.create(asset, accounts[0])
|
||||
console.log('Asset successfully submitted.')
|
||||
console.log(ddo)
|
||||
// keep track of this registered asset for consumption later on
|
||||
|
||||
Loading…
Reference in New Issue
Block a user