Hello, World!

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const imageElement = document.getElementById('generated-image');
    const moveButton = document.getElementById('move-button');
    const rotateButton = document.getElementById('rotate-button');
    const scaleButton = document.getElementById('scale-button');

    let mode = 'move';
    let isDragging = false;
    let initialX, initialY, offsetX, offsetY;

    moveButton.addEventListener('click', () => {
      mode = 'move';
      imageElement.style.cursor = 'move';
    });

    rotateButton.addEventListener('click', () => {
      mode = 'rotate';
      imageElement.style.cursor = 'crosshair';
    });

    scaleButton.addEventListener('click', () => {
      mode = 'scale';
      imageElement.style.cursor = 'nesw-resize';
    });

    imageElement.addEventListener('mousedown', (event) => {
      isDragging = true;
      initialX = event.clientX;
      initialY = event.clientY;
      offsetX = 0;
      offsetY = 0;
    });

    imageElement.addEventListener('mousemove', (event) => {
      if (isDragging) {
        if (mode === 'move') {
          offsetX = event.clientX - initialX;
          offsetY = event.clientY - initialY;
          imageElement.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
        } else if (mode === 'rotate') {
          const angle = Math.atan2(event.clientY - initialY, event.clientX - initialX);
          imageElement.style.transform = `translate(${offsetX}px, ${offsetY}px) rotate(${angle}rad)`;
        } else if (mode === 'scale') {
          const distance = Math.sqrt((event.clientX - initialX) ** 2 + (event.clientY - initialY) ** 2);
          const scale = 1 + distance * 0.01; // Adjust scale factor as needed
          imageElement.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
        }
      }
    });

    imageElement.addEventListener('mouseup', () => {
      isDragging = false;
    });

    imageElement.addEventListener('mouseleave', () => {
      if (isDragging) {
        isDragging = false;
        // Perform any necessary cleanup or handling when dragging leaves the image area
      }
    });
  });
</script>