如何正确使用 OpenAI API 处理含 HTML 的文本校对请求-html教程-PHP中文网

如何正确使用 OpenAI API 处理含 HTML 的文本校对请求

本文详解为何向 openai api 发送含 html 的拼写修正提示时返回空代码块，并提供完整解决方案：添加 system 角色指令、修正 html 闭合标签、调整流式解析逻辑及停止条件。

本文详解为何向 openai api 发送含 html 的拼写修正提示时返回空代码块，并提供完整解决方案：添加 system 角色指令、修正 html 闭合标签、调整流式解析逻辑及停止条件。

在使用 OpenAI Chat Completions API（如 gpt-4o 或 gpt-3.5-turbo）处理包含原始 HTML 片段的自然语言任务（例如“修复 HTML 中的拼写与语法错误”）时，开发者常遇到响应异常——如仅返回空代码块 html，而非预期的修正后 HTML。这并非模型能力不足，而是提示工程缺失与 API 调用配置不当共同导致。

? 核心问题分析

缺少 system 指令引导模型角色
ChatGPT 网页版内置了隐式系统指令（如“You are a helpful, precise assistant.”），而 API 默认无此上下文。若不显式设置 role: "system"，模型可能以非结构化方式响应，甚至因歧义跳过 HTML 输出。
HTML 语法错误干扰模型理解
示例中 this is som txt...  使用了未闭合的  标签（应为
）。尽管浏览器容错性强，但 LLM 对标记语言的语义敏感度更高——错误标签易触发模型保守策略，选择不生成或截断输出。
流式响应解析逻辑缺陷
原代码中：
- stop: '\n' 过早终止生成（HTML 行末常含换行）；
- stream: true 下未正确累积 delta.content，且未处理 null 或空字符串导致内容丢失；
- logprobs: null 非法字段（API 不接受 null，应省略或设为 undefined）。
模型与参数兼容性风险
gpt-4o 对流式响应格式更严格；top_p: 1 + temperature: 1 易引发不可控发散，校对类任务建议 temperature: 0.2–0.5 提升确定性。

✅ 正确实现方案（浏览器环境）

async function fixHtmlSpelling(htmlSnippet) {
  const prompt = `Fix spelling and grammar errors in the following HTML snippet. Preserve all HTML tags, attributes, and structure exactly. Return only the corrected HTML code, with no explanations or markdown wrappers.\n\n${htmlSnippet}`;

  const response = await fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: {
      "Authorization": `Bearer ${bearer}`,
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      model: "gpt-4o",
      temperature: 0.3,
      top_p: 0.9,
      n: 1,
      stream: false, // 简化调试：先禁用流式，确认基础功能
      messages: [
        { 
          "role": "system", 
          "content": "You are a precise HTML-aware language model. Always output valid HTML with exact original structure. Never add explanations, markdown, or extra text." 
        },
        { 
          "role": "user", 
          "content": prompt 
        }
      ]
    })
  });

  const data = await response.json();
  if (!response.ok) throw new Error(data.error?.message || "API request failed");

  return data.choices[0].message.content.trim();
}

// 使用示例（注意：修复原始 HTML 错误）
const rawHtml = '<p>this is som txt which needs to b fixed.</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9383" title="Openai Whisper 1.0.0"><img
														src="https://img.php.cn/upload/skill/000/000/081/179257682675421.jpg" alt="Openai Whisper 1.0.0" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill9383" title="Openai Whisper 1.0.0" class="overflowclass">Openai Whisper 1.0.0</a>
													<p class="overflowclass">使用 Whisper CLI 进行本地语音转文字（无需 API 密钥）</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill9383" title="Openai Whisper 1.0.0" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>'; // ✅ 闭合标签
fixHtmlSpelling(rawHtml)
  .then(console.log) // → <p>This is some text which needs to be fixed.</p>
  .catch(console.error);

⚠️ 关键注意事项

永远校验输入 HTML：使用 DOMParser 或正则预检标签闭合（如 /]+>/g），避免将 ... 误写为 ...（看似正确实则多斜杠）。
禁用 stream: true 初期调试：流式响应需严格按 SSE 格式解析，推荐先用 stream: false 验证逻辑。
移除非法参数：logprobs: null 会触发 400 错误，直接删除该字段。
明确输出约束：在 system 和 user 消息中双重强调 “only HTML, no explanations”，防止模型添加注释。
生产环境流式处理参考：若必须流式，请用 response.body.pipeThrough(new TextDecoderStream()) 配合 for await (...)，并累积 delta.content 直到 finish_reason === "stop"。