File size: 1,582 Bytes
cda7b4b 8b73ab4 cda7b4b 8b73ab4 cda7b4b 8b73ab4 cda7b4b 8b73ab4 cda7b4b 8b73ab4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
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)
|