UI 로고 커스터마이징

UI 로고 커스터마이징 (Customize UI Logo)

기본 로고를 여러분 회사의 브랜딩으로 교체해 LiteLLM 대시보드를 개인화하는 방법이에요. UI 또는 API를 통해 커스텀 로고를 설정할 수 있어요.

출처: 문서

본문

기본 로고를 여러분의 회사 브랜딩으로 교체해 LiteLLM 대시보드를 개인화해요. UI 또는 API를 통해 커스텀 로고를 설정할 수 있어요.

UI를 통한 방법

1. 설정으로 이동

사이드바에서 설정 아이콘을 클릭해요.

2. UI 테마 설정 열기

설정 메뉴에서 UI Theme를 클릭해요.

3. 로고 URL 필드 클릭

편집을 시작하려면 Logo URL 텍스트 필드를 클릭해요.

4. 로고 이미지 찾기

새 브라우저 탭을 열고 사용할 로고 이미지를 찾아요 (예: Google Images에서 회사 로고 검색).

5. 로고 이미지 우클릭

로고로 사용할 이미지를 우클릭해요.

6. 이미지 주소 복사

컨텍스트 메뉴에서 Copy Image Address를 선택해 URL을 복사해요.

7. LiteLLM으로 돌아가기

LiteLLM UI 탭으로 돌아가요 (예: Cmd + Left 누르기 또는 탭 클릭).

8. 로고 URL 붙여넣기

복사한 이미지 URL을 Cmd + V로 Logo URL 필드에 붙여넣어요.

9. 변경 사항 저장

Save Changes를 클릭해 새 로고를 적용해요. 커스텀 로고가 이제 LiteLLM 대시보드 사이드바와 로그인 페이지에 나타나요.

다크 모드 로고

밝은 배경용으로 그린 로고는 어두운 배경에서 잘 읽히지 않는 경우가 많아요. 그래서 대시보드가 다크 모드일 때 LiteLLM이 사용할 두 번째 로고를 설정할 수 있어요. 같은 UI Theme 페이지에서 Custom Logo URL (dark mode)를 채우거나 UI_LOGO_PATH_DARK를 설정하세요.

비워 두는 것도 유효한 선택이에요. 다크 모드에서는 밝은 로고에 설정한 것을 재사용하므로 LiteLLM 기본값으로 되돌아가지 않고 브랜딩이 계속 보여요. 다크 로고가 설정되어 있지만 로드할 수 없는 경우에도 같은 일이 일어나요. 즉 깨지거나 삭제된 이미지 때문에 브랜딩을 잃는 일은 없어요.

다크 로고만 설정하면 라이트 모드는 기본 LiteLLM 로고를 유지해요. 각 테마에서 여러분의 작업물을 쓰려면 둘 다 설정하세요.

API를 통한 방법

커스텀 로고 설정

curl -X PATCH 'http://localhost:4000/update/ui_theme_settings' \
  -H 'Authorization: Bearer ***' \
  -H 'Content-Type: application/json' \
  -d '{
    "logo_url": "https://example.com/your-company-logo.png",
    "logo_url_dark": "https://example.com/your-company-logo-dark.png"
  }'

logo_url_dark는 선택 사항이에요. 생략하면 다크 모드가 logo_url을 재사용해요.

커스텀 파비콘 설정

브라우저 탭 파비콘도 커스터마이징할 수 있어요:

curl -X PATCH 'http://localhost:4000/update/ui_theme_settings' \
  -H 'Authorization: Bearer ***' \
  -H 'Content-Type: application/json' \
  -d '{
    "logo_url": "https://example.com/your-company-logo.png",
    "favicon_url": "https://example.com/your-favicon.ico"
  }'

현재 테마 설정 가져오기

curl -X GET 'http://localhost:4000/get/ui_theme_settings'

기본 로고로 재설정

빈 logo_url을 보내면 기본 LiteLLM 로고를 복원해요:

curl -X PATCH 'http://localhost:4000/update/ui_theme_settings' \
  -H 'Authorization: Bearer ***' \
  -H 'Content-Type: application/json' \
  -d '{
    "logo_url": ""
  }'

`proxy_config.yaml`을 통한 방법

프록시 구성 파일에서도 로고 URL을 설정할 수 있어요:

litellm_settings:
  ui_theme_config:
    logo_url: "https://example.com/your-company-logo.png"
    logo_url_dark: "https://example.com/your-company-logo-dark.png"  # optional
    favicon_url: "https://example.com/your-favicon.ico"  # optional

또는 환경 변수로 설정해요:

environment_variables:
  UI_LOGO_PATH: "https://example.com/your-company-logo.png"
  UI_LOGO_PATH_DARK: "https://example.com/your-company-logo-dark.png"

지원되는 로고 형식

형식	지원
JPEG / JPG	예
PNG	예
SVG	예
ICO (파비콘 전용)	예
HTTP/HTTPS URL	예
로컬 파일 경로	예

더 알아보기 (Learn more)

✨ Event Hooks for SSO Login

UI 로고 커스터마이징