Skip to content

feat(whisper): settings gear dialog with state to show which model is on use #221

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bennettrwu merged 1 commit into from
Sep 24, 2025
Merged

feat(whisper): settings gear dialog with state to show which model is on use #221

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/components/navbars/topbar/api/WhisperSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export default function WhisperSettings() {
const dispatch = useDispatch();
const selected = useSelector(selectSelectedModel);

// normalize current selection to 'tiny' | 'base' | undefined
// Normalize current selection to 'tiny' | 'base' | undefined
const selectedKey: ModelKey | undefined = React.useMemo(() => {
if (typeof selected === 'string') {
return selected === 'tiny' || selected === 'base' ? selected : undefined;
Expand All @@ -40,19 +40,19 @@ export default function WhisperSettings() {
const closePopup = () => setAnchorEl(null);

const pick = (which: ModelKey) => {
// keep existing flags your loader watches
// Keep flags if your loader watches them
sessionStorage.setItem('isDownloadTiny', (which === 'tiny').toString());
sessionStorage.setItem('isDownloadBase', (which === 'base').toString());

// update redux
// Update redux
dispatch({ type: 'SET_SELECTED_MODEL', payload: which as any });

closePopup();
};

return (
<>
{/* Right-side gear, same pattern as Azure/ScribeAR Server */}
{/* Right-side gear (same pattern as Azure/ScribeAR Server) */}
<IconButton onClick={showPopup}>
<SettingsIcon />
</IconButton>
Expand Down
128 changes: 69 additions & 59 deletions src/components/navbars/topbar/api/pickApi.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,35 +17,45 @@ import {
import {
CancelIcon,
CheckCircleIcon,
Collapse,
DoNotDisturbOnIcon,
ErrorIcon,
ExpandLess,
ExpandMore,
IconButton,
ListItemButton,
ListItemIcon,
ListItemText,
ThemeProvider,
createTheme,
Chip,
} from '../../../../muiImports';
import { ListItem } from '@mui/material';

import AzureSettings from './AzureSettings';
import StreamTextSettings from './StreamTextSettings';
import ScribearServerSettings from './ScribearServerSettings';
import PlaybackSettings from './PlaybackSettings';
import WhisperSettings from './WhisperSettings'; // <-- use settings-gear dialog for Whisper
import WhisperSettings from './WhisperSettings';

import swal from 'sweetalert';
import { testAzureTranslRecog } from '../../../api/azure/azureTranslRecog';
import { selectSelectedModel } from '../../../../react-redux&middleware/redux/reducers/modelSelectionReducers';

// helper to normalize selected model to 'tiny' | 'base' | undefined
function getSelectedModelKey(selected: unknown): 'tiny' | 'base' | undefined {
if (typeof selected === 'string') {
return selected === 'tiny' || selected === 'base' ? selected : undefined;
}
if (selected && typeof selected === 'object' && 'key' in (selected as any)) {
const k = (selected as any).key;
return k === 'tiny' || k === 'base' ? k : undefined;
}
return undefined;
}

const currTheme = createTheme({
palette: {
primary: { main: '#ffffff' },
success: { main: '#4caf50' },
warning: { main: '#f44336' },
error: { main: '#C8C224' },
error: { main: '#C8C224' },
},
});

Expand Down Expand Up @@ -84,13 +94,20 @@ export default function PickApi() {
const dispatch = useDispatch();
const myTheme = currTheme;

// ✅ hooks INSIDE the component
const apiStatus = useSelector((state: RootState) => state.APIStatusReducer as ApiStatus);
const controlStatus = useSelector((state: RootState) => state.ControlReducer as ControlStatus);
const azureStatus = useSelector((state: RootState) => state.AzureReducer as AzureStatus);
const streamTextStatus = useSelector((state: RootState) => state.StreamTextReducer as StreamTextStatus);
const scribearServerStatus = useSelector((state: RootState) => state.ScribearServerReducer as ScribearServerStatus);
const playbackStatus = useSelector((state: RootState) => state.PlaybackReducer as PlaybackStatus);

const selectedModel = useSelector(selectSelectedModel as any);
const selectedModelKey = React.useMemo(
() => getSelectedModelKey(selectedModel),
[selectedModel]
);

const [state, setState] = React.useState({
showAzureDropdown: false,
showWhisperDropdown: false,
Expand All @@ -102,22 +119,14 @@ export default function PickApi() {
testAzureTranslRecog(controlStatus, azureStatus)
.then(() => {
localStorage.setItem('azureStatus', JSON.stringify(azureStatus));

copyStatus.currentApi = API.AZURE_TRANSLATION;
copyStatus.azureTranslStatus = STATUS.TRANSCRIBING;
copyStatus.webspeechStatus = STATUS.AVAILABLE;
copyStatus.azureConvoStatus = STATUS.AVAILABLE;
copyStatus.whisperStatus = STATUS.AVAILABLE;
copyStatus.streamTextStatus = STATUS.AVAILABLE;
copyStatus.playbackStatus = STATUS.AVAILABLE;

swal({
title: 'Success!',
text: 'Switching to Microsoft Azure',
icon: 'success',
timer: 1500,
});

swal({ title: 'Success!', text: 'Switching to Microsoft Azure', icon: 'success', timer: 1500 });
dispatch({ type: 'CHANGE_API_STATUS', payload: copyStatus });
})
.catch((error) => {
Expand All @@ -129,28 +138,12 @@ export default function PickApi() {
});
};

const switchToStreamText = (event: React.KeyboardEvent | React.MouseEvent) => {
localStorage.setItem('streamTextStatus', JSON.stringify(streamTextStatus));
return toggleDrawer('streamTextStatus', API.STREAM_TEXT, false)(event);
};

const switchToScribearServer = (event: React.KeyboardEvent | React.MouseEvent) => {
localStorage.setItem('scribearServerStatus', JSON.stringify(scribearServerStatus));
return toggleDrawer('scribearServerStatus', API.SCRIBEAR_SERVER, false)(event);
};

const switchToPlayback = (event: React.KeyboardEvent | React.MouseEvent) => {
localStorage.setItem('playbackStatus', JSON.stringify(playbackStatus));
return toggleDrawer('playbackStatus', API.PLAYBACK, false)(event);
};

const toggleDrawer =
(apiStat: string, api: ApiType, isArrow: boolean) =>
(_event: React.KeyboardEvent | React.MouseEvent) => {
if (apiStatus.currentApi !== api) {
if (!isArrow) {
const copyStatus = { ...apiStatus };
copyStatus.currentApi = api;
const copyStatus = { ...apiStatus, currentApi: api };

// reset all
copyStatus.azureTranslStatus = STATUS.AVAILABLE;
Expand All @@ -163,31 +156,21 @@ export default function PickApi() {

let apiName = '';
if (api === API.AZURE_TRANSLATION) {
apiName = 'Microsoft Azure';
copyStatus.azureTranslStatus = STATUS.TRANSCRIBING;
apiName = 'Microsoft Azure'; copyStatus.azureTranslStatus = STATUS.TRANSCRIBING;
} else if (api === API.WHISPER) {
apiName = 'Whisper';
copyStatus.whisperStatus = STATUS.TRANSCRIBING;
apiName = 'Whisper'; copyStatus.whisperStatus = STATUS.TRANSCRIBING;
} else if (api === API.WEBSPEECH) {
copyStatus.webspeechStatus = STATUS.TRANSCRIBING;
copyStatus.webspeechStatus = STATUS.TRANSCRIBING;
} else if (api === API.STREAM_TEXT) {
apiName = 'StreamText';
copyStatus.streamTextStatus = STATUS.TRANSCRIBING;
apiName = 'StreamText'; copyStatus.streamTextStatus = STATUS.TRANSCRIBING;
} else if (api === API.SCRIBEAR_SERVER) {
apiName = 'ScribeAR Server';
copyStatus.scribearServerStatus = STATUS.TRANSCRIBING;
apiName = 'ScribeAR Server'; copyStatus.scribearServerStatus = STATUS.TRANSCRIBING;
} else if (api === API.PLAYBACK) {
apiName = 'Playback';
copyStatus.playbackStatus = STATUS.TRANSCRIBING;
apiName = 'Playback'; copyStatus.playbackStatus = STATUS.TRANSCRIBING;
}

dispatch({ type: 'CHANGE_API_STATUS', payload: copyStatus });
swal({
title: 'Success!',
text: 'Switching to ' + apiName,
icon: 'success',
timer: 2500,
});
swal({ title: 'Success!', text: 'Switching to ' + apiName, icon: 'success', timer: 2500 });
} else {
setState((s) => ({ ...s, [apiStat]: !s[apiStat] }));
}
Expand All @@ -196,17 +179,34 @@ export default function PickApi() {
}
};

const switchToStreamText = (e: React.KeyboardEvent | React.MouseEvent) => {
localStorage.setItem('streamTextStatus', JSON.stringify(streamTextStatus));
return toggleDrawer('streamTextStatus', API.STREAM_TEXT, false)(e);
};

const switchToScribearServer = (e: React.KeyboardEvent | React.MouseEvent) => {
localStorage.setItem('scribearServerStatus', JSON.stringify(scribearServerStatus));
return toggleDrawer('scribearServerStatus', API.SCRIBEAR_SERVER, false)(e);
};

const switchToPlayback = (e: React.KeyboardEvent | React.MouseEvent) => {
localStorage.setItem('playbackStatus', JSON.stringify(playbackStatus));
return toggleDrawer('playbackStatus', API.PLAYBACK, false)(e);
};

return (
<div>
{/* Webspeech */}
<ListItemButton onClick={toggleDrawer('webspeechStatus', API.WEBSPEECH, false)}>
<ThemeProvider theme={myTheme}>
<ListItemIcon>
<IconStatus {...{ currentApi: apiStatus.webspeechStatus }} />
</ListItemIcon>
</ThemeProvider>
<ListItemText primary="Webspeech" />
</ListItemButton>
<ListItem disableGutters>
<ListItemButton onClick={toggleDrawer('webspeechStatus', API.WEBSPEECH, false)}>
<ThemeProvider theme={myTheme}>
<ListItemIcon>
<IconStatus {...{ currentApi: apiStatus.webspeechStatus }} />
</ListItemIcon>
</ThemeProvider>
<ListItemText primary="Webspeech" />
</ListItemButton>
</ListItem>

{/* Microsoft Azure */}
<ListItem>
Expand Down Expand Up @@ -252,7 +252,7 @@ export default function PickApi() {
<StreamTextSettings />
</ListItem>

{/* Whisper (now matches others: button + gear on the right) */}
{/* Whisper (button + gear; inline chip shows selected model) */}
<ListItem>
<ListItemButton
disableGutters
Expand All @@ -261,7 +261,17 @@ export default function PickApi() {
<ListItemIcon>
<IconStatus {...{ currentApi: apiStatus.whisperStatus }} />
</ListItemIcon>
<ListItemText primary="Whisper" />

<ListItemText
primary={
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
<span>Whisper</span>
{selectedModelKey && (
<Chip size="small" variant="outlined" label={selectedModelKey.toUpperCase()} />
)}
</span>
}
/>
</ListItemButton>
<WhisperSettings />
</ListItem>
Expand Down
6 changes: 4 additions & 2 deletions src/muiImports.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ import FormatColorTextIcon from '@mui/icons-material/FormatColorText';
import Autocomplete from '@mui/material/Autocomplete';
import { Switch } from '@mui/material';
import MemoryIcon from '@mui/icons-material/Memory';
import Chip from '@mui/material/Chip';
export {
createTheme,
Autocomplete,
Expand Down Expand Up @@ -114,5 +115,6 @@ export {
FormatColorTextIcon,
ArchitectureIcon,
Switch,
MemoryIcon
}
MemoryIcon,
Chip
}