هوش مصنوعی: مرز جدید برای توسعه دهندگان Frontend

تقاضا برای برنامه های کاربردی مبتنی بر هوش مصنوعی با سرعت زیادی در حال رشد است. به‌عنوان یک توسعه‌دهنده فرانت‌اند، می‌توانید از این روند استفاده کنید و با ادغام مهارت‌های خود در توسعه فرانت‌اند با فناوری‌های هوش مصنوعی، شغل خود را ارتقا دهید.

این ادغام به شما امکان می دهد برنامه های هوشمندی بسازید که تجربیات کاربر را بهبود می بخشد و بینش های ارزشمندی را ارائه می دهد که می تواند تأثیر مثبتی بر تصمیمات کاربر داشته باشد.

برای برجسته کردن فرصت های هیجان انگیز در حال حاضر، این آمار را در نظر بگیرید:

در سال 2023، بیش از 60 درصد از استارت‌آپ‌های پذیرفته شده در Y Combinator مشهور بر روی هوش مصنوعی متمرکز بودند.

علیرغم کاهش سرعت سرمایه‌گذاری‌های جهانی، سرمایه‌گذاری به استارت‌آپ‌های هوش مصنوعی افزایش یافت و در سال 2023 به 50 میلیارد دلار رسید.

در این راهنما، موارد زیر را پوشش خواهیم داد:

نقش توسعه دهندگان فرانت اند در پیشبرد نوآوری هوش مصنوعی.

مراحل کلیدی که باید هنگام ادغام سرویس‌های هوش مصنوعی در گردش کار ظاهری خود دنبال کنید

چگونه از عملکرد و امنیت بهینه برنامه های هوش مصنوعی که می سازید اطمینان حاصل کنید.

در نهایت، ما نکات 1-3 را برای ساختن یک منتقد وب سایت هوش مصنوعی که می تواند وب سایت ها و برنامه های نمونه کار شما را با استفاده از مدل GPT4-Vision React و OpenAI برشته کند، ترکیب می کنیم.

پیش نیازها

دانش HTML

درک اولیه از قلاب های React

Node و npm روی رایانه محلی شما نصب شده است.

نقش توسعه دهندگان Frontend در ایجاد تجربیات مبتنی بر هوش مصنوعی

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

آنها مسئول ایجاد رابط کاربری، طراحی جریان های تعامل و ادغام عملکردهای هوش مصنوعی به طور یکپارچه در برنامه هستند.

توسعه دهندگان فرانت اند همچنین با توسعه دهندگان بک اند و دانشمندان داده همکاری می کنند تا از عملکرد کارآمد و دقیق الگوریتم های هوش مصنوعی اطمینان حاصل کنند.

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

چگونه خدمات هوش مصنوعی را در گردش کار Frontend خود ادغام کنیم

برای ادغام خدمات هوش مصنوعی در گردش کار ظاهری خود، باید یک رویکرد سیستماتیک را دنبال کنید که شامل این مراحل است:

کار یا مشکلی را که قابلیت‌های هوش مصنوعی می‌توانند حل یا تقویت کنند، شناسایی کنید.

شرکت‌های هوش مصنوعی را که API و نود SDK را برای قابلیت‌های هوش مصنوعی خاص مورد نیاز برای کار یا مشکلی که شناسایی کرده‌اید، ارائه می‌کنند، تحقیق و ارزیابی کنید. با درک پیشنهادات شرکت های مختلف هوش مصنوعی، می توانید مناسب ترین خدمات هوش مصنوعی را برای ادغام در برنامه های خود انتخاب کنید.

بیایید نگاهی به چند مدل محبوب هوش مصنوعی و وظایف اصلی آنها بیندازیم:

می‌توانید تعداد بیشتری از این مدل‌ها را در صفحات مدل‌های کاوش Replicate Explore و Huggingface کاوش کنید.

با استفاده از APIهای ارائه شده و SDKهای گره، خدمات AI انتخاب شده را در برنامه frontend خود ادغام کنید. این شامل درک مستندات و دستورالعمل‌هایی است که شرکت‌های هوش مصنوعی برای اطمینان از یکپارچگی یکپارچه و استفاده مناسب از قابلیت‌های هوش مصنوعی ارائه می‌کنند.

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

همچنین طراحی با همدلی با ارائه توضیحات و تجسم‌های واضح و ایجاد حس کنترل و مالکیت بر خروجی‌های تولید شده توسط هوش مصنوعی به کاربران بسیار مهم است.

کاربرد مثال

بیایید یک مثال را مرور کنیم. فرض کنید می خواهید یک مولد میم سفارشی بسازید. در این صورت، باید مدل‌های هوش مصنوعی را جستجو کنید که به طور خاص برای کار با تصاویر آموزش دیده‌اند، مانند Stability's Stable Diffusion و OpenAI's DALL·E 3.

پس از آن، می‌توانید بهترین APIها و SDK‌هایی را که می‌توانید برای استفاده از این مدل‌های هوش مصنوعی و ایجاد یک نمونه اولیه استفاده کنید، کاوش کنید.

برای نشان دادن، بیایید از Replicate Node SDK استفاده کنیم، که روشی مناسب برای تعامل با مدل Stable Diffusion AI و راه‌اندازی یک برنامه Node.js را ارائه می‌کند که بعداً می‌توانیم آن را در برنامه React خود ادغام کنیم.

مرحله 1. رمز خود را از https://replicate.com/account دریافت کنید
مرحله 2: Node SDK را با دستور npm نصب کنید: npm install replicate
مرحله 3: مدل Stable Diffusion AI را از طریق Replicate SDK جستجو کنید.

 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 تصویر دریافت می‌کنید که می‌توانید به راحتی آن را در برنامه frontend خود نمایش دهید. https://replicate.delivery/pbxt/ng6Tb0HNdzYwFZXMNv3qmIBxc2GIwU4t7edephtDvuWZ5wNSA/out-0.png

نحوه بهینه سازی عملکرد و امنیت در برنامه های Frontend مبتنی بر هوش مصنوعی

بهینه سازی عملکرد و امنیت در برنامه های frontend مبتنی بر هوش مصنوعی برای ایجاد یک تجربه کاربری روان و همچنین برای محافظت از داده ها ضروری است.

خوشبختانه، تکنیک‌های فهرست‌شده در زیر شبیه به روش‌های استاندارد در توسعه‌ی frontend سنتی هستند. این همپوشانی به این معنی است که توسعه دهندگانی که با بهینه‌سازی و شیوه‌های امنیتی معمولی آشنا هستند، می‌توانند به راحتی آن مهارت‌ها را با خواسته‌های منحصربه‌فرد برنامه‌های مبتنی بر هوش مصنوعی تطبیق داده و به کار ببرند:

برای کاهش زمان بارگذاری اولیه و بهبود عملکرد، از تکنیک های بارگذاری تنبل و تقسیم کد استفاده کنید.

از تکنیک های کش و بهینه سازی منابع برای به حداقل رساندن تماس های غیر ضروری API و بهبود سرعت بازیابی داده ها استفاده کنید.

پیاده‌سازی نقاط پایانی امن API و مکانیسم‌های احراز هویت برای اطمینان از دسترسی مجاز به خدمات و داده‌های هوش مصنوعی.

چگونه با استفاده از مدل GPT4-Vision React و OpenAI یک منتقد وب سایت هوش مصنوعی بسازیم

در این بخش، ما یک برنامه React می سازیم که از یک مدل Vision برای تجزیه و تحلیل تصاویر وب سایت ها و ارائه بازخورد استفاده می کند. برای انجام این کار، گردش کار 4 مرحله‌ای را که قبلاً برای ادغام سرویس‌های هوش مصنوعی در برنامه‌های ظاهری توضیح داده شد، دنبال می‌کنیم.

از آنجایی که ما به یک مدل بینایی نیاز داریم که بتواند تصاویر را تجزیه و تحلیل کند، باید به گزینه های موجود در بازار نگاه کنیم که می توانید آنها را اینجا و اینجا بیابید. پس از تحلیل معیارهای عملکرد مدل‌های بینایی موجود ، به سراغ مدل بینایی GPT-4 OpenAI می‌رویم.

مدل بینایی GPT-4 OpenAI یک مدل هوش مصنوعی پیشرفته است که در اواخر سال 2023 منتشر شد. این مدل می تواند تصاویر را به عنوان ورودی بپذیرد، آنها را تجزیه و تحلیل کند و بر اساس درخواست ها بازخورد دقیق ارائه دهد.

جدا از دلایل عملکرد، ما از آن برای برنامه نقد وب سایت خود استفاده خواهیم کرد زیرا قیمت نسبتاً ارزان تری را نسبت به سایر مدل های ویژن ارائه می دهد و دارای یک نقطه پایانی 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 را نصب کنید

این به شما کمک می‌کند پاسخ‌های متنی مدل را در قالبی قابل خواندن قالب‌بندی کنید.

 npm install react-markdown

مرحله 4: نصب npm را اجرا کنید

حالا npm install اجرا کنید:

 npm install npm run dev

مرحله 5: حالت را در React مدیریت کنید

در این مرحله، از قلاب های useState و useEffect React برای مدیریت وضعیت و رسیدگی به درخواست ناهمزمان به API OpenAI در src/App.jsx استفاده خواهید کرد.

برای ورودی تصویر خود، از یک اسکرین شات از بخش قهرمان صفحه اصلی freeCodeCamp که در یک پلتفرم ذخیره سازی تصویر مانند IMGBB آپلود شده است استفاده خواهیم کرد. با خیال راحت از هر 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 پاسخ هوش مصنوعی ( response ) و وضعیت بارگذاری ( isLoading ) را مدیریت می‌کنند.

fetchUICriticResponse یک تابع ناهمزمان است که پاسخ را با استفاده از OpenAI API واکشی می کند.

در حالی که پاسخ در حال واکشی است، مؤلفه یک پیام در حال بارگذاری ارائه می دهد. هنگامی که واکشی کامل شد، با استفاده از بسته React Markdown که قبلا نصب کرده بودیم، پاسخ یا یک پیام بازگشتی را نمایش می دهد.

شما باید نتیجه ای مشابه تصویر زیر دریافت کنید که حاوی نتیجه تجزیه و تحلیل مدل GPT4 Vision از تصویر ارائه شده و درخواست داده شده است.

همانطور که می بینید، تجزیه و تحلیل از طریق هر عنصر در صفحه انجام می شود و بازخورد - هم مثبت و هم سازنده تر - در مورد مواردی مانند وضوح ناوبری، استفاده از فضای خالی، توابع جستجو و غیره ارائه می دهد.

توجه: به دلیل نگرانی های امنیتی، استفاده مستقیم از کلیدهای API در قسمت جلویی توصیه نمی شود. مثال فقط برای یادگیری است. در مرحله تولید، یک فایل .env ایجاد کنید و YOUR_OPENAI_API_KEY خود را در آن قرار دهید.

بعد چه می شود؟

می‌توانید این نمونه‌های کد را با ایجاد یک فیلد ورودی ساده برای کاربران که لینک‌های تصویر خود را وارد کنند، تقویت کنید. همچنین می‌توانید یک آپلودکننده تصویر راه‌اندازی کنید تا کاربران بتوانند تصاویر را از دستگاه محلی خود آپلود کنند.

لطفاً برای دستورالعمل های مربوط به نحوه دستیابی به این امر به اسناد رسمی مراجعه کنید.

هنگام تصمیم گیری برای توسعه برنامه های هوش مصنوعی، مهم است که تأثیر مورد نظر، نیازهای کاربر و منابع موجود را در نظر بگیرید.

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

نتیجه

اگر علاقه مند به گنجاندن هوش مصنوعی در برنامه های ظاهری خود هستید، با کاوش در مدل های AI منبع باز و بسته شروع کنید. همچنین می خواهید نحوه کار با API ها و کتابخانه های خارجی را نیز بدانید.

همچنین باید بر آشنایی با پاسخ‌های مدل هوش مصنوعی و تعامل تمرکز کنید.

با این دانش، می‌توانید خود را برای چندین نوآوری هوش مصنوعی آماده مصرف‌کننده قرار دهید که ظاهر می‌شوند و به خدمات یک توسعه‌دهنده ظاهری ماهر در ساخت برنامه‌های مبتنی بر هوش مصنوعی نیاز دارند.

خبرکاو