Chainlit快速实现AI对话应用的界面定制化教程

前言

本文主要讲解如何自定义chainlit实现的网页界面的中的一些可以自定修改的样式的实现教程。比如修改自己的logo网站图标或者主题等

翻译

chainlit 默认网页界面显示的是英文，如果我们想显示为其他语言可以进行以下操作。

翻译文件位于项目根目录下的.chainlit/translations目录中。文件以语言代码命名，例如en-US.json英语（美国）。

自定义 UI 文本

除了标准翻译之外，您还可以自定义 UI 中使用的前端组件的文本。每个 UI 元素都与翻译文件中的唯一翻译键相关联。通过修改这些键，您可以根据需要个性化或本地化 UI 文本。

例如，要将导航选项卡的标签从"自述文件"更改为"文档"，请在翻译文件中找到相应的键（例如components.organisms.header.readme）并更新其值：

bash 复制代码

"components.organisms.header.readme": "Documentation"

添加新语言

除了修改.chainlit/translations目录下默认的json配置文件外，我们还可以通过新语言的方式，实现国际化。代码会更具用户的电脑系统自动匹配国家和语言。

要添加新语言，请在.chainlit/translations目录中创建一个新的json文件，并以语言代码作为文件名。语言代码的格式应为languageCode-COUNTRYCODE，例如en-US英语（美国）或en-GB英语（英国） zh-CN 中文（中国）。

检查翻译

如果要检查新添加的语言翻译json文件格式是否正确，请运行以下命令：

bash 复制代码

chainlit lint-translations

翻译 chainlit.md 文件

您可以为chainlit.md文件定义多种翻译。例如chainlit_pt-BR.md葡萄牙语（巴西）和chainlit_es-ES.md西班牙语（西班牙）。文件将根据浏览器的语言加载，chainlit.md如果没有可用的翻译，则默认为浏览器的语言。

重置

要重置翻译，请删除.chainlit/translations目录并重新启动 Chainlit 应用程序：

bash 复制代码

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。

bash 复制代码

public/
└── avatars/
    └── my_assistant.png

代码中的使用：

bash 复制代码

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值。

bash 复制代码

[UI.theme]
    default = "dark"

浅色主题修改

要修改浅色主题，请查找或创建部分[UI.theme.light]并根据您的喜好更新颜色。

bash 复制代码

[UI.theme.light]
    background = "#110061"
    paper = "#FFFFFF"

    [UI.theme.light.primary]
        main = "#110061"
        dark = "#180039"
        light = "#FFE7EB"

暗色主题修改

bash 复制代码

[UI.theme.dark]
    background = "#FAFAFA"
    paper = "#FFFFFF"

    [UI.theme.dark.primary]
        main = "#A80061"
        dark = "#380039"
        light = "#FFE7EB"

网站（助理）名称和描述

bash 复制代码

[UI]
# 网站（助理）的名字
name = "泰山AI"

# 助手的描述信息。这用于HTML标签中。
description = "泰山出品的人工智能AI助手"

# 默认情况下，大型内容会被折叠以获得更简洁的用户界面。
default_collapse_content = true

# 在用户界面上隐藏思考过程的细节。
hide_cot = false

字体

要修改网页界面中的字体为自定义字体，请修改.chainlit/config.toml中的配置设置。

bash 复制代码

[UI]
# This should be a google font url
custom_font = "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"

然后，更新主题的字体系列以使用自定义字体。

bash 复制代码

[UI.theme]
    font_family = "Inter, sans-serif"