likes
comments
collection
share

通过AI全栈来实现coze的logo生成

作者站长头像
站长
· 阅读数 32

前言

现在很多AI bot出现，coze也越来越受欢迎，通过coze可以自己制作专属机器人，那么你们有没有注意coze的logo生成，接下来分享一下通过全栈来实现这个功能。

通过AI全栈来实现coze的logo生成

正文

文件夹位置：

通过AI全栈来实现coze的logo生成

前端

通过bootstrap来快速实现搭建页面：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        #logo img {
            display: block;
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <!-- bootstrap 好快 PC 框架 -->
    <!-- 网页布局 -->
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <form name="logoForm">
                    <div class="form-group">
                        <label for="titleInput">Bot名称：</label>
                        <input type="text" class="form-control" id="titleInput" name="title" placeholder="Bot名称"
                            requried>
                    </div>
                    <div class="form-group">
                        <label for="descInput">Bot介绍：</label>
                        <textarea class="form-control" name="desc" id="descInput" placeholder="请输入Bot介绍">
                        </textarea>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">生成图标</button>
                    </div>
                </form>
            </div>
            <div class="row" id="logo">

            </div>
        </div>
    </div>
</body>
</html>

通过AI全栈来实现coze的logo生成

JS部分：

  • 获取表单和id为logo的DOM元素：
const oForm = document.forms['logoForm'];
const oLogo = document.getElementById('logo');
  • 为oForm表单添加一个提交事件监听器，当表单被提交时，会触发里面的回调函数：

回调函数

  1. 阻止表单的默认提交行为：页面刷新
 e.preventDefault();
  1. 从表单中获取标题和描述输入字段的值，并使用trim()方法去除两端空白：
const title = this["title"].value.trim();
const desc = this["desc"].value.trim();
  1. 判断title非空时执行下面代码：
  • 构造一个包含title和desc的对象data，准备发送到服务器：
 const data = {
                    title,
                    desc
                }
  • 使用fetch函数向服务器http://localhost:3000/logo发送POST请求：
  1. headers: { 'Content-Type': 'application/json' } 设置请求头，表明发送的数据格式是JSON；
  2. body: JSON.stringify(data); 将data对象转换为JSON字符串作为请求体；
  3. 请求成功，从服务器响应的数据中提取图片URL，并创建一个新的<img>元素；
  4. 设置<img>的src属性为提取的URL，并在其onload事件触发时（即图片加载完毕后），将图片元素添加到页面上id为logo的元素内部。
  // post 提交表单 
                fetch('http://localhost:3000/logo', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    // 请求体 字符串或文件二进制
                    body: JSON.stringify(data);
                })
                    .then(res => res.json())
                    .then(data => {
                        console.log(data);
                        if (data.code == 200) {
                            const { url } = data;
                            const oImg = document.createElement('img');
                            oImg.src = url;
                            oImg.onload = function () {
                                document.getElementById('logo').appendChild(oImg);
                            }
                        } else {
                            console.log('出错了');
                        }
                    })

总代码：

 <script>
        const oForm = document.forms['logoForm'];
        const oLogo = document.getElementById('logo')
        oForm.addEventListener('submit', function (e) {
            e.preventDefault();
            const title = this["title"].value.trim();
            const desc = this["desc"].value.trim();
            // console.log(title, desc);
            if (title) {
                const data = {
                    title,
                    desc
                }
                // post 提交表单 
                fetch('http://localhost:3000/logo', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    // 请求体 字符串或文件二进制
                    body: JSON.stringify(data)
                })
                    .then(res => res.json())
                    .then(data => {
                        console.log(data);
                        if (data.code == 200) {
                            const { url } = data;
                            const oImg = document.createElement('img');
                            oImg.src = url;
                            oImg.onload = function () {
                                document.getElementById('logo').appendChild(oImg);
                            }
                        } else {
                            console.log('出错了');
                        }
                    })
            }
        })
    </script>

后端(.mjs后缀的文件采用node fs模块，不需要用require)

准备工作：

  • 初始化为后端项目，终端输入：
npm init -y
  • 安装第三方库，终端分别输入：
npm i @koa/bodyparser
npm i @koa/cors
npm i dotenv
npm i koa
npm i koa-router
npm i openai
  1. @koa/bodyparser: 这是一个Koa中间件，用于解析HTTP请求的body部分。当客户端发送POST、PUT等请求并带有请求体（比如JSON或表单数据）时，这个中间件可以帮助你轻松地从请求中提取和解析这些数据，使其作为ctx.request.body可用。
  • @koa/cors: 是一个处理跨源资源共享(CORS)的Koa中间件；
  • dotenv: 这个库用于从.env文件加载环境变量。在开发过程中，你可能不希望把数据库密码、API密钥等敏感信息硬编码在代码中，而是存储在环境变量中；
  • koa:Koa使用ES6的async/await语法，使得编写web服务变得更简洁、高效；
  • koa-router: Koa-router是Koa的一个路由中间件，提供了方便的URL路由功能，允许你定义各种HTTP方法（GET、POST等）对应的路由处理函数；
  • openai: 提供一个简单的接口来与OpenAI的服务（如GPT系列、DALL-E等）进行交互。

index.mjs

  • 导入openai、dotenv第三方库：
import OpenAI from 'openai';
import dotenv from 'dotenv';
  • 加载.env文件中的环境变量到Node.js进程中
dotenv.config({
    path: '.env'
});
  • 创建了一个OpenAI客户端实例(.env文件中有一个名为OPENAI_KEY的条目，为OpenAI API密钥)
const client = new OpenAI({
    apiKey: process.env.OPENAI_KEY,
    baseURL: 'https://api.gptsapi.net/v1'
})
  • 定义了一个异步函数main：
  1. 使用await client.images.generate({ ... })调用OpenAI的API来生成图像；
  2. model: 'dall-e-3'：指定了要使用的模型：DALL-E 3，用于根据文本生成高质量图像；
  3. prompt: "A spaceship flying through the universe."：提供了生成图像的文本提示，描述想要生成的图像内容；
  4. n: 1为指定了生成图像的数量，设置为1张；
  5. size: "1024x1024"：设置了生成图像的尺寸，为1024像素宽乘以1024像素高。
const main = async () => {
    const response = await client.images.generate({
        model: 'dall-e-3',
        prompt: "A spaceship flying through the universe.",
        n: 1,
        size: "1024x1024"
    })
    console.log(response.data);
}
  • 执行函数
main()

总代码：

import OpenAI from 'openai';
import dotenv from 'dotenv';

dotenv.config({
    path: '.env'
});

const client = new OpenAI({
    apiKey: process.env.OPENAI_KEY,
    baseURL: 'https://api.gptsapi.net/v1'
})

const main = async () => {
    const response = await client.images.generate({
        model: 'dall-e-3',
        prompt: "A spaceship flying through the universe.",
        n: 1,
        size: "1024x1024"
    })
    console.log(response.data);
}

main()

main.mjs

  • 导入第三方库：
import koa from 'koa';
import Router from 'koa-router'; // 添加路由
import cors from '@koa/cors'; // 跨域
import { bodyParser } from '@koa/bodyparser'; // 解析post请求体
import OpenAI from 'openai'
import dotenv from 'dotenv';
  • 配置环境变量：使用dotenv配置模块从.env文件加载环境变量，获取OpenAI的API密钥：
dotenv.config({
    path: '.env'
});
  • 初始化OpenAI客户端:创建一个OpenAI客户端实例，使用从环境变量中读取到的API密钥和一个假设的OpenAI API基础URL：
const client = new OpenAI({
    apiKey: process.env.OPENAI_KEY,
    baseURL: 'https://api.gptsapi.net/v1'
})
  • 创建koa应用和路由器：
// 网站就是一个app
const app = new koa();
const router = new Router();
  • 使用app.use()挂载中间件，首先通过cors()处理跨域请求，然后是bodyParser()来解析POST请求的请求体：
app.use(cors());
// 挂在post 请求体解析功能
app.use(bodyParser());
  • 定义post路由：接收请求体中的title和desc，构造一个提示字符串，然后调用OpenAI的图像生成API来设计一个App logo，成功时返回生成的logo图片URL，否则返回错误信息：
router.post('/logo', async (ctx) => {
    console.log(ctx.request.body);
    const { title, desc } = ctx.request.body;
    let response;
    try {
        const prompt = `
            你是一位互联网大厂设计师，
            请为应用名为${title},
            功能细节为${desc}的移动端App
            设计一个高端、大气、上档次的logo
        `
        response = await client.images.generate({
            model: 'dall-e-3',
            prompt: prompt,
            n: 1,
            size: "1024x1024"

        })
        ctx.body = {
            code: 200,
            url: response.data[0].url
        }
       
    } catch (err) {
        console.log(err);
        ctx.body = {
            code: 500,
            msg: '出错了'
        }
    }
    console.log(response, '///////////');
})
  • 定义get路由：返回一个index page信息，表示首页：
router.get('/', (ctx) => {
    ctx.body = 'index page';
})
  • 将定义好的路由应用到Koa应用中：
app.use(router.routes())
  • 启动HTTP服务器，监听3000端口，并在启动后打印一条启动消息：
app.listen(3000, () => {
    console.log('server is running at http://localhost:3000');
})

总代码：

// es6 module 模块化,引入koa框架
// 不用require commonjs
// 启动 后端服务
// 引入最火的一个简单的node框架
import koa from 'koa';
import Router from 'koa-router'; // 添加路由
import cors from '@koa/cors'; // 跨域
import { bodyParser } from '@koa/bodyparser'; // 解析post请求体
import OpenAI from 'openai'
import dotenv from 'dotenv';

dotenv.config({
    path: '.env'
});

const client = new OpenAI({
    apiKey: process.env.OPENAI_KEY,
    baseURL: 'https://api.gptsapi.net/v1'
})

// 网站就是一个app
const app = new koa();
const router = new Router();
// 挂载跨域功能
app.use(cors());
// 挂在post 请求体解析功能
app.use(bodyParser());
router.post('/logo', async (ctx) => {
    console.log(ctx.request.body);
    const { title, desc } = ctx.request.body;
  
    let response;
    try {
        const prompt = `
            你是一位互联网大厂设计师，
            请为应用名为${title},
            功能细节为${desc}的移动端App
            设计一个高端、大气、上档次的logo
        `
        response = await client.images.generate({
            model: 'dall-e-3',
            prompt: prompt,
            n: 1,
            size: "1024x1024"

        })
        ctx.body = {
            code: 200,
            url: response.data[0].url
        }
    } catch (err) {
        console.log(err);
        ctx.body = {
            code: 500,
            msg: '出错了'
        }
    }

    console.log(response, '///////////');
 
})
router.get('/', (ctx) => {
    ctx.body = 'index page';
})
// use 加一个什么服务
// 用户通过http请求进来,use里面的函数会被执行
// 请求  中间件  响应 
// router.routes 路由上所有的路由声明加上去
app.use(router.routes())
// 启动http服务 3000端口
app.listen(3000, () => {
    console.log('server is running at http://localhost:3000');
})

运行步骤

  • 右键backend文件夹，点击新建终端

通过AI全栈来实现coze的logo生成

  • 终端输入：
node main.mjs

通过AI全栈来实现coze的logo生成

  • 打开index.html

通过AI全栈来实现coze的logo生成

结语

快去定制logo吧~

通过AI全栈来实现coze的logo生成

转载自:https://juejin.cn/post/7382394009199411219
评论
请登录