AI-model-comparison：直观对比AI大模型输出效果的工具

AI-model-comparison 是一个在浏览器中运行的网页工具，它可以帮助用户并排比较来自两个不同人工智能（AI）大语言模型的回答。用户输入一个问题后，工具会同时向两个配置好的模型API发送请求，并将返回的结果并列展示出来。这个工具完全在用户的浏览器前端运行，不需要后端服务器，用户的API密钥等敏感信息仅在本地使用，不会上传到任何服务器，保证了安全性。它主要为需要评估和选择最适合特定任务AI模型的开发者、研究人员和AI爱好者设计，通过直观的界面，让模型之间的差异一目了然。

功能列表

• 并行对比：在一个界面中同时输入问题，工具会并行调用两个不同的AI模型，并并排展示它们的回答，方便直接比较。
• 多轮对话：支持连续追问。在得到首次回答后，可以继续输入问题，工具会带着完整的上下文历史再次请求模型，进行更深入的对比。
• 详细指标展示：在展示回答的同时，会显示每个模型的响应时间、消耗的Token数量等关键信息，为性能评估提供数据支持。
• 对话历史记录：自动记录所有对话，用户可以随时查看完整的上下文，方便回顾和分析。
• 配置自动保存：用户的API配置信息（不包括API密钥）会自动保存在浏览器本地，下次使用时无需重新填写。
• 连接测试：提供一键测试功能，可以快速验证API地址和密钥是否能够成功连接，简化了配置过程。
• 快捷操作：支持使用Ctrl+Enter快捷键快速发起对比；双击模型返回的回答内容，即可快速复制到剪贴板。
• 纯前端运行：整个工具仅由HTML、CSS和JavaScript构成，无需安装任何后端服务，直接在浏览器中打开文件即可使用。

使用帮助

AI-model-comparison 是一个纯前端实现的网页工具，这意味着它的使用方式非常简单，不需要复杂的安装和部署流程，只需要一个现代浏览器即可运行。

准备工作

在使用之前，你需要准备以下信息：

1. AI模型的API信息：你需要至少一个（推荐两个以便对比）兼容OpenAI API格式的语言模型接口。你需要获取以下三项信息：
   • API Endpoint（API接口地址）
   • Model Name（模型名称）
   • API Key（API密钥）

   常见的服务及其配置示例如下：

   • OpenAI 官方API:
     • API接口: https://api.openai.com/v1/chat/completions
     • 模型名称: gpt-4o 或 gpt-3.5-turbo
     • API密钥: 你的OpenAI账户密钥
   • OpenRouter (聚合多个模型服务的平台):
     • API接口: https://openrouter.ai/api/v1/chat/completions
     • 模型名称: openai/gpt-4o-mini (或其他模型)
     • API密钥: 你的OpenRouter账户密钥
   • 本地部署的模型或第三方代理服务:
     • 如果你通过Ollama、vLLM等工具在本地部署了模型，并使用兼容OpenAI的API服务器，你可以填入本地的地址，例如 http://localhost:8000/v1/chat/completions。

操作流程

第一步：下载并打开工具

1. 访问项目的GitHub主页：https://github.com/hubhubgogo/AI-model-comparison
2. 点击绿色的 Code 按钮，然后选择 Download ZIP 将整个项目文件下载到你的电脑上。
3. 解压下载的ZIP文件，你会看到 index.html, style.css, script.js 等文件。
4. 直接用浏览器（推荐使用Chrome, Firefox, Safari或Edge）打开 index.html 文件，工具界面就会加载出来。

第二步：配置模型API

1. 工具界面分为左右两栏，每一栏代表一个要对比的模型。
2. 在左侧的“模型A”配置区，依次填入准备好的API接口、模型名称和API密钥。
3. 同样地，在右侧的“模型B”配置区，填入另一个模型的API信息。你也可以使用同一个API接口，但选择不同的模型名称来进行对比（例如，模型A使用gpt-4o，模型B使用gpt-3.5-turbo）。
4. 填写完毕后，可以点击每个配置区下方的“测试连接”按钮。系统会发送一个简单的请求来验证API配置是否正确。如果配置无误，按钮会变为绿色并显示“连接成功”；如果失败，则会提示错误信息，方便你检查问题。

第三步：输入提示词并开始对比

1. 系统提示词 (System Prompt)：这是一个可选输入框。你可以在这里设定AI模型的角色、行为准则或回答风格。例如，输入“你是一名资深的软件工程师”，这会让模型在回答时更偏向技术视角。这个设定会对整个对话生效。
2. 用户提示词 (User Prompt)：这是必填的核心输入框。在这里输入你想要问的问题或需要模型执行的任务。例如，“请用Python写一个快速排序算法”。
3. 输入完成后，点击页面中间的“开始对比”按钮，或者直接使用快捷键Ctrl+Enter。

第四步：查看和分析结果

1. 点击按钮后，工具会分别向两个配置好的API地址发送请求。
2. 模型返回结果后，会并排显示在左右两侧的对话框中。你可以直观地看到哪个模型的回答更准确、更详细或更符合你的要求。
3. 在每个回答的上方，会显示该模型的响应时间和所用Token数量等元数据，这些数据可以帮助你从性能和成本角度评估模型。

第五步：多轮追问

1. 当首次对比结果出来后，输入框下方会出现一个新的“继续追问”输入框。
2. 你可以在此输入后续问题，例如“请为刚才的代码添加详细的注释”。
3. 点击“继续追问”或再次使用Ctrl+Enter，工具会将之前的全部对话历史（包括系统提示词、你的首次提问、模型的首次回答以及你的追问）一并发送给两个模型。
4. 通过这种方式，你可以进行多轮连续对话，深入测试模型在复杂和连续任务上的表现。

第六步：管理对话

• 复制内容：如果你对某个模型的回答很满意，只需用鼠标双击该回答的文本区域，其内容就会被自动复制到剪贴板。
• 开启新对话：如果你想开始一个全新的话题，可以点击页面上的“新对话”按钮。这会清空当前的对话历史，让你从头开始新一轮的对比测试。

应用场景

1. 模型选型
   在开发AI应用前，开发者需要选择一个最适合其业务场景的语言模型。此工具可以用来测试不同模型（如GPT-4o vs Claude 3 Sonnet）在处理特定任务（如代码生成、内容创作、客服问答）时的表现，从而根据实际效果、响应速度和成本做出最优选择。
2. Prompt工程
   对于AI应用开发者和研究人员，提示词（Prompt）的质量直接影响模型的输出效果。他们可以使用此工具，固定一个模型，但为左右两侧配置不同版本的系统提示词或用户提示词，快速对比和迭代，找到效果最佳的Prompt写法。
3. 模型能力评估
   研究人员或AI爱好者在分析新发布的模型时，可以用它来直观对比新模型与现有主流模型在逻辑推理、知识储备、安全合规性等方面的差异，为模型评估报告提供第一手资料。
4. 教育与演示
   在进行AI相关的教学或技术分享时，可以利用这个工具直观地向观众展示不同AI模型之间的区别，例如，对比一个基础模型和一个经过微调的模型在特定领域的知识差异，让概念变得具体易懂。

QA

1. 这个工具安全吗？我的API密钥会泄露吗？
   这个工具是安全的。它是一个纯前端应用，所有代码都在你的浏览器中运行，你的API密钥仅用于从你的浏览器直接向你配置的API服务商发送请求，不会被保存或传输到任何第三方服务器。为了最大限度的安全，请不要在公共或不信任的电脑上使用。
2. 为什么我点击“测试连接”或“开始对比”后没有反应或提示网络错误？
   这通常由几个原因导致：首先，请检查你的API接口地址是否填写正确。其次，确保你的电脑可以正常访问该API地址，部分API（如OpenAI官方API）可能需要特定的网络环境才能访问。最后，请检查你的API密钥是否正确且有效。
3. 这个工具支持哪些AI模型？
   它支持任何提供与OpenAI API格式兼容的接口的模型服务。这包括OpenAI官方的模型、Microsoft Azure OpenAI服务、OpenRouter平台上的众多模型，以及许多可以通过本地服务器（如Ollama）部署的开源模型。
4. 可以将对话历史导出吗？
   目前版本暂不支持一键导出整个对话历史的功能。但是，你可以通过双击任何一条回答来快速复制其内容，手动保存你需要的信息。