ui.R

library(shiny)
library(shinyFiles)
library(bslib)
library(shinycssloaders)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  theme = bs_theme(bootswatch = "lux", primary = "#680dad", secondary = "#9867ea"),
  
  tags$head(
    tags$link(rel = "icon", type = "image/png", href = "favicon.png"),
    tags$style(
      HTML("
        .container {
          margin: 200px;
        }
        .main-panel img {
          width: 100%;
          height: auto;
        }
        .purple-background {
          background-color: #E6E6FA;
          padding: 10px;
          border-radius: 5px;
        }
        .red-background {
          background-color: #FCC1B3;
          padding: 10px;
          border-radius: 5px;
        }
        .form-control {
          background-color: #E6E6FA;
        }
        .form-check-input, 
        .shiny-input-container .checkbox input, 
        .shiny-input-container .checkbox-inline input, 
        .shiny-input-container .radio input, 
        .shiny-input-container .radio-inline input {
          background-color: #E6E6FA;
        }
      ")
    ),
    tags$script(HTML("
    Shiny.addCustomMessageHandler('disableButton', function(message) {
      document.getElementById('generate_button').disabled = true;
    });
  "))
  ),
  
  div(class = "mt-4",  # Margin top class added to this div
      titlePanel("Generative AI Quarto Theme Generator")
  ),
  
  sidebarLayout(
    sidebarPanel(
      textInput("user_input", "Enter a phrase for the theme:", value = "Abstract purple minimal"),
      textInput("api_key", "Enter your OpenAI API key"),
      tags$p("To generate images for slide backgrounds, use the checkbox below. Note that you must run it locally and not from shinyapps.io to generate images, as the app will time out in the browser. Download the app from ", tags$a(href = "https://github.com/melissavanbussel/theme-generator", target = "_blank", "my GitHub"), "to run it locally."),
      checkboxInput("images_checkbox", "Generate images in addition to CSS?", value = FALSE),
      actionButton("generate_button", "Generate my theme", disabled = TRUE),
      br(),
      br(),
      helpText('Once you see a message highlighted in purple saying "Theme generated successfully!", you may download all the generated files.'),
      br(),
      br(),
      downloadButton("downloadData", "Download All Files", disabled = TRUE),
      br(),
      br(),
      tags$p("© 2024 ", tags$a(href = "https://www.melissavanbussel.com", target = "_blank", "Melissa Van Bussel"))
    ),
    
    mainPanel(class = "main-panel",
      br(),
      withSpinner(uiOutput("status")),
      uiOutput("checkbox_validator"),
      br(),
      br(),
      tags$p('This app will take your phrase, and pass it to ChatGPT to choose fonts and colours that the app will then use to generate a Quarto revealjs theme. If the "generate images" checkbox is checked off, 10 images will be generated by the image generation endpoint as part of this process. Please see the ',
             tags$a(href = "https://openai.com/pricing", target = "_blank", "OpenAI API pricing page"),
             'to determine the cost of using this feature (approximately $0.40 as of June 2024). If the "generate images" checkbox is not checked, the cost of running the app will be less than a penny based on June 2024 API pricing.'),
      tags$img(src = "demo.png", alt = "Demo Image", style = "margin-top: 20px;")
    )
  )
)