ghcr.io/kserve/models-web-app:sha-ceb43b5

KSERVE UI

此Web应用程序允许用户在Kubeflow集群中管理KServe推理资源。它提供了一种用户友好的方式来处理InferenceService和InferenceGraph自定义资源的生命周期。

InferenceService``InferenceGraph## 支持的资源

• serving.kserve.io/v1beta1 版本的 InferenceService 资源 InferenceService``serving.kserve.io/v1beta1- serving.kserve.io/v1alpha1 版本的 InferenceGraph 资源 InferenceGraph``serving.kserve.io/v1alpha1创建表单还支持多文档YAML，用于按顺序创建受支持的KServe资源。多文档创建目前支持InferenceService、InferenceGraph和TrainedModel资源。资源按文档顺序创建；如果创建失败，应用程序会报告失败的文档以及已创建的任何资源，但不会回滚之前成功创建的资源。

InferenceService``InferenceGraph``TrainedModel## 当前范围

InferenceService和InferenceGraph均为应用程序中的一等资源，但目前它们的UI界面并不完全相同。

InferenceService``InferenceGraph- InferenceService仍是主要的模型服务器管理流程，包括主要的列表/详情视图以及特定于服务的操作视图。 InferenceService- InferenceGraph可通过专用的列表、创建、编辑和详情路由访问。 InferenceGraph- InferenceGraph详情目前侧重于图概述、事件和YAML，而非完整的InferenceService操作视图。 InferenceGraph``InferenceService## 文档

• 测试指南 - 使用Jest和Cypress进行单元测试和端到端测试的综合指南

连接到应用程序

此Web应用程序与其他KServe组件一起安装，位于kserve命名空间或kubeflow命名空间中。存在一个VirtualService，通过Istio Ingress Gateway公开应用程序。根据安装环境，将使用以下Ingress Gateway。

kserve``kubeflow``VirtualService| 安装模式 | IngressGateway | |------------------|------------------------------------| | Standalone KServe | knative-ingress-gateway.knative-serving | | Kubeflow | kubeflow-gateway.kubeflow |

要访问应用程序，需在浏览器中导航至

${INGRESS_IP}/models/

或者，您可以通过kubectl port-forward访问应用程序。在这种情况下，您需要将应用程序配置为：

kubectl port-forward- 不执行任何授权检查，因为没有登录用户

• 在 / 前缀下工作
• 禁用安全Cookie，因为应用程序将通过纯HTTP公开

您可以通过以下命令应用上述配置：

# edit the configmap
# CONFIG=manifests/kustomize/overlays/kubeflow/kustomization.yaml
CONFIG=manifests/kustomize/base/kustomization.yaml
vim ${CONFIG}

# Add the following env vars to the configMapGenerator's literals
# for kserve-models-web-app-config
- APP_PREFIX=/
- APP_DISABLE_AUTH="True"
- APP_SECURE_COOKIES="False"

# reapply the kustomization
# kustomize build manifests/kustomize/overlays/kubeflow | kubectl apply -f -
kustomize build manifests/kustomize/base | kubectl apply -f -

配置

以下是可为此基础应用程序衍生的任何Web应用程序设置的环境变量列表。

USERID_HEADER## 命名空间过滤配置

对于独立部署，使用ALLOWED_NAMESPACES配置用户可访问的命名空间：

ALLOWED_NAMESPACES- 空值/未设置（默认）：可访问所有集群命名空间

• 单个命名空间：ALLOWED_NAMESPACES="kubeflow-user" - 自动选择，隐藏下拉菜单 ALLOWED_NAMESPACES="kubeflow-user"- 多个命名空间：ALLOWED_NAMESPACES="ns1,ns2,ns3" - 过滤下拉菜单 ALLOWED_NAMESPACES="ns1,ns2,ns3"无效的命名空间将被忽略；如果没有有效命名空间，则回退到所有命名空间。

示例

# 仅允许访问一个命名空间（自动选择，隐藏下拉菜单）
export ALLOWED_NAMESPACES="kubeflow-user"

# 允许访问多个特定命名空间
export ALLOWED_NAMESPACES="kubeflow-user,kubeflow-admin,ml-team"

# 默认行为 - 可访问所有命名空间
unset ALLOWED_NAMESPACES

Kubernetes 部署

将环境变量添加到部署配置中：

apiVersion: apps/v1
kind: Deployment
metadata:
name: kserve-models-web-application
spec:
template:
spec:
containers:
- name: kserve-models-web-application
env:
- name: ALLOWED_NAMESPACES
value: "kubeflow-user,kubeflow-admin"

Grafana 配置

应用程序支持Grafana端点和仪表板名称的运行时配置，允许您使用自定义Grafana实例和仪表板配置，而无需重新构建应用程序。

如果使用Kustomize在Kubernetes上部署，您可以通过编辑manifests/kustomize/base/kustomization.yaml（或您的覆盖层）中kserve-models-web-app-config的configMapGenerator下的内容，在应用程序的ConfigMap中设置这些值。根据需要更新以下文字：

manifests/kustomize/base/kustomization.yaml``configMapGenerator``kserve-models-web-app-config- GRAFANA_PREFIX（例如，/grafana 或 /custom-grafana） GRAFANA_PREFIX``/grafana``/custom-grafana- GRAFANA_CPU_MEMORY_DB（例如，db/custom-cpu-memory-dashboard） GRAFANA_CPU_MEMORY_DB``db/custom-cpu-memory-dashboard- GRAFANA_HTTP_REQUESTS_DB（例如，db/custom-http-requests-dashboard） GRAFANA_HTTP_REQUESTS_DB``db/custom-http-requests-dashboard编辑后，重新应用清单，例如：

kustomize build manifests/kustomize/base | kubectl apply -f -

配置 API

您可以通过访问/api/config端点验证Grafana配置：

/api/config

curl http://your-app-url/api/config

预期响应：

{
"grafanaPrefix": "/custom-grafana",
"grafanaCpuMemoryDb": "db/custom-cpu-memory-dashboard",
"grafanaHttpRequestsDb": "db/custom-http-requests-dashboard"
}

开发

前端使用Angular构建，后端使用Python Flask框架编写。

此Web应用程序使用来自kubeflow/notebooks仓库的通用代码。我们希望在不同的Kubeflow Web应用程序中保持一致的用户体验，并使它们处于相同的开发状态。为实现这一目标，应用程序将使用此共享通用代码。

无论是在本地构建应用程序还是构建OCI容器镜像，都需要获取此通用代码。

要在本地运行应用程序，需要执行以下步骤：

• 以监视模式构建前端
• 运行后端

npm run build:watch命令会将前端制品构建到后端的static文件夹中以进行服务。因此，要查看应用程序，需要启动后端并连接到localhost:5000。

要求：

• node 22.0.0
• python 3.12

前端

选项1：使用Makefile（推荐）

cd $KSERVE_MODELS_WEB_APPLICATION_REPOSITORY/frontend

# 设置依赖项并构建通用库
make setup

# 可选：指定自定义Kubeflow仓库路径。默认值：`../../notebooks`（相对于frontend目录）
# make setup KF_REPO=/path/to/notebooks
# 清理命令：提供make clean目标以删除node_modules
# make clean

# 构建并监视更改
npm run build:watch

选项2：手动设置

# 构建通用库
COMMIT=$(cat ./frontend/COMMIT)
cd $KUBEFLOW_REPOSITORY/components/crud-web-apps/common/frontend/kubeflow-common-lib
git checkout $COMMIT

npm i
npm run build
cd dist/kubeflow
npm link

# 运行应用程序前端
cd $KSERVE_MODELS_WEB_APPLICATION_REPOSITORY/frontend
npm i
npm link kubeflow
npm run build:watch

后端

在本地运行

# 创建虚拟环境并安装依赖项
# https://packaging.python.org/guides/installing-using-pip-and-virtual-environments/
cd $KSERVE_MODELS_WEB_APPLICATION_REPOSITORY/backend
python3.12 -m pip install --user virtualenv
python3.12 -m venv web-application-development
source web-application-development/bin/activate

# 在激活的虚拟环境中安装依赖项
KUBEFLOW_REPOSITORY="/path/to/kubeflow/notebooks" make -C backend install-deps

# 运行后端
make -C backend run-dev

已知问题

使用oauth2-proxy时的大型JWT令牌

拥有大型JWT令牌的用户（常见于Azure AD和大量组成员身份）可能会遇到请求失败。部署包含Gunicorn配置（GUNICORN_CMD_ARGS=--limit-request-field_size 32000）以处理更大的标头。

有关更多详细信息，请参阅oauth2-proxy已知问题。

---

项目仓库 README（补充）

KSERVE UI

此Web应用程序负责允许用户在Kubeflow集群中管理KServe推理资源。它提供了一种用户友好的方式来处理InferenceService和InferenceGraph自定义资源的生命周期。

支持的资源

• serving.kserve.io/v1beta1版本的InferenceService资源
• serving.kserve.io/v1alpha1版本的InferenceGraph资源

创建表单还支持多文档YAML，用于按顺序创建受支持的KServe资源。多文档创建目前接受InferenceService、InferenceGraph和TrainedModel资源。资源按文档顺序创建；如果某个创建失败，应用程序会报告失败的文档以及已创建的任何资源，但不会回滚之前成功创建的资源。

当前范围

InferenceService和InferenceGraph都是应用程序中的一等资源，但它们目前并不共享完全相同的UI界面。

• InferenceService仍是主要的模型服务器管理流程，包括主要的列表/详情体验和特定于服务的操作视图。
• InferenceGraph可通过专用的列表、创建、编辑和详情路由访问。
• InferenceGraph详情目前侧重于图概述、事件和YAML，而非InferenceService的全套操作视图。

文档

• 测试指南 - 使用Jest和Cypress进行单元测试和端到端测试的综合指南

连接到应用程序

此Web应用程序与其他KServe组件一起安装，位于kserve命名空间或kubeflow命名空间中。存在一个VirtualService，通过Istio Ingress Gateway公开应用程序。根据安装环境，将使用以下Ingress Gateway。

要访问应用程序，需在浏览器中导航至

${INGRESS_IP}/models/

或者，您可以通过kubectl port-forward访问应用程序。在这种情况下，需要将应用程序配置为：

1. 不执行任何授权检查，因为没有登录用户
2. 在/前缀下工作
3. 禁用安全Cookie，因为应用程序将通过纯HTTP公开

您可以通过以下命令应用上述配置：

# 编辑配置映射
# CONFIG=manifests/kustomize/overlays/kubeflow/kustomization.yaml
CONFIG=manifests/kustomize/base/kustomization.yaml
vim ${CONFIG}

# 将以下环境变量添加到kserve-models-web-app-config的configMapGenerator的literals中
- APP_PREFIX=/
- APP_DISABLE_AUTH="True"
- APP_SECURE_COOKIES="False"

# 重新应用kustomization
# kustomize build manifests/kustomize/overlays/kubeflow | kubectl apply -f -
kustomize build manifests/kustomize/base | kubectl apply -f -

配置

命名空间过滤配置

对于独立部署，可通过 ALLOWED_NAMESPACES 配置用户可访问的命名空间：

• 空值/未设置（默认）：可访问所有集群命名空间
• 单个命名空间：ALLOWED_NAMESPACES="kubeflow-user" - 自动选择，隐藏下拉菜单
• 多个命名空间：ALLOWED_NAMESPACES="ns1,ns2,ns3" - 过滤下拉菜单

无效命名空间将被忽略；若没有有效命名空间，则回退到允许所有命名空间。

示例

# 仅允许访问一个命名空间（自动选择，隐藏下拉菜单）
export ALLOWED_NAMESPACES="kubeflow-user"

# 允许访问多个特定命名空间
export ALLOWED_NAMESPACES="kubeflow-user,kubeflow-admin,ml-team"

# 默认行为 - 可访问所有命名空间
unset ALLOWED_NAMESPACES

Kubernetes 部署

在部署配置中添加环境变量：

apiVersion: apps/v1
kind: Deployment
metadata:
name: kserve-models-web-application
spec:
template:
spec:
containers:
- name: kserve-models-web-application
env:
- name: ALLOWED_NAMESPACES
value: "kubeflow-user,kubeflow-admin"

Grafana 配置

应用程序支持 Grafana 端点和仪表板名称的运行时配置，允许您使用自定义 Grafana 实例和仪表板配置，而无需重新构建应用程序。

如果在 Kubernetes 上使用 Kustomize 部署，可通过编辑 manifests/kustomize/base/kustomization.yaml（或您的覆盖层）中 kserve-models-web-app-config 的 configMapGenerator，在应用程序的 ConfigMap 中设置这些值。根据需要更新以下文字值：

• GRAFANA_PREFIX（例如：/grafana 或 /custom-grafana）
• GRAFANA_CPU_MEMORY_DB（例如：db/custom-cpu-memory-dashboard）
• GRAFANA_HTTP_REQUESTS_DB（例如：db/custom-http-requests-dashboard）

编辑后，重新应用清单，例如：

kustomize build manifests/kustomize/base | kubectl apply -f -

配置 API

您可以通过访问 /api/config 端点验证 Grafana 配置：

curl http://your-app-url/api/config

预期响应：

{
"grafanaPrefix": "/custom-grafana",
"grafanaCpuMemoryDb": "db/custom-cpu-memory-dashboard",
"grafanaHttpRequestsDb": "db/custom-http-requests-dashboard"
}

开发

前端使用 https://angular.io/ 构建，后端使用 Python https://flask.palletsprojects.com/en/1.1.x/ 框架编写。

此 Web 应用程序使用来自 https://github.com/kubeflow/notebooks/tree/master/components/crud-web-apps/common 仓库的通用代码。我们希望确保不同 Kubeflow Web 应用之间具有一致的用户体验，并保持相同的开发状态。为此，这些应用程序将使用此共享通用代码。

这要求我们在本地构建应用程序或构建 OCI 容器镜像时获取此通用代码。

要在本地运行应用程序，您需要：

1. 以监视模式构建前端
2. 运行后端

npm run build:watch 命令会将前端制品构建到后端的 static 文件夹中以供服务。因此，要查看应用程序，您需要启动后端并连接到 localhost:5000。

要求：

• node 22.0.0
• python 3.12

前端

选项 1：使用 Makefile（推荐）

cd $KSERVE_MODELS_WEB_APPLICATION_REPOSITORY/frontend

# 设置依赖并构建通用库
make setup

# 可选：指定自定义 Kubeflow 仓库路径。默认：`../../notebooks`（相对于 frontend 目录）
# make setup KF_REPO=/path/to/notebooks
# 清理命令：提供 make clean 目标以删除 node_modules
# make clean

# 构建并监视更改
npm run build:watch

选项 2：手动设置

# 构建通用库
COMMIT=$(cat ./frontend/COMMIT)
cd $KUBEFLOW_REPOSITORY/components/crud-web-apps/common/frontend/kubeflow-common-lib
git checkout $COMMIT

npm i
npm run build
cd dist/kubeflow
npm link

# 运行应用程序前端
cd $KSERVE_MODELS_WEB_APPLICATION_REPOSITORY/frontend
npm i
npm link kubeflow
npm run build:watch

后端

本地运行

# 创建虚拟环境并安装依赖
# https://packaging.python.org/guides/installing-using-pip-and-virtual-environments/
cd $KSERVE_MODELS_WEB_APPLICATION_REPOSITORY/backend
python3.12 -m pip install --user virtualenv
python3.12 -m venv web-application-development
source web-application-development/bin/activate

# 在激活的虚拟环境中安装依赖
KUBEFLOW_REPOSITORY="/path/to/kubeflow/notebooks" make -C backend install-deps

# 运行后端
make -C backend run-dev

已知问题

使用 oauth2-proxy 时的大型 JWT 令牌

具有大型 JWT 令牌的用户（常见于 Azure AD 和大量组成员身份）可能会遇到请求失败。部署包含 Gunicorn 配置（GUNICORN_CMD_ARGS=--limit-request-field_size 32000）以处理更大的标头。

有关更多详细信息，请参见 https://github.com/kubeflow/manifests/tree/master/common/oauth2-proxy#known-issues%E3%80%82