@loadmill/droid-cua 1.0.0 → 1.1.0

package/build/src/device/actions.js

@@ -1,81 +1,22 @@
-import { exec } from "child_process";
-import { promisify } from "util";
-import { logger } from "../utils/logger.js";
-const execAsync = promisify(exec);
-function adbShell(deviceId, command) {
-    return execAsync(`adb -s ${deviceId} shell "${command}"`);
-}
+/**
+ * Device Actions Module
+ *
+ * Thin wrapper that delegates to the appropriate platform backend.
+ * Maintains backwards compatibility with existing code.
+ */
+import { getDeviceBackend, getCurrentPlatform } from "./factory.js";
+/**
+ * Handle an action from the CUA model
+ * @param {string} deviceId - The device/emulator/simulator ID
+ * @param {object} action - The action to execute
+ * @param {number} scale - Scale factor for coordinates
+ * @param {object} context - Context with addOutput function
+ */
 export async function handleModelAction(deviceId, action, scale = 1.0, context = null) {
-    const addOutput = context?.addOutput || ((item) => console.log(item.text || item));
-    try {
-        const { x, y, x1, y1, x2, y2, text, keys, path } = action;
-        switch (action.type) {
-            case "click":
-                const realX = Math.round(x / scale);
-                const realY = Math.round(y / scale);
-                addOutput({ type: 'action', text: `Clicking at (${realX}, ${realY})` });
-                await adbShell(deviceId, `input tap ${realX} ${realY}`);
-                break;
-            case "scroll":
-                const scrollX = Math.round(action.scroll_x / scale);
-                const scrollY = Math.round(action.scroll_y / scale);
-                addOutput({ type: 'action', text: `Scrolling by (${scrollX}, ${scrollY})` });
-                const startX = 500;
-                const startY = 500;
-                const endX = startX + scrollX;
-                const endY = startY - scrollY; // <--- INVERT Y
-                await adbShell(deviceId, `input swipe ${startX} ${startY} ${endX} ${endY} 500`);
-                break;
-            case "drag":
-                if (path && path.length >= 2) {
-                    const start = path[0];
-                    const end = path[path.length - 1];
-                    const realStartX = Math.round(start.x / scale);
-                    const realStartY = Math.round(start.y / scale);
-                    const realEndX = Math.round(end.x / scale);
-                    const realEndY = Math.round(end.y / scale);
-                    addOutput({ type: 'action', text: `Dragging from (${realStartX}, ${realStartY}) to (${realEndX}, ${realEndY})` });
-                    await adbShell(deviceId, `input swipe ${realStartX} ${realStartY} ${realEndX} ${realEndY} 500`);
-                }
-                else {
-                    addOutput({ type: 'info', text: `Drag action missing valid path: ${JSON.stringify(action)}` });
-                }
-                break;
-            case "type":
-                addOutput({ type: 'action', text: `Typing text: ${text}` });
-                const escapedText = text.replace(/(["\\$`])/g, "\\$1").replace(/ /g, "%s");
-                await adbShell(deviceId, `input text "${escapedText}"`);
-                break;
-            case "keypress":
-                // Map ESC to Android Home button (since ESC doesn't exist on mobile)
-                const mappedKeys = keys.map(key => {
-                    if (key.toUpperCase() === 'ESC' || key.toUpperCase() === 'ESCAPE') {
-                        return 'KEYCODE_HOME';
-                    }
-                    return key;
-                });
-                addOutput({ type: 'action', text: `Pressing key: ${mappedKeys.join(', ')}` });
-                for (const key of mappedKeys) {
-                    await adbShell(deviceId, `input keyevent ${key}`);
-                }
-                break;
-            case "wait":
-                addOutput({ type: 'action', text: 'Waiting...' });
-                await new Promise(res => setTimeout(res, 1000));
-                break;
-            default:
-                addOutput({ type: 'info', text: `Unknown action: ${JSON.stringify(action)}` });
-        }
-    }
-    catch (error) {
-        // Log full error details to file
-        logger.error('Action execution error', {
-            action,
-            message: error.message,
-            stack: error.stack
-        });
-        // Show user-friendly error message
-        addOutput({ type: 'error', text: `Error executing action: ${error.message}` });
-        addOutput({ type: 'info', text: 'Full error details have been logged to the debug log.' });
+    const platform = getCurrentPlatform();
+    if (!platform) {
+        throw new Error("No platform set. Call connectToDevice first.");
     }
+    const backend = getDeviceBackend(platform);
+    return backend.handleModelAction(deviceId, action, scale, context);
 }

package/build/src/device/android/actions.js

@@ -0,0 +1,81 @@
+import { exec } from "child_process";
+import { promisify } from "util";
+import { logger } from "../../utils/logger.js";
+const execAsync = promisify(exec);
+function adbShell(deviceId, command) {
+    return execAsync(`adb -s ${deviceId} shell "${command}"`);
+}
+export async function handleModelAction(deviceId, action, scale = 1.0, context = null) {
+    const addOutput = context?.addOutput || ((item) => console.log(item.text || item));
+    try {
+        const { x, y, x1, y1, x2, y2, text, keys, path } = action;
+        switch (action.type) {
+            case "click":
+                const realX = Math.round(x / scale);
+                const realY = Math.round(y / scale);
+                addOutput({ type: 'action', text: `Clicking at (${realX}, ${realY})` });
+                await adbShell(deviceId, `input tap ${realX} ${realY}`);
+                break;
+            case "scroll":
+                const scrollX = Math.round(action.scroll_x / scale);
+                const scrollY = Math.round(action.scroll_y / scale);
+                addOutput({ type: 'action', text: `Scrolling by (${scrollX}, ${scrollY})` });
+                const startX = 500;
+                const startY = 500;
+                const endX = startX + scrollX;
+                const endY = startY - scrollY; // <--- INVERT Y
+                await adbShell(deviceId, `input swipe ${startX} ${startY} ${endX} ${endY} 500`);
+                break;
+            case "drag":
+                if (path && path.length >= 2) {
+                    const start = path[0];
+                    const end = path[path.length - 1];
+                    const realStartX = Math.round(start.x / scale);
+                    const realStartY = Math.round(start.y / scale);
+                    const realEndX = Math.round(end.x / scale);
+                    const realEndY = Math.round(end.y / scale);
+                    addOutput({ type: 'action', text: `Dragging from (${realStartX}, ${realStartY}) to (${realEndX}, ${realEndY})` });
+                    await adbShell(deviceId, `input swipe ${realStartX} ${realStartY} ${realEndX} ${realEndY} 500`);
+                }
+                else {
+                    addOutput({ type: 'info', text: `Drag action missing valid path: ${JSON.stringify(action)}` });
+                }
+                break;
+            case "type":
+                addOutput({ type: 'action', text: `Typing text: ${text}` });
+                const escapedText = text.replace(/(["\\$`])/g, "\\$1").replace(/ /g, "%s");
+                await adbShell(deviceId, `input text "${escapedText}"`);
+                break;
+            case "keypress":
+                // Map ESC to Android Home button (since ESC doesn't exist on mobile)
+                const mappedKeys = keys.map(key => {
+                    if (key.toUpperCase() === 'ESC' || key.toUpperCase() === 'ESCAPE') {
+                        return 'KEYCODE_HOME';
+                    }
+                    return key;
+                });
+                addOutput({ type: 'action', text: `Pressing key: ${mappedKeys.join(', ')}` });
+                for (const key of mappedKeys) {
+                    await adbShell(deviceId, `input keyevent ${key}`);
+                }
+                break;
+            case "wait":
+                addOutput({ type: 'action', text: 'Waiting...' });
+                await new Promise(res => setTimeout(res, 1000));
+                break;
+            default:
+                addOutput({ type: 'info', text: `Unknown action: ${JSON.stringify(action)}` });
+        }
+    }
+    catch (error) {
+        // Log full error details to file
+        logger.error('Action execution error', {
+            action,
+            message: error.message,
+            stack: error.stack
+        });
+        // Show user-friendly error message
+        addOutput({ type: 'error', text: `Error executing action: ${error.message}` });
+        addOutput({ type: 'info', text: 'Full error details have been logged to the debug log.' });
+    }
+}

package/build/src/device/android/connection.js

@@ -0,0 +1,154 @@
+import { exec, spawn } from "child_process";
+import { once } from "events";
+import { promisify } from "util";
+import sharp from "sharp";
+import { logger } from "../../utils/logger.js";
+const execAsync = promisify(exec);
+function wait(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+async function listConnectedDevices() {
+    const { stdout } = await execAsync("adb devices");
+    return stdout
+        .trim()
+        .split("\n")
+        .slice(1)
+        .map(line => line.split("\t")[0])
+        .filter(id => id.length > 0);
+}
+async function waitForDeviceConnection(avdName, timeoutMs = 120000) {
+    const deadline = Date.now() + timeoutMs;
+    while (Date.now() < deadline) {
+        const devices = await listConnectedDevices();
+        const match = devices.find(id => id.includes(avdName));
+        if (match)
+            return match;
+        await wait(2000);
+    }
+    return null;
+}
+async function waitForDeviceBoot(deviceId, timeoutMs = 60000) {
+    const deadline = Date.now() + timeoutMs;
+    while (Date.now() < deadline) {
+        try {
+            const { stdout } = await execAsync(`adb -s ${deviceId} shell getprop sys.boot_completed`);
+            if (stdout.trim() === "1")
+                return true;
+        }
+        catch { }
+        await wait(2000);
+    }
+    return false;
+}
+/**
+ * Get list of available AVDs
+ */
+async function listAvailableAVDs() {
+    try {
+        const { stdout } = await execAsync("emulator -list-avds");
+        return stdout.trim().split("\n").filter(name => name.length > 0);
+    }
+    catch {
+        return [];
+    }
+}
+export async function connectToDevice(avdName) {
+    const devices = await listConnectedDevices();
+    // If no AVD specified, try to use an already-running emulator or pick the first available
+    if (!avdName) {
+        // Check for already-running emulator
+        for (const id of devices) {
+            if (id.startsWith("emulator-")) {
+                console.log(`Using already-running emulator: ${id}`);
+                return id;
+            }
+        }
+        // No running emulator, pick first available AVD
+        const avds = await listAvailableAVDs();
+        if (avds.length === 0) {
+            console.error("No Android AVDs found. Create one with Android Studio or run:");
+            console.error("  avdmanager create avd -n Pixel_8 -k 'system-images;android-35;google_apis;arm64-v8a'");
+            process.exit(1);
+        }
+        avdName = avds[0];
+        console.log(`No AVD specified, using first available: ${avdName}`);
+    }
+    for (const id of devices) {
+        if (id.startsWith("emulator-")) {
+            try {
+                const { stdout } = await execAsync(`adb -s ${id} emu avd name`);
+                if (stdout.trim() === avdName) {
+                    console.log(`Emulator ${avdName} is already running as ${id}`);
+                    return id;
+                }
+            }
+            catch { }
+        }
+    }
+    console.log(`No emulator with AVD "${avdName}" is running. Launching...`);
+    const emulatorProcess = spawn("emulator", ["-avd", avdName], { detached: true, stdio: "ignore" });
+    emulatorProcess.unref();
+    const deviceId = await waitForDeviceConnection("emulator-", 120000);
+    if (!deviceId) {
+        console.error(`Emulator ${avdName} did not appear in time.`);
+        process.exit(1);
+    }
+    console.log(`Device ${deviceId} detected. Waiting for boot...`);
+    const booted = await waitForDeviceBoot(deviceId);
+    if (!booted) {
+        console.error(`Emulator ${avdName} did not finish booting.`);
+        process.exit(1);
+    }
+    console.log(`Emulator ${avdName} is fully booted.`);
+    return deviceId;
+}
+export async function getDeviceInfo(deviceId) {
+    const { stdout } = await execAsync(`adb -s ${deviceId} shell wm size`);
+    const match = stdout.match(/Physical size:\s*(\d+)x(\d+)/);
+    if (!match) {
+        console.error("Could not get device screen size.");
+        process.exit(1);
+    }
+    const [_, width, height] = match.map(Number);
+    const targetWidth = 400;
+    const scale = width > targetWidth ? targetWidth / width : 1.0;
+    const scaledWidth = Math.round(width * scale);
+    const scaledHeight = Math.round(height * scale);
+    return {
+        device_width: width,
+        device_height: height,
+        scaled_width: scaledWidth,
+        scaled_height: scaledHeight,
+        scale,
+    };
+}
+export async function getScreenshotAsBase64(deviceId, deviceInfo) {
+    const adb = spawn("adb", ["-s", deviceId, "exec-out", "screencap", "-p"]);
+    const chunks = [];
+    const stderrChunks = [];
+    adb.stdout.on("data", chunk => chunks.push(chunk));
+    adb.stderr.on("data", err => {
+        stderrChunks.push(err);
+        console.error("ADB stderr:", err.toString());
+    });
+    const [code] = await once(adb, "close");
+    if (code !== 0) {
+        const stderrOutput = Buffer.concat(stderrChunks).toString();
+        logger.error(`ADB screencap failed with code ${code}`, { stderr: stderrOutput });
+        throw new Error(`adb screencap exited with code ${code}`);
+    }
+    let buffer = Buffer.concat(chunks);
+    logger.debug(`Screenshot captured: ${buffer.length} bytes before scaling`);
+    if (buffer.length === 0) {
+        logger.error('Screenshot buffer is empty!', { deviceId, chunks: chunks.length });
+        throw new Error('Screenshot capture returned empty buffer');
+    }
+    if (deviceInfo.scale < 1.0) {
+        buffer = await sharp(buffer)
+            .resize({ width: deviceInfo.scaled_width, height: deviceInfo.scaled_height })
+            .png()
+            .toBuffer();
+        logger.debug(`Screenshot scaled: ${buffer.length} bytes after scaling`);
+    }
+    return buffer.toString("base64");
+}

package/build/src/device/connection.js

@@ -1,123 +1,58 @@
-import { exec, spawn } from "child_process";
-import { once } from "events";
-import { promisify } from "util";
-import sharp from "sharp";
-import { logger } from "../utils/logger.js";
-const execAsync = promisify(exec);
-function wait(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-}
-async function listConnectedDevices() {
-    const { stdout } = await execAsync("adb devices");
-    return stdout
-        .trim()
-        .split("\n")
-        .slice(1)
-        .map(line => line.split("\t")[0])
-        .filter(id => id.length > 0);
-}
-async function waitForDeviceConnection(avdName, timeoutMs = 120000) {
-    const deadline = Date.now() + timeoutMs;
-    while (Date.now() < deadline) {
-        const devices = await listConnectedDevices();
-        const match = devices.find(id => id.includes(avdName));
-        if (match)
-            return match;
-        await wait(2000);
-    }
-    return null;
-}
-async function waitForDeviceBoot(deviceId, timeoutMs = 60000) {
-    const deadline = Date.now() + timeoutMs;
-    while (Date.now() < deadline) {
-        try {
-            const { stdout } = await execAsync(`adb -s ${deviceId} shell getprop sys.boot_completed`);
-            if (stdout.trim() === "1")
-                return true;
-        }
-        catch { }
-        await wait(2000);
-    }
-    return false;
-}
-export async function connectToDevice(avdName) {
-    const devices = await listConnectedDevices();
-    for (const id of devices) {
-        if (id.startsWith("emulator-")) {
-            try {
-                const { stdout } = await execAsync(`adb -s ${id} emu avd name`);
-                if (stdout.trim() === avdName) {
-                    console.log(`Emulator ${avdName} is already running as ${id}`);
-                    return id;
-                }
-            }
-            catch { }
-        }
-    }
-    console.log(`No emulator with AVD "${avdName}" is running. Launching...`);
-    const emulatorProcess = spawn("emulator", ["-avd", avdName], { detached: true, stdio: "ignore" });
-    emulatorProcess.unref();
-    const deviceId = await waitForDeviceConnection("emulator-", 120000);
-    if (!deviceId) {
-        console.error(`Emulator ${avdName} did not appear in time.`);
-        process.exit(1);
-    }
-    console.log(`Device ${deviceId} detected. Waiting for boot...`);
-    const booted = await waitForDeviceBoot(deviceId);
-    if (!booted) {
-        console.error(`Emulator ${avdName} did not finish booting.`);
-        process.exit(1);
-    }
-    console.log(`Emulator ${avdName} is fully booted.`);
-    return deviceId;
+/**
+ * Device Connection Module
+ *
+ * Thin wrapper that delegates to the appropriate platform backend.
+ * Maintains backwards compatibility with existing code.
+ */
+import { getDeviceBackend, detectPlatform, setCurrentPlatform, getCurrentPlatform } from "./factory.js";
+let currentBackend = null;
+/**
+ * Connect to a device (Android emulator or iOS simulator)
+ * @param {string} deviceName - AVD name (Android) or Simulator name (iOS)
+ * @param {string} platform - Optional platform override ('android' or 'ios')
+ * @returns {Promise<string>} Device ID
+ */
+export async function connectToDevice(deviceName, platform = null) {
+    const detectedPlatform = platform || detectPlatform(deviceName);
+    setCurrentPlatform(detectedPlatform);
+    currentBackend = getDeviceBackend(detectedPlatform);
+    console.log(`Platform: ${detectedPlatform}`);
+    return currentBackend.connectToDevice(deviceName);
 }
+/**
+ * Get device info (screen dimensions and scale factor)
+ * @param {string} deviceId
+ * @returns {Promise<object>}
+ */
 export async function getDeviceInfo(deviceId) {
-    const { stdout } = await execAsync(`adb -s ${deviceId} shell wm size`);
-    const match = stdout.match(/Physical size:\s*(\d+)x(\d+)/);
-    if (!match) {
-        console.error("Could not get device screen size.");
-        process.exit(1);
+    if (!currentBackend) {
+        throw new Error("Not connected to a device. Call connectToDevice first.");
     }
-    const [_, width, height] = match.map(Number);
-    const targetWidth = 400;
-    const scale = width > targetWidth ? targetWidth / width : 1.0;
-    const scaledWidth = Math.round(width * scale);
-    const scaledHeight = Math.round(height * scale);
-    return {
-        device_width: width,
-        device_height: height,
-        scaled_width: scaledWidth,
-        scaled_height: scaledHeight,
-        scale,
-    };
+    return currentBackend.getDeviceInfo(deviceId);
 }
+/**
+ * Get screenshot as base64 string
+ * @param {string} deviceId
+ * @param {object} deviceInfo
+ * @returns {Promise<string>}
+ */
 export async function getScreenshotAsBase64(deviceId, deviceInfo) {
-    const adb = spawn("adb", ["-s", deviceId, "exec-out", "screencap", "-p"]);
-    const chunks = [];
-    const stderrChunks = [];
-    adb.stdout.on("data", chunk => chunks.push(chunk));
-    adb.stderr.on("data", err => {
-        stderrChunks.push(err);
-        console.error("ADB stderr:", err.toString());
-    });
-    const [code] = await once(adb, "close");
-    if (code !== 0) {
-        const stderrOutput = Buffer.concat(stderrChunks).toString();
-        logger.error(`ADB screencap failed with code ${code}`, { stderr: stderrOutput });
-        throw new Error(`adb screencap exited with code ${code}`);
+    if (!currentBackend) {
+        throw new Error("Not connected to a device. Call connectToDevice first.");
     }
-    let buffer = Buffer.concat(chunks);
-    logger.debug(`Screenshot captured: ${buffer.length} bytes before scaling`);
-    if (buffer.length === 0) {
-        logger.error('Screenshot buffer is empty!', { deviceId, chunks: chunks.length });
-        throw new Error('Screenshot capture returned empty buffer');
-    }
-    if (deviceInfo.scale < 1.0) {
-        buffer = await sharp(buffer)
-            .resize({ width: deviceInfo.scaled_width, height: deviceInfo.scaled_height })
-            .png()
-            .toBuffer();
-        logger.debug(`Screenshot scaled: ${buffer.length} bytes after scaling`);
-    }
-    return buffer.toString("base64");
+    return currentBackend.getScreenshotAsBase64(deviceId, deviceInfo);
+}
+/**
+ * Get the current platform
+ * @returns {string|null}
+ */
+export { getCurrentPlatform } from "./factory.js";
+/**
+ * Disconnect from the device
+ */
+export async function disconnect() {
+    if (currentBackend?.disconnect) {
+        await currentBackend.disconnect();
+    }
+    currentBackend = null;
 }

package/build/src/device/factory.js

@@ -0,0 +1,72 @@
+/**
+ * Device Factory
+ *
+ * Provides platform detection and returns the appropriate device backend.
+ */
+import * as androidConnection from "./android/connection.js";
+import * as androidActions from "./android/actions.js";
+import * as iosConnection from "./ios/connection.js";
+import * as iosActions from "./ios/actions.js";
+// Current platform state
+let currentPlatform = null;
+/**
+ * Detect platform from device name or environment variable
+ * @param {string} deviceName - The device/AVD/simulator name
+ * @returns {string} 'ios' or 'android'
+ */
+export function detectPlatform(deviceName) {
+    // Environment variable takes precedence
+    if (process.env.DROID_CUA_PLATFORM === "ios") {
+        return "ios";
+    }
+    if (process.env.DROID_CUA_PLATFORM === "android") {
+        return "android";
+    }
+    // Auto-detect from device name
+    if (deviceName) {
+        const lower = deviceName.toLowerCase();
+        if (lower.includes("iphone") || lower.includes("ipad") || lower.includes("ios")) {
+            return "ios";
+        }
+    }
+    // Default to Android
+    return "android";
+}
+/**
+ * Get the device backend for a platform
+ * @param {string} platform - 'ios' or 'android'
+ * @returns {object} Backend with connection and action functions
+ */
+export function getDeviceBackend(platform) {
+    if (platform === "ios") {
+        return {
+            connectToDevice: iosConnection.connectToDevice,
+            getDeviceInfo: iosConnection.getDeviceInfo,
+            getScreenshotAsBase64: iosConnection.getScreenshotAsBase64,
+            handleModelAction: iosActions.handleModelAction,
+            disconnect: iosConnection.disconnect,
+        };
+    }
+    // Default: Android
+    return {
+        connectToDevice: androidConnection.connectToDevice,
+        getDeviceInfo: androidConnection.getDeviceInfo,
+        getScreenshotAsBase64: androidConnection.getScreenshotAsBase64,
+        handleModelAction: androidActions.handleModelAction,
+        disconnect: async () => { }, // Android doesn't need explicit disconnect
+    };
+}
+/**
+ * Set the current platform
+ * @param {string} platform
+ */
+export function setCurrentPlatform(platform) {
+    currentPlatform = platform;
+}
+/**
+ * Get the current platform
+ * @returns {string|null}
+ */
+export function getCurrentPlatform() {
+    return currentPlatform;
+}

package/build/src/device/interface.js

@@ -0,0 +1,50 @@
+/**
+ * Device interface - contract that both Android and iOS backends must implement
+ *
+ * This file documents the expected API for device backends.
+ * Each backend (android/, ios/) implements these functions.
+ */
+/**
+ * @typedef {Object} DeviceInfo
+ * @property {number} device_width - Actual device screen width in pixels
+ * @property {number} device_height - Actual device screen height in pixels
+ * @property {number} scaled_width - Width as seen by the model (after scaling)
+ * @property {number} scaled_height - Height as seen by the model (after scaling)
+ * @property {number} scale - Scale factor (scaled_width / device_width)
+ */
+/**
+ * @typedef {Object} ActionContext
+ * @property {Function} addOutput - Function to output messages to the user
+ */
+/**
+ * Device Backend Interface
+ *
+ * Required exports for a device backend:
+ *
+ * connectToDevice(deviceName: string): Promise<string>
+ *   - Connects to or launches the device/emulator/simulator
+ *   - Returns a device ID for subsequent operations
+ *
+ * getDeviceInfo(deviceId: string): Promise<DeviceInfo>
+ *   - Gets screen dimensions and calculates scale factor
+ *   - Target width for scaling is 400px
+ *
+ * getScreenshotAsBase64(deviceId: string, deviceInfo: DeviceInfo): Promise<string>
+ *   - Captures current screen state
+ *   - Scales image if needed
+ *   - Returns base64-encoded PNG
+ *
+ * handleModelAction(deviceId: string, action: object, scale: number, context: ActionContext): Promise<void>
+ *   - Executes an action from the CUA model
+ *   - Supported action types: click, type, scroll, drag, keypress, wait
+ */
+export const SUPPORTED_ACTIONS = [
+    'click', // Tap at (x, y) coordinates
+    'type', // Enter text
+    'scroll', // Scroll by (scroll_x, scroll_y)
+    'drag', // Drag from start to end via path
+    'keypress', // Press hardware keys (ESC/ESCAPE maps to home)
+    'wait', // Wait for UI to settle
+    'screenshot' // Capture screen (handled by engine, not backend)
+];
+export const TARGET_SCALED_WIDTH = 400;