AI编写颜色辞典

为了优化AI绘画的咒语,顺便学习英语,我一直想搞一些更文雅的颜色名称,而不是只有red,black这样的简单词汇。

以前在社交媒体上也看到过一些,但都不太好整理,于是我让ChatGPT帮我推荐。

因为在它的学习库中一定早就包含了这些内容,所以感觉不太需要验证,而且色值而已,错了也没什么。

于是我提出了最基本的需求:

列出一些英语的颜色形容词,不是black,red这些,而是主要包括不常用的比较文雅的描述用词

它的回答看上去还不错,符合我的要求:

Cerulean - 天蓝色的
Indigo - 靛蓝色的
Vermilion - 朱红色的
Chartreuse - 黄绿色的
Magenta - 品红色的
Marigold - 金黄色的
Lavender - 淡紫色的
Mauve - 紫红色的
Cyan - 青色的
Coral - 珊瑚色的

但是做为半个技术人员,这样的列表是不够我用的。于是我要求它进行分类:

请按红、黄、蓝、绿、紫、灰这六个色系,每个色系列出十到二十个与上面类似的文雅的颜色形容词

结果依然比较满意:

红色系:

Crimson - 深红色的
Ruby - 红宝石色的
Carmine - 深红色的
Burgundy - 酒红色的
Vermilion - 朱红色的
Garnet - 石榴红色的
Wine - 红酒色的
Amaranth - 茜草红色的
……

黄色系:

Golden - 金色的
Amber - 琥珀色的
Sunflower - 向日葵色的
Honey - 蜜色的
……

当然,这还不够技术化,同时为验证一下,我让它给我一个近似色值。

因为怕内容太长,我只是重新复制了它给出的红色列表:

……
Flamingo - 火烈鸟色的
Berry - 深红莓色的
Pomegranate - 石榴色的
……
这个列表,请你每个颜色给我一个参考的近似色值,用16进制RGB的格式

这好像也难不倒它:

下面是每个颜色的参考近似色值,以16进制RGB格式表示:

Crimson: #DC143C
Ruby: #E0115F
Carmine: #960018
Burgundy: #800020
Vermilion: #E34234
……

那继续吧,我进一步提升要求:

请你以JSON格式整理这些颜色,格式如下:
[{"en":"red","zh":"红色","fr":"rouge","val":"#ff0000"},....]
其中的fr项内容为该颜色的法语翻译

它的秒回答这一点实在太让我喜欢了:

[
  {
    "en": "crimson",
    "zh": "深红色",
    "fr": "cramoisi",
    "val": "#DC143C"
  },
  {
    "en": "ruby",
    "zh": "红宝石色",
    "fr": "rubis",
    "val": "#E0115F"
  },
……

为了防止它一下子处理太多信息而出错,我分别把上面每一个分类的颜色单独拷贝给到它,于是有了red,yellow,blue,green,purple,gray六个json文件

结果不错,我作为程序员的那一小半灵魂活跃起来了,然后我重新开始:

OK,现在我有六个这样的JSON文件,分别取名为red.json, yellow.json, blue.json, green.json, purple.json, gray.json。都是以上面类似的格式,即:
[
  {
    "en": "crimson",
    "zh": "深红色",
    "fr": "cramoisi",
    "val": "#DC143C"
  },...]
请写一个单页面的HTML文件,它将和这些json放在相同路径。请内嵌JS和CSS,先后解析这些json,并渲染成类似于这样的格式:
<h1>红色系</h1>
<div><a><span style="en">crimson</span><span style="fr">cramoisi</span><span style="zh">深红色</span><span style="val">#DC143C</span></a>...</div>
<h1>绿色系</h1>
<div>...
要求a标签的样式为display:block,并且以val的值做为其背景色,然后当我点击这些a,自动将val的色值拷贝到剪贴板中。

它自然给了我代码,但有一点错误,好在我提出后马上做了修改。

代码较长我就不粘贴了,具体的全部对话记录和代码可以在这里找到:

https://chat.openai.com/share/e68f1233-6798-4a16-aa2b-1fc2d46ddd04

此时出现了一个问题,当我在本地运行时,HTML无法读取JSON文件。

我知道这是安全策略的问题,但只是直接把console中的报错贴给了它,它也立刻理解了。

Access to fetch at 'file:///..../blue.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

但是它决定教给我用node.js搭建服务器,这对我来说太重了。

很抱歉,由于浏览器的安全策略限制,直接从本地文件系统加载JSON文件可能会导致CORS(跨源资源共享)错误。这是因为浏览器要求在加载跨域资源时使用受信任的协议,如HTTP或HTTPS。

为了解决这个问题,您可以将这些JSON文件部署到一个Web服务器上,并通过服务器提供的URL加载它们。您可以使用一些简单的HTTP服务器软件,如Node.js的http-server包或Python的http.server模块来搭建本地服务器。
以下是使用Node.js的http-server的步骤:

但我以前处理过这种问题,于是比较“委婉”地向他提出了建议。

有没有别的办法?比如把json改成js的格式读入可行吗?

于是它“愉快”地给了我新的解决方案:

是的,您可以将JSON文件转换为JavaScript文件的格式,并将其作为脚本直接嵌入到HTML中。这样做可以避免CORS错误,并允许您直接从JavaScript中访问数据。

以下是修改的步骤:
……

到现在为止需求可能有点超出它一次的理解能力了,所以反复丢三拉四,改了新的问题就忘掉了以前的需求细节。

我只能不断提示它修改,反复调整了几次才达到我的需求。

最终,我手动美化了一下样式,成功地将它做成了一个颜色字典的网页。

这个网页的网址是这个:

(CATxPAPA.com是本站的姊妹站,是我为女儿做儿童创意与教育相关的英文站,但目前还在改版调整)

https://catxpapa.com/color/

在这个页面上,你可以学习到这些色彩的英文及法语词汇(虽然法语可能因为自动翻译会有点问题)

点击色彩就可以复制色值。

样式做的还是比较简陋,等有空的时候我准备将它美化得更可爱一点。

……

嘿,等一下!

既然其实我做了一个色彩辞典,那么……

有一件我以前就一直想做的事情,我准备把《和色大辞典》给爬下来!

在聊天记录的结尾有相关的内容,但是后来它有点崩了,于是我准备下次再重启一个对话来做这件事。

简单记录一下,仅供启发。

顺手分享:

除特别注明的部分内容外,本站所有图片内容全部为原创。欢迎下载或转发,请将本站推荐给更多朋友。

AI图片不存在严格意义上的版权,但请尊重作者的创意。部分内容或形象可能会与商业版权冲突,商用请自负后果。


AI作品画廊:

你可以任意欣赏,免费下载,并可以输出定制明信片、贴纸、墙画等产品。



每小时自动AI绘画分享及不定期AI资讯