2024 年 6 月 20 日15:33:12JavaScript教程评论70字数 5038阅读16分47秒阅读模式2024 年 6 月 20 日

在AI全栈项目中，前端负责用户提供直观的交互界面，接收用户输入，展示AI处理的结果，并与后端进行数据交换；后端负责与AI模型进行交互，处理复杂的计算任务，并管理数据的存储与检索;AI模型是整个项目的“大脑”，负责处理和分析数据，提供预测、分类、生成等内容。

了解如何将前端、后端和AI整合到一个项目中可以帮助你了解和走上AI全栈的道路。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15927.html

AI + 前端 + 后端的实战演示：依据图片的名称以及对图片中内容的描述来生成图片。通过这个实战演示深入领略 AI 全栈的迷人魅力以及三者的整合。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15927.html

AI全栈实战

在这个项目中，我们可以创建两个文件frontend和backend分别用于前后端代码的编写。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15927.html

frontend（前端）

前端实现的页面虽然有点简陋，但是它也不是毫无优势，它的优势在于一个字，那就是——快。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15927.html

文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15927.html

通过引入bootstrap的css样式表，可以快速实现页面的搭建，在没有特殊要求的情况下可以不用单独设置css样式。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15927.html

html部分

通过将链接添加到 HTML 文件中的<link>标签中，可以在网页中引入 Bootstrap 的样式表，从而使用 Bootstrap 提供的样式和组件来美化和构建页面。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15927.html

html

复制代码

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

解释

主体部分可以分成两个部分，一个是表单部分，一个是图片部分。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15927.html

其中的表单部分是最重要的部分，它主要是由一个图片名称的文本输入框、一个图片内容介绍的多行文本输入框和一个生成图片的按钮组成，可以通过按钮的提交事件触发JavaScript处理并将用户输入的信息通过post请求发送给服务器。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15927.html

另外一个部分是用于存放生成的图片，只需要在服务器给出的正确响应中提取图片URL，然后动态添加一个img标签展示图片。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15927.html

html

复制代码

<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">图片的名称：</label>
                    <input type="text" class="form-control" id="titleInput" name="title" placeholder="请输入图片的名称"
                           requried>
                </div>
                <div class="form-group">
                    <label for="descInput">图片中的内容介绍：</label>
                    <textarea class="form-control" name="desc" id="descInput" placeholder="请描述图片中的内容">
                    </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>

解释

JavaScript部分

JavaScript逻辑：

获取所有表单元素，用于获取用户输入的信息和设置监听提交事件的监听器。
在监听器的事件处理函数中：
1. 阻止默认的页面刷新行为；
2. 监听器的this指向所有表单元素，可以通过this获取用户在页面输入框输入的信息；
3. 在成功获取用户输入信息后，将信息进行整合后通过post提交给服务器；
4. 在向服务器发送完信息并得到了正确的响应后，创建一个<img>元素，并且从后端服务器的响应中获取到的图片URL赋值给src属性，最后在图片成功加载出来后将<img>元素添加到页面上。

JavaScript

复制代码

const oForm = document.forms['logoForm']
const oLogo = document.getElementById('logo')
oForm.addEventListener('submit', function (event) {
    event.preventDefault()
    const title = this["title"].value.trim()
    const desc = this["desc"].value.trim()
    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 => {
            if (data.code == 200) {
                const { url } = data
                const oImg = document.createElement('img')
                oImg.src = url
                oImg.className = 'col-md-6 col-md-offset-3'
                oImg.onload = function () {
                    document.getElementById('logo').appendChild(oImg)
                }
            } else {
                console.log('出错了');
            }
        })
    }
})

解释

其中onload 是一个事件处理器，用于在Web开发中指定当一个资源完成加载后所要执行的脚本或函数。可以通过onload实现在图片加载完成后添加到DOM中。

backend（后端+AI）

通过Node.js搭建项目的后端，并且通过Node.js引入AI功能。

初始化项目

初始化一个Node.js后端项目:

csharp

复制代码

npm init -y

解释

安装模块

安装该项目需要的模块：

less

复制代码

npm i koa
npm i koa-router
npm i @koa/cors
npm i -g nodemon
npm i @koa/bodyparser
npm i openai
npm i dotenv

解释

看看安装的这些模块分别有什么作用：

koa:用于创建Web服务器实例。它的设计思想是通过中间件的串联，使得编写web服务变得简洁。
koa-router:用于定义应用的路由逻辑。Koa-Router 是 Koa 框架下的一个路由中间件，用于解析 HTTP 请求的 URL 并将请求分发到不同的处理函数。
@koa/cors:用于处理跨域资源共享策略，确保不同源的前端应用能够顺利向服务器发起请求，它也是Koa的中间件。
nodemon:一个实用的工具。它会监听项目的变化，并且在文件修改后自动重启Node.js服务，可以避免每次修改后需要重新启动服务的操作。
@koa/bodyparser:用于解析HTTP请求体，会将请求体解析为JavaScript可操作的对象，并挂在ctx.request.body上。
openai:提供各种AI服务。通过这个库，开发者可以在自己的项目中集成 OpenAI 的服务，实现诸如自然语言处理、图像生成等多种功能。
dotenv:将一些敏感信息进行集中存储在一个 .env 文件（自己创建），然后在应用启动时加载这些环境变量到 process.env 中，从而使得配置更加灵活和安全。

小tips：中间件就像是夹在请求对象和响应对象中间的中间人，它可以对请求进行预处理或对响应进行后处理，甚至根据条件完全改变请求的流向。

引入模块

通过ES6模块使用 import 和 export 语句来导入和导出模块，替代了CommonJS模块。

javascript

复制代码

import Koa from 'koa';
import Router from 'koa-router';
import cors from '@koa/cors';
import { bodyParser } from '@koa/bodyparser';
import OpenAI from 'openai';
import dotenv from 'dotenv';

解释

获取API Key

如果没有API Key可以通过以下方法获得。

注意：不要发给别人，因为每次使用都会扣钱的；不要通过nodemon执行文件，因为在修改文件的时候会自动运行。别问我为什么会知道，问就是心在滴血。

API Key获取传送门——WildCard | 一分钟注册，轻松订阅海外软件服务

选择API随心用。

然后开始忍痛割爱。

主体部分

在创建的.env文件中存储获得到的API Key。

javascript

复制代码

OPENAI_KEY='你的API Key'

解释

加载环境变量，从.env文件中加载环境变量到process.env对象中。

javascript

复制代码

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

解释

创建一个用于和OpenAI服务交互的客户端对象。从环境变量里获取API Key，并且通过https://api.gptsapi.net/v1这个代理间接访问OpenAI的API服务。

javascript

复制代码

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

解释

使用Koa框架和Koa-Router中间件分别创建Koa应用实例和Koa-Router实例。这样就有了一个基础的Koa应用框架，以及一个路由系统，接下来可以开始定义具体的路由处理逻辑，如处理post请求，设置中间件处理跨域、请求体解析等。

javascript

复制代码

const app = new Koa();
const router = new Router();

解释

在Koa应用中启用跨域资源共享功能和请求体解析功能。

javascript

复制代码

app.use(cors())//跨域资源共享
app.use(bodyParser())//请求体解析

解释

定义一个处理/logo路径的post请求的路由处理函数。它接收前端向后端发送的post请求体中的title 和 desc，并且用这些信息构建一个提示指令，然后调用 DALL·E-3的接口生成图片。根据生成结果，返回相应的响应状态码和图片 URL 或错误消息。

javascript

复制代码

router.post('/logo', async (ctx) => {
    const { title, desc } = ctx.request.body;
    let response;
    try {
        const prompt = `
            你是一位世界顶级画家，
            请画一幅图片名称为${title},
            图片内容细节为${desc}的画
        `
        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: '出错了'
        }
    }
})

解释

将之前定义的路由 router 注册到应用 app 中，并且监听3000端口，当服务器启动时在控制台打印出提示信息。

javascript

复制代码

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

解释

效果展示

前端、后端和AI的整合

前端收集用户输入：用户在网页上输入信息或上传文件。
前端发送请求：通过Ajax/Fetch API将用户数据发送到后端。
后端处理请求：后端接收到数据后，调用AI模型进行处理。这可能包括数据预处理、模型推理等步骤。
AI模型执行任务：模型根据输入执行预测、生成图像、翻译等任务。
后端封装结果：后端将模型输出的数据（如JSON、图像URL）封装成响应。
前端接收并展示：前端接收到后端响应后，解析数据并以合适的格式（如显示图像、文本信息等）呈现在用户界面上。

历史上的今天

6 月

【JavaScript教程】AI全栈实战：个性化图片生成

AI全栈实战

frontend（前端）

html部分

JavaScript部分

backend（后端+AI）

初始化项目

安装模块

引入模块

获取API Key

主体部分

效果展示

前端、后端和AI的整合

历史上的今天

可视化图表, Web工作流,拖拽搭建,文档编辑, 这款开源项目通通帮你解决!

快乐学习JavaScript中的类型判断

用electron写个浏览器给自己玩

如果不考虑失业，最推荐学哪几门编程语言？

照片裁剪✂✂✂-基础裁剪、裁剪器裁剪、固定规格裁剪、不规则裁剪

不了解事件循环EventLoop的不是一个好前端er

你真的了解JavaScript的运行机制吗？

这些实用工具函数都撕不明白还敢说自己是高级前端

JS性能优化之防抖节流的“妙用”：实战篇

告别手动导入：Webpack的require.context自动化解决方案

加载中...

发表评论

热门搜索

AI全栈实战

frontend（前端）

html部分

JavaScript部分

backend（后端+AI）

初始化项目

安装模块

引入模块

获取API Key

主体部分

效果展示

前端、后端和AI的整合

历史上的今天

发表评论