当你把所学都都结合起来时，就达到了新的高度，想要成为全栈工程师，往往要将前后端串联起来，如果你还会把AI植入你的项目里，那么用户体验就会得到极大的改变与创新，今天我们就来聊一聊一个AI全栈的小demo......传统的用户上传头像的体验是自己选择图片，本地上传，而结合AI之后，又会是一个怎么样的全新体呢？

在开始之前，你应该具备的知识前提：OpenAI数据分析的实例，体验Js中的模块化 - 掘金 (juejin.cn)，OpenAI的引入与实例化。

一、需求分析

我们要仿制coze的头像生成功能。根据Bot名称与功能介绍，点击AI生成头像，输出相应的图片。

前端：

我们应该要有一个前端页面来模拟这个小组件，用两个输入框让用户输入，提交按钮模拟点击AI生成头像功能。
需要往后端传递数据，放回图片。

后端：

使用前端传来的数据，结合OpenAI处理后，返回图片，这里应该是图片的URL。

开始动手开始动手！！！

二、业务实现

我们先来处理简单的前端业务

引入 <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">使用bootstrap写好的Css快速将页面的效果渲染出来。

ini 复制代码

    <div  class="container">
        <div class="page">
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <form name="logoForm" action="">
                        <div class="form-group">
                            <label for="titleInput">Bot名称:</label>
                            <input type="text" id="titleInput" 
                            name="title"class="form-control" 
                            placeholder="请输入名称:"
                            required>
                        </div>
                        <div class="form-group">
                            <label for="descInput">Bot功能介绍:</label>
                            <textarea name="desc" id="descInput" 
                            row = "3" class="form-control">
                            </textarea>
                        </div>
                        <div class="form-group">
                            <button type="primary"
                            name="loginButton"
                            class="btn btn-primary">生成LOGO</button>
                        </div>
                    </form>
                </div>
                <div class="col-md-6" id='result'>

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

然后在按钮上添加事件监听。并阻止了表单的默认提交的行为，这样就不会重新加载页面。
获取输入框的值，并判断是否为空。确保用户输入了值
将title和desc，名称与功能介绍存入data对象中，并且转化为JSON格式，准备数据发送。(ES6中，key和value相同时可以只写一次)
使用fetch ApI项http://localhost:3000/logo发起POST请求，请求头设置Content-Type为application/json，表示数据发送的格式是JSON。请求体中是准备好的JSON字符串。
.then()处理异步响应，将响应体(返回的数据)转化为JSON格式，打印调试，放回的数据中有state属性，值为200(表示成功)，则可以拿到后端处理好返回的url图片地址，并设置显示在页面上。

xml 复制代码

    <script>
        const oForm = document.forms['logoForm']
        oForm.addEventListener('submit',function(event){
            event.preventDefault()//阻止默认提交行为
            const title = this['title'].value.trim()
            if(!title) return //html 有的不支持，两套方案，考虑兼容
            const btn = this["loginButton"]
            btn.disabled = true
            const desc = this['desc'].value.trim()
            let data = {
                title,
                desc
            }
            console.log(JSON.stringify(data));
            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);
                btn.disabled = false 
                if(data.status == 200){
                    let url = data.url
                    document.getElementById('result').innerHTML += 
                    `<img src ="${url}" alt = "">`
                }
            })
        })
    </script>

前端业务处理完成，我们来到后端。

开始后端的处理

在项目文件夹下新建backend文件，用于处理后端。
npm init -y 进行初始化。使用mjs模块化文件处理业务。
模拟后端服务器 @koa/body-parser中间件，用于解析HTTP请求体，可以帮助解析各类型的请求体，例如JSON、URL编码数据、multipart/form-data等。
- 安装Koa和@koa/body-parser命令行输入npm i koa @koa/body parser
- 引入模块并初始化。
引入OpenAI，npm i openai，并实例化。

javascript 复制代码

import Koa from 'koa' 
import Router from 'koa-router'
import { bodyParser } from '@koa/bodyparser'
import OpenAI from "openai";
import cors from "@koa/cors"
const client = new OpenAI({
    apiKey:'sk-wpw49pKFIXuQ8bHJL1wJzUCHME30WCo3a56GF2IkSfESzqXh',
    //gptsapi 会帮我们做openai的请求转发
    baseURL:'https://api.302.ai/v1'
});
// web服务就是一个app
const app = new Koa()
const router = new Router()//路由实例
//use->挂载一个服务
//函数 ctx是一个对象，里面有request和response
app.use(bodyParser())
app.use(cors())

这里使用跨资源共享中间件，允许服务器接收和回应来自不同源的请求，解决跨域问题。

定义路由处理器，用于监听POST请求至/logo路径，接收请求体中的title和desc，用于OpenAI设计Prompt生成头像。
let {title,desc} = ctx.request.body将请求体中的属性解构出来。
定义OpenAI的Prompt，使用es6的字符串模板，将title和desc以变量的形式拼接字符串，便于生成满足用户需求的头像。
异步调用OpenAI中的client.images.generate，使用model:'dall-e-3'大模型，用于生成图片。
生成图片成功，将ctx.body响应 status: 200, url:response.data[0].urlstate属性设为200，用于前端判断返回是否成功，再将url设置为OpenAI的返回第一条数据中的url。(AI处理后会返回图片地址url)，失败则设置state为500，并打印错误信息。

router.post('/logo',async 复制代码

    console.log(ctx.request.body,'/////');//打印请求体内容
    let {title,desc} =  ctx.request.body
    console.log(title,desc);
    const prompt =`
1. 它是一位资深的设计师
2. 请它为标题明为${title}，功能为${desc} app应用设计一款logo
3. 要求 高端大气上档次`    
    try{
        const response = await client.images.generate({
        model:'dall-e-3',
        prompt,
        n:1,
    })
        ctx.body={
            status: 200,
            url:response.data[0].url
        }
    } catch(error) {
        ctx.body = {
            status : 500,
            error:error.message
        }
    }
})
router.get('/',ctx=>{
    ctx.body = '首页'
})

app.use(router.routes())

app.listen(3000,()=>{
    console.log('server is running at http://localhost:3000');
})

-访问根路径时，首页字符串作为响应体，测试端口是否正常。

app.use()挂载路由中间件，用于分发请求。
设置监听端口为3000。

整体思路： 在前端两个输入框中输入需求发送POST请求3000端口，3000端口处理请求体，拿到Bot名称和功能介绍，使用OpenAI生成符合用户需求的图片，得到返回的url。然后设置响应体中的state与url，用于前端判断返回数据成功并拿到url。

最终模拟实现效果

由于生成图片时间过长，输入文本框与点击生成过程在这不加展示，我们直接看到图片生成的结果。

今天的AI全栈小demo分享到这啦，感兴趣的伙伴可以去尝试一下，如果需要OpenAI的key密钥，欢迎在评论区留言。

AI全栈demo，根据需求生成Bot头像

一、需求分析

二、业务实现

我们先来处理简单的前端业务

开始后端的处理

最终模拟实现效果