html本身不实现ai摘要，仅作为静态界面容器负责接收用户输入并展示ai返回结果；核心逻辑由后端或ai服务api完成，前端通过form+textarea收集文本、fetch调用api、预判错误并安全渲染结果。
HTML 本身不生成 AI 摘要，它只负责把用户输入的文本传给 AI 服务、展示返回结果——界面是静态容器，摘要逻辑在后端或 API 里。
用 form + textarea 构建最简可用的摘要输入区
别一上来就套 UI 框架。一个能真正提交文本给 AI 的界面，核心就是让用户能粘贴长文、点一下触发请求。关键不是“好看”，而是“不丢内容”“不截断”“能清空重试”。
-
textarea必须设name="text"（后端/JS 依赖该字段名取值），并加required属性防空提交 - 避免用
input type="text"——它会强制单行，根本塞不下一篇博客 - 加
rows="8"和 CSSresize: vertical，让用户可拉伸但不能横向乱扩 - 提交按钮用
type="submit"，别写onclick冒充表单行为，否则回车无法触发
用 fetch 调用 AI API 时必须处理的三类错误
前端 JS 调 AI 接口不是发个请求就完事。90% 的失败不是模型崩了，而是你没兜住网络、权限或格式问题。
-
401 Unauthorized：API 密钥没传、过期或拼错——检查请求头Authorization: Bearer xxx是否完整 -
429 Too Many Requests：OpenAI 免费 tier 或自建代理限流了——加个退避重试（如首次失败后等 1s 再试），别直接报“服务不可用” -
400 Bad Request：常见于文本超长（GPT-3.5-turbo 输入上限约 16k token）、或 JSON body 格式错（比如漏了messages数组包裹）——前端需预估长度，超 3000 字先弹窗提醒
展示摘要结果时，pre 和 p 的选择逻辑
AI 返回的摘要可能是带换行的段落，也可能是纯一行字符串。渲染方式直接影响可读性，不能无脑 innerText 一塞了事。
- 如果后端返回的是已格式化好的 Markdown 或含
\n的纯文本，用<pre class="brush:php;toolbar:false;"><code></code> 包裹，再加 <code>white-space: pre-wrap</code> CSS，保留换行又自动折行</pre> - 如果返回的是 HTML 片段（如含
<strong></strong>或链接），必须用innerHTML插入，但得先用 DOMPurify 等库过滤 XSS，否则用户输<img src="x" onerror="alert(1)">就执行了 - 永远别把 AI 摘要直接塞进
h2或blockquote——它不是语义标题，也不是引用，只是普通正文结果
最容易被忽略的其实是加载态和边界文案：没点提交前显示“粘贴文章，点击生成”，请求中显示“正在调用 AI…（可能需 3–8 秒）”，失败时明确说“密钥错误”而非“摘要失败”。用户不需要知道 OpenAI 是什么，但需要知道下一步该改什么。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
