import gradio as gr

def update_position(data):
    # data will be the position of the rectangle, expected to be a JSON string
    return data  # Here you can parse and use the position data as needed

html_code = """
<div id="canvas-container"></div>

<script>
document.getElementById('canvas-container').innerHTML = `
  <canvas id="canvas" width="500" height="500"></canvas>
`;

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const rect = { x: 50, y: 50, width: 100, height: 50, isDragging: false };

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'blue';
    ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
}

function sendData() {
    GradioApp.send({x: rect.x, y: rect.y});
}

function mouseDown(e) {
    if (e.offsetX >= rect.x && e.offsetX <= rect.x + rect.width &&
        e.offsetY >= rect.y && e.offsetY <= rect.y + rect.height) {
      rect.isDragging = true;
    }
}

function mouseMove(e) {
    if (rect.isDragging) {
      rect.x = e.offsetX - rect.width / 2;
      rect.y = e.offsetY - rect.height / 2;
      draw();
      sendData();
    }
}

function mouseUp() {
    rect.isDragging = false;
    sendData();
}

canvas.addEventListener('mousedown', mouseDown);
canvas.addEventListener('mousemove', mouseMove);
canvas.addEventListener('mouseup', mouseUp);

draw();
</script>
"""

interface = gr.Interface(
    fn=update_position,
    inputs=gr.HTML(),
    outputs="json",
    allow_flagging="never",
    live=True
)

interface.launch(server_name='0.0.0.0', server_port=7860)