Program kompresi gambar dengan memanfaatkan algoritma SVD dalam bentuk website lokal sederhana.

Tugas Besar 2 IF2123 Aljabar Linier dan Geometri
Aplikasi Nilai Eigen dan Vektor Eigen dalam Kompresi Gambar
Semester I 2021/2022

• General Info
• Technologies Used
• Features
• Screenshots
• Setup
• Usage
• Contact

Gambar adalah salah satu bentuk media yang populer digunakan untuk menyajikan informasi. Gambar banyak dipertukarkan di dunia digital melalui file-file yang mengandung gambar tersebut. Dalam transmisi dan penyimpanan gambar digital, seringkali ditemukan masalah karena ukuran file gambar digital yang cenderung besar. Untuk mengatasi hal tersebut, suatu gambar digital dapat dikompresi menjadi file gambar yang lebih kecil. Salah satu algoritma yang dapat digunakan untuk mengkompresi gambar adalah algoritma SVD (Singular Value Decomposition). Algoritma SVD didasarkan pada teorema dalam aljabar linier yang mengatakan bahwa sebuah matriks dua dimensi dapat dipecah menjadi hasil perkalian dari 3 sub-matriks. Gambar digital direpresentasikan oleh matriks yang mengandung elemen-elemen gambar. Dengan SVD, matriks gambar tersebut dipecah menjadi 3 sub-matriks kemudian direkonstruksi dengan suatu batasan sehingga didapatkan gambar yang mirip dengan gambar yang aslinya dan tentunya dengan ukuran file yang lebih kecil dari file aslinya.

Program ini dibuat sebagai pemenuhan Tugas Besar 2 IF2123 Aljabar Linier dan Geometri Semester I 2021/2022.

• Python
• Javascript

• Connexion[swagger-ui] + Flask
• ReactJS
• Numpy / Jax Numpy
• Pillow

Fitur yang dihadirkan oleh website ini adalah:

• Menerima gambar dalam berbagai format (.jpg, .png, .jpeg, .gif, .bmp, .tiff, .psd, dst. Support List).
• Menampilkan gambar input, output, runtime algoritma, dan persentase hasil kompresi gambar (perubahan jumlah pixel gambar).
• Output hasil kompresi dapat diunduh melalui website
• Kompresi gambar tetap mempertahankan warna dari gambar asli
• Kompresi gambar tetap memertahankan transparansi dari gambar asli, misal untuk gambar dengan format .png dan background transparan

├── README.md
└── src
    ├── backend
    │   ├── api.py               [Main Operation API]
    │   ├── app.py               [App Factory]
    │   ├── requirements.txt     [Requirements List]
    │   └── swagger.yml          [API spec in OAS 3.0]
    ├── frontend
    │   ├── package-lock.json
    │   ├── package.json     
    │   ├── public               [Static Assets]
    │   └── src                  [JSX Source]
    │       └── components       [Components]
    └── library
        ├── alingeo
        │   ├── imaging
        │   │   └── compress.py  [Compress Class]
        │   └── matriks
        │       ├── eigen.py     [EigenSolver Class]
        │       └── svd.py       [SVDSolver Class]
        └── setup.py

Clone repository ini terlebih dahulu.

1. [RECOMMENDED] Gunakan NodeJS, atau pastikan NodeJS sudah ter-install di device.
2. Pastikan sedang berada di folder src/frontend.
3. Jalankan perintah npm install untuk memasang semua node_modules yang diperlukan.
4. Tunggu proses instalasi hingga selesai.

1. [RECOMMENDED] Gunakan virtual environment Python baru.

2. Change directory ke src/library.

3. Install package dengan command berikut:

   pip install .
   

   Untuk pengembangan, jalankan pip install -e . sehingga package terinstall dalam edit mode.

4. [OPTIONAL] Untuk dapat menggunakan mode GPU, kamu harus menginstall CUDA dan cuDNN terlebih dahulu, kemudian jaxlib. Setelah itu, kamu dapat menginstall package dengan extras gpu

   pip install .[gpu]
   

   Perhatikan bahwa jaxlib hanya bisa dijalankan pada OS Linux/Mac. Untuk Windows, dapat menginstall CUDA, cuDNN dan jaxlib di WSL2. Cara instalasi dapat dilihat disini. Informasi lebih lanjut tentang JAX bisa lihat disini.

   Terdapat extras lain yaitu jax-cpu jika ingin menggunakan jax sebagai backend untuk mode CPU.

1. [RECOMMENDED] Gunakan virtual environment yang sama dengan instalasi Library sebelumnya.
2. Pastikan library alingeo sebelumnya telah terinstall.
3. Change directory ke src/backend.
4. Install requirements dengan command:

   pip install -r requirements.txt
   

1. Pastikan Anda berada di folder src/frontend
2. Jalankan perintah npm start
3. Website akan terbuka di browser di port localhost
4. Ada beberapa opsi antarmuka yang dapat diubah sesuai keinginan:
   • Slider rasio Eigen untuk menentukan kualitas hasil akhir kompresi (default = 20)
   • Input skala resolusi untuk menentukan perbandingan resolusi akhir kompresi dalam persentase (default = 100)
   • Input banyaknya iterasi untuk proses kompresi (default = 2)
   • Checkbox untuk kompresi gambar dengan layer alpha
5. Setelah mengisi semua opsi, gambar akan dikirim ke backend untuk diproses. Apabila gambar selesai diproses, gambar akan dikirimkan ke frontend beserta waktu dan persentase kompresi. Pengguna juga bisa mengunduh hasil gambar ke local.

Library dapat digunakan sebagai module python yang bisa diimport oleh program lain. Beberapa sample program yang dapat digunakan sebagai referensi:

1. Melakukan pencarian nilai eigen dan vektornya

   import numpy as np
   from alingeo.matriks.eigen import EigenSolver
   
   solver = EigenSolver()
   matrix = np.random(10, 10)
   eigen_vectors, eigen_values = solver.calcEigens(matrix)

2. Melakukan dekomposisi SVD dari sebuah matriks

   import numpy as np
   from alingeo.matriks.svd import SVDSolver
   
   solver = SVDSolver()
   matrix = np.random(10,15)
   U, sigma, VT = solver.calculate(matrix)

3. Melakukan kompresi gambar dengan dekomposisi SVD

   from io import BytesIO
   from alingeo.imaging.compress import CompressSVD
   
   compressor = CompressSVD()
   with open('sample.png', 'rb') as f:
       res, _, _ = compressor.compress(f, scale=0.3)
       res.save('sample-opt.png')

1. Gunakan virtual environment sebelumnya, change directory ke src/backend. Pastikan package alingeo sudah terinstall.

2. Jalankan flask pada direktori yang sama dengan command berikut:

   flask run
   

3. Untuk melakukan kompresi, dapat melakukan pemanggilan pada endpoint [POST] /v1/compress

4. Backend dijalankan oleh spesifikasi OAS 3.0 dan memiliki swagger-ui sehingga dapat membaca dokumentasi dari API. Silahkan lihat dokumentasi pada endpoint /v1/doc untuk informasi cara menggunakan API lebih lanjut.

   Untuk localhost, dokumentasi API dapat diakses pada URL http://localhost/v1/doc

Dibuat oleh Kelompok 30 - Newo Social Credit

• Amar Fadil (13520103) GitHub
• Owen Christian Wijaya (13520124) GitHub
• Fachry Dennis Heraldi (13520139) GitHub