前言
本文主要讲解如何自定义chainlit实现的网页界面的中的一些可以自定修改的样式的实现教程。比如修改自己的logo网站图标或者主题等
翻译
chainlit 默认网页界面显示的是英文，如果我们想显示为其他语言可以进行以下操作。
翻译文件位于项目根目录下的.chainlit/translations目录中。文件以语言代码命名，例如en-US.json英语（美国）。
自定义 UI 文本
除了标准翻译之外，您还可以自定义 UI 中使用的前端组件的文本。每个 UI 元素都与翻译文件中的唯一翻译键相关联。通过修改这些键，您可以根据需要个性化或本地化 UI 文本。
例如，要将导航选项卡的标签从“自述文件”更改为“文档”，请在翻译文件中找到相应的键（例如components.organisms.header.readme）并更新其值：
"components.organisms.header.readme": "Documentation"
添加新语言
除了修改.chainlit/translations目录下默认的json配置文件外，我们还可以通过新语言的方式，实现国际化。代码会更具用户的电脑系统自动匹配国家和语言。
要添加新语言，请在.chainlit/translations目录中创建一个新的json文件，并以语言代码作为文件名。语言代码的格式应为languageCode-COUNTRYCODE，例如en-US英语（美国）或en-GB英语（英国） zh-CN 中文（中国）。
检查翻译
如果要检查新添加的语言翻译json文件格式是否正确，请运行以下命令：
chainlit lint-translations
翻译 chainlit.md 文件
您可以为chainlit.md文件定义多种翻译。例如chainlit_pt-BR.md葡萄牙语（巴西）和chainlit_es-ES.md西班牙语（西班牙）。文件将根据浏览器的语言加载，chainlit.md如果没有可用的翻译，则默认为浏览器的语言。
重置
要重置翻译，请删除.chainlit/translations目录并重新启动 Chainlit 应用程序：
chainlit run my-app.py
Logo
Chainlit 应用程序支持暗模式和亮模式。为此，请准备两个版本的徽标，分别命名为logo_dark.png和logo_light.png。将这些徽标放在/public应用程序旁边的文件夹中。重新启动应用程序后，您的自定义徽标应会相应显示。
网站图标
为了进一步提升品牌形象，你还可以更新应用的favicon.ico。将一个名为 favicon.ioc 的图像文件放置在与你的应用相邻的public夹中。重启应用后，新的favicon图标就会生效。
头像
默认助手头像为应用程序的图标。
但是，您可以通过将图像文件放入文件夹中来自定义头像/public/avatars。图像文件应以消息作者的名字命名。例如，如果作者是My Assistant，则头像应命名为my_assistant.png。
public/
└── avatars/
└── my_assistant.png
代码中的使用：
author = "My Assistant"
@cl.on_chat_start
async def start_chat():
content = "你好，我是泰山AI智能客服，有什么可以帮助您吗？"
msg = cl.Message(content=content, author=author)
await msg.send()
@cl.on_message
async def on_message(message: cl.Message):
messages = [
{
"role": "user",
"content": [{"type": "text", "text": message.content}, *images_content],
}
]
msg = cl.Message(content=messages.content, author=author)
await msg.send()
主题
想要刷新应用的外观？您可以轻松更改.chainlit目录下的config.toml文件中的默认主题颜色。
目前，您可以自由修改：
- 背景颜色：此选项允许您更改应用程序背景的颜色。
- 纸张颜色：这会改变应用程序内“纸张”元素的颜色，例如导航栏、小部件等。
- 主色调：包括三种色调 - 主色、深色和浅色。这些颜色主要用于交互式界面元素。
如果您使用 -w（文件观察器）启动 Chainlit 应用程序，则每次更新主题时它都会刷新！
默认主题
要设置默认主题，请导航到文件[UI.theme]中的部分config.toml并更新default值。
[UI.theme]
default = "dark"
浅色主题修改
要修改浅色主题，请查找或创建部分[UI.theme.light]并根据您的喜好更新颜色。
[UI.theme.light]
background = "#110061"
paper = "#FFFFFF"
[UI.theme.light.primary]
main = "#110061"
dark = "#180039"
light = "#FFE7EB"
暗色主题修改
[UI.theme.dark]
background = "#FAFAFA"
paper = "#FFFFFF"
[UI.theme.dark.primary]
main = "#A80061"
dark = "#380039"
light = "#FFE7EB"
网站（助理）名称和描述
[UI]
# 网站（助理）的名字
name = "泰山AI"
# 助手的描述信息。这用于HTML标签中。
description = "泰山出品的人工智能AI助手"
# 默认情况下，大型内容会被折叠以获得更简洁的用户界面。
default_collapse_content = true
# 在用户界面上隐藏思考过程的细节。
hide_cot = false
字体
要修改网页界面中的字体为自定义字体，请修改.chainlit/config.toml中的配置设置。
[UI]
# This should be a google font url
custom_font = "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
然后，更新主题的字体系列以使用自定义字体。
[UI.theme]
font_family = "Inter, sans-serif"
