对我爸爸说早上好的新方式
#javascript #教程 #ai #learning

动机

我父亲喜欢早上好图像。那些有快乐的小动物,异想天开的森林和一个快乐的信息开始的人。每天早晨,他都会收到很多东西,并转发给他的朋友和家人。

问题是,有时,如果他没有收到任何新图像,他就必须回收图像。因此,我想每天都会给他发送新鲜的图像,并带有独特的风景!

由于我对图像编辑绝对糟糕透顶,所以要实现这一点比生成Imagine的图像,用Chatgpt的文字和在Svelte上叠加它们更好?让我们开始工作!

Good morning image example

了解AI工具

我以前从未使用过AI工具。因此,我为这个项目所做的第一件事是了解他们的API的工作方式。对于第一个版本,我选择不深入提示,重点放在集成工具上。由于Openai给出了$ 5.00作为学分,因此我将使用他们的Chatgpt创建文本。但是,我没有使用dall-e来生成图像,因为我将无法在他们的网站上免费测试图像提示。因此,我使用了Imagine

想象

在想象网站上,我们可以测试他们的提示和修饰符。这有助于了解每个选项的更改以及以后如何使用它。通过在他们的网站上注册,您每月免费获得50个学分。

Testing Imagine image generation tool

他们的API usage非常简单。它基本上是一个发布请求,将您的令牌传递给标头上的载体,而参数则作为多部分/表单数据。及时的风格是强制性的。对于样式,我们可以使用他们的操场来查看哪个更合适。

使用我在操场上发现的参数,我能够快速测试API并获得类似的结果。

API test with Insomnia

chatgpt

也是一个很好的documentation!在这里,我们还可以测试their playground上的请求,这使我能够理解如何制作一个良好的提示来创建将在图像上传递的消息。

要生成一些东西,您将需要选择一个模型,还需要添加一些修饰符来设置消息的音调。与我对图像的方法相似,我保留了自己,首先要通过一个简单的提示来获得API,并在未来进一步研究它们。

ChatGPT playground

ChatGPT API testing

该项目

随着API已经弄清楚,下一步是了解我将构建的集成方式。我的想法是创建一个简单的页面,该页面允许用户使用Imagine生成图像,该工具将要求一个激励性的短语来介绍图像上的图像。我的选择是创建一些选项来生成提示。

生成内容

信息

如果您只想生成某些东西,Chatgpt的库将其尽可能容易。您发送了您想要的提示和修饰符,并以一系列完成响应。在这种情况下,无论如何它将仅是一个响应。这样,我们可以从响应的第一个完成中访问消息。我减少了大量令牌数量,因此不会使用
许多学分。

Message generation code

由于响应是确定性的,如果您给出相同的提示,则会有相同的响应。因此,我创建了一个基本的随机提示生成器,可以设置消息的音调。积极,祝福,励志和友谊是其中的一些。仍然需要改进该列表,以免随着时间的流逝而重复。

图像

对于图像生成,想象一下Art被称为通过API。返回图像后,将其作为斑点并将其保存到静态文件夹中。

Image generation code

制作最终艺术

要将文本放在图像上,我使用了JIMP。它非常容易使用它,唯一的棘手部分是,要用字体打印一些文本,即其默认情况下,它要求以位图格式要求字体。他们提供了执行转换的好工具。因此,我已经从Google字体下载了字体,并将生成的位图添加到了项目中。

以来,使用位图,该字体只有一种颜色,我使用了窍门,可以通过透明图像创建文本并转换其颜色以获得阴影效果并提高可读性。

结果

创建了着陆页并设置了所有登录页面,我们正在启动并运行!

Landing page

使用此工具生成的第一张图像很好地表示目标,而短语“充满了可能性”。

First image generated with the tool

总的来说,使用的工具真的很好,并且具有不错的界面。我在图像处理方面有些挣扎,因为我不熟悉它。我试图将斑点从服务器端返回到客户端并在那里工作,但是最终决定将其保存到静态文件夹中,并将其完全处理在服务器端,而前端只是从该文件夹中消耗了图像静态文件夹。

找到诸如JIMP之类的工具真的很好,我看到它在其他情况下对我的未来有所帮助。尽管很简单,但它有很多调整和黑客允许创建复杂的图像。

下一步

为了进一步改善该项目,最大的进步是创建提示。当前,我可以通过简单提示产生的最“ whastapp”图像是植物背景上的一些可爱动物。因此,将来,最好用其他早安消息喂养模型并获得更好的结果。

此外,将其改进到其他情况下,例如晚安,生日快乐,圣诞快乐和其他节日场合。为此,应改进消息和图像,以根据用户选择理解上下文。

让我知道您是否有一些建议或提示!如果您喜欢这篇文章,请放心:D

该项目的代码可以在:https://github.com/FRicardi/good-morning-sunshine

上找到