frontend/js/index.js
//JS to render and display results
JS to render and display results
JS to render and display results
function reqListener() {
    console.log(this.responseText);
    info_path = "/theia/api/v1.0/get_info";
    const path_uuid = info_path + "?uuid=" + this.responseText;
    console.log(path_uuid);
    const fetchResult = () => {
        axios({
            url: `${path_uuid}`,
            method: "GET",
            headers: {'Content-Type': 'application/json'},
            timeout: 30000,
        })
        .then((res) => {
                console.log(res);
                uuid = res.data.uuid;
                img_file = res.data.img_file;
                label_list = res.data.label_list;
                nat_sentence = res.data.nat_sentence;
                audio_file_location = res.data.audio_file_location;
                const renderResult = () => {
                    let htmlContent = "";
                    htmlContent =
                        `<center style="padding: 5rem 0;">
                            <div class="container">
                                <h2 style="color:#191970;">RESULTS</h2>
                                <div class="row">
                                    <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 d-flex align-items-center justify-content-center container-fluid">
                                        <img src="${img_file}" alt="${uuid}" class="container"  display:block;">
                                    </div>
                                    <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                                        <br><br>
                                        <p>${nat_sentence}</p> 
                                        <br>
                                        <audio controls><source src="${audio_file_location}"></audio>
                                    </div>
                                </div>
                            </div>
                        </center>;`
                    console.log(htmlContent);
                    document.getElementById('showResult').innerHTML = htmlContent;
                    }
                renderResult();
                hideSpinner();
            })
            .catch((err) => {
                console.log(err);
                hideSpinner();
                alert("Sorry something went wrong. Please try again.");
            });
        };
    fetchResult();
}
function reqListener ( ) { console . log ( this . responseText ) ; info_path = "/theia/api/v1.0/get_info" ; const path_uuid = info_path + "?uuid=" + this . responseText ; console . log ( path_uuid ) ; const fetchResult = ( ) => { axios ( { url : ` ${ path_uuid } ` , method : "GET" , headers : { 'Content-Type' : 'application/json' } , timeout : 30000 , } ) . then ( ( res ) => { console . log ( res ) ; uuid = res . data . uuid ; img_file = res . data . img_file ; label_list = res . data . label_list ; nat_sentence = res . data . nat_sentence ; audio_file_location = res . data . audio_file_location ; const renderResult = ( ) => { let htmlContent = "" ; htmlContent = ` ${ img_file } ${ uuid } ${ nat_sentence } ${ audio_file_location } ` console . log ( htmlContent ) ; document . getElementById ( 'showResult' ) . innerHTML = htmlContent ; } renderResult ( ) ; hideSpinner ( ) ; } ) . catch ( ( err ) => { console . log ( err ) ; hideSpinner ( ) ; alert ( "Sorry something went wrong. Please try again." ) ; } ) ; } ; fetchResult ( ) ; }
JS to render and display results
JS to render and display results