components/Flow/demos/custom_node_type.py

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