0.1.5 • Published 10 months ago
gddi-app-flow v0.1.5
A React component to visualize and edit GDDi's AI APPs.
- Demo: ...🚧
- Data Explained: ...🚧
Installation
yarn add app-flow
Simple Usage
import {
AppFlow,
ModuleDefinitions,
AIAppType,
Pipeline,
Module,
Connection,
FetchLabelRes,
FetchModelRes,
FetchROIImgRes
} from 'gddi-flow'
const handleAppLoad = useCallback((app: AIAppType) => {
app.fitView()
console.log('app loaded')
}, [])
const handleValueChange = useCallback((val: Pipeline) => {
console.log('val changed')
console.log(val)
}, [])
const fetchModelList = (
pageOffset: number,
pageSize: number
): Promise<FetchModelRes> => {
return fetch(
`https://randommodels.me/api/?page=${pageOffset}&pageSize=${pageSize}`
)
.then((response) => response.json())
.then((body) => {
return body
})
}
const fetchLabelList = (mod_result_id: string): Promise<FetchLabelRes> => {
return fetch(`https://randomlabels.me/api/?mod_result_id=${mod_result_id}`)
.then((response) => response.json())
.then((body) => {
return body
})
}
const fetchROIImg = (
width: number,
height: number
): Promise<FetchROIImgRes> => {
return new Promise<FetchROIImgRes>((resolve, reject) => {
setTimeout(() => {
resolve({ url: `https://place-puppy.com/${width}x${height}` })
}, 1100)
})
}
;<div style={{ width: '1000px', height: '800px' }}>
// width and height of the parent element are required to be set
<AppFlow
lnag={'en'}
defaultValue={myPipeline as Pipeline}
moduleDefinitions={nodeDefinition1 as ModuleDefinitions}
onLoad={handleAppLoad}
onValueChange={handleValueChange}
graphEditingDisabled={false}
propEditingDisabled={false}
// 获取模型列表
fetchModelList={fetchModelList}
// 获取labels列表
fetchLabelList={fetchLabelList}
// 获取用于标ROI的图
fetchROIImg={fetchROIImg}
/>
</div>
Style
Dark Mode
set prop dark
Data Explained
moduleDefinitions
Object to describe the module's input / output endpoints, property, and other metadata.
- Type define can be found in
src/AppFlow/types.ts
- Example can be found in
src/stories/data/
export type ModulePropType = string | number | boolean | undefined
export interface ModulePropDefinition {
// type: 'string' | 'boolean' | 'number' | 'select'
options: ModulePropType[]
}
export interface Endpoint {
id: number
name: string
}
export interface ModuleDefinition {
inputs?: Endpoint[]
outputs?: Endpoint[]
props?: { [propName: string]: ModulePropDefinition }
}
export interface ModuleDefinitions {
[moduleType: string]: ModuleDefinition
}
0.0.10
10 months ago
0.0.11
10 months ago
0.0.12
10 months ago
0.0.13
10 months ago
0.0.14
10 months ago
0.1.0
10 months ago
0.1.2
10 months ago
0.0.3
10 months ago
0.1.1
10 months ago
0.0.15
10 months ago
0.0.9
10 months ago
0.0.8
10 months ago
0.1.4
10 months ago
0.0.5
10 months ago
0.1.3
10 months ago
0.0.4
10 months ago
0.0.7
10 months ago
0.1.5
10 months ago
0.0.6
10 months ago
0.0.2
2 years ago