Merge remote-tracking branch 'origin/FEATURE/Vision' into FEATURE/Vision

This commit is contained in:
vinodkiran 2024-02-20 13:24:30 -08:00
commit 51c2a93a02
3 changed files with 116 additions and 92 deletions

View File

@ -1530,10 +1530,12 @@ export class App {
if (chatflow.speechToText) { if (chatflow.speechToText) {
const speechToTextProviders = JSON.parse(chatflow.speechToText) const speechToTextProviders = JSON.parse(chatflow.speechToText)
for (const provider in speechToTextProviders) { for (const provider in speechToTextProviders) {
const providerObj = speechToTextProviders[provider] if (provider !== 'none') {
if (providerObj.status) { const providerObj = speechToTextProviders[provider]
isSpeechToTextEnabled = true if (providerObj.status) {
break isSpeechToTextEnabled = true
break
}
} }
} }
} }

View File

@ -175,7 +175,16 @@ const SpeechToTextDialog = ({ show, dialogProps, onCancel }) => {
useEffect(() => { useEffect(() => {
if (dialogProps.chatflow && dialogProps.chatflow.speechToText) { if (dialogProps.chatflow && dialogProps.chatflow.speechToText) {
try { try {
setSpeechToText(JSON.parse(dialogProps.chatflow.speechToText)) const speechToText = JSON.parse(dialogProps.chatflow.speechToText)
let selectedProvider = 'none'
Object.keys(speechToTextProviders).forEach((key) => {
const providerConfig = speechToText[key]
if (providerConfig.status) {
selectedProvider = key
}
})
setSelectedProvider(selectedProvider)
setSpeechToText(speechToText)
} catch (e) { } catch (e) {
setSpeechToText({}) setSpeechToText({})
console.error(e) console.error(e)
@ -193,7 +202,7 @@ const SpeechToTextDialog = ({ show, dialogProps, onCancel }) => {
return () => dispatch({ type: HIDE_CANVAS_DIALOG }) return () => dispatch({ type: HIDE_CANVAS_DIALOG })
}, [show, dispatch]) }, [show, dispatch])
const component = show ? ( const component = (
<Dialog <Dialog
onClose={onCancel} onClose={onCancel}
open={show} open={show}
@ -210,99 +219,106 @@ const SpeechToTextDialog = ({ show, dialogProps, onCancel }) => {
<Typography>Speech To Text Providers</Typography> <Typography>Speech To Text Providers</Typography>
<FormControl fullWidth> <FormControl fullWidth>
<Select value={selectedProvider} onChange={handleProviderChange}> <Select value={selectedProvider} onChange={handleProviderChange}>
<MenuItem value='none'>None</MenuItem>
<MenuItem value='openAIWhisper'>OpenAI Whisper</MenuItem> <MenuItem value='openAIWhisper'>OpenAI Whisper</MenuItem>
<MenuItem value='assemblyAiTranscribe'>Assembly AI</MenuItem> <MenuItem value='assemblyAiTranscribe'>Assembly AI</MenuItem>
</Select> </Select>
</FormControl> </FormControl>
</Box> </Box>
<> {selectedProvider !== 'none' && (
<ListItem style={{ padding: 0, margin: 0 }} alignItems='center'> <>
<ListItemAvatar> <ListItem style={{ padding: 0, margin: 0 }} alignItems='center'>
<div <ListItemAvatar>
style={{ <div
width: 50,
height: 50,
borderRadius: '50%',
backgroundColor: 'white'
}}
>
<img
style={{ style={{
width: '100%', width: 50,
height: '100%', height: 50,
padding: 10, borderRadius: '50%',
objectFit: 'contain' backgroundColor: 'white'
}} }}
alt='AI' >
src={speechToTextProviders[selectedProvider].icon} <img
/> style={{
</div> width: '100%',
</ListItemAvatar> height: '100%',
<ListItemText padding: 10,
sx={{ ml: 1 }} objectFit: 'contain'
primary={speechToTextProviders[selectedProvider].label} }}
secondary={ alt='AI'
<a target='_blank' rel='noreferrer' href={speechToTextProviders[selectedProvider].url}> src={speechToTextProviders[selectedProvider].icon}
{speechToTextProviders[selectedProvider].url} />
</a> </div>
} </ListItemAvatar>
/> <ListItemText
</ListItem> sx={{ ml: 1 }}
{speechToTextProviders[selectedProvider].inputs.map((inputParam, index) => ( primary={speechToTextProviders[selectedProvider].label}
<Box key={index} sx={{ p: 2 }}> secondary={
<div style={{ display: 'flex', flexDirection: 'row' }}> <a target='_blank' rel='noreferrer' href={speechToTextProviders[selectedProvider].url}>
<Typography> {speechToTextProviders[selectedProvider].url}
{inputParam.label} </a>
{!inputParam.optional && <span style={{ color: 'red' }}>&nbsp;*</span>} }
{inputParam.description && ( />
<TooltipWithParser style={{ marginLeft: 10 }} title={inputParam.description} /> </ListItem>
)} {speechToTextProviders[selectedProvider].inputs.map((inputParam, index) => (
</Typography> <Box key={index} sx={{ p: 2 }}>
</div> <div style={{ display: 'flex', flexDirection: 'row' }}>
{inputParam.type === 'credential' && ( <Typography>
<CredentialInputHandler {inputParam.label}
data={speechToText[selectedProvider] ? { credential: speechToText[selectedProvider].credentialId } : {}} {!inputParam.optional && <span style={{ color: 'red' }}>&nbsp;*</span>}
inputParam={inputParam} {inputParam.description && (
onSelect={(newValue) => setValue(newValue, selectedProvider, 'credentialId')} <TooltipWithParser style={{ marginLeft: 10 }} title={inputParam.description} />
/> )}
)} </Typography>
{inputParam.type === 'boolean' && ( </div>
<SwitchInput {inputParam.type === 'credential' && (
onChange={(newValue) => setValue(newValue, selectedProvider, inputParam.name)} <CredentialInputHandler
value={ data={
speechToText[selectedProvider] speechToText[selectedProvider]
? speechToText[selectedProvider][inputParam.name] ? { credential: speechToText[selectedProvider].credentialId }
: inputParam.default ?? false : {}
} }
/> inputParam={inputParam}
)} onSelect={(newValue) => setValue(newValue, selectedProvider, 'credentialId')}
{(inputParam.type === 'string' || inputParam.type === 'password' || inputParam.type === 'number') && ( />
<Input )}
inputParam={inputParam} {inputParam.type === 'boolean' && (
onChange={(newValue) => setValue(newValue, selectedProvider, inputParam.name)} <SwitchInput
value={ onChange={(newValue) => setValue(newValue, selectedProvider, inputParam.name)}
speechToText[selectedProvider] value={
? speechToText[selectedProvider][inputParam.name] speechToText[selectedProvider]
: inputParam.default ?? '' ? speechToText[selectedProvider][inputParam.name]
} : inputParam.default ?? false
/> }
)} />
)}
{(inputParam.type === 'string' || inputParam.type === 'password' || inputParam.type === 'number') && (
<Input
inputParam={inputParam}
onChange={(newValue) => setValue(newValue, selectedProvider, inputParam.name)}
value={
speechToText[selectedProvider]
? speechToText[selectedProvider][inputParam.name]
: inputParam.default ?? ''
}
/>
)}
{inputParam.type === 'options' && ( {inputParam.type === 'options' && (
<Dropdown <Dropdown
name={inputParam.name} name={inputParam.name}
options={inputParam.options} options={inputParam.options}
onSelect={(newValue) => setValue(newValue, selectedProvider, inputParam.name)} onSelect={(newValue) => setValue(newValue, selectedProvider, inputParam.name)}
value={ value={
speechToText[selectedProvider] speechToText[selectedProvider]
? speechToText[selectedProvider][inputParam.name] ? speechToText[selectedProvider][inputParam.name]
: inputParam.default ?? 'choose an option' : inputParam.default ?? 'choose an option'
} }
/> />
)} )}
</Box> </Box>
))} ))}
</> </>
)}
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<StyledButton variant='contained' onClick={onSave}> <StyledButton variant='contained' onClick={onSave}>
@ -310,7 +326,7 @@ const SpeechToTextDialog = ({ show, dialogProps, onCancel }) => {
</StyledButton> </StyledButton>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
) : null )
return createPortal(component, portalElement) return createPortal(component, portalElement)
} }

View File

@ -48,6 +48,12 @@ export const Input = ({ inputParam, value, nodes, edges, nodeId, onChange, disab
} }
}, [myValue]) }, [myValue])
useEffect(() => {
if (value) {
setMyValue(value)
}
}, [value])
return ( return (
<> <>
{inputParam.name === 'note' ? ( {inputParam.name === 'note' ? (