diff --git a/horse_r.png b/horse_r.png
deleted file mode 100644
index c66000c..0000000
Binary files a/horse_r.png and /dev/null differ
diff --git a/index.html b/index.html
index e315522..ceea638 100644
--- a/index.html
+++ b/index.html
@@ -4,65 +4,27 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>skeleton-tracing</title>
     <script type="module">
+      import { pathToImageData, i18n, nodeFabric } from "./utils.js"
       await new Promise((res) => import("https://zavx0z.github.io/dev-tools/index.js").then(() => setTimeout(res, 200)))
       await import("./index.js")
-
-      function i18n(param) {
-        if (param && typeof param === "object") {
-          const current = document.documentElement.lang
-          const exist = Object.keys(param)
-          return exist.includes(current) ? param[current] : exist.includes("en") ? param["en"] : param[exist[0]]
-        } else return ""
-      }
-
-      async function pathToImageData(imagePath) {
-        return new Promise((res, rej) => {
-          const canvas = document.createElement("canvas")
-          try {
-            const ctx = canvas.getContext("2d", { willReadFrequently: true })
-            document.createElement("canvas").getContext("2d")
-            const img = new Image()
-            img.onload = () => {
-              canvas.width = img.width
-              canvas.height = img.height
-              ctx.drawImage(img, 0, 0)
-              const imageData = ctx.getImageData(0, 0, img.width, img.height)
-              res({ img, imageData })
-            }
-            img.src = imagePath
-          } catch (e) {
-            rej(JSON.stringify(e))
-          } finally {
-            canvas.remove()
-          }
-        })
-      }
-
       const { img, imageData } = await pathToImageData("bin.png")
 
       const element = document.querySelector("skeleton-tracing")
+      
       element.subscribe((snapshot) => {
-        // console.log(snapshot.svg)
         const resultSvg = document.getElementById("resultSvg")
         const svgEl = new DOMParser().parseFromString(snapshot.svg, "application/xml")
         resultSvg.appendChild(resultSvg.ownerDocument.importNode(svgEl.documentElement, true))
       })
-
       element.send({ imageData, preview: true })
-      // setTimeout(() => element.send(imageData), 4444)
-
-      const template = document.querySelector("template")
-      template.content.querySelector("h1").innerHTML = i18n(element.name)
-      template.content.appendChild(img)
-      element.parentElement.insertBefore(template.content, element)
+      
+      const content = nodeFabric(element)
+      document.body.appendChild(content)
     </script>
     <dev-tools mobile></dev-tools>
   </head>
   <body>
     <skeleton-tracing></skeleton-tracing>
-  </body>
-  <template>
-    <h1></h1>
     <div id="resultSvg"></div>
-  </template>
+  </body>
 </html>
diff --git a/index.js b/index.js
index cf2b38f..6ed2955 100644
--- a/index.js
+++ b/index.js
@@ -1,17 +1,7 @@
 // https://github.com/LingDong-/skeleton-tracing/tree/master/wasm
 const html = String.raw
-function visualize(polylines, width, height, scale, stroke) {
-  let svg = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="${width * scale}" height="${height * scale}">`
-  for (let i = 0; i < polylines.length; i++) {
-    svg += `<path fill="none" stroke-width="${stroke}" stroke="rgb(${Math.floor(Math.random() * 200)},${Math.floor(
-      Math.random() * 200
-    )},${Math.floor(Math.random() * 200)})" d="M${polylines[i]
-      .map((x) => x[0] * scale + "," + x[1] * scale)
-      .join(" L")}"/>`
-  }
-  svg += "</svg>"
-  return svg
-}
+import { visualize } from "./lib/draw.js"
+
 class Component extends HTMLElement {
   static tag = "skeleton-tracing"
   name = { ru: "Центральная линия", en: "skeleton-tracing" }
diff --git a/lib/draw.js b/lib/draw.js
new file mode 100644
index 0000000..361d1b6
--- /dev/null
+++ b/lib/draw.js
@@ -0,0 +1,12 @@
+export function visualize(polylines, width, height, scale, stroke) {
+    let svg = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="${width * scale}" height="${height * scale}">`
+    for (let i = 0; i < polylines.length; i++) {
+      svg += `<path fill="none" stroke-width="${stroke}" stroke="rgb(${Math.floor(Math.random() * 200)},${Math.floor(
+        Math.random() * 200
+      )},${Math.floor(Math.random() * 200)})" d="M${polylines[i]
+        .map((x) => x[0] * scale + "," + x[1] * scale)
+        .join(" L")}"/>`
+    }
+    svg += "</svg>"
+    return svg
+  }
diff --git a/opencv-thinning-src-img.png b/opencv-thinning-src-img.png
deleted file mode 100644
index a9d416d..0000000
Binary files a/opencv-thinning-src-img.png and /dev/null differ
diff --git a/utils.js b/utils.js
new file mode 100644
index 0000000..ecc84e4
--- /dev/null
+++ b/utils.js
@@ -0,0 +1,76 @@
+export async function pathToImageData(imagePath) {
+  return new Promise((res, rej) => {
+    const canvas = document.createElement("canvas")
+    try {
+      const ctx = canvas.getContext("2d", { willReadFrequently: true })
+      document.createElement("canvas").getContext("2d")
+      const img = new Image()
+      img.onload = () => {
+        canvas.width = img.width
+        canvas.height = img.height
+        ctx.drawImage(img, 0, 0)
+        const imageData = ctx.getImageData(0, 0, img.width, img.height)
+        res({ img, imageData })
+      }
+      img.src = imagePath
+    } catch (e) {
+      rej(JSON.stringify(e))
+    } finally {
+      canvas.remove()
+    }
+  })
+}
+
+export function i18n(param) {
+  if (param && typeof param === "object") {
+    const current = document.documentElement.lang
+    const exist = Object.keys(param)
+    return exist.includes(current) ? param[current] : exist.includes("en") ? param["en"] : param[exist[0]]
+  } else return ""
+}
+const html = String.raw
+
+export function nodeFabric(actor) {
+  const template = document.createElement("template")
+  template.innerHTML = html`
+    <h1>${i18n(actor.name)}</h1>
+    <form>
+      ${Object.entries(actor.input)
+        .map(([key, socket]) => {
+          switch (socket.type) {
+            case "Boolean":
+              return html`
+                <div>
+                  <input type="checkbox" id="${key}" name="${key}" ${socket.value ? "checked" : ""} />
+                  <label for="${key}">${i18n(socket.name)}</label>
+                </div>
+              `
+            case "String":
+              return html`
+                <div>
+                  <label for="${key}">${i18n(socket.name)}</label>
+                  <textarea cols="80" rows="4" id="${key}" name="${key}"> ${socket.value} </textarea>
+                </div>
+              `
+            default:
+              return ""
+          }
+        })
+        .join("")}
+    </form>
+  `
+  template.content.querySelector("form").addEventListener("change", (e) => {
+    e.preventDefault()
+    const formData = new FormData(e.currentTarget)
+    const props = {}
+    for (const key in actor.input) {
+      const value = formData.get(key)
+      if (actor.input[key].type === "Boolean") {
+        props[key] = value === "on"
+      } else props[key] = value
+    }
+    actor.send(props)
+  })
+  template.content.appendChild(actor)
+  return template.content
+}
