ادغام هوش مصنوعی در وب سایت شما: راهنمای گام به گام با ReactJS و OpenAI

ادغام هوش مصنوعی در وب سایت شما می تواند تجربه کاربر را به طور قابل توجهی افزایش دهد، به خصوص در هنگام سروکار با پشتیبانی مشتری.

در این مقاله، شما را از طریق فرآیند ادغام آخرین مدل OpenAI در یک برنامه Next.js React برای ایجاد یک مرکز پرسش‌های متداول هوشمند برای یک شرکت پشتیبانی راهنمایی می‌کنیم.

این هوش مصنوعی با یک فوریت آموزش داده می شود و از منابع خارجی به عنوان پایگاه های دانش برای ارائه پاسخ های دقیق و مرتبط استفاده می کند.

مرحله 1: راه اندازی پروژه

ابتدا باید برنامه Next.js خود را راه اندازی کنیم. اگر Next.js را نصب نکرده‌اید، می‌توانید با اجرای:

npx create-next-app@latest faq-hub
cd faq-hub

بعد، وابستگی های لازم را نصب کنید:

npm install openai react-markdown

مرحله 2: پیکربندی OpenAI API

برای تعامل با API OpenAI، به یک کلید API نیاز دارید. اگر قبلاً ثبت نام نکرده اید در وب سایت OpenAI ثبت نام کنید و کلید API خود را از داشبورد دریافت کنید.

یک فایل با نام .env.local در ریشه پروژه خود ایجاد کنید تا کلید API خود را ذخیره کنید:

NEXT_PUBLIC_OPENAI_API_KEY=your_openai_api_key_here

مرحله 3: ایجاد سرویس هوش مصنوعی

یک دایرکتوری جدید به نام services ایجاد کنید و داخل آن فایلی به نام openai.js ایجاد کنید. این فایل حاوی تابعی برای تعامل با OpenAI API است:

// services/openai.js
export async function fetchOpenAIResponse(prompt) {
const response = await fetch('https://api.openai.com/v1/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': Bearer ${process.env.NEXT_PUBLIC_OPENAI_API_KEY},
},
body: JSON.stringify({
model: 'text-davinci-003', // Replace with the latest model
prompt: prompt,
max_tokens: 150,
}),
});
const data = await response.json();
return data.choices[0].text.trim();
}

مرحله 4: ایجاد کامپوننت سؤالات متداول

حالا بیایید یک کامپوننت React ایجاد کنیم تا بخش پرسش و پاسخ را نمایش دهد. یک دایرکتوری جدید به نام Components ایجاد کنید و داخل آن فایلی به نام FAQHub.js ایجاد کنید:

// components/FAQHub.js
import React, { useState } from 'react';
import { fetchOpenAIResponse } from '../services/openai';
import ReactMarkdown from 'react-markdown';
const FAQHub = () => {
const [query, setQuery] = useState('');
const [response, setResponse] = useState('');
const handleInputChange = (e) => {
setQuery(e.target.value);
};
const handleSubmit = async (e) => {
e.preventDefault();
const aiResponse = await fetchOpenAIResponse(query);
setResponse(aiResponse);
};
return (

);
};
export default FAQHub;

مرحله 5: ادغام مؤلفه سؤالات متداول در برنامه Next.js

فایل pages/index.js را باز کنید و جزء FAQHub را وارد کنید:

// pages/index.js
import FAQHub from '../components/FAQHub';
export default function Home() {
return (

);
}

مرحله 6: آموزش مدل با منابع سریع و خارجی

برای بهبود پاسخ‌های مدل، می‌توانید آن را با یک اعلان خاص مشخص کنید و از پایگاه‌های دانش خارجی استفاده کنید. در اینجا مثالی از نحوه تغییر تابع fetchOpenAIResponse برای اضافه کردن یک درخواست سفارشی آورده شده است:

// services/openai.js
export async function fetchOpenAIResponse(query) {
const prompt =
You are a highly intelligent FAQ bot. Answer the following question based on the knowledge from our support database and external sources:
Question: ${query};
const response = await fetch('https://api.openai.com/v1/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization':حامل ${process.env.NEXT_PUBLIC_OPENAI_API_KEY},
},
body: JSON.stringify({
model: 'text-davinci-003', // Replace with the latest model
prompt: prompt,
max_tokens: 150,
}),
});
const data = await response.json();
return data.choices[0].text.trim();
}

مرحله 7: استقرار برنامه

هنگامی که برنامه را به صورت محلی آزمایش کردید و مطمئن شدید که همه چیز طبق انتظار عمل می کند، می توانید برنامه Next.js خود را در پلتفرم هایی مانند Vercel یا Netlify مستقر کنید.

به Vercel مستقر شوید
اگر Vercel را انتخاب کنید، می توانید برنامه خود را با دستورات زیر مستقر کنید:

npm install -g vercel
vercel

برای پیوند دادن پروژه خود و استقرار آن، دستورالعمل ها را دنبال کنید.

نتیجه

تبریک می گویم! شما با موفقیت OpenAI را در برنامه Next.js React خود ادغام کرده اید تا یک مرکز پرسش و پاسخ هوشمند ایجاد کنید. با استفاده از هوش مصنوعی، می‌توانید پاسخ‌های دقیق و پویا به درخواست‌های کاربران ارائه دهید و تجربه پشتیبانی آن‌ها را افزایش دهید. به خاطر داشته باشید که کلیدهای API خود را ایمن نگه دارید و استفاده را کنترل کنید تا از دسترسی غیرمجاز و سوء استفاده احتمالی جلوگیری کنید.

کد نویسی مبارک!