如何用 Serverless 优雅地实现图片艺术化应用

npm install -g serverless

mkdir oss

component:cosname:xart-ossapp:xartstage:dev
inputs:  src:    src:./    exclude:      -.env# 防止密钥被上传  bucket:${name}# 存储桶名称，如若不添加 AppId 后缀，则系统会自动添加，后缀为大写（xart-oss-<你的appid>）  website:false  targetDir:/  protocol:https  region:ap-guangzhou# 配置区域，尽量配置在和服务同区域内，速度更快  acl:    permissions:public-read# 读写配置为，私有写，共有读

mkdir art-api && cd art-api && npm init

npm i koa @koa/router @koa/cors koa-body typescript ts-node cos-nodejs-sdk-v5 axios dotenv

{  "compilerOptions": {    "target": "es2018",    "module": "commonjs",    "lib": ["es2018", "esnext.asynciterable"],    "experimentalDecorators": true,    "emitDecoratorMetadata": true,    "esModuleInterop": true  }}

require("ts-node").register({ transpileOnly: true }); // 载入 ts 运行时环境，配置忽略类型错误module.exports = require("./app.ts"); // 直接引入业务逻辑，下面我会和你一起实现

require("dotenv").config(); // 载入 .env 环境变量，可以将一些密钥配置在环境变量中，并通过 .gitignore 阻止提交import Koa from"koa";import Router from"@koa/router";import koaBody from"koa-body";import cors from'@koa/cors'import util from'util'import COS from'cos-nodejs-sdk-v5'import axios from'axios'
const app = new Koa();const router = new Router();
var cos = new COS({  SecretId: process.env.SecretId // 你的id,  SecretKey: process.env.SecretKey // 你的key,});
const cosInfo = {  Bucket: "xart-oss-<你的appid>", // 部署oss后获取  Region: "ap-guangzhou",}
const putObjectSync = util.promisify(cos.putObject.bind(cos));const getBucketSync = util.promisify(cos.getBucket.bind(cos));
router.get("/hello", async (ctx) => {  ctx.body = 'hello world!'})
router.get("/api/images", async (ctx) => {  const files = await getBucketSync({    ...cosInfo,    Prefix: "result",  });
  const cosURL = `https://${cosInfo.Bucket}.cos.${cosInfo.Region}.myqcloud.com`;  ctx.body = files.Contents.map((it) => {    const [timestamp, size] = it.Key.split(".jpg")[0].split("__");    const [width, height] = size.split("_");    return {      url: `${cosURL}/${it.Key}`,      width,      height,      timestamp: Number(timestamp),      name: it.Key,    };  })    .filter(Boolean)    .sort((a, b) => b.timestamp - a.timestamp);});
router.post("/api/images/upload", async (ctx) => {  const { imgBase64, style } = JSON.parse(ctx.request.body)  const buf = Buffer.from(imgBase64.replace(/^data:image\/\w+;base64,/, ""), 'base64')  // 调用预先提供tensorflow服务加工图片，后面替换成你自己的服务  const { data } = await axios.post('https://service-edtflvxk-1254074572.gz.apigw.tencentcs.com/release/', {    imgBase64: buf.toString('base64'),    style  })  if (data.success) {    const afterImg = await putObjectSync({      ...cosInfo,      Key: `result/${Date.now()}__400_200.jpg`,      Body: Buffer.from(data.data, 'base64'),    });    ctx.body = {      success: true,      data: 'https://' + afterImg.Location    }  }});
app.use(cors());app.use(koaBody({  formLimit: "10mb",  jsonLimit: '10mb',  textLimit: "10mb"}));app.use(router.routes()).use(router.allowedMethods());
const port = 8080;app.listen(port, () => {  console.log("listen in http://localhost:%s", port);});
module.exports = app;

NODE_ENV=development
# 配置 oss 上传所需密钥，需要自行配置，配好了也别告诉我：）# 密钥查看地址：https://console.cloud.tencent.com/cam/capiSecretId=xxxxSecretKey=xxxx

component:koa# 这里填写对应的 componentapp:artname:art-apistage:dev
inputs:  src:    src:./    exclude:      -.env  functionName:${name}  region:ap-guangzhou  runtime:Nodejs10.15  functionConf:    timeout:60# 超时时间配置的稍微久一点    environment:      variables:# 配置环境变量，同时也可以直接在scf控制台配置        NODE_ENV:production  apigatewayConf:    enableCORS:true    protocols:      -https      -http    environment:release

mkdir layer

component:layerapp:artname:art-api-layerstage:dev
inputs:  region:ap-guangzhou  name:${name}  src:../node_modules# 将 node_modules 打包上传  runtimes:    -Nodejs10.15# 注意配置为相同环境

component:koa# 这里填写对应的 componentapp:artname:art-apistage:dev
inputs:  src:    src:./    exclude:      -.env      -node_modules/**# deploy 时排除 node_modules  functionName:${name}  region:ap-guangzhou  runtime:Nodejs10.15  functionConf:    timeout:60# 超时时间配置的稍微久一点    environment:      variables:# 配置环境变量，同时也可以直接在 scf 控制台配置        NODE_ENV:production  apigatewayConf:    enableCORS:true    protocols:      -https      -http    environment:release  layers:    -name:${output:${stage}:${app}:${name}-layer.name}# 配置对应的 layer      version:${output:${stage}:${app}:${name}-layer.version}# 配置对应的 layer 版本

sls deploy

mkdir art-front && cd art-front && npm init

npm install next react react-dom typescript @types/node swr antd @ant-design/icons dayjs

touch tsconfig.json

"scripts": {  "dev": "next",  "build": "next build",  "start": "next start"}

import React from"react";import"antd/dist/antd.css";import { SWRConfig } from"swr";
exportdefaultfunction MyApp({ Component, pageProps }) {  return (    <SWRConfig      value={{        refreshInterval: 2000,        fetcher: (...args) => fetch(args[0], args[1]).then((res) => res.json()),      }}    >      <Component {...pageProps} />    </SWRConfig>  );}

import React from"react";import { Card, Upload, message, Radio, Spin, Divider } from"antd";import { InboxOutlined } from"@ant-design/icons";import dayjs from"dayjs";import useSWR from"swr";
let origin = 'http://localhost:8080'if (process.env.NODE_ENV === 'production') {  // 使用你自己的部署的art-api服务地址  origin = 'https://service-5yyo7qco-1254074572.gz.apigw.tencentcs.com/release'}
// 略...exportdefaultfunction Index() {  const { data } = useSWR(`${origin}/api/images`);
  const [img, setImg] = React.useState("");  const [loading, setLoading] = React.useState(false);
  const uploadImg = React.useCallback((file, style) => {    const reader = new FileReader();    reader.readAsDataURL(file);    reader.onload = async () => {      const res = await fetch(        `${origin}/api/images/upload`, {        method: 'POST',        body: JSON.stringify({          imgBase64: reader.result,          style        }),        mode: 'cors'      }      ).then((res) => res.json());
      if (res.success) {        setImg(res.data);      } else {        message.error(res.message);      }      setLoading(false);    }  }, []);
  const [artStyle, setStyle] = React.useState(STYLE_MODE.cube);
  return (        <Dragger          style={{ padding: 24 }}          {...{            name: "art_img",            showUploadList: false,            action: `${origin}/api/upload`,            onChange: (info) => {              const { status } = info.file;              if (status !== "uploading") {                console.log(info.file, info.fileList);              }              if (status === "done") {                setImg(info.file.response);                message.success(`${info.file.name} 上传成功`);                setLoading(false);              } else if (status === "error") {                message.error(`${info.file.name} 上传失败`);                setLoading(false);              }            },            beforeUpload: (file) => {              if (                !["image/png", "image/jpg", "image/jpeg"].includes(file.type)              ) {                message.error("图片格式必须是 png、jpg、jpeg");                return false;              }              const isLt10M = file.size / 1024 / 1024 < 10;              if (!isLt10M) {                message.error("文件大小超过10M");                return false;              }              setLoading(true);
              uploadImg(file, artStyle);              return false;            },          }}      // 略...

component:nextjsapp:artname:art-frontstage:dev
inputs:  src:    dist:./    hook:npmrunbuild    exclude:      -.env  region:ap-guangzhou  functionName:${name}  runtime:Nodejs12.16  staticConf:    cosConf:      bucket:art-front# 将前端静态资源部署到oss，减少scf的调用频次  apigatewayConf:    enableCORS:true    protocols:      -https      -http    environment:release    # customDomains: # 如果需要，可以自己配置自定义域名    #   - domain: xxxxx     #     certificateId: xxxxx # 证书 ID    #     # 这里将 API 网关的 release 环境映射到根路径    #     isDefaultMapping: false    #     pathMappingSet:    #       - path: /    #         environment: release    #     protocols:    #       - https  functionConf:    timeout:60    memorySize:128    environment:      variables:        apiUrl:${output:${stage}:${app}:art-api.apigw.url}# 此处可以将api通过环境变量注入

const isProd = process.env.NODE_ENV === "production";
const STATIC_URL =  "https://art-front-<你的appid>.cos.ap-guangzhou.myqcloud.com/";
module.exports = {  assetPrefix: isProd ? STATIC_URL : "",};

var fs = requiret('fs');exports.main_handler = async (event, context) => {  await fs.promises.writeFile('/mnt/myfolder/filel.txt', JSON.stringify(event));   return event;};

  tf = require("/mnt/nodelib/node_modules/@tensorflow/tfjs-node");  jpeg = require("/mnt/nodelib/node_modules/jpeg-js");  images = require("/mnt/nodelib/node_modules/images");  loadModel = async () => tf.node.loadSavedModel("/mnt/model");

sys.path.insert(0, "./mnt/xxx")

sudo yum install nfs-utilsmkdir <待挂载目标目录>sudo mount -t nfs -o vers=4.0，noresvport <挂载点IP>:/ <待挂载目录>

const fs = require("fs");let tf, jpeg, loadModel, images;
if (process.env.NODE_ENV !== "production") {  tf = require("@tensorflow/tfjs-node");  jpeg = require("jpeg-js");  images = require("images");  loadModel = async () => tf.node.loadSavedModel("./model");} else {  tf = require("/mnt/nodelib/node_modules/@tensorflow/tfjs-node");  jpeg = require("/mnt/nodelib/node_modules/jpeg-js");  images = require("/mnt/nodelib/node_modules/images");  loadModel = async () => tf.node.loadSavedModel("/mnt/model");}
exports.main_handler = async (event) => {  const { imgBase64, style } = JSON.parse(event.body)  if (!imgBase64 || !style) {    return { success: false, message: "需要提供完整的参数imgBase64、style" };  }  time = Date.now();  console.log("解析图片--");  const styleImg = tf.node.decodeJpeg(fs.readFileSync(`./imgs/style_${style}.jpeg`));  const contentImg = tf.node.decodeJpeg(    images(Buffer.from(imgBase64, 'base64')).size(400).encode("jpg", { operation: 50 }) // 压缩图片尺寸  );  const a = styleImg.toFloat().div(tf.scalar(255)).expandDims();  const b = contentImg.toFloat().div(tf.scalar(255)).expandDims();  console.log("--解析图片 %s ms", Date.now() - time);

  time = Date.now();  console.log("载入模型--");  const model = await loadModel();  console.log("--载入模型 %s ms", Date.now() - time);

  time = Date.now();  console.log("执行模型--");  const stylized = tf.tidy(() => {    const x = model.predict([b, a])[0];    return x.squeeze();  });  console.log("--执行模型 %s ms", Date.now() - time);
  time = Date.now();
  const imgData = await tf.browser.toPixels(stylized);  var rawImageData = {    data: Buffer.from(imgData),    width: stylized.shape[1],    height: stylized.shape[0],  };
  const result = images(jpeg.encode(rawImageData, 50).data)    .draw(      images("./imgs/logo.png"),      Math.random() * rawImageData.width * 0.9,      Math.random() * rawImageData.height * 0.9    )    .encode("jpg", { operation: 50 });
  return { success: true, data: result.toString('base64') };};