🪴 嘉文之书

AI 照相馆

Mar 09, 202517 min read

你好我想做一个用 ai技术为用户生成照片的网页应用。

页面设计

总体设计风格：采用现代风格，如果页面内容较少，可以把内容居中。

  • 欢迎页：介绍产品的特性，提供google 登录的入口
  • Dashboard 页面： 登录之后进入dashboard 页 ， dashboard 页分为几个板块
    • Train 页面 ：页面分成两栏，左边是用户操作的地方，右边是用户看日志的地方。左边由以下内容组成：一个输入框，名字叫 FaceName , 下面是一个上传文件的按钮，按钮附近有注释（请上传20 张同一个人不同角度的脸部照片，压缩成 zip 后上传），然后下面有一个 train 按钮。右边是训练的日志：包含训练进度等信息
    • Take Photo 页面：页面分成两栏，左边是用户操作的地方，右边是用户看结果的地方。左边由以下内容组成：一个输入框，名字叫 prompt , 下面有一个 take photo 的按钮。 右边包含日志和生成的图片
    • Pricing 页面：说明产品使用费用： Train 5 美元 1 次，耗时大约 30 分钟，Take Photo 0.1 美元 1 次，耗时大约 1 分钟，包含一个“充值 10 美元”的按钮
    • Billing 页面： 包含用户的所有流水，包括充值，使用 Train 和 Take Photo 时收费
  • 充值页：这个页面在点击充值按钮后进入，包含一个tron 链的收款地址，和所需要的收款金额，用户需要在 30 分钟内完成支付

现在我们开始重新设计 train 页面的内容 ， 先把页面分为左右两栏，左右两栏分别占页面的一半。 左边这栏是用户的输入区，用户需要选择或输入以下内容：

  • initial model：一个下拉菜单，初始可以选 flux 或者 standard diffusion
  • trigger word: 一个输入框， 用户需要输入一个单词，这个单词应该是自创的词，否则会和单词原有意思混淆
  • input images: 一个文件上传的按钮，用户点击后从本地上传 zip 文件，
  • train model : 一个黑底，白色字的按钮（其他按钮也用这个风格设计） 右边这栏是 Log 区，会打印用户训练模型时的日志

现在我们开始设计 train model 页面的后端代码， 关于 train model 的逻辑，我已经写在了脚本 replicate_train.py 中，现在我们需要把这套逻辑整合到页面中去。 关于 replicate_train.py , 我想做以下说明：

  • version 参数代表的是 initial_model
  • input 里的 trigger_word 代表的是 trigger_word
  • input_images 代表上传的文件

现在我需要你帮我把这套逻辑整合到页面中去。

现在我们开始重新设计 take photo 页面的内容，先把页面分为左右两栏，左右两栏分别占页面的一半。 左边这栏是用户的输入区，用户需要选择或输入以下内容：

  • model：一个下拉菜单，用于选择模型，可以选择原始模型（比如 flux) , 以及经过 train 以后微调过的模型
  • prompt : 一个输入框， 用于生成图片的 prompt
  • take photo : 一个黑底，白色字的按钮（其他按钮也用这个风格设计） 右边这栏是输出区，在生成图片以后，把图片输出在右边输出区

现在我们开始设计 take photo 页面的后端代码，关于 take photo 的逻辑，我已经写在了脚本 replicate_predict.py 中，现在我们需要把这套逻辑整合到页面中去。 关于 replicate_predict.py , 我想做以下说明：

  • client.run 里的第一个参数代表的是模型参数
  • input 里 prompt 代表的是生成图片的 prompt 现在我需要你帮我把这套逻辑整合到页面中去。

接下来我们确定要存储哪些数据

  • 用户创建的模型：用户创建模型以后，记录生成的模型相关信息（记录 model.name+id 即可），作为用户的模型存储在数据库中
  • 用户生成的照片：每次用户生成图片以后，把图片上传到 google cloud storage , 并记录下链接地址，作为用户资产存储 现在请你帮我生成数据库对应的字段，并在合适的位置更新数据库

现在我们开始重新设计 Pricing 页面，这个页面需要包含以下内容：

  • 上方的导航栏保持原样
  • 主体部分：
    • 介绍定价的卡片：把 Train Model 和 Take Photo 的定价信息做成卡片，卡片放在屏幕中央
    • 充值按钮：在卡片下方，设计两个充值按钮，一个按钮是“充值 10 美元”，另一个是“充值 100 美元” ， 按钮使用黑底白字
    • 在充值按钮下方写一行字：“现在充值，立享最高 10% 优惠”

当用户点击“充值 10 美元”后，他们会进入充值页面（payment.html ) , 这个页面包含以下内容：

  • Please send Amount worth of USDT(TRON network) to the following address: TAfWovFRRm6ZvU44HTfMRFp21iJabdmBtb Before: Deadline
  • 在这行字上方是收款地址的二维码，用户可以扫码支付

其中 Amount 和 Deadline 的值由后台提供，当用户点击“充值 10 美元”按钮时，后台会生成一个订单，这个订单包含以下信息：

  • 发起用户：发起订单的用户id
  • 发起时间：用户发起订单的时间
  • 过期时间：用户发起订单的时间+30 分钟 , 这就是 Deadline 的值
  • 金额： 如果用户选择的是充值 10 美元，那么 Amount = 10 - round(random.random(), 3) 我们需要用数据库记录这个订单的信息。 需要注意的是，在生成订单之前，我们先要扫描一遍数据库内所有活动订单（即现在时间< Deadline 的订单)，确保我们生成的金额 Amount 与所有活动订单的金额不同，后续可以根据金额确定是哪个用户在充值。 此外，当用户有活动订单时（即现在时间< Deadline 的订单) ， 用户无法生成新订单，如果点击“充值 10 美元” ， 进入的是现在的活动订单对应的页面。

所以我们需要一个 scanner 程序来监控 TAfWovFRRm6ZvU44HTfMRFp21iJabdmBtb 地址是否收到 USDT , 如果扫描到收款，那么应该按照金额数量在数据库中找到相应订单,并为相应用户上账。（所以数据库 User 表还需要加入 balance 字段）

我要重新说下充值页面（payment/orderid )的内容，这个页面包含以下内容并居中：

  • Please send Amount USDT(TRON network) to the following address: TAfWovFRRm6ZvU44HTfMRFp21iJabdmBtb
  • Please complete the payment before: expired at

其中Amount 是 orderid 对应的 amount 金额 ， expired at是 orderid 对应的 expires_at (数据从数据库里拿)

现在我希望实现 scanner 程序。 scanner 程序的作用是监控 TRON 网络地址 TAfWovFRRm6ZvU44HTfMRFp21iJabdmBtb 最近的收款，如果有新的收款，那么与数据库里的 Order 匹配（匹配的过程是看金额是否一致，要精确到三位小数都一样) 如果能匹配上，而且 Order 的 status 是 pending , 那么我们会为用户上账， 在用户的 balance 上面加上 10 美元 ， 同时把 Order 的 status 改成 completed。

现在再看看，photo-ai-flask 还有什么需要做的内容：

  1. 把 scanner 程序给调试通，并且集成到 app.py 中去 （今天的任务）
  2. 测试整个支付功能是否能够正确运行 （下午做）
  3. 每次 train 或者 take photo 的时候扣费，如果 balance 不够，拒绝用户的请求
  4. 实现 billing 页面， 展示用户的 balance , 每一笔充值和消费
  5. 实现 dashboard 页面，展示用户的历史 train 和 take photo (take photo 也许可以做成画廊，展示 prompt 和照片)
  6. 把应用部署到 zeabur (并且开会员)
  7. 实现 prompt generator (用语言模型帮用户生成 prompt)

现在我希望重新设计 dashboard 页面：

  • 保持顶部导航栏不变
  • 主体部分设计：
    • 展示 google 用户名，以及用户的余额（balance)
    • 展示用户训练过的所有模型
      • 包括模型的名字，和创建的时间
    • 展示用户生成的照片
      • 以卡片形式展示，每张卡片展示照片的 prompt 和相应的图片

现在我希望实现收费的功能，首先，我需要增加一个新的表 ConsumeOrder，来记录用户在平台上的消费记录。这个表应该包括用户，订单创建时间，订单类型（比如’train model’ , ‘take photo’) , 订单金额 ， 以及你认为应该增加的字段。

现在我希望实现 billing 页面：

  • 保持顶部导航栏不变
  • 主体部分设计：
    • 展示用户名和用户余额（balance)
    • 展示用户的充值记录（包括 pending 和 expired 的订单），最多展示 10 条
    • 展示用户的消费记录 ， 最多展示 10 条

要做的有几件事：

  • 配置好 fly.io 的 fly postgresql
  • 重新部署应用，用 postgresql
  • 用 fastapi 重构应用

现在我准备写一个 doc 页面，来告诉用户如何使用这个网站，请帮我扩写内容并翻译成英文，并且作为 doc 页面，另外请把 doc 页面的按钮放在 Pricing 页面的左边（注意要改每一个页面的导航栏）

  1. 充值：在 pricing 页面中点击充值按钮进入充值，请在规定时间之前，向地址打款精准的金额（比如 9.324USDT） ，只有精准的金额才能保证上账，务必注意确认数值与要求的值完全一致
  2. train model: 这一步的主要目的是让图像模型学习你上传照片的脸部细节和身体细节，请上传 15-20 张包含脸部细节或身体细节的高清照片，压缩成 zip 并上传，另外需要指定一个 trigger word , 这个 trigger word 后续会作为模型名称，并且在 prompt 中被当做调取你的脸部细节的词语
  3. take photo: 这一步可以生成照片，尽量使用具体的 prompt 来获得更好的效果，记得加入 trigger word 以生成你的特别照片

开发需求

我希望使用 flask + html/css/js 的方式来开发项目，初期我希望能够快速开发出原型，所以一定要保持项目简洁，具有清晰易懂的结构，初期我在 mac 本地开发，可以使用 sqlite 作为数据库。 你能否给我一个 step by step 的建议？

用户角度流程

用户进入网站后，可以用他们的 google 账户注册并登录，登录以后，进入 Dashboard 页面。

Dashboard 包含 Train , Take photo , Pricing 三个页面。

费用和充值的页面，这个页面展示收费方式的信息（训练模型 5 刀一次，大约 30 分钟一次；生成照片 0.1 刀一次，大约 1 分钟生成一张），再加上一个“充值 10 刀”的按钮。

如果用户点了充值按钮，那么网页会显示一个付款二维码和一个收款地址，并且加上一个需要充值的金额： 10 - （0 到 1 之间的 3 位随机小数）。 如果用户按照金额打款，后台经过验证以后，就在用户的余额里加上相应的金额。

如果用户的余额里有钱，那么就可以用这些钱到 train 页面里训练自己的脸部数据，或者到 take photo 页面里去生成自己的 AI 相片。每当用户训练或者生成相片，我们根据相应的金额扣除他的余额。

开发角度：

最终阶段我希望把应用部署在 vercel 上，所以我准备采用 next.js (typescript 版本) 来开发这个项目,由于 next.js 的路由有 app 和 pages 两种，我希望都用 app 文件夹来实现。

初始阶段我希望在 mac 本地开发，所以我希望尽量轻量化，数据库可以先用自带的 sqlite。 我希望能够尽量轻松地调试前后端

你能否给我一个 step by step 的建议？

prompt生成器

请根据内容 {小帅坐在红色法拉利上，在海边公路上，现实照片风格} ，按照以下格式 """ Here is photo prompt for you: {prompt content} """ 生成 stable diffusion prompt

prompt集合

成年女性

成年男性

realistic photograph, professional NBA player LIDASHUAI, wearing Los Angeles Lakers jersey, athletic build, basketball court background, dynamic pose, high-quality sports photography, sharp focus, dramatic lighting, 8K resolution

小朋友

A photorealistic image of caixingxing sitting on a red Ferrari, the car parked on a coastal road by the sea, high-quality, detailed, 8k resolution, natural lighting, cinematic composition, vibrant colors, ocean view, scenic coastline, sunny day, clear sky, Ferrari logo visible, sleek car design, reflective car paint, person in casual attire, relaxed pose, palm trees in background

狗

猫

项目进度

  1. 初步学习和项目设置：1-2 天

  2. 核心功能开发：

▪ 实现基本页面和路由：1-2 天

▪ 用户认证（Google 登录）：1-2 天

▪ 文件上传和处理：1-2 天

▪ AI 模型集成（假设使用现有 API）：3-5 天

▪ 充值和简单支付系统：3- 5 天

▪ 用户仪表板和账单系统：3-5 天

  1. UI/UX 优化和调试：3-5 天

▪ 改进用户界面

▪ 修复 bug 和优化性能

  1. 部署和最终调整：3-5 天

▪ 部署到 Vercel

▪ 进行最后的调整

总计：约 30 天

Graph View

Backlinks

  • No backlinks found