Thanks @Daimona, yes exactly. Here's a visual reference of how this could look with a ButtonGroupWidget (including a toggle button to "select area" grouped with a normal button to run the OCR on the selection):

Empty state
"Select area" is untoggled and "Transcribe selection" is inactive

Active state
"Select area" is selected/toggled, and "Transcribe selection" becomes active

Let me know what you think! cc @NRodriguez

We could switch to drag-mode 'move' rather than the default of 'crop'. This still moves the crop box when you're zoomed in and drag the crop box, but it moves the image when you drag outside the crop box. See the first buttons under the demo at https://fengyuanchen.github.io/cropperjs/

That's a great idea @Samwilson! I can provide updated visual reference if you want.

Hi @Samwilson, thanks for updating the description - sounds great! To my understanding, this would be the visual reference for the updated UI:
(give or take non-OOUI assets + I used the button from cropper.js docs, with our colors though)

Thanks @nayoub that's great. Do you think it's worth adding a sentence above the buttons, e.g. "Drag a rectangle on the image below to transcribe only one section.", because otherwise it's a bit hard to tell that there's any interactivity there (the only hint is the cross-hairs cursor when hovering over the image).

Also, I've set it to disable the buttons (all three) until a rectangle has been made.

Moving the clipboard button up also avoids obscuring the text, as reported by @imaigwilo in T269818#7298154, so that's good.

PR: https://github.com/wikimedia/wikimedia-ocr/pull/57

Here's what the above PR is looking like:

Initial	After dragging

Looks perfect, thanks @Samwilson! The one tiny change would be the wording to be "Drag a rectangle on the image below to transcribe only one area of the page" since the button says "Transcribe area", it would be more consistent for users.

Good idea, fixed.

PR 57 is ready for review now.

@Samwilson @nayoub
I fail to mention this observation earlier, however:

1. It was not easy for a user to deselect the transcribe area(rectangle). I had to click outside the rectangle 4 or so times to get rid of the rectangle. Would be nice to make that easier in case a user changes their mind about OCR section Vs whole page.
2. When user clicks "Transcribe" to OCR a section. The page refreshes to top of the page, user has to scroll down to view transcribed text. Would be nice for the page focus to stay at the transcribe section.

Thank you.

PR 57 merged.

Hi @imaigwilo, my testing has been completed for this ticket...

Compatibility Testing was performed on the following:
Desktop  -- Firefox version 91 Windows 10 / Chrome version 92 Windows 10 / Microsoft Edge version 92 Windows 10 / Safari version 14 Mac OS 11 / Internet Explorer version 11 Windows 10 / Opera version 78.04093.112 Windows 10.
Mobile Devices -- Android version 11 Samsung FE20 phone / Android version 8.1 Galaxy A10 tablet / iOS version 14.5 iPad Pro 5th generation / iOS version 14.5 iPhone 12 Pro Max.

Screenshots of new code changes on various devices and browsers:
Chrome version 92 Windows 10:

 Opera version 78.04093.112 Windows 10:

iOS version 14.5 iPad Pro 5th generation / Portrait Mode:

iOS version 14.5 iPad Pro 5th generation / Landscape Mode:

Samsung FE20 phone using Android Version 11:

2:  Also in regards to the Move Modes listed in the Ticket Description it says “It is possible to switch between them by double-clicking on the crop box, but this is hard to discover. If someone does double-click, our new buttons should toggle in state.”
    I was not able to duplicate this function when I double-clicked the crop box (it did not toggle as mentioned in Description).
    I don’t think its an issue but figured I should mention it just in case.

3:  If I select the Crop button, and then decide not to use the crop function, I am not able to deselect or remove the rectangle…
     I have no way of removing the rectangle or deselecting either of the mode functions unless I re-transcribe the whole page again (by selecting the Transcribe Whole Page button).

4:   Using Mobile Phones in Landscape Mode or Portrait Mode, or just using an Android Tablet in Portrait Mode only:  
       When I select the Crop button → then select an area to crop → and then select Transcribe Area button, you will notice the Copy the Clipboard button could use a little more       
      white-spacing between the hi-lighted section and the Copy to Clipboard button. 
      (Same issue with spacing is also occurring after selecting Copy to Clipboard button), see screenshots below: 

Samsung FE20 phone using Android Version 11:

Android version 8.1 Galaxy A10 tablet:

Thanks @Djackson-ctr for testing this ticket. Will now move ticket to done column for review

2: Also in regards to the Move Modes listed in the Ticket Description it says “It is possible to switch between them by double-clicking on the crop box, but this is hard to discover. If someone does double-click, our new buttons should toggle in state.”
I was not able to duplicate this function when I double-clicked the crop box (it did not toggle as mentioned in Description).
I don’t think its an issue but figured I should mention it just in case.

Yes, sorry, this is my fault: the default behaviour of CropperJS is to have that double-clicking, so I added it to the description here. In the end, it turned out to be a bit weird to have both that and the new buttons (plus it was overly-complicating things for a feature that no one knew about anyway), so I removed the double-clicking and forgot to update the ticket.