Spaces:
Sleeping
Sleeping
| # 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/[email protected]/dist/css/bootstrap.min.css", rel = "stylesheet", integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH", crossorigin="anonymous"), | |
| tags$script(src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js", integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz", crossorigin="anonymous"), | |
| htmltools::HTML('<script src="https://cdn.jsdelivr.net/gh/gnat/surreal@main/surreal.js"></script><script src="https://cdn.jsdelivr.net/gh/gnat/css-scope-inline@main/script.js"></script>'), | |
| htmltools::HTML('<script src="https://cdn.jsdelivr.net/gh/sdkcarlos/artyom.js@master/build/artyom.window.min.js"></script>'), | |
| htmltools::HTML(' <script>window.artyom = window.artyom || new Artyom();</script>') | |
| ) | |
| 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("<textarea rows=10 cols=40 id='listening-text'></textarea>") | |
| )), | |
| 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) | |