尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

从提示词到线上网站:LLM应用开发最小闭环实践

从提示词到线上网站:LLM应用开发最小闭环实践 这次我们来看一个很有“想法”的 Show HN 项目作者问了一个大模型“你会对上帝说什么”然后把模型给出的回答做成网站放到了公网上。这个项目本身不复杂技术栈大概率就是“提示词 LLM API 静态网页”但它把 LLM 应用开发里最常被忽略的一整条链路完整走了一遍从提问设计、接口调用、内容生成到 Web 部署每一步都值得拆开看一遍。如果你正在学 LLM 应用开发或者想找一个低成本上线练手项目这篇文章可以直接收藏。文章会围绕这个项目展开它解决了什么问题、怎么从零实现、环境怎么准备、接口怎么调、批量任务怎么做、网站怎么部署、有哪些坑以及合规和隐私边界。先给结论这不是一个需要高端显卡、复杂框架才能跑的项目。真正有价值的是它展示的“一个想法 - 一次 LLM 调用 - 一个可访问网站”的最小闭环这也正是很多初学者最缺的部分。1. 核心能力速览能力项说明项目类型LLM 创意内容生成 Web 展示核心功能向 LLM 提出开放式问题展示生成内容技术门槛低适合 LLM 应用入门模型来源通常调用 LLM API也可以是本地推理服务硬件要求使用云 API 时无特殊要求本地推理需按模型确定启动方式本地 HTTP 服务 / 静态网站托管是否支持 API是核心就是 API 调用是否支持批量任务可扩展批量生成不同提示词的结果适合人群LLM 初学者、想做轻量 Web 应用的开发者、内容创意项目爱好者主要风险API Key 泄露、内容版权、主观内容审核从能力上看这个项目准确说不是“工具类开源项目”更像“创意 Demo 技术演示”。但正因为简单它非常适合用来理解 LLM 应用的基本链路。2. 这个项目适合谁以及使用边界先说适合谁。如果你是刚接触大模型开发的读者这个项目的价值在于它把概念落到了实处。很多人写过“调用 LLM API”的代码但没想过把结果变成一个完整网页。从模型返回的 JSON到浏览器里用户能看到的页面中间隔着内容存储、前端渲染、样式设计、部署上线这些才是实际交付时要处理的细节。如果你是产品经理或独立开发者这个项目也值得看。它验证了一种低成本的“内容型应用”思路不需要自己训练任何模型不需要买高配显卡只要设计好问题把 LLM 的回答做结构化整理就能生产一个有着明确主题的网站。扩展到企业场景这种模式可以被改造成“AI 文案站、AI 知识卡片、AI 日报”等工具。再看边界。这个项目本质是“单向提问 - 展示回答”没有对话历史没有 Agent 能力也没有复杂的业务逻辑。如果拿它和 LLM Agent、MCP Client、RAG 框架比较它属于最入门的一档适合打基础不适合直接用于生产级智能体应用。还有几个边界必须说清楚主观内容边界。像“对上帝说什么”这类问题涉及不同宗教信仰和价值观。不同模型可能给出风格迥异的回答甚至可能生成有争议的内容。上线前必须自己审一遍并对网站内容负责。版权边界。LLM 生成内容的版权归属在各国法律中还有争议。如果打算商用建议先看服务商的使用条款并对最终展示内容做人工复核。隐私边界。不要把真实用户隐私、敏感对话记录传给 LLM API也不要把 API Key 提交到 GitHub 等公开仓库。3. 环境准备与前置条件虽然项目简单但环境准备仍然分三层本地开发环境、模型访问环境、部署环境。3.1 本地开发环境建议准备一个干净的 Python 或 Node.js 环境二选一即可。如果是 Pythonpython --version pip --version建议 Python 3.10 以上。创建虚拟环境避免依赖污染python -m venv venv source venv/bin/activate # Windows 使用 venv\Scripts\activate如果是 Node.jsnode --version npm --version建议 Node.js 18 以上。3.2 模型访问环境两种选择视项目原始实现而定。第一种云 LLM API。最常见成本低不需要本地显卡只要一个 API Key。你需要确认服务商的接口地址、鉴权方式和计费模式。这类服务通常都是 OpenAI 兼容格式调用起来差异不大。第二种本地推理服务。如果你不想把内容发送到云端可以在本地部署开源模型。假设你用一个本地推理工具它会提供一个兼容 OpenAI 格式的本地接口地址常见的是http://127.0.0.1:11434/v1注意这个地址是否可用取决于你本地实际部署的推理服务。如果只是按这个项目的思路做云 API 调用直接跳过本地部分。3.3 部署环境如果只是本地预览用 Python 自带 HTTP 服务python -m http.server 8000如果要部署到公网可以准备一个 GitHub 仓库用 GitHub Pages / Netlify / Vercel 这类静态托管平台。这个项目是内容型网站静态托管足够。3.4 磁盘与端口代码和静态页面文件很小普通磁盘即可。关注点是端口如果本地 8000 端口被占用换一个端口python -m http.server 80804. 从提示词到网站整体实现思路拆解这个项目其实就是五步设计提示词想清楚要问 LLM 什么问题希望得到什么风格的回答。调用 LLM API把提示词发给模型拿到结构化 JSON 结果。整理内容提取模型返回的 text做清洗、分段、排版。生成网页把内容渲染成 HTML 页面或者做成动态接口。部署上线本地预览或托管到公网。值得强调的是这个项目的核心卖点不是模型本身而是“把一次 LLM 回答变成可访问的 Web 内容”。很多人低估了这一步的工作量实际上模型返回的内容往往带有格式噪声、截断、重复需要清洗和人工筛选。下面每一节都会对应一个实现环节可以直接照做也可以替换成自己的问题。5. LLM API 调用示例无论原始项目用的是哪个模型服务商只要它提供 OpenAI 兼容接口调用方式就很接近。这里给一个通用 Python 请求模板import requests API_URL https://your-llm-api-endpoint/v1/chat/completions API_KEY your-api-key headers { Authorization: fBearer {API_KEY}, Content-Type: application/json } payload { model: your-model-name, messages: [ {role: system, content: 你是一个善于用简短、有力、真诚的语言表达观点的助手。}, {role: user, content: 如果你能够和上帝对话你会说什么请用一段不超过500字的话回答。} ], temperature: 0.7, max_tokens: 1000 } response requests.post(API_URL, headersheaders, jsonpayload, timeout60) print(response.status_code) print(response.json())这里有几个参数要注意model按你实际接入的模型名填写不要照抄。temperature控制随机性。想得到更稳定的回答可以调到 0.3 到 0.5想看到更多风格可以调到 0.8 以上。max_tokens控制回答长度。问题如果比较开放建议给足空间否则容易被截断。如果你用的是 curl也可以这样curl -X POST https://your-llm-api-endpoint/v1/chat/completions \ -H Authorization: Bearer your-api-key \ -H Content-Type: application/json \ -d { model: your-model-name, messages: [ {role: system, content: 你是一个善于表达真实感受的助手。}, {role: user, content: 如果你能够和上帝对话你会说什么} ], temperature: 0.7, max_tokens: 1000 }判断调用成功很简单HTTP 200返回 JSON 里有choices[0].message.content字段且内容非空。如果这个字段缺失或内容为空常见原因是max_tokens设置太小、内容触发了安全过滤或者模型名写错。调用成功只是第一步LLM 返回的内容可能不是干净的正文。项目里很重要的一步是内容清洗包括去掉多余换行、处理空段落、检查是否包含明显格式错误。可以写一个简单函数def clean_llm_text(text: str) - str: lines [line.strip() for line in text.splitlines()] lines [line for line in lines if line] return \n\n.join(lines)这一步虽然不起眼但直接决定网页展示效果。6. 批量任务与内容扩展这个项目如果只生成一条回答网站会显得单薄。更合理的做法是设计一组问题批量让 LLM 回答然后把所有结果统一排版到一个页面或一个内容目录。例如可以设计如下问题变体从不同视角提问。从不同身份提问。用不同语气提问。用不同长度上限提问。批量脚本示例import requests import json import time API_URL https://your-llm-api-endpoint/v1/chat/completions API_KEY your-api-key prompts [ 如果你能够和上帝对话你会说什么, 如果你只能对上帝说一句话你会说什么, 如果你是一个普通人向上帝提问你会问什么, 如果你是一个科学家面对造物主你会说什么 ] results [] for index, prompt in enumerate(prompts): payload { model: your-model-name, messages: [ {role: system, content: 你是一个真诚、克制、有表达力的回答者。}, {role: user, content: prompt} ], temperature: 0.7, max_tokens: 800 } try: response requests.post(API_URL, headersheaders, jsonpayload, timeout60) response.raise_for_status() content response.json()[choices][0][message][content] results.append({ id: index, prompt: prompt, answer: content }) print(f[成功] {index}: {prompt[:20]}...) except Exception as e: print(f[失败] {index}: {prompt[:20]}... 错误: {e}) time.sleep(1) # 避免触发限流 with open(outputs.json, w, encodingutf-8) as f: json.dump(results, f, ensure_asciiFalse, indent2)批量任务有三个关键设计第一建议加日志。每成功一条打印一条失败时能定位是哪条出问题。第二建议加重试。网络抖动、限流、API 临时故障很常见。可以设置最多重试 3 次每次间隔递增。第三建议结果落盘。把每次成功的回答保存到文件避免程序中断后全部重跑。输出文件结构可以是[ { id: 0, prompt: 如果你能够和上帝对话你会说什么, answer: 如果我有机会站在这一面我只想说感谢你让人类拥有提问的能力。 } ]生成这个 JSON 之后下一步就是把它渲染到网页里。7. 搭建网站与本地部署这个项目既然做成了一个 website就必然涉及 Web 展示。有两种常见做法。7.1 纯静态方案把上一步生成的 JSON 或 HTML 片段直接写进页面。最简单的方式是写一个 HTML 模板然后把模型回答逐条渲染进去。本地预览命令python -m http.server 8000浏览器访问http://127.0.0.1:8000这种方式的好处是零依赖、启动快、不需要后台服务。缺点是每次内容更新都要重新生成静态文件。7.2 带后端的动态方案如果想要页面每次访问时实时请求 LLM就需要一个简单的后端服务。用 Flask 或 FastAPI 都可以这里给一个非常简化的示例import os from flask import Flask, jsonify, request import requests app Flask(__name__) API_URL os.getenv(LLM_API_URL, https://your-llm-api-endpoint/v1/chat/completions) API_KEY os.getenv(LLM_API_KEY, ) app.route(/api/ask, methods[POST]) def ask(): data request.get_json() prompt data.get(prompt, ) payload { model: your-model-name, messages: [{role: user, content: prompt}], temperature: 0.7, max_tokens: 800 } headers { Authorization: fBearer {API_KEY}, Content-Type: application/json } try: response requests.post(API_URL, headersheaders, jsonpayload, timeout60) response.raise_for_status() content response.json()[choices][0][message][content] return jsonify({ok: True, content: content}) except Exception as e: return jsonify({ok: False, error: str(e)}), 500 if __name__ __main__: app.run(host127.0.0.1, port5001)启动命令export LLM_API_KEYyour-api-key export LLM_API_URLhttps://your-llm-api-endpoint/v1/chat/completions python app.py注意生产环境不要把 API Key 写死在代码里也不要绑定到0.0.0.0后不加鉴权直接把接口暴露到公网。最稳妥的做法是使用环境变量并在反向代理层增加访问控制。动态方案还涉及到前端跨域问题。如果前端页面的域名和后端接口域名不一致浏览器会拦截请求。排查 CORS 问题时可以先用 curl 确认接口本身可用再看是否缺少跨域响应头。7.3 部署到公网静态方案可以托管到 GitHub Pages / Netlify / Vercel。打包好目录后按平台文档推送即可。动态方案则需要一台云服务器或容器平台。没有具体项目仓库信息的情况下这里只给通用结论内容型网站优先选择静态托管省钱、省心、速度快。8. 资源占用与性能观察这个项目的资源占用取决于你选择哪种模型接入方式。8.1 云 API 方式严格来说本地不消耗 GPU 显存只需要很小的内存和网络带宽。调用一次 API 的成本主要取决于输入 token 数和输出 token 数。这里有一个规律提示词越长、max_tokens 越大单次请求耗时越长、成本越高。批量生成 10 条回答如果设计成串行调用总耗时大约等于单次耗时的 10 倍还要加上网络延迟。如果追求速度可以并行调用但要注意服务商的限流策略不要在短时间内发大量并发请求。8.2 本地推理方式如果你在本地跑开源模型资源占用就和模型规模强相关。相关讨论中经常提到 FP16、FP32、BF16 精度问题。简单说模型参数精度越低同样的模型占用的显存越小推理速度通常越快但输出质量可能有细微变化。具体显存占用没有固定值必须按实际模型版本和推理框架测试。建议用nvidia-smi观察显存占用nvidia-smi先从量化版本或小参数模型开始确认推理速度再逐步放大模型或同时开多个任务。8.3 网页端的性能这个项目的网页端应该很轻。如果页面内容很多建议拆分图片和脚本避免一次性加载全部内容。如果包含大量模型回答也可以做成分页或“随机展示一条”的效果降低首屏压力。9. 常见问题与排查方法问题现象可能原因排查方式解决方案启动后页面打不开端口被占用或服务未启动检查日志和端口占用更换端口重启服务页面空白无内容JSON 内容格式错误或拼接异常打开浏览器控制台查看网络请求检查生成 JSON 是否合法确认 HTML 渲染逻辑API 返回 401API Key 错误或未设置环境变量检查环境变量和请求头重新配置 Key确认服务商鉴权格式API 返回 429请求频次超限查看服务商限流文档增加 sleep 间隔降低并发增加重试回答内容被截断max_tokens 设置过小检查返回内容和 usage 字段调大 max_tokens回答内容为空触发了安全过滤或模型拒绝回答检查返回的 finish_reason 和系统提示重新设计提示词增加系统指令约束前端请求接口跨域失败后端未配置 CORS查看浏览器控制台报错后端增加 CORS 中间件或使用同源部署批量任务某些条目失败网络抖动或限流查看脚本日志增加重试机制和断点续跑中文显示乱码HTML 编码声明缺失或文件编码错误检查 meta 标签和文件编码使用 UTF-8 编码添加meta charsetutf-810. 最佳实践与合规建议最后给一套实用建议直接套用就能少踩坑。10.1 技术实践第一第一次运行先用最小参数验证。比如只生成一条回答确认 API 通了再跑批量任务。第二所有 Key 放环境变量永远不要提交到 GitHub。即使项目是私有的也不要存明文 Key。泄露后要立即到服务商后台吊销重建。第三把中间结果落盘。生成的内容、清洗后的文本、最终渲染数据分目录管理project/ prompts/ # 原始提示词 raw/ # API 返回原始 JSON parsed/ # 清洗后的内容 site/ # 最终静态页面第四批量任务要加日志和失败重试。这个项目最怕的不是模型答得不好而是跑到一半断掉然后只能从头开始。第五发布前必须人工复核每一条内容因为 LLM 可能输出不符合你预期或不适于公开的内容。10.2 合规与安全项目内容涉及“与上帝对话”这类主观主题上线前一定要想清楚几个问题是否尊重不同信仰和价值观如果包含特定宗教视角的表述是否需要加说明文字是否包含对其他人群的冒犯性内容这需要逐条检查。你是否获得使用该 LLM 服务商进行公开展示的许可如果后续想商用内容版权归属要提前确认。不要因为项目是小规模演示就忽略这些问题。网站一旦部署到公网作者就要对全部展示内容负责。10.3 工程化建议如果想把这个思路做成更通用的工具可以继续扩展用 LLM API 同时请求多个模型做回答对比展示。把提示词列表做成配置文件方便复用。接入 MCP Client 或 Agent 框架让它能调用外部信息回答“上帝视角”下的具体问题。加一个定时任务每天自动生成新问题并更新网站内容。11. 总结这个项目的亮点不在于模型多强而在于它把一个简单的 LLM 调用扩展成了一个完整的、可访问的网站。它用最小成本展示了“想法 - API - 内容 - 部署”的完整链路对第一次做 LLM 应用的人来说是一份很好的上手参考。最值得先验证的是三件事提示词是否稳定产出合格内容、API 调用是否正确解析、静态页面能否正常展示内容。最容易踩的坑也是三个API Key 泄露、回答被截断、跨域问题。这三个都提前处理好项目基本就稳了。后续想深入可以选择一个方向接入本地模型降低调用成本、加批量任务让内容更丰富、或者把交互升级成“点击按钮让模型实时回答”让网站从静态展示变成动态体验。方向很多门槛不高建议直接拿一个具体问题开始写代码跑通第一版就是最大进步。
返回列表