mirror of
https://github.com/oceanprotocol/react-tutorial
synced 2024-11-21 17:26:58 +01:00
Merge pull request #8 from oceanprotocol/feature/compute
Compute component example
This commit is contained in:
GitHub
commit
a65e509bcc
11
package.json
11
package.json
@ -3,11 +3,12 @@
|
||||
"version": "1.0.0",
|
||||
"description": "React + squid.js interacting in the most minimal way with Ocean Protocol.",
|
||||
"dependencies": {
|
||||
"@oceanprotocol/squid": "^1.2.0",
|
||||
"react": "^16.12.0",
|
||||
"react-dom": "^16.12.0",
|
||||
"react-scripts": "^3.3.0",
|
||||
"web3": "^1.2.5"
|
||||
"@oceanprotocol/squid": "^2.0.0",
|
||||
"prettier": "^2.0.2",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-scripts": "^3.4.1",
|
||||
"web3": "^1.2.6"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
255
src/Compute.js
Normal file
255
src/Compute.js
Normal file
@ -0,0 +1,255 @@
|
||||
import React, { useState } from 'react'
|
||||
|
||||
import asset from './asset'
|
||||
import { assetAlgo, rawAlgoMeta } from './asset-compute'
|
||||
|
||||
export default function Compute({ ocean, web3 }) {
|
||||
const [ddoAssetId, setDdoAssetId] = useState('')
|
||||
const [jobStatus, setJobStatus] = useState('')
|
||||
const [jobId, setJobId] = useState('')
|
||||
const [agreementId, setAgreementId] = useState('')
|
||||
const [ddoAlgorithmId, setDdoAlgorithmId] = useState('')
|
||||
const [isAlgoInputVisible, setIsAlgoInputVisible] = useState('')
|
||||
const [textRawAlgo, setTextRawAlgo] = useState('')
|
||||
const [publishLogState, setPublishLogState] = useState(false)
|
||||
const [publishOutputState, setPublishOutputState] = useState(false)
|
||||
|
||||
// publish a dataset and an algorithm
|
||||
async function publish() {
|
||||
try {
|
||||
const accounts = await ocean.accounts.list()
|
||||
console.log('Publishing asset.')
|
||||
|
||||
const service = await ocean.compute.createComputeServiceAttributes(
|
||||
accounts[0],
|
||||
'0',
|
||||
'2020-03-10T10:00:00Z'
|
||||
)
|
||||
console.log(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
|
||||
setDdoAssetId(ddoAssetNew.id)
|
||||
alert('Asset successfully submitted.')
|
||||
} catch (error) {
|
||||
console.error(error.message)
|
||||
}
|
||||
}
|
||||
|
||||
async function publishalgo() {
|
||||
try {
|
||||
const accounts = await ocean.accounts.list()
|
||||
console.log('Publishing algo.')
|
||||
|
||||
const ddoAlgorithmNew = await ocean.assets.create(assetAlgo, accounts[0])
|
||||
console.log(ddoAlgorithmNew)
|
||||
console.log('Algo asset successfully submitted.')
|
||||
// keep track of this registered asset for consumption later on
|
||||
setDdoAlgorithmId(ddoAlgorithmNew.id)
|
||||
alert('Algorithm successfully submitted.')
|
||||
} catch (error) {
|
||||
console.error(error.message)
|
||||
}
|
||||
}
|
||||
|
||||
async function startCompute(algorithmId, algorithmMeta) {
|
||||
try {
|
||||
const accounts = await ocean.accounts.list()
|
||||
const computeOutput = {
|
||||
publishAlgorithmLog: publishLogState,
|
||||
publishOutput: publishOutputState,
|
||||
brizoAddress: ocean.config.brizoAddress,
|
||||
brizoUri: ocean.config.brizoUri,
|
||||
metadataUri: ocean.config.aquariusUri,
|
||||
nodeUri: ocean.config.nodeUri,
|
||||
owner: accounts[0].getId(),
|
||||
secretStoreUri: ocean.config.secretStoreUri
|
||||
}
|
||||
console.log(computeOutput)
|
||||
// order the compute service
|
||||
const agreement = await ocean.compute.order(accounts[0], ddoAssetId)
|
||||
setAgreementId(agreement)
|
||||
// start a compute job
|
||||
const status = await ocean.compute.start(
|
||||
accounts[0],
|
||||
agreement,
|
||||
algorithmId,
|
||||
algorithmMeta,
|
||||
computeOutput
|
||||
)
|
||||
setJobId(status.jobId)
|
||||
console.log(status)
|
||||
alert('Compute job created. You can query for its status now.')
|
||||
} catch (error) {
|
||||
console.error(error.message)
|
||||
}
|
||||
}
|
||||
|
||||
// order and start the compute service with an algorithm published as an asset
|
||||
async function startWithPublishedAlgo() {
|
||||
return startCompute(ddoAlgorithmId)
|
||||
}
|
||||
|
||||
// order and start the compute service with a passed raw algorithm
|
||||
async function startWithRawAlgo() {
|
||||
rawAlgoMeta.rawcode = textRawAlgo
|
||||
return startCompute(undefined, rawAlgoMeta)
|
||||
}
|
||||
|
||||
async function getStatus() {
|
||||
try {
|
||||
const accounts = await ocean.accounts.list()
|
||||
|
||||
const status = await ocean.compute.status(accounts[0], agreementId, jobId)
|
||||
setJobStatus(JSON.stringify(status, null, '\t'))
|
||||
console.log(status)
|
||||
} catch (error) {
|
||||
console.error(error.message)
|
||||
}
|
||||
}
|
||||
|
||||
async function showDivAlgo() {
|
||||
setIsAlgoInputVisible(isAlgoInputVisible ? false : true)
|
||||
}
|
||||
|
||||
async function updateRawAlgoCode(event) {
|
||||
setTextRawAlgo(event.target.value)
|
||||
}
|
||||
|
||||
async function updateDdoAssetId(event) {
|
||||
setDdoAssetId(event.target.value)
|
||||
}
|
||||
|
||||
async function handlePublishOutputState(event) {
|
||||
setPublishOutputState(event.target.checked)
|
||||
}
|
||||
|
||||
async function handlePublishLogState(event) {
|
||||
setPublishLogState(event.target.checked)
|
||||
}
|
||||
|
||||
if (!web3) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<h2>Compute</h2>
|
||||
<ComputeSection>
|
||||
<h3>1. Publish Dataset</h3>
|
||||
<button onClick={publish}>Publish dataset with compute service</button>
|
||||
|
||||
<p>
|
||||
<Label htmlFor="ddoAssetId">Asset DID</Label>
|
||||
<code id="ddoAssetId">{ddoAssetId}</code>
|
||||
</p>
|
||||
</ComputeSection>
|
||||
|
||||
<ComputeSection>
|
||||
<h3>2. Publish Algorithm</h3>
|
||||
<button onClick={publishalgo}>Publish algorithm</button>
|
||||
<p>
|
||||
<Label htmlFor="ddoAlgorithmId">Algorithm DID</Label>
|
||||
<code id="ddoAlgorithmId">{ddoAlgorithmId}</code>
|
||||
</p>
|
||||
</ComputeSection>
|
||||
|
||||
<ComputeSection>
|
||||
<h3>3. Start Compute Job</h3>
|
||||
|
||||
<p>
|
||||
<Label htmlFor="publishOutputState">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="publishOutputState"
|
||||
checked={publishOutputState}
|
||||
onChange={handlePublishOutputState}
|
||||
/>
|
||||
Publish Output into the Marketplace
|
||||
</Label>
|
||||
<Label htmlFor="publishLogState">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="publishLogState"
|
||||
checked={publishLogState}
|
||||
onChange={handlePublishLogState}
|
||||
/>
|
||||
Publish Algorithm Logs into the Marketplace
|
||||
</Label>
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<button onClick={showDivAlgo}>Show/Hide Raw Algorithm</button>
|
||||
<p style={{ display: isAlgoInputVisible ? 'block' : 'none' }}>
|
||||
<Label htmlFor="jobStatus">Raw Algorithm</Label>
|
||||
<textarea
|
||||
style={{ width: '100%' }}
|
||||
rows="10"
|
||||
value={textRawAlgo}
|
||||
onChange={updateRawAlgoCode}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<Label htmlFor="jobId">Compute Job ID</Label>
|
||||
<code>{jobId}</code>
|
||||
</p>
|
||||
|
||||
<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>
|
||||
</ComputeSection>
|
||||
|
||||
<ComputeSection>
|
||||
<h3>4. Get Compute Job Status</h3>
|
||||
|
||||
<pre
|
||||
id="jobStatus"
|
||||
style={{ padding: '1rem', background: 'ghostwhite' }}
|
||||
>
|
||||
<code>{jobStatus}</code>
|
||||
</pre>
|
||||
|
||||
<button onClick={getStatus} disabled={!jobId}>
|
||||
Get Job Status
|
||||
</button>
|
||||
</ComputeSection>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function ComputeSection({ children }) {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
textAlign: 'left',
|
||||
paddingBottom: '1rem',
|
||||
maxWidth: '40rem',
|
||||
margin: '1rem auto'
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
<hr />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function Label({ children, ...props }) {
|
||||
return (
|
||||
<label style={{ display: 'block', fontSize: '0.8rem' }} {...props}>
|
||||
{children}
|
||||
</label>
|
||||
)
|
||||
}
|
||||
44
src/asset-compute.js
Normal file
44
src/asset-compute.js
Normal file
@ -0,0 +1,44 @@
|
||||
export const assetAlgo = {
|
||||
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'
|
||||
}
|
||||
}
|
||||
12
src/asset.js
12
src/asset.js
@ -45,18 +45,6 @@ const asset = {
|
||||
name: 'example code',
|
||||
type: 'example code',
|
||||
url: 'https://github.com/slothkong/CNN_classification_10_monkey_species'
|
||||
},
|
||||
{
|
||||
url:
|
||||
'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/links/discovery/n5151.jpg',
|
||||
name: 'n5151.jpg',
|
||||
type: 'discovery'
|
||||
},
|
||||
{
|
||||
url:
|
||||
'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/links/sample/sample.zip',
|
||||
name: 'sample.zip',
|
||||
type: 'sample'
|
||||
}
|
||||
],
|
||||
inLanguage: 'en'
|
||||
|
||||
17
src/index.js
17
src/index.js
@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'
|
||||
import { Ocean } from '@oceanprotocol/squid'
|
||||
import Web3 from 'web3'
|
||||
import asset from './asset'
|
||||
import Compute from './Compute'
|
||||
|
||||
let web3
|
||||
|
||||
@ -27,11 +28,11 @@ class App extends Component {
|
||||
brizoAddress: '0x4aaab179035dc57b35e2ce066919048686f82972',
|
||||
secretStoreUri: 'https://secret-store.nile.dev-ocean.com',
|
||||
// local Spree connection
|
||||
// nodeUri: 'http://localhost:8545',
|
||||
// aquariusUri: 'http://aquarius:5000',
|
||||
// brizoUri: 'http://localhost:8030',
|
||||
// brizoAddress: '0x00bd138abd70e2f00903268f3db08f2d25677c9e',
|
||||
// secretStoreUri: 'http://localhost:12001',
|
||||
//nodeUri: 'http://localhost:8545',
|
||||
//aquariusUri: 'http://aquarius:5000',
|
||||
//brizoUri: 'http://localhost:8030',
|
||||
//brizoAddress: '0x068Ed00cF0441e4829D9784fCBe7b9e26D4BD8d0',
|
||||
//secretStoreUri: 'http://localhost:12001',
|
||||
verbose: true
|
||||
})
|
||||
this.setState({ ocean })
|
||||
@ -75,19 +76,15 @@ class App extends Component {
|
||||
const accounts = await this.state.ocean.accounts.list()
|
||||
// get our registered asset
|
||||
const consumeAsset = this.state.ddo
|
||||
// get service we want to execute
|
||||
const service = consumeAsset.findServiceByType('access')
|
||||
// order service agreement
|
||||
const agreement = await this.state.ocean.assets.order(
|
||||
consumeAsset.id,
|
||||
service.index,
|
||||
accounts[0]
|
||||
)
|
||||
// consume it
|
||||
await this.state.ocean.assets.consume(
|
||||
agreement,
|
||||
consumeAsset.id,
|
||||
service.index,
|
||||
accounts[0],
|
||||
'',
|
||||
0
|
||||
@ -119,6 +116,8 @@ class App extends Component {
|
||||
<button onClick={() => this.consumeAsset()} disabled={!web3}>
|
||||
Consume asset
|
||||
</button>
|
||||
<hr />
|
||||
<Compute ocean={this.state.ocean} web3={web3} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user