Как вывести загруженный текст в Shiny в R в позиции скриншота?

Вопрос или проблема

    library(quanteda)
    library(shiny)
    library(tm)
    library(tidytext)
    library(tidyverse)
    library(shinydashboard)
    library(shinythemes)
    
    
    war <- readLines("war.txt")
    
    war_corpus <- corpus(war)
    
    sentences <- tokens(war_corpus,what="sentence")
    
    make_sentences <- function(word) {
      grep(word,sentences,value=TRUE)}
    
    make_sentences("prince")
    
    ui<- shinyUI(fluidPage(
  
  # Заголовок приложения
  mainPanel(
    img(src="https://datascience.stackexchange.com/questions/79724/image.jpg", align = "right"),
    
    #titlePanel(title=div(img(src="image.jpg"))),
    
    fluidRow(HTML("<strong> Поиск </strong>")),
    #fluidRow(HTML(" <strong>Дата: 06-29-2020</strong>") ),
    
    fluidRow(
      br(),
      p("Имя пользователя : ")),
    br(),
    br(),
    
    fluidRow(HTML("<strong>Введите слово. Нажмите \"Следующие слова\" после </strong>") ),
    fluidRow( p("\n") ),
    
    # Макет боковой панели
    sidebarLayout(
      
      sidebarPanel(
        textInput("inputString","Введите слово здесь",value = " "),
        submitButton("Следующие слова")
      ),
      
      mainPanel(
        h4("Вы ищете это?"),
        tags$style("#mytext {white-space: pre-line;}"),
        verbatimTextOutput("mytext")
        
      )
    )
  )))


    server <- function(input, output, session) {
      output$mytext <- renderPrint({
        
        sentences <- make_sentences(input$inputString)
        length(sentences)
        cat(paste0(1:length(sentences),"  ",sentences,sep= '\n'))
      })
    }
       

ui<- shinyUI(fluidPage(
  fluidRow(
    column(3,
      # контент слева 
    ),
    column(5,
      # контент в центре
    ),
    column(4,
      # контент справа
    )
  )
)

Ответ или решение

Когда речь заходит о позиционировании элементов в приложении Shiny на языке R, одной из ключевых задач является правильная организация пользовательского интерфейса. Ваша цель – разместить длинный текст на правой стороне приложения, как показано на предоставленном вами скриншоте.

1. Структурирование пользовательского интерфейса

Для достижения желаемого расположения элементов, наиболее эффективным методом будет использование сеточного (grid) макета вместо боковой панели (sidebar layout). Сетка позволяет более гибко позиционировать элементы по различным колонкам. Вот пример того, как вы можете изменить ваш пользовательский интерфейс:

library(quanteda)
library(shiny)
library(tm)
library(tidytext)
library(tidyverse)
library(shinydashboard)
library(shinythemes)

war <- readLines("war.txt")
war_corpus <- corpus(war)

sentences <- tokens(war_corpus, what = "sentence")

make_sentences <- function(word) {
  grep(word, sentences, value = TRUE)
}

ui <- fluidPage(
  fluidRow(
    column(3,
      h4("Поиск:"), 
      textInput("inputString", "Введите слово здесь", value = " "),
      submitButton("Следующие слова")
    ),
    column(5,
      h4("Ищете это?"),
      tags$style("#mytext {white-space: pre-line;}"),
      verbatimTextOutput("mytext")
    ),
    column(4,
      img(src = "https://datascience.stackexchange.com/questions/79724/image.jpg", align = "right")
    )
  )
)

server <- function(input, output, session) {
  output$mytext <- renderPrint({
    sentences <- make_sentences(input$inputString)
    cat(paste0(1:length(sentences), "  ", sentences, sep = '\n'))
  })
}

shinyApp(ui = ui, server = server)

2. Объяснение реализации

• Структура макета: Используя fluidRow и column, мы создаем три колонки. В первой колонке можно разместить поля ввода и кнопки, во второй — выводимые результаты, а в третьей колонке — изображение.
• Позиционирование изображения: Изображение расположено в отдельной колонке (последней), что позволяет ему находиться справа от текста.
• Использование tags$style: Применение CSS свойств позволяет контролировать такие аспекты, как отображение пробелов в многострочном тексте.

3. Дальнейшие рекомендации

• Адаптивный дизайн: Проверьте, как ваше приложение отображается на различных устройствах и экранах. Возможно, вы захотите использовать классы CSS или медиа-запросы для улучшения отображения.
• Тестирование: Необходимо протестировать функциональность приложения после внесения изменений, чтобы убедиться, что все работает согласно ожиданиям.
• Оптимизация пользовательского интерфейса: Рассмотрите возможность добавления дополнительных элементов управления для улучшения взаимодействия пользователей с приложением.

Заключение

Правильное использование макетов в Shiny приложении имеет решающее значение для создания интуитивно понятного интерфейса. Используя предложенные подходы, вы можете улучшить визуальное представление вашего приложения и обеспечить более комфортное взаимодействие пользователей. Чтобы узнать больше о макетах и стилях в Shiny, вы можете ознакомиться с документацией по Shiny.