自己做社交网站吗,重庆怎么推广企业网站,手机访问不了自己做的网站吗,个人网站域名快速备案流程简介#xff1a; 当一个程序员想要个漫画风的头像时...
前言
我一直都想要有一个漫画版的头像#xff0c;奈何手太笨#xff0c;用了很多软件 “捏不出来”#xff0c;所以就在想着#xff0c;是否可以基于 AI 实现这样一个功能#xff0c;并部署到 Serverless 架构上让…简介 当一个程序员想要个漫画风的头像时...
前言
我一直都想要有一个漫画版的头像奈何手太笨用了很多软件 “捏不出来”所以就在想着是否可以基于 AI 实现这样一个功能并部署到 Serverless 架构上让更多人来尝试使用呢
后端项目
后端项目采用业界鼎鼎有名的动漫风格转化滤镜库 AnimeGAN 的 v2 版本效果大概如下 关于这个模型的具体的信息在这里不做详细的介绍和说明。通过与 Python Web 框架结合将 AI 模型通过接口对外暴露
from PIL import Image
import io
import torch
import base64
import bottle
import random
import json
cacheDir /tmp/
modelDir ./model/bryandlee_animegan2-pytorch_main
getModel lambda modelName: torch.hub.load(modelDir, generator, pretrainedmodelName, sourcelocal)
models {celeba_distill: getModel(celeba_distill),face_paint_512_v1: getModel(face_paint_512_v1),face_paint_512_v2: getModel(face_paint_512_v2),paprika: getModel(paprika)
}
randomStr lambda num5: .join(random.sample(abcdefghijklmnopqrstuvwxyz, num))
face2paint torch.hub.load(modelDir, face2paint, size512, sourcelocal)
bottle.route(/images/comic_style, methodPOST)
def getComicStyle():result {}try:postData json.loads(bottle.request.body.read().decode(utf-8))style postData.get(style, celeba_distill)image postData.get(image)localName randomStr(10)# 图片获取imagePath cacheDir localNamewith open(imagePath, wb) as f:f.write(base64.b64decode(image))# 内容预测model models[style]imgAttr Image.open(imagePath).convert(RGB)outAttr face2paint(model, imgAttr)img_buffer io.BytesIO()outAttr.save(img_buffer, formatJPEG)byte_data img_buffer.getvalue()img_buffer.close()result[photo] data:image/jpg;base64, %s % base64.b64encode(byte_data).decode()except Exception as e:print(ERROR: , e)result[error] Truereturn result
app bottle.default_app()
if __name__ __main__:bottle.run(hostlocalhost, port8099)
整个代码是基于 Serverless 架构进行了部分改良的
实例初始化的时候进行模型的加载已经可能的减少频繁的冷启动带来的影响情况在函数模式下往往只有/tmp目录是可写的所以图片会被缓存到/tmp目录下虽然说函数计算是“无状态”的但是实际上也有复用的情况所有数据在存储到tmp的时候进行了随机命名虽然部分云厂商支持二进制的文件上传但是大部分的 Serverless 架构对二进制上传支持的并不友好所以这里依旧采用 Base64 上传的方案
上面的代码更多是和 AI 相关的除此之外还需要有一个获取模型列表以及模型路径等相关信息的接口
import bottle
bottle.route(/system/styles, methodGET)
def styles():return {AI动漫风: {color: red,detailList: {风格1: {uri: images/comic_style,name: celeba_distill,color: orange,preview: https://serverless-article-picture.oss-cn-hangzhou.aliyuncs.com/1647773808708_20220320105649389392.png},风格2: {uri: images/comic_style,name: face_paint_512_v1,color: blue,preview: https://serverless-article-picture.oss-cn-hangzhou.aliyuncs.com/1647773875279_20220320105756071508.png},风格3: {uri: images/comic_style,name: face_paint_512_v2,color: pink,preview: https://serverless-article-picture.oss-cn-hangzhou.aliyuncs.com/1647773926924_20220320105847286510.png},风格4: {uri: images/comic_style,name: paprika,color: cyan,preview: https://serverless-article-picture.oss-cn-hangzhou.aliyuncs.com/1647773976277_20220320105936594662.png},}},}
app bottle.default_app()
if __name__ __main__:bottle.run(hostlocalhost, port8099)可以看到此时我的做法是新增了一个函数作为新接口对外暴露那么为什么不在刚刚的项目中增加这样的一个接口呢而是要多维护一个函数呢
AI 模型加载速度慢如果把获取AI处理列表的接口集成进去势必会影响该接口的性能AI 模型所需配置的内存会比较多而获取 AI 处理列表的接口所需要的内存非常少而内存会和计费有一定的关系所以分开有助于成本的降低
关于第二个接口获取 AI 处理列表的接口相对来说是比较简单的没什么问题但是针对第一个 AI 模型的接口就有比较头疼的点
模型所需要的依赖可能涉及到一些二进制编译的过程所以导致无法直接跨平台使用模型文件比较大 单纯的 Pytorch 就超过 800M函数计算的上传代码最多才 100M所以这个项目无法直接上传
所以这里需要借助 Serverless Devs 项目来进行处理
参考 Yaml规范 - Serverless Devs
完成 s.yaml 的编写
edition: 1.0.0
name: start-ai
access: default
vars: # 全局变量region: cn-hangzhouservice:name: ainasConfig: # NAS配置, 配置后function可以访问指定NASuserId: 10003 # userID, 默认为10003groupId: 10003 # groupID, 默认为10003mountPoints: # 目录配置- serverAddr: 0fe764bf9d-kci94.cn-hangzhou.nas.aliyuncs.com # NAS 服务器地址nasDir: /python3fcDir: /mnt/python3vpcConfig:vpcId: vpc-bp1rmyncqxoagiyqnbcxksecurityGroupId: sg-bp1dpxwusntfryekord6vswitchIds:- vsw-bp1wqgi5lptlmk8nk5yi0
services:image:component: fcprops: # 组件的属性值region: ${vars.region}service: ${vars.service}function:name: image_serverdescription: 图片处理服务runtime: python3codeUri: ./ossBucket: temp-code-cn-hangzhouhandler: index.appmemorySize: 3072timeout: 300environmentVariables:PYTHONUSERBASE: /mnt/python3/pythontriggers:- name: httpTriggertype: httpconfig:authType: anonymousmethods:- GET- POST- PUTcustomDomains:- domainName: avatar.aialbum.netprotocol: HTTProuteConfigs:- path: /*
然后进行
1、依赖的安装s build --use-docker
2、项目的部署s deploy
3、在 NAS 中创建目录上传依赖
s nas command mkdir /mnt/python3/python
s nas upload -r 本地依赖路径 /mnt/python3/python完成之后可以通过接口对项目进行测试。
另外微信小程序需要 https 的后台接口所以这里还需要配置 https 相关的证书信息此处不做展开。
小程序项目
小程序项目依旧采用 colorUi整个项目就只有一个页面 页面相关布局
scroll-view scroll-y classscrollPageimage src/images/topbg.jpg modewidthFix classresponse/imageview classcu-bar bg-white solid-bottom margin-topview classactiontext classcuIcon-title text-blue/text第一步选择图片/view/viewview classpadding bg-white solid-bottomview classflexview classflex-sub bg-grey padding-sm margin-xs radius text-center bindtapchosePhoto本地上传图片/viewview classflex-sub bg-grey padding-sm margin-xs radius text-center bindtapgetUserAvatar获取当前头像/view/view/viewview classpadding bg-white hidden{{!userChosePhoho}}view classimagesimage src{{userChosePhoho}} modewidthFix bindtappreviewImage bindlongpresseditImage data-image{{userChosePhoho}}/image/viewview classtext-right padding-top text-gray* 点击图片可预览长按图片可编辑/view/viewview classcu-bar bg-white solid-bottom margin-topview classactiontext classcuIcon-title text-blue/text第二步选择图片处理方案/view/viewview classbg-whitescroll-view scroll-x classbg-white navview classflex text-centerview classcu-item flex-sub {{stylecurrentStyle?text-orange cur:}} wx:for{{styleList}}wx:for-indexstyle bindtapchangeStyle data-style{{style}}{{style}}/view/view/scroll-view/viewview classpadding-sm bg-white solid-bottomview classcu-avatar round xl bg-{{item.color}} margin-xs wx:for{{styleList[currentStyle].detailList}}wx:for-indexsubstyle bindtapchangeStyle data-substyle{{substyle}} bindlongpressshowModal data-targetImage view classcu-tag badge cuIcon-check bg-grey hidden{{currentSubStyle substyle ? false : true}}/viewtext classavatar-text{{substyle}}/text/viewview classtext-right padding-top text-gray* 长按风格圆圈可以预览模板效果/view/viewview classpadding-sm bg-white solid-bottombutton classcu-btn block bg-blue margin-tb-sm lg bindtapgetNewPhoto disabled{{!userChosePhoho}}type{{ userChosePhoho ? (getPhotoStatus ? AI将花费较长时间 : 生成图片) : 请先选择图片 }}/button/viewview classcu-bar bg-white solid-bottom margin-top hidden{{!resultPhoto}}view classactiontext classcuIcon-title text-blue/text生成结果/view/viewview classpadding-sm bg-white solid-bottom hidden{{!resultPhoto}}view wx:if{{resultPhoto error}}view classtext-center padding-top服务暂时不可用请稍后重试/viewview classtext-center padding-top或联系开发者微信text classtext-blue data-datazhihuiyushaiqi bindtapcopyDatazhihuiyushaiqi/text/view/viewview wx:elseview classimagesimage src{{resultPhoto}} modeaspectFit bindtappreviewImage bindlongpresssaveImage data-image{{resultPhoto}}/image/viewview classtext-right padding-top text-gray* 点击图片可预览长按图片可保存/view/view/viewview classpadding bg-white margin-top margin-bottomview classtext-center自豪的采用 Serverless Devs 搭建/viewview classtext-centerPowered By Anycodes text bindtapshowModal classtext-cyan data-targetModal{{}}作者的话{{}}/text/view/viewview classcu-modal {{modalNameModal?show:}}view classcu-dialogview classcu-bar bg-white justify-endview classcontent作者的话/viewview classaction bindtaphideModaltext classcuIcon-close text-red/text/view/viewview classpadding-xl text-left大家好我是刘宇很感谢您可以关注和使用这个小程序这个小程序是我用业余时间做的一个头像生成小工具基于“人工智障”技术反正现在怎么看怎么别扭但是我会努力让这小程序变得“智能”起来的。如果你有什么好的意见也欢迎联系我text classtext-blue data-dataservice52exe.cn bindtapcopyData邮箱/text或者text classtext-blue data-datazhihuiyushaiqi bindtapcopyData微信/text另外值得一提的是本项目基于阿里云Serverless架构通过Serverless Devs开发者工具建设。/view/view
/view
view classcu-modal {{modalNameImage?show:}}view classcu-dialogview classbg-img stylebackground-image: url({{previewStyle}});height:200px;view classcu-bar justify-end text-whiteview classaction bindtaphideModaltext classcuIcon-close /text/view/view/viewview classcu-bar bg-whiteview classaction margin-0 flex-sub solid-left bindtaphideModal关闭预览/view/view/view
/view
/scroll-view
页面逻辑也是比较简单的
// index.js
// 获取应用实例
const app getApp()
Page({data: {styleList: {},currentStyle: 动漫风,currentSubStyle: v1模型,userChosePhoho: undefined,resultPhoto: undefined,previewStyle: undefined,getPhotoStatus: false},// 事件处理函数bindViewTap() {wx.navigateTo({url: ../logs/logs})},onLoad() {const that thiswx.showLoading({title: 加载中,})app.doRequest(system/styles, {}, option {method: GET}).then(function (result) {wx.hideLoading()that.setData({styleList: result,currentStyle: Object.keys(result)[0],currentSubStyle: Object.keys(result[Object.keys(result)[0]].detailList)[0],})})},changeStyle(attr) {this.setData({currentStyle: attr.currentTarget.dataset.style || this.data.currentStyle,currentSubStyle: attr.currentTarget.dataset.substyle || Object.keys(this.data.styleList[attr.currentTarget.dataset.style].detailList)[0]})},chosePhoto() {const that thiswx.chooseImage({count: 1,sizeType: [compressed],sourceType: [album, camera],complete(res) {that.setData({userChosePhoho: res.tempFilePaths[0],resultPhoto: undefined})}})},headimgHD(imageUrl) {imageUrl imageUrl.split(/); //把头像的路径切成数组//把大小数值为 46 || 64 || 96 || 132 的转换为0if (imageUrl[imageUrl.length - 1] (imageUrl[imageUrl.length - 1] 46 || imageUrl[imageUrl.length - 1] 64 || imageUrl[imageUrl.length - 1] 96 || imageUrl[imageUrl.length - 1] 132)) {imageUrl[imageUrl.length - 1] 0;}imageUrl imageUrl.join(/); //重新拼接为字符串return imageUrl;},getUserAvatar() {const that thiswx.getUserProfile({desc: 获取您的头像,success(res) {const newAvatar that.headimgHD(res.userInfo.avatarUrl)wx.getImageInfo({src: newAvatar,success(res) {that.setData({userChosePhoho: res.path,resultPhoto: undefined})}})}})},previewImage(e) {wx.previewImage({urls: [e.currentTarget.dataset.image]})},editImage() {const that thiswx.editImage({src: this.data.userChosePhoho,success(res) {that.setData({userChosePhoho: res.tempFilePath})}})},getNewPhoto() {const that thiswx.showLoading({title: 图片生成中,})this.setData({getPhotoStatus: true})app.doRequest(this.data.styleList[this.data.currentStyle].detailList[this.data.currentSubStyle].uri, {style: this.data.styleList[this.data.currentStyle].detailList[this.data.currentSubStyle].name,image: wx.getFileSystemManager().readFileSync(this.data.userChosePhoho, base64)}, option {method: POST}).then(function (result) {wx.hideLoading()that.setData({resultPhoto: result.error ? error : result.photo,getPhotoStatus: false})})},saveImage() {wx.saveImageToPhotosAlbum({filePath: this.data.resultPhoto,success(res) {wx.showToast({title: 保存成功})},fail(res) {wx.showToast({title: 异常稍后重试})}})},onShareAppMessage: function () {return {title: 头头是道个性头像,}},onShareTimeline() {return {title: 头头是道个性头像,}},showModal(e) {if(e.currentTarget.dataset.targetImage){const previewSubStyle e.currentTarget.dataset.substyleconst previewSubStyleUrl this.data.styleList[this.data.currentStyle].detailList[previewSubStyle].previewif(previewSubStyleUrl){this.setData({previewStyle: previewSubStyleUrl})}else{wx.showToast({title: 暂无模板预览,icon: error})return }}this.setData({modalName: e.currentTarget.dataset.target})},hideModal(e) {this.setData({modalName: null})},copyData(e) {wx.setClipboardData({data: e.currentTarget.dataset.data,success(res) {wx.showModal({title: 复制完成,content: 已将${e.currentTarget.dataset.data}复制到了剪切板,})}})},
})因为项目会请求比较多次的后台接口所以我将请求方法进行额外的抽象
// 统一请求接口doRequest: async function (uri, data, option) {const that thisreturn new Promise((resolve, reject) {wx.request({url: that.url uri,data: data,header: {Content-Type: application/json,},method: option option.method ? option.method : POST,success: function (res) {resolve(res.data)},fail: function (res) {reject(null)}})})}
完成之后配置一下后台接口发布审核即可。
本文作者刘宇花名江昱
原文链接
本文为阿里云原创内容未经允许不得转载。
