-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.R
111 lines (100 loc) · 4.05 KB
/
app.R
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
# 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('<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)