开发复盘：App 的客户端、网站与支付接入

提前声明本人是程序员有两年经验ai后端虽然开发过程全是问ai代码全部ai生成但是很多ai出错的时候也是需要对程序有一些了解才能纠偏。完全不了解的可能有些困难。网址涉及诱导外链这里看下怎么放 privbgcut.pocketjoy.fun 仅供交流学习使用app功能比较简单如果想要体验直接下载自动可以前七天体验所有功能已经足够不需要也不要付费。网页无中文版app有下载链接重定向的github的所以下载比较慢或者需要科学上网访问网址不用 如网址不可用或非本文内容说明域名未续费则不要继续访问这个地址网站可看可不看看你们需要下面也有图不然审核会以为我在引流不用在意可以理解就是感觉有点机械哈 哈哈下面所有不懂的技术实现或者其他问题都可以问ai但是除了技术实现或者cloudflare等网站使用之类其他的请谨慎采纳重点注意ai有的时候会说有些问题解决不了说只能采用付费方案这个时候你可以自行搜索或者开一次新对话可以解决大部分是存在免费方案的我暂时没有遇到要钱的除了域名购买这个是我在之前其他项目购买的不过也可以算在这个项目因为是必须的但是你可以买个一块钱的域名也是一年使用期其实域名购买这个也可以绕过如果不太正式也可以用cloudflare的cloudflare会为每个workerspages分配两个域名。哈哈当时没有绕过也是不知道有这种情况哈哈尽量不要全信ai要有自己的判断特别是涉及付费的。比如它开始说既然部署在cloudflare推荐就在这里注册结果一看会贵很多它给的很多比较便宜的域名注册方案都不是很便宜所以涉及付费的内容还是要自己多加考虑应该是存在免费方案的不要被付费卡住了我很多时候就是后面多追究探讨或者自己搜索什么的发现存在免费方案总的来说就是ai说的要付费或者其他难点不一定存在要自己多思考下大部分问题是不存在的被卡住可以多思考涉及付费更要慎重不要轻易花钱。简单流程梳理deepseek生成app代码app后端参考cutout完全离线不需要服务器免费安装包放在github免费网页代码ai生成部署在cloudflare免费购买域名需要一定费用支付接口代码ai生成代码部署在cloudflare发送邮件用resend免费三方支付平台免费背景技术栈费用等背景搞钱技术栈deepseek网页版耗时半个月全职使用资金12块购买域名其他全部使用各平台免费额度完全够用app完全离线 运行在用户本地 不需要服务器安装包放在github网站腾讯云购买域名cloudflare负责dns解析也在cloudflare的workers上面部署静态页面html、css、js支付流程代码部署在cloudflare的workers代码生成全部由deepseek网页版生成logo豆包网页版png、deepseek网页版svg邮件发送resend技术栈相关注意事项ai能力已经很强但是对于超长文本处理能力还不是很好所以如果对话超过15轮或者你觉得字数已经比较多就需要开新一轮对话整理一个project.txt文件里面是一些项目介绍、一些历史修改和可能存在的一些问题等项目相关内容让ai生成和ai对话达到一定字数或者修改比较多的时候让ai更新下下一轮对话用的上整理一个prompt.txt文件按照常规提示词模板来这个可以不用经常修改超长文本的问题如果让ai每次生成全量代码文件或者需要修改的代码文件的完整文件多轮对话后会导致文本过长而且不好操作并且ai生成文本在单轮对话过程也可能会影响效果猜测感觉又不会因为单轮多轮我理解原理都是一样的多轮未达限制的情况下单轮一应该不会出问题所以保存一个临时的change.py脚本文件让ai不用每次给完整文件只要给修改脚本就行了这个脚本可以一直是这个名字。至于代码备份什么的ai会自动给你在脚本里做的如果没有和ai说就行。关于只给修改脚本的事可以直接加到提示词中。对话过程中可能遇到一些ai说的不合理的地方比如你多问它一遍它就会质疑自己的决定然后可能有些修改就会被ai自己舍弃这些相关的你可以遇到了加到提示词中也可以让ai自己总结每轮开始将所有代码文件和上面提到的两个文件给到ai避免ai因为信息缺失导致回答不好当然上面的内容可以自动化听说最近有什么skill可能类似吧大致就是将流程自动化尽量减少人工参与比如change脚本的执行等等但是我用的是网页版没有购买token所以对当前情况这样就行。当然如果需要也可以多几次总结后将流程加到提示词中说一步一步怎么做比如先确认是否需要修改先不给代码经过你确认之后再生成修改脚本和效果描述什么的。简单自动化app简介完全离线本地运行的抠图软件代码相关编程语言前端html、css、js后端rust框架tauri、cargo选择原因看过同类竞品localbg发现它的页面看着不太清楚 而且是用python写和打包的大致500MB我之前用python打包过二进制发现可能会比较臃肿加上看到一个开源的同类软件cutout许可证属于MIT可以直接用它的后端当然还需要扩展一些。cutout用的是tauri可以实现网页看着是什么样app就是什么样实测还不错而且打包需要的依赖加一起只有29MB左右。当然半个月后开发完毕发现localbg的安装包已经变成300MB暂未详细分析解释网页看着是什么样app就是什么样是指打开代码中的html文件浏览器中显示什么样子app中看到的就是什么样子所以开发的时候可以先不管后端先用浏览器调好前端再对接后端。依赖只有29MB的原因前端渲染-webview2运行时 在windows11和一些windows10系统版本已经预装相关的使用例子是 edge依赖还有一点在没有预装webview2的机器上面 如果所在机器联网会在安装时下载170MB左右的webview2运行时如果不联网就会无法运行理论上我这边未实测。所以本身就是完全离线可用所以就直接在安装包里面打包进去了依赖多了170MB。后续可能会分两个版本当前是只有这个依赖多一些的版本。哈哈这样最后一实测看着比localbg的大小差不多了开发流程前端页面让ai给个建议出个基础版本它会告诉你可以直接在浏览器查看后端可以先不管点击报错就报错没影响。然后如果觉得需要后端配合才能比较好观察也可以直接用 npm run tauri dev 运行后 前端修改马上生效后端则需要重新编译会自动检查后端修改然后重新编译就是看机器编译需要一些时间。后面看着有哪些ui不完善的可以让ai修改注意参考前面的技术栈注意事项后端看下需要加什么功能之前后端是用的cutout的当时没有找到换背景的功能好像后面有了还是我之前没有找到就直接让ai做也可以先做前端再做后端这些功能都比较简单有一个我认为会比较难的是调色板就是自定义颜色结果ai知道直接调用系统的一些库实现了加上ai实现compare和页面照片放缩我就觉得ai还是挺牛的很多已经有人做过的功能它可以很快给出代码并且融入当前项目。当然做功能比较简单需要考虑的是做什么功能还有边界条件的问题边界条件的问题比如模型跑不了或者会导致卡死需要设置阈值先判断内存是否够用先提醒用户如果还是要用让ai思考有什么办法延长时间而尽量不卡死什么的。还有图片如果被修改后缀导致损坏为什么可以显示但是运行才报错等问题还有如果找到可能报错并且转换成用户可以理解的语言等这些还是要些时间主要是改后端需要重新编译才能运行看效果比较耗时功能的问题简单的抠图得到透明背景这个是核心能力除非训练自己的模型不然当前只能用开源的模型所以先看下其他附加功能比如批量处理、批量处理的中断、不同用途模型、效果图对比、图片放缩查看细节效果、状态显示、是否预加载模型等等。只要提出来了ai还是基本可以实现的。模型相关开源模型也有优劣不同模型效果不一样同一款模型因为导出方式的不同运行速度也会有差异。模型算是这款软件的核心功能所以选型方面还是费了很多功夫。之前ai推荐了五类模型极速-u2netp、通用-birefnet-lite、人像专用-modnet、精细结构-isnet、动漫专用-toonout实测发现后面几种大部分效果和 biefnet-lite效果相差不大后面探索了一些时间就留了三种 极速、通用、人像人像的换成了百度的pp-matting后面又发现通用模型在我的机器上面运行比较慢我的机子是入门款可以理解但是我还是想要优化下的看下能不能提高下效率。机缘巧合之下发现一个非固定输入版本的onnx效率有提升四倍内存消耗也少很多牛逼的厉害可以参考我另一篇博客。https://huggingface.co/senty-au/BiRefNet_lite-ONNX-dynamic同时不同图片尺寸处理耗时不一样就将通用的拆分成两种情况一种比较快将图片放缩到512*512处理一种比较慢放缩到1024*1024处理。当然效果会有一些差异我看比较轻微1024的更好。通用的拆分成两个我也想将人像的拆成两个pp-matting本身是支持非固定输入只是导出的时候非固定尺寸转换成onnx格式会失败定位发现是onnx不支持部分算子非固定输入情况下一些自适应层onnx无法表达 可以参考我的另一篇博客可以继续探索应该是可以解决的但是在这一块耗时有点久了先跳过pp-matting就固定输入。付费相关参考同类竞品有免费版本支持单张处理批量处理付费我一开始也想搞免费版本但是哪些功能需要限制是个问题总共也没有什么功能而且比较麻烦但是没有免费版如何吸引用户就加了一个前七天所有功能免费下载自动生效这个前七天免费是自动生效本地验证不联网。而且不收费搞广告的话又和离线背离了。付费情况需要考虑是完全离线更新查看license验证都离线完全没有联网部分所以通过获取处理得到一个machineid付费时在官网同步提交后台处理后返回一个licenseapp本地验证不联网。所以做买断但是买断我又感觉是不是有点贵因为我也没有相关经验所以就又加了一个单月有效期的license。遇到的问题之前提到的超长文本的问题已规避代码修改多次紊乱修改比较麻烦容易出错重构的问题让ai处理测试不同模型过程中不同模型的预处理和输入大小有差异同类模型大部分是一致的这里的同类是指同为birefnet-lite模型不同onnx。不同类别模型直接替换权重测试的话会报错改后端代码的话又需要重新编译耗时且繁琐这个也不算问题就是比较繁琐展示图页面详细介绍安装包APP安装包github地址 用于展示 不是点击直接下载 点击看到的是 release相关页面 仅供学习为啥叠这么多尽量避免那个什么审核引导到外部链接就是避免被认为是引流https://github.com/James-boy/PrivBgCut-Releases/releases/tag/app-v0.1.0大小因为完全离线的特性需要将所有必要依赖加上所以考虑到可能有的机器没有安装webview2所以生成安装包的时候直接将webview2运行时也带上加上三个模型一共460MB其中模型约270MB其他依赖约30MBwebview2运行时约160MB。所以后续可能会做不带webview2的版本大致300MB大小位置原因因为如果放置在云端存储和下载的流量都是要收费的更何况是几百兆这样费用比较多免费额度不够而且我的目的也是尽量用免费方案所以采用放在github而且不是上传本地的安装包是在github平台编译得到过程因为私有仓无法将release版本单独公开不允许所有人下载所以需要将安装包放到公开仓这里说明几点github仓库允许用户上传代码的同时带上toml文件然后运行toml文件对应的工作流点击之后会自动运行运行流程和环境由github保障然后得到或者保存对应产物保存为release的草稿而不是直接发布。而对应的运行时间是有限制的资源不清楚有没有运行时间好像私有的每月2000分钟公共的没有限制这个运行时间指的是开始运行到得到产物的时间哈和其他的没有关系。具体的限制额度可以看官方我也是ai告诉我的需要新建一个公开仓库将安装包发布用户才能下载得到这个公开仓库需要有初始化或者一次提交可以只是一句话但是需要有因为没有的话release的版本无法对应任何一次提交就无法release建议从提交github代码到私有仓到运行工作流得到安装包到发布到公共仓可以自动化也好维护一些。可以在同一个toml得到安装包然后发到公共仓。如果担心过程中失败导致安装包也没有保存的话也可以分成两个toml分两个工作流一个得到安装包一个发到公共仓可以顺序执行有这样的参数就是感知到前一个执行完成然后执行当前工作流的。我这边因为刚开始所以是一步一步来的。因为github有文件大小的限制所以模型文件无法上传可以直接给下载链接保存到对应文件中生成安装包的时候会自动下载的。结果图片网站选择域名域名后缀的选择因为不同后缀域名在搜索引擎的权重不一样ai告诉我的顶级域名说权重更高啥的比如.com啥的但是比较贵。其实想买1块的但是ai说不行感觉这方面可以不管ai因为我问它为啥贪吃蛇网站域名后缀是io它说因为已经有知名度了。不管了还好也没花多少顶级的不是很便宜买了.fun后缀的这个域名续费比较贵如果网站没有运营起来可能后面就不续费了。域名的选择乱码的便宜但是感觉如果想认真做我觉得可能还是需要一个好一点的域名可能我觉得不对哈哈所以看了ai的一些参考选择了这个。哦对忘了解释了privbgcut是产品名称pocketjoy是主域名我开始是计划做页游啥的但是稀奇古怪的就开始做工具了但是选择pocketjoy的时候也考虑到了后续做的种类可能比较多。域名注册哪家都差不多本来想选阿里云但是已经在腾讯云备案啥的就腾讯云配置域名等后面网站页面生成完成之后在cloudflare上面workerspages将静态页面部署上去然后将域名配置在这个workerspages上面就行这里还涉及一个dns解析的问题需要在腾讯云那里修改两个地址什么的要改成cloudflare的具体原因和如何操作可以问ai网站页面页面生成直接让ai参考你的app代码或者project.txt来就行有app代码尽量给代码这样了解的信息多一些前端的风格啥的也可以和app的统一ai生成之后你觉得不合理的就让ai改就行因为之前没怎么搞过前端开始还以为前端的那些淡入淡出什么色调什么的是比较高级的应用需要用什么vue来结果ai给的看着很厉害牛逼的因为之前app已经跑通了如果需要可以在app中在激活license的时候加一个跳转链接跳到网站的支付页面同时带上machineid。这个支付页面不是支付接口也可以让ai做页面部署将前一步生成的html、css、js代码部署在cloudflare的workerspages上面然后将选择好的域名 privbgcut.pocketjoy.fun 配置到这个workerspages。页面部署的时候要注意每次部署都需要提供全量相关文件不可以只提供修改了的文件因为实测每次会将本次提供的文件全量覆盖之前的而不是只替换本次提交的。如果部署未生效可以在cloudflare上面清理缓存这个和清理本地浏览器缓存不一样具体可以问ai。效果图下载接口因为会有不同的版本所以需要一个中转处理的返回合理的下载地址理论上可以直接用latest的不知道为啥没用来着可能当时有其他考虑最后是查询github那边的一个接口啥的具体实现可以问ai。还有一点这个接口也是部署在cloudflare配置的子域名 download.pocketjoy.fun为什么用子域名是为了后续扩展方便一些功能区分什么的配置收件邮箱就是收用户意见反馈和退款申请的邮箱挂在cloudflare上面上面可以设置指定邮箱对应域名后缀和自己的qq邮箱什么的对应比如 supportprivbgcut.pocketjoy.fun 和 xxxqq.com 对应到时候用户发给support的就会转发给xxx这个是cloudflare的能力和后面的resend没有关系但是这个只能接收无法主动发送支付接口流程网站支付页发起请求 同时提供machineid - 信息提供给接口1 请求三方支付平台 -三方支付平台返回付款链接 - 三方支付平台将链接返回接口1 -接口1将链接返回网站 - 网站跳转到三方支付平台对应支付场景 -用户支付成功/失败 - 三方支付平台将信息返回接口2 -接口2根据接收到的信息判断是否发送license给对应用户邮箱 这个邮箱由三方支付平台收集三方支付平台支付功能会用到选择的waffo还不错有测试模式和生产模式这里要申请的话需要网站基础功能可用还有pricy、term等页面具体的可以看要求或者问ai页面也可以直接交给ai生成但是需要过一遍是否合理。申请审核挺快的中午申请下午就下来了一两个小时吧。支付接口代码让ai生产过程中如果遇到问题实在解决不了需要给waffo对应文档ai搜索到的可能过时具体文档可以在waffo网站找下可能遇到的问题不知道waffo接口返回的参数名字是什么之前测试遇到这个问题不知道哪个参数表示用户邮箱解决方案是直接让它打印整个返回内容不知道标明流程的唯一key是什么让ai看文档解决因为代码部署在cloudflare上面而这个不知道为什么看不到日志配置了需要的参数也不行就很奇怪后面在setting最上面跳出更多的参数配置了才生效。Observability上面的live实时日志需要开通科学上网才能启动也比较奇怪。而且上面的日志看不太懂最后还是将需要打印的内容通过邮箱返回才可以观察测试环境哈生产的不能这样搞发件邮箱需要通过邮箱发送license通过网页用户可能需要自己单独保存所以此处通过邮箱使用的是resend免费额度每天上限100封还有一个每天上限300网站的我没用当时因为一点其他情况没有用那个具体如何接入使用resend可以问ai部署支付接口代码部署cloudflare的workerspages本来想要直接用privbgcut这个子域名的但是发现会有冲突因为之前已经部署了静态页面那个pages关联了这个子域名再用这个子域名尽管后面接的是静态页面不存在的接口也会冲突所以又单独搞了个子域名pay.pocketjoy.fun 咨询过ai子域名可以有无限个所以无影响哈哈看来12块还不错这里有几点需要注意因为涉及三方支付平台有一些依赖直接将代码粘贴在workerspages上面会无法运行所以需要用 npx wrangler 什么的命令这个是cloudflare的一些命令可以先在本地运行好了之后再上传部署到workerspages如果对应项目名字不存在它会自动创建而且一些之前提到的实现log打印的参数、配置子域名也是本地配置然后上传自动生效上面提到的代码可能无法本地测就是可以运行但是无法测试当然如果网页端也是本地部署改下对于链接可能可以测试。npx wrangler的一些命令支持远程链接cloudflare就是已经部署在上面然后远程链接log在本地打印但是我这边实测显示无法链接科学上网好像也没用这个passnpx wrangler的一些命令支持域名映射就是给你一个域名映射你本地服务这样就可以通过访问域名来访问你本地的服务但是这样感觉不太安全我这边跑了几秒就关了。这里发现powershell竟然可以显示二维码牛逼坏了最后如果涉及一些调试信息就是waffo参数什么的打印我的办法就是通过邮件发送测试环境哈SEO就是让搜索引擎展示多一些可以问ai怎么做比如在bing和google的专门的网站提交链接什么的还有做一些用户可能关注比较多的内容比如在线抠图和离线抠图对比 https://privbgcut.pocketjoy.fun/offline-vs-online作为内联链接内联信息什么的还有FAQ等前端页面涉及的一些专门的标签什么的关于对比的一些信息还是尽量严谨客观一些不要引起争议也尽量不要踩别人当然只是我个人理解我也还没做起来所以参考性不高下一步计划app左下角显示的还是模型本来的名称要改下右上角有个点击跳转官网的按钮我觉得要再加一个确认或者弹窗里面是一个点击跳转地址不能直接跳转直接跳转感觉有点突兀加鼠标放在中间栏变成小抓手可以移动图片的功能找其他类别的模型安装包做一个不包含webview2的安装包小一些不然470MB感觉有点大而且用户无法自己选择跑通github得到安装包后自动上传到公开仓的流程当前上传临时写了个toml网站暂无支付接口暂无SEO在根域名加一些技术博客或者什么其他的看引流还是怎么样总结ai牛逼