Deploy the flying paddle model to docker and call it using FastAPI (5) -WordPress display page

The first article and subsequent updates: https://mwhls.top/4092.html , no picture/no directory/format error/more information, please go to the first page to view. Please check mwhls.top
for new updates . Any questions and criticisms are welcome, thank you very much!

The flying paddle model is deployed to docker and called using FastAPI

Table of contents

frame building

Test – Image display column

Test – Image upload and automatic deletion

Test - upload and process

appendix

references

text code

Test – Image display column

Test – Image upload and automatic deletion

Test - upload and process

frame building

• Continuing from the previous section, after configuring the environment and testing the code, start building the framework.
• See the actual effect of the code in this part: PHP short code test .

Test – Image display column

• Considering that WordPress will automatically adapt to the size of the interface, I am not familiar with html, so create three columns with WordPress, and refer to its html.

  • Report an error, next.

• After referring to some tutorials, I wrote one myself. For the code, see the appendix - the corresponding title in the code in the text.

• The effect is as follows, there are always three columns, the picture adapts to the window size, but the font size does not adapt:
  

• But later in the test of changing the size of the window, it was found that when the window is relatively large, there will be a vacancy on the right, and the vacancy will be filled by the next line.

Test – Image upload and automatic deletion

• Clear function:

  • Upload two images for inference.
  • This requires the code to know which pictures are a group, unless concurrency is not considered.
  • But I haven't done this, so I simply use timestamps in the short code to distinguish the same group of pictures.
  • Automatically deleted.
  • Because when distinguishing a group of pictures, I use timestamps to distinguish them, so automatic deletion can also be distinguished by timestamps.

• output:

  • 1655796204_before.png
    delete 1655796204_before.png
    1655822379_after.png
    1655822379_before.png
    save as./upload/1655822379_before.png ./upload/1655822379_after.png

• think:

  • After finishing, I feel that there is no need to distinguish, because submitting two pictures at a time can be directly converted to base64 and sent to the server, there is no need to distinguish.
  • Now it is a new problem, it will jump to upload.php and cannot be refreshed online.

Test - upload and process

• This part of writing hurts my head, the path is so strange, there are actually two types of paths in the same file.

  • Although the code was rewritten many times, the final effect was better than expected.
  • But this part of the short code will make the editing page unable to open, but as long as the short code is paused in the plug-in, it will be normal. Although it is a bug, it will hardly affect it.

• Implementation idea:

  • The original page is embedded in an iframe.
  • The original page uploads the image and posts it to the iframe.
  • iframe accepts pictures and processes and displays them.

• Realize the effect:

  1. Upload two images.
     1. Two photos can be uploaded at the same time.
     2. They can be uploaded separately and displayed separately.
     3. Can be uploaded overwrite.
  2. It is directly displayed in base64 format and not saved as a temporary file.
  3. It does not refresh when displaying pictures, and the size is self-adaptive.

• Result display

  original page	upload only one image

appendix

references

1. PHP Novice Tutorial
2. SM.MS image bed
3. Ways to introduce CSS into HTML
4. CSS layout articles - two-column layout and three-column layout
5. iframe
6. PHP chdir function: change the current directory
7. [ 6 methods of highly adaptive iframe ] - This NB is the most useful of my references.

text code

Test – Image display column

<?php
    $img_before = "https://s2.loli.net/2022/06/19/LzhSjbiXxoMcHJk.png";
    $img_after = "https://s2.loli.net/2022/06/19/NTkL7r8ZJo4uPVD.png";
    $img_variation = "https://s2.loli.net/2022/06/19/Dr6HkN8oRC9yI4A.png";
    echo "
<head>
    <style>
    .img_block {
        float: left;
        height: 30%;
        width: 30%;
        margin: 1.6%;
    }
    .img_describe {
        float: left;
        height: 45%;
        width: 45%;
        margin: 2.5%;
        text-align: center;
    }
    </style>
</head>
<body>
    <div class=\"box\">
        <div class=\"img_block\">
            <a><img src=\" " . $img_before . "\" ></a>
            <div class=\"img_describe\"> <p> 第一时图像 </p> </div>
            <div class=\"img_describe\"> <p> 上传 </p> </div>
        </div>
        <div class=\"img_block\">
            <a><img src=\" " . $img_after . "\" ></a>
            <div class=\"img_describe\"> <p> 第二时图像 </p> </div>
            <div class=\"img_describe\"> <p> 上传 </p> </div>
        </div>
        <div class=\"img_block\">
            <a><img src=\" " . $img_variation . "\" ></a>
            <div class=\"img_describe\"> <p> 变化区域推理 </p> </div>
            <div class=\"img_describe\"> <p> 下载 </p> </div>
        </div>
    </div>
</body>
";
?>

Test – Image upload and automatic deletion

• short code

<?php
    $workplace = '/external-functions/pdrs/';
    $timestamp = time();
    echo "
    <form action=\"" . $workplace . "upload.php\" method=\"post\" enctype=\"multipart/form-data\">
        <label for=\"file\">文件名：</label>
        <input hidden name=\"timestamp\" value=\"" . $timestamp . "\">
        <input type=\"file\" name=\"file1\" id=\"file1\"><br>
        <input type=\"file\" name=\"file2\" id=\"file2\"><br>
        <input type=\"submit\" name=\"submit\" value=\"提交\">
    </form>
    ";
?>

• directory tree

- pdrs
--- upload.php
--- utils.php
--- upload
  --- 1655820968_before.png
  --- 1655809752_before.png
  --- 1655796204_before.png
  --- 1655822379_before.png
  --- 1655822379_after.png

• upload.php

<?php
# ref: https://www.runoob.com/php/php-file-upload.html
require_once './utils.php';

$upload_path = ‘./upload/’;
$fil{e}_{s}iz{e}_{m}ax=1024\ast 1024\ast 10;//10Mchec{k}_{o}l{d}_{f}il{e}_i{n}_{d}ir($upload_path);

if ($_SERVER[“REQUEST_METHOD”] == “POST”)
{
// $workplace = ‘/home/ftp/y/yupfyfel/wwwroot/external-functions/pdrs/’;
$tmp_file_path_before = $upload_path . $_POST[“timestamp”] . “_before.png”;
$tmp_file_path_after = $upload_path . ${}_{P}OST["timestamp"].{"}_{a}fter.png";mov{e}_{u}ploade{d}_{f}ile($_FILES[“file1”][“tmp_name”], $tm{p}_{f}il{e}_{p}at{h}_{b}efore);mov{e}_{u}ploade{d}_{f}ile($_FILES[“file2”][“tmp_name”], $tmp_file_path_after);
echo “save as” . $tmp_file_path_before . " " . $tmp_file_path_after;
}
?>

• utils.php

<?php

function delete_old_file($file_path) {
# file_path: timestamp_filename.png
# if timestamp is ten minutes ago, delete the file
$fil{e}_{n}ame=substr($file_path, strrpos($file_path, ‘/’) + 1);
$timestamp=substr($file_name, 0, strrpos($file_name, ‘_’));
$timestamp_now = time();
$timestamp_ago = $timestam{p}_{n}ow-600;if($timestamp < KaTeX parse error: Expected '}', got 'EOF' at end of input: … unlink(file_path);
return true;
}
return false;
}

function check_old_file_in_dir($dir) {
# dir: ./upload/
$files=scandir($dir);
foreach ($files as KaTeX parse error: Expected '}', got 'EOF' at end of input: … { if (file != ‘.’ && $file != ‘…’) {
echo KaTeX parse error: Expected 'EOF', got '&' at position 9: file . '&̲lt;br&gt;'; …dir . $file)) {
echo 'delete ’ . $file . ‘<br>’;
}
}
}
}

?>

Test - upload and process

• short code

<?php
$workplace = 'external-functions/pdrs/';
chdir($workplace);
require_once 'utils.php';
$action_file = '/external-functions/pdrs/upload.php';

$timestamp = time();
$file_name_before = $timestamp . ‘_before.png’;
$file_name_after = $timestamp . ‘_after.png’;

$html = ’
<body>
<iframe id=“result” src=“’ . $action_file . '” name=“result” width=“100%” height=“100%” scrolling=“false”“></iframe>
<script type=“text/javascript”>
// ref: http://caibaojian.com/iframe-adjust-content-height.html
function reinitIframe(){
var iframe = document.getElementById(“result”);
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
var bWidth = iframe.contentWindow.document.body.scrollWidth;
var dWidth = iframe.contentWindow.document.documentElement.scrollWidth;
var width = Math.max(bWidth, dWidth);
iframe.height = height;
iframe.Width = width;
console.log(height);
}catch (ex){}
}
window.setInterval(“reinitIframe()”, 200);
</script>
<div class=“box”>
<form action=”’ . $action_file . ‘" method=“post” target=“result” enctype=“multipart/form-data”>
<label for=“file”>第一时影像：</label>
<input hidden name=“file_name_before” value="’ . $file_name_before . ‘“>
<input type=“file” name=“file_before” id=“file_before”>
<label for=“file”>第二时影像：</label>
<input hidden name=“file_name_after” value=”’ . $file_name_after . '">
<input type=“file” name=“file_after” id=“file_after”>
<input type=“submit” name=“submit” value=“上传”>
</form>
</div>

</body>
';
echo $html;

?>

• directory tree

- pdrs
--- upload.php
--- utils.php

• upload.php

<?php
# ref: https://www.runoob.com/php/php-file-upload.html
require_once './utils.php';
$upload_path = 'upload/';
check_old_file_in_dir($upload_path);
$img_before = "https://s2.loli.net/2022/06/19/LzhSjbiXxoMcHJk.png";
$img_after = "https://s2.loli.net/2022/06/19/NTkL7r8ZJo4uPVD.png";
$img_variation = "https://s2.loli.net/2022/06/19/Dr6HkN8oRC9yI4A.png";

if ($_SERVER[“REQUEST_METHOD”] == “POST”){
$file_before = $_FILES[“file_before”];
$file_after = $_FILES[“file_after”];

if (check_file($file_before)){
    # save img
    // $file_path_before = $upload_path . $_POST['file_name_before'];
    // move_uploaded_file($file_before["tmp_name"], $file_path_before);
    # img to base64
    $img_before = img_to_base64($file_before["tmp_name"]);
} 

if (check_file($file_after)){
    # save img
    // $file_path_after = $upload_path . $_POST['file_name_after'];
    // move_uploaded_file($file_after["tmp_name"], $file_path_after);
    # img to base64
    $img_after = img_to_base64($file_after["tmp_name"]);
} 

}

$html = ’
<head>
<style>
.img_block {
float: left;
min-height: 32%;
max-height: 32%;
min-width: 32%;
max-width: 32%;
margin: 0.6%;
}
.img_block img {
min-height: 100%;
max-height: 100%;
min-width: 100%;
max-width: 100%;
}
</style>
</head>
<body>
<div class=“box”>
<div class=“img_block”>
<a><img src=“’ . $img_before . '” ></a>
</div>
<div class=“img_block”>
<a><img src=“’ . $img_after . '” ></a>
</div>
<div class=“img_block”>
<a><img src=“’ . $img_variation . '” ></a>
</div>
</div>
</body>
';
echo $html;
?>

• utils.php

<?php

global variables

$file_size_max = 1024 * 1024 * 2; // 2M

function print_file_in_dir($dir) {
# dir: ./upload/
$files=scandir($dir);
foreach ($files as KaTeX parse error: Expected '}', got 'EOF' at end of input: … { if (file != ‘.’ && $file != ‘…’) {
echo(“file:” . $dir . ‘/’ . $file . “<br>”);
}
}
}

function delete_old_file($file_path) {
# file_path: timestamp_filename.png
# if timestamp is ten minutes ago, delete the file
$fil{e}_{n}ame=substr($file_path, strrpos($file_path, ‘/’) + 1);
$timestamp=substr($file_name, 0, strrpos($file_name, ‘_’));
$timestamp_now = time();
$timestamp_ago = $timestam{p}_{n}ow-600;if($timestamp < KaTeX parse error: Expected '}', got 'EOF' at end of input: … unlink(file_path);
return true;
}
return false;
}

function check_old_file_in_dir($dir) {
# dir: ./upload/
$files=scandir($dir);
foreach ($files as KaTeX parse error: Expected '}', got 'EOF' at end of input: … { if (file != ‘.’ && KaTeX parse error: Expected '}', got 'EOF' at end of input: …elete_old_file(dir . $file);
}
}
}

function test_input($data){
# copy from: https://www.runoob.com/php/php-form-validation.html
$data=trim($data);
$data=stripslashes($data);
$data=htmlspecialchars($data);
return $data;
}

function check_file($_file) {
# check file type, size. Allow type: png, jpg, jpeg
# $_file: $_FILES[“file”]
$file_type = $_file[“type”];
$file_size = ${}_{f}ile["size"];if($ file_type != “image/png” && $file_type != “image/jpg” && $file_type != “image/jpeg” || $file_size > $GLOBALS['file_size_max']) { echo "file_type or Size does not meet requirements: " . $file_type . " " . $file_size;return false;}return true;}

function img_to_base64(KaTeX parse error: Expected '}', got '#' at position 18: …le_path) { #̲ file_path: ./u…fp = fopen($file_path, “r”)) {
$content=fread($fp, filesize($fil{e}_{p}ath));fclose($fp);
$fil{e}_{b}ase64{=}^{\prime }data:image/png;base64{,}^{\prime }.base64_{e}ncode($content);

    return $file_base64;
}
return false;

}