为了优化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是本站的姊妹站,是我为女儿做儿童创意与教育相关的英文站,但目前还在改版调整)

在这个页面上,你可以学习到这些色彩的英文及法语词汇(虽然法语可能因为自动翻译会有点问题)
点击色彩就可以复制色值。
样式做的还是比较简陋,等有空的时候我准备将它美化得更可爱一点。
……
嘿,等一下!
既然其实我做了一个色彩辞典,那么……
有一件我以前就一直想做的事情,我准备把《和色大辞典》给爬下来!
在聊天记录的结尾有相关的内容,但是后来它有点崩了,于是我准备下次再重启一个对话来做这件事。
简单记录一下,仅供启发。