AI 前端是什么

AI 前端是什么

1️⃣ AI 前端是什么

AI 前端指的是直接在前端(网页、移动端、桌面端)集成 AI 功能的开发方式。它可以是用户直接操作的界面,也可以是通过前端调用 AI 模型提供智能服务。

特点:

  • 无需后端复杂处理:前端直接调用 AI API(例如 OpenAI、Anthropic、Azure OpenAI)就能生成文本、图像或做分析。
  • 实时交互:用户操作和 AI 响应几乎是即时的。
  • 典型场景
    • 聊天机器人(ChatGPT 风格的对话)
    • 文本生成 / 代码生成 / 自动文案
    • 图片生成、智能推荐
    • 表单自动填写、智能校验

示例(React 前端直接调用 AI):

const response =awaitfetch("https://api.openai.com/v1/chat/completions",{ method:"POST", headers:{"Content-Type":"application/json","Authorization":`Bearer ${API_KEY}`}, body:JSON.stringify({ model:"gpt-4", messages:[{ role:"user", content:"写一段前端代码"}]})});const data =await response.json(); console.log(data.choices[0].message.content);
前端调用 API,AI 返回结果,前端直接展示,无需自己训练模型。

2️⃣ 什么是大模型(LLM, Large Language Model)

大模型是指参数量巨大、训练在海量数据上的 AI 模型。

  • **LLM(Large Language Model)**是一类大模型,专门用来处理和生成自然语言。
  • 特点
    • 能理解文本上下文(Context)
    • 能生成连贯、有逻辑的文本
    • 能处理多种任务:翻译、写作、问答、摘要、代码生成等
  • 示例模型
    • OpenAI GPT 系列(GPT-3, GPT-4)
    • LLaMA, MPT, Claude 等

3️⃣ 为什么前端可以直接接入 AI

以前 AI 模型很大,前端无法承载,需要专门的服务器做推理(inference)。现在有几个原因让前端可以直接接入:

  1. API 化服务:大模型部署在云端,前端只需要通过 HTTP/HTTPS 调用即可。
  2. 轻量 SDK:比如 OpenAI JS SDK 或者 LangChain JS,可以直接在前端使用。
  3. 推理开销转移到云端:前端只负责请求和展示,模型计算在云端完成。
  4. 安全性:API Key 可通过代理或后端中转保护,也可以直接在前端用受限 Key。

4️⃣ 核心概念:Prompt、Token、Embedding、Context

4.1 Prompt

Prompt = “输入给 AI 的指令或问题”。

  • 可以是自然语言、代码、结构化文本。

例子:

写一段 JavaScript 函数,计算数组中最大值 
4.2 Token

Token = AI 模型理解的最小单元。

  • 一个 token 大概等于 4 个英文字符或 1 个汉字。
  • 模型按 token 计算上下文长度和消耗(计费单位)。

例:

"Hello, world!" → 可能被分成 4 个 token 
4.3 Embedding

Embedding = 将文本、图像或其他数据转成 向量(数字数组) 的表示方式。

  • 目的是让计算机可以量化理解文本或语义相似度。就像计算机不理解你写的代码,但是他理解二进制。
  • 用途:
    • 文本检索(找相似问题)
    • 语义搜索
    • 聚类或推荐

例:

"我喜欢苹果" → [0.12, 0.98, ...] (向量表示) 
4.4 Context

Context = AI 在生成回答时能“看到”的信息范围。

  • 对话中,context 就是之前所有消息的集合。
  • 作用:让 AI 根据历史信息生成连贯回答。
  • 注意:模型有最大上下文长度,超出就会被截断。

🔹 总结关系

前端 → 发送 Prompt → 模型按 Token 处理 → 生成结果 Embedding 用于语义理解或检索 Context 用于保留上下文信息 

Read more

Vue3 前端专属配置(VSCode settings.json + .prettierrc)

Vue3 前端专属配置(VSCode settings.json + .prettierrc)

直接复制即用,完美适配 Vue3 + Vite + JavaScript/TypeScript 项目,解决格式化冲突、缩进、引号、换行等所有问题。 一、先确认你已安装这2个插件 打开 VSCode 扩展面板 Ctrl+Shift+X,安装: 1. Vue Language Features (Volar) → Vue3 官方必备插件 2. Prettier - Code formatter → 代码格式化核心插件 二、VSCode settings.json 配置(Vue3专用) 打开方式: Ctrl+Shift+P → 输入 Open Settings (JSON) → 回车,全选替换下面代码: {// ==================== Vue3

cpolar远程辅助Open-Lovable实现随时随地克隆网页超实用

cpolar远程辅助Open-Lovable实现随时随地克隆网页超实用

Open-Lovable 是一款面向前端开发者的开源工具,核心功能是将任意网页克隆为可编辑的 React 应用,还支持多类 AI 模型辅助生成代码,适配新手学习、中小企业原型开发等场景。它的优点很贴合实际需求:拆分代码组件清晰,保留完整 CSS 样式,能大幅减少手动搭建页面框架的时间,比如新手学习电商网站布局时,不用再逐行拆解复杂的源代码,直接克隆后就能看清 header、footer 等组件的逻辑,中小企业做产品原型时,克隆同类网页后稍作修改就能快速出效果。 使用这款工具时也有一些实用的小提醒💡:克隆的网页仅能还原静态布局和样式,像登录态、动态交互这类内容无法完整复刻,而且使用前需要准备好 E2B、Firecrawl 等平台的 API 密钥,密钥保管要注意隐私,避免外泄造成不必要的损失。 不过 Open-Lovable 默认只能在本地局域网内使用,这会带来不少不便:比如开发者在家调试的克隆项目,想让公司的设计师远程查看效果,只能通过传文件、远程协助的方式,不仅耗时,还可能出现版本不一致的问题;要是出差在外需要修改克隆的代码,没法直接访问本地的工具,只能等回到电脑前操作,耽误工作

web网络安全-每日一练-Training-WWW-Robots

web网络安全-每日一练-Training-WWW-Robots

练习题目:Training-WWW-Robots 练习网站(攻防世界):https://adworld.xctf.org.cn/ 解题步骤 1、打开题目场景 在这个小小的训练挑战中,你将了解Repbots_exclusion_standard。 robots.txt文件被网络爬虫用于检查它们是否被允许爬取和索引你的网站,或者只是网站的部分内容。 有时这些文件会暴露目录结构,而不是保护内容不被爬取。 祝你玩得开心! 2、利用Robots协议 发现根目录下有一个 f10g.php 的文件,访问这个文件内容 3、访问网站根目录的 f10g.php 文件 得到正确答案 知识点讲解:Web 安全信息收集:robots.txt 的原理、利用与防御实战 ⚠️ 警告: 本文仅用于授权测试和安全学习,未经授权扫描目标属于违法行为。 一、写在前面:关于「Repbots」的纠正

前端存储三剑客:localStorage、sessionStorage、cookie 超详细对比

前端存储三剑客:localStorage、sessionStorage、cookie 超详细对比

在前端开发中,数据本地存储是提升用户体验、优化性能、实现持久化状态的核心技术。我们最常用的就是 localStorage、sessionStorage 和 cookie 这三种方案,但很多开发者容易混淆它们的用法、存储特性和适用场景。 这篇博客就用最清晰、最实用的方式,一次性讲透三者的区别、用法和最佳实践。 一、先搞懂核心概念 * cookie:最早的客户端存储方案,会随 HTTP 请求自动发送到服务器,主要用于身份验证、会话保持。 * localStorage:HTML5 新增的本地存储,持久化存储,手动清除才会消失,不参与网络请求。 * sessionStorage:HTML5 新增的会话存储,页面会话期间有效,关闭标签页 / 浏览器就清空。 二、核心区别一张表看懂 表格 特性localStoragesessionStoragecookie生命周期永久有效,手动清除仅当前会话(关闭标签 / 浏览器失效)可设置过期时间,默认会话级存储容量约 5MB约 5MB很小,仅 4KB与服务端通信不参与不参与自动携带在