Widgets/Producer

Input Widget

Input Widget

A "Producer" type widget. Input Widget is the entry point for external data into your Kemu recipe. When the recipe is exported (as a JavaScript library or shell script), it allows you to trigger and control your recipe from outside, whether from another program, a script, or a user interface.

Features

  • Accepts data from external sources to start or influence your recipe
  • Supports multiple data types:
    • String
    • Number
    • Object
    • Array
    • ImageData
  • Can be used multiple times in a recipe (each with a unique name)
  • Connects to other widgets to process incoming datas

 

Outputs

  • Output (DataType: Anything)* Transmits the received external data to connected widgets

Custom Settings

When adding an Input Widget:

  • Name: Identifier for this input (used when sending data programmatically)
  • Type: One of the supported data types

Note: The Input Widget does not support default values; it always waits for external input.


Input Settings

 

Exporting the Recipe



  1. Click on the Kemu Edge Export option in the interface
  2. Define the Folder Name and select the directory where the recipe will be exported
  3. Select the Export mode (either Shell Script or JavaScript Library)
  4. Click on the Export button to generate the exported files

 

How to Use the Exported Recipe

After exporting as a JavaScript library, open the exported project in your code editor (e.g., VS Code). The main.js file contains an example of how to start the recipe and send data to input widgets. By default, it looks like this:

import kemuEdge from '@kemu-io/edge-runtime';

console.log('Starting recipe...');
await kemuEdge.start();
console.log('Recipe running...');

// To Send data to input widgets
/* import kemuEdge, { DataType } from '@kemu-io/edge-runtime';
const recipe = await kemuEdge.start();

await recipe.sendToInputWidget('INPUT_NAME', {
  type: DataType.Number,
  value: 123
});
*/

This script starts the kemuEdge library, which runs the processes defined in your recipe. The commented section provides an example of how to interact with the exported recipe by sending data to an Input Widget (the entry point you defined in your recipe).

Shell Script Export: When exporting as a shell script, a start.sh is generated:

#!/bin/bash
node "$(dirname "$0")/main.js" --recipePath="$(dirname "$0")"

Run start.sh to start recipe. To provide data to an Input Widget, follow the instructions in the JavaScript code example above, which demonstrates how to use recipe.sendToInputWidget()

 

Examples

Example 1: Basic String Input

This example demonstrates how to use an Input Widget as the entry point for receiving string data from outside your recipe.


Required Configuration

Step 1: Configure the Input

  • Add an Input widget name it greeting set the type to String
  • Add a Script widget
  • Connect Input widget to the Script widget
  • Open the Script widget. Type in this code:
const getWidgetInputs = () => [{ name: 'Input 1', type: DataType.String }];

const processEvent = async (targetPort, sourceWidget, event) => {
  if (targetPort.name === 'Input 1') {
    console.log('This is your input: ', event.data.value);
  }
};

Step 2: Export and Edit the Project

  • Export the recipe (see "Exporting the Recipe" section above)
  • Look for the file main.js in the export folder
  • Open main.js the generated project in your favorite code editor
  • Replace the existing code with the code below (to simulate input after export)
import kemuEdge, { DataType } from '@kemu-io/edge-runtime';

console.log('Starting recipe...');
const recipe = await kemuEdge.start();
console.log('Recipe running...');

// Send data to the input named "greeting"
await recipe.sendToInputWidget('greeting', {
  type: DataType.String,
  value: 'Hello World!',
});

Note, in the sendToInputWidget(...) method in line 8 (above script):

  • The first argument is the input name (as configured in the Input widget. e.g: greeting)
  • The second argument is an object containing:
    • type: Data type (DataType.String)
    • value: The string data you want to send (e.g., 'Hello World!')

Drag the example onto the workspace to explore and experiment!



In this example:

  1. The Input widget named greeting is configured to accept string data from outside the recipe
  2. The line of code below sets up the Script widget to receive data from the Input widget and log the value it receives 
    console.log('This is your input: ', event.data.value);
  3. After exporting and editing the project, you run the recipe by typing node main.js in your terminal or command line
  4. In your modified main.js, the block of code below sends data to the Input widget with 
    await recipe.sendToInputWidget('greeting', {
  type: DataType.String,
  value: 'Hello World!',
});
  5. The Script widget receives the value and logs: 
    This is your input: Hello World!

This demonstrates how external data can trigger and flow through your recipe using the Input widget as the entry point

 

Example 2: Image Processing Input

This example demonstrates how to use an Input Widget to receive image data, process it through a series of widgets, and save the result. This pattern is useful for automating image workflows, such as applying filters or resizing images, using Kemu recipes.


Required Configuration

Step 1: Configure the Input

  • Add an Input widget name it process-image set the type to ImageData
  • Add an Image Filter widget and an Image Resize widget
  • Connect Input widget to the Image Filter widget (e.g., grayscale), and the Image Filter widget, to the Image Resize widget, and finally to a Variable widget to store the processed image

Step 2: Export and Edit the Project

  • Export the recipe (see "Exporting the Recipe" section above)
  • Look for the file main.js in the export folder
  • Open main.js in your favorite code editor
  • Replace the existing code with the code below (to simulate image input after export)
import path from 'path';
import fs from 'fs';
// NOTE: contains helper functions to manipulate images
import kemuEdge, { utils, DataType } from '@kemu-io/edge-runtime';

// Start recipe
const recipe = await kemuEdge.start();

// Load image from URL
const image = await utils.loadImageFile('https://cdn.pixabay.com/photo/2012/01/09/09/10/sun-11582_1280.jpg');
console.log('Image loaded');

// Create an event listener for when the image is processed
kemuEdge.onVariableChange('image-processed', async (event) => {
  try {
    const image = event.value;
    const targetPath = path.resolve('./image-processed.jpeg');
    console.log(`Image processed, saving file to "${targetPath}"`);
    const jpgBuffer = await utils.encodeImageData(image, 'jpeg');
    fs.writeFileSync(targetPath, jpgBuffer);
    process.exit(0);
  } catch(error) {
    console.error('Error saving image', error);
    process.exit(1);
  }
});

// Send image to input widget
await recipe.sendToInputWidget('process-image', {
  type: DataType.ImageData,
  value: image
});

Note, some important code in the modify file:

  • utils.loadImageFile(url): Loads an image from a URL or file path and returns it as ImageData, which can be sent to the input widget

  • kemuEdge.onVariableChange('image-processed', async (event) => { ... }) in line 14: Listens for changes to the image-processed variable, so you can react when the image processing is complete and save the result

  • After exporting and editing the project, you run the recipe by typing node main.js in your terminal or command line


Drag the example onto the workspace to explore and experiment!



In this example:

  1. The Input widget named process-image is configured to accept image data
  2. After exporting and editing the project, you run the recipe and load an image from a URL using [utils.loadImageFile](#utilsloadimagefile)
  3. The image is sent to the input widget using: 
    await recipe.sendToInputWidget('process-image', {
  type: DataType.ImageData,
  value: image
});
  4. The image is processed through a Filter and Resize widgets, and the result is stored in the image-processed variable
  5. The kemuEdge.onVariableChange('image-processed', ...) listener detects when the processed image is ready
  6. The processed image is saved to disk as a JPEG file
  7. This demonstrates how Kemu recipes can automate image processing workflows using external data as input and built-in helper functions for image manipulation

 

Example 3: Error Handling

If you send the wrong data type to an Input Widget, you'll see an error like:


Invalid data type: 0 for input: name. Expected: 1
  • The Input widget expects a String, but a Number was sent
  • The recipe will not process the input, and an error is logged

 

Best Practices

  • Use clear, descriptive names for Input Widgets
  • Match the data type exactly when sending data
  • Handle errors gracefully in your recipe logic

 

📌 Additional Notes

  • Use Input Widgets as the main entry points for integrating your recipe with other code or systems
  • Input Widgets are always waiting for external input; they do not have default values
  • Recipes can have multiple Input Widgets, each addressed by name
  • The Input Widget is ideal for integrating Kemu recipes as reusable logic blocks in larger applications

 

Glossary

  • DataType

    A JavaScript enum that defines the supported data types for widget inputs and outputs, including String, Number, Object, Array, and ImageData.

  • kemuEdge

    The main runtime library for executing exported Kemu recipes, providing methods to start recipes and send data to input widgets.

  • utils

    A collection of helper functions provided by the kemuEdge runtime for common operations like loading images from URLs and encoding image data to different formats.

  • utils.loadImageFile

    A utility function that loads an image from a URL or file path and returns it as ImageData format, which can be sent to Input Widgets for processing.

  • onVariableChange

    A kemuEdge listener method that detects when a Variable Widget's value changes, allowing you to react to data processing completion in exported recipes.

  • Shell Script Export

    An export option that generates a start.sh script file, allowing you to run exported Kemu recipes from the command line using Node.js.