教你在超低配的服务器上部署令人惊叹的AI抠图工具
前言对于一款数字时代的图片编辑工具而言,抠图工具扮演着越来越重要的角色。它能轻松地将图像中的目标与背景进行分离,为用户提供便捷高效的编辑体验。
在过去,抠除图像背景往往是一件复杂又繁琐的工作,而实现一个 AI 自动抠图工具也并非易事,因为它需要不少服务器的算力消耗以及大量训练模型的成本。
而现在,我将展示在仅使用 1核1G运存 的超低服务器资源下,可以实现多么令人惊叹的抠图工具!如下所示,只需上传图片,便可自动抠除背景。在线体验
因为带宽也很小(仅 1M )所以在线体验建议不要上传太大的图像。
接下来,我将带你学习如何部署,通过简单几步即可实现这款强大的 AI 抠图工具。同时,我也将用通俗易懂的文字带你剖析 AI 抠图工具背后的工作原理,帮助你更好地理解其背后的算法和逻辑。废话不多说,让我们开始吧!
开始部署首先我们需要使用 Rembg 这个库,它是基于 U^2-Net 模型构建的一个用于图像背景去除的 Python 工具。
为了让开发者快速掌握它,我们并不需要学习 Python(除非自己训练模型),我们只需要会一点 docker 的使用,然后运行以下命令:
1docker r ...
开源在线图片编辑器,支持PSD解析、AI抠图等,基于Puppeteer生成图片
自从我上次分享一个人开发仿造稿定设计的图片编辑器到现在,不知不觉已过去一年时间了,期间我经历了裁员失业、面试找工作碰壁,寒冬下一直没有很好地履行计划…..这些就放在日后谈吧。
最近挤出时间来完善了这个项目,正式开源后在一天内就收获了上百个Star,今天想向大家分享下这个开源图片编辑器项目——迅排设计,以及我的一些感悟和开源体验。
在线 Demo | 文档网站 | Github 开源地址: palxiao/poster-design
项目速览1234git clone https://github.com/palxiao/poster-design.gitcd poster-designnpm run prepared # 快捷安装依赖指令npm run serve # 本地运行
将同时运行前端界面与图片生成服务(3000与7001端口),合成图片时本地会启动一个Chrome浏览器实例。
👇🏻下面一起来看下都有些什么功能吧。
上传 PSD 模板点击 “我的” - “资源管理”,上传PSD模板按钮,进入PSD解析上传界面界面 ...
对话框、模态框和弹出框看起来很相似,它们有何不同?
本文翻译自外网文章《Dialogs, modality and popovers seem similar. How are they different?》,作者 Hidde de Vries 是一名自由职业前端、可访问性和系统设计专家,曾在荷兰政府、W3C (WAI)、Sanity.io 和 Mozilla 等组织工作。
Web 平台概念有时可能完全不同,但有时看起来又非常相似。语义、行为和特征可能都很难区分。由于一个新的 popover 属性正在被提出,所以这篇文章将探讨对话框(dialogs)、弹出窗口(popovers)、叠加层(overlays)和揭示小部件(disclosure widgets)之间的区别。 我们还将了解元素为 modal 时的含义。所有相关的概念看起来都非常相似,至少在我看来是这样的,那就让我们开始吧!
注意:在撰写本文时,popover它仍然是一个提案,仅作为实验提供。目前 popover 可以在以下环境测试:
Chromium,在“实验性 Web 平台功能”标志的背后(计划于 2023 年 5 月底在稳定版 Chrome/Edge 中发布)
S ...
关于我的网站突然崩溃,误以为被攻击这件事
本文记录了一次服务器严重故障的问题排查历程,故事虽然颇为曲折,最后却发现是天灾不是人祸,虚惊一场,还是我太菜了啊。
事情是这样的,那是一个炎热的下午,我正吹着空调欣然品茶,突然命运之手向我伸出了魔爪,打断了我摸鱼的美妙时光——我的所有站点都无法访问了!这让我的心情热得像天气一样火啊!
直觉告诉我这是服务器出问题了,于是我赶忙登录查看主机,进门直奔 docker:
事情似乎有点严重,我赶紧 check 其它地方:
linux 系统关键目录均没有遭到破坏,首先排除服务器被黑
mysql 数据库完好无损,肯定不是勒索病毒
这种奇怪的违和感不知道是怎么回事,但我也松了一口气,至少不是最坏的情况。紧接着我打开了云主机的后台看了一下数据,除了下午三点时的链接数突然飙高以外,没有发现其它异常:
由于之前就一直受到垃圾漏洞扫描工具的骚扰,链接数飙高这种事我已见多不怪,只是时机太过巧合,究竟是天灾还是人祸?我一时间也不得而知,所以先整理一下目前的情况:
docker 容器基本全报异常退出了,但没有被删
宿主机容器的映射目录空了,所以现在基本也没办法重新启动容器
容器 drone 还在活跃状态 ...
如何在页面中监听“不存在”的 DOM 节点
MutationObserver 是用于监视 DOM 树内的特定节点的 Web API 接口,一旦监测到节点发生变化,就会通知回调函数执行相应的逻辑。该 API 的兼容性很好,但由于如今流行的 JS 框架都旨在“数据驱动视图”,使得这个 API 容易被大众遗忘。
本文将介绍 MutationObserver 的基本原理、使用方法和应用场景,帮助读者更好地理解和应用这个灵活且强大的 API。
前言事情是这样的,某天我想给文档网站加个访问量统计的插件,这个插件是第三方的,工作原理是将数据填充到页面中特定 id 的节点上,例如有一个 <span id="pv"></span> 的节点,插件加载完成后就会通过 dqS (document.querySelect) 找到 id 为 pv 的节点然后把 pv 数据渲染上去。问题就在于,我这个文档网站并不是静态的,所有工作都是在运行时完成,类似一个用 Vue 驱动的网页,一开始只有 #app 节点,所以这个第三方脚本不能直接放在 index.html 文档中加载,否则可能页面还没渲染完,脚本就已经开始 dq ...
Chrome 浏览器的更新导致 jQuery 反复发版,只因 :has() 这个伪类
最近 jQuery 似乎又“回光返照”了一下,窜稀式地连更了几个小版本。我仔细看了看,并没有新功能出现,不过还挺有意思的,也让我学习到了新的东西。简单来说,这几个版本的更新主要与 Chrome 引入新选择器产生的缺陷有关。那么谷歌浏览器是如何导致 jQuery 产生 Bug 的,又是为何在修复之后又引发了新 Bug 的,这还得从 :has 伪类说起。
关于 :has() 伪类CSS 在很早前就存在子代和后代选择器,而父元素的选择器出于性能的考虑却迟迟没有浏览器能支持,虽然规范早已存在,但是真正支持它却是不久前才发生的事。
这个伪类通过把可容错相对选择器列表作为参数,提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法,例如:
1h1:has(+ p) { color: red; }
这段 css 表示的是:选择一个 h1 标签,当它有一个相邻节点是 p 标签时,这个 h1 标签文字会显示为红色,蛮好理解的对吧。
该伪类在 2022 年由 Safari 浏览器首先开始支持,随后 Chrome 105 也启用了这个原生的 :has 伪类,那么这个新选择器的支持为什 ...
聊聊 CSS 隐藏元素的 10 种实用方法
CSS 隐藏元素的方法你能说出来几种?
这是一个在 web 前端面试中常会提及的基础问题,聊这个话题不仅仅只是讨论“茴”字有几种写法,更是能从一个简单的问题中体现出你的 CSS 边界能力,本文提炼了十种最实用的方法,希望对你有所帮助。
常规方法display: none;结构消失,会触发回流重绘(Reflow & Repaint)。
opacity: 0;结构保留,占据空间,可以正常触发事件,因触发硬件加速所以不发生回流和重绘。
visibility: hidden;结构保留,占据空间,仅触发重绘,不会触发事件(无法选中)。
content-visibility: hidden;设置元素内容可见性,设置的元素本身不受影响。hidden 隐藏效果与 display: none 类似,但实际浏览器只是跳过了内容的渲染,还保留着内容的渲染状态,性能上有优势。
注意:该属性目前还处于实验性阶段,使用时需要考虑浏览器兼容性问题。
逃逸视窗position + left/top利用绝对定位 position 设置 absolute 或 fixed,同时 left 或 top 设置 -9 ...
Electron打包错误的踩坑小记
windows墙内打包失败办法在网络环境不好(无科学上网)的条件下,项目可能可以启动成功却无法打包,注意查看报错信息,如下图所示:
这种都是缺少相关包导致的问题,根据报错信息手动下载相应的资源,放入 C:\Users\你的用户名\AppData\Local\electron\Cache 目录下即可。
淘宝镜像:https://npm.taobao.org/mirrors/electron/
NSIS下载:https://nsis.sourceforge.io/Download
我这里windows打包缺少了nsis,下载后放入目录如下:
之后再运行打包即成功:
any-note-book Setup 0.1.0.exe 为安装包,win-unpacked 为直接打开运行的程序。
不同系统 Cache 位置如下:
Linux: $XDG_CACHE_HOME or ~/.cache/electron/
MacOS: ~/Library/Caches/electron/
Windows: %LOCALAPPDATA%/electron/Cache or ~/AppData/ ...
他奠定了当今计算机算法的规范化和量化度量
如今的我们对算法可谓并不陌生,由于互联网发展迅猛,哪怕没有系统学习过计算机底层理论的程序员,也接触过无数的算法。
昨天笔者看到一个开放性思考题,内容是这样的:
如果一个程序只运行一次,在编写它的时候,你是采用最直观但是效率较低的算法,还是依然寻找复杂度最优的算法?
可能你心中已有答案,但这个问题我们放到文末再聊,本篇主要是科普向的算法入门文章,我将从最初的计算机讲起,用通俗易懂的话来带你重新认识下算法。
前言图灵提出了计算机的数学模型、冯·诺依曼确定了计算机通用的系统结构,而如果要问图灵和冯·诺依曼之后对计算机科学贡献最大的人是谁,那就不得不提到高德纳了,正是他奠定了计算机算法的基础。我们知道,没有控制程序,只有一系列硬件算不上是计算机,程序之于计算机是必不可少的,而程序的灵魂,就在于算法。
计算机诞生之初在早期计算机领域里,哪些控制功能要通过开关电路做成硬件,哪些又该由程序控制,这些边界其实不像如今这么清晰。
教科书上对世界第一台通用计算机的定义,是20世纪40年代所研制的电子计算机埃尼阿克(ENIAC),而事实上这台计算机在研制时也没有搞清楚程序是怎么一回事,它说到底还是一台专 ...
我写了个免费在线图库生成器,只需三步将你的手机相册搬到线上
项目背景作为一名阿宅,摄影可能是为数不多能让我出门的事情了,以前在广州有很多漫展,基本一两个月必有一场,我也经常会去蹭拍coser,不得不说拍照技术都是在那段时期锻炼出来的。可惜好景不长,这几年疫情反复不断,距离上一次我拿起相机甚至可以追溯到两年前,实在是泪目。既然不能出去拍照,那只能继续宅着敲代码度日了,于是就有了这个在线相册的小项目,用来方便自己放上一些觉得还不错的摄影作品,当然,也可以记录与展示一些生活照片。
这是一个纯前端的项目,不需要开发后端,没有数据库,只需要把照片丢进去,Git提交一下站点就出来了,就很简单。不用买服务器,不搞OSS,总之就是完全免费,全是白嫖的艺术,这篇文章中我会介绍整个项目的开发历程,看完你将收获:
一个 Vue3 + Node 快速生成漂亮的在线相册的项目
实现瀑布流、懒加载、Node解码图片、缩略图生成、元数据读取、提取颜色等技巧
快速集成一个音乐播放器,同步网易云歌单
如何部署仓库地址:https://github.com/palxiao/fast-album
fork项目,clone到本地,运行 npm run pre 安装依赖
把你的照 ...







