flexdashboard OCR 中的 R Shiny busy spinner

Question

我正在为 OCR 构建一个小应用程序。

根据图像，有时 teseract 需要一些时间来计算。虽然需要时间，但我想添加一个小微调器，说明加载或计算算法。

这是我的代码的简化摘录：

---
title : app demo
author : yeshipants
output : 
  flexdashboard::flex_dashboard:
    orientation: rows
    self_contained : TRUE
    source_code: embed
runtime: shiny
---

```{r setup}
knitr::opts_chunk$set(cache = FALSE)
```


```{r loadPackages}
setwd("C:/Users/y_bho/Desktop/Training/OCR")
library(magick)
library(tesseract)
```

Column {.sidebar data-width=350}
-------------------------------------
### Input & Parameters
```{r inputImages, cache = TRUE}

selectInput("imagesToChoose", 
            label = "Choose an image to process",
            choices = c("Language example 1", 
                        "Language example 2",
                        "Jounal example"),
            selected = "Language example 1") 
```

Row {.tabset}
-------------------------------------  

### Image
```{r displayImage, cache = FALSE}    
renderImage({      
  if (input$imagesToChoose == "Language example 1"){
    list(src = "images/receipt.png", height = 240, width = 300)
  }
  else if(input$imagesToChoose == "Language example 2"){
    list(src = "images/french.JPG", height = 240, width = 300)
  }
  else if(input$imagesToChoose == "Jounal example"){
    list(src = "images/journal.jpg", height = 240, width = 300)
  }    
}, deleteFile = FALSE)

```

### OCR
```{r}
# load the dictionary

imageInput <- reactive({
 if (input$imagesToChoose == "Language example 1"){
    x = "images/receipt.png"
  }
  else if(input$imagesToChoose == "Language example 2"){
    x = "images/french.JPG"
  }
  else if(input$imagesToChoose == "Jounal example"){
    x = "images/journal.jpg"
  }
  return(x)
})

eng <- tesseract("eng")

text <- reactive({
  tesseract::ocr(imageInput(), engine = eng)
})

renderPrint({
  cat(text())
})

```

基本上在用户选择不同图像之间，我想显示“正在加载”，直到 tesseract 正在处理代码底部的反应函数。

我在this repo 中看到了繁忙指示器busyIndi​​cator(wait = 1000) 但是，首先，包没有下载，其次，我不知道把它放在哪里，尤其是在 flexdashboard 中。

编辑

同时保留从 cat(text()) 获得的输出。 例子;如果我想在以下收据上执行 OCR：

我需要这个输出（逐行捕获信息）：

Answer 1

下面是一个带有忙碌指示器微调器的 flexdashboard 示例：

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    includes: 
      after_body: "busy.html"
runtime: shiny
---

```{r setup, include=FALSE}
library(flexdashboard)
```

Column {.sidebar}
-----------------------------------------------------------------------

Waiting time between eruptions and the duration of the eruption for the
Old Faithful geyser in Yellowstone National Park, Wyoming, USA.

```{r}
selectInput("n_breaks", label = "Number of bins:",
            choices = c(10, 20, 35, 50), selected = 20)

sliderInput("bw_adjust", label = "Bandwidth adjustment:",
            min = 0.2, max = 2, value = 1, step = 0.2)
```

Column
-----------------------------------------------------------------------

### Geyser Eruption Duration

```{r}
plotOutput("plot")
output[["plot"]] <- renderPlot({
  Sys.sleep(5) # simulates a time-consuming task
  hist(faithful$eruptions, probability = TRUE, breaks = as.numeric(input$n_breaks),
       xlab = "Duration (minutes)", main = "Geyser Eruption Duration")
  dens <- density(faithful$eruptions, adjust = input$bw_adjust)
  lines(dens, col = "blue")
})
```

文件busy.html，在同一文件夹中：

<style>
  .busy { 
    position: fixed;
    z-index: 1000;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -50px;
    display: none;
    background-color: rgba(230,230,230,.8);
    text-align: center;
    padding-top: 20px;
    padding-left: 30px;
    padding-bottom: 40px;
    padding-right: 30px;
    border-radius: 5px;
  }
</style>

<script>
  $(document).ready(function(){
    $("#plot").on("shiny:recalculating", function(e){
      $(".busy").show();
    }).on("shiny:recalculated", function(e){
      $(".busy").hide();
    });
  });
</script>

<div class = "busy">
  <img src = "https://loading.io/spinners/comets/lg.comet-spinner.gif"/>
</div>

所以对于你的情况，我会尝试这样的事情（我没有尝试过）：

```{r}
# load the dictionary
imageInput <- reactive({
 if (input$imagesToChoose == "Language example 1"){
    x = "images/receipt.png"
  }
  else if(input$imagesToChoose == "Language example 2"){
    x = "images/french.JPG"
  }
  else if(input$imagesToChoose == "Jounal example"){
    x = "images/journal.jpg"
  }
  return(x)
})

output[["tesseract"]] <- renderPrint({
  eng <- tesseract("eng")
  tesseract::ocr(imageInput(), engine = eng)
})

textOutput("tesseract")
```

在 busy.html 中，将脚本替换为：

<script>
  $(document).ready(function(){
    $("#tesseract").on("shiny:recalculating", function(e){
      $(".busy").show();
    }).on("shiny:recalculated", function(e){
      $(".busy").hide();
    });
  });
</script>

（不要忘记 YAML 标头中的 after_body: "busy.html"）。

---

编辑

我现在已经试用了您的 flexdashboard。如果要使用电抗导体text:

eng <- tesseract("eng")

text <- reactive({
  tesseract::ocr(imageInput(), engine = eng)
})

output[["tesseract"]] <- renderPrint({
  cat(text())
})
textOutput("tesseract")

那么最好这样做：

<script>
  $(document).ready(function(){
    $("#tesseract").on("shiny:outputinvalidated", function(e){
      $(".busy").show();
    }).on("shiny:recalculated", function(e){
      $(".busy").hide();
    });
  });
</script>