• 首页
• 茶烟酒
• 列表
• 正文

这次不从零了五万字带您,从负零玩转腾讯AI绘画图像生成搭建前后端分离项目腾讯云开发者社区

2024-06-17 13:44:29

387 167

技术选型:使用了前端Vue3+Vite来搭建前端架构.后端使用Java语言的SpringBoot3框架来搭建服务.最后我会使用语音系统在用户生成完毕图片后生成语音提醒生成成功(因为如果图片质量较高生成是要有一定的耗时的!!!!)

前端效果演示

目前训练营更新了五节课,但是都是理论知识点.

在学完之后赠送了我免费的API介入和在线平台免费体验的次数各50次

接下来我们使用赠送的API来自己对接一个随便玩玩,在此之前我们先体验一下在线的

智能文生图（Text-to-ImageGeneration）是人工智能生成内容（AIGC）的一个主要方向。它是一种前沿的图像生成方法，通过输入文字描述，即可生成相对应的图片。

文生图技术在内容生产等领域有着广泛的应用前景，例如艺术创作、设计、媒体等。

以下是一些常见的应用场景：

智能文生图可以应用于各种需要生成图像的场景，提高生产效率、降低成本

风格单选（建议）：让一张生成图具备某一种风格的特征，为提高效果稳定性，建议选择且只选择一种风格。取值示例：如果您想生成一张水墨画风格的图片，请在下表中找到水墨画对应的风格编号为101，向Styles传入："101"。

风格多选（不建议）：实际使用中发现对同一张图片叠加多种风格容易导致生成效果不稳定，因此，为了保障较好的效果，如果您在一次调用中同时传入了多个风格编号，接口将自动取第一个风格编号作为实际输入。例如您传入"101","102","103"，将只取101。

官方建议我们进行风格的单选,后面我们也就搞单选就完事了

请求频率限制为1次/秒,别搞快了我们就3秒一次就完事了

注意:

如果选择“不限定风格”，模型将不固定生成的风格，大部分情况下将生成写实图片，也可能随机生成其他风格，此时您可以在prompt中输入风格特征描述来自定义风格，例如“一只小狗，xx风格”。

挂关键词:3D,程序员在加班改BUG,在公司

效果、人物、场景

智能图生图是一种利用人工智能技术，根据给定的图片和提示词生成新的图片的过程。在这个过程中，AI会学习参考图片的信息，如颜色、纹理等，并结合提示词生成与参考图片相似但具有不同细节和内容的新图片。

图生图的原理是通过“加噪”和“去噪”的过程，使AI能够从参考图片中获取特征，并将其反映到最终生成的图片中。这使得生成的图片与参考图片具有足够的相似性，同时也具有新的细节和内容。

智能图生图的应用范围广泛，可以用于创作漫画、插画、设计等，也可以用于图像修复、去水印等场景。

和前面的文生图一样的处理方式，只是传递的风格有限，图生图目前仅支持如下

好了我们已经了解了文生图和图生图的一些注意事项和参数就行,还是刚才的页面我们直接进去API调试

我们点击接口文档看看咋对接

一般这种腾讯云都会有API调试器的所以我们稍微的过一下这个接口文档我们直接去API调试器去玩

这里调试好直接运行就完事了

我们可以看到输入参数很多但是具体可以实现图片生成的参数就一个其他的都是对其进行优化接下来我们来看看这些参数的意思吧,Prompt文本描述是必须传递的!!!

我们输入Prompt参数旁边的代码生成器就已经把Demo搞好了

我们点击旁边的在线调用按钮发起生成测试通过API发送请求等同于真实操作，请小心进行

请求成功没毛病返回了以下的数据结构其中ResultImage就是我们的图片信息,我们访问看看

data:image/jpeg;base64,加ResultImage返回的base64数据

他的作用为标识内容设置。默认在生成结果图右下角添加“图片由AI生成”字样，您可根据自身需要替换为其他的标识图片LogoParam里面需要传递的是一个对象LogoRect

名称

类型

必选

描述

X

Integer

否

左上角X坐标

Y

左上角Y坐标

Width

方框宽度

Height

方框高度

生成的图片返回给我URL形式的,上面我已经说过了给RspImgType参数改成url他默认是Base64

返回图像方式（base64或url)，二选一，默认为base64。url有效期为1小时

如果想右下角计算方法就是你需要生成的图片大小-你水印图片的大小

例如:768:768768-71(水印宽)X轴、768-20(水印高)Y轴

反正看你想咋调整了随便搞哈哈哈

经过上面的学习、调试我们就已经掌握基本的逻辑了现在我们开始对接搞一个我们自己的服务玩玩

文本生成图片的对接核心代码记得保存一下下哦

需求:

使用AIGC绘画API搭建后台服务调用,使用Java语言操作

目前我是打算先搞后端把接口都调通打算搞个前端来配合接口来玩

我们使用SpringBoot3来直接搭建Java应用打开IntelliJIDEA推荐这个嗷其他的不行!!!!

本次使用的是SpringBoot3+JDK17最低版本JDK17其他的就不行了,你们也可以搭建SpringBoot2的都一样

目前我们就先搞这三个其他的后面在加

我这里就修改了下配置文件的格式我喜欢DSL格式的看你们自己

com.tencentcloudapitencentcloud-sdk-java3.1.923密钥先去腾讯云控制获取一下密钥信息

接下来我们把我们的单元测试进行改造为工具类

这段代码后面都会用到所以我们直接提取出来就完事了

要在静态方法里面调用IOC容器的bean对象PostConstruct在构造函数执行之后执行。可以方便的把注入的bean对象给到静态属性

就是使用的时候需要编写去IOC容器拿Bean的步骤

看看我们原先写的单元测试代码也就组装请求参数的这个地方自定义一下前端来传递参数就行

前面我们看到了那么多的请求参数,实际上我们经过测试也就这些满足我们的需求了

我进行了单独的处理了一下字段信息

实际上我们需要前端传递的参数为:

文本描述:prompt

反向文本描述:negativePrompt

生成图片的风格:styles这个腾讯sdk是一个字符串数组但是官方建议单个所以我们就直接传递单个就行

生成的图片分辨率:resolution这个参数看下面的注释哦,根据前端选择对应的分辨率来生成

返回的格式:rspImgTypeurlorbase64。这个我就在代码层面钉死了为url其实这个也可以不要

效果图

我们在上面已经将后端服务完完全全的搞完了(还差图生图也很简单感兴趣的同学可以自己发挥前端页面我是已经给大家准备好了!!!贴心吧)

废话不多说直接开始我们的前端搭建

我这里提供两种方式一个是直接下我的脚手架进行页面开发一个是你自己创建项目开发

使用NPM:

npmcreatevite@latest使用Yarn:

yarncreatevite使用PNPM:

pnpmcreatevite我这里就使用NPM来安装

注意:第一次可能会弹出是否继续直接Y即可

运行成功后会出现如下界面

可以看到我已经写好了菜单栏了,主要是这个简单而且就这个东西没必要你们去写了因此我还非常非常非常非常简单的录制了个讲解视频可能说的也不咋好将就看吧第一次录制自己讲解的....哈哈哈

介绍一下我们的老朋友了ElementPlus组件库,我们使用该组件库进行页面的渲染和搭建.

可以看到上面的布局是非常简单的,左右布局一下,这时候我们就可以使用弹性布局了displayflex如果不清楚的小伙伴可以百度花个五六分钟看看非常简单,

我这里就简单的说一下

那么如何布局左右两边呢并且控制某一边的宽度另一边就自适应,下面我们开始吧!!!

认识Container布局容器,打开ElementPlus找到容器布局,我们可以借用这个来实现左右的完美布局,可以看看参数

这里我们就可以控制侧边栏的宽度了然后另外的一半就自适应了我们可以试试看

新增代码侧边栏和显示我们使用一个大的div来包裹起来方便管理标签

我是侧边栏我是显示图片

查看新增的代码效果,为了看得清楚我给两个元素加了背景颜色

怎是这样子不是两边给我布局吗,因为我们定义了一个maindiv容器组件库的样式无法找到我们去除试试看

这样子就好看多了呀,一下子就实现了我们的效果,但是我们不进行使用它来搭建项目我们自己写样式!!!!

如果不行自己写就可以使用组件库的给侧边栏设置宽度就完事了

在上面我们用了组件库来实现左右布局,接下来我们自己是实现,还是一样定义一个divmian来包裹左右布局标签代码

我是侧边栏

我是显示图片

我想要main里面的两个子元素左右布局,使用弹性布局displayflex

.main{display:flex;width:100%;height:100%;font-size:14px;}给父元素设置开启弹性布局,让其子元素可以使用flex进行控制元素占用的大小

.main{display:flex;width:100%;height:100%;font-size:14px;}.div-left{background-color:red;color:white;flex:00364px;flex-direction:column;/*将侧边栏内容以垂直方向排列*/}.div-main{background-color:blue;color:white;flex:11;/*占据剩余的所有空间*/padding:80px;box-sizing:border-box;}给子元素设置规则flex让其占用多少位置

查看效果

嗯嗯~真舒服,和上面的一样完美实现!

可以看到这里的样式很简单,但是和下面一样所以我们就写在一个class里面到时候其他的直接用

风格选择我们定义了一个padding16样式里面的样式为内边距16px像素

小标题我们给他定义了一个外边句。上边距5px像素下边距5px像素作用就是和其他的元素隔开一点点搞点空间感不那么拥挤!!!!

我们还可以看到标题旁边有个红色的花这个一般叫做必须输入、选择等校验的操作

给小标题里面的label搞个伪元素

:after是一个CSS伪元素（pseudo-element），它用于向元素的内容之后插入生成的内容。伪元素是用于样式化元素的虚拟元素

示例

好那么基本的完成了我们复制几份看看,可以看到我们的小标题就完成啦!!!

ok我们加快速度冲冲冲!!!

可以看到他是一个正方形,那么正方形里面有一个长方形此时怎么说如果学过HTML5+CSS3的同学就清晰的知道这种就是定位元素(position)的功劳了,有个专业名词叫做子绝父相,那么它的作用就是子元素以父元素的边界进行布局,

在文档流当中子元素是默认跟着父元素滴,也就是说我父亲有多大父亲在页面的哪个位置儿子就默认在父亲元素的里面.

我给大家演示一下,可以看到我在这里只是定义了两个容器并且给了不同的宽高和背景颜色,可以看到子元素没设置任何影响它的样式,好那么我想要把子元素定位到父亲的尾部如何操作

前面我们讲了定位元素(position),没说它是啥那么我们看看它的几个参数作用

可以看到我们对第一个子元素设置了相对定位,我们直接向下移动了20像素,相对它自己所以不会影响其它的元素!!!!

可以看到我们给第一个子元素设置了绝对定位她也就脱离文档流了所以直接覆盖在任意元素上面都okkk的,如果你没有为他的父设置相对那么它默认就是整个浏览器的参照物的视角,那么我们看看设置一下父元素的相对定位是什么效果

可以看到我们设置父相对那么子元素就直接脱离文档流,第二个儿子元素默认就往上挤了,子元素也设置了left50px相右边移动五十像素,下边移动20像素!!!

接下来我给大家演示看看使用开发者工具调试看看效果,注意看我鼠标F12打开点击鼠标图标在点击对应元素即可对其样式更改和操作.

我是父亲我是儿子元素我是儿子元素22222222222222还有固定定位fixed、粘性定位sticky、感兴趣的可以去度一下学习很简单!!!我这里就说说相对和绝对定位

好啦讲了这么多,我们回过头来看,描述搞定了看看这么多正方形我难道要一个个复制啊nonono!!

可以看到上面的需求图片风格列表相对于一个列表的形似我们就可以使用Vue当中的v-for指令对其进行循环操作

我们先把一个正方形的样式搞出来后面的就都是循环复制复制复制一份份就行

我们定义一个风格选择组的容器,里面有图片、和描述并且我钉死了正方形的大小为94px像素

接下来我们操作vue来实现循环

定义表单对接前面我们写的api的接口参数

//表单letdataForm=ref({prompt:"",negativePrompt:"",styles:"",resolution:"768:768",url:""})实现定义一个模拟去请求数据过来,我辛辛苦苦把腾讯云智能图像平台的图片拉下来的呜呜呜,麻烦点个赞吧我累死了!!!!!

修改我们的html标签,手动操作一下吧

{{item.subCategory}}查看效果,直接完美实现!!是不是很简单弹性布局nice的很

差不多搞定啦,还差一个点击效果!和上面的菜单栏一样两个按钮的背景颜色切换!!一样的思路

这里停留3秒.............................想到咋实现了吗.

我们定义一个点击事件里面传递当前点击元素的唯一标识,然后在定义一个变量存储这个标识

在使用vue当中的动态样式绑定我们需要指定变化的样式就行啦~来吧我们操作操作!!!!!

我们给点击事件添加一个日志打印看看效果

这样子我们就可以知道当前点击的是谁接下来我们进行添加动态样式,给点击的元素加个边框!!!

定义一个边框元素,然后通过动态样式进行动态的改变样式具体解释如下:

我们有一个名为item-img的CSS类和一个名为activeItem的CSS类。我们希望根据某个条件为HTML元素添加或删除这两个类。

条件如下：

看到这里是不是觉得soeasytohappy和切菜一样简单~

ok接下来我们看看效果,可以看到动态图片已经完美的实现啦~

接下来就是基础的表单元素啦,很简单我就不带着大家做了,希望有能力的可以自己动手玩玩,我就不那么详细的一步步说了,我就一步步的截图+代码实现.

可以看到需求图片上面是一个文本域的组件那么直接在文档当中找到即可

这里我就直接文档找到了输入框类型是textarea文本域

使用prompt来暂存我们的信息

顾名思义就是希望生成的画面当中不希望出现的元素,那么它也是文本域soeasy啦

使用negativePrompt来暂存我们输入的信息

选择要生成的图片大小格式,是一个下拉框

大家手动操作一下!!!

数据我也给大家准备好了,看到这里还不点个赞嘛死鬼!

这就是一个按钮将上面全部需要输入的信息发起请求到后端进行处理即可

生成画作查看最终效果

查看效果完美~

查看效果图,其实就是外层套了个容器里面有一个icon图标、然后在嵌套一个容器用来装文字描述信息

在左侧输入描述词开始创作吧上色我们看看官方是咋搞的UI,一个容器包裹并且给了点阴影样式,里面就是图标和描述,直接开干

还差图生图的页面其实和文生文一摸一样我们可以直接复制一份文生文的代码

那么就有一个问题,css好像都一样的诶

那么我们就可提出来,我给大家搞了个全局样式只需要把样式移动就来就行

删除两个页面里面的CSS样式即可

我滴妈好难看啊为什么还记得文档流嘛,我们前面都是多个块级元素慢慢的顶满整个高度的

那么如何解决这个问题,我想让他直接顶满整个高度,那么就可以使用VM

要使HTML中的侧边栏高度始终占据屏幕的最高，你可以使用CSS的height:100vh属性

这将使侧边栏的高度始终等于视口高度（即屏幕高度）

在上面我们已经全部完成了前后端的应用服务的搭建和编写接下来我们进行将我们的前端进行对接后端接口实现图片生成的完整步骤流程!!!

在前面的时候我已经实现了文生图的接口,还有图生图的接口没有实现实际上我也已经写好了只是想让小伙伴自己玩玩提升学习效率因为它和文生图是一样的操作方式非常的简单!!!

图生图的工具方法,动手能力强的可以和文生图一样进行操作,我们前端已经搭建完毕只需要后端编写一下接口即可!!!大佬们冲冲冲!

在前面编写前端页面的时候我给大家整了个脚手架并且搭配了视频讲解说了一下API的作用

现在是给没使用脚手架的同学讲解一下那么我们前往前端项目文件夹在src/api下面创建apigc.js文件

在定义一个获取当前实例用于调用我们挂载的全局弹出组件实现前端提示效果

生成画作//获取当前实例const{proxy}=getCurrentInstance();//提交按钮letdisabledFlag=ref(false);基本的变量完成之后我们来编写请求函数,可以看到我定义了一个函数submit并且设置了点击后禁止再次点击还判断了后端接口必须填写的一些参数校验,最终进行发送请求

导入我们的API请求方法

打开后端服务,打开前端服务

选中你想要的风格,输入好你想要的图片描述直接提交

可以看到我们点击后按钮意见禁止了并且成功的发起了请求返回到我们的控制台当中

描述词:小女孩，在河边，翅膀，摸着小猫，星空，森林

反向描述:模糊,扭曲

接下来我们把请求返回的图片在我们的页面当中展示出来!!!!

数据结构

判断返回过来的是否正确,正确则往表单对象当中新增一个url的属性并且赋值生成的图片地址

结束后我们2秒后在进行按钮的释放.

前端呢我们就需要对应的修改了判断表单对象当中的URL是否存在参数存在则显示图片不存在则显示图标

文字提醒也是如此

这里看你喜欢用哪个就用哪个我这里用腾讯云的下面我就开始从零到壹的教你们咋玩

然后我们来到合成音频来调试合成音频的语音包看看那个适合你,我这里就选了小荷了听的感觉不错,还可以选择情感风格我滴妈.点击立刻合成

可以看到已经消耗了九个字符没关系我们有八百万就是豪气

点击合成音频看看右下角点击语音合成

接口请求域名：tts.tencentcloudapi.com

腾讯云语音合成技术（TTS）可以将任意文本转化为语音，实现让机器和应用张口说话。

腾讯TTS技术可以应用到很多场景，比如，移动APP语音播报新闻；智能设备语音提醒；依靠网上现有节目或少量录音，快速合成明星语音，降低邀约成本；支持车载导航语音合成的个性化语音播报。

实际上也就两个必填Text、SessionId以下是我觉得符合我的业务的必要参数

具体的参数前往文档查看

参数名称

Text

是

String

合成语音的源文本，按UTF-8编码统一计算。中文最大支持150个汉字（全角标点符号算一个汉字）；英文最大支持500个字母（半角标点符号算一个字母）。示例值：你好

SessionId

一次请求对应一个SessionId，会原样返回，建议传入类似于uuid的字符串防止重复。示例值：session-1234

VoiceType

PrimaryLanguage

主语言类型：1-中文（默认）2-英文3-日文示例值：1

Codec

返回音频格式，可取值：wav（默认），mp3，pcm示例值：wav

EmotionCategory

控制合成音频的情感，仅支持多情感音色使用。取值:neutral(中性)、sad(悲伤)、happy(高兴)、angry(生气)、fear(恐惧)、news(新闻)、story(故事)、radio(广播)、poetry(诗歌)、call(客服)、撒娇(sajiao)、厌恶(disgusted)、震惊(amaze)、平静(peaceful)、兴奋(exciting)、傲娇(aojiao)、解说(jieshuo)

Audio

base64编码的wav/mp3音频数据示例值：UklGRlR/AABXQVZFZm10IBAAAAABAAEAgD4AAAB9AAACABAAZGF0YSx9AAD+

一次请求对应一个SessionId示例值：session-1234

Subtitles

RequestId

唯一请求ID，每次请求都会返回。定位问题时需要提供该次请求的RequestId。

只要有APIExplorer那就是闭着眼玩,腾讯都给你实现好了闭眼冲

在前面我们说到这六个我就给这六个参数设置参数其它的你们自己看看需要什么搞什么

点击每个参数的梅花可以看到对应解释

设置合成语音语言默认为中文有需要的就自己改改我就默认了

点击音色列表选择你觉得好听的音色我这里就选择爱小荷301032

如果不知道是什么样子去合成音频菜单调试一下看看你喜欢哪个口味的

设置返回的格式我这里就mp3格式

设置情绪控制合成音频的情感，仅支持多情感音色使用。取值:neutral(中性)、sad(悲伤)、happy(高兴)、angry(生气)、fear(恐惧)、news(新闻)、story(故事)、radio(广播)、poetry(诗歌)、call(客服)、撒娇(sajiao)、厌恶(disgusted)、震惊(amaze)、平静(peaceful)、兴奋(exciting)、傲娇(aojiao)、解说(jieshuo)

可以直接下载工程,我这里就直接复制工程了

如果你是复制的工程片段代码那么就要手动引入maven坐标依赖SDK了

com.tencentcloudapitencentcloud-sdk-java-commonLATESTcom.tencentcloudapitencentcloud-sdk-java-ttsLATEST如果不知道密钥的

前面忘记选择资源地域了Region我们直接填写里你自己城市进的我这里就上海了

复制一波拼接data:audio/mp3;base64,的前缀下面是我生成的听听看哈哈哈

前端我就不搞咯,一样的soeasy切菜一样

在com.yby6.tencentaigc.utils目录下新增TencentUtils工具类

新增一个方法文本转语音方法

/***文本转语音*@paramrequest参数*@return{@linkString}*/publicstaticStringtextToVoice(TextToVoiceRequestrequest){returnnull;}改造textToVoice把前面我们调试的代码复制到textToVoice当中

修改成下面的图片,使用TextToVoiceRequest来接收外界传递的参数即可

如果使用的讯飞那么返回的是数据流需要URL.createObjectURL(response)通过这个API让语音数据转为成一个url地址

腾讯云语音合成是base64我们可以直接把base64放进去直接播放.操作操作

在AIGCUI/src/api/audio.js新增audio.js接口

按道理除了text其它的都是后配置的我们就前端做就行了方便修改

constgetTencentTextToVoice=(prompt)=>{tencentTextToVoice({"text":prompt,"sessionId":"123156161561561","voiceType":301032,"codec":"mp3","emotionCategory":"happy"}).then(res=>{if(res.code===200){letaudio=document.getElementById("indexAudioId");//播放base64音频data:audio/mp3;base64,audio.src=res.msg//播放base64音频data:audio/mp3;base64,audio.addEventListener("canplay",()=>{console.log("播放完毕")});console.log(audioObj.value);}else{proxy.$modal.msgError(res.msg);}})}最后一步给生成画作请求新增语音提示

完毕,自己可以按照之前的流程来进行测试啦

我们到这里整体的教程就已经完毕啦!!!!!!!

仿造的腾讯的在线测试平台,好久没写前端了这么简单的东西写了我一两个小时

最后如果想深入学习AI绘画那么请前往

本期结束咱们下次再见~

我正在参与2023腾讯技术创作特训营第四期有奖征文，快来和我瓜分大奖！