一个AI全栈小demo带你走进小白也会用的ai

本文链接：https://blog.csdn.net/weixin_74451003/article/details/139966412

前言

在当今数字化和智能化迅速发展的时代，全栈人工智能（AI）项目成为技术创新和产业升级的重要驱动力。全栈AI不仅涵盖了从数据采集、预处理、模型训练到部署和维护的完整流程，还融合了前端和后端技术，为实现智能应用提供了全面的解决方案。本篇文章将详细介绍一个全栈AI项目的开发过程和关键技术，旨在为读者提供一个全面的视角，了解如何构建和应用全栈AI系统。

项目介绍

这项目的目标是使用OpenAI的API生成定制的图像，这个项目结合了前端和后端技术，实现了一个简单的应用：用户在网页上填写应用的名称和描述，点击提交按钮后，后台调用 OpenAI 的 API 生成一个定制的 Logo 图像，并将生成的图像显示在网页上，让我们逐步解析整个项目的结构和功能：

1.服务器端代码（Node.js）

环境配置和依赖导入

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

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

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

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

使用 Koa 框架搭建服务器，Router 用于定义路由。
@koa/cors 中间件处理跨域请求。
@koa/bodyparser中间件解析 POST 请求体数据。
OpenAI 是用来调用 OpenAI 的 API。
dotenv 用于从 .env文件加载环境变量。

路由处理

  const { title, desc } = ctx.request.body;

  try {
    const prompt = `你是一位互联网大厂设计师，请为应用名为${title}，功能细节是${desc}的移动端app,设计一个高端、大气、上档次的logo`;
    
    const 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 (error) {
    console.error(error);
    ctx.body = {
      code: 500,
      msg: '请求失败'
    };
  }
});

定义 /logo 路由处理 POST 请求，生成 Logo 图像。
使用 OpenAI 发送图像生成请求，根据标题和描述生成相应的图像。
返回生成的图像 URL 或者错误信息。

服务器启动

app.use(bodyParser());
app.use(router.routes());

const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Server is running at http://localhost:${PORT}`);
});

使用 cors 和 bodyParser 中间件。
将路由应用到 Koa 应用中。
监听端口 3000，启动服务器。

2. 客户端代码（HTML + JavaScript）

表单与提交逻辑

 <input type="text" class="form-control" id="titleInput" name="title" placeholder="Bot名称" required>
 <textarea class="form-control" name="desc" id="descInput" placeholder="请输入Bot介绍"></textarea>
 <button type="submit" class="btn btn-primary">生成图标</button>
</form>

表单用于用户输入标题和描述信息。
提交按钮触发 POST 请求生成 Logo 图像。
JavaScript 发送 POST 请求


oForm.addEventListener('submit', function(e) {
  e.preventDefault();
  const title = this['title'].value.trim();
  const desc = this['desc'].value.trim();

  if (title) {
    const data = { title, desc };

    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.onload = function() {
          document.getElementById('logo').appendChild(oImg);
        };
      } else {
        console.log('生成失败');
      }
    })
    .catch(error => console.error('Error:', error));
  }
});

使用 Fetch API 发送 POST 请求到服务器端 /logo 路由。
处理服务器返回的数据，如果成功则创建图像元素并插入到页面中。

项目中使用的工具介绍

API的获取

在写项目的过程中，遇到了个问题卡了很久，之前一直使用的API,也就是调用openAI的关键，无法使用了。由于在国内，没有海外账号，操作起来也是十分麻烦，最终在朋友的安利下使用了这个302ai集成平台提供的API,用下来很稳定，之后也去了解了下该平台，确实不错，在这里跟友友们分享一下。总的来说，最吸引我的还是这个平台的按需付费和国内直连，这里用多少花多少。对于开发者来说，平台提供的api超市很实用，没有门槛，先教友友们要怎么获取API，首先进入工具超市中的API管理，创建一个API 在这里插入图片描述
创建之后，可以在页面最下方看到API的key

获取了key之后，在项目中还需要baseURL，因为这里我们引用的是openAI，所以我们要去获得相关的baseURL,在上一步的页面中点击教程，选择模型之后，红框中的就是baseURL 在这里插入图片描述

全能工具箱

相信友友们在编码过程中或者在生活中总是会遇到各类问题，302ai平台上有一个全能工具箱，包含该平台的所有功能，包括上面提到的API。这里不用创建机器人就可以直接使用，含有助手金额应用商店，十分适合小白上手，适合对ai需求比较大的友友，能够一站式的快捷高效使用多个ai。在这里插入图片描述

机器人

在创建机器人时可以选择大模型，支持市面上所有主流的ai，聊天机器人中除了问答，文档和图片方面的功能也是完全没有问题。在应用机器人中可以体验到GPTs的强大功能，还有绘画机器人。试了一下Midjourney机器人，刚好最近朋友生日，想画一幅画送给朋友，没有灵感，网上资源不怎么合心意。总的来说，机器人交互画面十分友好，响应的十分准确且迅速，绘图质量也挺高，还可以根据结果进一步修改完善，探索功能中还包含了很多不错的画作，喜欢艺术以及绘画的友友可以试试在这里插入图片描述

工具

工具超市中包含多种api工具，其中还有工具搜索和分类设计，界面设计还是很适合小白的，这里我带大家使用其中一个----AI电商场景图生成，个人还是觉得很实用，现在电商如火如荼，人人都可以无门槛创业，借助AI更能够乘风而起，可以利用AI快速生成新产品的展示图，自动生成高质量的产品图和广告图，减少对人工设计的依赖，302ai平台上只需上传图片，能够一键更换场景，还可以自定义光源。在这里插入图片描述
打开之后，这里是需要创建一个机器人的，按自己喜好设置

我们一起来用用，看看效果，只需要简单几步，就可以生成，页面采取的是非对话的形式，十分友好，相信小白也会使用
看看效果图，光影结构处理的很好，看来可以生活中大量使用了，简单的页面让小白也能使用ai 在这里插入图片描述