对人工智能驱动的应用程序的需求正在快速增长。作为前端开发人员，您可以利用这一趋势，通过将您在前端开发中的技能与 AI 技术相结合来推进您的职业生涯。
通过这种集成，您可以构建智能应用程序，以改善用户体验并提供有价值的见解，从而对用户的决策产生积极影响。
为了突出目前令人兴奋的机会，请考虑以下统计数据：
2023 年，超过 60% 的初创公司被著名的 Y Combinator 录取，专注于人工智能。
尽管全球投资放缓，但人工智能初创公司的资金激增，并在 2023 年达到了令人印象深刻的 500 亿美元。
在本指南中，我们将介绍以下内容：
前端开发人员在推进 AI 创新中的作用。
将 AI 服务集成到前端工作流中时要遵循的关键步骤
如何确保您构建的 AI 应用程序具有最佳性能和安全性。
最后，我们将结合 1-3 中的技巧来构建一个 AI 网站评论家，它可以使用 React 和 OpenAI 的 GPT4-Vision 模型烘焙您的网站和投资组合应用程序。
先决条件
HTML知识
对 React hooks 的基本了解
本地计算机上安装的 Node 和 npm。
前端开发人员在打造 AI 驱动体验中的作用
前端开发人员利用他们在用户界面设计、数据可视化和技术实施方面的专业知识，在打造 AI 驱动的体验方面发挥着至关重要的作用。
他们负责创建用户界面、设计交互流程以及将 AI 功能无缝集成到应用程序中。
前端开发人员还与后端开发人员和数据科学家合作，以确保 AI 算法的高效和准确运行。
此外，前端开发人员在利用最新 AI 模型的 Web 应用程序的性能方面发挥着关键作用。他们负责优化应用程序的性能，确保跨平台兼容性，并实施适应不同设备和屏幕尺寸的响应式设计。
如何将 AI 服务集成到前端工作流中
若要将 AI 服务集成到前端工作流中，应遵循包括以下步骤的系统方法：
确定 AI 功能可以解决或增强的任务或问题。
研究和评估为所确定的任务或问题所需的特定 AI 功能提供 API 和节点 SDK 的 AI 公司。通过了解不同 AI 公司的产品，您可以选择最合适的 AI 服务来集成到您的应用程序中。
让我们来看看一些流行的 AI 模型及其核心任务：
AI模型 任务
GPT-4的 多模态模型（能够处理文本、图像等）
稳定扩散 文本到图像生成式 AI 模型
米斯特拉尔 7B 多模态模型（能够处理文本、图像等）
语音盒 语音生成式 AI 模型
达尔·E 3 文本到图像生成式 AI 模型
您可以在“复制探索”和“拥抱脸”探索模型页面上探索更多此类模型。
利用提供的 API 和节点 SDK，将选定的 AI 服务集成到您的前端应用程序中。这涉及了解 AI 公司提供的文档和指南，以确保无缝集成和正确利用 AI 功能。
测试和验证前端应用程序中的集成 AI 服务，以确保准确高效的功能。此步骤对于识别和解决技术问题或优化要求至关重要。
通过提供清晰的解释和可视化，让用户对 AI 生成的输出有一种控制感和所有权，以同理心进行设计也很重要。
应用实例
让我们看一个例子。假设你想制作一个自定义的模因生成器。在这种情况下，您应该搜索专门训练用于处理图像的 AI 模型，例如 Stability 的 Stable Diffusion 和 OpenAI 的 DALL·E 3.
之后，您可以探索可用于利用这些 AI 模型并创建基本示例的最佳 API 和 SDK。
为了说明这一点，让我们使用 Replicate Node SDK，它提供了一种方便的方法来与 Stable Diffusion AI 模型进行交互，并设置一个基本的 Node.js 程序，我们以后可以将其集成到我们的 React 应用程序中。
步骤 1。从 https://replicate.com/account 获取令牌
第 2 步：使用 npm 命令安装 Node SDK：Step 2： Install the Node SDK with the npm command： 步骤 3：
通过复制 SDK 查询 Stable Diffusion AI 模型。npm install replicate
const Replicate = require("replicate");
const replicate = new Replicate({
auth: "", // defaults to process.env.REPLICATE_API_TOKEN
});
async function iLoveCats(){
const model = "stability-ai/stable-diffusion:27b93a2413e7f36cd83da926f3656280b2931564ff050bf9575f1fdf9bcd7478";
const input = {
prompt: "a cat wearing a suit",
};
const output = await replicate.run(model, { input });
console.log(output[0]);
}
iLoveCats()
当您记录输出时，您会获得一个图像 URL，您可以轻松地在前端应用程序中显示该 URL。https://replicate.delivery/pbxt/ng6Tb0HNdzYwFZXMNv3qmIBxc2GIwU4t7edephtDvuWZ5wNSA/out-0.png
一只穿西装的猫一只穿西装的猫。
如何优化 AI 驱动的前端应用程序的性能和安全性
优化 AI 驱动的前端应用程序的性能和安全性对于创建流畅的用户体验和数据保护至关重要。
值得庆幸的是，下面列出的技术类似于传统前端开发中的标准做法。这种重叠意味着熟悉传统前端优化和安全实践的开发人员可以更轻松地适应和应用这些技能来满足 AI 驱动应用程序的独特需求：
采用延迟加载和代码拆分技术来减少初始加载时间并提高性能。
利用缓存和资源优化技术来最大限度地减少不必要的 API 调用并提高数据检索速度。
实施安全的 API 端点和身份验证机制，以确保仅授权访问 AI 服务和数据。
如何使用 React 和 OpenAI 的 GPT4-Vision 模型构建 AI 网站评论家
在本节中，我们将构建一个 React 应用程序，该应用程序利用 Vision 模型来分析网站图像并提供反馈。为此，我们将遵循前面描述的 4 步工作流程，将 AI 服务集成到前端应用程序中。
由于我们需要一个可以分析图像的视觉模型，我们应该看看市场上的可用选项，你可以在这里和这里找到。在检查了可用视觉模型的性能基准后，我们将使用 OpenAI 的 GPT-4 视觉模型。
OpenAI 的 GPT-4 视觉模型是 2023 年底发布的最先进的 AI 模型。它可以接受图像作为输入，对其进行分析，并根据提示提供详细的反馈。
除了性能原因外，我们还将把它用于我们的网站评论应用程序，因为它提供比其他视觉模型相对便宜的价格，并且有一个易于使用的 API 端点，与流行的 OpenAI 开发人员界面捆绑在一起。
现在是时候将它集成到我们的 React 应用程序中了。
第 1 步：安装 React + Vite
您可以使用以下命令执行此操作：
npm create vite@latest my-website-critic -- --template react
第 2 步：安装 OpenAI Node 包
在您喜欢的 IDE 中打开生成的项目文件夹并安装 OpenAI Node 包，您将使用它与 GPT4 Vision 模型进行交互。
安装方法如下：
cd my-website-critic
npm install openai
第 3 步：安装 React Markdown 包
这将帮助您以可读的格式格式化模型的文本响应。
npm install react-markdown
第 4 步：运行 npm install
现在运行：npm install
npm install
npm run dev
第 5 步：在 React 中管理状态
在此步骤中，您将使用 React 的 useState 和 useEffect 钩子来管理状态并处理对 OpenAI API 的异步请求。src/App.jsx
freeCodeCamp 英雄部分freeCodeCamp 英雄部分
对于我们的图像输入，我们将使用上传到 IMGBB 等图像存储平台的 freeCodeCamp 主页英雄部分的屏幕截图。随意使用您想要的任何图像 URL。
这是代码 - 我将在下面解释它：
import { useState, useEffect } from 'react';import OpenAI from 'openai';import ReactMarkdown from 'react-markdown';const App = () => {
const [response, setResponse] = useState(null);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
const openai = new OpenAI({
apiKey: "YOUR_OPENAI_API_KEY",
dangerouslyAllowBrowser: true,
});
const fetchUICriticResponse = async () => {
setIsLoading(true);
try {
const result = await openai.chat.completions.create({
model: "gpt-4-vision-preview",
messages: [
{
role: "user",
content: [
{ type: "text", text: "You're an expert UI critic. What can I improve in this website?" },
{
type: "image_url",
image_url: {
"url": "https://i.ibb.co/sWM573X/Screenshot-2024-01-18-at-10-34-28-AM.png",
},
},
],
},
],
"max_tokens": 1500
});
if (result && result.choices && result.choices.length > 0 && result.choices[0].message) {
console.log(1, result);
setResponse(result.choices[0].message.content);
}
} catch (error) {
console.error("Error fetching AI response:", error);
} finally {
setIsLoading(false);
}
};
fetchUICriticResponse();
}, []);
return (
<div>
<h3>Hi! UI Expert Here</h3>
{isLoading ? (
<p>Loading...</p>
) : response ? (
<div>
<h3>My Feedback:</h3>
<ReactMarkdown>{response}</ReactMarkdown>
</div>
) : (
<p>No response received.</p>
)}
</div>
);};export default App;
在上面的组件中：
useEffect 挂钩在组件挂载时运行该函数。fetchUICriticResponse
useState 钩子管理 AI 响应 （response） 和加载状态 （isLoading）。
fetchUICriticResponse是一个使用 OpenAI API 获取响应的异步函数。
该组件在获取响应时呈现加载消息。获取完成后，它会使用我们之前安装的 React Markdown 包显示响应或回退消息。
您应该得到类似于下图的结果，其中包含对所提供图像和给定提示的 GPT4 Vision 模型分析结果。
GPT4 Vision 模型分析结果GPT4 Vision 模型分析的结果。
正如你所看到的，分析遍历了页面上的每个元素，并提供了关于导航清晰度、空格使用、搜索功能等方面的反馈——既有积极的，也有更具建设性的。
注意：出于安全考虑，不建议直接在前端处理 API 密钥。这个例子只是为了学习。在生产环境中，创建一个文件并放入其中。.envYOUR_OPENAI_API_KEY
下一步是什么？
您可以通过创建一个简单的输入字段供用户输入其图像链接来增强这些代码示例。您还可以设置图像上传器，以允许用户从其本地设备上传图像。
有关如何实现此目的的说明，请参阅官方文档。
在决定开发哪些 AI 应用程序时，考虑预期影响、用户需求和可用资源至关重要。
其他一些潜在的人工智能应用想法包括语言翻译应用程序和虚拟个人助理。
结论
如果您有兴趣将 AI 整合到前端应用中，请从探索开源和闭源 AI 模型开始。您还需要了解如何使用 API 和外部库。
您还应该专注于熟悉处理 AI 模型响应和交互性。
有了这些知识，您就可以为即将涌现的几项面向消费者的 AI 创新做好准备，这些创新需要熟练构建 AI 驱动的应用程序的前端开发人员的服务。