企业官网建设流程全解析

Phi-3.5-mini-instruct Chainlit美化教程：自定义主题色、Logo与欢迎页

1. 准备工作与环境确认

1.1 确认模型服务正常运行

在开始美化Chainlit前端之前，首先需要确保Phi-3.5-mini-instruct模型服务已经成功部署并运行。可以通过以下命令检查服务状态：

cat /root/workspace/llm.log

如果看到类似以下的输出，表示模型服务已成功启动：

[INFO] Model loaded successfully [INFO] API server listening on port 8000

1.2 基础Chainlit调用验证

确保能够通过Chainlit前端正常调用模型服务。启动Chainlit应用后，在聊天界面输入问题，应该能够获得模型的响应。这是后续美化工作的基础。

2. Chainlit界面美化基础配置

2.1 创建配置文件

在项目根目录下创建或修改chainlit.config.py文件，这是Chainlit的主要配置文件。我们将在这里定义所有界面自定义选项。

import chainlit as cl @cl.on_chat_start async def on_chat_start(): await cl.Message(content="欢迎使用Phi-3.5-mini-instruct聊天助手！").send()

2.2 修改主题颜色

Chainlit支持通过CSS变量自定义主题颜色。在配置文件中添加以下代码：

cl.set_theme( primary_color="#4F46E5", # 主色调 secondary_color="#818CF8", # 辅助色 background_color="#F9FAFB", # 背景色 text_color="#111827", # 文字颜色 )

这些颜色值可以根据您的品牌或个人喜好进行调整。

3. 高级自定义功能实现

3.1 添加自定义Logo

在项目目录下创建assets文件夹，将您的Logo图片（建议使用PNG格式，尺寸200x200像素）放入其中。然后在配置文件中添加：

cl.set_logo("assets/your-logo.png")

3.2 自定义欢迎页面

修改欢迎页面内容，使其更加个性化：

@cl.on_chat_start async def custom_welcome(): welcome_message = """ # 欢迎使用Phi-3.5-mini-instruct ## 这是一个强大的文本生成AI助手 您可以： - 提问任何问题 - 获取创意写作帮助 - 进行技术咨询 开始您的对话吧！ """ await cl.Message(content=welcome_message, author="助手").send()

3.3 添加页脚信息

在配置文件中添加页脚信息：

cl.set_footer( "Phi-3.5-mini-instruct · 由vLLM驱动 · 保留所有权利" )

4. 完整配置示例

以下是完整的chainlit.config.py示例：

import chainlit as cl # 设置主题 cl.set_theme( primary_color="#4F46E5", secondary_color="#818CF8", background_color="#F9FAFB", text_color="#111827", ) # 设置Logo cl.set_logo("assets/phi-logo.png") # 设置页脚 cl.set_footer( "Phi-3.5-mini-instruct · 由vLLM驱动 · 保留所有权利" ) @cl.on_chat_start async def custom_welcome(): welcome_message = """ # 欢迎使用Phi-3.5-mini-instruct ## 这是一个强大的文本生成AI助手 您可以： - 提问任何问题 - 获取创意写作帮助 - 进行技术咨询 开始您的对话吧！ """ await cl.Message(content=welcome_message, author="助手").send()

5. 部署与测试

5.1 启动美化后的Chainlit应用

使用以下命令启动应用：

chainlit run your_app.py -w

-w参数表示启用自动重载，当配置文件修改后会自动重新加载应用。

5.2 测试各项自定义功能

启动后，检查以下内容：

1. Logo是否正确显示
2. 主题颜色是否符合预期
3. 欢迎页面内容是否完整
4. 页脚信息是否显示正确

6. 总结

通过本教程，您已经学会了如何为Phi-3.5-mini-instruct的Chainlit前端界面进行美化定制，包括：

1. 修改主题颜色方案
2. 添加自定义Logo
3. 设计个性化欢迎页面
4. 设置页脚信息

这些定制不仅能让您的AI应用看起来更专业，还能提升用户体验。您可以根据需要进一步探索Chainlit的其他自定义选项，如添加更多交互元素或调整布局结构。

获取更多AI镜像

想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。