R Блестящий занятый прядильщик в flexdashboard OCR

Question

Я создаю небольшое приложение для распознавания текста.

в зависимости от изображения, иногда тезеракт занимает некоторое время для вычисления.Хотя это занимает время, я хотел бы добавить небольшой счетчик, говорящий о загрузке или вычислении алгоритма.

Вот упрощенный фрагмент моего кода:

---
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 не работает над реактивной функцией в нижней части кода.

Я видел индикатор занятости busyIndicator (wait = 1000) в этом репо но, во-первых, пакет не загружается, и, во-вторых, я не знаю, где его разместить, особенно на гибкой панели.

РЕДАКТИРОВАТЬ

Все время сохраняя вывод, полученный от 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")
```

и в занято.html , замените скрипт на:

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

(и не забудьте after_body: "busy.html" в заголовке YAML).

---

EDIT

Я попробовал вашу 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>