解决screenshot-to-code项目中的API密钥验证错误问题

在使用screenshot-to-code项目时，开发者可能会遇到"Error generating code. Please contact support"的错误提示。这个错误通常与API密钥配置不当有关，特别是当项目尝试使用错误的AI服务提供商时。

错误现象分析

当用户上传图片尝试生成代码时，系统返回错误信息。通过检查后端日志可以发现，项目实际上尝试调用的是Anthropic的Claude API，而非预期的OpenAI服务。这表明环境变量配置存在问题。

根本原因

出现此问题的核心原因在于环境变量配置错误。项目默认支持多种AI服务提供商，包括OpenAI和Anthropic等。如果同时配置了多个服务商的API密钥，或者配置了错误的密钥，系统可能会尝试使用非预期的服务。

解决方案

1. 检查环境变量文件：确保.env文件中只包含您实际使用的服务商API密钥。例如，如果使用OpenAI，应只设置OPENAI_API_KEY。

2. 正确设置API密钥：对于OpenAI服务，使用以下命令设置环境变量：

   echo "OPENAI_API_KEY=your-actual-key" > .env
   

3. 验证API密钥有效性：确保您提供的API密钥是有效的，并且有足够的余额或权限。

4. 服务商选择：明确指定您要使用的AI服务商，避免系统自动选择错误的默认服务。

最佳实践建议

1. 在项目初始化时，仔细阅读文档，了解支持的AI服务商及其对应的环境变量名称。

2. 使用单一服务商配置，避免多个服务商密钥同时存在导致的混淆。

3. 定期检查API密钥的有效性，特别是当服务商有使用期限或余额限制时。

4. 开发环境下，可以通过日志输出验证实际使用的服务商是否符合预期。

通过正确配置API密钥和环境变量，开发者可以顺利使用screenshot-to-code项目的图片转代码功能，避免因服务商选择错误导致的功能异常。