在Prompt Optimizer项目中配置自定义模型前端的解决方案

在使用Prompt Optimizer项目时，许多开发者会遇到自定义模型配置后前端页面无法正常显示的问题。本文将详细分析这一问题的成因，并提供完整的解决方案。

问题现象分析

当用户通过Docker Compose部署Prompt Optimizer项目时，常见的情况是：

1. 在docker-compose.yml中配置了自定义模型参数
2. 前端请求返回的config.js文件显示配置已正确加载
3. 但前端界面仍然不显示自定义模型选项
4. 模型管理弹窗中custom选项显示为禁用状态

根本原因

经过深入分析，发现这一问题主要由两个因素导致：

1. API密钥缺失：即使自定义API基础URL和模型名称已正确配置，如果未设置API密钥（即使本地环境不需要认证），前端会认为配置不完整而禁用相关选项。

2. 浏览器缓存问题：前端应用会缓存配置数据，即使后端配置已更新，浏览器可能仍使用旧的缓存数据，导致新配置不生效。

解决方案

完整配置示例

在docker-compose.yml中，必须包含以下关键配置项：

services:
  prompt-optimizer:
    image: linshen/prompt-optimizer:latest
    ports:
      - "8011:80"
    environment:
      - VITE_CUSTOM_API_KEY=任意值（如abc） # 必须设置，不可为空
      - VITE_CUSTOM_API_BASE_URL=你的API基础URL
      - VITE_CUSTOM_API_MODEL=你的模型名称

关键配置说明

1. VITE_CUSTOM_API_KEY：即使本地环境不需要认证，也必须设置一个非空值。这是前端判断配置是否完整的必要条件。

2. VITE_CUSTOM_API_BASE_URL：指向你的自定义模型API端点，格式通常为http://ip:port/v1/chat/completions。

3. VITE_CUSTOM_API_MODEL：指定要使用的模型名称，需与你的API服务支持的模型一致。

浏览器缓存处理

配置更新后，必须采取以下措施之一确保新配置生效：

1. 使用浏览器无痕模式访问
2. 清除浏览器缓存数据
3. 更换浏览器测试
4. 强制刷新页面（Ctrl+F5）

配置验证方法

1. 访问http://你的地址/config.js，确认返回的配置包含你设置的所有参数
2. 检查浏览器开发者工具中的网络请求，确认没有加载缓存的旧配置
3. 在不同设备或浏览器上测试，确认配置全局生效

最佳实践建议

1. 即使在内网环境，也建议设置一个有一定复杂度的API密钥，而非简单的"abc"
2. 对于生产环境，考虑通过Nginx等反向代理添加缓存控制头，避免配置更新延迟
3. 定期检查前端配置与后端服务的一致性，特别是在升级版本后

通过以上步骤，开发者可以确保Prompt Optimizer项目中的自定义模型配置能够正确显示并稳定工作。这一解决方案不仅适用于当前问题，也为类似的前端配置显示问题提供了排查思路。