手写logo随机生成

2024 年 6 月 24 日13:17:38JavaScript教程评论74字数 7370阅读24分34秒阅读模式2024 年 6 月 24 日

随着AI技术的普及与深化，AI全栈开发作为一种高度整合前后端技术与AI应用能力的开发模式。本文将围绕“手写Logo随机生成”这一主题，深入浅出地介绍AI全栈开发的基本概念、关键技术点，以及如何通过实战项目融合前端、后端以及AI技术，创造一个既富有创新又具有实用价值的应用实例。

AI全栈开发概述

AI全栈开发是指开发者不仅要掌握前端（如网页或移动应用界面）和后端（如服务器逻辑与数据库交互）的技术，还要具备运用AI算法和框架的能力，从而在项目中实现智能化的功能。这一过程涵盖了数据处理、模型训练、API设计、用户界面构建等多个环节，要求开发者具备全方位的技术栈和跨领域的协作能力。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16045.html

前端技术基础

前端是用户直接交互的部分，优秀的前端设计能够极大提升用户体验。在“手写Logo随机生成”项目中，我们使用了Bootstrap CSS框架，它提供了预设的样式和组件，帮助开发者快速搭建响应式页面。例如，通过container、row、col类来实现灵活的网格布局，以及HTML5表单元素增强功能，如placeholder占位符和required必填属性，这些都显著提高了表单的易用性和交互性。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16045.html

代码示例：

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">Bot名称</label>
                        <input type="text" class="form-control" id="titleInput" name="title" placeholder="请输入名称"
                            required>
                    </div>
                    <div class="form-group">
                        <label for="titleInput">Bot功能介绍</label>
                        <textarea name="desc" class="form-control" row='3' id="descInoput"></textarea>
                    </div>
                    <div class="form-group">
                        <button name="logoBtn" type="submit" class="btn btn-primary">生成LOGO</button>
                    </div>
                </form>
                <div class="col-md-6" id="result">

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

解释

代码亮点文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16045.html

响应式布局: 使用了Bootstrap框架，通过.container, .row, 和 .col-md-6 col-md-offset-3等类实现了响应式设计。这使得页面能够在不同屏幕尺寸的设备上自适应展示，提供了良好的用户体验。
表单结构清晰: 表单使用了.form-group包裹每个输入元素，保持了代码的组织性和可读性。这对于维护和后续开发非常有利。
用户友好: 输入框设置了placeholder提示信息，帮助用户理解需要输入的内容。同时，对Bot名称的输入框应用了required属性，确保数据的有效性，减少了后台处理无效数据的可能性。
交互性: 通过生成LOGO，表单提供了明确的用户交互点。用户完成输入后，可以直接点击按钮来触发后端处理或前端的JavaScript逻辑，实现Logo的生成。
动态内容预留:

这一部分没有直接填充内容，而是预留了一个ID为“result”的div，通过JavaScript动态地在这个区域显示生成的Logo。这样的做法有利于页面的性能优化和内容的实时更新，提升了页面的动态交互能力。

复制代码

<script>
        // forms是所有表单的集合，可以按名字来获取
        const oForm = document.forms['logoForm'];
        oForm.addEventListener('submit', function (event) {
            event.preventDefault(); // 阻止表单的默认提交行为
            const title = this['title'].value.trim();
            if (!title) return // html5 有的不支持，两套方案
            const btn = this['logoBtn'];
            btn.disabled = true;
            const desc = this['desc'].value.trim();

            // HTTP协议
            // 请求行 localhost:3000/logo POST
            // 请求头 Content-Type: application/json;charset=UTF-8
            // 请求体 
            // 前后端交互的数据格式是json
            // 输出的是二进制或字符串
            let data = {
                title,
                desc
            };
            fetch('http://localhost:3000/logo', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8'
                },
                body: JSON.stringify(data)
            }).then(res => {
                console.log(2);
                return res.json()
            })
            .then(data => {
                btn.disabled = false;
                console.log(1);
                if(data.status == 200){
                    let url = data.url
                    document.getElementById("result").innerHTML += `<img src="${url}" >`;
                }
            })
        });
    </script>

解释

代码亮点文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16045.html

数据验证：在提交表单前，通过this['title'].value.trim()获取并清理标题输入值，然后检查是否为空，这是一种基本但重要的前端验证，有助于减少不必要的服务器请求。
按钮状态管理：在发起请求前后改变按钮的disabled状态，防止用户重复点击提交，这是提升用户体验的一个小细节，也保证了数据的一致性。
Fetch API使用：采用现代化的fetch函数进行HTTP请求，替代了老旧的XMLHttpRequest，代码更简洁易读。通过设置请求方法(method: 'POST')、请求头(headers)以及请求体(body)，向服务器发送JSON格式的数据，符合现代Web开发的最佳实践。
动态内容更新：根据服务器响应动态地在页面上插入图片(<img src="${url}" >)，使用模板字符串方便地构造HTML片段并插入到DOM中，实现了无刷新的页面更新效果。

后端技术与架构

后端是支撑前端逻辑运行的后台服务，它负责处理业务逻辑、数据库操作和API接口设计。在Node.js环境下，使用Koa框架构建轻量级服务，利用其简洁的语法和强大的中间件支持，实现路由管理、跨域处理等功能。例如，通过@koa/router定义API路径，如/logo接口用于接收前端传来的Logo生成请求；@koa/cors中间件解决跨域问题，确保前后端分离架构下的通信畅通无阻。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16045.html

代码示例：文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16045.html

复制代码

router.post('/logo', async (ctx) => {
    try {
        let { title, desc } = ctx.request.body
        console.log(title, desc);
        const prompt = `
            你是一位资深的设计师，
            请你为标题为${title}，功能为${desc}的移动端app应用设计一款logo，
            要求，高端大气上档次。
        `
        const response = await client.images.generate({
            model: 'dall-e-3',
            prompt,
            n: 1
        })
        ctx.body = {
            status: 200,
            url: response.data[0].url
        }
        console.log(response.data[0].url);
    } catch (error) {
        ctx.body = {
            status: 500,
            msg: '服务器错误'
        }
    }
})

解释

构造提示文本(prompt): 使用解构出来的title和desc，构造一个描述性的字符串(prompt)，这个字符串作为指令给到AI模型，告诉它要设计一个怎样的Logo。例如，如果title是"智能助手"，desc是"提供日常信息查询服务"，那么生成的prompt就会是要求设计一个针对名为"智能助手"，具有日常信息查询功能的高端大气上档次的移动端APP Logo。
调用OpenAI API生成图片: 接下来，使用之前初始化的OpenAI客户端(client)调用images.generate方法。这个方法需要几个参数，其中model指定了要使用的模型（这里是'dall-e-3'，OpenAI的一个图像生成模型），prompt就是前面构造的描述文本，而n: 1表示只需要生成一张图片。
处理响应并返回结果: 当从OpenAI API得到响应后，从中提取第一个生成的图片的URL(response.data[0].url)，然后把这个URL连同HTTP状态码200一起作为响应体(ctx.body)返回给前端。这意味着前端将会收到一个成功的响应，其中包含新生成Logo的直接链接。
错误处理: 如果在尝试生成图片的过程中发生了任何错误（例如网络问题、API调用限制、OpenAI服务不可用等），则会捕获这个错误并在catch块中处理。这时，服务器会返回一个HTTP状态码500（代表服务器内部错误）以及一个简短的错误信息"服务器错误"。

实战项目

在这个项目中，前端用户通过一个简洁的表单提交Logo的名称和功能介绍，表单提交后通过JavaScript的fetch API向后端发送POST请求，携带JSON格式的数据。后端Koa应用接收到请求后，使用OpenAI客户端根据用户提供的信息生成Logo图像，并以JSON格式返回图像的URL。前端接收到这个URL后，在页面上动态加载显示生成的Logo。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16045.html

完整代码如下：文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16045.html

html

复制代码

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

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

<body>
    <!-- 布局 -->
    <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="请输入名称"
                            required>
                    </div>
                    <div class="form-group">
                        <label for="titleInput">Bot功能介绍</label>
                        <textarea name="desc" class="form-control" row='3' id="descInoput"></textarea>
                    </div>
                    <div class="form-group">
                        <button name="logoBtn" type="submit" class="btn btn-primary">生成LOGO</button>
                    </div>
                </form>
                <div class="col-md-6" id="result">

                </div>
            </div>
        </div>
    </div>
    <script>
        // forms是所有表单的集合，可以按名字来获取
        const oForm = document.forms['logoForm'];
        oForm.addEventListener('submit', function (event) {
            event.preventDefault(); // 阻止表单的默认提交行为
            const title = this['title'].value.trim();
            if (!title) return // html5 有的不支持，两套方案
            const btn = this['logoBtn'];
            btn.disabled = true;
            const desc = this['desc'].value.trim();

            // HTTP协议
            // 请求行 localhost:3000/logo POST
            // 请求头 Content-Type: application/json;charset=UTF-8
            // 请求体 
            // 前后端交互的数据格式是json
            // 输出的是二进制或字符串
            let data = {
                title,
                desc
            };
            fetch('http://localhost:3000/logo', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8'
                },
                body: JSON.stringify(data)
            }).then(res => {
                console.log(2);
                return res.json()
            })
            .then(data => {
                btn.disabled = false;
                console.log(1);
                if(data.status == 200){
                    let url = data.url
                    document.getElementById("result").innerHTML += `<img src="${url}" >`;
                }
            })
        });
    </script>
</body>

</html>

解释

node后端

复制代码

import Koa from 'koa' // 后端极简框架
import Router from 'koa-router'
import cor from '@koa/cors'
import { bodyParser } from '@koa/bodyparser'
import OpenAI from "openai";

const client = new OpenAI({
    apiKey: 'your-api-key',
    baseURL: 'https://api.302.ai/v1'
})

// web 服务就是一个app
const app = new Koa()
const router = new Router()

app.use(cor())
app.use(bodyParser())
router.get('/', (ctx) => {
    ctx.body = '首页'
})

router.post('/logo', async (ctx) => {
    try {
        let { title, desc } = ctx.request.body
        console.log(title, desc);
        const prompt = `
            你是一位资深的设计师，
            请你为标题为${title}，功能为${desc}的移动端app应用设计一款logo，
            要求，高端大气上档次。
        `
        const response = await client.images.generate({
            model: 'dall-e-3',
            prompt,
            n: 1
        })
        ctx.body = {
            status: 200,
            url: response.data[0].url
        }
        console.log(response.data[0].url);
    } catch (error) {
        ctx.body = {
            status: 500,
            msg: '服务器错误'
        }
    }
})




app.use(router.routes())
app.listen(3000, () =>
    console.log('server listen on port http://localhost:3000')
)

解释

运行成果：文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16045.html

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

总结

本项目"手写Logo随机生成"充分展示了AI全栈开发的魅力，通过整合前端、后端与AI技术，创造了一个既富有趣味性又具备实用价值的应用实例。以下是项目亮点及OpenAI技术应用的总结：

亮点总结

跨领域技能整合：项目要求开发者熟练掌握从前端界面设计到后端逻辑处理，再到AI算法应用的全方位技能，体现了AI全栈开发者的全面性。
用户交互体验优化：前端使用Bootstrap框架构建响应式页面，确保了不同设备上的良好显示效果。通过JavaScript增强表单验证和动态内容加载，提高了用户交互的流畅度和即时反馈。
前后端分离架构：采用Node.js与Koa构建后端服务，实现了轻量级、高效的API设计，同时利用CORS中间件保障了跨域通信，使得前后端可以独立开发与部署。
AI技术的创新应用：核心亮点在于集成OpenAI的DALL-E模型，该模型能够根据用户提供的文字描述自动生成具有创意的Logo图像。这种基于自然语言指令的图像生成技术，展现了AI在创意设计领域的强大潜力。
实战案例价值：此项目不仅是一次技术演练，其成果——一个能根据用户需求即时生成个性化Logo的工具，对于品牌设计、UI/UX设计等领域具有实际应用价值，能够激发更多创意灵感，提高设计效率。

OpenAI技术应用

DALL-E 3模型：作为OpenAI的旗舰级图像生成模型，DALL-E 3以其出色的创造力和理解力，能够将自然语言描述转化为独特的视觉图像。在该项目中，它根据前端提交的Bot名称和功能介绍，自动生成与之匹配的Logo设计，极大地拓展了设计的边界和可能性。
API集成与调用：通过OpenAI的官方SDK，项目后端能够无缝接入DALL-E 3的服务，简化了复杂的API调用流程，让开发者专注于实现业务逻辑，而不必深究底层通信细节。

历史上的今天

6 月

手写logo随机生成

AI全栈开发概述

前端技术基础

代码示例：

后端技术与架构

实战项目

总结

亮点总结

OpenAI技术应用

历史上的今天

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

快乐学习JavaScript中的类型判断

用electron写个浏览器给自己玩

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

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

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

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

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

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

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

加载中...

发表评论

热门搜索

AI全栈开发概述

前端技术基础

代码示例：

后端技术与架构

实战项目

总结

亮点总结

OpenAI技术应用

历史上的今天

发表评论