Skip to content

Instantly share code, notes, and snippets.

@Jimmy-Hu

Jimmy-Hu/AlgorithmOnlinePresentation.md

Last active May 25, 2023 05:05
Show Gist options
  • Save Jimmy-Hu/256877239e3e89577b019cdafbf93a15 to your computer and use it in GitHub Desktop.
Save Jimmy-Hu/256877239e3e89577b019cdafbf93a15 to your computer and use it in GitHub Desktop.
Download ZIP
AlgorithmOnlinePresentation
Raw
AlgorithmOnlinePresentation.md

  • Install Octave Software

    %  Reference: https://blog.eldernode.com/install-gnu-octave-on-ubuntu-20-04/
sudo apt install -y octave
sudo apt-get install -y octave-parallel

  • Install Apache server

    sudo apt update
sudo apt install -y apache2
sudo apt install php libapache2-mod-php

  • Update maximum acceptable size

    Reference: https://stackoverflow.com/a/2184541/6667035

    • check the config file "/etc/php/7.4/apache2/php.ini"

      sudo vim /etc/php/7.4/apache2/php.ini

    • Update the value of upload_max_filesize and post_max_size.

    the operation of restarting HTTP server is needed.

    sudo systemctl restart apache2

  • Creating a folder to place the uploaded data

    mkdir /var/www/html/uploads

  • /var/www/html/index.html: https://uploadcare.com/blog/how-to-make-html5-file-uploader/

<!DOCTYPE html>
<html>
 
<head>
    <style>
        html {
            font-family: sans-serif;
        }
 
        div#drop_zone {
            height: 400px;
            width: 400px;
            border: 2px dotted black;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            font-family: monospace;
        }
 
    </style>
 
</head>
 
<body>
    <h2>JimmyHu's deraining algorithm</h2>
    <!╌ https://stackoverflow.com/a/14806776/6667035 ╌>
    <input type="file" name="file_to_upload" id="file_to_upload" accept=".bmp, .jpg, .png" style="display: none;" multiples>
    <h3>Drag & Drop a File</h3>
    <div id="drop_zone">
        DROP HERE
    </div>
    <hr>
    Selected filename: 
    <p id="file_name"></p>
    <progress id="progress_bar" value="0" max="100" style="width:400px;"></progress>
    <p id="progress_status"></p>
    <input type="button" value="Upload To Server" id="upload_file_button"> <a href="view_results.php">View results</a>
 
    <script type="text/javascript">
        document.getElementById('file_to_upload').addEventListener('change', (event) => {
            window.selectedFile = event.target.files[0];
            document.getElementById('file_name').innerHTML = window.selectedFile.name;
        });
 
        document.getElementById('upload_file_button').addEventListener('click', (event) => {
            //  Reference: https://stackoverflow.com/a/154068/6667035
            if (document.getElementById('file_name').innerHTML === "") {
                //  Reference: https://stackoverflow.com/a/10462885/6667035
                var check = confirm("Please select a file!");
                if (check == true) {
                    return true;
                }
                else {
                    return false;
                }
            } else {
                uploadFile(window.selectedFile);
            }
        });
 
        const dropZone = document.getElementById('drop_zone'); //Getting our drop zone by ID
        dropZone.addEventListener("click", drop_zone_on_click); //  Regist on click event
        if (window.FileList && window.File) {
            dropZone.addEventListener('dragover', event => {
                event.stopPropagation();
                event.preventDefault();
                event.dataTransfer.dropEffect = 'copy'; //Adding a visual hint that the file is being copied to the window
            });
            dropZone.addEventListener('drop', event => {
                event.stopPropagation();
                event.preventDefault();
                const files = event.dataTransfer.files; //Accessing the files that are being dropped to the window
                window.selectedFile = files[0]; //Getting the file from uploaded files list (only one file in our case)
                document.getElementById('file_name').innerHTML = window.selectedFile.name; //Assigning the name of file to our "file_name" element
            });
        }

        // ---- function definition ----
        async function drop_zone_on_click(){
            //document.getElementById('input_file').click();
            let files = await selectFile("image/*", true);
            window.selectedFile = files[0];
            document.getElementById('file_name').innerHTML = files[0].name;
        }

        //  Reference: https://stackoverflow.com/a/52757538/6667035
        function selectFile (contentType, multiple){
            return new Promise(resolve => {
                let input = document.createElement('input');
                input.type = 'file';
                input.multiple = multiple;
                input.accept = contentType;

                input.onchange = _ => {
                    let files = Array.from(input.files);
                    if (multiple)
                        resolve(files);
                    else
                        resolve(files[0]);
                };

                input.click();
            });
        }
 
        function uploadFile(file) {
            var formData = new FormData();
            formData.append('file_to_upload', file);
            var ajax = new XMLHttpRequest();
            ajax.upload.addEventListener("progress", progressHandler, false);
            ajax.open('POST', 'uploader.php', true);
            ajax.send(formData);
        }
 
        function progressHandler(event) {
            var percent = (event.loaded / event.total) * 100;
            document.getElementById("progress_bar").value = Math.round(percent);
            document.getElementById("progress_status").innerHTML = Math.round(percent) + "% uploaded";
        }
    </script>
</body>
 
</html>
  • /var/www/html/uploader.php
<?php
$file_name = $_FILES["file_to_upload"]["name"];
$uploaddir = '/var/www/html/uploads/';
//  Reference: https://stackoverflow.com/a/8320892/6667035
//$file_name_on_server = $_SERVER['DOCUMENT_ROOT'].'/uploads/'.$file_name;
//  Reference: https://stackoverflow.com/a/18929210/6667035
//  Reference: https://stackoverflow.com/a/27961373
$time = date("Y-m-d_H-i-s_");
$file_name_on_server = $uploaddir . $time . basename($file_name);
$file_temp_location = $_FILES["file_to_upload"]["tmp_name"]; 
if (!$file_temp_location) { 
    echo "ERROR: No file has been selected";
    exit();
}

if ($_FILES["file"]["error"] > 0) 
{ 
    echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
    exit();
} 
 
if(move_uploaded_file($file_temp_location, $file_name_on_server)){
    echo "$file_name upload is complete";
    //  Reference: https://www.php.net/manual/en/function.system.php
    $last_line = system('ls', $retval);
} else {
    echo 'Error code' . $_FILES['file_to_upload']['error'] . '<br/>';
    echo "A server was unable to move the file";
}
return NoContent();
?>
  • Algorithm Code
% DerainOutput8
clear all;
clc;
%close all;
set(groot,'defaultFigureVisible','on');

try
  pkg load fuzzy-logic-toolkit
catch
  pkg install -forge fuzzy-logic-toolkit
  pkg load fuzzy-logic-toolkit
end

try
  pkg load image
catch
  pkg install -forge image
end

%{
getOffset1 function returns the adjust offset for each cube based on
finding the most similar case X to input in dictionary then its Y is the
output
%}
function [output] = getOffset1(Dictionary, input)
    if size(Dictionary.X) ~= size(Dictionary.Y)
        disp("Size of data in dictionary incorrect.");
        output = [];
        return
    end
    [X, Y, Z, DataCount] = size(Dictionary.X);
    distOfEach = zeros(1, DataCount);
    for i = 1:DataCount
        distOfEach(i) = sumAll(abs(input - Dictionary.X(:, :, :, i)));
    end
    [Minimum, MinimumDistIndex] = min(distOfEach);
    output = Dictionary.Y(:, :, :, MinimumDistIndex);
    
end

function [output] = derain(Dictionary, inputCells, gaussian_sigma)
    % Sequential computation
    %{
    output = cell(size(inputCells, 1), size(inputCells, 2), size(inputCells, 3));
    Ylength = size(inputCells, 2);
    Zlength = size(inputCells, 3);
    for X = 1:size(inputCells, 1)
        for Y = 1:Ylength
            for Z = 1:Zlength
                SingleDCTCube = cell2mat(inputCells{X, Y, Z});
                
                SingleDCTCubeOutput = SingleDCTCube + getOffset2(Dictionary, SingleDCTCube, gaussian_sigma);
                output{X, Y, Z} = {SingleDCTCubeOutput};
                fprintf('Derain: The %d_%d_%d / %d_%d_%d block calculation has done. \n' , X, Y, Z, size(inputCells, 1), size(inputCells, 2), size(inputCells, 3));
            end
        end
    end
    %}
    % Parallel computation
    try
      pkg load parallel
    catch
      pkg install -forge parallel
      pkg load parallel
    end_try_catch
    
    output = parcellfun(nproc * 2, @derain_detail, inputCells, 'UniformOutput', false);
end

function [output] = singleImageDerain(input, Dictionary, gaussian_sigma, N1, N2, N3)
    N1Cells = N1 * ones(1,(size(input, 1) / N1));
    N2Cells = N2 * ones(1,(size(input, 2) / N2));
    N3Cells = N3 * ones(1, (size(input, 3) / N3));

    output = mat2cell(input, N1Cells, N2Cells, N3Cells);
    for x = 1:size(output, 1)
        for y = 1:size(output, 2)
            for z = 1:size(output, 3)
                output{x, y, z} = {DCT3D(output{x, y, z})};
            end
        end
        fprintf('%d_%d_%d size DCT: The %d_%d_%d / %d_%d_%d block calculation has done. \n' ,N1, N2, N3, x, y, z, size(output, 1), size(output, 2), size(output, 3));
    end
    
    output = derain(Dictionary, output, gaussian_sigma);

    for x = 1:size(output, 1)
        for y = 1:size(output, 2)
            for z = 1:size(output, 3)
                output{x, y, z} = IDCT3D(cell2mat(output{x, y, z}));
            end
        end
        fprintf('%d_%d_%d size IDCT: The %d_%d_%d / %d_%d_%d block calculation has done. \n' ,N1, N2, N3, x, y, z, size(output, 1), size(output, 2), size(output, 3));
    end
    output = cell2mat(output);
    
    %output = medfilt2(output, [1 3]);
end

function myPNGWrite(InputImage, OutputFileName)
  [OutputFolder, baseFileName, extension] = fileparts(OutputFileName);
  if ~exist(OutputFolder, 'dir')
      mkdir(OutputFolder);
  end
  OutputFileName = fullfile(OutputFolder, [baseFileName '.png']);
  imwrite(InputImage, OutputFileName);
endfunction

tic
%%% Parameters

N1 = 8;
N2 = 8;
N3 = 1;

DictionaryFilePath = fullfile('.', 'Dictionary', ['Dictionary', '.mat']);
if ~isfile(DictionaryFilePath)
    fprintf('File %s does not exist!', DictionaryFilePath);
    return;
end
load(DictionaryFilePath);
gaussian_sigma = 0.1;

%%% Main program
while(1)
  InputBackupFolder = ['.' filesep 'Input'];
  if ~exist(InputBackupFolder, 'dir')
      mkdir(InputBackupFolder);
  end

  SourcePath = ['/var/www/html/uploads' filesep];
  files = dir(SourcePath);
  for i=1:numel(files)
    Filename = [SourcePath files(i).name];
    InputBackupFilename = [InputBackupFolder filesep files(i).name];
    if (~isfile(Filename))
      fprintf('File %s not found!\n', Filename);
      %return;
      continue;
    end
    
    try
      OriginInputImage = imread(Filename);
    catch
      msg = lasterror.message;
      continue;
    end_try_catch
    InputImage = OriginInputImage(1:floor(size(OriginInputImage, 1) / N1) * N1, 1:floor(size(OriginInputImage, 2) / N2) * N2, :);
    hsvImage = rgb2hsv(InputImage);
    hsvImage(:, :, 3) = singleImageDerain(hsvImage(:, :, 3), Dictionary, gaussian_sigma, N1, N2, N3);
    RGBImageOutput = hsv2rgb(hsvImage);
    OutputFolder = ['.' filesep 'Output' ];
    if ~exist(OutputFolder, 'dir')
        mkdir(OutputFolder);
    end
    
    OutputFileName = fullfile(OutputFolder, files(i).name);
    imwrite(RGBImageOutput, OutputFileName);
    
    %% Write PNG images (for web application)
    OutputFolder = ['.' filesep 'Output' filesep 'PNG' filesep];
    myPNGWrite(RGBImageOutput, [OutputFolder files(i).name]);
    
    if(false)           % Original version
      OutputFileName = fullfile(OutputFolder, [num2str(i) '.bmp']);
      imwrite(RGBImageOutput, OutputFileName);
      
      %% Write PNG images
      OutputFolder = ['.' filesep 'Output' filesep 'PNG' filesep];
      if ~exist(OutputFolder, 'dir')
          mkdir(OutputFolder);
      end
      OutputFileName = sprintf("%s%d%s", OutputFolder, i, ".png");
      imwrite(RGBImageOutput, OutputFileName);
    endif
    
    %% Move input image
    movefile(Filename, InputBackupFilename);
    
    InputBackupFilenamePNG = [InputBackupFolder filesep 'PNG' filesep files(i).name];
    myPNGWrite(InputImage, InputBackupFilenamePNG);
  endfor
endwhile
toc
  • /var/www/html/view_results.php
<?php
echo 'If the results cannot be found, please wait!';
echo '<br>';
echo 'The left one is your input image, the right one is the output of the proposed algorithm.';
$IMAGEPATH1 = 'Input/PNG/';
$IMAGEPATH2 = 'Output/PNG/';
foreach(glob($IMAGEPATH1.'*') as $filename){
    //echo '<br><img src=' . $IMAGEPATH1 . basename($filename) . '/>';
    echo '<br><img src=' . $IMAGEPATH1 . basename($filename) . '> <img src=' . $IMAGEPATH2 . basename($filename) . '>';
}
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment