AI大模型API调用与Prompt Engineering：以Moonshot AI为例

AliciaIr
261 阅读8分钟

摘要

随着人工智能技术的普及，将大型AI模型的能力集成到各类应用中已成为主流趋势。本文将深入探讨如何在前端应用中调用AI大模型的API，并重点解析“提示工程”（Prompt Engineering）在引导模型生成结构化、高质量输出中的关键作用。我们将以一个“AI单词拍照移动应用”为例，详细分析其如何通过调用Moonshot AI的moonshot-v1-8k-vision-preview多模态视觉模型，实现图像识别与文本生成，并揭示其背后Prompt设计的精妙之处。

1. 引言

AI大模型，特别是多模态模型，正在以前所未有的方式改变人机交互和信息处理的范式。它们能够理解并生成文本、图像、音频等多种模态的数据，为开发者提供了构建智能应用的强大基石。然而，要充分发挥这些模型的潜力，仅仅调用其API是不够的，如何有效地“引导”模型输出符合预期的结果，即“提示工程”，变得尤为重要。

本文将聚焦于前端应用如何与AI大模型进行API交互，并结合一个实际案例——“AI单词拍照移动应用”——来阐述多模态AI模型的调用流程、数据格式要求以及如何通过精心设计的Prompt来控制模型的行为和输出格式。该应用的核心功能是用户上传图片后，AI模型能够识别图片内容，并生成相关的英文单词、例句和详细解释。

2. AI大模型API调用概述

在Web应用中，调用AI大模型的API通常遵循标准的HTTP请求-响应模式。前端应用作为客户端，向AI服务提供的API端点发送请求，携带必要的输入数据和认证信息，然后解析服务返回的响应。这个过程通常涉及以下几个关键环节：

  • API端点 (Endpoint) ：AI服务提供的URL，用于接收API请求。
  • 认证 (Authentication) ：通过API Key或OAuth等机制验证请求的合法性。
  • 请求方法 (HTTP Method) ：通常为POST，因为请求体中需要包含较多的数据。
  • 请求头 (Headers) ：指定内容类型（如Content-Type: application/json）和认证信息。
  • 请求体 (Body) ：包含发送给模型的数据，如文本、图片数据（通常为Base64编码）、模型参数和Prompt等。
  • 响应 (Response) ：AI服务返回的数据，包含模型的生成结果。

2.1 Moonshot AI的moonshot-v1-8k-vision-preview模型

“AI单词拍照移动应用”中使用的核心AI能力由 Moonshot AI 提供，具体模型为moonshot-v1-8k-vision-preview。根据Moonshot AI官方文档，这是一个多模态视觉模型，其主要功能是：

  • 理解图片内容：能够分析图像中的视觉信息，识别物体、场景、文字等。
  • 输出文本：基于对图片的理解，生成相关的文本描述、回答问题或执行特定指令。
  • 8k上下文窗口：表示模型在处理输入时能够考虑的上下文长度（token数量），对于视觉模型而言，这可能指其处理的图像分辨率或关联文本的长度。

该模型非常适合本应用的需求，因为它能够同时处理图像（用户上传的单词图片）和文本（用户提示），并生成结构化的文本输出。

2.2 API调用实现：以App.jsx为例

在“AI单词拍照移动应用”的App.jsx文件中，uploadImg函数负责与Moonshot AI进行API交互：

// App.jsx 节选
const uploadImg = async (imageData) => {
    setImgPreview(imageData); // 更新图片预览
    const endpoint = 'https://api.moonshot.cn/v1/chat/completions'; // Moonshot AI API端点
    const headers = { 
      'Content-Type': 'application/json', 
      'Authorization': `Bearer ${import.meta.env.VITE_KIMI_API_KEY}` // 认证信息
    };
    setWord('分析中...'); // 更新UI状态
​
    const response = await fetch(endpoint, {
      method: 'POST',
      headers: headers,
      body: JSON.stringify({
        model: 'moonshot-v1-8k-vision-preview', // 指定使用的模型
        messages: [ 
          { 
            role: 'user', 
            content: [
              { 
                type: "image_url", 
                image_url: { "url": imageData, }, // 图片数据，Base64编码
              }, 
              { type: "text", text: userPrompt, // 文本提示（Prompt）
​
              }] 
            }],
            stream: false // 非流式输出
        })
    });
    const data = await response.json(); // 解析JSON响应
    const replyData = JSON.parse(data.choices[0].message.content); // 进一步解析AI生成的内容
    
    // 更新前端状态
    setWord(replyData.representative_word);
    setSentence(replyData.example_sentence);
    setExplainations(replyData.explaination.split('\n'))
    setExpReply(replyData.explaination_replys);
    
    // 生成语音（此处省略具体实现）
    const audioUrl= await generateAudio(replyData.example_sentence);
    setAudio(audioUrl);
  }

这段代码展示了典型的AI API调用流程：

  1. 构造请求URL和Headers：指定Moonshot AI的聊天完成API端点，并设置Content-Type为application/json以及Authorization头，其中包含API Key。

  2. 构建请求Body：

    • model: 明确指定要调用的AI模型名称，即moonshot-v1-8k-vision-preview。

    • messages: 这是一个数组，代表与AI模型的对话历史。对于多模态模型，content字段可以包含不同类型的数据。在本例中，它包含：

      • image_url类型：用于传递Base64编码的图片数据。imageData变量即为通过FileReader读取并Base64编码后的图片字符串。
      • text类型：用于传递用户提示（userPrompt），这是提示工程的核心。

    • stream: false: 表示不使用流式输出，等待模型一次性返回完整结果。

  3. 发送请求与处理响应：使用fetch API发送POST请求。接收到响应后，首先解析外层JSON，然后进一步解析data.choices[0].message.content，因为AI模型被指示生成JSON格式的字符串，所以需要再次JSON.parse()来获取结构化数据。

3. 提示工程 (Prompt Engineering)：引导AI的艺术

提示工程是设计和优化输入（Prompt）以最大化AI模型性能和输出质量的实践。对于多模态大模型，Prompt不仅可以是纯文本，还可以结合图像、音频等多种模态的输入。在本应用中，userPrompt的设计是实现精确单词识别和结构化输出的关键。

3.1 userPrompt 的设计与作用

userPrompt在App.jsx中被定义为：

// App.jsx 节选
const userPrompt = `分析图片内容，找出最能描述图片的一个英文单词，尽量选择更简单的A1~A2的词汇。
​
返回JSON数据：
{ 
"image_discription": "图片描述", 
"representative_word": "图片代表的英文单词", 
"example_sentence": "结合英文单词和图片描述，给出一个简单的例句", 
"explaination": "结合图片解释英文单词，段落以Look at...开头，将段落分句，每一句单独一行，解释的最后给一个日常生活有关的问句", 
"explaination_replys": ["根据explaination给出的回复1", "根据explaination给出的回复2"]
}`;

这个Prompt的设计体现了以下几个重要的提示工程原则：

  1. 明确指令 (Clear Instructions) ：Prompt清晰地指示了模型的任务：“分析图片内容，找出最能描述图片的一个英文单词，尽量选择更简单的A1~A2的词汇。”这为模型设定了明确的目标和约束。

  2. 角色扮演/语境设定 (Role-Playing/Context Setting) ：虽然没有明确的角色扮演，但“找出最能描述图片的一个英文单词”隐含了模型作为“单词识别专家”的角色。

  3. 输出格式要求 (Output Format Specification) ：这是最关键的一点。Prompt明确要求模型“返回JSON数据”，并提供了详细的JSON结构示例，包括每个字段的名称和期望的内容类型（例如image_discription、representative_word、example_sentence、explaination、explaination_replys）。这种结构化输出的要求对于前端解析和后续处理至关重要。

  4. 内容约束与指导 (Content Constraints and Guidance) ：

    • “尽量选择更简单的A1~A2的词汇”：限制了单词的难度级别，确保输出适合学习者。
    • explaination字段的详细要求：“段落以Look at...开头，将段落分句，每一句单独一行，解释的最后给一个日常生活有关的问句”：这不仅约束了内容的开头，还要求了文本的格式（分句、每句单独一行）和内容的结束方式（一个问句），极大地提高了输出的可控性。
    • explaination_replys字段要求提供两个回复，进一步细化了输出。

3.2 结构化输出的重要性

在AI应用开发中，让模型生成结构化输出（如JSON、XML、Markdown表格等）具有以下显著优势：

  • 易于程序解析：前端或其他后端服务可以方便地通过JSON.parse()等方法将模型输出转换为可操作的数据结构，避免了复杂的正则表达式匹配或自然语言解析。
  • 提高数据一致性：模型被明确指示按照特定格式输出，减少了输出的随机性和不确定性，提高了数据的一致性和可靠性。
  • 简化后续处理：结构化数据可以直接用于更新UI、存储到数据库或作为其他模块的输入，极大地简化了数据处理流程。
  • 便于调试与维护：清晰的输出格式使得调试更加容易，也方便团队成员理解和维护代码。

尽管大模型在遵循指令方面表现出色，但有时仍可能出现输出格式不完全符合预期的情况（例如，JSON格式错误）。因此，在实际应用中，通常还需要对模型返回的原始字符串进行健壮的解析和错误处理（例如使用try-catch块进行JSON.parse）。

4. 总结

将AI大模型集成到Web应用中，不仅是简单地调用API，更是一门关于如何有效引导模型、获取高质量和结构化输出的艺术——提示工程。通过对“AI单词拍照移动应用”的分析，我们深入理解了如何利用Moonshot AI的多模态视觉模型，结合FileReader和Base64编码处理图片，并通过精心设计的Prompt来指导模型完成复杂的图像理解和文本生成任务。

avatar
文章
阅读
粉丝