飞桨模型部署至docker并使用FastAPI调用(五)-WordPress展示页面
创始人
2024-02-21 17:45:40

文章首发及后续更新:https://mwhls.top/4092.html,无图/无目录/格式错误/更多相关请至首发页查看。
新的更新内容请到mwhls.top查看。
欢迎提出任何疑问及批评,非常感谢!

飞桨模型部署至docker并使用FastAPI调用

目录 框架搭建 测试 – 图片展示栏 测试 – 图片上传与自动删除 测试 – 上传与处理 附录 参考文献 文中代码 测试 – 图片展示栏 测试 – 图片上传与自动删除 测试 – 上传与处理

框架搭建

  • 继续上一节,配置完环境,测试完代码后,开始搭建框架。
  • 本部分的代码的实际效果见:PHP 短代码测试。

测试 – 图片展示栏

  • 考虑到 WordPress 会自动适应界面大小,我对 html 也不熟,所以用 WordPress 创建三个栏目,参考一下它的 html。

    • 报错,下一个。
  • 参考了一些教程,自己写了个,代码见 附录-文中代码 中对应标题。

  • 效果如下,始终三栏,图片自适应窗口大小,但字体大小无自适应:
    test_columnn.pngtest_columnn.png

  • 但后面在改变视窗尺寸的测试中发现,当视窗比较大的时候,右边会出现空缺,而空缺会被下一行的东西补上,很丑,不过不碍事,加点占位符就解决了。

测试 – 图片上传与自动删除

  • 明确功能:

    • 上传两张图片以进行推理。
    • 这要求代码能够哪些图片是一组,除非不考虑并发。
    • 不过我也没做过这方面的,所以我简单的在短代码里面用时间戳来区分同一组图片。
    • 自动删除。
    • 因为区分一组图片时,我是用时间戳来区分,所以自动删除也可以用时间戳来区分。
  • 输出:

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

    • 做完之后感觉不用区分,因为一次提交两张图片,可以直接转 base64 传给服务器,没有区分的必要啊。
    • 现在是新的问题了,会跳转到 upload.php 里面去,不能在线刷新。

测试 – 上传与处理

  • 这部分写的脑袋疼,路径太奇怪了,同一个文件居然有两类路径。

    • 虽然代码重写了挺多遍,但最后效果比想象的好。
    • 但这部分的短代码会让编辑页面打不开,不过只要在插件里面暂停掉该短代码就正常了,虽然是bug,但几乎不影响。
  • 实现思路:

    • 原始页面嵌入 iframe。
    • 原始页面上传图片,并 post 到 iframe。
    • iframe 接受图片并处理,展示。
  • 实现效果:

    1. 上传两张图片。
      1. 可同时上传两张。
      2. 可分开上传,并分别展示。
      3. 可覆盖上传。
    2. 直接以base64形式展示,不保存为临时文件。
    3. 展示图片时不刷新,且自适应大小。
  • 结果展示

    /uploadfile/202402/adce5eb3e544dfa.png/uploadfile/202402/adce5eb3e544dfa.png/uploadfile/202402/f5be89d3dfd963a.png/uploadfile/202402/f5be89d3dfd963a.png
    原始页面仅上传一张图片

附录

参考文献

  1. PHP 菜鸟教程
  2. SM.MS 图床
  3. HTML 中引入 CSS 的方式
  4. css布局篇——双栏布局与三栏布局
  5. iframe
  6. PHP chdir函数:改变当前的目录
  7. [iframe高度自适应的6个方法] – 这篇NB,是我这些参考里面最有用的。

文中代码

测试 – 图片展示栏


第一时图像

上传

第二时图像

上传

变化区域推理

下载

"; ?>
测试 – 图片上传与自动删除
  • 短代码


"; ?>
  • 目录树
- pdrs
--- upload.php
--- utils.php
--- upload--- 1655820968_before.png--- 1655809752_before.png--- 1655796204_before.png--- 1655822379_before.png--- 1655822379_after.png
  • upload.php

$upload_path = ‘./upload/’;
filesizemax=1024∗1024∗10;//10Mcheckoldfileindir(file_size_max = 1024 * 1024 * 10; // 10M check_old_file_in_dir(files​izem​ax=1024∗1024∗10;//10Mchecko​ldf​ilei​nd​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 . POST["timestamp"]."after.png";moveuploadedfile(_POST["timestamp"] . "_after.png"; move_uploaded_file(P​OST["timestamp"]."a​fter.png";moveu​ploadedf​ile(_FILES[“file1”][“tmp_name”], tmpfilepathbefore);moveuploadedfile(tmp_file_path_before); move_uploaded_file(tmpf​ilep​athb​efore);moveu​ploadedf​ile(_FILES[“file2”][“tmp_name”], $tmp_file_path_after);
echo “save as” . $tmp_file_path_before . " " . $tmp_file_path_after;
}
?>

  • utils.php

function delete_old_file($file_path) {
# file_path: timestamp_filename.png
# if timestamp is ten minutes ago, delete the file
filename=substr(file_name = substr(filen​ame=substr(file_path, strrpos($file_path, ‘/’) + 1);
timestamp=substr(timestamp = substr(timestamp=substr(file_name, 0, strrpos($file_name, ‘_’));
$timestamp_now = time();
$timestamp_ago = timestampnow−600;if(timestamp_now - 600; if (timestampn​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(files = scandir(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>'; …dir . $file)) {
echo 'delete ’ . $file . ‘
’;
}
}
}
}

?>

测试 – 上传与处理
  • 短代码

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

$html = ’














';
echo $html;

?>

  • 目录树
- pdrs
--- upload.php
--- utils.php
  • upload.php

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 = ’
















';
echo $html;
?>

  • utils.php

global variables

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

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

function delete_old_file($file_path) {
# file_path: timestamp_filename.png
# if timestamp is ten minutes ago, delete the file
filename=substr(file_name = substr(filen​ame=substr(file_path, strrpos($file_path, ‘/’) + 1);
timestamp=substr(timestamp = substr(timestamp=substr(file_name, 0, strrpos($file_name, ‘_’));
$timestamp_now = time();
$timestamp_ago = timestampnow−600;if(timestamp_now - 600; if (timestampn​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(files = scandir(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 = trim(data=trim(data);
data=stripslashes(data = stripslashes(data=stripslashes(data);
data=htmlspecialchars(data = htmlspecialchars(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 = file["size"];if(_file["size"]; if (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 . " " . $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(content = fread(content=fread(fp, filesize(filepath));fclose(file_path)); fclose(filep​ath));fclose(fp);
filebase64=′data:image/png;base64,′.base64encode(file_base64 = 'data:image/png;base64,' . base64_encode(fileb​ase64=′data:image/png;base64,′.base64e​ncode(content);

    return $file_base64;
}
return false;

}

相关内容

热门资讯

埃菲尔铁塔在哪 中国仿建埃菲尔... 2019年4月26日,广西南宁市,街头惊现一座巨型山寨版埃菲尔铁塔,高约20米,白色塔身,造型逼真,...
苗族的传统节日 贵州苗族节日有... 【岜沙苗族芦笙节】岜沙,苗语叫“分送”,距从江县城7.5公里,是世界上最崇拜树木并以树为神的枪手部落...
北京的名胜古迹 北京最著名的景... 北京从元代开始,逐渐走上帝国首都的道路,先是成为大辽朝五大首都之一的南京城,随着金灭辽,金代从海陵王...
应用未安装解决办法 平板应用未... ---IT小技术,每天Get一个小技能!一、前言描述苹果IPad2居然不能安装怎么办?与此IPad不...
长白山自助游攻略 吉林长白山游... 昨天介绍了西坡的景点详细请看链接:一个人的旅行,据说能看到长白山天池全凭运气,您的运气如何?今日介绍...
脚上的穴位图 脚面经络图对应的... 人体穴位作用图解大全更清晰直观的标注了各个人体穴位的作用,包括头部穴位图、胸部穴位图、背部穴位图、胳...
世界上最漂亮的人 世界上最漂亮... 此前在某网上,选出了全球265万颜值姣好的女性。从这些数量庞大的女性群体中,人们投票选出了心目中最美...
demo什么意思 demo版本... 618快到了,各位的小金库大概也在准备开闸放水了吧。没有小金库的,也该向老婆撒娇卖萌服个软了,一切只...
猫咪吃了塑料袋怎么办 猫咪误食... 你知道吗?塑料袋放久了会长猫哦!要说猫咪对塑料袋的喜爱程度完完全全可以媲美纸箱家里只要一有塑料袋的响...
北京的名胜古迹 北京最著名的景... 北京从元代开始,逐渐走上帝国首都的道路,先是成为大辽朝五大首都之一的南京城,随着金灭辽,金代从海陵王...
埃菲尔铁塔在哪 中国仿建埃菲尔... 2019年4月26日,广西南宁市,街头惊现一座巨型山寨版埃菲尔铁塔,高约20米,白色塔身,造型逼真,...
苗族的传统节日 贵州苗族节日有... 【岜沙苗族芦笙节】岜沙,苗语叫“分送”,距从江县城7.5公里,是世界上最崇拜树木并以树为神的枪手部落...
应用未安装解决办法 平板应用未... ---IT小技术,每天Get一个小技能!一、前言描述苹果IPad2居然不能安装怎么办?与此IPad不...