Spaces:
Running
Running
File size: 1,847 Bytes
176823e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
import gradio as gr
import modelscope_studio as mgr
from modelscope_studio.components.Flow import (FlowSchemaDict, Node,
NodeSchemaAttributeDict,
NodeSchemaDict)
def on_data_change(_flow):
print(_flow)
def on_custom(data: gr.EventData):
print(data._data)
custom_components = {
"my-input": {
"js":
"""
(props, cc, { el, theme, onMount, onUpdate }) => {
onMount(() => {
el.innerHTML = `<input />`
const input = el.querySelector('input')
input.style.color = theme === 'dark' ? 'white' : 'black'
input.style.backgroundColor = theme === 'dark' ? 'black' : 'white'
input.addEventListener('change', (e) => {
cc.dispatch(e.target.value)
})
})
// props update
onUpdate(
() => {
const input = el.querySelector('input')
input.setAttribute('value', props.value || '')
},
// By default, the callback will not be called when the component is being mounted. Set `callAfterMount` to true to enable it.
{ callAfterMount: true }
)
}
"""
}
}
schema = FlowSchemaDict(nodes=[
NodeSchemaDict(name="my-input-node",
title="MyInputNode",
attrs=[NodeSchemaAttributeDict(name="a", type="my-input")])
])
data = {
"nodes": [
Node(name="my-input-node",
position=dict(x=0, y=0),
data=dict(a='Hello'))
]
}
with gr.Blocks() as demo:
flow = mgr.Flow(value=data,
schema=schema,
custom_components=custom_components,
sync_on_data_change=True)
flow.data_change(fn=on_data_change, inputs=[flow])
# called when custom component dispatch event
flow.custom(fn=on_custom)
if __name__ == "__main__":
demo.queue().launch()
|