从Web 1.0到LLM AI时代：前端如何直接调用大模型服务

前言

在这个AI浪潮席卷全球的时代，你是否还在疑惑"大模型在哪？"如何在自己的项目中集成AI能力？今天我们就来聊聊如何用最简单的方式，让你的前端页面直接调用大模型服务，告别复杂的后端配置，拥抱LLM AI时代的开发新范式。

大模型在哪？从疑惑到实践

很多开发者在初次接触AI开发时都会问： "大模型在哪？"

实际上，大模型就在云端！像DeepSeek、OpenAI、Claude等厂商都提供了基于HTTP API的LLM服务，我们只需要通过简单的API调用就能获得强大的AI能力。

Web开发的三个时代

让我们先回顾一下Web开发的演进历程：

Web 1.0时代：静态页面的黄金年代

arduino 复制代码

// Web 1.0时代：HTML/CSS/JS 服务器端Java返回的JS只做简单的交互
// 页面主要由服务器渲染，JS只负责简单的DOM操作

在这个时代，JavaScript主要用于表单验证、简单的DOM交互，页面内容基本都是服务器端渲染好的静态内容。

Web 2.0时代：动态交互的崛起

javascript 复制代码

// Web 2.0时代：JS主动的请求后端服务器，动态页面
// 异步请求成为主流，SPA应用兴起
fetch('https://api.github.com/users/user.name/repos')
  .then(res => res.json())
  .then(data => {
    console.log(data);
    document.querySelector('#reply').innerHTML += data.map(repo =>`
    <ul>
      <li>${repo.name}</li>
    </ul> 
    `).join('')
  })

Web 2.0时代最大的特点就是JS主动发起HTTP请求，实现了真正的动态页面。Ajax技术让我们可以在不刷新页面的情况下获取数据，极大提升了用户体验。

LLM AI时代：智能化的全新篇章

现在我们迎来了LLM AI时代，前端可以直接调用大模型服务，让网页具备真正的"智能"：

arduino 复制代码

// LLM AI时代：直接调用大模型API
const endpoint = "https://api.deepseek.com/chat/completions"
const headers = {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_API_KEY'
}

const payload = {
    model: 'deepseek-chat',
    messages: [
        {role: 'system', content: 'You are a helpful assistant.'},
        {role: 'user', content: '你好 Deepseek'}
    ]
}

WebLLM项目：最简单的AI集成方案

让我们看看如何用最简洁的代码实现AI功能。这个WebLLM项目展示了一个纯前端的AI应用架构：

项目结构

bash 复制代码

webllm/
├── index.html      # 主页面文件
├── css/
│   └── main.css    # 全局样式文件
└── js/
    └── main.js     # 主逻辑脚本

核心实现

HTML结构（简洁至上）：

xml 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebLLM</title>
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
    <h1>Hello Deepseek</h1>
    <div id="reply"></div>
    <script src="./js/main.js"></script>
</body>
</html>

样式设计（现代简约）：

css 复制代码

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
    line-height: 1.6;
}
h1 {
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
    padding-bottom: 0.5rem;
}

fetch请求：连接AI服务的桥梁

关键的JavaScript代码展示了如何通过fetch请求调用LLM服务：

javascript 复制代码

fetch(endpoint, {
    method: 'POST',
    headers: headers,
    body: JSON.stringify(payload)
}).then(res => res.json())
.then(data => {
    console.log(data);
    document.querySelector('#reply').innerHTML += data.choices[0].message.content
})

这段代码的精妙之处在于：

HTTP请求：使用标准的HTTP POST请求调用AI API
JSON格式：请求和响应都采用JSON格式，简单易处理
异步处理：利用Promise链式调用处理异步响应
DOM操作：直接将AI返回的内容渲染到页面

LLM服务的标准化接口

现代LLM服务基本都遵循OpenAI的API标准：

arduino 复制代码

const payload = {
    model: 'deepseek-chat',           // 指定模型
    messages: [                       // 对话历史
        {role: 'system', content: 'You are a helpful assistant.'},
        {role: 'user', content: '你好 Deepseek'}
    ]
}

服务器端返回的标准格式：

json 复制代码

{
    "choices": [
        {
            "message": {
                "role": "assistant",
                "content": "你好！我是DeepSeek，很高兴为您服务..."
            }
        }
    ]
}

技术优势与应用场景

技术优势

零后端依赖：直接从前端调用AI服务，无需搭建后端
快速部署：一个HTML文件即可运行
成本控制：按API调用量付费，避免服务器维护成本
技术门槛低：使用原生HTML/CSS/JS，无需学习复杂框架

应用场景

AI助手网页：快速搭建个人AI助手
原型验证：验证AI功能的可行性
教学演示：展示AI API的使用方法
小工具开发：开发简单的AI小工具

注意事项与最佳实践

安全考虑

arduino 复制代码

// 生产环境中不要在前端暴露API密钥
// 建议使用环境变量或后端代理
const headers = {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_API_KEY' // 实际项目中需要保护
}

错误处理

typescript 复制代码

fetch(endpoint, {
    method: 'POST',
    headers: headers,
    body: JSON.stringify(payload)
})
.then(res => {
    if (!res.ok) {
        throw new Error(`HTTP error! status: ${res.status}`);
    }
    return res.json();
})
.then(data => {
    document.querySelector('#reply').innerHTML += data.choices[0].message.content;
})
.catch(error => {
    console.error('Error:', error);
    document.querySelector('#reply').innerHTML += '请求失败，请稍后重试';
});

总结

从Web 1.0的静态页面，到Web 2.0的动态交互，再到如今的LLM AI时代，HTTP请求 始终是连接前后端的核心技术。WebLLM项目展示了一个重要趋势：AI能力的民主化。

不再需要复杂的机器学习知识，不再需要昂贵的GPU资源，仅仅通过几行JavaScript代码，我们就能让网页拥有AI的能力。这就是LLM AI时代的魅力所在。

大模型在哪？就在一个API调用的距离。