微信小程式開發:接入阿里雲人像動漫化api介面

一方_self發表於2024-03-04

前面我已經把騰訊雲的人像轉動漫化介面接到了我的小程式裡,但是和阿里雲的對比後,發現阿里雲的效果會更好一些,且支援更多特效,如下:

微信小程式開發:接入阿里雲人像動漫化api介面

我比較喜歡這個3D特效風格,動畫3D也可以,大家拭目以待。

話說上次接了騰訊雲的人像轉動漫介面,小程式提審後居然沒過,說什麼我的小程式設計AI合成:

微信小程式開發:接入阿里雲人像動漫化api介面

然後我就說我用的是你們騰訊的雲api,才給我透過稽核:

微信小程式開發:接入阿里雲人像動漫化api介面

太難了,個人你要是想做AI的東西,直接一刀切了,我之前還做過接入微軟的azure openai,微信稽核直接給我拒絕了,不管你怎麼提交說明都沒用。

我就把這個功能隱藏了,自己用算了。

回到正文,我們看看阿里雲的人像動漫化介面文件:

微信小程式開發:接入阿里雲人像動漫化api介面

很簡單,就兩個引數。

而且還和騰訊雲一樣,提供了完整的SDK示例:

微信小程式開發:接入阿里雲人像動漫化api介面

但是這個v2版本的是用ts寫的,且uniapp的雲物件好像不支援import語法。

所以我這裡使用的v1版本:

微信小程式開發:接入阿里雲人像動漫化api介面

v1版本看起來簡單很多,但是使用起來卻有個問題,因為我之前用的騰訊雲的物件儲存,所以圖片的連結自然而然是騰訊雲的,不傳不知道,一傳報錯了:

微信小程式開發:接入阿里雲人像動漫化api介面

意思是隻能使用阿里雲的oss地址,但是吧,又有使用其他oss地址的使用方法:

https://help.aliyun.com/zh/viapi/developer-reference/node-js?spm=a2c4g.11186623.0.i3#212354503dfmw

微信小程式開發:接入阿里雲人像動漫化api介面

相當於是換了一種請求方式了,這裡得請求方式不是人像動漫化的請求方式,人像動漫化的請求方式又得去找,而且還不知道在哪裡找,遂就使用阿里雲的oss好了,開通後建立一個上海區域的bucket:

微信小程式開發:接入阿里雲人像動漫化api介面

所以現在的流程是:先將圖片上傳到阿里雲的oss,再拿到圖片的地址後傳到人像動漫化介面,但是這個url只有短暫的使用週期,還得有個程序去刪除,這裡我想的是上傳後有個表存一下檔案路徑,一天後自動刪除,這樣不佔用儲存空間,因為這些圖片上傳後就沒有了,說幹就幹:

看了一下阿里雲的上傳檔案,好像還挺簡單的:

微信小程式開發:接入阿里雲人像動漫化api介面

只需要拿到本地檔案路徑即可,再傳一個自定義的檔名就行。

所以現在的大概流程是:先上傳檔案到阿里雲的物件儲存,拿到圖片地址後傳給阿里雲的人像動漫化介面,再有一個定時任務去刪除這些上傳的圖片檔案,大概儲存1天左右。

所以目前第一步就是先上傳檔案到阿里雲oss。

直接把阿里雲oss上傳檔案的示例程式碼複製一下:

先安裝一下這兩個包:

1、npm install ali-oss

2、npm install path

微信小程式開發:接入阿里雲人像動漫化api介面

因為我電腦就一個512G的SSD,所以沒有分割槽,就一個C盤。

安裝好了:

微信小程式開發:接入阿里雲人像動漫化api介面

看著三個包,其實整個node_modules大小居然有17M:

微信小程式開發:接入阿里雲人像動漫化api介面

把阿里雲上傳oss程式碼稍微改一改:

// 上傳檔案到oss

/**

* @param {Object} tem_path 完整本地檔名,如:
http://tmp/qr57Es0lWn3B3f29b015140ccefdbf4504bbe2e1228f.png

*/

async upload_file(tem_path) {

let Config = await module.exports.get_config()

const client = new OSS({

region: Config.region,

accessKeyId: Config.accessKeyId,

accessKeySecret: Config.accessKeySecret,

bucket: Config.bucket,

})

const result = await client.put(path.basename(tem_path), tem_path)

return path.basename(tem_path)

}

但是又有新的問題:

微信小程式開發:接入阿里雲人像動漫化api介面

阿里雲的oss好像不能適應微信小程式的這種本地檔案的形式。

遂改變上傳方法,採用了:
https://developers.weixin.qq.com/community/develop/article/doc/0004ea0a6289a80b113beb69551413

在根目錄的common下建立如下目錄和檔案:

微信小程式開發:接入阿里雲人像動漫化api介面

在upload.js中匯出上傳的function:

微信小程式開發:接入阿里雲人像動漫化api介面

使用:

import {

aliyunUploadFile

} from '@/common/upload_file_aliyun/upload'

// 呼叫上傳方法,local_path是uview框架的u-upload回撥中的event.file.url

await aliyunUploadFile(local_path)

此時可以成功上傳檔案了:

微信小程式開發:接入阿里雲人像動漫化api介面

阿里雲oss檔案列表:

微信小程式開發:接入阿里雲人像動漫化api介面

然後將這個阿里雲的oss地址傳給人像動漫化介面即可:

resultUrl = await aliyun_api.faceCartoonPic(this.raw_images[0]['url'], "animation3d")

console.log('resultUrl', resultUrl)

但是又有新的問題:

微信小程式開發:接入阿里雲人像動漫化api介面

這個問題我是沒想到,是url的問題?

我將人像動漫化介面的示例url拿過來傳過去看看有沒有問題,對比了下原來是endpoint配錯了:

微信小程式開發:接入阿里雲人像動漫化api介面

改正之後就可以呼叫並生成了~:

微信小程式開發:接入阿里雲人像動漫化api介面

微信小程式開發:接入阿里雲人像動漫化api介面

好了,再把那幾個風格的選項加到介面上即可:

微信小程式開發:接入阿里雲人像動漫化api介面

可以左右拖動。

但是打包上傳後,又有新問題:

微信小程式開發:接入阿里雲人像動漫化api介面

本地開發環境好好的,體驗版這又是個啥?

先把之前安裝的無用npm包刪掉:

微信小程式開發:接入阿里雲人像動漫化api介面

只保留人像動漫化的sdk。

微信小程式開發:接入阿里雲人像動漫化api介面

刪了兩個npm包後瞬間只有5M的佔用了,之前17M:

微信小程式開發:接入阿里雲人像動漫化api介面

回到這個線上錯誤:

微信小程式開發:接入阿里雲人像動漫化api介面

錯誤暫時定位到這裡:

微信小程式開發:接入阿里雲人像動漫化api介面

這樣訪問雲物件就會報錯,直接設定就沒事:

微信小程式開發:接入阿里雲人像動漫化api介面

想著之前騰訊雲報錯是因為線上環境NodeJs版本問題,索性就將線上NodeJs版本該高一點,結果當前的報錯就解決了,解決了。。:

微信小程式開發:接入阿里雲人像動漫化api介面

好傢伙,以後涉及雲物件之類的報錯先升級NodeJs版本先。

OK,到這裡,小程式對接阿里雲人像動漫化介面就完成了,實現的效果為可嘗試不同的效果進行轉換,如:

微信小程式開發:接入阿里雲人像動漫化api介面

微信小程式開發:接入阿里雲人像動漫化api介面

換個風格繼續生成:

微信小程式開發:接入阿里雲人像動漫化api介面

小程式名:《一方雲知》。歡迎大家使用,人像動漫化介面是免費使用的。

這篇文章就到這裡啦!如果你對文章內容有疑問或想要深入討論,歡迎在評論區留言,我會盡力回答。同時,如果你覺得這篇文章對你有幫助,不妨點個贊並分享給其他同學,讓更多人受益。

想要了解更多相關知識,可以檢視我以往的文章,其中有許多精彩內容。記得關注我,獲取及時更新,我們可以一起學習、討論技術,共同進步。

感謝你的閱讀與支援,期待在未來的文章中與你再次相遇!

相關文章