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 = `` 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()