基于华为云FunctionGraph和ModelArts的智能动漫头像生成:从自拍到AI风格化的编程【华为开发者空间】

举报
小馒头学Python 发表于 2024/11/12 15:22:39 2024/11/12
【摘要】 1 引言在当今人工智能快速发展的时代,图像处理和风格化技术正在广泛应用于各类场景,从个人头像美化到社交媒体内容创作,AI技术赋予了图像全新的表达方式。基于此,华为云推出了FunctionGraph与ModelArts相结合的智能动漫化头像处理方案。FunctionGraph作为无服务器计算服务,提供了灵活的编程环境,而ModelArts则为AI模型的训练、部署和管理提供了强大支持。通过将这两...

1 引言

在当今人工智能快速发展的时代,图像处理和风格化技术正在广泛应用于各类场景,从个人头像美化到社交媒体内容创作,AI技术赋予了图像全新的表达方式。基于此,华为云推出了FunctionGraph与ModelArts相结合的智能动漫化头像处理方案。FunctionGraph作为无服务器计算服务,提供了灵活的编程环境,而ModelArts则为AI模型的训练、部署和管理提供了强大支持。通过将这两者结合,开发者无需关注底层资源配置,仅需编写简单的代码即可实现头像的动漫化风格转换。这项技术不仅操作简便,还具有广泛的应用前景,为内容创作者、社交媒体用户和开发者提供了高效的AI解决方案。


2 背景介绍

2.1 华为云FunctionGraph与ModelArts简介

大体实验步骤说明:

① 安装FunctionGraph插件;

② 创建函数;

③ 部署函数;

④ 函数配置委托;

⑤ 函数配置触发器;

⑥ 函数添加依赖包;

⑦ 订阅模型并部署;

⑧ 制作动漫头像。

3 项目准备

3.1 注册与登录华为云账号

进入开发者空间,领取云主机




4 实验步骤

4.1 首先我们配置云主机

进入云桌面

4.2 安装FunctionGraph插件


这里我们可以选择两种安装方式!

方式一:在线安装

进入云主机 ,打开CodeArts IDE,点击左侧“扩展”搜索“CodeArts FunctionGraph”点击安装该插件。

方式二:本地安装

前往鲲鹏社区官网下载插件CodeArts FunctionGraph到云主机,下载地址为:CodeArts IDE 插件市场 


这里我们采用方式一!

4.3 创建函数
接下来按照步骤即可

选择Http Function函数。

选择Hello World

打开工程目录,创建新文件夹:templates

在templates中创建文件index.html

html代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FunctionGraph 动漫头像制作</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: repeating-linear-gradient(45deg, #ddd 0 2px, transparent 2px 4px), repeating-linear-gradient(-45deg, #ddd 0 2px, transparent 2px 4px);
            text-align: center;
        }

        h1 {
            color: #333;
        }

        p.description {
            color: #666;
        }

        #upload-button {
            padding: 15px 30px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 20px;
            margin-top: 20px;
        }
        .image-container {
            display: flex;
            margin-top: 50px;
            justify-content: center;
            align-items: center;
        }

        .image-box {
            margin: 0 40px;
            padding: 0;
            width: 500px;
            height: 500px;
            display: flex;
            flex-direction: row;
            position: relative;
            letter-spacing: .3px;
            padding: 10px;
            border-radius: 10px;
            transition: background-color .3s ease-in-out;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }

        #original-image-box, #preview-container {
            border: 2px dashed #6dcff6;
            border-radius: 10px;
            width: 480px;
            height: 480px;
        }

        .but-box {
            margin: 0px 30px;
            padding: 0;
            width: 500px;
            display: flex;
            justify-content: center;
            font-size: 30px;
            font-weight: 700;
        }

        .image-box img {
            height: 100%;
            max-width: 100%;
        }

        .error-message {
            color: red;
            margin-top: 10px;
        }

        .size-warning {
            font-size: 20px;
            color: orange;
            margin-top: 10px;
        }

        button {
            padding: 20px 40px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 20px;
        }

        h1 {
            font-size: 40px;
        }

        .triangle-arrow {
            width: 0;
            height: 0;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 30px solid blue;
        }

        .loading-mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.1);
            display: none;
            justify-content: center;
            align-items: flex-end;
            z-index: 999;
        }

        .loading-text {

            font-size: 30px;
            color: red;
        }
    </style>
</head>

<body>

<h1>动漫风格头像制作案例:用户上传自拍照片,调用华为云上算力,一键生成动漫风格人物头像。</h1>
<input type="file" id="image-input" style="display: none;">
<button id="upload-button">请上传照片</button>
<p class="size-warning">上传小于 6MB 的图片。</p>
<p class="error-message" id="size-error"></p>

<div class="image-container">
    <div class="image-box">
        <div id="original-image-box">

        </div>
    </div>
    <div class="triangle-arrow"></div>
    <div class="image-box">
        <div id="preview-container">

        </div>
    </div>
</div>

<div class="image-container">
    <div class="but-box">
        原图
    </div>
    <div class="but-box">
        效果图
    </div>
</div>
<div class="loading-mask" id="loading-mask">
    <p class="loading-text">照片生成中...</p>
</div>
<script>
    const uploadButton = document.getElementById('upload-button');
    const imageInput = document.getElementById('image-input');
    const originalImageBox = document.getElementById('original-image-box');
    const imagePreview = document.getElementById("preview-container");
    const sizeError = document.getElementById('size-error');
    const sizeWarning = document.querySelector('.size-warning');
    const loadingMask = document.getElementById('loading-mask');
    uploadButton.addEventListener('click', () => {
        imageInput.click();
    });
    imageInput.addEventListener('change', () => {
        const file = imageInput.files[0];
        if (file) {
            if (file.size > 6 * 1024 * 1024) {
                sizeError.textContent = '图片大小不能超过 6MB。';
                sizeWarning.textContent = '';
                return;
            }

            const img = document.createElement('img');
            img.src = URL.createObjectURL(file);
            originalImageBox.innerHTML = '';
            originalImageBox.appendChild(img);
            if (!file) {
                console.log("!file ")
                return;
            }
            const formData = new FormData();
            formData.append("image", file);
            loadingMask.style.display = 'flex';
            fetch("/carton/upload", {
                method: "POST",
                body: formData,
            })
                .then((response) => response.text())
                .then((data) => {
					let parsedObject;
                    try {
                        parsedObject = JSON.parse(data);
                    } catch (error) {
                        console.error('JSON 解析错误:', error);
                        parsedObject = null; // 或者其他默认值,根据你的需求设置
                    }

                    const animeImgElement = document.createElement('img');
                    animeImgElement.src = "data:image/png;base64," +
                        parsedObject.results[0];
                    imagePreview.innerHTML = '';
                    imagePreview.appendChild(animeImgElement);
                    loadingMask.style.display = 'none';
                })
                .catch((error) => {
                    loadingMask.style.display = 'none';
                    console.error(error);
                    alert("处理失败");
                });
        }
    });

</script>

</body>
</html>

删除index.js,创建新文件app.py

修改app.py内容如下

from flask import Flask, request, render_template
import requests
import os

MODEL_ART_API = os.getenv('MODEL_ART_API')

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/carton/upload', methods=['POST'])
def upload_file():
    if 'image' not in request.files:
        return 'No file uploaded.', 400
    
    file = request.files['image']
    if file.filename == '':
        return 'Filename is empty.', 400
    
    resp = model_art_pic_carton(file)

    print(resp)
    return resp.json()

def model_art_pic_carton(file):
    payload = {}
    files=[  ('images',(file.filename,file,'image/png'))]
    headers = {
    'x-auth-token': get_token_from_fg_header()
    }
    response = requests.request("POST", MODEL_ART_API, headers=headers, data=payload, files=files,verify=False)
    return response

# 从FunctionGraph平台发送的请求里获取鉴权token 
# 需要先配置委托 并且 在高级设置打开传入秘钥开关
def get_token_from_fg_header():
    return request.headers.get("X-Cff-Auth-Token")

if __name__ == '__main__':
    app.run(debug=True,port=8000,host="0.0.0.0")

修改bootstrap文件内容如下:

/opt/function/runtime/python3.6/rtsp/python/bin/python3 $RUNTIME_CODE_ROOT/app.py

4.4 部署函数

回到插件页面,选择部署函数

选择新建的函数下的yml文件

部署环境选择“华北-北京四

之后就部署成果了,点击“选择要展示的Region”,选择“华北-北京四”,可以看到该区域下刚部署好的函数:carton-generation,右键选择函数,点击浏览器打开,跳转到函数详情界面

4.5 函数配置委托


这里我简单的贴图,具体流程请查看[官方文档](https://bbs.huaweicloud.cn/blogs/435502)

4.6 函数配置触发器

点击“创建触发器”,选择“触发器类型”,选择“分组”(如果没有分组需先创建),选择“安全认证”,设置“后端超时”。

4.7 函数添加依赖包


返回“函数工作流”管理界面,选择“依赖包管理”,点击“创建依赖包”。
这里有些同学可能找不到,我们从上面搜索即可

填写“依赖包名称”,代码包上传方式为“从OBS上传文件”,将OBS链接粘贴到“OBS链接URL”中(OBS URL:https://functionstorage-cn-north-4.obs.cn-north-4.myhuaweicloud.com/applications/depdency/flask-2_0_1-1.zip 

运行时语言为“Python3.9”。

进入函数详情页底部,点击“添加依赖包”。这里有些人可能也找不到,下图可以帮你更快找到


4.8 订阅模型并部署AI应用

编辑环境变量

4.9 制作动漫头像

访问URL

网上下载一个美女图片

体验完别忘了关机哦




5 总结与心得

本文粗略的介绍了如何利用华为云的FunctionGraph和ModelArts服务,实现智能化的动漫头像生成。通过FunctionGraph的无服务器计算特性,开发者无需管理底层计算资源,只需关注代码逻辑,而ModelArts则提供了强大的AI模型支持,使得图像风格化处理变得简单高效。文章详细讲解了上传头像、调用ModelArts模型进行动漫化处理的具体步骤,并展示了处理后的效果。这样的AI风格化技术不仅可以应用于个人头像,还具有广泛的商业应用前景,如内容创作、社交媒体和游戏等多个领域。这一解决方案展示了华为云AI生态系统的便捷和强大,同时也让开发者认识到云端AI服务的高效性和灵活性,是推动AI技术应用落地的良好范例。


我正在参加【有奖征文 第34期】华为开发者空间一行代码快速上云,更有开发者周边等你拿!
链接:https://bbs.huaweicloud.cn/blogs/438987

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。