روش ساخت تیمی از نمایندگان هوش مصنوعی برای وب سایت خود به صورت رایگان با استفاده از Agno و Groq

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

نمایندگان هوش مصنوعی ابزارهای قدرتمندی برای خدمات مشتری هستند. داشتن آنها به سیستم عامل ها و وب سایت های شما ممکن است مانند یک گزاره گران قیمت با تخصص فنی بالا مورد نیاز به نظر برسد. اما با ظهور سیستم عامل های جدید مدرن مانند Agno و Groq ، اکنون می توانید یک سیستم عامل هوش مصنوعی را در وب سایت خود ادغام کنید و در حالی که هنوز در بودجه باقی می مانند.

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

این مقاله برای توسعه دهندگان است که با JavaScript ، React و Python آشنا هستند. حتی اگر درک کاملی از هر سه نفر نداشته باشید ، تا زمانی که یک مبتدی یا جوان باشید با برخی از دانش ، باید بتوانید حداقل برخی از کد ها را درک کنید. به عنوان مثال ، JavaScript و Python کاملاً شبیه به نحو هستند ، بنابراین اگر با هر یک از آنها تجربه دارید ، فقط خواندن از طریق پایگاه کد ایده ای را برای شما فراهم می کند که چگونه همه چیز کار می کند.

برای این آموزش ، ما یک وب سایت نمونه کارها ایجاد خواهیم کرد. اما می توانید بدون توجه به اینکه شما یک کارآفرین انفرادی هستید یا بخشی از یک شرکت بزرگ ، از ایده ها و مفاهیمی که در اینجا یاد می گیرید برای هر نوع وب سایت استفاده کنید. با استفاده از این ابزارها و چارچوب ها ، می توان حضور وب خود را بدون اینکه بیش از بودجه بدست آورید ، تغییر دهید.

فهرست مطالب

• پیش نیازهای

• عوامل AI چیست؟

• Agno و Groq Cloud چیست؟

• آنچه شما در حال ساختن خواهید بود

• ساخت باکتری پایتون ما

  • ایجاد یک حساب روی ابر ابر

  • تنظیم پروژه Python ما

  • کار روی پایگاه کد پایتون

  • باکتری پایتون ما را اجرا می کنیم

• ساخت جبهه React ما

• پایان

• با فناوری ، برنامه نویسی ، بهره وری و هوش مصنوعی به روز باشید

پیش نیازهای

• دانش قبلی از جاوا اسکریپت ، واکنش و پایتون

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

• یک حساب روی ابر ابر

• ویرایشگر کد/IDE مانند مکان نما ، Windsurf ، یا VS Code

عوامل AI چیست؟

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

Agno و Groq Cloud چیست؟

Agno یک کتابخانه سبک است که به شما امکان می دهد عوامل چند مدلی بسازید. این یک موتور استنتاج هوش مصنوعی است که برای بهینه سازی LLMS برای سرعت و عملکرد طراحی شده است. این بدان معنی است که می تواند استنتاج مدل AI فوق العاده سریع با کاهش تأخیر و بهبود استفاده از منابع را فراهم کند. این پتانسیل را دارد که بتواند سیستم عامل های استنتاج فعلی مانند Nvidia Tensorrt یا بغل کردن استنتاج متن متن Face (TGI) را جایگزین کند.

Groq Cloud یک پلتفرم استنتاج هوش مصنوعی مبتنی بر ابر است روی تراشه های Groq LPU (واحد پردازش زبان) ، که برای بار کاری AI فوق العاده کم و با تأخیر بهینه شده اند. Groq در نرخ تولید با سرعت بالا عالی است و آن را برای برنامه های AI در زمان واقعی مانند Chatbots ، کمک به برنامه نویسی AI و سایر بارهای حساس به تأخیر عالی می کند. پلت فرم Cloud Groq دسترسی رایگان به مدل های بزرگ زبان خود (LLMS) را از طریق یک ردیف رایگان ارائه می دهد ، اما محدودیت های استفاده وجود دارد.

اگر به زمین بازی Groq Cloud بروید می توانید مدل های LLM را از شرکت های مختلف مانند:

• قولها

• Deepseek R1

• Google Gemma 2

• بغل کردن صورت

• متا لاما

• mistral ai

• Openai

این بسیار عالی است زیرا Groq Cloud انعطاف پذیری را برای انتخاب هر یک از این مدل های AI LLM برای برنامه عامل هوش مصنوعی ما به ما می دهد. آگنو اساساً به عنوان عمل می کند orchestration لایه ای برای چندین عامل هوش مصنوعی. در مورد ما ، این استقبال ، ProjectAgent ، CareerAgent ، BusinessAdvisor و ResearchAgent خواهد بود.

این پلتفرم قادر به مدیریت مکالمات ، نمایندگی های کار و حافظه خود است. هنگامی که هر یک از عوامل هوش مصنوعی ما نیاز به استدلال یا تولید خروجی دارند ، سپس Agno از Groq Cloud استفاده می کند ، که می تواند مدل های بزرگ زبان (LLMS) را اجرا کند ، و این کار را با تأخیر فوق العاده کم انجام می دهد. مزیت این امر این است که تضمین می کند که پاسخ های سریع و کارآمد داشته باشد. Groq Cloud خود یک LLM نیست-بلکه یک موتور استنتاج با کارایی بالا است که از بسیاری از ارائه دهندگان مختلف میزبان و خدمت می کند.

برای این پروژه ، ما از مدل Llama 3 Meta استفاده خواهیم کرد زیرا تعادل قوی بین عملکرد و دقت ایجاد می کند و آشکارا در دسترس است. این بدان معنی است که برای نمایندگان هوش مصنوعی در وب سایت نمونه کارها ما مناسب است.

شایان ذکر است که ما می توانستیم از مدل Llama از Llama.com استفاده کنیم. با این وجود ، در عوض ، ما از آن از طریق Groq Cloud استفاده خواهیم کرد ، زیرا ، به این ترتیب ، ما بهینه سازی بهتری می یابیم ، قابلیت های بیشتر و پاسخ های با کیفیت بهتر برای هر عامل هوش مصنوعی. این امر به این دلیل است که Groq Cloud در صورت تمایل به انجام این کار ، انعطاف پذیری را برای آزمایش و انتخاب بین مدل های مختلف هوش مصنوعی به ما می دهد و این بدان معنی است که می توانیم بهترین نیازهای خود را برای نیازهای خود بدست آوریم.

آنچه شما در حال ساختن خواهید بود

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

این عالی است زیرا این بدان معنی است که مشتریان بالقوه می توانند هر چیزی را در مورد شما 24/7 بیاموزند بدون اینکه واقعاً در صورت عدم دسترسی به شما صحبت کنند. شما حتی می توانید از این نمونه کارها به عنوان الگویی برای ساختن وب سایت نمونه کارها یا به عنوان الهام بخش برای ایجاد یکی استفاده کنید.

در کل ، پنج عامل هوش مصنوعی وجود خواهد داشت روی وب سایت نمونه کارها شما:

• WeloleaGent: متخصص در کمک به کاربران در وب سایت ، خواه کاربر کارفرما ، مشتری یا برنامه نویس همکار باشد

• ProjectAgent: یک متخصص پروژه که می تواند اطلاعات مربوط به پروژه ها ، فناوری و چالش ها را ارائه دهد

• CareerAgent: یک متخصص شغلی که می تواند اطلاعاتی در مورد مهارت ها ، تجربه و پیشینه حرفه ای ارائه دهد

• BusinessAdvisor: یک متخصص مشتری که می تواند اطلاعات مربوط به خدمات ، قیمت گذاری و جزئیات پروژه را ارائه دهد

• ResearchAgent: یک متخصص تحقیقاتی که می تواند اطلاعات مربوط به فناوری ، روندها و اخبار صنعت را ارائه دهد

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

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

یکی دیگر از ویژگی های عالی ، امکان شبیه سازی مکالمه است که می تواند باعث شود که این نمونه کارها پویاتر ، جذاب تر و غوطه وری احساس کند و در عین حال نشان می دهد که شما در کار با ابزار مدرن چقدر خوب هستید.

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

این وب سایت شش صفحه زیر را خواهد داشت:

• صفحه اصلی – صفحه اصلی

• پروژه ها – نمایش برخی از پروژه های برجسته و مهارت های فنی

• شغلی – نشان دادن مهارت ، تجربه ، آموزش و گواهینامه ها

• خدمات – خدمات مشتری و تعامل process

• تحقیق – راهی برای جستجوی وب در مورد صنعت فناوری

• تماس – الف page با فرم تماس با کاربر

می توانید ببینید که برنامه واکنش شما در زیر چگونه به نظر می رسد:

اول ، شما نمونه کارها خود را دارید homepage:

بعدی پروژه های شما است page:

حالا شما حرفه خود را دارید page:

سپس شما خدمات را دارید page:

سپس می توانید تحقیق و بینش خود را مشاهده کنید page:

در آخر ، شما تماس خود را دارید page:

حال ، بیایید شروع به ساختن برنامه خود کنیم ، از پس زمینه پایتون.

ساخت باکتری پایتون ما

برای این آموزش من از MACOS استفاده خواهم کرد و دستورات نیز باید کار کنند روی لینوکس اگر کاربر ویندوز هستید ، بیشتر دستورات باید کار کنند (اگرچه تفاوت هایی مانند فعال کردن محیط پایتون وجود دارد). در صورت لزوم می توانید دستورات صحیح را پیدا کنید – و می دانید که آیا خود را می دانید terminal هنگام تلاش برای اجرای یک دستور ، به شما خطایی می دهد.

ایجاد یک حساب کاربری در Groq Cloud

همانطور که قبلاً ذکر شد ، ما از Llama 3 متا از طریق Groq Cloud استفاده خواهیم کرد که ایده آل است. بنابراین ، اول ، ما باید یک حساب کاربری ایجاد کنیم روی Groq Cloud ، همانطور که در اینجا نشان داده شده است.

پس از ایجاد یک حساب کاربری روی Groq Cloud ، به کلیدهای API بروید page و همانطور که در این مثال نشان داده شده است ، یک کلید API ایجاد کنید. من اسم را به من دادم team-ai-agents:

شما باید یک کلید API داشته باشید که مانند این مثال باشد ، بنابراین مطمئن شوید که آن را در جایی ایمن ذخیره می کنید – بعداً به آن احتیاج خواهیم داشت.

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

تنظیم پروژه Python ما

خوب ، حالا بیایید به سرعت پروژه خود را تنظیم کنیم. به یک مکان بروید روی رایانه شما ، مانند دسک تاپ ، و پوشه ای به نام ایجاد کنید ai-agent-appبشر cd وارد پوشه پروژه شوید و آماده شوید – ما قصد داریم با استفاده از پایتون ، پس زمینه خود را بسازیم.

توصیه می کنم نصب کنید agno وت groq به صورت محلی در یک محیط مجازی پایتون. ابتدا از این استفاده کنید terminal فرمان برای تنظیم یک محیط مجازی Python در داخل خود ai-agent-app پوشه:

python3 -m venv venv
source venv/bin/activate
cd venv

توجه: بستگی دارد روی محیط محلی پایتون شما ، ممکن است لازم باشد از آنها استفاده کنید python یا python3 فرمان اجرای دستورات پایتون. در محیط و مثال های من استفاده می کنم python3، بنابراین دستور را متناسب با نیاز خود تنظیم کنید.

همین امر در هنگام استفاده از هر یک نیز صدق می کند pip یا pip3 هنگام نصب بسته های پایتون. می توانید بررسی کنید که کدام نسخه از Python و pip شما با python --versionبا python3 --version با pip --version وت pip3 --version دستورات در شما terminal پنجره

دستور فوق باید ایجاد کند venv پوشه داخل خود ai-agent-app پوشه این با تمام نقاط پایانی API شما که بعداً از آن استفاده می کند ، عقب مانده شما خواهد بود روی در این آموزش محیط مجازی Python شما نیز فعال شده است.

برای فعال کردن و غیرفعال کردن محیط پایتون خود ، می توانید از این دستورات استفاده کنید:

# Activate روی macOS/Linux
source venv/bin/activate

# Activate روی Windows
venv\Scripts\activate

# Deactivate works روی all platforms
conda deactivate

در این مرحله ، ایده خوبی برای باز کردن پروژه در ویرایشگر کد شما است. اکنون باید نصب کنید agno وت groq با استفاده از pip در کنار چند بسته دیگر: flaskبا requestsوت python-dotenvبشر برای تنظیم محیط سرور خود به این بسته ها احتیاج دارید ، بنابراین پیش بروید و همه آنها را با این دستور نصب کنید:

pip install agno
pip install groq
pip install flask
pip install flask_cors
pip install requests
pip install python-dotenv

با نصب این بسته های پایتون ، اکنون آماده تنظیم API خود برای این پروژه هستید. ما از Flask Framework Application Python به همراه بسته CORS استفاده خواهیم کرد تا بتوانیم در هر کجا به سرور دسترسی پیدا کنیم. در عین حال ، ما همچنین از ماژول درخواست ها استفاده خواهیم کرد ، که به ما امکان می دهد درخواست های HTTP را با استفاده از پایتون ارسال کنیم.

توجه داشته باشید که شما نیز به .env پرونده برای کلیدهای API خود ، بنابراین حتماً نصب کرده اید python-dotenv بسته بندی در محیط پایتون خود ، اگرچه در برخی موارد ، به طور خودکار نصب می شود.

کار روی پایگاه کد پایتون

خوب ، زمان شروع کار روی پایه کد اما ابتدا بیایید تمام پرونده های پروژه خود را تولید کنیم. شما می توانید این کار را به سادگی با اجرای اسکریپت اجرا که برای پروژه ایجاد کردم انجام دهید. این دستور را در venv پوشه:

mkdir agents
touch .env main.py
cd agents
touch __init__.py base_agent.py career_agent.py client_agent.py project_agent.py research_agent.py welcome_agent.py

با این اسکریپت ، اکنون باید داشته باشید:

• ایجاد شده .env پرونده برای کلیدهای API خود

• برای ایجاد عوامل مختلف هوش مصنوعی خود ، یک پوشه Agents با تمام پرونده ها ایجاد کرده است

• ایجاد شده main.py پرونده ، که فایل اصلی پروژه برای کل برنامه باطن شما خواهد بود

خوب ، پرونده های شما تنظیم شده اند. تنها چیزی که باقی مانده است اضافه کردن پایگاه کد است و باطن کامل است. بیایید با .env پرونده ، زیرا فقط به یک خط کد نیاز دارد و این برای کلید API شماست. مثال من را ببینید و آن را با کلید API خود به روز کنید:

GROQ_API_KEY="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"

برنامه شما اکنون دارای یک کلید API است که به شما امکان دسترسی به Groq Cloud را می دهد. حال بیایید شروع به اضافه کردن کد برای همه عوامل مختلف هوش مصنوعی کنیم. اولین پرونده ای که ما کار خواهیم کرد روی خواهد شد __init__.py که واردات را برای همه پرونده های عامل AI نگه می دارد.

این کد را به پرونده اضافه کنید:

from agents.welcome_agent import WelcomeAgent
from agents.project_agent import ProjectAgent
from agents.career_agent import CareerAgent
from agents.client_agent import ClientAgent
from agents.research_agent import ResearchAgent

# Export all agents
__all__ = ['WelcomeAgent', 'ProjectAgent', 'CareerAgent', 'ClientAgent', 'ResearchAgent']

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

خوب ، خوب اکنون ، ما 6 پرونده عامل AI برای کار داریم روی، شروع با base_agent.py پرونده

اطمینان حاصل کنید که این کد را به پرونده اضافه می کنید:

from agno.agent import Agent
from agno.models.groq import Groq
import os


class BaseAgent:
    def __init__(self, name, description, avatar="default_avatar.png"):

        self.name = name
        self.description = description
        self.avatar = avatar
        self.model = Groq(id="llama-3.3-70b-versatile")
        self.agent = Agent(model=self.model, markdown=True)

    def get_response(self, query, stream=False):

        return self.agent.get_response(query, stream=stream)

    def print_response(self, query, stream=True):

        return self.agent.print_response(query, stream=stream)

این کلاس از agno چارچوب برای ایجاد عوامل هوش مصنوعی با استفاده از مدل Llama 3.3 70B Groq ، که می تواند با برخی محدودیت های استفاده برای تماس های API استفاده کند. این باید برای پروژه شما خوب باشد. این ساختار اساسی را فراهم می کند که سایر عوامل تخصصی در برنامه می توانند با عملکرد خاص دامنه به ارث برده و گسترش دهند.

مدلی که ما انتخاب کردیم در دسترس است روی پلت فرم ابر Groq ، و اگر بخواهیم می توانیم آن را تغییر دهیم. هر مدل دارای جوانب مثبت و منفی است و یک تاریخ برش برای به روز بودن آن است ، بنابراین می توانید انتظار داشته باشید که نتایج متفاوتی کسب کنید. فقط به خاطر داشته باشید که استفاده از یک به روز LLM مانند OpenAI نتایج بهتری را ارائه می دهد ، اما ممکن است مجبور شوید هزینه آن را بپردازید.

پرونده بعدی که ما کار خواهیم کرد روی خواهد شد career_agent.py پرونده

و این این کد مورد نیاز برای آن است:

from agents.base_agent import BaseAgent


class CareerAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            name="CareerGuide",
            description="I'm the career specialist. I can provide information about skills, experience, and job suitability.",
            avatar="career_avatar.png"
        )

        self.skills = {
            "languages": ["Python", "JavaScript", "TypeScript", "Java", "SQL"],
            "frameworks": ["React", "Vue.js", "Node.js", "Django", "Flask", "Spring Boot"],
            "tools": ["Git", "Docker", "AWS", "Azure", "CI/CD", "Kubernetes"],
            "soft_skills": ["Team leadership", "Project management", "Agile methodologies", "Technical writing", "Client communication"]
        }

        self.experience = [
            {
                "title": "Senior Full Stack Developer",
                "company": "Tech Innovations Inc.",
                "period": "2020-Present",
                "responsibilities": [
                    "Led development of cloud-based SaaS platform",
                    "Managed team of 5 developers",
                    "Implemented CI/CD pipeline reducing deployment time by 40%",
                    "Architected microservices infrastructure"
                ]
            },
            {
                "title": "Full Stack Developer",
                "company": "WebSolutions Co.",
                "period": "2017-2020",
                "responsibilities": [
                    "Developed responsive web applications using React and Node.js",
                    "Implemented RESTful APIs and database schemas",
                    "Collaborated with UX/UI designers to implement user-friendly interfaces",
                    "Participated in code reviews and mentored junior developers"
                ]
            },
            {
                "title": "Junior Developer",
                "company": "StartUp Labs",
                "period": "2015-2017",
                "responsibilities": [
                    "Built and maintained client websites",
                    "Developed custom WordPress plugins",
                    "Implemented responsive designs and cross-browser compatibility",
                    "Assisted in database design and optimization"
                ]
            }
        ]

    def get_skills_summary(self):

        prompt = f"""
        Generate a professional summary of the following skills for a portfolio website:

        Programming Languages: {', '.join(self.skills['languages'])}
        Frameworks & Libraries: {', '.join(self.skills['frameworks'])}
        Tools & Platforms: {', '.join(self.skills['tools'])}
        Soft Skills: {', '.join(self.skills['soft_skills'])}

        Format the response in markdown with appropriate sections and highlights.
        """
        return self.get_response(prompt)

    def get_experience_summary(self):

        experience_text = "# Work Experience\n\n"
        for job in self.experience:
            experience_text += f"## {job['title']} at {job['company']}\n"
            experience_text += f"**{job['period']}**\n\n"
            experience_text += "**Responsibilities:**\n"
            for resp in job['responsibilities']:
                experience_text += f"- {resp}\n"
            experience_text += "\n"

        prompt = f"""
        Based روی the following work experience, generate a professional career summary for a portfolio website:

        {experience_text}

        Highlight career progression, key achievements, and growth. Format the response in markdown.
        """
        return self.get_response(prompt)

    def assess_job_fit(self, job_description):

        skills_flat = []
        for skill_category in self.skills.values():
            skills_flat.extend(skill_category)

        experience_flat = []
        for job in self.experience:
            experience_flat.extend(job['responsibilities'])

        prompt = f"""
        Assess the fit for the following job description based روی the skills and experience provided:

        Job Description:
        {job_description}

        Skills:
        {', '.join(skills_flat)}

        Experience:
        {' '.join(experience_flat)}

        Provide an analysis of strengths, potential gaps, and overall suitability for the role. Format the response in markdown.
        """
        return self.get_response(prompt)

این عامل برای کمک به کاربران در زمینه کارهای مرتبط با شغلی مانند:

• ایجاد خلاصه های حرفه ای از مهارت های فنی و نرم

• تولید روایت های شغلی مبتنی بر روی تجربه کار

• ارزیابی مناسب کار با مقایسه مهارت ها و تجربه در برابر توضیحات شغلی

عامل از قابلیت های LLM عامل پایه (با استفاده از مدل Groq’s Llama 3.3 70B) برای تولید پاسخ های زبان طبیعی که در Markdown قالب بندی شده اند ، استفاده می کند و آنها را برای گنجاندن در وب سایت های نمونه کارها ، Résumés یا برنامه های شغلی مناسب می کند. این پرونده دارای داده های شغلی نمونه است و در یک اجرای واقعی ، این از یک بانک اطلاعاتی حاصل می شود

زمان خوب برای نماینده بعدی AI – این بار است client_agent.py، که این کد را دریافت می کند:

from agents.base_agent import BaseAgent


class ClientAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            name="BusinessAdvisor",
            description="I'm the client specialist. I can provide information about services, pricing, and project details.",
            avatar="client_avatar.png"
        )

        self.services = {
            "web_development": {
                "name": "Web Development",
                "description": "Custom web application development using modern frameworks and best practices.",
                "pricing_model": "Project-based or hourly",
                "price_range": "$5,000 - $50,000 depending روی complexity",
                "timeline": "4-12 weeks depending روی scope",
                "technologies": ["React", "Vue.js", "Node.js", "Django", "Flask"]
            },
            "mobile_development": {
                "name": "Mobile App Development",
                "description": "Native and cross-platform mobile application development for iOS and Android.",
                "pricing_model": "Project-based",
                "price_range": "$8,000 - $60,000 depending روی complexity",
                "timeline": "6-16 weeks depending روی scope",
                "technologies": ["React Native", "Flutter", "Swift", "Kotlin"]
            },
            "consulting": {
                "name": "Technical Consulting",
                "description": "Expert advice روی architecture, technology stack, and development practices.",
                "pricing_model": "Hourly",
                "price_range": "$150 - $250 per hour",
                "timeline": "Ongoing or as needed",
                "technologies": ["Various based روی client needs"]
            }
        }

        self.process = [
            "Initial consultation to understand requirements",
            "Proposal and quote preparation",
            "Contract signing and project kickoff",
            "Design and prototyping phase",
            "Development sprints with regular client feedback",
            "Testing and quality assurance",
            "Deployment and launch",
            "Post-launch support and maintenance"
        ]

    def get_services_overview(self):

        services_text = "# Services Offered\n\n"
        for service_id, service in self.services.items():
            services_text += f"## {service['name']}\n"
            services_text += f"{service['description']}\n\n"
            services_text += f"**Pricing Model**: {service['pricing_model']}\n"
            services_text += f"**Price Range**: {service['price_range']}\n"
            services_text += f"**Timeline**: {service['timeline']}\n"
            services_text += f"**Technologies**: {', '.join(service['technologies'])}\n\n"

        prompt = f"""
        Generate a professional overview of the following services for a programmer's portfolio website:

        {services_text}

        Format the response in markdown with appropriate sections and highlights.
        """
        return self.get_response(prompt)

    def get_service_details(self, service_id):

        if service_id in self.services:
            service = self.services[service_id]
            prompt = f"""
            Generate a detailed description for the following service:

            Service Name: {service['name']}
            Description: {service['description']}
            Pricing Model: {service['pricing_model']}
            Price Range: {service['price_range']}
            Timeline: {service['timeline']}
            Technologies: {', '.join(service['technologies'])}

            Include information about the value proposition, typical deliverables, and client benefits. Format the response in markdown.
            """
            return self.get_response(prompt)
        else:
            return "Service not found. Please check the service ID and try again."

    def explain_process(self):

        process_text = "# Client Engagement Process\n\n"
        for i, step in enumerate(self.process, 1):
            process_text += f"## Step {i}: {step}\n\n"

        prompt = f"""
        Based روی the following client engagement process, generate a detailed explanation for potential clients:

        {process_text}

        For each step, provide a brief explanation of what happens, what the client can expect, and any deliverables. Format the response in markdown.
        """
        return self.get_response(prompt)

    def generate_proposal(self, project_description):

        prompt = f"""
        Generate a professional project proposal based روی the following client requirements:

        Project Description:
        {project_description}

        Include the following sections:
        1. Project Understanding
        2. Proposed Approach
        3. Estimated Timeline
        4. Estimated Budget Range
        5. Next Steps

        Base your proposal روی the services and processes described in the portfolio. Format the response in markdown.
        """
        return self.get_response(prompt)

این عامل برای کمک به کاربران در زمینه کارهای مشتری و مشاغل مانند:

• ارائه نمای کلی از خدمات موجود برای مواد بازاریابی

• ارائه توضیحات خدمات دقیق برای پیشنهادات خاص

• توضیح درگیری مشتری process به مشتریان بالقوه

• ایجاد پیشنهادات پروژه سفارشی مبتنی بر روی الزامات مشتری

این عامل همچنین از قابلیت های LLM عامل پایه (با استفاده از مدل LLAMA 3.3 70B GROQ) برای تولید محتوای حرفه ای و تجاری گرا در Markdown استفاده می کند. مانند قبل ، این پرونده همچنین دارای داده های خدمات نمونه است.

اکنون می توانیم کار را شروع کنیم روی در project_agent.py پرونده و اضافه کردن این کد به پایگاه کد آن:

from agents.base_agent import BaseAgent


class ProjectAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            name="TechExpert",
            description="I'm the project specialist. I can provide detailed information about any project in this portfolio.",
            avatar="project_avatar.png"
        )

        self.projects = {
            "project1": {
                "name": "E-commerce Platform",
                "tech_stack": ["React", "Node.js", "MongoDB", "Express"],
                "description": "A full-stack e-commerce platform with user authentication, product catalog, shopping cart, and payment processing.",
                "highlights": ["Responsive design", "RESTful API", "Stripe integration", "JWT authentication"],
                "github_link": "https://github.com/username/ecommerce-platform",
                "demo_link": "https://ecommerce-demo.example.com"
            },
            "project2": {
                "name": "Task Management App",
                "tech_stack": ["Vue.js", "Firebase", "Tailwind CSS"],
                "description": "A real-time task management application with collaborative features, notifications, and progress tracking.",
                "highlights": ["Real-time updates", "User collaboration", "Drag-and-drop interface", "Progressive Web App"],
                "github_link": "https://github.com/username/task-manager",
                "demo_link": "https://taskmanager-demo.example.com"
            },
            "project3": {
                "name": "Data Visualization Dashboard",
                "tech_stack": ["Python", "Django", "D3.js", "PostgreSQL"],
                "description": "An interactive dashboard for visualizing complex datasets with filtering, sorting, and export capabilities.",
                "highlights": ["Interactive charts", "Data filtering", "CSV/PDF export", "Responsive design"],
                "github_link": "https://github.com/username/data-dashboard",
                "demo_link": "https://dataviz-demo.example.com"
            }
        }

    def get_project_list(self):

        project_list = "# Available Projects\n\n"
        for project_id, project in self.projects.items():
            project_list += f"## {project['name']}\n"
            project_list += f"**Tech Stack**: {', '.join(project['tech_stack'])}\n"
            project_list += f"{project['description']}\n\n"

        return project_list

    def get_project_details(self, project_id):

        if project_id in self.projects:
            project = self.projects[project_id]
            prompt = f"""
            Generate a detailed description for the following project:

            Project Name: {project['name']}
            Tech Stack: {', '.join(project['tech_stack'])}
            Description: {project['description']}
            Highlights: {', '.join(project['highlights'])}
            GitHub: {project['github_link']}
            Demo: {project['demo_link']}

            Include technical details about implementation challenges and solutions. Format the response in markdown.
            """
            return self.get_response(prompt)
        else:
            return "Project not found. Please check the project ID and try again."

    def answer_technical_question(self, project_id, question):

        if project_id in self.projects:
            project = self.projects[project_id]
            prompt = f"""
            Answer the following technical question about this project:

            Project Name: {project['name']}
            Tech Stack: {', '.join(project['tech_stack'])}
            Description: {project['description']}
            Highlights: {', '.join(project['highlights'])}

            Question: {question}

            Provide a detailed technical answer with code examples if relevant.
            """
            return self.get_response(prompt)
        else:
            return "Project not found. Please check the project ID and try again."

این عامل برای کمک به کاربران در زمینه کارهای مرتبط با پروژه مانند:

• ارائه نمای کلی از کلیه پروژه ها در یک نمونه کارها

• تولید توضیحات دقیق از پروژه های خاص

• پاسخ دادن به سؤالات فنی در مورد جزئیات اجرای

عامل ، مانند مثالهای قبلی ، از قابلیت های LLM عامل پایه (با استفاده از مدل Groq’s Llama 3.3 70B) برای تولید محتوای فنی و پروژه گرا که در Markdown قالب بندی شده است ، استفاده می کند. این برای مستندات فنی یا هنگام پاسخ به سوالات مربوط به اجرای پروژه مفید است. ما در اینجا از داده های مسخره بر خلاف یک بانک اطلاعاتی استفاده می کنیم.

با اتمام آن پرونده ، دو باقی مانده است. مورد بعدی است research_agent.py پرونده ، بنابراین پیش بروید و این کد را اضافه کنید:

from agents.base_agent import BaseAgent
import requests
import os
import json


class ResearchAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            name="ResearchAssistant",
            description="I'm the research specialist. I can search the web for information about technologies, trends, and industry news.",
            avatar="research_avatar.png"
        )
        self.api_key = os.getenv("GROQ_API_KEY")

    def search_web(self, query):

        headers = {
            "Authorization": f"Bearer {self.api_key}",
            "Content-Type": "application/json"
        }

        payload = {
            "model": "llama-3.3-70b-versatile",
            "messages": [
                {"role": "system", "content": "You are a helpful research assistant."},
                {"role": "user", "content": f"Search the web for: {query}"}
            ],
            "tools": [
                {
                    "type": "web_search"
                }
            ]
        }

        try:
            response = requests.post(
                "https://api.groq.com/openai/v1/chat/completions",
                headers=headers,
                json=payload
            )

            if response.status_code == 200:
                result = response.json()
                return result["choices"][0]["message"]["content"]
            else:
                return f"Error searching the web: {response.status_code} - {response.text}"
        except Exception as e:
            return f"Error searching the web: {str(e)}"

    def research_technology(self, technology):

        query = f"latest developments and best practices for {technology} in software development"
        search_results = self.search_web(query)

        prompt = f"""
        Based روی the following search results about {technology}, provide a concise summary of:
        1. What it is
        2. Current state and popularity
        3. Key features and benefits
        4. Common use cases
        5. Future trends

        Search Results:
        {search_results}

        Format the response in markdown with appropriate sections.
        """
        return self.get_response(prompt)

    def compare_technologies(self, tech1, tech2):

        query = f"comparison between {tech1} and {tech2} for software development"
        search_results = self.search_web(query)

        prompt = f"""
        Based روی the following search results comparing {tech1} and {tech2}, provide a detailed comparison including:
        6. Core differences
        7. Performance considerations
        8. Learning curve
        9. Community support
        10. Use case recommendations

        Search Results:
        {search_results}

        Format the response in markdown with a comparison table and explanatory text.
        """
        return self.get_response(prompt)

    def get_industry_trends(self):

        query = "latest trends in software development industry"
        search_results = self.search_web(query)

        prompt = f"""
        Based روی the following search results about software development trends, provide a summary of:
        11. Emerging technologies
        12. Industry shifts
        13. In-demand skills
        14. Future predictions

        Search Results:
        {search_results}

        Format the response in markdown with appropriate sections and highlights.
        """
        return self.get_response(prompt)

این عامل برای کمک به کاربران در انجام کارهای مرتبط با تحقیق مانند:

• تحقیق در مورد فن آوری های خاص برای درک ویژگی ها ، مزایا و موارد استفاده آنها

• مقایسه فن آوری های مختلف برای تصمیم گیری آگاهانه

• بروزرسانی روی روند صنعت و فن آوری های نوظهور

آنچه این عامل را در مقایسه با سایر عوامل منحصر به فرد می کند این است که با استفاده از قابلیت جستجوی وب Groq Toolhouse API به جای اینکه فقط به تکیه بپردازد ، به طور فعال اطلاعات زمان واقعی را از وب بدست می آورد روی داده های از پیش تعریف شده یا داده های آموزش LLM. این امر به آن اجازه می دهد تا اطلاعات فعلی و جامع تری در مورد موضوعات فناوری به سرعت در حال تحول ارائه دهد.

خوب ، اکنون ما یک عامل آخر AI برای ایجاد داریم و این است welcome_agent.py پرونده این کد را به پرونده اضافه کنید:

from agents.base_agent import BaseAgent


class WelcomeAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            name="Greeter",
            description="I'm the welcome agent for this portfolio. I can help guide you to the right section based روی your interests.",
            avatar="welcome_avatar.png"
        )

    def greet(self, visitor_type=None):

        if visitor_type == "employer":
            return self.get_response(
                "Generate a friendly, professional greeting for a potential employer visiting a programmer's portfolio website. "
                "Mention that they can explore the Projects section to see technical skills and the Career section for professional experience."
            )
        elif visitor_type == "client":
            return self.get_response(
                "Generate a friendly, business-oriented greeting for a potential client visiting a programmer's portfolio website. "
                "Mention that they can check out the Projects section for examples of past work and the Client section for service details."
            )
        elif visitor_type == "fellow_programmer":
            return self.get_response(
                "Generate a friendly, casual greeting for a fellow programmer visiting a portfolio website. "
                "Mention that they can explore the Projects section for technical details and code samples."
            )
        else:
            return self.get_response(
                "Generate a friendly, general greeting for a visitor to a programmer's portfolio website. "
                "Ask if they are an employer, client, or fellow programmer to provide more tailored information."
            )

    def suggest_section(self, interest):

        prompt = f"Based روی a visitor expressing interest in '{interest}', suggest which section of a programmer's portfolio they should visit. Options include: Projects, Career, Client Work, About Me, Contact. Explain why in 1-2 sentences."
        return self.get_response(prompt)

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

• تبریک های شخصی مبتنی بر روی نوع بازدید کننده

• راهنمایی به بخش های مربوطه روی علایق خاص

• یک مقدمه دوستانه و مکالمه ای با نمونه کارها

در WelcomeAgent ساده تر از برخی دیگر از عوامل است که ما به آنها نگاه کرده ایم زیرا تمرکز دارد روی ایجاد یک برداشت اول مثبت و کمک به بازدید کنندگان به محتوای مرتبط با نیازهای آنها در حرکت است. از قابلیت های LLM عامل پایه برای تولید پاسخ های طبیعی و مناسب مناسب استفاده می کند.

خوب خوب – API پس زمینه شما تقریباً آماده است. شما فقط یک پرونده آخر برای کار دارید روی: main.py پرونده ای که پایگاه کد شما را تکمیل می کند. این پرونده بسیار بزرگ است ، بنابراین من آن را به سه قسمت تقسیم می کنم. شما باید هر بخش را در پرونده کپی و چسبانده اید. اگر قبلاً این کار را نکرده اید ، ارزش نصب پسوند پایتون را برای آن دارد VS Code از آنجا که این اشکال زدایی ، لینت و قالب بندی برای پرونده های پایتون است.

خوب ، در اینجا اولین قسمت از پایگاه کد برای ما است main.py پرونده:

from flask import Flask, request, jsonify
import os
from dotenv import load_dotenv
import json
import requests
from flask_cors import CORS


load_dotenv()


app = Flask(__name__)
CORS(app)


class BaseAgent:
    def __init__(self, name, description):
        self.name = name
        self.description = description

        self.api_key = os.getenv("GROQ_API_KEY")

    def get_response(self, prompt):

        try:
            headers = {
                "Authorization": f"Bearer {self.api_key}",
                "Content-Type": "application/json"
            }

            data = {
                "model": "llama3-8b-8192",
                "messages": [
                    {"role": "system", "content": f"You are {self.name}, {self.description}. Respond in a helpful, concise, and professional manner."},
                    {"role": "user", "content": prompt}
                ],
                "temperature": 0.7,
                "max_tokens": 500
            }

            response = requests.post(
                "https://api.groq.com/openai/v1/chat/completions",
                headers=headers,
                json=data
            )

            if response.status_code == 200:
                return response.json()["choices"][0]["message"]["content"]
            else:
                return f"Error: {response.status_code} - {response.text}"
        except Exception as e:
            return f"An error occurred: {str(e)}"


class WelcomeAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            "WelcomeAgent",
            "a welcome specialist who greets visitors and helps them navigate the portfolio website"
        )

    def greet(self, visitor_type=None):
        if visitor_type == "employer":
            return self.get_response("Generate a warm welcome message for an employer visiting a programmer's portfolio website. Suggest they check out the Projects and Career sections.")
        elif visitor_type == "client":
            return self.get_response("Generate a warm welcome message for a potential client visiting a programmer's portfolio website. Suggest they check out the Services section.")
        elif visitor_type == "fellow_programmer":
            return self.get_response("Generate a warm welcome message for a fellow programmer visiting a programmer's portfolio website. Suggest they check out the Projects and Research sections.")
        else:
            return self.get_response("Generate a general welcome message for a visitor to a programmer's portfolio website. Ask if they are an employer, client, or fellow programmer.")

    def suggest_section(self, interest):
        return self.get_response(f"A visitor to my portfolio website has expressed interest in {interest}. Suggest which section(s) of the website they should visit based روی this interest.")


class ProjectAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            "ProjectAgent",
            "a project specialist who provides detailed information about the programmer's projects"
        )

    def get_project_list(self):
        return self.get_response("Generate a list of 3-5 impressive software development projects that could be in a programmer's portfolio. Include a brief description for each.")

    def get_project_details(self, project_id):
        project_prompts = {
            "project1": "Describe in detail an e-commerce platform project for a programmer's portfolio. Include technologies used, challenges overcome, and key features.",
            "project2": "Describe in detail a task management application project for a programmer's portfolio. Include technologies used, challenges overcome, and key features.",
            "project3": "Describe in detail a data visualization dashboard project for a programmer's portfolio. Include technologies used, challenges overcome, and key features."
        }

        prompt = project_prompts.get(
            project_id, f"Describe a project called {project_id} in detail.")
        return self.get_response(prompt)

    def answer_technical_question(self, project_id, question):
        return self.get_response(f"Answer this technical question about a project: '{question}'. The project is {project_id}.")

این بخش از کد دارای واردات ، تنظیم و برخی از سلام های شما برای نماینده هوش مصنوعی است.

اکنون برای قسمت دوم ، این کد را در زیر اولین کد اضافه شده به پرونده اضافه کنید:

class CareerAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            "CareerAgent",
            "a career specialist who provides information about the programmer's skills and experience"
        )

    def get_skills_summary(self):
        return self.get_response("Generate a comprehensive summary of technical and professional skills for a full-stack developer's portfolio.")

    def get_experience_summary(self):
        return self.get_response("Generate a summary of work experience for a full-stack developer with 5+ years of experience.")

    def assess_job_fit(self, job_description):
        return self.get_response(f"Assess how well a full-stack developer with 5+ years of experience would fit this job description: '{job_description}'. Highlight matching skills and experience.")


class ClientAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            "ClientAgent",
            "a client specialist who provides information about services, pricing, and the client engagement process"
        )

    def get_services_overview(self):
        return self.get_response("Generate an overview of services that a freelance full-stack developer might offer to clients.")

    def get_service_details(self, service_type):
        service_prompts = {
            "web_development": "Describe web development services offered by a freelance full-stack developer, including technologies, pricing range, and typical timeline.",
            "mobile_development": "Describe mobile app development services offered by a freelance full-stack developer, including technologies, pricing range, and typical timeline.",
            "consulting": "Describe technical consulting services offered by a freelance full-stack developer, including areas of expertise, hourly rate range, and engagement model."
        }

        prompt = service_prompts.get(
            service_type, f"Describe {service_type} services in detail.")
        return self.get_response(prompt)

    def explain_process(self):
        return self.get_response("Explain the client engagement process for a freelance full-stack developer, from initial consultation to project delivery.")

    def generate_proposal(self, project_description):
        return self.get_response(f"Generate a project proposal for this client request: '{project_description}'. Include estimated timeline, cost range, and approach.")


class ResearchAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            "ResearchAgent",
            "a research specialist who provides information about technologies, trends, and industry news"
        )

    def search_web(self, query):
        return self.get_response(f"Provide information about '{query}' as if you've just searched the web for the latest information. Include key points and insights.")

    def compare_technologies(self, tech1, tech2):
        return self.get_response(f"Compare {tech1} vs {tech2} in terms of features, performance, use cases, community support, and future prospects.")

    def get_industry_trends(self):
        return self.get_response("Describe current trends in software development and technology that are important for developers to be aware of.")


welcome_agent = WelcomeAgent()
project_agent = ProjectAgent()
career_agent = CareerAgent()
client_agent = ClientAgent()
research_agent = ResearchAgent()


@app.route('/static/images/default_avatar.png')
@app.route('/static/images/default_project.jpg')
def block_default_images():

    response = app.make_response(
        b'GIF89a\x01\x00\x01\x00\x80\x00\x00\xff\xff\xff\x00\x00\x00!\xf9\x04\x01\x00\x00\x00\x00,\x00\x00\x00\x00\x01\x00\x01\x00\x00\x02\x02D\x01\x00;')
    response.headers['Content-Type'] = 'image/gif'

    response.headers['Cache-Control'] = 'public, max-age=31536000'
    response.headers['Expires'] = 'Thu, 31 Dec 2037 23:59:59 GMT'
    return response


@app.route('/api/welcome', methods=['POST'])
def welcome_agent_endpoint():
    data = request.json
    message = data.get('message', '')

    visitor_type = None
    if 'employer' in message.lower():
        visitor_type = 'employer'
    elif 'client' in message.lower():
        visitor_type = 'client'
    elif 'programmer' in message.lower() or 'developer' in message.lower():
        visitor_type = 'fellow_programmer'

    if 'interest' in message.lower() or 'looking for' in message.lower():

        interest = message.replace('interest', '').replace(
            'looking for', '').strip()
        response = welcome_agent.suggest_section(interest)
    else:
        response = welcome_agent.greet(visitor_type)

    return jsonify({'response': response})

در این بخش از پایگاه کد شما ، پاسخ های هوش مصنوعی بیشتری و یک مسیر API خوش آمدید دارید.

در آخر ، کد را با اضافه کردن این قطعه نهایی در پایان تکمیل کنید:

@app.route('/api/project', methods=['POST'])
def project_agent_endpoint():
    data = request.json
    message = data.get('message', '')

    project_id = None
    if 'e-commerce' in message.lower() or 'ecommerce' in message.lower():
        project_id = 'project1'
    elif 'task' in message.lower() or 'management' in message.lower():
        project_id = 'project2'
    elif 'data' in message.lower() or 'visualization' in message.lower() or 'dashboard' in message.lower():
        project_id = 'project3'

    if project_id and ('tell me more' in message.lower() or 'details' in message.lower()):
        response = project_agent.get_project_details(project_id)
    elif 'list' in message.lower() or 'all projects' in message.lower():
        response = project_agent.get_project_list()
    elif project_id:

        response = project_agent.answer_technical_question(project_id, message)
    else:

        response = project_agent.get_response(
            f"The user asked: '{message}'. Respond as if you are a project specialist for a portfolio website. "
            "If they're asking about a specific project, suggest they mention one of the projects: "
            "E-commerce Platform, Task Management App, or Data Visualization Dashboard."
        )

    return jsonify({'response': response})


@app.route('/api/career', methods=['POST'])
def career_agent_endpoint():
    data = request.json
    message = data.get('message', '')

    if 'skills' in message.lower():
        response = career_agent.get_skills_summary()
    elif 'experience' in message.lower() or 'work history' in message.lower():
        response = career_agent.get_experience_summary()
    elif 'job' in message.lower() or 'position' in message.lower() or 'role' in message.lower():

        response = career_agent.assess_job_fit(message)
    else:

        response = career_agent.get_response(
            f"The user asked: '{message}'. Respond as if you are a career specialist for a portfolio website. "
            "Suggest they ask about skills, experience, or job fit assessment."
        )

    return jsonify({'response': response})


@app.route('/api/client', methods=['POST'])
def client_agent_endpoint():
    data = request.json
    message = data.get('message', '')

    if 'services' in message.lower() or 'offerings' in message.lower():
        response = client_agent.get_services_overview()
    elif 'web' in message.lower() and 'development' in message.lower():
        response = client_agent.get_service_details('web_development')
    elif 'mobile' in message.lower() and 'development' in message.lower():
        response = client_agent.get_service_details('mobile_development')
    elif 'consulting' in message.lower() or 'technical consulting' in message.lower():
        response = client_agent.get_service_details('consulting')
    elif 'process' in message.lower() or 'how does it work' in message.lower():
        response = client_agent.explain_process()
    elif 'proposal' in message.lower() or 'quote' in message.lower() or 'estimate' in message.lower():

        response = client_agent.generate_proposal(message)
    else:

        response = client_agent.get_response(
            f"The user asked: '{message}'. Respond as if you are a client specialist for a portfolio website. "
            "Suggest they ask about services, the client engagement process, or request a proposal."
        )

    return jsonify({'response': response})


@app.route('/api/research', methods=['POST'])
def research_agent_endpoint():
    data = request.json
    message = data.get('message', '')

    if 'compare' in message.lower() and ('vs' in message.lower() or 'versus' in message.lower()):

        tech_parts = message.lower().replace('compare', '').replace(
            'vs', ' ').replace('versus', ' ').split()
        tech1 = tech_parts[0] if len(tech_parts) > 0 else ''
        tech2 = tech_parts[-1] if len(tech_parts) > 1 else ''
        response = research_agent.compare_technologies(tech1, tech2)
    elif 'trends' in message.lower() or 'industry' in message.lower():
        response = research_agent.get_industry_trends()
    else:
        response = research_agent.search_web(message)

    return jsonify({'response': response})


if __name__ == '__main__':

    app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0
    app.config['TEMPLATES_AUTO_RELOAD'] = True   # Ensure templates reload

    @app.after_request
    def add_header(response):
        response.headers['Cache-Control'] = 'no-store, no-cache, must-revalidate, max-age=0'
        response.headers['Pragma'] = 'no-cache'
        response.headers['Expires'] = '0'
        return response

    app.run(host='0.0.0.0', port=5001, debug=True,
            use_reloader=False, threaded=True)

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

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

باکتری پایتون ما را اجرا می کنیم

تمام آنچه که باقی مانده است این است که سرور Flask خود را اجرا کنید و پشتیبان گیری و اجرای آن را انجام دهید. شما می توانید این کار را با این اسکریپت اجرا در داخل انجام دهید venv پوشه:

python3 main.py

پس زمینه شما اکنون باید در حال اجرا باشد روی http://127.0.0.1:5001/. اگر به page خطایی مانند این را مشاهده خواهید کرد:

Not Found

The requested URL was not found روی the server. If you entered the URL manually please check your spelling and try again.

این انتظار می رود ، زیرا اگر پایگاه کد را بررسی کرده اید ، متوجه خواهید شد که هیچ مسیر دریافت وجود ندارد ، فقط مسیرهای پست را ارسال کنید. برای دیدن آنها در حال کار ، باید از یک مشتری HTTP مانند Postman استفاده کنید. گزینه دیگر ایجاد برخی است curl دستوراتی که یک درخواست پست ارسال می کنند ، که می توانید از آن استفاده کنید terminalبشر بیایید استفاده کنیم curl زیرا تنظیمات کمتری وجود دارد. شما نیاز به کپی و چسباندن دستورات دارید.

هر درخواست پست دقیقاً از یک تماس API استفاده می کند روی Groq Cloud برای کلید API خود که می توانید در اینجا مشاهده کنید https: //console.groq.com/کلیدها. به یاد داشته باشید که استفاده از آن رایگان است اما محدودیت های استفاده وجود دارد که می توانید در مستندات آنها بخوانید روی محدودیت نرخ

من برخی از دستورات CURL نمونه را در زیر ارائه داده ام – فقط آنها را در خود کپی کرده و چسبانده اید terminal و ضربه را وارد کنید ، و شما باید پیام پاسخ را مشاهده کنید:

1. آزمایش نقطه پایانی عامل خوش آمدید

curl -X POST http://localhost:5001/api/welcome \
  -H "Content-Type: application/json" \
  -d '{"message": "I am an employer looking for a skilled developer"}'

2. آزمایش نقطه انتهایی عامل پروژه

curl -X POST http://localhost:5001/api/project \
  -H "Content-Type: application/json" \
  -d '{"message": "Tell me more about the e-commerce project"}'

3. تست نقطه پایانی عامل شغلی

curl -X POST http://localhost:5001/api/career \
  -H "Content-Type: application/json" \
  -d '{"message": "What skills do you have?"}'

4. آزمایش نقطه پایانی عامل مشتری

curl -X POST http://localhost:5001/api/client \
  -H "Content-Type: application/json" \
  -d '{"message": "What services do you offer?"}'

5. آزمایش نقطه پایانی نماینده تحقیق

curl -X POST http://localhost:5001/api/research \
  -H "Content-Type: application/json" \
  -d '{"message": "What are the current trends in web development?"}'

ساخت جبهه React ما

ما به نیمه راه رسیده ایم و تمام آنچه باقی مانده است ساخت جلوی شما است. ما با استفاده از VITE قسمت جلویی را می سازیم و وب سایت شش صفحه خواهد داشت. مطمئن شوید که اکنون در داخل هستید root پوشه برای ai-agent-app پروژه می توانید سرور Python را اجرا کنید زیرا قسمت جلوی شما قصد دارد به مسیرهای API که ایجاد کرده اید متصل شود.

اکنون دستورات زیر را اجرا کنید تا پروژه React خود را با استفاده از Vite ، Tailwind CSS ، React-Router و Axios تنظیم کنید ، که ما به آن نیاز داریم page درخواست های مسیریابی و واکشی:

npm create vite@latest frontend -- --template react
cd frontend
npm install -D tailwindcss@3 postcss autoprefixer react-router axios
npx tailwindcss init -p
npm install

عالی ، اکنون با آن بسته ها نصب شده و وابستگی های ما تنظیم شده است ، ما تقریباً آماده شروع هستیم روی پایه کد اما قبل از آن ، ما باید یک اسکریپت دیگر را اجرا کنیم که قصد دارد همه پرونده ها و پوشه ها را برای پروژه ما ایجاد کند. این خیلی سریعتر از انجام همه آنها به صورت دستی است.

این دستور را در داخل پوشه جلوی آن اجرا کنید:

mkdir -p src/components src/pages
touch src/style.css src/components/{Chat,Footer,Layout,Navbar}.jsx
touch src/pages/{Career,Contact,Home,Projects,Research,Services}.jsx

Frontend React ما اکنون باید یک ساختار پروژه مانند مثال زیر نشان داده شده باشد:

ما اکنون آماده شروع به نوشتن کد هستیم.

بالا اول است tailwind.config.js پرونده این تنها پرونده پیکربندی است که شما باید کار کنید روی، همانطور که دیگران از قبل پیکربندی مورد نیاز خود را دارند. تمام کد موجود در پرونده را با کد زیر جایگزین کنید:

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

تمام این کد این است که مسیرها را به تمام پرونده های الگوی خود اضافه کنید.

خوب ، بعد ، شما می خواهید کار کنید روی سبک های شما و css tailwind. سه پرونده CSS برای کار وجود دارد روی: App.cssبا index.cssوت style.cssبشر

اول App.css پرونده تمام کد را با این کد در اینجا جایگزین کنید:

#root {
  max-width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

ما فقط چند سبک طرح بندی اساسی در اینجا داریم root وت mainبشر

بعدی است index.css پرونده در زیر کد مورد نیاز شما قرار دارد ، بنابراین همه چیز را در پرونده با آن جایگزین کنید:

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@layer components {
  .chat-container {
    @apply w-full h-96 flex flex-col;
  }

  .chat-messages {
    @apply flex-1 overflow-y-auto p-4;
  }

  .message {
    @apply flex mb-4;
  }

  .user-message {
    @apply justify-end;
  }

  .agent-message {
    @apply justify-start;
  }

  .message-avatar {
    @apply flex-shrink-0 mr-2;
  }

  .avatar-placeholder {
    @apply w-10 h-10 rounded-full bg-blue-500 text-white flex items-center justify-center font-bold;
  }

  .message-content {
    @apply p-3 rounded-lg max-w-xs sm:max-w-sm md:max-w-md;
  }

  .user-message .message-content {
    @apply bg-blue-500 text-white;
  }

  .agent-message .message-content {
    @apply bg-gray-200 text-gray-800;
  }

  .chat-input-container {
    @apply p-4 border-t border-gray-200;
  }

  .chat-input-group {
    @apply flex;
  }

  .chat-input {
    @apply flex-1 border border-gray-300 rounded-l-lg p-2 focus:outline-none focus:ring-2 focus:ring-blue-500;
  }

  .chat-send-button {
    @apply bg-blue-500 text-white px-4 py-2 rounded-r-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500;
  }

  .loading-dots:after {
    @apply content-['...'] animate-pulse;
  }

  .project-image-placeholder {
    @apply h-48 bg-gray-300 flex items-center justify-center text-gray-600 font-semibold;
  }

  .agent-avatar-placeholder {
    @apply w-16 h-16 rounded-full bg-blue-500 text-white flex items-center justify-center font-bold mx-auto;
  }
}

همه این سبک ها مربوط به تنظیم CSS Tailwind شما در طول پروژه شما است.

فقط یک پرونده برای CSS باقی مانده است و این است style.css پرونده این یک فایل بزرگ است ، بنابراین من کد را به دو بخش تقسیم می کنم – فقط کپی کرده و آنها را در پرونده قرار دهید.

در اینجا قسمت اول است:

/* Main Styles */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: #333;
  background-color: #f8f9fa;
}

/* Layout Styles */
#root {
  max-width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
}

footer {
  margin-top: auto;
}

/* Navbar Styles */
.navbar {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
  font-weight: 700;
}

.navbar .container {
  max-width: 1320px;
}

/* Card Styles */
.card {
  border: none;
  border-radius: 0.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 1rem;
  padding: 2em;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Agent Styles */
.agent-avatar-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #6c757d;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  margin: 0 auto;
  border: 3px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #6c757d;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
}

/* Chat Container Styles */
.chat-container {
  display: flex;
  flex-direction: column;
  height: 400px;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  overflow: hidden;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  background-color: #f8f9fa;
}

و در اینجا قسمت دوم است:

.chat-input-container {
  padding: 0.5rem;
  background-color: #fff;
  border-top: 1px solid #dee2e6;
}

.chat-input-group {
  display: flex;
}

.chat-input {
  flex: 1;
  margin-right: 0.5rem;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  padding: 0.5rem;
}

.chat-send-button {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.chat-send-button:hover {
  background-color: #0069d9;
}

/* Message Styles */
.message {
  margin-bottom: 1rem;
  max-width: 80%;
}

.user-message {
  margin-left: auto;
  text-align: right;
}

.agent-message {
  display: flex;
  align-items: flex-start;
}

.message-avatar {
  margin-right: 0.5rem;
}

.message-content {
  background-color: #fff;
  padding: 0.75rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.user-message .message-content {
  background-color: #007bff;
  color: #fff;
}

.agent-message .message-content {
  background-color: #fff;
}

/* Loading Animation */
.loading-dots:after {
  content: '.';
  animation: dots 1.5s steps(5, end) infinite;
}

@keyframes dots {
  0%,
  20% {
    content: '.';
  }
  40% {
    content: '..';
  }
  60% {
    content: '...';
  }
  80%,
  100% {
    content: '';
  }
}

این کد دارای سبک های اصلی برای طرح محتوای وب سایت است. این مراقبت از یک ظاهر طراحی شده است. ما فقط قطعات و صفحات را باقی مانده ایم ، و سپس می توانید برنامه خود را اجرا کنید. قبل از شروع روی آن پوشه ها ، بیایید به سرعت انجام دهیم App.jsx وت main.jsx پرونده ها در src پوشه

بنابراین ، این کد را به App.jsx پرونده:

import { BrowserRouter as Router, Routes, Route } from 'react-router';
import Layout from './components/Layout';
import Home from './pages/Home';
import Projects from './pages/Projects';
import Career from './pages/Career';
import Services from './pages/Services';
import Research from './pages/Research';
import Contact from './pages/Contact';
import './App.css';

function App() {
  return (
    <Router>
      <Layout>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="https://www.freecodecamp.org/projects" element={<Projects />} />
          <Route path="/career" element={<Career />} />
          <Route path="/services" element={<Services />} />
          <Route path="/research" element={<Research />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </Layout>
    </Router>
  );
}

export default App;

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

در آخر ، تمام کد های موجود در آن را جایگزین و به روز کنید main.jsx با این:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import './style.css';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

تنها به روزرسانی که در اینجا انجام دادیم اضافه کردن import برای import './style.css' بنابراین اکنون می توانید از این پرونده در برنامه خود به سبک های این پرونده دسترسی پیدا کنید.

زمان کار روی پرونده های مؤلفه شما ، با شروع Chat.jsx پرونده من پایگاه کد را تقسیم کردم زیرا این یک پرونده بزرگ است ، بنابراین حتماً آن را به هم اضافه کنید.

مانند گذشته ، قسمت اول است:

import { useState, useEffect, useRef, useCallback } from "react";
import axios from "axios";

function Chat({ agentType, initialMessage, agentInitials, directQuestion }) {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const messagesEndRef = useRef(null);
  const [processedQuestions, setProcessedQuestions] = useState([]);

  const API_BASE_URL = "http://127.0.0.1:5001";

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  };

  const handleSendMessage = useCallback(
    async (questionOverride = null) => {
      const messageToSend = questionOverride || input;

      if (!messageToSend.trim()) return;

      const userMessage = {
        content: messageToSend,
        isUser: true,
      };

      setMessages((prev) => [...prev, userMessage]);

      if (!questionOverride) {
        setInput("");
      }

      setIsLoading(true);

      try {
        const response = await axios.post(
          `${API_BASE_URL}/api/${agentType}`,
          {
            message: messageToSend,
          },
          {
            headers: {
              "Content-Type": "application/json",
              "Access-Control-Allow-Origin": "*",
            },
          }
        );

        if (response.data && response.data.response) {
          setMessages((prev) => [
            ...prev,
            {
              content: response.data.response,
              isUser: false,
            },
          ]);
        }
      } catch (error) {
        console.error("Error sending message:", error);
        setMessages((prev) => [
          ...prev,
          {
            content:
              "Sorry, there was an error connecting to the AI agent. Please make sure the Flask server is running at http://127.0.0.1:5001/",
            isUser: false,
          },
        ]);
      } finally {
        setIsLoading(false);
      }
    },
    [input, agentType, API_BASE_URL]
  );

  const handleKeyPress = (e) => {
    if (e.key === "Enter") {
      handleSendMessage();
    }
  };

  const cleanQuestion = (question) => {
    return question.replace(/\s*\[\d+\]\s*$/, "");
  };

  useEffect(() => {
    if (initialMessage) {
      setMessages([
        {
          content: initialMessage,
          isUser: false,
        },
      ]);
    }
  }, [initialMessage]);

  useEffect(() => {
    scrollToBottom();
  }, [messages]);

قسمت اول این کد واردات شما ، URL پایه برای اتصال به باطن و توابع است.

حال بیایید قسمت دوم پایگاه کد را اضافه کنیم:

  useEffect(() => {
    if (
      directQuestion &&
      directQuestion.trim() !== "" &&
      !processedQuestions.includes(directQuestion)
    ) {
      const cleanedQuestion = cleanQuestion(directQuestion);
      setInput(cleanedQuestion);
      handleSendMessage(cleanedQuestion);
      setProcessedQuestions((prev) => [...prev, directQuestion]);
    }
  }, [directQuestion, processedQuestions, handleSendMessage]);

  const renderContent = (content) => {
    let formattedContent = content;

    formattedContent = formattedContent.replace(
      /#{6}\s+(.*?)(?=\n|$)/g,
      "<h6>$1</h6>"
    );
    formattedContent = formattedContent.replace(
      /#{5}\s+(.*?)(?=\n|$)/g,
      "<h5>$1</h5>"
    );
    formattedContent = formattedContent.replace(
      /#{4}\s+(.*?)(?=\n|$)/g,
      "<h4>$1</h4>"
    );
    formattedContent = formattedContent.replace(
      /#{3}\s+(.*?)(?=\n|$)/g,
      "<h3>$1</h3>"
    );
    formattedContent = formattedContent.replace(
      /#{2}\s+(.*?)(?=\n|$)/g,
      "<h2>$1</h2>"
    );
    formattedContent = formattedContent.replace(
      /#{1}\s+(.*?)(?=\n|$)/g,
      "<h1>$1</h1>"
    );

    formattedContent = formattedContent.replace(
      /\*\*(.*?)\*\*/g,
      "<strong>$1</strong>"
    );

    formattedContent = formattedContent.replace(/\*(.*?)\*/g, "<em>$1</em>");

    formattedContent = formattedContent.replace(/`(.*?)`/g, "<code>$1</code>");

    formattedContent = formattedContent.replace(
      /\[(.*?)\]\((.*?)\)/g,
      '<a href="https://www.freecodecamp.org/news/build-a-team-of-ai-agents-for-your-website-for-free/" target="_blank">$1</a>'
    );

    formattedContent = formattedContent.replace(
      /^\s*\*\s+(.*?)(?=\n|$)/gm,
      "<li>$1</li>"
    );
    formattedContent = formattedContent.replace(
      /<li>(.*?)<\/li>(?:\s*<li>.*?<\/li>)*/g,
      "<ul>$&</ul>"
    );

    formattedContent = formattedContent.replace(
      /^\s*\d+\.\s+(.*?)(?=\n|$)/gm,
      "<li>$1</li>"
    );
    formattedContent = formattedContent.replace(
      /<li>(.*?)<\/li>(?:\s*<li>.*?<\/li>)*/g,
      "<ol>$&</ol>"
    );

    return { __html: formattedContent };
  };

  return (
    <div className="chat-container">
      <div className="chat-messages" id={`${agentType}-messages`}>
        {messages.map((message, index) => (
          <div
            key={index}
            className={`message ${
              message.isUser ? "user-message" : "agent-message"
            }`}
          >
            {!message.isUser && (
              <div className="message-avatar">
                <div className="avatar-placeholder">
                  {agentInitials || "AI"}
                </div>
              </div>
            )}
            <div className="message-content">
              <div dangerouslySetInnerHTML={renderContent(message.content)} />
            </div>
          </div>
        ))}
        {isLoading && (
          <div className="message agent-message">
            <div className="message-avatar">
              <div className="avatar-placeholder">{agentInitials || "AI"}</div>
            </div>
            <div className="message-content">
              <p className="loading-dots">Thinking</p>
            </div>
          </div>
        )}
        <div ref={messagesEndRef} />
      </div>
      <div className="chat-input-container">
        <div className="chat-input-group">
          <input
            type="text"
            id={`${agentType}-input`}
            className="chat-input"
            placeholder="Type your message..."
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyPress={handleKeyPress}
          />
          <button
            id={`${agentType}-send`}
            className="chat-send-button"
            onClick={() => handleSendMessage()}
          >
            <i className="fa-solid fa-paper-plane mr-2"></i>Send
          </button>
        </div>
      </div>
    </div>
  );
}

export default Chat;

قسمت دوم کد بیشتر دارای JSX برای مؤلفه ها است.

درست است ، بعد بیایید این کار را انجام دهیم Footer.jsx پرونده را با افزودن این کد به پرونده:

function Footer() {
  return (
    <footer className="bg-dark text-white py-4">
      <div className="container">
        <div className="row">
          <div className="col-md-6">
            <h5>Portfolio</h5>
            <p>Showcasing my work with the help of AI agents</p>
          </div>
          <div className="col-md-6 text-md-end">
            <h5>Connect</h5>
            <div className="social-links">
              <a href="#" className="text-white me-2"></a>
              <a href="#" className="text-white me-2"></a>
              <a href="#" className="text-white me-2"></a>
            </div>
          </div>
        </div>
        <div className="row mt-3">
          <div className="col-12 text-center">
            <p className="mb-0">
              &copy; {new Date().getFullYear()} Portfolio. All rights reserved.
            </p>
          </div>
        </div>
      </div>
    </footer>
  );
}

export default Footer;

کد تقریباً کاملاً توضیحی است-برخی از اطلاعات تماس را در اختیار شما قرار می دهد که در پایین شما نشان داده می شود page در بخش پاورقی

اکنون می توانیم کار کنیم روی در Layout.jsxبشر من همچنین آن را به دو قسمت تقسیم کرده ام.

قسمت اول پایگاه کد را در اینجا اضافه کنید:

import { Link, useLocation } from "react-router";
import { useState } from "react";

function Layout({ children }) {
  const location = useLocation();
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <div className="flex flex-col min-h-screen">
      <nav className="bg-gray-800 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            <div className="flex items-center">
              <Link className="text-xl font-bold" to="/">
                Portfolio
              </Link>
            </div>
            <div className="hidden md:block">
              <div className="ml-10 flex items-center space-x-4">
                <Link
                  className={`px-3 py-2 rounded-md text-sm font-medium ${
                    location.pathname === "/"
                      ? "bg-gray-900 text-white"
                      : "text-gray-300 hover:bg-gray-700 hover:text-white"
                  }`}
                  to="/"
                >
                  Home
                </Link>
                <Link
                  className={`px-3 py-2 rounded-md text-sm font-medium ${
                    location.pathname === "https://www.freecodecamp.org/projects"
                      ? "bg-gray-900 text-white"
                      : "text-gray-300 hover:bg-gray-700 hover:text-white"
                  }`}
                  to="https://www.freecodecamp.org/projects"
                >
                  Projects
                </Link>
                <Link
                  className={`px-3 py-2 rounded-md text-sm font-medium ${
                    location.pathname === "/career"
                      ? "bg-gray-900 text-white"
                      : "text-gray-300 hover:bg-gray-700 hover:text-white"
                  }`}
                  to="/career"
                >
                  Career
                </Link>
                <Link
                  className={`px-3 py-2 rounded-md text-sm font-medium ${
                    location.pathname === "/services"
                      ? "bg-gray-900 text-white"
                      : "text-gray-300 hover:bg-gray-700 hover:text-white"
                  }`}
                  to="/services"
                >
                  Services
                </Link>
                <Link
                  className={`px-3 py-2 rounded-md text-sm font-medium ${
                    location.pathname === "/research"
                      ? "bg-gray-900 text-white"
                      : "text-gray-300 hover:bg-gray-700 hover:text-white"
                  }`}
                  to="/research"
                >
                  Research
                </Link>
                <Link
                  className={`px-3 py-2 rounded-md text-sm font-medium ${
                    location.pathname === "/contact"
                      ? "bg-gray-900 text-white"
                      : "text-gray-300 hover:bg-gray-700 hover:text-white"
                  }`}
                  to="/contact"
                >
                  Contact
                </Link>
              </div>
            </div>
            <div className="md:hidden flex items-center">
              <button
                onClick={() => setIsMenuOpen(!isMenuOpen)}
                className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
              >
                <span className="sr-only">Open main menu</span>
                {isMenuOpen ? (
                  <svg
                    className="block h-6 w-6"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    aria-hidden="true"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      d="M6 18L18 6M6 6l12 12"
                    />
                  </svg>
                ) : (
                  <svg
                    className="block h-6 w-6"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    aria-hidden="true"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      d="M4 6h16M4 12h16M4 18h16"
                    />
                  </svg>
                )}
              </button>
            </div>
          </div>
        </div>

این بخش از کد همانطور که برای طرح انتظار می رود ، مؤلفه های زیادی دارد.

در اینجا قسمت دوم کد اضافه شده به پرونده است:

        {/* Mobile menu, show/hide based روی menu state */}
        {isMenuOpen && (
          <div className="md:hidden">
            <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
              <Link
                className={`block px-3 py-2 rounded-md text-base font-medium ${
                  location.pathname === "/"
                    ? "bg-gray-900 text-white"
                    : "text-gray-300 hover:bg-gray-700 hover:text-white"
                }`}
                to="/"
                onClick={() => setIsMenuOpen(false)}
              >
                Home
              </Link>
              <Link
                className={`block px-3 py-2 rounded-md text-base font-medium ${
                  location.pathname === "https://www.freecodecamp.org/projects"
                    ? "bg-gray-900 text-white"
                    : "text-gray-300 hover:bg-gray-700 hover:text-white"
                }`}
                to="https://www.freecodecamp.org/projects"
                onClick={() => setIsMenuOpen(false)}
              >
                Projects
              </Link>
              <Link
                className={`block px-3 py-2 rounded-md text-base font-medium ${
                  location.pathname === "/career"
                    ? "bg-gray-900 text-white"
                    : "text-gray-300 hover:bg-gray-700 hover:text-white"
                }`}
                to="/career"
                onClick={() => setIsMenuOpen(false)}
              >
                Career
              </Link>
              <Link
                className={`block px-3 py-2 rounded-md text-base font-medium ${
                  location.pathname === "/services"
                    ? "bg-gray-900 text-white"
                    : "text-gray-300 hover:bg-gray-700 hover:text-white"
                }`}
                to="/services"
                onClick={() => setIsMenuOpen(false)}
              >
                Services
              </Link>
              <Link
                className={`block px-3 py-2 rounded-md text-base font-medium ${
                  location.pathname === "/research"
                    ? "bg-gray-900 text-white"
                    : "text-gray-300 hover:bg-gray-700 hover:text-white"
                }`}
                to="/research"
                onClick={() => setIsMenuOpen(false)}
              >
                Research
              </Link>
              <Link
                className={`block px-3 py-2 rounded-md text-base font-medium ${
                  location.pathname === "/contact"
                    ? "bg-gray-900 text-white"
                    : "text-gray-300 hover:bg-gray-700 hover:text-white"
                }`}
                to="/contact"
                onClick={() => setIsMenuOpen(false)}
              >
                Contact
              </Link>
            </div>
          </div>
        )}
      </nav>

      <main className="flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {children}
      </main>

      <footer className="bg-gray-800 text-white py-8">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="md:flex md:justify-between">
            <div className="mb-8 md:mb-0">
              <h5 className="text-lg font-semibold mb-2">Portfolio</h5>
              <p className="text-gray-300">
                Showcasing my work with the help of AI agents
              </p>
            </div>
          </div>
          <div className="mt-8 border-t border-gray-700 pt-8 text-center">
            <p className="text-gray-300">
              &copy; 1404 Portfolio. All rights reserved.
            </p>
          </div>
        </div>
      </footer>
    </div>
  );
}

export default Layout;

این کد دارای مؤلفه های بیشتری است که مؤلفه طرح را تکمیل می کند.

ما تقریباً تمام شده ایم اکنون برای آخرین مؤلفه ، Navbar.jsx، قبل از حرکت روی به صفحات

این کد مورد نیاز برای پرونده است:

import { Link, useLocation } from 'react-router';

function Navbar() {
  const location = useLocation();

  return (
    <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
      <div className="container">
        <Link className="navbar-brand" to="/">
          Portfolio
        </Link>
        <button
          className="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
        >
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarNav">
          <ul className="navbar-nav ms-auto">
            <li className="nav-item">
              <Link
                className={`nav-link ${
                  location.pathname === '/' ? 'active' : ''
                }`}
                to="/"
              >
                Home
              </Link>
            </li>
            <li className="nav-item">
              <Link
                className={`nav-link ${
                  location.pathname === "https://www.freecodecamp.org/projects" ? 'active' : ''
                }`}
                to="https://www.freecodecamp.org/projects"
              >
                Projects
              </Link>
            </li>
            <li className="nav-item">
              <Link
                className={`nav-link ${
                  location.pathname === '/career' ? 'active' : ''
                }`}
                to="/career"
              >
                Career
              </Link>
            </li>
            <li className="nav-item">
              <Link
                className={`nav-link ${
                  location.pathname === '/services' ? 'active' : ''
                }`}
                to="/services"
              >
                Services
              </Link>
            </li>
            <li className="nav-item">
              <Link
                className={`nav-link ${
                  location.pathname === '/research' ? 'active' : ''
                }`}
                to="/research"
              >
                Research
              </Link>
            </li>
            <li className="nav-item">
              <Link
                className={`nav-link ${
                  location.pathname === '/contact' ? 'active' : ''
                }`}
                to="/contact"
              >
                Contact
              </Link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
}

export default Navbar;

مؤلفه NAVBAR پیوندهای ناوبری شما را دارد که به شما امکان می دهد با استفاده از صفحات حرکت کنید react-routerبشر

خوب ، پایگاه کد مؤلفه آماده است! تمام آنچه باقی مانده شش است page مسیرها در پوشه صفحات ما.

اولین پرونده ای که ما کار خواهیم کرد روی خواهد شد Career.jsx پرونده من پایگاه کد را برای خوانایی مانند گذشته تقسیم می کنم ، بنابراین بخش های مختلف را با قسمت اول در اینجا کپی کنید:

import { useState } from "react";
import Chat from "../components/Chat";

function Career() {
  const initialMessage =
    "Hello! I'm CareerAgent, the career specialist. I can provide information about skills, experience, and professional background. What would you like to know?";

  const [currentQuestion, setCurrentQuestion] = useState("");

  const askCareerQuestion = (question) => {
    setCurrentQuestion(`${question} [${Date.now()}]`);

    setTimeout(() => {
      setCurrentQuestion("");
    }, 500);
  };

  return (
    <div>
      <div className="flex flex-col md:flex-row gap-8 mb-12">
        <div className="md:w-1/3">
          <h1 className="text-3xl font-bold mb-4">Career</h1>
          <p className="text-lg mb-4">
            Here you can find information about my professional background,
            skills, and experience. Feel free to ask CareerAgent for more
            details.
          </p>
        </div>
        <div className="md:w-2/3">
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-2">
                Chat with CareerAgent
              </h5>
              <p className="text-gray-600 mb-4">
                Our career specialist can provide information about skills,
                experience, and professional background.
              </p>
              <Chat
                agentType="career"
                initialMessage={initialMessage}
                agentInitials="CA"
                directQuestion={currentQuestion}
              />
            </div>
          </div>
        </div>
      </div>

      <div className="mb-12">
        <div className="mb-6">
          <h2 className="text-2xl font-bold mb-4">Skills</h2>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-4">
                Frontend Development
              </h5>
              <ul className="divide-y divide-gray-200">
                <li className="py-3 flex justify-between items-center">
                  React
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Expert
                  </span>
                </li>
                <li className="py-3 flex justify-between items-center">
                  Vue.js
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Advanced
                  </span>
                </li>
                <li className="py-3 flex justify-between items-center">
                  Angular
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Intermediate
                  </span>
                </li>
                <li className="py-3 flex justify-between items-center">
                  TypeScript
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Advanced
                  </span>
                </li>
                <li className="py-3 flex justify-between items-center">
                  CSS/SASS
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Expert
                  </span>
                </li>
              </ul>
              <button
                className="mt-4 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askCareerQuestion(
                    "Tell me more about your frontend development skills"
                  )
                }
              >
                Ask About Frontend Skills
              </button>

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

 </div>
          </div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-4">
                Backend Development
              </h5>
              <ul className="divide-y divide-gray-200">
                <li className="py-3 flex justify-between items-center">
                  Node.js
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Expert
                  </span>
                </li>
                <li className="py-3 flex justify-between items-center">
                  Python
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Advanced
                  </span>
                </li>
                <li className="py-3 flex justify-between items-center">
                  Django
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Intermediate
                  </span>
                </li>
                <li className="py-3 flex justify-between items-center">
                  Flask
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Advanced
                  </span>
                </li>
                <li className="py-3 flex justify-between items-center">
                  SQL/NoSQL
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Advanced
                  </span>
                </li>
              </ul>
              <button
                className="mt-4 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askCareerQuestion(
                    "Tell me more about your backend development skills"
                  )
                }
              >
                Ask About Backend Skills
              </button>
            </div>
          </div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-4">Other Skills</h5>
              <ul className="divide-y divide-gray-200">
                <li className="py-3 flex justify-between items-center">
                  DevOps
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Intermediate
                  </span>
                </li>
                <li className="py-3 flex justify-between items-center">
                  UI/UX Design
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Advanced
                  </span>
                </li>
                <li className="py-3 flex justify-between items-center">
                  Project Management
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Advanced
                  </span>
                </li>
                <li className="py-3 flex justify-between items-center">
                  Agile Methodologies
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Expert
                  </span>
                </li>
                <li className="py-3 flex justify-between items-center">
                  Technical Writing
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Intermediate
                  </span>
                </li>
              </ul>
              <button
                className="mt-4 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askCareerQuestion("What other skills do you have?")
                }
              >
                Ask About Other Skills
              </button>
            </div>
          </div>
        </div>
      </div>

در اینجا کد مؤلفه بسیار بیشتری وجود دارد pageبشر در آخر ، اجازه می دهیم قسمت آخر کد را برای این کار اضافه کنیم page:

<div className="mb-12">
        <div className="mb-6">
          <h2 className="text-2xl font-bold mb-4">Experience</h2>
        </div>
        <div className="space-y-6">
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <div className="flex justify-between items-start mb-2">
                <h5 className="text-xl font-semibold">
                  Senior Full-Stack Developer
                </h5>
                <span className="text-gray-500 text-sm">2020 - Present</span>
              </div>
              <h6 className="text-gray-600 mb-3">Tech Innovations Inc.</h6>
              <p className="text-gray-700 mb-4">
                Lead developer for multiple web and mobile applications,
                managing a team of 5 developers. Implemented CI/CD pipelines and
                improved development workflow efficiency by 30%.
              </p>
              <button
                className="py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askCareerQuestion(
                    "Tell me more about your experience at Tech Innovations Inc."
                  )
                }
              >
                More Details
              </button>
            </div>
          </div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <div className="flex justify-between items-start mb-2">
                <h5 className="text-xl font-semibold">Full-Stack Developer</h5>
                <span className="text-gray-500 text-sm">2017 - 2020</span>
              </div>
              <h6 className="text-gray-600 mb-3">WebSolutions Co.</h6>
              <p className="text-gray-700 mb-4">
                Developed and maintained multiple client websites and web
                applications. Specialized in React frontend development and
                Node.js backend services.
              </p>
              <button
                className="py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askCareerQuestion(
                    "Tell me more about your experience at WebSolutions Co."
                  )
                }
              >
                More Details
              </button>
            </div>
          </div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <div className="flex justify-between items-start mb-2">
                <h5 className="text-xl font-semibold">Junior Web Developer</h5>
                <span className="text-gray-500 text-sm">2015 - 2017</span>
              </div>
              <h6 className="text-gray-600 mb-3">Digital Creations Ltd.</h6>
              <p className="text-gray-700 mb-4">
                Worked روی frontend development for e-commerce websites. Gained
                experience with JavaScript, CSS, and responsive design
                principles.
              </p>
              <button
                className="py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askCareerQuestion(
                    "Tell me more about your experience at Digital Creations Ltd."
                  )
                }
              >
                More Details
              </button>
            </div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-4">Education</h5>
            <div className="mb-6">
              <div className="flex justify-between items-start mb-1">
                <h6 className="font-medium">
                  Master of Science in Computer Science
                </h6>
                <span className="text-gray-500 text-sm">2013 - 2015</span>
              </div>
              <p className="text-gray-600">University of Technology</p>
            </div>
            <div>
              <div className="flex justify-between items-start mb-1">
                <h6 className="font-medium">
                  Bachelor of Science in Software Engineering
                </h6>
                <span className="text-gray-500 text-sm">2009 - 2013</span>
              </div>
              <p className="text-gray-600">State University</p>
            </div>
            <button
              className="mt-4 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
              onClick={() =>
                askCareerQuestion(
                  "Tell me more about your educational background"
                )
              }
            >
              Ask About Education
            </button>
          </div>
        </div>
        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-4">Certifications</h5>
            <ul className="divide-y divide-gray-200">
              <li className="py-3 flex justify-between items-center">
                AWS Certified Solutions Architect
                <span className="text-gray-500 text-sm">2022</span>
              </li>
              <li className="py-3 flex justify-between items-center">
                Google Cloud Professional Developer
                <span className="text-gray-500 text-sm">2021</span>
              </li>
              <li className="py-3 flex justify-between items-center">
                Microsoft Certified: Azure Developer Associate
                <span className="text-gray-500 text-sm">2020</span>
              </li>
              <li className="py-3 flex justify-between items-center">
                Certified Scrum Master
                <span className="text-gray-500 text-sm">2019</span>
              </li>
            </ul>
            <button
              className="mt-4 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
              onClick={() =>
                askCareerQuestion("Tell me more about your certifications")
              }
            >
              Ask About Certifications
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Career;

و این ما را کامل می کند Career.jsx page: ما در این بخش از کد فرم ها و مؤلفه های بیشتری داریم.

بعدی ماست Contact.jsx pageبشر مانند قبل ، من برای خوانایی پایگاه کد را تقسیم می کنم ، بنابراین قسمت اول این کد را به آن اضافه کنید:

import { useState } from "react";

function Contact() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subject: "",
    message: "",
  });
  const [formResponse, setFormResponse] = useState(null);

  const handleChange = (e) => {
    const { id, value } = e.target;
    setFormData((prevData) => ({
      ...prevData,
      [id]: value,
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    setFormResponse({
      type: "success",
      message:
        "Thank you for your message! I'll get back to you as soon as possible.",
    });

    setFormData({
      name: "",
      email: "",
      subject: "",
      message: "",
    });

    document
      .getElementById("form-response")
      .scrollIntoView({ behavior: "smooth" });
  };

  return (
    <div>
      <div className="flex flex-col md:flex-row gap-8 mb-12">
        <div className="md:w-2/3">
          <h1 className="text-3xl font-bold mb-4">Contact Me</h1>
          <p className="text-lg mb-4">
            Have a question or want to discuss a potential project? Feel free to
            reach out using the form below or through any of my social media
            channels.
          </p>
        </div>
        <div className="md:w-1/3">
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-4">Quick Links</h5>
              <div className="flex flex-col gap-2">
                <a
                  href="https://www.freecodecamp.org/projects"
                  className="py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 text-center transition-colors"
                >
                  View Projects
                </a>
                <a
                  href="http://www.freecodecamp.org/services"
                  className="py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 text-center transition-colors"
                >
                  Services & Pricing
                </a>
                <a
                  href="http://www.freecodecamp.org/research"
                  className="py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 text-center transition-colors"
                >
                  Research & Resources
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-4">Contact Form</h5>
            <form id="contact-form" onSubmit={handleSubmit}>
              <div className="mb-4">
                <label
                  htmlFor="name"
                  className="block text-sm font-medium text-gray-700 mb-1"
                >
                  Name
                </label>
                <input
                  type="text"
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  id="name"
                  placeholder="Your Name"
                  required
                  value={formData.name}
                  onChange={handleChange}
                />
              </div>

ما واردات ، کارکردها و بخشی از مؤلفه های خود را در اینجا داریم. در آخر ، قسمت دوم را برای تکمیل این کار اضافه کنید page:

<div className="mb-4">
                <label
                  htmlFor="email"
                  className="block text-sm font-medium text-gray-700 mb-1"
                >
                  Email
                </label>
                <input
                  type="email"
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  id="email"
                  placeholder="your.email@example.com"
                  required
                  value={formData.email}
                  onChange={handleChange}
                />
              </div>
              <div className="mb-4">
                <label
                  htmlFor="subject"
                  className="block text-sm font-medium text-gray-700 mb-1"
                >
                  Subject
                </label>
                <input
                  type="text"
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  id="subject"
                  placeholder="Subject"
                  required
                  value={formData.subject}
                  onChange={handleChange}
                />
              </div>
              <div className="mb-4">
                <label
                  htmlFor="message"
                  className="block text-sm font-medium text-gray-700 mb-1"
                >
                  Message
                </label>
                <textarea
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  id="message"
                  rows="5"
                  placeholder="Your message..."
                  required
                  value={formData.message}
                  onChange={handleChange}
                ></textarea>
              </div>
              <button
                type="submit"
                className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
              >
                Send Message
              </button>
            </form>
            <div
              id="form-response"
              className="mt-4"
              style={{ display: formResponse ? "block" : "none" }}
            >
              {formResponse && (
                <div
                  className={`p-4 ${
                    formResponse.type === "success"
                      ? "bg-green-100 text-green-700"
                      : "bg-red-100 text-red-700"
                  } rounded-md`}
                >
                  <i className="bi bi-check-circle-fill mr-2"></i>
                  {formResponse.message}
                </div>
              )}
            </div>
          </div>
        </div>
        <div className="space-y-6">
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-4">
                Contact Information
              </h5>
              <ul className="space-y-3">
                <li className="flex items-center">
                  <i className="bi bi-envelope mr-2"></i>
                  <a
                    href="mailto:contact@example.com"
                    className="text-blue-500 hover:underline"
                  >
                    contact@example.com
                  </a>
                </li>
                <li className="flex items-center">
                  <i className="bi bi-geo-alt mr-2"></i>
                  UK
                </li>
              </ul>
              <h5 className="text-xl font-semibold mt-6 mb-3">
                Connect روی Social Media
              </h5>
              <div className="flex flex-wrap gap-2">
                <a
                  href="#"
                  className="px-3 py-1.5 border border-gray-800 text-gray-800 rounded-md hover:bg-gray-100 flex items-center transition-colors"
                >
                  <i className="bi bi-github mr-1"></i> GitHub
                </a>
                <a
                  href="#"
                  className="px-3 py-1.5 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 flex items-center transition-colors"
                >
                  <i className="bi bi-linkedin mr-1"></i> LinkedIn
                </a>
                <a
                  href="#"
                  className="px-3 py-1.5 border border-gray-800 text-gray-800 rounded-md hover:bg-gray-100 flex items-center transition-colors"
                >
                  <i className="bi bi-twitter mr-1"></i> X
                </a>
              </div>
            </div>
          </div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-3">Availability</h5>
              <p className="text-gray-700 mb-3">
                I'm currently available for freelance work and consulting. My
                typical response time is within 24 hours.
              </p>
              <p className="text-gray-700">
                For urgent inquiries, please call the phone number listed above.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Contact;

با آن ، این page اکنون انجام شده است ، و ما بقیه مؤلفه ها و فرم ها را داریم.

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

این کد برای اضافه کردن به Home.jsx page پرونده:

import { Link } from 'react-router';
import Chat from '../components/Chat';

function Home() {
  const initialMessage =
    "Hello! I'm WelcomeAgent, the welcome specialist. I can help you navigate this portfolio website. Are you an employer, client, or fellow programmer?";

  return (
    <div>
      <div className="flex flex-col md:flex-row gap-8 mb-12">
        <div className="md:w-1/3">
          <h1 className="text-3xl font-bold mb-4">Welcome to my Portfolio</h1>
          <p className="text-lg mb-4">
            This portfolio showcases my work and skills with the help of
            specialized AI agents. Each agent is designed to assist you with
            different aspects of my portfolio.
          </p>
          <p className="text-gray-700">
            Feel free to interact with the WelcomeAgent to get personalized
            recommendations روی which sections of the portfolio to explore based
            روی your interests.
          </p>
        </div>
        <div className="md:w-2/3">
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-2">
                Chat with WelcomeAgent
              </h5>
              <p className="text-gray-600 mb-4">
                Our welcome specialist can help you navigate this portfolio
                website.
              </p>
              <Chat
                agentType="welcome"
                initialMessage={initialMessage}
                agentInitials="WA"
              />
            </div>
          </div>
        </div>
      </div>

      <div className="mb-12">
        <div className="mb-6">
          <h2 className="text-2xl font-bold mb-4">Meet the Agents</h2>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6 flex flex-col items-center">
              <div className="agent-avatar-placeholder mb-4">PA</div>
              <h5 className="text-xl font-semibold mb-2">ProjectAgent</h5>
              <p className="text-gray-600 mb-4 text-center">
                Provides detailed information about my projects, technologies
                used, and challenges overcome.
              </p>
              <Link
                to="https://www.freecodecamp.org/projects"
                className="mt-auto py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
              >
                View Projects
              </Link>
            </div>
          </div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6 flex flex-col items-center">
              <div className="agent-avatar-placeholder mb-4">CA</div>
              <h5 className="text-xl font-semibold mb-2">CareerAgent</h5>
              <p className="text-gray-600 mb-4 text-center">
                Shares information about my skills, experience, and professional
                background.
              </p>
              <Link
                to="/career"
                className="mt-auto py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
              >
                View Career
              </Link>
            </div>
          </div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6 flex flex-col items-center">
              <div className="agent-avatar-placeholder mb-4">BA</div>
              <h5 className="text-xl font-semibold mb-2">BusinessAdvisor</h5>
              <p className="text-gray-600 mb-4 text-center">
                Provides information about services, pricing, and client
                engagement process.
              </p>
              <Link
                to="/services"
                className="mt-auto py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
              >
                View Services
              </Link>
            </div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-2">Featured Projects</h5>
            <p className="text-gray-600 mb-4">
              Check out some of my recent work:
            </p>
            <ul className="divide-y divide-gray-200">
              <li className="py-3 px-2">E-commerce Platform</li>
              <li className="py-3 px-2">Task Management Application</li>
              <li className="py-3 px-2">Data Visualization Dashboard</li>
            </ul>
            <div className="mt-4">
              <Link
                to="https://www.freecodecamp.org/projects"
                className="inline-block py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
              >
                View All Projects
              </Link>
            </div>
          </div>
        </div>
        <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-2">Research & Insights</h5>
            <p className="text-gray-600 mb-4">
              Explore my research روی emerging technologies and industry trends:
            </p>
            <ul className="divide-y divide-gray-200">
              <li className="py-3 px-2">AI in Web Development</li>
              <li className="py-3 px-2">Modern Frontend Frameworks</li>
              <li className="py-3 px-2">Cloud Architecture Patterns</li>
            </ul>
            <div className="mt-4">
              <Link
                to="/research"
                className="inline-block py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
              >
                View Research
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Home;

این کد برای خانه ما دارد page و استقبال

خوب ، حالا بیایید کار کنیم روی در Projects.jsx pageبشر برای خوانایی ، تقسیم دوباره کد به نصف ساده تر است. بنابراین در اینجا قسمت اول است:

import { useState } from "react";
import Chat from "../components/Chat";

function Projects() {
  const initialMessage =
    "Hello! I'm ProjectAgent, the project specialist. I can provide detailed information about projects, technologies used, and challenges overcome. What would you like to know?";

  const [currentQuestion, setCurrentQuestion] = useState("");

  const askProjectQuestion = (question) => {
    setCurrentQuestion(`${question} [${Date.now()}]`);

    setTimeout(() => {
      setCurrentQuestion("");
    }, 500);
  };

  return (
    <div>
      <div className="flex flex-col md:flex-row gap-8 mb-12">
        <div className="md:w-1/3">
          <h1 className="text-3xl font-bold mb-4">Projects</h1>
          <p className="text-lg mb-4">
            Here you can explore my portfolio of projects. Feel free to ask
            ProjectAgent for more details about any project.
          </p>
        </div>
        <div className="md:w-2/3">
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-2">
                Chat with ProjectAgent
              </h5>
              <p className="text-gray-600 mb-4">
                Our project specialist can provide detailed information about
                projects, technologies, and challenges.
              </p>
              <Chat
                agentType="project"
                initialMessage={initialMessage}
                agentInitials="PA"
                directQuestion={currentQuestion}
              />
            </div>
          </div>
        </div>
      </div>

      <div className="mb-12">
        <div className="mb-6">
          <h2 className="text-2xl font-bold mb-4">Featured Projects</h2>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="project-image-placeholder">E-commerce Platform</div>
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-2">
                E-commerce Platform
              </h5>
              <p className="text-gray-600 mb-4">
                A full-featured e-commerce platform with product management,
                shopping cart, and payment processing.
              </p>
              <div className="flex justify-between items-center">
                <div className="flex space-x-2">
                  <button
                    type="button"
                    className="py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                    onClick={() =>
                      askProjectQuestion(
                        "Tell me more about the E-commerce Platform project"
                      )
                    }
                  >
                    View Details
                  </button>
                  <button
                    type="button"
                    className="py-1.5 px-3 text-sm border border-gray-500 text-gray-500 rounded-md hover:bg-gray-50 transition-colors"
                    onClick={() =>
                      askProjectQuestion(
                        "What technologies were used in the E-commerce Platform project?"
                      )
                    }
                  >
                    Technologies
                  </button>
                </div>
                <span className="text-sm text-gray-500">1402</span>
              </div>
            </div>
          </div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="project-image-placeholder">Task Management App</div>
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-2">
                Task Management Application
              </h5>
              <p className="text-gray-600 mb-4">
                A collaborative task management application with real-time
                updates and team collaboration features.
              </p>
              <div className="flex justify-between items-center">
                <div className="flex space-x-2">
                  <button
                    type="button"
                    className="py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                    onClick={() =>
                      askProjectQuestion(
                        "Tell me more about the Task Management Application project"
                      )
                    }
                  >
                    View Details
                  </button>

همانطور که قبلاً نیز گفته شد ، ما واردات ، توابع و برخی از مؤلفه ها را داریم. تکمیل page با قسمت دوم کد در اینجا:

 <button
                    type="button"
                    className="py-1.5 px-3 text-sm border border-gray-500 text-gray-500 rounded-md hover:bg-gray-50 transition-colors"
                    onClick={() =>
                      askProjectQuestion(
                        "What technologies were used in the Task Management Application project?"
                      )
                    }
                  >
                    Technologies
                  </button>
                </div>
                <span className="text-sm text-gray-500">2022</span>
              </div>
            </div>
          </div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="project-image-placeholder">Data Visualization</div>
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-2">
                Data Visualization Dashboard
              </h5>
              <p className="text-gray-600 mb-4">
                An interactive dashboard for visualizing complex datasets with
                customizable charts and filters.
              </p>
              <div className="flex justify-between items-center">
                <div className="flex space-x-2">
                  <button
                    type="button"
                    className="py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                    onClick={() =>
                      askProjectQuestion(
                        "Tell me more about the Data Visualization Dashboard project"
                      )
                    }
                  >
                    View Details
                  </button>
                  <button
                    type="button"
                    className="py-1.5 px-3 text-sm border border-gray-500 text-gray-500 rounded-md hover:bg-gray-50 transition-colors"
                    onClick={() =>
                      askProjectQuestion(
                        "What technologies were used in the Data Visualization Dashboard project?"
                      )
                    }
                  >
                    Technologies
                  </button>
                </div>
                <span className="text-sm text-gray-500">2021</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-2">
              Technical Skills Showcase
            </h5>
            <p className="text-gray-600 mb-4">
              These projects demonstrate proficiency in the following
              technologies:
            </p>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <h6 className="font-semibold mb-2">Frontend</h6>
                <ul className="list-disc pl-5 space-y-1">
                  <li>React</li>
                  <li>Vue.js</li>
                  <li>Angular</li>
                  <li>TypeScript</li>
                  <li>CSS/SASS</li>
                </ul>
              </div>
              <div>
                <h6 className="font-semibold mb-2">Backend</h6>
                <ul className="list-disc pl-5 space-y-1">
                  <li>Node.js</li>
                  <li>Python</li>
                  <li>Django</li>
                  <li>Flask</li>
                  <li>MongoDB</li>
                </ul>
              </div>
            </div>
            <button
              className="mt-4 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
              onClick={() =>
                askProjectQuestion(
                  "What other technologies are you proficient in?"
                )
              }
            >
              Ask About Other Skills
            </button>
          </div>
        </div>
        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-2">Project Inquiry</h5>
            <p className="text-gray-600 mb-4">
              Interested in a specific type of project or technology? Ask
              ProjectAgent for more information.
            </p>
            <div className="flex flex-col space-y-3">
              <button
                className="py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askProjectQuestion(
                    "Do you have any projects involving machine learning or AI?"
                  )
                }
              >
                Ask About AI Projects
              </button>
              <button
                className="py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askProjectQuestion("What are your most challenging projects?")
                }
              >
                Ask About Challenging Projects
              </button>
              <button
                className="py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askProjectQuestion(
                    "Can you show me examples of your UI/UX work?"
                  )
                }
              >
                Ask About UI/UX Work
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Projects;

با اضافه شدن اجزای باقیمانده ، این page اکنون کامل است

وقت آن است که انجام دهید Research.jsx page، با شروع نیمه اول پایگاه کد:

import { useState } from "react";
import Chat from "../components/Chat";

function Research() {
  const initialMessage =
    "Hello! I'm ResearchAgent, the research specialist. I can provide information about technologies, trends, and industry news. What would you like to know?";
  const [searchQuery, setSearchQuery] = useState("");
  const [tech1, setTech1] = useState("");
  const [tech2, setTech2] = useState("");

  const [currentQuestion, setCurrentQuestion] = useState("");

  const askResearchQuestion = (question) => {
    setCurrentQuestion(`${question} [${Date.now()}]`);

    setTimeout(() => {
      setCurrentQuestion("");
    }, 500);
  };

  const handleSearch = (e) => {
    e.preventDefault();
    if (searchQuery.trim()) {
      askResearchQuestion(`Search for information about: ${searchQuery}`);
      setSearchQuery("");
    }
  };

  const handleCompare = (e) => {
    e.preventDefault();
    if (tech1.trim() && tech2.trim()) {
      askResearchQuestion(`Compare ${tech1} vs ${tech2}`);
      setTech1("");
      setTech2("");
    }
  };

  return (
    <div>
      <div className="flex flex-col md:flex-row gap-8 mb-12">
        <div className="md:w-1/3">
          <h1 className="text-3xl font-bold mb-4">Research & Insights</h1>
          <p className="text-lg mb-4">
            Here you can explore research روی technologies, trends, and industry
            news. Feel free to ask ResearchAgent for more information.
          </p>
        </div>
        <div className="md:w-2/3">
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-2">
                Chat with ResearchAgent
              </h5>
              <p className="text-gray-600 mb-4">
                Our research specialist can provide information about
                technologies, trends, and industry news.
              </p>
              <Chat
                agentType="research"
                initialMessage={initialMessage}
                agentInitials="RA"
                directQuestion={currentQuestion}
              />
            </div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-3">
              Search for Information
            </h5>
            <p className="text-gray-600 mb-4">
              Enter a topic to search for the latest information and insights.
            </p>
            <form onSubmit={handleSearch}>
              <div className="flex mb-4">
                <input
                  type="text"
                  className="flex-grow px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  placeholder="e.g., WebAssembly, Edge Computing, etc."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
                <button
                  className="px-4 py-2 bg-blue-500 text-white rounded-r-md hover:bg-blue-600 transition-colors"
                  type="submit"
                >
                  Search
                </button>
              </div>
            </form>
          </div>
        </div>
        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-3">Compare Technologies</h5>
            <p className="text-gray-600 mb-4">
              Compare two technologies to understand their pros, cons, and use
              cases.
            </p>
            <form onSubmit={handleCompare}>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-4">
                <div>
                  <input
                    type="text"
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    placeholder="First technology"
                    value={tech1}
                    onChange={(e) => setTech1(e.target.value)}
                  />
                </div>

ما واردات ، دولت ، کارکردها و برخی از مؤلفه ها را برای تحقیق داریم ، بنابراین بسیار ساده است. اکنون ، ما می توانیم page با اتمام آن با بقیه کد:

<div>
                  <input
                    type="text"
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    placeholder="Second technology"
                    value={tech2}
                    onChange={(e) => setTech2(e.target.value)}
                  />
                </div>
              </div>
              <button
                className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
                type="submit"
              >
                Compare
              </button>
            </form>
          </div>
        </div>
      </div>

      <div className="mb-12">
        <div className="mb-6">
          <h2 className="text-2xl font-bold mb-4">Current Tech Trends</h2>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6 flex flex-col h-full">
              <h5 className="text-xl font-semibold mb-3">
                AI in Web Development
              </h5>
              <p className="text-gray-600 mb-4 flex-grow">
                Exploring how artificial intelligence is transforming web
                development practices and tools.
              </p>
              <button
                className="py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors self-start"
                onClick={() =>
                  askResearchQuestion("Tell me about AI in web development")
                }
              >
                Learn More
              </button>
            </div>
          </div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6 flex flex-col h-full">
              <h5 className="text-xl font-semibold mb-3">
                Modern Frontend Frameworks
              </h5>
              <p className="text-gray-600 mb-4 flex-grow">
                Analysis of current frontend frameworks, their strengths, and
                ideal use cases.
              </p>
              <button
                className="py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors self-start"
                onClick={() =>
                  askResearchQuestion("Compare modern frontend frameworks")
                }
              >
                Learn More
              </button>
            </div>
          </div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6 flex flex-col h-full">
              <h5 className="text-xl font-semibold mb-3">
                Cloud Architecture Patterns
              </h5>
              <p className="text-gray-600 mb-4 flex-grow">
                Best practices and patterns for designing scalable cloud-based
                applications.
              </p>
              <button
                className="py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors self-start"
                onClick={() =>
                  askResearchQuestion("Explain cloud architecture patterns")
                }
              >
                Learn More
              </button>
            </div>
          </div>
        </div>
      </div>

      <div className="mb-6">
        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-3">Industry Trends</h5>
            <p className="text-gray-600 mb-4">
              Stay updated روی the latest trends in software development and
              technology.
            </p>
            <button
              className="py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
              onClick={() =>
                askResearchQuestion(
                  "What are the current trends in software development and technology?"
                )
              }
            >
              Get Industry Trends
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Research;

نیمه دوم کد دارای مؤلفه های باقیمانده است که pageبشر

حالا برای فینال page که برای Services.jsxبشر پایگاه کد بسیار بزرگ است بنابراین ما آن را تجزیه خواهیم کرد.

و در اینجا اولین قسمت از پایگاه کد اضافه شده است:

import { useState } from "react";
import axios from "axios";
import Chat from "../components/Chat";

function Services() {
  const initialMessage =
    "Hello! I'm BusinessAdvisor, the client specialist. I can provide information about services, pricing, and project details. What would you like to know?";
  const [projectDescription, setProjectDescription] = useState("");

  const [currentQuestion, setCurrentQuestion] = useState("");

  const askClientQuestion = (question) => {
    setCurrentQuestion(`${question} [${Date.now()}]`);

    setTimeout(() => {
      setCurrentQuestion("");
    }, 500);
  };

  const generateProposal = async () => {
    if (!projectDescription.trim()) return;

    try {
      const response = await axios.post("/api/client/proposal", {
        project_description: projectDescription,
      });

      if (response.data && response.data.proposal) {
        askClientQuestion(
          `Can you provide a proposal for this project: ${projectDescription}`
        );
      }
    } catch (error) {
      console.error("Error generating proposal:", error);
    }
  };

  return (
    <div>
      <div className="flex flex-col md:flex-row gap-8 mb-12">
        <div className="md:w-1/3">
          <h1 className="text-3xl font-bold mb-4">Services</h1>
          <p className="text-lg mb-4">
            Here you can find information about the services I offer. Feel free
            to ask BusinessAdvisor for more details about pricing, timelines,
            and project specifics.
          </p>
        </div>
        <div className="md:w-2/3">
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-2">
                Chat with BusinessAdvisor
              </h5>
              <p className="text-gray-600 mb-4">
                Our client specialist can provide information about services,
                pricing, and project details.
              </p>
              <Chat
                agentType="client"
                initialMessage={initialMessage}
                agentInitials="BA"
                directQuestion={currentQuestion}
              />
            </div>
          </div>
        </div>
      </div>

      <div className="mb-12">
        <div className="mb-6">
          <h2 className="text-2xl font-bold mb-4">Services Offered</h2>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-2">Web Development</h5>
              <p className="text-gray-600 mb-4">
                Custom web application development using modern frameworks and
                best practices.
              </p>
              <h6 className="font-semibold mb-2">Technologies</h6>
              <ul className="list-disc pl-5 space-y-1 mb-4">
                <li>React</li>
                <li>Vue.js</li>
                <li>Node.js</li>
                <li>Django</li>
                <li>Flask</li>
              </ul>
              <h6 className="font-semibold mb-2">Details</h6>
              <ul className="space-y-2 mb-4">
                <li>
                  <strong>Pricing Model:</strong> Project-based or hourly
                </li>
                <li>
                  <strong>Price Range:</strong> $5,000 - $50,000 depending روی
                  complexity
                </li>
                <li>
                  <strong>Timeline:</strong> 4-12 weeks depending روی scope
                </li>
              </ul>
              <button
                className="mt-2 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askClientQuestion(
                    "Tell me more about your web development services"
                  )
                }
              >
                Ask about Web Development
              </button>
            </div>
          </div>

ما بیشتر داریم import بیانیه ها ، ایالت ها و مؤلفه های نماینده AI BusinessAdvisor ما. در قسمت بعدی این پایگاه کد در اینجا:

 <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-2">
                Mobile App Development
              </h5>
              <p className="text-gray-600 mb-4">
                Native and cross-platform mobile application development for iOS
                and Android.
              </p>
              <h6 className="font-semibold mb-2">Technologies</h6>
              <ul className="list-disc pl-5 space-y-1 mb-4">
                <li>React Native</li>
                <li>Flutter</li>
                <li>Swift</li>
                <li>Kotlin</li>
              </ul>
              <h6 className="font-semibold mb-2">Details</h6>
              <ul className="space-y-2 mb-4">
                <li>
                  <strong>Pricing Model:</strong> Project-based
                </li>
                <li>
                  <strong>Price Range:</strong> $8,000 - $60,000 depending روی
                  complexity
                </li>
                <li>
                  <strong>Timeline:</strong> 6-16 weeks depending روی scope
                </li>
              </ul>
              <button
                className="mt-2 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askClientQuestion(
                    "Tell me more about your mobile app development services"
                  )
                }
              >
                Ask about Mobile Development
              </button>
            </div>
          </div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-2">
                Technical Consulting
              </h5>
              <p className="text-gray-600 mb-4">
                Expert advice روی architecture, technology stack, and development
                practices.
              </p>
              <h6 className="font-semibold mb-2">Areas of Expertise</h6>
              <ul className="list-disc pl-5 space-y-1 mb-4">
                <li>System Architecture</li>
                <li>Database Design</li>
                <li>Performance Optimization</li>
                <li>Security Best Practices</li>
                <li>DevOps Implementation</li>
              </ul>
              <h6 className="font-semibold mb-2">Details</h6>
              <ul className="space-y-2 mb-4">
                <li>
                  <strong>Pricing Model:</strong> Hourly
                </li>
                <li>
                  <strong>Price Range:</strong> $150 - $250 per hour
                </li>
                <li>
                  <strong>Timeline:</strong> Ongoing or as needed
                </li>
              </ul>
              <button
                className="mt-2 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askClientQuestion(
                    "Tell me more about your technical consulting services"
                  )
                }
              >
                Ask about Consulting
              </button>
            </div>
          </div>
        </div>
      </div>

ما می توانیم انتظار داشته باشیم که کد اجزای زیادی را در اینجا مشاهده کنیم page، بنابراین اجازه می دهیم آن را با قسمت آخر اکنون به پایان برسانیم:

 <div className="mb-12">
        <div className="mb-6">
          <h2 className="text-2xl font-bold mb-4">Client Engagement Process</h2>
        </div>
        <div className="w-full">
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
                <div className="mb-6 md:mb-0">
                  <div className="flex flex-col items-center">
                    <div className="w-12 h-12 rounded-full bg-blue-500 text-white flex items-center justify-center text-xl font-bold mb-4">
                      1
                    </div>
                    <h5 className="text-lg font-semibold mt-2 mb-1">
                      Initial Consultation
                    </h5>
                    <p className="text-gray-600 text-center">
                      Understanding your requirements and project goals
                    </p>
                  </div>
                </div>
                <div className="mb-6 md:mb-0">
                  <div className="flex flex-col items-center">
                    <div className="w-12 h-12 rounded-full bg-blue-500 text-white flex items-center justify-center text-xl font-bold mb-4">
                      2
                    </div>
                    <h5 className="text-lg font-semibold mt-2 mb-1">
                      Proposal
                    </h5>
                    <p className="text-gray-600 text-center">
                      Detailed quote and project plan preparation
                    </p>
                  </div>
                </div>
                <div className="mb-6 md:mb-0">
                  <div className="flex flex-col items-center">
                    <div className="w-12 h-12 rounded-full bg-blue-500 text-white flex items-center justify-center text-xl font-bold mb-4">
                      3
                    </div>
                    <h5 className="text-lg font-semibold mt-2 mb-1">
                      Development
                    </h5>
                    <p className="text-gray-600 text-center">
                      Regular sprints with client feedback
                    </p>
                  </div>
                </div>
                <div className="mb-6 md:mb-0">
                  <div className="flex flex-col items-center">
                    <div className="w-12 h-12 rounded-full bg-blue-500 text-white flex items-center justify-center text-xl font-bold mb-4">
                      4
                    </div>
                    <h5 className="text-lg font-semibold mt-2 mb-1">
                      Delivery
                    </h5>
                    <p className="text-gray-600 text-center">
                      Testing, deployment, and ongoing support
                    </p>
                  </div>
                </div>
              </div>
              <div className="flex justify-center mt-8">
                <button
                  className="py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                  onClick={() =>
                    askClientQuestion(
                      "Explain your client engagement process in detail"
                    )
                  }
                >
                  Learn More About the Process
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="w-full">
        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-2">Request a Proposal</h5>
            <p className="text-gray-600 mb-4">
              Interested in working together? Describe your project below and
              BusinessAdvisor will generate a custom proposal for you.
            </p>
            <div className="mb-4">
              <label
                htmlFor="project-description"
                className="block text-sm font-medium text-gray-700 mb-1"
              >
                Describe your project:
              </label>
              <textarea
                id="project-description"
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                rows="5"
                placeholder="Enter project description..."
                value={projectDescription}
                onChange={(e) => setProjectDescription(e.target.value)}
              ></textarea>
            </div>
            <button
              className="py-2 px-4 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
              onClick={generateProposal}
            >
              Generate Proposal
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Services;

خدمات ما page کامل است ، و برنامه نیز همینطور است!

اطمینان حاصل کنید که سرور پس زمینه پایتون در حال اجرا است ، و سپس با اسکریپت معمول Vite Run در اینجا در قسمت جلوی React خود را شروع کنید frontend پوشه:

npm run dev

شما باید وب سایت را در حال اجرا و در حال اجرا ببینید روی http: //localhost: 5173/ با کارگزاران AI کار روی همه صفحات (جدا از مخاطب page، که یکی ندارد). به یاد داشته باشید که هر بار که از یکی از عوامل هوش مصنوعی برای پرسیدن سوال استفاده می کنید ، از 1 تماس API استفاده می کند روی Groq Cloud ، بنابراین محدودیت نرخ را برای LLM های مختلف بررسی کنید.

پایان

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

ترکیبی از Agno و Groq مسیری رایگان را برای کاوش در عوامل هوش مصنوعی فراهم می کند که می تواند بسیار مفید باشد. با عامل بدون کد Agno orchestration و استنتاج فوق العاده سریع Groq ، می توانید ویژگی های با قدرت هوش مصنوعی را که با بازدید کنندگان درگیر می شوند ، مستقر کنید و تعامل را آسان تر کنید.

بنابراین ، خواه یک چت بابات ، مولد محتوا یا دستیار هوشمند باشد ، این ابزارها ادغام هوش مصنوعی را در برند شما آسانتر از همیشه می کنند. با پیشرفت هایی که AI Technology انجام می دهد ، قادر به امتحان کردن این راه حل های رایگان قطعاً شما را در پیش گرفته و باعث می شود وب سایت شما در حالی که همچنان به مدرن سازی برند خود ادامه می دهید ، واقعاً بدرخشد.

با فناوری ، برنامه نویسی ، بهره وری و هوش مصنوعی به روز باشید

اگر از این مقاله ها لذت بردید ، من را در رسانه های اجتماعی وصل کنید و دنبال کنید ، جایی که من محتوای مربوط به همه این موضوعات را به اشتراک می گذارم 🔥