@readymadeit/mcp 0.0.0-stage → 0.1.0

package/bundle/hkp-frontend/src/runtime/browser/services/AnalyzerUI/Bars.tsx

@@ -0,0 +1,33 @@
+export default function Bars({ data = [] }: { data?: Array<number> }) {
+  const maxValue = 2;
+  const useLogScale = true;
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox={`0 0 100 100`}
+      preserveAspectRatio="none"
+    >
+      {data.length > 0 &&
+        data.map((value, idx) => {
+          const barHeight = useLogScale
+            ? Math.min(
+                100,
+                (Math.log10(value + 1) / Math.log10(maxValue + 1)) * 100
+              )
+            : (value / maxValue) * 100;
+          const barWidth = 100 / data.length;
+          return (
+            <rect
+              key={idx}
+              x={idx * barWidth}
+              y={100 - barHeight - 1}
+              width={barWidth}
+              height={barHeight}
+              fill="#4a90e2"
+            />
+          );
+        })}
+    </svg>
+  );
+}

package/bundle/hkp-frontend/src/runtime/browser/services/AnalyzerUI/HorizontalSpectrogram.tsx

@@ -0,0 +1,53 @@
+import { useEffect, useRef } from "react";
+
+type Props = { data?: Array<number> };
+
+export default function HorizontalSpectrogram({ data = [] }: Props) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const width = 200;
+  const height = 100;
+  const maxValue = 2;
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || data.length === 0) {
+      return;
+    }
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return;
+    }
+
+    // Scroll the canvas to the right by 1 pixel
+    const imageData = ctx.getImageData(0, 0, width - 1, height);
+    ctx.clearRect(0, 0, width, height);
+    ctx.putImageData(imageData, 1, 0);
+
+    const useLogScale = true; // Use logarithmic scaling for intensity
+    // Draw new FFT data in the first column (x = 0)
+    for (let y = 0; y < height; y++) {
+      // Map y to data index
+      const n = data.length;
+      const dataIdx = Math.floor((y / height) * n);
+      const value = data[dataIdx] ?? 0;
+      const intensity = useLogScale
+        ? Math.min(
+            255,
+            Math.floor((Math.log10(value + 1) / Math.log10(maxValue + 1)) * 255)
+          )
+        : Math.min(255, Math.floor((value / maxValue) * 255));
+
+      ctx.fillStyle = `rgb(${intensity},${intensity},${255})`;
+      ctx.fillRect(0, height - y - 1, 1, 1);
+    }
+  }, [data]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      width={width}
+      height={height}
+      style={{ width: "100%", height: "100%", display: "block" }}
+    />
+  );
+}

package/bundle/hkp-frontend/src/runtime/browser/services/AnalyzerUI/VerticalSpectogram.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useRef } from "react";
+
+type Props = { data?: Array<number> };
+
+/**
+ * VerticalSpectrogram that scrolls from bottom to top.
+ * The newest data appears at the bottom row (y = height - 1).
+ */
+export default function VerticalSpectrogram({ data = [] }: Props) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const width = 200;
+  const height = 100;
+  const maxValue = 2;
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || data.length === 0) {
+      return;
+    }
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return;
+    }
+
+    // Scroll the canvas up by 1 pixel (move everything 1px up)
+    const imageData = ctx.getImageData(0, 1, width, height - 1);
+    ctx.clearRect(0, 0, width, height);
+    ctx.putImageData(imageData, 0, 0);
+
+    const useLogScale = true; // Use logarithmic scaling for intensity
+    // Draw new FFT data in the last row (y = height - 1)
+    for (let x = 0; x < width; x++) {
+      // Map x to data index
+      const dataIdx = Math.floor((x / width) * data.length);
+      const value = data[dataIdx] ?? 0;
+      const intensity = useLogScale
+        ? Math.min(
+            255,
+            Math.floor((Math.log10(value + 1) / Math.log10(maxValue + 1)) * 255)
+          )
+        : Math.min(255, Math.floor((value / maxValue) * 255));
+
+      ctx.fillStyle = `rgb(${intensity},${intensity},${255})`;
+      ctx.fillRect(x, height - 1, 1, 1);
+    }
+  }, [data]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      width={width}
+      height={height}
+      style={{ width: "100%", height: "100%", display: "block" }}
+    />
+  );
+}

package/bundle/hkp-frontend/src/runtime/browser/services/AnalyzerUI/Waveform.tsx

@@ -0,0 +1,109 @@
+import { Data, isFloatRingBuffer } from "hkp-frontend/src/runtime/rest/Data";
+import { useMemo, useState } from "react";
+
+type Props = { data?: Data };
+
+export default function Waveform({ data }: Props) {
+  const [useFloatInterpretation, setUseFloatInterpretation] = useState(true);
+  const [littleEndian, setLittleEndian] = useState(true);
+
+  // Generate path for waveform
+  const generatePath = (
+    data: Uint8Array,
+    asFloat: boolean,
+    isLittleEndian: boolean,
+  ): string => {
+    if (!data || data.length === 0) {
+      return "";
+    }
+
+    const points: Array<{ x: number; y: number }> = [];
+
+    if (asFloat) {
+      // Interpret as Float32Array
+      const buffer = data.buffer;
+      const byteOffset = data.byteOffset;
+      const length = data.length / 4; // Number of 32-bit floats
+
+      const dataView = new DataView(buffer, byteOffset);
+
+      for (let idx = 0; idx < length; idx++) {
+        const value = dataView.getFloat32(idx * 4, isLittleEndian);
+        const x = (idx / (length - 1)) * 100;
+        // For waveform, normalize around center (50)
+        const normalizedValue = ((value + 1) / 2) * 100; // Assumes -1 to 1 range
+        const y = 100 - Math.max(0, Math.min(100, normalizedValue));
+        points.push({ x, y });
+      }
+    } else {
+      // Interpret as Uint8Array
+      for (let idx = 0; idx < data.length; idx++) {
+        const value = data[idx];
+        const x = (idx / (data.length - 1)) * 100;
+        const normalizedValue = (value / 255) * 100;
+        const y = 100 - normalizedValue;
+        points.push({ x, y });
+      }
+    }
+
+    if (points.length === 0) {
+      return "";
+    }
+
+    // Create smooth path using the points
+    let path = `M ${points[0].x} ${points[0].y}`;
+
+    for (let i = 1; i < points.length; i++) {
+      path += ` L ${points[i].x} ${points[i].y}`;
+    }
+
+    return path;
+  };
+
+  const pathData = useMemo(() => {
+    if (!data || !isFloatRingBuffer(data)) {
+      return "";
+    }
+    return generatePath(data.array, useFloatInterpretation, littleEndian);
+  }, [data, useFloatInterpretation, littleEndian]);
+
+  return (
+    <div className="w-full h-full flex flex-col">
+      <div className="flex gap-4 mb-2 text-xs">
+        <label className="flex items-center gap-1">
+          <input
+            type="checkbox"
+            checked={useFloatInterpretation}
+            onChange={(e) => setUseFloatInterpretation(e.target.checked)}
+          />
+          Float32
+        </label>
+        <label className="flex items-center gap-1">
+          <input
+            type="checkbox"
+            checked={littleEndian}
+            onChange={(e) => setLittleEndian(e.target.checked)}
+            disabled={!useFloatInterpretation}
+          />
+          Little Endian
+        </label>
+      </div>
+      <svg
+        width="100%"
+        height="100%"
+        viewBox={`0 0 100 100`}
+        preserveAspectRatio="none"
+      >
+        {data && isFloatRingBuffer(data) && data.array.length > 0 && (
+          <path
+            d={pathData}
+            fill="none"
+            stroke="#4a90e2"
+            strokeWidth="0.5"
+            vectorEffect="non-scaling-stroke"
+          />
+        )}
+      </svg>
+    </div>
+  );
+}

package/bundle/hkp-frontend/src/runtime/browser/services/AnalyzerUI/index.tsx

@@ -0,0 +1,99 @@
+import { useRef, useState } from "react";
+
+import { ServiceUIProps } from "hkp-frontend/src/types";
+
+import ServiceUI, {
+  needsUpdate,
+} from "hkp-frontend/src/ui-components/service/ServiceUI";
+import Select from "hkp-frontend/src/ui-components/Select";
+import HorizontalSpectrogram from "./HorizontalSpectrogram";
+import VerticalSpectrogram from "./VerticalSpectogram";
+import Bars from "./Bars";
+import Waveform from "./Waveform";
+import { isData } from "hkp-frontend/src/runtime/rest/Data";
+
+type ComplexBin = { re: number; im: number };
+
+function isComplexBin(value: unknown): value is ComplexBin {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "re" in value &&
+    "im" in value &&
+    typeof value.re === "number" &&
+    typeof value.im === "number"
+  );
+}
+
+function isComplexSpectrum(value: unknown): value is Array<ComplexBin> {
+  return Array.isArray(value) && value.length > 0 && value.every(isComplexBin);
+}
+
+export default function AnalyzerUI(props: ServiceUIProps) {
+  type Modes = "spectogram-v" | "bars" | "spectogram-h" | "waveform";
+  const initialWidth = 400;
+  const initialHeight = 350;
+  const [data, setData] = useState<Array<number>>([]);
+  const [mode, setMode] = useState<Modes>("spectogram-h");
+
+  const update = (state: any) => {
+    const { onProcess } = state;
+
+    if (needsUpdate(state.mode, mode)) {
+      setMode(state.mode);
+    }
+
+    if (onProcess !== undefined) {
+      if (isComplexSpectrum(onProcess)) {
+        // Complex spectrum from FFT outputMode="complex": extract magnitudes for display.
+        // The service itself is a pass-through so {re,im} data still reaches downstream services.
+        setData(
+          onProcess.map((bin) => Math.sqrt(bin.re * bin.re + bin.im * bin.im)),
+        );
+      } else {
+        setData(onProcess);
+      }
+    }
+  };
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const onNotification = (notficiation: any) => update(notficiation);
+  const onInit = (state: any) => update(state);
+  return (
+    <ServiceUI
+      {...props}
+      onInit={onInit}
+      onNotification={onNotification}
+      initialSize={{ width: initialWidth, height: initialHeight }}
+    >
+      <div className="flex flex-col justify-between items-center mb-2 w-full h-full">
+        <div className="h-10 items-left flex gap-2 w-full">
+          <div>Mode:</div>
+          <Select
+            className="capitalize w-full"
+            value={mode}
+            onChange={(e) => setMode(e as Modes)}
+            options={["spectogram-h", "spectogram-v", "bars", "waveform"]}
+          />
+        </div>
+        <div
+          ref={containerRef}
+          className="w-full"
+          style={{ height: "calc(100% - 30px)" }}
+        >
+          {mode === "bars" && <Bars data={data} />}
+          {mode === "waveform" &&
+            (isData(data) ? (
+              <Waveform data={data} />
+            ) : (
+              <div className="h-full flex items-center justify-center">
+                Wrong data format for waveform
+              </div>
+            ))}
+          {mode === "spectogram-h" && <HorizontalSpectrogram data={data} />}
+          {mode === "spectogram-v" && <VerticalSpectrogram data={data} />}
+        </div>
+      </div>
+    </ServiceUI>
+  );
+}

package/bundle/hkp-frontend/src/runtime/browser/services/AsciiArt.ts

@@ -0,0 +1,119 @@
+import { AppInstance, ServiceClass } from "hkp-frontend/src/types";
+import ServiceBase from "./ServiceBase";
+import AsciiArtUI from "./AsciiArtUI";
+
+const serviceId = "hookup.to/service/ascii-art";
+const serviceName = "ASCII Art";
+
+// 10-step ramp, light → dark.  Works well for typical camera input.
+const DEFAULT_CHARSET = " .:-=+*#%@";
+const DEFAULT_COLS = 100;
+const DEFAULT_ROWS = 60;
+
+type State = {
+  cols: number;
+  rows: number;
+  charset: string;
+  invert: boolean;
+  imageKey: string;
+};
+
+class AsciiArt extends ServiceBase<State> {
+  constructor(
+    app: AppInstance,
+    board: string,
+    descriptor: ServiceClass,
+    id: string,
+  ) {
+    super(app, board, descriptor, id, {
+      cols: DEFAULT_COLS,
+      rows: DEFAULT_ROWS,
+      charset: DEFAULT_CHARSET,
+      invert: false,
+      imageKey: "image",
+    });
+  }
+
+  configure(config: any): void {
+    const { cols, rows, charset, invert, imageKey } = config;
+    if (cols !== undefined) {
+      this.state.cols = Number(cols);
+      this.app.notify(this, { cols: this.state.cols });
+    }
+    if (rows !== undefined) {
+      this.state.rows = Number(rows);
+      this.app.notify(this, { rows: this.state.rows });
+    }
+    if (charset !== undefined) {
+      this.state.charset = charset;
+    }
+    if (invert !== undefined) {
+      this.state.invert = !!invert;
+      this.app.notify(this, { invert: this.state.invert });
+    }
+    if (imageKey !== undefined) {
+      this.state.imageKey = imageKey;
+    }
+  }
+
+  async process(params: any): Promise<any> {
+    const blob: Blob | undefined = params?.[this.state.imageKey];
+    if (!blob || !(blob instanceof Blob)) {
+      return params;
+    }
+
+    try {
+      const bitmap = await createImageBitmap(blob);
+      const cols = this.state.cols;
+      const rows = this.state.rows;
+
+      const canvas = document.createElement("canvas");
+      canvas.width = cols;
+      canvas.height = rows;
+      const ctx = canvas.getContext("2d")!;
+      ctx.drawImage(bitmap, 0, 0, cols, rows);
+      bitmap.close();
+
+      const { data } = ctx.getImageData(0, 0, cols, rows);
+      const { charset, invert } = this.state;
+      const lastIdx = charset.length - 1;
+
+      const lines: string[] = [];
+      for (let y = 0; y < rows; y++) {
+        let line = "";
+        for (let x = 0; x < cols; x++) {
+          const i = (y * cols + x) * 4;
+          const lum =
+            0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2];
+          let idx = Math.round((lum / 255) * lastIdx);
+          if (invert) {
+            idx = lastIdx - idx;
+          }
+          line += charset[idx];
+        }
+        lines.push(line);
+      }
+
+      // Drop the original Blob — it can't be serialised and isn't needed downstream.
+      const { [this.state.imageKey]: _drop, ...rest } = params;
+      return { ...rest, ascii: lines.join("\n") };
+    } catch (err) {
+      console.error("AsciiArt.process", err);
+      return params;
+    }
+  }
+}
+
+const descriptor = {
+  serviceName,
+  serviceId,
+  create: (
+    app: AppInstance,
+    board: string,
+    descriptor: ServiceClass,
+    id: string,
+  ) => new AsciiArt(app, board, descriptor, id),
+  createUI: AsciiArtUI as any,
+};
+
+export default descriptor;

package/bundle/hkp-frontend/src/runtime/browser/services/AsciiArtUI.tsx

@@ -0,0 +1,131 @@
+import { useState } from "react";
+import { ServiceUIProps } from "hkp-frontend/src/types";
+import ServiceUI, {
+  needsUpdate,
+} from "hkp-frontend/src/ui-components/service/ServiceUI";
+import SelectorField from "hkp-frontend/src/components/shared/SelectorField";
+import Slider from "hkp-frontend/src/ui-components/Slider";
+
+const CHARSET_OPTIONS: { [key: string]: string } = {
+  " .:-=+*#%@":  "Classic",
+  " .,;+=x#&@$": "Dense",
+  " ░▒▓█":       "Blocks",
+  " .+|#":       "Sharp",
+  " @":          "Binary",
+};
+
+const DEFAULT_CHARSET = " .:-=+*#%@";
+
+export default function AsciiArtUI(props: ServiceUIProps) {
+  const [cols, setCols] = useState(100);
+  const [rows, setRows] = useState(60);
+  const [invert, setInvert] = useState(false);
+  const [charset, setCharset] = useState(DEFAULT_CHARSET);
+
+  const onInit = (state: any) => {
+    if (needsUpdate(state.cols, cols)) {
+      setCols(state.cols);
+    }
+    if (needsUpdate(state.rows, rows)) {
+      setRows(state.rows);
+    }
+    if (needsUpdate(state.invert, invert)) {
+      setInvert(state.invert);
+    }
+    if (needsUpdate(state.charset, charset)) {
+      setCharset(state.charset);
+    }
+  };
+
+  const onNotification = (params: any) => {
+    if (params?.cols !== undefined) {
+      setCols(params.cols);
+    }
+    if (params?.rows !== undefined) {
+      setRows(params.rows);
+    }
+    if (params?.invert !== undefined) {
+      setInvert(params.invert);
+    }
+    if (params?.charset !== undefined) {
+      setCharset(params.charset);
+    }
+  };
+
+  const updateCols = (val: number) => {
+    setCols(val);
+    (props.service as any).configure({ cols: val });
+  };
+
+  const updateRows = (val: number) => {
+    setRows(val);
+    (props.service as any).configure({ rows: val });
+  };
+
+  const toggleInvert = () => {
+    const next = !invert;
+    setInvert(next);
+    (props.service as any).configure({ invert: next });
+  };
+
+  const updateCharset = (val: string) => {
+    setCharset(val);
+    (props.service as any).configure({ charset: val });
+  };
+
+  return (
+    <ServiceUI
+      {...props}
+      onInit={onInit}
+      onNotification={onNotification}
+      initialSize={{ width: 220, height: undefined }}
+    >
+      <div
+        style={{
+          padding: "10px 0 6px",
+          display: "flex",
+          flexDirection: "column",
+          gap: 10,
+        }}
+      >
+        <Slider
+          title="Columns"
+          value={cols}
+          min={20}
+          max={120}
+          onChange={updateCols}
+        />
+
+        <Slider
+          title="Rows"
+          value={rows}
+          min={10}
+          max={120}
+          onChange={updateRows}
+        />
+
+        <SelectorField
+          label="Charset"
+          value={charset}
+          options={CHARSET_OPTIONS}
+          onChange={({ value }) => updateCharset(value)}
+        />
+
+        <label
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            fontSize: 12,
+            color: "var(--text-mid, #666)",
+            cursor: "pointer",
+            userSelect: "none",
+          }}
+        >
+          <input type="checkbox" checked={invert} onChange={toggleInvert} />
+          Invert brightness
+        </label>
+      </div>
+    </ServiceUI>
+  );
+}