BerfScene / test.py
3v324v23's picture
update
8b73ab4
raw
history blame
1.58 kB
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)