hyperdrone 0.1.0__py3-none-any.whl

hyperdrone/_vendor/rl-tools/include/rl_tools/rl/environments/pendulum/ui.h

@@ -0,0 +1,97 @@
+#include "../../../version.h"
+#if (defined(RL_TOOLS_DISABLE_INCLUDE_GUARDS) || !defined(RL_TOOLS_RL_ENVIRONMENTS_PENDULUM_UI_H)) && (RL_TOOLS_USE_THIS_VERSION == 1)
+#pragma once
+#define RL_TOOLS_RL_ENVIRONMENTS_PENDULUM_UI_H
+
+#include <QApplication>
+#include <QPushButton>
+#include <QPainter>
+#include <QTimer>
+#include <thread>
+#include <atomic>
+//#include <gtk/gtk.h>
+//#include <cairo.h>
+//#include <glib.h>
+#include <iostream>
+#include <mutex>
+#include "pendulum.h"
+
+
+RL_TOOLS_NAMESPACE_WRAPPER_START
+namespace rl_tools::rl::environments::pendulum {
+    template <typename T>
+    class PendulumWidget : public QWidget
+    {
+    public:
+        T angle = 0;
+    protected:
+        void paintEvent(QPaintEvent *event)
+        {
+            QPainter painter(this);
+            painter.setPen(QPen(Qt::black, 12, Qt::SolidLine, Qt::RoundCap));
+            T radius = 100;
+            T start_x = radius * 1.2;
+            T start_y = radius * 1.2;
+            T end_x = start_x + radius * math::sin(angle + M_PI);
+            T end_y = start_y + radius * math::cos(angle + M_PI);
+            painter.drawLine(start_x, start_y, end_x, end_y);
+        }
+    };
+
+
+    template<typename T, auto FPS=60>
+    struct UI {
+        char* argv[1] = {"pendulum_render"};
+        typename DEVICE::index_t argc = 1;
+        QApplication* app = nullptr;
+        std::thread t;
+        std::atomic<bool> running = true;
+        std::atomic<T> angle = 0;
+        PendulumWidget<T>* window = nullptr;
+        UI(){
+            t = std::thread(&UI::run, this);
+        };
+        void run() {
+            this->app = new QApplication(this->argc, this->argv);
+            this->window = new PendulumWidget<T>();
+            this->window->resize(320, 240);
+            this->window->show();
+            this->window->setWindowTitle("rl_tools::rl::environments::pendulum");
+//            QPushButton hello("Hello world!");
+//            hello.setParent(&window);
+            QTimer timer;
+            QObject::connect(&timer, &QTimer::timeout, [&]() {
+                this->timer_callback();
+            });
+            timer.start(1000/FPS);
+            this->app->exec();
+            delete this->window;
+            delete this->app;
+        }
+        void timer_callback() {
+            this->window->angle = this->angle;
+            this->window->update();
+//            std::cout << "timer_callback" << std::endl;
+            if(!this->running){
+                this->window->close();
+            }
+        }
+        ~UI() {
+            this->running = false;
+            this->t.join();
+        }
+    };
+}
+RL_TOOLS_NAMESPACE_WRAPPER_END
+
+
+RL_TOOLS_NAMESPACE_WRAPPER_START
+namespace rl_tools{
+    template <typename T>
+    void set_state(rl::environments::pendulum::UI<T>& ui, const rl::environments::pendulum::State<T>& state){
+        ui.angle = state.theta;
+    }
+}
+RL_TOOLS_NAMESPACE_WRAPPER_END
+
+#endif

hyperdrone/_vendor/rl-tools/include/rl_tools/rl/environments/pendulum/ui_xeus.h

@@ -0,0 +1,124 @@
+#include "../../../version.h"
+#if (defined(RL_TOOLS_DISABLE_INCLUDE_GUARDS) || !defined(RL_TOOLS_RL_ENVIRONMENTS_PENDULUM_UI_XEUS_H)) && (RL_TOOLS_USE_THIS_VERSION == 1)
+#pragma once
+#define RL_TOOLS_RL_ENVIRONMENTS_PENDULUM_UI_XEUS_H
+
+#include "xcanvas/xcanvas.hpp"
+#include <thread>
+#include <chrono>
+// #include <string>
+
+RL_TOOLS_NAMESPACE_WRAPPER_START
+namespace rl_tools::rl::environments::pendulum::ui::xeus {
+    template<typename T_T, typename T_TI, T_TI T_SIZE, T_TI T_PLAYBACK_SPEED>
+    struct Specification{
+        using T = T_T;
+        using TI = T_TI;
+        static constexpr TI SIZE = T_SIZE;
+        static constexpr T CENTER_X = SIZE/2.0;
+        static constexpr T CENTER_Y = SIZE/2.0;
+        static constexpr T PENDULUM_LENGTH = 0.75 * SIZE/2.0;
+        static constexpr T PAYLOAD_DIAMETER = SIZE / 30.0;
+        static constexpr T JOINT_DIAMETER = SIZE / 100.0;
+        static constexpr T BEAM_WIDTH = 5;
+        static constexpr T PLAYBACK_SPEED = T_PLAYBACK_SPEED/100.0;
+        static constexpr T ACTION_INDICATOR_SIZE = SIZE * 1.0/10.0;
+        static constexpr T ACTION_INDICATOR_WIDTH = ACTION_INDICATOR_SIZE / 4;
+        static constexpr T ACTION_INDICATOR_TOP_OFFSET = SIZE * 0.9;
+    };
+
+    template<typename T_SPEC>
+    struct UI {
+        using SPEC = T_SPEC;
+        xc::canvas canvas;
+        std::chrono::time_point<std::chrono::high_resolution_clock> last_render_time;
+        rl::environments::pendulum::State<pendulum::StateSpecification<typename SPEC::T, typename SPEC::TI>> state;
+        typename SPEC::T action;
+    };
+}
+RL_TOOLS_NAMESPACE_WRAPPER_END
+
+
+RL_TOOLS_NAMESPACE_WRAPPER_START
+namespace rl_tools{
+    template <typename DEVICE, typename ENV_SPEC, typename PARAMETERS, typename SPEC>
+    void render(DEVICE& device, const rl::environments::Pendulum<ENV_SPEC>& env, const PARAMETERS& parameters, rl::environments::pendulum::ui::xeus::UI<SPEC>& ui){
+        auto now = std::chrono::high_resolution_clock::now();
+        auto interval = (typename DEVICE::index_t)(1000.0 * ENV_SPEC::PARAMETERS::dt / SPEC::PLAYBACK_SPEED);
+        auto next_render_time = ui.last_render_time + std::chrono::milliseconds(interval);
+        if(now < next_render_time){
+            auto diff = next_render_time - now;
+            std::this_thread::sleep_for(diff);
+        }
+
+        using T = typename SPEC::T;
+        T x, y;
+        x = std::sin(ui.state.theta + math::PI<T>)*SPEC::PENDULUM_LENGTH + SPEC::CENTER_X;
+        y = std::cos(ui.state.theta + math::PI<T>)*SPEC::PENDULUM_LENGTH + SPEC::CENTER_Y;
+
+        ui.canvas.cache();
+        ui.canvas.clear();
+
+        {
+            std::string color_green = "rgb(0, 200, 0)";
+            std::string color_red = "rgb(200, 0, 0)";
+            if(ui.action > 0){
+                T a = ui.action;
+                ui.canvas.fill_style = color_green;
+                ui.canvas.fill_rect(SPEC::CENTER_X, SPEC::ACTION_INDICATOR_TOP_OFFSET, SPEC::ACTION_INDICATOR_SIZE/2 * a, SPEC::ACTION_INDICATOR_WIDTH);
+            }
+            else{
+                T a = -ui.action;
+                ui.canvas.fill_style = color_red;
+                ui.canvas.fill_rect(SPEC::CENTER_X - SPEC::ACTION_INDICATOR_SIZE/2 + SPEC::ACTION_INDICATOR_SIZE/2 * (1-a), SPEC::ACTION_INDICATOR_TOP_OFFSET, SPEC::ACTION_INDICATOR_SIZE/2 * a, SPEC::ACTION_INDICATOR_WIDTH);
+            }
+            ui.canvas.fill_style = "black";
+            ui.canvas.fill_rect(SPEC::CENTER_X - SPEC::ACTION_INDICATOR_WIDTH/2/4, SPEC::ACTION_INDICATOR_TOP_OFFSET, SPEC::ACTION_INDICATOR_WIDTH/4, SPEC::ACTION_INDICATOR_WIDTH);
+        }
+        {
+            ui.canvas.fill_circle(x, y, SPEC::PAYLOAD_DIAMETER);
+            ui.canvas.stroke_line(SPEC::CENTER_X, SPEC::CENTER_Y, x, y);
+            ui.canvas.fill_circle(SPEC::CENTER_X, SPEC::CENTER_Y, SPEC::JOINT_DIAMETER);
+        }
+        // {
+        //     ui.canvas.fill_rect(SPEC::CENTER_X - SPEC::ACTION_INDICATOR_SIZE/2, SPEC::ACTION_INDICATOR_TOP_OFFSET + SPEC::ACTION_INDICATOR_SIZE/2 - SPEC::ACTION_INDICATOR_WIDTH/2, SPEC::ACTION_INDICATOR_SIZE, SPEC::ACTION_INDICATOR_WIDTH);
+        //     if(ui.action > 0){
+        //         ui.canvas.fill_rect(SPEC::CENTER_X - SPEC::ACTION_INDICATOR_WIDTH / 2, SPEC::ACTION_INDICATOR_TOP_OFFSET, SPEC::ACTION_INDICATOR_WIDTH, SPEC::ACTION_INDICATOR_SIZE);
+        //     }
+        // }
+        ui.canvas.flush();
+
+        now = std::chrono::high_resolution_clock::now();
+        ui.last_render_time = now;
+    }
+    template <typename DEVICE, typename ENV_SPEC, typename PARAMETERS, typename SPEC>
+    void init(DEVICE& device, const rl::environments::Pendulum<ENV_SPEC>& env, const PARAMETERS& parameters, rl::environments::pendulum::ui::xeus::UI<SPEC>& ui){
+        ui.canvas = xc::canvas().initialize()
+            .width(300)
+            .height(300)
+            .finalize();        
+        ui.canvas.line_width = SPEC::BEAM_WIDTH;
+        ui.state.theta = 0;
+        ui.state.theta_dot = 0;
+        ui.action = 0;
+        render(device, ui);
+        ui.last_render_time = std::chrono::high_resolution_clock::now();
+    }
+    template <typename DEVICE, typename ENV_SPEC, typename PARAMETERS, typename SPEC, typename STATE>
+    void set_truncated(DEVICE& device, const rl::environments::Pendulum<ENV_SPEC>& env, const PARAMETERS& parameters, rl::environments::pendulum::ui::xeus::UI<SPEC>& ui, const STATE& state){
+    }
+    template <typename DEVICE, typename ENV_SPEC, typename SPEC, typename PARAMETERS, typename STATE, typename ACTION_SPEC>
+    void set_state(DEVICE& device, const rl::environments::Pendulum<ENV_SPEC>& env, const PARAMETERS& parameters, rl::environments::pendulum::ui::xeus::UI<SPEC>& ui, const STATE& state, const Matrix<ACTION_SPEC>& action){
+        static_assert(ACTION_SPEC::ROWS == 1 && ACTION_SPEC::COLS == 1);
+        ui.state = state;
+        ui.action = get(action, 0, 0);
+    }
+    template <typename DEVICE, typename ENV_SPEC, typename SPEC, typename PARAMETERS, typename ACTION_SPEC>
+    void set_action(DEVICE& device, const rl::environments::Pendulum<ENV_SPEC>& env, const PARAMETERS& parameters, rl::environments::pendulum::ui::xeus::UI<SPEC>& ui, const Matrix<ACTION_SPEC>& action){
+        static_assert(ACTION_SPEC::ROWS == 1 && ACTION_SPEC::COLS == 1);
+        ui.action = get(action, 0, 0);
+    }
+}
+RL_TOOLS_NAMESPACE_WRAPPER_END
+
+#endif

hyperdrone/_vendor/rl-tools/include/rl_tools/rl/environments/reacher/operations_cpu.h

@@ -0,0 +1,426 @@
+#include "../../../version.h"
+#if (defined(RL_TOOLS_DISABLE_INCLUDE_GUARDS) || !defined(RL_TOOLS_RL_ENVIRONMENTS_REACHER_OPERATIONS_CPU_H)) && (RL_TOOLS_USE_THIS_VERSION == 1)
+#pragma once
+#define RL_TOOLS_RL_ENVIRONMENTS_REACHER_OPERATIONS_CPU_H
+
+#include "reacher.h"
+#include "operations_generic.h"
+
+#include <string>
+
+RL_TOOLS_NAMESPACE_WRAPPER_START
+namespace rl_tools{
+    template <typename DEVICE, typename SPEC>
+    std::string json(DEVICE&, rl::environments::Reacher<SPEC>& env){
+        return "{}";
+    }
+    template <typename DEVICE, typename SPEC>
+    std::string json(DEVICE&, rl::environments::Reacher<SPEC>& env, typename rl::environments::Reacher<SPEC>::Parameters& parameters){
+        std::string json = "{";
+        json += "\"arena_size\":" + std::to_string(SPEC::PARAMETERS::ARENA_SIZE) + ",";
+        json += "\"target_radius\":" + std::to_string(SPEC::PARAMETERS::TARGET_RADIUS);
+        json += "}";
+        return json;
+    }
+    template <typename DEVICE, typename SPEC, typename STATE_SPEC>
+    std::string json(DEVICE&, rl::environments::Reacher<SPEC>& env, typename rl::environments::Reacher<SPEC>::Parameters& parameters, typename rl::environments::reacher::State<STATE_SPEC>& state){
+        std::string json = "{";
+        json += "\"x\":" + std::to_string(state.x) + ",";
+        json += "\"y\":" + std::to_string(state.y) + ",";
+        json += "\"target_x\":" + std::to_string(state.target_x) + ",";
+        json += "\"target_y\":" + std::to_string(state.target_y);
+        json += "}";
+        return json;
+    }
+    template <typename DEVICE, typename SPEC>
+    std::string json(DEVICE&, rl::environments::ReacherVisual<SPEC>& env){
+        return "{}";
+    }
+    template <typename DEVICE, typename SPEC>
+    std::string json(DEVICE&, rl::environments::ReacherVisual<SPEC>& env, typename rl::environments::ReacherVisual<SPEC>::Parameters& parameters){
+        std::string json = "{";
+        json += "\"arena_size\":" + std::to_string(SPEC::PARAMETERS::ARENA_SIZE) + ",";
+        json += "\"target_radius\":" + std::to_string(SPEC::PARAMETERS::TARGET_RADIUS) + ",";
+        json += "\"image_height\":" + std::to_string(SPEC::PARAMETERS::IMAGE_HEIGHT) + ",";
+        json += "\"image_width\":" + std::to_string(SPEC::PARAMETERS::IMAGE_WIDTH);
+        json += "}";
+        return json;
+    }
+    template <typename DEVICE, typename SPEC, typename STATE_SPEC>
+    std::string json(DEVICE&, rl::environments::ReacherVisual<SPEC>& env, typename rl::environments::ReacherVisual<SPEC>::Parameters& parameters, typename rl::environments::reacher::State<STATE_SPEC>& state){
+        std::string json = "{";
+        json += "\"x\":" + std::to_string(state.x) + ",";
+        json += "\"y\":" + std::to_string(state.y) + ",";
+        json += "\"target_x\":" + std::to_string(state.target_x) + ",";
+        json += "\"target_y\":" + std::to_string(state.target_y);
+        json += "}";
+        return json;
+    }
+
+    namespace rl::environments::reacher{
+        inline std::string get_ui_js(){
+            return R"RL_TOOLS_LITERAL(
+export async function init(canvas, options){
+    return {
+        ctx: canvas.getContext('2d')
+    }
+}
+export async function render(ui_state, parameters, state, action) {
+    const ctx = ui_state.ctx;
+    const w = ctx.canvas.width;
+    const h = ctx.canvas.height;
+    ctx.clearRect(0, 0, w, h);
+
+    const arenaSize = parameters.arena_size;
+    const targetRadius = parameters.target_radius;
+    const hasImage = (parameters.image_height !== undefined);
+    const minimapSize = hasImage ? Math.min(w, h) * 0.3 : 0;
+    const margin = hasImage ? w * 0.03 : w * 0.05;
+    const mainSize = w - minimapSize - (hasImage ? w * 0.05 : 0);
+    const drawSize = mainSize - 2 * margin;
+
+    function toCanvasX(x) { return margin + (x + arenaSize) / (2 * arenaSize) * drawSize; }
+    function toCanvasY(y) { return margin + (y + arenaSize) / (2 * arenaSize) * drawSize; }
+    function toCanvasLen(l) { return l / (2 * arenaSize) * drawSize; }
+
+    ctx.fillStyle = '#f0f0f0';
+    ctx.fillRect(margin, margin, drawSize, drawSize);
+    ctx.strokeStyle = '#999';
+    ctx.lineWidth = 1;
+    ctx.strokeRect(margin, margin, drawSize, drawSize);
+
+    ctx.strokeStyle = '#ddd';
+    ctx.lineWidth = 0.5;
+    for (let i = -arenaSize; i <= arenaSize; i += arenaSize / 4) {
+        ctx.beginPath();
+        ctx.moveTo(toCanvasX(i), margin);
+        ctx.lineTo(toCanvasX(i), margin + drawSize);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(margin, toCanvasY(i));
+        ctx.lineTo(margin + drawSize, toCanvasY(i));
+        ctx.stroke();
+    }
+
+    const targetCanvasR = toCanvasLen(targetRadius);
+    ctx.beginPath();
+    ctx.arc(toCanvasX(state.target_x), toCanvasY(state.target_y), targetCanvasR, 0, 2 * Math.PI);
+    ctx.fillStyle = 'rgba(255, 100, 100, 0.2)';
+    ctx.fill();
+    ctx.strokeStyle = 'rgba(255, 100, 100, 0.5)';
+    ctx.lineWidth = 1;
+    ctx.stroke();
+
+    const targetR = w * 0.02;
+    ctx.beginPath();
+    ctx.arc(toCanvasX(state.target_x), toCanvasY(state.target_y), targetR, 0, 2 * Math.PI);
+    ctx.fillStyle = '#e74c3c';
+    ctx.fill();
+    ctx.strokeStyle = '#c0392b';
+    ctx.lineWidth = 1.5;
+    ctx.stroke();
+
+    if (action && action.length >= 2) {
+        const ax = toCanvasX(state.x);
+        const ay = toCanvasY(state.y);
+        const arrowScale = toCanvasLen(arenaSize * 0.3);
+        const dx = action[0] * arrowScale;
+        const dy = action[1] * arrowScale;
+        const mag = Math.sqrt(dx * dx + dy * dy);
+        if (mag > 1) {
+            ctx.beginPath();
+            ctx.moveTo(ax, ay);
+            ctx.lineTo(ax + dx, ay + dy);
+            ctx.strokeStyle = 'rgba(0, 0, 0, 0.3)';
+            ctx.lineWidth = 2;
+            ctx.stroke();
+            const headLen = Math.min(mag * 0.3, w * 0.02);
+            const angle = Math.atan2(dy, dx);
+            ctx.beginPath();
+            ctx.moveTo(ax + dx, ay + dy);
+            ctx.lineTo(ax + dx - headLen * Math.cos(angle - Math.PI / 6), ay + dy - headLen * Math.sin(angle - Math.PI / 6));
+            ctx.lineTo(ax + dx - headLen * Math.cos(angle + Math.PI / 6), ay + dy - headLen * Math.sin(angle + Math.PI / 6));
+            ctx.closePath();
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
+            ctx.fill();
+        }
+    }
+
+    const agentR = w * 0.025;
+    ctx.beginPath();
+    ctx.arc(toCanvasX(state.x), toCanvasY(state.y), agentR, 0, 2 * Math.PI);
+    ctx.fillStyle = '#3498db';
+    ctx.fill();
+    ctx.strokeStyle = '#2980b9';
+    ctx.lineWidth = 1.5;
+    ctx.stroke();
+
+    if (hasImage) {
+        const imgH = parameters.image_height;
+        const imgW = parameters.image_width;
+        const showTarget = (state.step === undefined || state.step === 0);
+        const mmX = mainSize + margin;
+        const mmY = margin;
+        const pixelSize = minimapSize / Math.max(imgH, imgW);
+        const mmW = imgW * pixelSize;
+        const mmH = imgH * pixelSize;
+        const sigma_sq = (imgH * imgH) / 64.0;
+        const agent_px = (state.x + arenaSize) / (2 * arenaSize) * imgH;
+        const agent_py = (state.y + arenaSize) / (2 * arenaSize) * imgW;
+        const target_px = (state.target_x + arenaSize) / (2 * arenaSize) * imgH;
+        const target_py = (state.target_y + arenaSize) / (2 * arenaSize) * imgW;
+
+        for (let row = 0; row < imgH; row++) {
+            for (let col = 0; col < imgW; col++) {
+                const dh_agent = row + 0.5 - agent_px;
+                const dw_agent = col + 0.5 - agent_py;
+                const agent_intensity = Math.exp(-(dh_agent * dh_agent + dw_agent * dw_agent) / sigma_sq);
+                let target_intensity = 0;
+                if (showTarget) {
+                    const dh_target = row + 0.5 - target_px;
+                    const dw_target = col + 0.5 - target_py;
+                    target_intensity = Math.exp(-(dh_target * dh_target + dw_target * dw_target) / sigma_sq);
+                }
+                const r = Math.round(target_intensity * 255);
+                const g = 0;
+                const b = Math.round(agent_intensity * 255);
+                ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
+                ctx.fillRect(mmX + col * pixelSize, mmY + row * pixelSize, pixelSize, pixelSize);
+            }
+        }
+
+        ctx.strokeStyle = '#999';
+        ctx.lineWidth = 1;
+        ctx.strokeRect(mmX, mmY, mmW, mmH);
+
+        ctx.fillStyle = '#666';
+        ctx.font = Math.round(w * 0.03) + 'px monospace';
+        ctx.fillText(imgW + 'x' + imgH + ' obs' + (state.step !== undefined ? ' (step=' + state.step + ')' : ''), mmX, mmY + mmH + w * 0.04);
+    }
+}
+            )RL_TOOLS_LITERAL";
+        }
+    }
+    template <typename DEVICE, typename SPEC>
+    std::string get_ui(DEVICE& device, rl::environments::Reacher<SPEC>& env){
+        return rl::environments::reacher::get_ui_js();
+    }
+    template <typename DEVICE, typename SPEC>
+    std::string get_ui(DEVICE& device, rl::environments::ReacherVisual<SPEC>& env){
+        return rl::environments::reacher::get_ui_js();
+    }
+    template <typename DEVICE, typename SPEC>
+    std::string get_description(DEVICE& device, rl::environments::Reacher<SPEC>& env){
+        return "2D point reacher: navigate an agent to a target position within a bounded arena.";
+    }
+    template <typename DEVICE, typename SPEC>
+    std::string get_description(DEVICE& device, rl::environments::ReacherVisual<SPEC>& env){
+        return "2D point reacher (visual): navigate an agent to a target position within a bounded arena using image observations.";
+    }
+    template <typename DEVICE, typename SPEC>
+    std::string json(DEVICE&, rl::environments::ReacherVisualMemory<SPEC>& env){
+        return "{}";
+    }
+    template <typename DEVICE, typename SPEC>
+    std::string json(DEVICE&, rl::environments::ReacherVisualMemory<SPEC>& env, typename rl::environments::ReacherVisualMemory<SPEC>::Parameters& parameters){
+        std::string json = "{";
+        json += "\"arena_size\":" + std::to_string(SPEC::PARAMETERS::ARENA_SIZE) + ",";
+        json += "\"target_radius\":" + std::to_string(SPEC::PARAMETERS::TARGET_RADIUS) + ",";
+        json += "\"image_height\":" + std::to_string(SPEC::PARAMETERS::IMAGE_HEIGHT) + ",";
+        json += "\"image_width\":" + std::to_string(SPEC::PARAMETERS::IMAGE_WIDTH) + ",";
+        json += "\"num_targets\":" + std::to_string(SPEC::PARAMETERS::NUM_TARGETS);
+        json += "}";
+        return json;
+    }
+    template <typename DEVICE, typename SPEC, typename STATE_SPEC>
+    std::string json(DEVICE&, rl::environments::ReacherVisualMemory<SPEC>& env, typename rl::environments::ReacherVisualMemory<SPEC>::Parameters& parameters, typename rl::environments::reacher::StateSequentialTargets<STATE_SPEC>& state){
+        std::string json = "{";
+        json += "\"x\":" + std::to_string(state.x) + ",";
+        json += "\"y\":" + std::to_string(state.y) + ",";
+        json += "\"target1_x\":" + std::to_string(state.target1_x) + ",";
+        json += "\"target1_y\":" + std::to_string(state.target1_y) + ",";
+        json += "\"target2_x\":" + std::to_string(state.target2_x) + ",";
+        json += "\"target2_y\":" + std::to_string(state.target2_y) + ",";
+        json += "\"step\":" + std::to_string(state.step) + ",";
+        json += "\"current_target\":" + std::to_string(state.current_target);
+        json += "}";
+        return json;
+    }
+    namespace rl::environments::reacher{
+        inline std::string get_ui_memory_js(){
+            return R"RL_TOOLS_LITERAL(
+export async function init(canvas, options){
+    return {
+        ctx: canvas.getContext('2d')
+    }
+}
+export async function render(ui_state, parameters, state, action) {
+    const ctx = ui_state.ctx;
+    const w = ctx.canvas.width;
+    const h = ctx.canvas.height;
+    ctx.clearRect(0, 0, w, h);
+
+    const arenaSize = parameters.arena_size;
+    const targetRadius = parameters.target_radius;
+    const minimapSize = Math.min(w, h) * 0.3;
+    const margin = w * 0.03;
+    const mainSize = w - minimapSize - w * 0.05;
+    const drawSize = mainSize - 2 * margin;
+
+    function toCanvasX(x) { return margin + (x + arenaSize) / (2 * arenaSize) * drawSize; }
+    function toCanvasY(y) { return margin + (y + arenaSize) / (2 * arenaSize) * drawSize; }
+    function toCanvasLen(l) { return l / (2 * arenaSize) * drawSize; }
+
+    ctx.fillStyle = '#f0f0f0';
+    ctx.fillRect(margin, margin, drawSize, drawSize);
+    ctx.strokeStyle = '#999';
+    ctx.lineWidth = 1;
+    ctx.strokeRect(margin, margin, drawSize, drawSize);
+
+    ctx.strokeStyle = '#ddd';
+    ctx.lineWidth = 0.5;
+    for (let i = -arenaSize; i <= arenaSize; i += arenaSize / 4) {
+        ctx.beginPath();
+        ctx.moveTo(toCanvasX(i), margin);
+        ctx.lineTo(toCanvasX(i), margin + drawSize);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(margin, toCanvasY(i));
+        ctx.lineTo(margin + drawSize, toCanvasY(i));
+        ctx.stroke();
+    }
+
+    const targetCanvasR = toCanvasLen(targetRadius);
+    const targetR = w * 0.02;
+
+    // Target 1 (red)
+    ctx.beginPath();
+    ctx.arc(toCanvasX(state.target1_x), toCanvasY(state.target1_y), targetCanvasR, 0, 2 * Math.PI);
+    ctx.fillStyle = state.current_target === 0 ? 'rgba(255, 100, 100, 0.2)' : 'rgba(255, 100, 100, 0.05)';
+    ctx.fill();
+    ctx.strokeStyle = state.current_target === 0 ? 'rgba(255, 100, 100, 0.5)' : 'rgba(255, 100, 100, 0.15)';
+    ctx.lineWidth = 1;
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.arc(toCanvasX(state.target1_x), toCanvasY(state.target1_y), targetR, 0, 2 * Math.PI);
+    ctx.fillStyle = state.current_target === 0 ? '#e74c3c' : '#e74c3c44';
+    ctx.fill();
+
+    // Target 2 (green) - only for multi-target
+    if (parameters.num_targets > 1) {
+        ctx.beginPath();
+        ctx.arc(toCanvasX(state.target2_x), toCanvasY(state.target2_y), targetCanvasR, 0, 2 * Math.PI);
+        ctx.fillStyle = state.current_target === 1 ? 'rgba(100, 255, 100, 0.2)' : 'rgba(100, 255, 100, 0.05)';
+        ctx.fill();
+        ctx.strokeStyle = state.current_target === 1 ? 'rgba(100, 255, 100, 0.5)' : 'rgba(100, 255, 100, 0.15)';
+        ctx.lineWidth = 1;
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.arc(toCanvasX(state.target2_x), toCanvasY(state.target2_y), targetR, 0, 2 * Math.PI);
+        ctx.fillStyle = state.current_target === 1 ? '#2ecc71' : '#2ecc7144';
+        ctx.fill();
+    }
+
+    if (action && action.length >= 2) {
+        const ax = toCanvasX(state.x);
+        const ay = toCanvasY(state.y);
+        const arrowScale = toCanvasLen(arenaSize * 0.3);
+        const dx = action[0] * arrowScale;
+        const dy = action[1] * arrowScale;
+        const mag = Math.sqrt(dx * dx + dy * dy);
+        if (mag > 1) {
+            ctx.beginPath();
+            ctx.moveTo(ax, ay);
+            ctx.lineTo(ax + dx, ay + dy);
+            ctx.strokeStyle = 'rgba(0, 0, 0, 0.3)';
+            ctx.lineWidth = 2;
+            ctx.stroke();
+            const headLen = Math.min(mag * 0.3, w * 0.02);
+            const angle = Math.atan2(dy, dx);
+            ctx.beginPath();
+            ctx.moveTo(ax + dx, ay + dy);
+            ctx.lineTo(ax + dx - headLen * Math.cos(angle - Math.PI / 6), ay + dy - headLen * Math.sin(angle - Math.PI / 6));
+            ctx.lineTo(ax + dx - headLen * Math.cos(angle + Math.PI / 6), ay + dy - headLen * Math.sin(angle + Math.PI / 6));
+            ctx.closePath();
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
+            ctx.fill();
+        }
+    }
+
+    const agentR = w * 0.025;
+    ctx.beginPath();
+    ctx.arc(toCanvasX(state.x), toCanvasY(state.y), agentR, 0, 2 * Math.PI);
+    ctx.fillStyle = '#3498db';
+    ctx.fill();
+    ctx.strokeStyle = '#2980b9';
+    ctx.lineWidth = 1.5;
+    ctx.stroke();
+
+    const imgH = parameters.image_height;
+    const imgW = parameters.image_width;
+    const showTargets = (state.step === 0);
+    const mmX = mainSize + margin;
+    const mmY = margin;
+    const pixelSize = minimapSize / Math.max(imgH, imgW);
+    const mmW = imgW * pixelSize;
+    const mmH = imgH * pixelSize;
+    const sigma_sq = (imgH * imgH) / 64.0;
+    const agent_px = (state.x + arenaSize) / (2 * arenaSize) * imgH;
+    const agent_py = (state.y + arenaSize) / (2 * arenaSize) * imgW;
+    const target1_px = (state.target1_x + arenaSize) / (2 * arenaSize) * imgH;
+    const target1_py = (state.target1_y + arenaSize) / (2 * arenaSize) * imgW;
+    const hasTarget2 = parameters.num_targets > 1;
+    const target2_px = hasTarget2 ? (state.target2_x + arenaSize) / (2 * arenaSize) * imgH : 0;
+    const target2_py = hasTarget2 ? (state.target2_y + arenaSize) / (2 * arenaSize) * imgW : 0;
+
+    for (let row = 0; row < imgH; row++) {
+        for (let col = 0; col < imgW; col++) {
+            const dh_agent = row + 0.5 - agent_px;
+            const dw_agent = col + 0.5 - agent_py;
+            const agent_intensity = Math.exp(-(dh_agent * dh_agent + dw_agent * dw_agent) / sigma_sq);
+            let target1_intensity = 0;
+            let target2_intensity = 0;
+            if (showTargets) {
+                const dh_t1 = row + 0.5 - target1_px;
+                const dw_t1 = col + 0.5 - target1_py;
+                target1_intensity = Math.exp(-(dh_t1 * dh_t1 + dw_t1 * dw_t1) / sigma_sq);
+                if (hasTarget2) {
+                    const dh_t2 = row + 0.5 - target2_px;
+                    const dw_t2 = col + 0.5 - target2_py;
+                    target2_intensity = Math.exp(-(dh_t2 * dh_t2 + dw_t2 * dw_t2) / sigma_sq);
+                }
+            }
+            const r = Math.round(target1_intensity * 255);
+            const g = Math.round(target2_intensity * 255);
+            const b = Math.round(agent_intensity * 255);
+            ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
+            ctx.fillRect(mmX + col * pixelSize, mmY + row * pixelSize, pixelSize, pixelSize);
+        }
+    }
+
+    ctx.strokeStyle = '#999';
+    ctx.lineWidth = 1;
+    ctx.strokeRect(mmX, mmY, mmW, mmH);
+
+    ctx.fillStyle = '#666';
+    ctx.font = Math.round(w * 0.03) + 'px monospace';
+    ctx.fillText(imgW + 'x' + imgH + ' obs (step=' + state.step + (parameters.num_targets > 1 ? ' target=' + (state.current_target === 0 ? 'red' : 'green') : '') + ')', mmX, mmY + mmH + w * 0.04);
+}
+            )RL_TOOLS_LITERAL";
+        }
+    }
+    template <typename DEVICE, typename SPEC>
+    std::string get_ui(DEVICE& device, rl::environments::ReacherVisualMemory<SPEC>& env){
+        return rl::environments::reacher::get_ui_memory_js();
+    }
+    template <typename DEVICE, typename SPEC>
+    std::string get_description(DEVICE& device, rl::environments::ReacherVisualMemory<SPEC>& env){
+        if(SPEC::PARAMETERS::NUM_TARGETS > 1){
+            return "2D point reacher (visual memory): " + std::to_string(SPEC::PARAMETERS::NUM_TARGETS) + " targets shown at step 0, agent must visit them sequentially.";
+        }
+        return "2D point reacher (visual memory): target shown only on first step, agent must remember target location.";
+    }
+}
+RL_TOOLS_NAMESPACE_WRAPPER_END
+
+#endif