PCA Image Compression Using R Shiny App

PCA is mathematically defined as an orthogonal linear transformation that transforms the data to a new coordinate system such that the greatest variance by some projection of the data comes to lie on the first coordinate (called the first principal component), the second greatest variance on the second coordinate, and so on. In other words, we convert a set of observations of possibly correlated variables into a set of values of linearly uncorrelated variables called principal components. To sum up, the aim is to explain as much data variation as possible while discarding highly correlated variables. An interesting application of PCA is image compression. We are going to reconstruct an image by increasing amounts of principal components using the R shiny app. 

Installing R Shiny

Installing Shiny is like installing any other package in R. Go to R Console and run the below command to install the Shiny package. 

Once you have installed it, load the Shiny package to create Shiny apps.

Structure of a Shiny app

Shiny consists of 3 components:

  1. User Interface
  2. Server
  3. ShinyApp

 1. User Interface Function

User Interface (UI) function defines the layout and appearance of the app. You can add CSS and HTML tags within the app to make the app more presentable. The function contains all inputs and outputs to be displayed in the app.

     a. Shiny Layout Functions

  • headerPanel()add a heading to the app. titlePanel() defines subheading of the app.
  • SidebarLayout()defines layout to hold sidebarPanel and mainPanel  The layout divides app screen into sidebar panel and main panel
  • wellPanel()defines a container that holds multiple objects app input/output objects in the same grid
  • tabsetPanel()creates a container to hold tabs. tabPanel() adds a tab into the app by defining tab elements and components. 
  • navlistPanel() provides a side menu with links to different tab panels similar totabsetPanel() like a Vertical list on the left side of the screen.

Here we will be using a sidebar layout for our application

Your layout is ready, It’s time to add widgets into the app. Shiny provides various user input and output elements for user interaction. Let us discuss a few input and output functions.

     b.Shiny Input Functions

        Each input widget has a label, Id, other parameters such as choice, value, selected, min, max, etc.

  • selectInput()– create a dropdown HTML element.
  • numericInput() – input area to type a number or text.
  • radioButtons()– create radio buttons for user input.
  • fileinput()Create a file upload control that can be used to upload one or more files.
  • sliderinput() -Create Constructs a slider widget to select a numeric value from a range.
  • actionbutton()Creates an action button or link whose value is initially zero, and increments by one each time it is pressed.
  • downloadbutton() Use these functions to create a download button or link; when clicked, it will initiate a browser download. The filename and contents are specified by the corresponding downloadhandler defined in the server function.

     c.Shiny Output functions

        Shiny provides various output functions that display R outputs such as plots, images, tables, etc which display the corresponding objects.

  • plotOutput()– display R plot object.
  • tableOutput() – displays output as table.
  • imageOutput() -An image output element that can be included in a panel

 In this app I have used input function- fileInput(),sliderInput(),actionButton(),downloadButton() and output function-Imageoutput() 2.Server 

The server function defines the server-side logic of the Shiny app. It involves creating functions and outputs that use inputs to produce various kinds of output. Each output stores the return value from the render functions. We access input widgets using input$[widget-id]. These input variables are reactive values.

Let’s write a function to store the image file in a variable-



     a.Splitimage function- will extract the individual color value matrices to perform PCA on each. The principal component analysis is performed on each color value matrix. As this example is focused on image compression and not description or interpretation of the variables, the data does not require centering (subtracting the variable means from the respective observation vectors), and the center argument is set to FALSE.

    b.ProjectImage- The following loop reconstructs the original image using the projections of the data using increasing amounts of principal components. We will see that as the number of principal components increases, the more representative of the original image the reconstruction becomes. This sequential improvement in quality is because as more principal components are used, the more the variance (information) is described.


     c.Output$img will display the original image on the main panel

     d.Output$compressimg will display a compressed image on the main panel

     e.Output$dl- will download the compressed image by taking the default filename as the current date.

 3.ShinyApp Function 

shinyApp() function is the heart of the app which calls UI and server functions to create a Shiny App.

The below image shows the outline of the Shiny app.


The final app will look like this 

Link of the application- https://shrutinair.shinyapps.io/ImageCompressionApp/

Github link- https://github.com/ShrutiNair5/RShiny




2) Wilmar Hernandez and Alfredo Mendez, Application of Principal Component Analysis to Image Compression (2018),https://www.intechopen.com/books/statistics-growing-data-sets-and-g...

Views: 177

Tags: dsc_code, dsc_tagged


You need to be a member of Data Science Central to add comments!

Join Data Science Central

© 2021   TechTarget, Inc.   Powered by

Badges  |  Report an Issue  |  Privacy Policy  |  Terms of Service