在华为开发者空间简单几步带你实现AI风格化编程

在华为开发者空间简单几步带你实现AI风格化编程

本文分享自华为云社区 《【开发者空间实践指导】基于FunctionGraph的AI风格化编程》 ，作者：开发者空间小蜜蜂。 # 一、 案例介绍 本实验基于FunctionGraph和ModelArts的智能头像动漫化处理应用。通过部署在FunctionGraph上的函数，用户可以上传自己的头像图片，通过调用ModelArts上的动漫头像制作应用，将头像图片转化为动漫风格的头像图片。 # 二、 免费领取云主机 如您还没有云主机，可点击 链接领取 。 如您已领取云主机，可直接开始实验。 # 三、 实验流程 说明： ① 安装FunctionGraph插件； ② 创建函数； ③ 部署函数； ④ 函数配置委托； ⑤ 函数配置触发器； ⑥ 函数添加依赖包； ⑦ 订阅模型并部署； ⑧ 制作动漫头像。 # 四、 安装FunctionGraph插件 方式一：在线安装 进入 云主机 ，打开CodeArts IDE，点击左侧“扩展”搜索“CodeArts FunctionGraph”点击安装该插件。 方式二：本地安装 前往鲲鹏社区官网下载插件CodeArts FunctionGraph到云主机，下载地址为： CodeArts IDE 插件市场 。 在云主机桌面，打开CodeArts IDE开发环境，单击右侧“扩展”按钮，点击从本地安装，选择下载好的插件安装。 # 五、创建函数 FunctionGraph插件安装后，如提示登录请登录后使用。打开插件，在插件窗口点击“…”选择“创建函数”，选择Http Function函数。 选择Hello World。 定义函数名：carton-generation。 选择工程路径，选择后插件会在该路径下创建carton-generation工程。 打开工程目录，创建新文件夹：templates。 在templates中创建文件index.html。 修改index.html代码如下： ```

<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>

动漫风格头像制作案例：用户上传自拍照片，调用华为云上算力，一键生成动漫风格人物头像。

上传小于 6MB 的图片。

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

    </div>
</div>

file = request.files['image']
if file.filename == '':
    return 'Filename is empty.', 400

resp = model_art_pic_carton(file)

print(resp)
return resp.json()

 修改bootstrap文件内容如下： ```
/opt/function/runtime/python3.6/rtsp/python/bin/python3 $RUNTIME_CODE_ROOT/app.py