# remotes::install_github("jrosell/ambhtmx", force = TRUE) library(ambhtmx) what_file <- "output/what.txt" invisible(!dir.exists("output") && dir.create("output")) page_title <- "ambhtmx artyom example" head_tags <- htmltools::tagList( tags$link(href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css", rel = "stylesheet", integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH", crossorigin="anonymous"), tags$script(src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js", integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz", crossorigin="anonymous"), htmltools::HTML(''), htmltools::HTML(''), htmltools::HTML(' ') ) amb_artyom <- \(lang, redirect_sel, accepts_name) { ambhtmx::script_tpl( lang = lang, redirect_sel = redirect_sel, accepts_name = accepts_name, raw_content = htmlwidgets::JS(' artyom.addCommands([{ description:"It will save the text it recognizes.", indexes: ["*"], smart: true, action : function(i, wildcard, sentence){ if(wildcard.includes("stop listening")){ document.querySelector(\'[name="{accepts_name}"]\').checked = false; console.log("Stop listening checked") } if(document.querySelector(\'[name="{accepts_name}"]\').checked) { var sel = document.querySelector("#listening-text"); sel.innerHTML = sel.innerHTML + "\\n" + wildcard; var xhr = new XMLHttpRequest() var formData = new FormData(); formData.append("what", wildcard); xhr.open("POST", "/listen") // xhr.setRequestHeader("Content-Type", "multipart/form-data") // xhr.setRequestHeader("Accept", "multipart/form-data") xhr.send(formData) } if(wildcard.includes("start listening")){ document.querySelector(\'[name="{accepts_name}"]\').checked = true; console.log("Start listening checked") } } }]); artyom.redirectRecognizedTextOutput(function(text, isFinal){ var sel = document.querySelector("{redirect_sel}") if(isFinal){ sel.innerHTML = ""; }else{ sel.innerHTML = text; } }); document.addEventListener("DOMContentLoaded", function(){ artyom.initialize({ lang: "{lang}", debug: true, continuous: true, listen: true }); }); ') ) } #' Starting the app and defining the routes app <- ambhtmx(host = "0.0.0.0", port = "7860")$app$ get("/", \(req, res){ div( id = "page", style = "margin: 20px", h1("Speech recognition example with artyom.js"), p(strong("Say 'start listening' to start capturing what you say and 'stop listening' to stop.")), div( id = "main", div( style ="margin-bottom: 10px", div(p("Recognizing text: ", span(id = "recognized-text"))), div(label( "Captured text", tags$br(), HTML("") )), div(label(input(name="accepts", type = "checkbox", style = "margin-right: 10px", "listenining"))) ), amb_artyom( lang = "en-US", redirect_sel = "#recognized-text", accepts_name = "accepts" ) ) ) |> send_page(res) })$ post("/listen", \(req, res) { params <- parse_multipart(req) what <- params$what cat(glue("\nwhat: {what}\n\n")) write(what, file = what_file, append = TRUE) res$send(what) }) app$start(open = FALSE)