Add the form in a node

frontend/src/App.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import axios from 'axios';
 import ReactFlow, {
   MiniMap,
@@ -8,8 +8,10 @@ import ReactFlow, {
   useEdgesState,
   addEdge,
 } from 'reactflow';
+import CustomNode from './CustomNode';
 
 import 'reactflow/dist/style.css';
+import './CustomNode.css';
 
 const initialNodes = [];
 const initialEdges = [];
@@ -20,6 +22,8 @@ function App() {
   const [spaceId, setSpaceId] = useState('');
   const [error, setError] = useState(null);
 
+  const nodeTypes = useMemo(() => ({ custom: CustomNode }), []);
+
   const onConnect = useCallback(
     (params) => setEdges((eds) => addEdge(params, eds)),
     [setEdges],
@@ -30,23 +34,28 @@ function App() {
       setError('Please enter a Hugging Face Space ID');
       return;
     }
-    setError(null); // Clear previous errors
+    setError(null);
     try {
       const response = await axios.get(`http://localhost:8000/api/space/?space_id=${spaceId}`);
       const { endpoints } = response.data;
       
-      // For simplicity, we'll just use the first priority endpoint
       const priorityEndpoint = endpoints.find(e => e.category === 'priority') || endpoints[0];
 
       if (priorityEndpoint) {
         const newNode = {
           id: `node-${Date.now()}`,
-          type: 'default',
-          data: { label: `${spaceId}
-(${priorityEndpoint.api_name})` },
+          type: 'custom', // Use the custom node type
+          data: {
+            label: spaceId,
+            apiName: priorityEndpoint.api_name,
+            inputs: priorityEndpoint.inputs,
+            outputs: priorityEndpoint.outputs,
+          },
           position: { x: 250, y: 5 },
         };
         setNodes([newNode]);
+      } else {
+        setError("No usable API endpoints found for this space.");
       }
 
     } catch (err) {
@@ -80,6 +89,7 @@ function App() {
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
+        nodeTypes={nodeTypes} // Register the custom node
       >
         <Controls />
         <MiniMap />

frontend/src/CustomNode.css

@@ -0,0 +1,78 @@
+.custom-node {
+  border: 1px solid #777;
+  border-radius: 8px;
+  background: #f9f9f9;
+  width: 300px;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+
+.custom-node-header {
+  background: #e0e0e0;
+  padding: 10px;
+  border-top-left-radius: 7px;
+  border-top-right-radius: 7px;
+  border-bottom: 1px solid #ccc;
+}
+
+.custom-node-header strong {
+  font-size: 14px;
+  display: block;
+}
+
+.custom-node-header p {
+  font-family: monospace;
+  font-size: 12px;
+  color: #333;
+  margin: 4px 0 0;
+}
+
+.custom-node-content {
+  padding: 10px;
+}
+
+.custom-node-input-row {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 10px;
+}
+
+.custom-node-input-row:last-child {
+  margin-bottom: 0;
+}
+
+.custom-node-input-row label {
+  font-size: 12px;
+  margin-bottom: 4px;
+  font-weight: bold;
+  color: #555;
+}
+
+.custom-node-input-row input[type="text"],
+.custom-node-input-row input[type="number"],
+.custom-node-input-row textarea,
+.custom-node-input-row select {
+  width: 100%;
+  padding: 6px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+  font-size: 12px;
+}
+
+.custom-node-input-row input[type="range"] {
+  width: 100%;
+}
+
+.custom-node-input-row.checkbox {
+  flex-direction: row;
+  align-items: center;
+}
+
+.custom-node-input-row.checkbox input {
+  margin-right: 8px;
+}
+
+.custom-node-input-row.checkbox label {
+  margin-bottom: 0;
+  font-weight: normal;
+}

frontend/src/CustomNode.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import { Handle, Position } from 'reactflow';
+import './CustomNode.css';
+
+const renderInput = (input) => {
+  const { type, label, props = {} } = input;
+  const id = `input-${input.id}`;
+
+  switch (type) {
+    case 'textbox':
+      return (
+        <div key={id} className="custom-node-input-row">
+          <label htmlFor={id}>{label}</label>
+          <textarea id={id} rows={2} defaultValue={props.value || ''} />
+        </div>
+      );
+    case 'number':
+      return (
+        <div key={id} className="custom-node-input-row">
+          <label htmlFor={id}>{label}</label>
+          <input id={id} type="number" defaultValue={props.value || 0} />
+        </div>
+      );
+    case 'slider':
+      return (
+        <div key={id} className="custom-node-input-row">
+          <label htmlFor={id}>{label} ({props.value || props.minimum})</label>
+          <input
+            id={id}
+            type="range"
+            min={props.minimum || 0}
+            max={props.maximum || 100}
+            defaultValue={props.value || props.minimum}
+          />
+        </div>
+      );
+    case 'checkbox':
+      return (
+        <div key={id} className="custom-node-input-row checkbox">
+          <input id={id} type="checkbox" defaultChecked={props.value || false} />
+          <label htmlFor={id}>{label}</label>
+        </div>
+      );
+    case 'dropdown':
+      return (
+        <div key={id} className="custom-node-input-row">
+          <label htmlFor={id}>{label}</label>
+          <select id={id} defaultValue={props.value}>
+            {props.choices?.map((choice, index) => (
+              <option key={index} value={choice}>
+                {choice}
+              </option>
+            ))}
+          </select>
+        </div>
+      );
+    case 'image':
+    case 'audio':
+    case 'video':
+    case 'file':
+      return (
+        <div key={id} className="custom-node-input-row">
+          <label htmlFor={id}>{label} ({type})</label>
+          <input id={id} type="file" />
+        </div>
+      );
+    default:
+      return (
+        <div key={id} className="custom-node-input-row">
+          <label>{label} ({type})</label>
+          <span>Unsupported type</span>
+        </div>
+      );
+  }
+};
+
+const CustomNode = ({ data }) => {
+  return (
+    <div className="custom-node">
+      <Handle type="target" position={Position.Top} />
+      <div className="custom-node-header">
+        <strong>{data.label}</strong>
+        <p>/{data.apiName}</p>
+      </div>
+      <div className="custom-node-content">
+        {data.inputs?.map(renderInput)}
+      </div>
+      <Handle type="source" position={Position.Bottom} />
+    </div>
+  );
+};
+
+export default CustomNode;