Spaces:
Sleeping
Sleeping
| import streamlit as st | |
| import streamlit.components.v1 as components | |
| st.title("Simple Rete.js Flow Editor") | |
| # Define the HTML and JavaScript code | |
| html_code = """ | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Rete.js Flow Editor</title> | |
| <style> | |
| #rete { | |
| height: 500px; | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="rete"></div> | |
| <script src="https://unpkg.com/rete"></script> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function () { | |
| const container = document.querySelector('#rete'); | |
| const editor = new Rete.NodeEditor('demo@0.1.0', container); | |
| const numSocket = new Rete.Socket('Number value'); | |
| class NumComponent extends Rete.Component { | |
| constructor() { | |
| super("Number"); | |
| } | |
| builder(node) { | |
| const out1 = new Rete.Output('num', "Number", numSocket); | |
| node.addOutput(out1); | |
| } | |
| worker(node, inputs, outputs) { | |
| outputs['num'] = node.data.num; | |
| } | |
| } | |
| const numComponent = new NumComponent(); | |
| editor.register(numComponent); | |
| const engine = new Rete.Engine('demo@0.1.0'); | |
| editor.use(Rete.ConnectionPlugin); | |
| editor.use(Rete.ReactRenderPlugin); | |
| editor.use(Rete.ContextMenuPlugin); | |
| editor.use(Rete.AreaPlugin); | |
| editor.use(Rete.CommentPlugin); | |
| const node1 = await numComponent.createNode({ num: 2 }); | |
| node1.position = [80, 200]; | |
| editor.addNode(node1); | |
| const node2 = await numComponent.createNode({ num: 3 }); | |
| node2.position = [300, 200]; | |
| editor.addNode(node2); | |
| editor.connect(node1.outputs.get('num'), node2.inputs.get('num')); | |
| editor.on('process nodecreated noderemoved connectioncreated connectionremoved', async () => { | |
| await engine.process(editor.toJSON()); | |
| }); | |
| editor.view.resize(); | |
| window.addEventListener('resize', () => editor.view.resize()); | |
| editor.trigger('process'); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
| """ | |
| # Embed the HTML into the Streamlit app | |
| components.html(html_code, height=600, scrolling=True) | |