autotune paramters, autotune in ui. UI organize

Assets/web/src/Components/CenterGrowSlider.js

@@ -0,0 +1,61 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+
+export default function CenterGrowSlider({
+  value,
+  min = -50,
+  max = 50,
+  positiveColor = "#4caf50",
+  negativeColor = "#f44336",
+  backgroundColor = "rgba(150,150,150,0.3)",
+  height = 8,
+}) {
+  // Clamp the value
+  const clamped = Math.max(min, Math.min(max, value));
+  const range = max - min;
+  const halfRange = range / 2;
+  const magnitude = Math.abs(clamped) / halfRange; // 0..1
+
+  // Calculate widths (each bar maxes out at 50% width)
+  const positiveWidth = clamped > 0 ? magnitude * 50 : 0;
+  const negativeWidth = clamped < 0 ? magnitude * 50 : 0;
+
+  const baseStyle = {
+    position: "absolute",
+    top: "50%",
+    height: `${height}px`,
+    transform: "translateY(-50%)",
+  };
+
+  return (
+    <div
+      style={{
+        position: "relative",
+        width: "100%",
+        height: `${height}px`,
+        backgroundColor,
+        overflow: "hidden",
+      }}
+    >
+      {/* Negative (left) bar */}
+      <div
+        style={{
+          ...baseStyle,
+          right: "50%", // anchored to the center
+          width: `${negativeWidth}%`,
+          backgroundColor: negativeColor,
+        }}
+      />
+
+      {/* Positive (right) bar */}
+      <div
+        style={{
+          ...baseStyle,
+          left: "50%", // anchored to the center
+          width: `${positiveWidth}%`,
+          backgroundColor: positiveColor,
+        }}
+      />
+    </div>
+  );
+}