Tailwind Ink
Tailwind Ink 是一个经过 Tailwindcss 颜色训练的 AI 调色板生成器。
注意: 这个工具是作为一个副项目开发的,代码还比较混乱。
它是如何工作的?
它使用两个神经网络来预测完整的调色板。第一个,models/shadesModel.js
根据给定的输入颜色垂直预测从 50 到 900 的所有色调。第二个,models/nextModel.js
根据给定的色调水平预测所有颜色。
模型
当使用 models/wrapper/wrapper.js
导入模型时,它们会返回一个接受 HEX 格式颜色的函数,并返回一个包含所有色调 RGB 值(范围从 0 到 1)的平面对象。将这些值乘以 255 将得到有效的颜色。
import rawShades from './models/shadesModel'
import rawNext from './models/nextModel'
import modelWrapper from './models/wrapper/wrapper'
let nextModel = modelWrapper(rawNext);
let shadesModel = modelWrapper(rawShades);
let shades = shadesModel('#0064FF'); // shade-50: r0.5, g0.5, b0.5; shade-100: r1, g1, b1 ...
工具
根据用户选择的颜色,shadesModel.js
创建一组初始的 50-900 完整色调。选择的颜色也会传递给 nextModel.js
,它返回调色板的下 9 种颜色。然后,这 9 种颜色再次使用 shadesModel.js
分别转换为 50-900 色调。
开发
下载仓库并运行:
npm install
npm run watch
训练模型
打开 shades.html
或 next.html
时,模型训练会自动开始。打开浏览器控制台查看训练进度。训练完成后,你可以在同一页面上选择一种颜色并尝试模型的结果。你也可以在终端中输入以下命令来训练模型:
clear
node src/training/next.js
// 或
node src/training/shades.js
模型调优
要调优模型,你可以调整 training/shades.js
和 training/next.js
。如果你在浏览器中进行训练,记得保持 npm run watch
运行。
保存模型
训练结束后,控制台会输出一个大型推理函数。你可以将它复制粘贴到 models/nextModel.js
或 models/shadesModel.js
中。记得保持 npm run watch
运行,否则模型将无法在 index.html
中导入。