@material-ui/core/#Toolbar JavaScript Examples

function SpeechToText() {


    const classes = useStyles();
    const [open, setOpen] = useState(false);
    const [copy, setCopy] = useState(false)
    const [copied, setCopied] = useState(false)
  
    const handleClickOpen = () => {
      setOpen(true);
    };
  
    const handleClose = () => {
      setOpen(false);
    };

    const handleCopyClick = () => {
        setCopy(true);
      };

    const handleCopyClose = () => {
        setCopy(false);
      };

    const { transcript, interimTranscript, finalTranscript, resetTranscript, listening } = useSpeechRecognition();

    useEffect(() => {
        if (finalTranscript !== '') {
         console.log('Got final result:', finalTranscript);
        }
    }, [interimTranscript, finalTranscript]);

    if (!SpeechRecognition.browserSupportsSpeechRecognition()) {
        return null;
      }
     
    if (!SpeechRecognition.browserSupportsSpeechRecognition()) {
    console.log('Your browser does not support speech recognition software! Try Chrome desktop, maybe?');
    }
    const listenContinuously = () => {
    SpeechRecognition.startListening({
        continuous: true,
        language: 'en-GB',
    });
    };

    console.log(transcript);

    return (
        <div className="speechToText">
          <div className="textInfo2">
            <div className="textLeft2">
              {/* <img src={convert} alt="" /> */}
            </div>
            <div className="textRight2">
              <p>
                Introducing voice typing. <br/>
                Now you just have to speak and we will convert it into text for you!<br />
                Get started by clicking the button below.
              </p>
            </div>
          </div>
          <Button variant="contained" color="primary" onClick={handleClickOpen}>
            Voice Typing
          </Button>



            <Dialog fullScreen open={open} onClose={handleClose} TransitionComponent={Transition}>
            <AppBar className={classes.appBar}>
            <Toolbar>
                <Typography variant="h6" className={classes.title}>
                        Voice Typing
                </Typography>
                <IconButton edge="start" color="inherit" onClick={handleClose} aria-label="close">
                  <CloseIcon />
                </IconButton>
            </Toolbar>
            </AppBar>  


            <div className="convertVoice" >
                <div className="recorder">
                    {' '}
                    {listening ? <MicIcon /> : <MicOffIcon />}
                    <div className="buttonsContainer">
                        <Button type="button" onClick={listenContinuously}>Listen</Button>
                        <Button type="button" onClick={SpeechRecognition.stopListening}>Stop</Button>
                        <Button type="button" onClick={resetTranscript}>Clear</Button>
                    </div>
                </div>
                <div className="recodedText">
                    <Paper elevation={3} className="textPaper">
                            <CopyToClipboard text={transcript}
                                onCopy={() => setCopied(true)}>
                                    <IconButton aria-label="delete"  onClick={handleCopyClick}>
                                        <FileCopyIcon fontSize="large"/>
                                    </IconButton>
                            </CopyToClipboard>
                            <p>{transcript}</p>
                    </Paper>
                </div>
            </div>
            

             
                
            </Dialog>
            <Snackbar open={copy} autoHideDuration={6000} onClose={handleCopyClose}>
                <Alert onClose={handleCopyClose} severity="success" style={{backgroundColor: '#262626', color: '#ec4c4c'}}>
                Copied to Clipboard
                </Alert>
            </Snackbar>
            
        </div>
    )
}

function TesseractScan() {

    const classes = useStyles();
    const [open, setOpen] = useState(false);
    const [copy, setCopy] = useState(false)
    const [text, setText] = useState(true)
  
    const handleClickOpen = () => {
      setOpen(true);
    };
  
    const handleClose = () => {
      setOpen(false);
    };

    const handleCopyClick = () => {
        setCopy(true);
      };

    const handleCopyClose = () => {
        setCopy(false);
      };

    const [scanText, setScanText] = useState('Scanned Text Will Appear Here. Please be patient, it might take 1-2 mins')
    const [image, setImage] = useState(null)
    const [copied, setCopied] = useState(false)

    const imageUpload = (event) => {
        setImage(URL.createObjectURL(event.target.files[0]))
    }

    const ScanText = () => {
        const worker = createWorker({
            logger: m => console.log(m)
          });
          
          (async () => {
            await worker.load();
            await worker.loadLanguage('eng');
            await worker.initialize('eng');
            const { data: { text } } = await worker.recognize(image);
            setScanText(text)
            console.log(text);
            await worker.terminate();
          })();
    }

    

    return (
        <div className="tesseractScan">
          <div className="textInfo">
            <div className="textLeft">
              <img src={convert} alt="" />
            </div>
            <div className="textRight">
              <p>
                Too lazy to type in the text? <br/>
                Well, we have it covered for you. Now you can upload an image and extract the text from it. <br />
                Get started by clicking the button below.
              </p>
            </div>
          </div>
          <Button variant="contained" color="primary" onClick={handleClickOpen}>
            Extract Text From Image
          </Button>



            <Dialog fullScreen open={open} onClose={handleClose} TransitionComponent={Transition} >
            <AppBar className={classes.appBar}>
            <Toolbar>
                <Typography variant="h6" className={classes.title}>
                    Extract Text From Image
                </Typography>
                <IconButton edge="start" color="inherit" onClick={handleClose} aria-label="close">
                  <CloseIcon />
                </IconButton>
            </Toolbar>
            </AppBar>   
                
            <div className="scanContainer">
                <div className="image_left">

                  <img src={upload} alt="" style={{display: text ? 'block': 'none', width: '300px'}}/>

                    <label htmlFor="fileUpload" className="custom-file-upload">
                        <input id="fileUpload" type="file" onChange={imageUpload} accept="image/*" name="image" 
                            onClick={() => setText(false)}/>
                        Upload Image
                    </label>
                    
                    <img src={image} alt="" />

                    <div className="uploadText" style={{display: text ? 'block': 'none'}}>
                        <h3 className="helpText"><RiQuillPenLine/> Upload image that contain any text</h3>
                        <h3 className="helpText"><RiQuillPenLine/> Click the SCAN Button to extract the text</h3>
                        <h3 className="helpText"><RiQuillPenLine/> This might take a while depending on the amount of text</h3>
                        <h3 className="helpText"><RiQuillPenLine/> Click the copy icon <FileCopyIcon /> to copy the text to clipboard</h3>
                    </div>
                    
                    
                </div>

              <div className="buttonContainer">
                <Button variant="contained" onClick={ScanText}>Scan</Button>
              </div>
                

                <div className="image_right">
                <Paper elevation={3} className="textPaper">
                    <CopyToClipboard text={scanText}
                        onCopy={() => setCopied(true)}>
                            <IconButton aria-label="delete"  onClick={handleCopyClick}>
                                <FileCopyIcon fontSize="large"/>
                            </IconButton>
                    </CopyToClipboard>
                    <p>{scanText}</p>
                </Paper>
                    
                </div>
            </div>
            </Dialog>
            <Snackbar open={copy} autoHideDuration={6000} onClose={handleCopyClose}>
                <Alert onClose={handleCopyClose} severity="success" style={{backgroundColor: '#262626', color: '#ec4c4c'}}>
                Copied to Clipboard
                </Alert>
            </Snackbar>
            
        </div>
    )
}

function Navbar(props) {
  const classes = useStyles();
  const activeStyle = {
    fontWeight: "bold",
  };

  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = event => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (

    <AppBar position="fixed" className={classes.appBar}>
      <Toolbar>
        {/*<Typography variant="h5">OKR Todo</Typography>*/}
        <div className={classes.toolbarDiv}>
          <Grid container direction="row" justify="flex-end" alignItems="center">
            <Grid item>

              <nav className={classes.toolbarTitle}>
                <Hidden xsDown>
                  <NavLink exact to="/about" activeStyle={activeStyle}>
                    01. About
                  </NavLink>
                  <NavLink to="/experience" activeStyle={activeStyle}>
                    02. Experience
                  </NavLink>
                  <NavLink to="/work" activeStyle={activeStyle}>
                    03. Work
                  </NavLink>
                  <NavLink to="/journey" activeStyle={activeStyle}>
                    04. Journey
                  </NavLink>
                  {/*<NavLink to="/contact" activeStyle={activeStyle}>*/}
                  {/*  05. Contact*/}
                  {/*</NavLink>*/}
                  <Button variant="outlined" className={classes.navButton} href={data.resumeUrl} target="_blank">
                    Resume
                  </Button>
                </Hidden>
                <Hidden only={['sm', 'md', 'lg', 'xl']}>
                  <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}
                          className={classes.hamIcon}>
                    <MenuIcon/>
                  </Button>
                  <Menu
                    id="simple-menu"
                    anchorEl={anchorEl}
                    keepMounted
                    open={Boolean(anchorEl)}
                    onClose={handleClose}
                    className={classes.menu}
                  >
                    <MenuItem onClick={handleClose} className={classes.menuItem} component={Link} to="/">Home</MenuItem>
                    <MenuItem onClick={handleClose} className={classes.menuItem} component={Link} to="/about">About</MenuItem>
                    <MenuItem onClick={handleClose} className={classes.menuItem} component={Link} to="/experience">Experience</MenuItem>
                    <MenuItem onClick={handleClose} className={classes.menuItem} component={Link} to="/work">Work</MenuItem>
                    <MenuItem onClick={handleClose} className={classes.menuItem} component={Link} to="/journey">Journey</MenuItem>
                    <MenuItem onClick={handleClose} className={classes.menuItem} component="a" href={data.resumeUrl}>Resume</MenuItem>
                  </Menu>
                </Hidden>
              </nav>

            </Grid>
          </Grid>
          {/* <Button href="#" variant="outlined">
            Login
        </Button> */}
        </div>
      </Toolbar>
    </AppBar>


  )
}