AI Voices

[michalrentka]

Implement AI Voices option in speech dialog same as zotero/zotero#5355, zotero/reader#169

[michalrentka]

@yexingsha can you try to come up with an updated UI for the AI Voices part of speech dialog? The current state looks like this:

[yexingsha]

When using AI voices, display the voice name + SF symbol clock + remaining time in the voice switch button. On tablets, increase the popover width to ~360px to accommodate this:

In the Voice options modal, add a Zotero Voices / Local Voices switch at the top. When Zotero Voices is selected, display the remaining time in a row with footnotes below (the text could use some fine tuning, but definitely need a "Learn more" link for purchasing credits). The Language options will be "Auto" by default, then the device language if that's available in the list of google TTS languages, and then the rest.

[michalrentka]

@yexingsha can you design the first time popup that we have on desktop for iOS? Also, please take a look at desktop changes for voice picker and try to update the iOS counterpart. Thanks!

[yexingsha]

For the first-run dialog, we can either use a horizontal scroll, which is closer to the desktop version but somewhat awkward with the voice switching and controls:

Or we can use a more canonical layout, which I slightly prefer. It feels less weird if we default to the 2nd option (Basic), but the hierarchy and voice selection might be a little unclear:

I will also post the designs for the highlight feature here. Let's add a highlight button to the right edge of the panel/toolbar, and a settings button to the left edge of the toolbar only. Tapping on settings will open the panel. Tapping on highlight will open a popup similar to the one on desktop, except that it's positioned right above the panel/toolbar and expands upwards instead of downwards, so that buttons are easier to tap after tapping highlight. All actions are achievable by buttons: delete, extend to previous, move to previous, move to next, extend to next, format.

When credits are about to run out, if the panel is open, display the remaining time in red; if only the toolbar is visible, replace the settings button with a button showing only the remaining time in red. Tapping on this button will open the voice picker, so that you can switch to a different voice or purchase credits if you wish. In the voice picker, the Basic options will be largely the same as the Advanced options, except for the Remaining Time part, which I think is still being decided on.

On iPad, the highlight popup is positioned right below the navbar, and extends downwards just like on desktop. It should have a minimum width of 320px to accommodate all the buttons, and maximum width of ~500px, horizontally centered in the reader area while making space for the annotation toolbar.

Note that these mocks are sized 744*1133 (iPad mini). When the window is narrower than that, I think we have to adopt the mobile approach and move the TTS controls and highlight popup into the bottom of the reader area, and allow the highlight popup to cover the sidebar area if the reader area is too narrow.

Let me know if I've missed anything here.

[michalrentka]

Or we can use a more canonical layout, which I slightly prefer. It feels less weird if we default to the 2nd option (Basic), but the hierarchy and voice selection might be a little unclear:

I also like this option more, I can start with this and if we don't like this we'll switch to the other.

settings button to the left edge of the toolbar only. Tapping on settings will open the panel.

What panel? Do you mean Read Aloud controls? The document button top left opens read aloud controls already.

Wouldn't it be nicer to have the same picker that we have in here:

[yexingsha]

What panel? Do you mean Read Aloud controls? The document button top left opens read aloud controls already.

Yes, my thought process here is that 1) on iPad, when the controls are in the navbar, we need something on the left side to balance things out; 2) on iPhone, when all read aloud controls are at the bottom of the screen, it's more convenient to have the settings button down there as well; 3) it isn't obvious that the document button will open read aloud controls. We will need a first-run tooltip to help with discovery, but after that people can forget about this pretty easily. A settings button that's obvious and consistent with the desktop interface will help with this.

Wouldn't it be nicer to have the same picker that we have in here:

I can't see the image for some reason, but I assume you mean the picker in the Edit Annotation dialog? That definitely works, I just thought it might be nice to have a menu style picker to preserve the context. We should go with the option that require the least number of taps.

[michalrentka]

I can't see the image for some reason, but I assume you mean the picker in the Edit Annotation dialog? That definitely works, I just thought it might be nice to have a menu style picker to preserve the context. We should go with the option that require the least number of taps.

Oh, I can still see them, I used your pictures. Anyway, I meant to have the same picker (segmented control), which we have in first time popup for advanced / basic / local, in voice picker on top. We can try both, it's a simple change.