{"id":18880,"date":"2025-04-01T06:55:02","date_gmt":"2025-04-01T03:25:02","guid":{"rendered":"https:\/\/rasanegaar.com\/blog\/%d8%b1%d9%88%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-%d8%aa%db%8c%d9%85%db%8c-%d8%a7%d8%b2-%d9%86%d9%85%d8%a7%db%8c%d9%86%d8%af%da%af%d8%a7%d9%86-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8\/"},"modified":"2025-04-01T06:55:02","modified_gmt":"2025-04-01T03:25:02","slug":"%d8%b1%d9%88%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-%d8%aa%db%8c%d9%85%db%8c-%d8%a7%d8%b2-%d9%86%d9%85%d8%a7%db%8c%d9%86%d8%af%da%af%d8%a7%d9%86-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8","status":"publish","type":"post","link":"https:\/\/rasanegaar.com\/blog\/%d8%b1%d9%88%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-%d8%aa%db%8c%d9%85%db%8c-%d8%a7%d8%b2-%d9%86%d9%85%d8%a7%db%8c%d9%86%d8%af%da%af%d8%a7%d9%86-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8\/","title":{"rendered":"\u0631\u0648\u0634 \u0633\u0627\u062e\u062a \u062a\u06cc\u0645\u06cc \u0627\u0632 \u0646\u0645\u0627\u06cc\u0646\u062f\u06af\u0627\u0646 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0628\u0631\u0627\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a \u062e\u0648\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u0631\u0627\u06cc\u06af\u0627\u0646 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Agno \u0648 Groq"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0633\u0631\u0641\u0635\u0644\u0647\u0627\u06cc \u0645\u0637\u0644\u0628<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d9%88%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-%d8%aa%db%8c%d9%85%db%8c-%d8%a7%d8%b2-%d9%86%d9%85%d8%a7%db%8c%d9%86%d8%af%da%af%d8%a7%d9%86-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8\/#%d9%81%d9%87%d8%b1%d8%b3%d8%aa_%d9%85%d8%b7%d8%a7%d9%84%d8%a8\" >\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d9%88%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-%d8%aa%db%8c%d9%85%db%8c-%d8%a7%d8%b2-%d9%86%d9%85%d8%a7%db%8c%d9%86%d8%af%da%af%d8%a7%d9%86-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8\/#%d9%be%db%8c%d8%b4_%d9%86%db%8c%d8%a7%d8%b2%d9%87%d8%a7%db%8c\" >\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d9%88%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-%d8%aa%db%8c%d9%85%db%8c-%d8%a7%d8%b2-%d9%86%d9%85%d8%a7%db%8c%d9%86%d8%af%da%af%d8%a7%d9%86-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8\/#%d8%b9%d9%88%d8%a7%d9%85%d9%84_ai_%da%86%db%8c%d8%b3%d8%aa%d8%9f\" >\u0639\u0648\u0627\u0645\u0644 AI \u0686\u06cc\u0633\u062a\u061f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d9%88%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-%d8%aa%db%8c%d9%85%db%8c-%d8%a7%d8%b2-%d9%86%d9%85%d8%a7%db%8c%d9%86%d8%af%da%af%d8%a7%d9%86-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8\/#agno_%d9%88_groq_cloud_%da%86%db%8c%d8%b3%d8%aa%d8%9f\" >Agno \u0648 Groq Cloud \u0686\u06cc\u0633\u062a\u061f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d9%88%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-%d8%aa%db%8c%d9%85%db%8c-%d8%a7%d8%b2-%d9%86%d9%85%d8%a7%db%8c%d9%86%d8%af%da%af%d8%a7%d9%86-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8\/#%d8%a2%d9%86%da%86%d9%87_%d8%b4%d9%85%d8%a7_%d8%af%d8%b1_%d8%ad%d8%a7%d9%84_%d8%b3%d8%a7%d8%ae%d8%aa%d9%86_%d8%ae%d9%88%d8%a7%d9%87%db%8c%d8%af_%d8%a8%d9%88%d8%af\" >\u0622\u0646\u0686\u0647 \u0634\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0633\u0627\u062e\u062a\u0646 \u062e\u0648\u0627\u0647\u06cc\u062f \u0628\u0648\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d9%88%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-%d8%aa%db%8c%d9%85%db%8c-%d8%a7%d8%b2-%d9%86%d9%85%d8%a7%db%8c%d9%86%d8%af%da%af%d8%a7%d9%86-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8\/#%d8%b3%d8%a7%d8%ae%d8%aa_%d8%a8%d8%a7%da%a9%d8%aa%d8%b1%db%8c_%d9%be%d8%a7%db%8c%d8%aa%d9%88%d9%86_%d9%85%d8%a7\" >\u0633\u0627\u062e\u062a \u0628\u0627\u06a9\u062a\u0631\u06cc \u067e\u0627\u06cc\u062a\u0648\u0646 \u0645\u0627<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d9%88%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-%d8%aa%db%8c%d9%85%db%8c-%d8%a7%d8%b2-%d9%86%d9%85%d8%a7%db%8c%d9%86%d8%af%da%af%d8%a7%d9%86-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8\/#%d8%a7%db%8c%d8%ac%d8%a7%d8%af_%db%8c%da%a9_%d8%ad%d8%b3%d8%a7%d8%a8_%da%a9%d8%a7%d8%b1%d8%a8%d8%b1%db%8c_%d8%af%d8%b1_groq_cloud\" >\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u062d\u0633\u0627\u0628 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062f\u0631 Groq Cloud<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d9%88%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-%d8%aa%db%8c%d9%85%db%8c-%d8%a7%d8%b2-%d9%86%d9%85%d8%a7%db%8c%d9%86%d8%af%da%af%d8%a7%d9%86-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8\/#%d8%aa%d9%86%d8%b8%db%8c%d9%85_%d9%be%d8%b1%d9%88%da%98%d9%87_python_%d9%85%d8%a7\" >\u062a\u0646\u0638\u06cc\u0645 \u067e\u0631\u0648\u0698\u0647 Python \u0645\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d9%88%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-%d8%aa%db%8c%d9%85%db%8c-%d8%a7%d8%b2-%d9%86%d9%85%d8%a7%db%8c%d9%86%d8%af%da%af%d8%a7%d9%86-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8\/#%da%a9%d8%a7%d8%b1_%d8%b1%d9%88%db%8c_%d9%be%d8%a7%db%8c%da%af%d8%a7%d9%87_%da%a9%d8%af_%d9%be%d8%a7%db%8c%d8%aa%d9%88%d9%86\" >\u06a9\u0627\u0631 \u0631\u0648\u06cc \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u067e\u0627\u06cc\u062a\u0648\u0646<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d9%88%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-%d8%aa%db%8c%d9%85%db%8c-%d8%a7%d8%b2-%d9%86%d9%85%d8%a7%db%8c%d9%86%d8%af%da%af%d8%a7%d9%86-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8\/#%d8%a8%d8%a7%da%a9%d8%aa%d8%b1%db%8c_%d9%be%d8%a7%db%8c%d8%aa%d9%88%d9%86_%d9%85%d8%a7_%d8%b1%d8%a7_%d8%a7%d8%ac%d8%b1%d8%a7_%d9%85%db%8c_%da%a9%d9%86%db%8c%d9%85\" >\u0628\u0627\u06a9\u062a\u0631\u06cc \u067e\u0627\u06cc\u062a\u0648\u0646 \u0645\u0627 \u0631\u0627 \u0627\u062c\u0631\u0627 \u0645\u06cc \u06a9\u0646\u06cc\u0645<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d9%88%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-%d8%aa%db%8c%d9%85%db%8c-%d8%a7%d8%b2-%d9%86%d9%85%d8%a7%db%8c%d9%86%d8%af%da%af%d8%a7%d9%86-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8\/#%d8%b3%d8%a7%d8%ae%d8%aa_%d8%ac%d8%a8%d9%87%d9%87_react_%d9%85%d8%a7\" >\u0633\u0627\u062e\u062a \u062c\u0628\u0647\u0647 React \u0645\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d9%88%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-%d8%aa%db%8c%d9%85%db%8c-%d8%a7%d8%b2-%d9%86%d9%85%d8%a7%db%8c%d9%86%d8%af%da%af%d8%a7%d9%86-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8\/#%d9%be%d8%a7%db%8c%d8%a7%d9%86\" >\u067e\u0627\u06cc\u0627\u0646<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d9%88%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-%d8%aa%db%8c%d9%85%db%8c-%d8%a7%d8%b2-%d9%86%d9%85%d8%a7%db%8c%d9%86%d8%af%da%af%d8%a7%d9%86-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8\/#%d8%a8%d8%a7_%d9%81%d9%86%d8%a7%d9%88%d8%b1%db%8c_%d8%8c_%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87_%d9%86%d9%88%db%8c%d8%b3%db%8c_%d8%8c_%d8%a8%d9%87%d8%b1%d9%87_%d9%88%d8%b1%db%8c_%d9%88_%d9%87%d9%88%d8%b4_%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c_%d8%a8%d9%87_%d8%b1%d9%88%d8%b2_%d8%a8%d8%a7%d8%b4%db%8c%d8%af\" >\u0628\u0627 \u0641\u0646\u0627\u0648\u0631\u06cc \u060c \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u060c \u0628\u0647\u0631\u0647 \u0648\u0631\u06cc \u0648 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0628\u0647 \u0631\u0648\u0632 \u0628\u0627\u0634\u06cc\u062f<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">\u0632\u0645\u0627\u0646 \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u0645\u0637\u0627\u0644\u0639\u0647: <\/span> <span class=\"rt-time\"> 50<\/span> <span class=\"rt-label rt-postfix\">\u062f\u0642\u06cc\u0642\u0647<\/span><\/span><p> <br \/>\n<\/p>\n<section class=\"post-content \" data-test-label=\"post-content\">\n<p>\u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0628\u0647 \u0633\u0631\u0639\u062a \u0631\u0648\u0634 \u06a9\u0627\u0631 \u0645\u0627 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0628\u06cc\u0634\u062a\u0631 \u0648 \u0628\u06cc\u0634\u062a\u0631 \u0634\u0631\u06a9\u062a \u0647\u0627 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f \u062a\u0627 \u0628\u0647 \u0622\u0646\u0647\u0627 \u06a9\u0645\u06a9 \u06a9\u0646\u062f \u062a\u0627 \u0645\u0634\u062a\u0631\u06cc \u0647\u0627 \u0631\u0627 \u062d\u0641\u0638 \u0648 \u062d\u0641\u0638 \u06a9\u0646\u0646\u062f. \u062a\u06cc\u0645 \u0647\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0632 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0648\u0628 \u0633\u0627\u06cc\u062a \u0647\u0627\u06cc \u0646\u0648\u0622\u0648\u0631\u0627\u0646\u0647 \u0648 \u067e\u0627\u0633\u062e\u06af\u0648 \u06a9\u0647 \u0642\u0627\u062f\u0631 \u0628\u0647 \u062f\u0631\u06af\u06cc\u0631 \u06a9\u0631\u062f\u0646 \u0628\u0627\u0632\u062f\u06cc\u062f \u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u0647\u0633\u062a\u0646\u062f \u0648 \u062f\u0631 \u0639\u06cc\u0646 \u062d\u0627\u0644 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0645\u0641\u06cc\u062f\u06cc \u0646\u06cc\u0632 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u0646\u062f \u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<p>\u0646\u0645\u0627\u06cc\u0646\u062f\u06af\u0627\u0646 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f\u06cc \u0628\u0631\u0627\u06cc \u062e\u062f\u0645\u0627\u062a \u0645\u0634\u062a\u0631\u06cc \u0647\u0633\u062a\u0646\u062f. \u062f\u0627\u0634\u062a\u0646 \u0622\u0646\u0647\u0627 \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0639\u0627\u0645\u0644 \u0647\u0627 \u0648 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0647\u0627\u06cc \u0634\u0645\u0627 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0645\u0627\u0646\u0646\u062f \u06cc\u06a9 \u06af\u0632\u0627\u0631\u0647 \u06af\u0631\u0627\u0646 \u0642\u06cc\u0645\u062a \u0628\u0627 \u062a\u062e\u0635\u0635 \u0641\u0646\u06cc \u0628\u0627\u0644\u0627 \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0646\u0638\u0631 \u0628\u0631\u0633\u062f. \u0627\u0645\u0627 \u0628\u0627 \u0638\u0647\u0648\u0631 \u0633\u06cc\u0633\u062a\u0645 \u0639\u0627\u0645\u0644 \u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0645\u062f\u0631\u0646 \u0645\u0627\u0646\u0646\u062f Agno \u0648 Groq \u060c \u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 \u0633\u06cc\u0633\u062a\u0645 \u0639\u0627\u0645\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0631\u0627 \u062f\u0631 \u0648\u0628 \u0633\u0627\u06cc\u062a \u062e\u0648\u062f \u0627\u062f\u063a\u0627\u0645 \u06a9\u0646\u06cc\u062f \u0648 \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0647\u0646\u0648\u0632 \u062f\u0631 \u0628\u0648\u062f\u062c\u0647 \u0628\u0627\u0642\u06cc \u0645\u06cc \u0645\u0627\u0646\u0646\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u060c \u0634\u0645\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 process \u0627\u0632 \u062a\u0648\u0633\u0639\u0647 \u0627\u06a9\u0648\u0633\u06cc\u0633\u062a\u0645 \u0639\u0627\u0645\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u062e\u0648\u062f (\u0628\u0647 \u0635\u0648\u0631\u062a \u0631\u0627\u06cc\u06af\u0627\u0646). \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0648\u0628 \u0633\u0627\u06cc\u062a\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0628\u062a\u0648\u0627\u0646\u062f \u0633\u0648\u0627\u0644\u0627\u062a \u0645\u0634\u062a\u0631\u06cc \u0631\u0627 \u0627\u062f\u0627\u0631\u0647 \u06a9\u0646\u062f \u060c \u0645\u062d\u062a\u0648\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u062f \u060c \u0631\u0641\u062a\u0627\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u062a\u062c\u0632\u06cc\u0647 \u0648 \u062a\u062d\u0644\u06cc\u0644 \u06a9\u0646\u062f \u0648 \u062a\u062c\u0631\u0628\u06cc\u0627\u062a \u0634\u062e\u0635\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0647\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u062f. \u0627\u06cc\u0646 \u06cc\u06a9 \u062a\u0646\u0638\u06cc\u0645 \u0641\u0648\u0642 \u0627\u0644\u0639\u0627\u062f\u0647 \u0627\u0633\u062a \u0632\u06cc\u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u062e\u0634\u06cc \u0627\u0632 \u062a\u062c\u0627\u0631\u062a \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062e\u0648\u062f\u06a9\u0627\u0631 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f \u060c \u0633\u0631\u0639\u062a \u062a\u0648\u0644\u06cc\u062f \u0633\u0631\u0628 \u0631\u0627 \u0633\u0631\u0639\u062a \u0628\u062e\u0634\u06cc\u062f \u0648 \u0648\u0642\u062a \u062e\u0648\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631 \u0622\u0632\u0627\u062f \u06a9\u0646\u06cc\u062f \u0631\u0648\u06cc \u0648\u0638\u0627\u06cc\u0641 \u0628\u0627 \u0627\u0648\u0644\u0648\u06cc\u062a \u0628\u06cc\u0634\u062a\u0631.<\/p>\n<p>\u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 JavaScript \u060c React \u0648 Python \u0622\u0634\u0646\u0627 \u0647\u0633\u062a\u0646\u062f. \u062d\u062a\u06cc \u0627\u06af\u0631 \u062f\u0631\u06a9 \u06a9\u0627\u0645\u0644\u06cc \u0627\u0632 \u0647\u0631 \u0633\u0647 \u0646\u0641\u0631 \u0646\u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u060c \u062a\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06cc\u06a9 \u0645\u0628\u062a\u062f\u06cc \u06cc\u0627 \u062c\u0648\u0627\u0646 \u0628\u0627\u0634\u06cc\u062f \u0628\u0627 \u0628\u0631\u062e\u06cc \u0627\u0632 \u062f\u0627\u0646\u0634 \u060c \u0628\u0627\u06cc\u062f \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u062d\u062f\u0627\u0642\u0644 \u0628\u0631\u062e\u06cc \u0627\u0632 \u06a9\u062f \u0647\u0627 \u0631\u0627 \u062f\u0631\u06a9 \u06a9\u0646\u06cc\u062f. \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c JavaScript \u0648 Python \u06a9\u0627\u0645\u0644\u0627\u064b \u0634\u0628\u06cc\u0647 \u0628\u0647 \u0646\u062d\u0648 \u0647\u0633\u062a\u0646\u062f \u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0627\u06af\u0631 \u0628\u0627 \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0622\u0646\u0647\u0627 \u062a\u062c\u0631\u0628\u0647 \u062f\u0627\u0631\u06cc\u062f \u060c \u0641\u0642\u0637 \u062e\u0648\u0627\u0646\u062f\u0646 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u0627\u06cc\u062f\u0647 \u0627\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0634\u0645\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u060c \u0645\u0627 \u06cc\u06a9 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627 \u0627\u06cc\u062c\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f. \u0627\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u062f\u0648\u0646 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0627\u06cc\u0646\u06a9\u0647 \u0634\u0645\u0627 \u06cc\u06a9 \u06a9\u0627\u0631\u0622\u0641\u0631\u06cc\u0646 \u0627\u0646\u0641\u0631\u0627\u062f\u06cc \u0647\u0633\u062a\u06cc\u062f \u06cc\u0627 \u0628\u062e\u0634\u06cc \u0627\u0632 \u06cc\u06a9 \u0634\u0631\u06a9\u062a \u0628\u0632\u0631\u06af \u060c \u0627\u0632 \u0627\u06cc\u062f\u0647 \u0647\u0627 \u0648 \u0645\u0641\u0627\u0647\u06cc\u0645\u06cc \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u0627\u062f \u0645\u06cc \u06af\u06cc\u0631\u06cc\u062f \u0628\u0631\u0627\u06cc \u0647\u0631 \u0646\u0648\u0639 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631\u0647\u0627 \u0648 \u0686\u0627\u0631\u0686\u0648\u0628 \u0647\u0627 \u060c \u0645\u06cc \u062a\u0648\u0627\u0646 \u062d\u0636\u0648\u0631 \u0648\u0628 \u062e\u0648\u062f \u0631\u0627 \u0628\u062f\u0648\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u0628\u06cc\u0634 \u0627\u0632 \u0628\u0648\u062f\u062c\u0647 \u0628\u062f\u0633\u062a \u0622\u0648\u0631\u06cc\u062f \u060c \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f.<\/p>\n<h2 id=\"heading-table-of-contents\"><span class=\"ez-toc-section\" id=\"%d9%81%d9%87%d8%b1%d8%b3%d8%aa_%d9%85%d8%b7%d8%a7%d9%84%d8%a8\"><\/span>\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>\n<p>\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc<\/p>\n<\/li>\n<li>\n<p>\u0639\u0648\u0627\u0645\u0644 AI \u0686\u06cc\u0633\u062a\u061f<\/p>\n<\/li>\n<li>\n<p>Agno \u0648 Groq Cloud \u0686\u06cc\u0633\u062a\u061f<\/p>\n<\/li>\n<li>\n<p>\u0622\u0646\u0686\u0647 \u0634\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0633\u0627\u062e\u062a\u0646 \u062e\u0648\u0627\u0647\u06cc\u062f \u0628\u0648\u062f<\/p>\n<\/li>\n<li>\n<p>\u0633\u0627\u062e\u062a \u0628\u0627\u06a9\u062a\u0631\u06cc \u067e\u0627\u06cc\u062a\u0648\u0646 \u0645\u0627<\/p>\n<ul>\n<li>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u062d\u0633\u0627\u0628 \u0631\u0648\u06cc \u0627\u0628\u0631 \u0627\u0628\u0631<\/p>\n<\/li>\n<li>\n<p>\u062a\u0646\u0638\u06cc\u0645 \u067e\u0631\u0648\u0698\u0647 Python \u0645\u0627<\/p>\n<\/li>\n<li>\n<p>\u06a9\u0627\u0631 \u0631\u0648\u06cc \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u067e\u0627\u06cc\u062a\u0648\u0646<\/p>\n<\/li>\n<li>\n<p>\u0628\u0627\u06a9\u062a\u0631\u06cc \u067e\u0627\u06cc\u062a\u0648\u0646 \u0645\u0627 \u0631\u0627 \u0627\u062c\u0631\u0627 \u0645\u06cc \u06a9\u0646\u06cc\u0645<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u0633\u0627\u062e\u062a \u062c\u0628\u0647\u0647 React \u0645\u0627<\/p>\n<\/li>\n<li>\n<p>\u067e\u0627\u06cc\u0627\u0646<\/p>\n<\/li>\n<li>\n<p>\u0628\u0627 \u0641\u0646\u0627\u0648\u0631\u06cc \u060c \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u060c \u0628\u0647\u0631\u0647 \u0648\u0631\u06cc \u0648 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0628\u0647 \u0631\u0648\u0632 \u0628\u0627\u0634\u06cc\u062f<\/p>\n<\/li>\n<\/ul>\n<h2 id=\"heading-prerequisites\"><span class=\"ez-toc-section\" id=\"%d9%be%db%8c%d8%b4_%d9%86%db%8c%d8%a7%d8%b2%d9%87%d8%a7%db%8c\"><\/span>\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>\n<p>\u062f\u0627\u0646\u0634 \u0642\u0628\u0644\u06cc \u0627\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u060c \u0648\u0627\u06a9\u0646\u0634 \u0648 \u067e\u0627\u06cc\u062a\u0648\u0646<\/p>\n<\/li>\n<li>\n<p>\u067e\u0627\u06cc\u062a\u0648\u0646 \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u062d\u0644\u06cc \u0646\u0635\u0628 \u0648 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a \u0631\u0648\u06cc \u06a9\u0627\u0645\u067e\u06cc\u0648\u062a\u0631 \u0634\u0645\u0627<\/p>\n<\/li>\n<li>\n<p>\u06cc\u06a9 \u062d\u0633\u0627\u0628 \u0631\u0648\u06cc \u0627\u0628\u0631 \u0627\u0628\u0631<\/p>\n<\/li>\n<li>\n<p>\u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u06a9\u062f\/IDE \u0645\u0627\u0646\u0646\u062f \u0645\u06a9\u0627\u0646 \u0646\u0645\u0627 \u060c Windsurf \u060c \u06cc\u0627 VS Code<\/p>\n<\/li>\n<\/ul>\n<h2 id=\"heading-what-are-ai-agents\"><span class=\"ez-toc-section\" id=\"%d8%b9%d9%88%d8%a7%d9%85%d9%84_ai_%da%86%db%8c%d8%b3%d8%aa%d8%9f\"><\/span>\u0639\u0648\u0627\u0645\u0644 AI \u0686\u06cc\u0633\u062a\u061f<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0639\u0648\u0627\u0645\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0633\u06cc\u0633\u062a\u0645 \u0647\u0627\u06cc \u0631\u0627\u06cc\u0627\u0646\u0647 \u0627\u06cc \u06cc\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0628\u0631\u0627\u06cc \u062a\u0639\u0627\u0645\u0644 \u0628\u0627 \u062f\u0646\u06cc\u0627\u06cc \u062e\u0648\u062f \u0648 \u062f\u0633\u062a\u06cc\u0627\u0628\u06cc \u0628\u0647 \u0627\u0647\u062f\u0627\u0641 \u062e\u0627\u0635 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0627\u0646\u062f. \u0622\u0646\u0647\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u062f\u0646\u06cc\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 &#8211; \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0633\u0646\u0633\u0648\u0631\u0647\u0627 \u060c \u0648\u0631\u0648\u062f\u06cc \u06a9\u0627\u0631\u0628\u0631 \u06cc\u0627 \u062f\u0627\u062f\u0647 \u0647\u0627 &#8211; \u062f\u0631\u06a9 \u06a9\u0646\u0646\u062f \u0648 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u06cc\u0627\u0628\u06cc \u0628\u0647 \u0627\u0647\u062f\u0627\u0641 \u060c \u0628\u0647 \u0637\u0648\u0631 \u0645\u0639\u0645\u0648\u0644 \u0628\u0627 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0627\u0633\u062a\u0642\u0644\u0627\u0644 \u0639\u0645\u0644 \u06a9\u0646\u0646\u062f. \u0627\u06cc\u0646 \u0628\u062f\u0627\u0646 \u0645\u0639\u0646\u0627\u0633\u062a \u06a9\u0647 \u0622\u0646\u0647\u0627 \u0628\u0633\u062a\u0647 \u0628\u0647 \u0645\u062f\u0627\u062e\u0644\u0647 \u0627\u0646\u0633\u0627\u0646\u06cc \u060c \u06af\u0627\u0647\u06cc \u0627\u0648\u0642\u0627\u062a \u0628\u0627 \u0645\u062f\u0627\u062e\u0644\u0647 \u06a9\u0645\u06cc \u0648 \u0628\u062f\u0648\u0646 \u0645\u062f\u0627\u062e\u0644\u0647 \u060c \u062a\u0635\u0645\u06cc\u0645 \u0645\u06cc \u06af\u06cc\u0631\u0646\u062f \u0631\u0648\u06cc \u0631\u0648\u0634 \u0637\u0631\u0627\u062d\u06cc \u0622\u0646\u0647\u0627<\/p>\n<h2 id=\"heading-what-are-agno-and-groq-cloud\"><span class=\"ez-toc-section\" id=\"agno_%d9%88_groq_cloud_%da%86%db%8c%d8%b3%d8%aa%d8%9f\"><\/span>Agno \u0648 Groq Cloud \u0686\u06cc\u0633\u062a\u061f<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Agno \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0633\u0628\u06a9 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0639\u0648\u0627\u0645\u0644 \u0686\u0646\u062f \u0645\u062f\u0644\u06cc \u0628\u0633\u0627\u0632\u06cc\u062f. \u0627\u06cc\u0646 \u06cc\u06a9 \u0645\u0648\u062a\u0648\u0631 \u0627\u0633\u062a\u0646\u062a\u0627\u062c \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc LLMS \u0628\u0631\u0627\u06cc \u0633\u0631\u0639\u062a \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0628\u062f\u0627\u0646 \u0645\u0639\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0627\u0633\u062a\u0646\u062a\u0627\u062c \u0645\u062f\u0644 AI \u0641\u0648\u0642 \u0627\u0644\u0639\u0627\u062f\u0647 \u0633\u0631\u06cc\u0639 \u0628\u0627 \u06a9\u0627\u0647\u0634 \u062a\u0623\u062e\u06cc\u0631 \u0648 \u0628\u0647\u0628\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0646\u0627\u0628\u0639 \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u067e\u062a\u0627\u0646\u0633\u06cc\u0644 \u0631\u0627 \u062f\u0627\u0631\u062f \u06a9\u0647 \u0628\u062a\u0648\u0627\u0646\u062f \u0633\u06cc\u0633\u062a\u0645 \u0639\u0627\u0645\u0644 \u0647\u0627\u06cc \u0627\u0633\u062a\u0646\u062a\u0627\u062c \u0641\u0639\u0644\u06cc \u0645\u0627\u0646\u0646\u062f Nvidia Tensorrt \u06cc\u0627 \u0628\u063a\u0644 \u06a9\u0631\u062f\u0646 \u0627\u0633\u062a\u0646\u062a\u0627\u062c \u0645\u062a\u0646 \u0645\u062a\u0646 Face (TGI) \u0631\u0627 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u062f.<\/p>\n<p>Groq Cloud \u06cc\u06a9 \u067e\u0644\u062a\u0641\u0631\u0645 \u0627\u0633\u062a\u0646\u062a\u0627\u062c \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0627\u0628\u0631 \u0627\u0633\u062a \u0631\u0648\u06cc \u062a\u0631\u0627\u0634\u0647 \u0647\u0627\u06cc Groq LPU (\u0648\u0627\u062d\u062f \u067e\u0631\u062f\u0627\u0632\u0634 \u0632\u0628\u0627\u0646) \u060c \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0628\u0627\u0631 \u06a9\u0627\u0631\u06cc AI \u0641\u0648\u0642 \u0627\u0644\u0639\u0627\u062f\u0647 \u06a9\u0645 \u0648 \u0628\u0627 \u062a\u0623\u062e\u06cc\u0631 \u0628\u0647\u06cc\u0646\u0647 \u0634\u062f\u0647 \u0627\u0646\u062f. Groq \u062f\u0631 \u0646\u0631\u062e \u062a\u0648\u0644\u06cc\u062f \u0628\u0627 \u0633\u0631\u0639\u062a \u0628\u0627\u0644\u0627 \u0639\u0627\u0644\u06cc \u0627\u0633\u062a \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc AI \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0645\u0627\u0646\u0646\u062f Chatbots \u060c \u06a9\u0645\u06a9 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc AI \u0648 \u0633\u0627\u06cc\u0631 \u0628\u0627\u0631\u0647\u0627\u06cc \u062d\u0633\u0627\u0633 \u0628\u0647 \u062a\u0623\u062e\u06cc\u0631 \u0639\u0627\u0644\u06cc \u0645\u06cc \u06a9\u0646\u062f. \u067e\u0644\u062a \u0641\u0631\u0645 Cloud Groq \u062f\u0633\u062a\u0631\u0633\u06cc \u0631\u0627\u06cc\u06af\u0627\u0646 \u0628\u0647 \u0645\u062f\u0644 \u0647\u0627\u06cc \u0628\u0632\u0631\u06af \u0632\u0628\u0627\u0646 \u062e\u0648\u062f (LLMS) \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u06cc\u06a9 \u0631\u062f\u06cc\u0641 \u0631\u0627\u06cc\u06af\u0627\u0646 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u060c \u0627\u0645\u0627 \u0645\u062d\u062f\u0648\u062f\u06cc\u062a \u0647\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f.<\/p>\n<p>\u0627\u06af\u0631 \u0628\u0647 \u0632\u0645\u06cc\u0646 \u0628\u0627\u0632\u06cc Groq Cloud \u0628\u0631\u0648\u06cc\u062f \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u062f\u0644 \u0647\u0627\u06cc LLM \u0631\u0627 \u0627\u0632 \u0634\u0631\u06a9\u062a \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0645\u0627\u0646\u0646\u062f:<\/p>\n<ul>\n<li>\n<p>\u0642\u0648\u0644\u0647\u0627<\/p>\n<\/li>\n<li>\n<p>Deepseek R1<\/p>\n<\/li>\n<li>\n<p>Google Gemma 2<\/p>\n<\/li>\n<li>\n<p>\u0628\u063a\u0644 \u06a9\u0631\u062f\u0646 \u0635\u0648\u0631\u062a<\/p>\n<\/li>\n<li>\n<p>\u0645\u062a\u0627 \u0644\u0627\u0645\u0627<\/p>\n<\/li>\n<li>\n<p>mistral ai<\/p>\n<\/li>\n<li>\n<p>Openai<\/p>\n<\/li>\n<\/ul>\n<p>\u0627\u06cc\u0646 \u0628\u0633\u06cc\u0627\u0631 \u0639\u0627\u0644\u06cc \u0627\u0633\u062a \u0632\u06cc\u0631\u0627 Groq Cloud \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0627\u06cc\u0646 \u0645\u062f\u0644 \u0647\u0627\u06cc AI LLM \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0639\u0627\u0645\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0645\u0627 \u0628\u0647 \u0645\u0627 \u0645\u06cc \u062f\u0647\u062f. \u0622\u06af\u0646\u0648 \u0627\u0633\u0627\u0633\u0627\u064b \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0639\u0645\u0644 \u0645\u06cc \u06a9\u0646\u062f orchestration \u0644\u0627\u06cc\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0686\u0646\u062f\u06cc\u0646 \u0639\u0627\u0645\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc. \u062f\u0631 \u0645\u0648\u0631\u062f \u0645\u0627 \u060c \u0627\u06cc\u0646 \u0627\u0633\u062a\u0642\u0628\u0627\u0644 \u060c ProjectAgent \u060c CareerAgent \u060c BusinessAdvisor \u0648 ResearchAgent \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u067e\u0644\u062a\u0641\u0631\u0645 \u0642\u0627\u062f\u0631 \u0628\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06a9\u0627\u0644\u0645\u0627\u062a \u060c \u0646\u0645\u0627\u06cc\u0646\u062f\u06af\u06cc \u0647\u0627\u06cc \u06a9\u0627\u0631 \u0648 \u062d\u0627\u0641\u0638\u0647 \u062e\u0648\u062f \u0627\u0633\u062a. \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0639\u0648\u0627\u0645\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0645\u0627 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0627\u0633\u062a\u062f\u0644\u0627\u0644 \u06cc\u0627 \u062a\u0648\u0644\u06cc\u062f \u062e\u0631\u0648\u062c\u06cc \u062f\u0627\u0631\u0646\u062f \u060c \u0633\u067e\u0633 Agno \u0627\u0632 Groq Cloud \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u060c \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0645\u062f\u0644 \u0647\u0627\u06cc \u0628\u0632\u0631\u06af \u0632\u0628\u0627\u0646 (LLMS) \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u062f \u060c \u0648 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0627 \u062a\u0623\u062e\u06cc\u0631 \u0641\u0648\u0642 \u0627\u0644\u0639\u0627\u062f\u0647 \u06a9\u0645 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f. \u0645\u0632\u06cc\u062a \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u067e\u0627\u0633\u062e \u0647\u0627\u06cc \u0633\u0631\u06cc\u0639 \u0648 \u06a9\u0627\u0631\u0622\u0645\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f. Groq Cloud \u062e\u0648\u062f \u06cc\u06a9 LLM \u0646\u06cc\u0633\u062a-\u0628\u0644\u06a9\u0647 \u06cc\u06a9 \u0645\u0648\u062a\u0648\u0631 \u0627\u0633\u062a\u0646\u062a\u0627\u062c \u0628\u0627 \u06a9\u0627\u0631\u0627\u06cc\u06cc \u0628\u0627\u0644\u0627 \u0627\u0633\u062a \u06a9\u0647 \u0627\u0632 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0645\u062e\u062a\u0644\u0641 \u0645\u06cc\u0632\u0628\u0627\u0646 \u0648 \u062e\u062f\u0645\u062a \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u060c \u0645\u0627 \u0627\u0632 \u0645\u062f\u0644 Llama 3 Meta \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u0632\u06cc\u0631\u0627 \u062a\u0639\u0627\u062f\u0644 \u0642\u0648\u06cc \u0628\u06cc\u0646 \u0639\u0645\u0644\u06a9\u0631\u062f \u0648 \u062f\u0642\u062a \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0622\u0634\u06a9\u0627\u0631\u0627 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0628\u062f\u0627\u0646 \u0645\u0639\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0646\u062f\u06af\u0627\u0646 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u062f\u0631 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627 \u0645\u0627 \u0645\u0646\u0627\u0633\u0628 \u0627\u0633\u062a.<\/p>\n<p>\u0634\u0627\u06cc\u0627\u0646 \u0630\u06a9\u0631 \u0627\u0633\u062a \u06a9\u0647 \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u0633\u062a\u06cc\u0645 \u0627\u0632 \u0645\u062f\u0644 Llama \u0627\u0632 Llama.com \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645. \u0628\u0627 \u0627\u06cc\u0646 \u0648\u062c\u0648\u062f \u060c \u062f\u0631 \u0639\u0648\u0636 \u060c \u0645\u0627 \u0627\u0632 \u0622\u0646 \u0627\u0632 \u0637\u0631\u06cc\u0642 Groq Cloud \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u060c \u0632\u06cc\u0631\u0627 \u060c \u0628\u0647 \u0627\u06cc\u0646 \u062a\u0631\u062a\u06cc\u0628 \u060c \u0645\u0627 \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0628\u0647\u062a\u0631\u06cc \u0645\u06cc \u06cc\u0627\u0628\u06cc\u0645 \u060c \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631 \u0648 \u067e\u0627\u0633\u062e \u0647\u0627\u06cc \u0628\u0627 \u06a9\u06cc\u0641\u06cc\u062a \u0628\u0647\u062a\u0631 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0639\u0627\u0645\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc. \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0628\u0647 \u0627\u06cc\u0646 \u062f\u0644\u06cc\u0644 \u0627\u0633\u062a \u06a9\u0647 Groq Cloud \u062f\u0631 \u0635\u0648\u0631\u062a \u062a\u0645\u0627\u06cc\u0644 \u0628\u0647 \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u060c \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634 \u0648 \u0627\u0646\u062a\u062e\u0627\u0628 \u0628\u06cc\u0646 \u0645\u062f\u0644 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0628\u0647 \u0645\u0627 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0627\u06cc\u0646 \u0628\u062f\u0627\u0646 \u0645\u0639\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u062e\u0648\u062f \u0628\u062f\u0633\u062a \u0622\u0648\u0631\u06cc\u0645.<\/p>\n<h2 id=\"heading-what-you-will-be-building\"><span class=\"ez-toc-section\" id=\"%d8%a2%d9%86%da%86%d9%87_%d8%b4%d9%85%d8%a7_%d8%af%d8%b1_%d8%ad%d8%a7%d9%84_%d8%b3%d8%a7%d8%ae%d8%aa%d9%86_%d8%ae%d9%88%d8%a7%d9%87%db%8c%d8%af_%d8%a8%d9%88%d8%af\"><\/span>\u0622\u0646\u0686\u0647 \u0634\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0633\u0627\u062e\u062a\u0646 \u062e\u0648\u0627\u0647\u06cc\u062f \u0628\u0648\u062f<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u0645\u0631\u0648\u0632 \u060c \u0634\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u0628\u0648\u062f \u06a9\u0647 \u0634\u0627\u0645\u0644 \u0639\u0648\u0627\u0645\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0647\u0631 \u06a9\u0633\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062f\u0631 \u0622\u0646 \u062a\u0639\u0627\u0645\u0644 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0646\u0645\u0627\u06cc\u0646\u062f\u06af\u0627\u0646 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0645\u0627\u0646\u0646\u062f \u0646\u0645\u0627\u06cc\u0646\u062f\u06af\u0627\u0646 \u062e\u062f\u0645\u0627\u062a \u0645\u0634\u062a\u0631\u06cc \u0647\u0633\u062a\u0646\u062f \u0632\u06cc\u0631\u0627 \u0647\u0631 \u06a9\u0633\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062f\u0631 \u0645\u0648\u0631\u062f \u0645\u0647\u0627\u0631\u062a \u0647\u0627 \u0648 \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627 \u0627\u0632 \u0622\u0646\u0647\u0627 \u0633\u0624\u0627\u0644 \u06a9\u0646\u062f \u0648 \u0627\u0637\u0644\u0627\u0639\u0627\u062a\u06cc \u0631\u0627 \u062f\u0631 \u0627\u062e\u062a\u06cc\u0627\u0631 \u0634\u062e\u0635 \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u0639\u0627\u0644\u06cc \u0627\u0633\u062a \u0632\u06cc\u0631\u0627 \u0627\u06cc\u0646 \u0628\u062f\u0627\u0646 \u0645\u0639\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0628\u0627\u0644\u0642\u0648\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0647\u0631 \u0686\u06cc\u0632\u06cc \u0631\u0627 \u062f\u0631 \u0645\u0648\u0631\u062f \u0634\u0645\u0627 24\/7 \u0628\u06cc\u0627\u0645\u0648\u0632\u0646\u062f \u0628\u062f\u0648\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u0648\u0627\u0642\u0639\u0627\u064b \u062f\u0631 \u0635\u0648\u0631\u062a \u0639\u062f\u0645 \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0634\u0645\u0627 \u0635\u062d\u0628\u062a \u06a9\u0646\u0646\u062f. \u0634\u0645\u0627 \u062d\u062a\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0627\u06cc\u0646 \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u06af\u0648\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a\u0646 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627 \u06cc\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0647\u0627\u0645 \u0628\u062e\u0634 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u062f\u0631 \u06a9\u0644 \u060c \u067e\u0646\u062c \u0639\u0627\u0645\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0648\u062c\u0648\u062f \u062e\u0648\u0627\u0647\u062f \u062f\u0627\u0634\u062a \u0631\u0648\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627 \u0634\u0645\u0627:<\/p>\n<ul>\n<li>\n<p>WeloleaGent: \u0645\u062a\u062e\u0635\u0635 \u062f\u0631 \u06a9\u0645\u06a9 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u062f\u0631 \u0648\u0628 \u0633\u0627\u06cc\u062a \u060c \u062e\u0648\u0627\u0647 \u06a9\u0627\u0631\u0628\u0631 \u06a9\u0627\u0631\u0641\u0631\u0645\u0627 \u060c \u0645\u0634\u062a\u0631\u06cc \u06cc\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633 \u0647\u0645\u06a9\u0627\u0631 \u0628\u0627\u0634\u062f<\/p>\n<\/li>\n<li>\n<p>ProjectAgent: \u06cc\u06a9 \u0645\u062a\u062e\u0635\u0635 \u067e\u0631\u0648\u0698\u0647 \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627 \u060c \u0641\u0646\u0627\u0648\u0631\u06cc \u0648 \u0686\u0627\u0644\u0634 \u0647\u0627 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u062f<\/p>\n<\/li>\n<li>\n<p>CareerAgent: \u06cc\u06a9 \u0645\u062a\u062e\u0635\u0635 \u0634\u063a\u0644\u06cc \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0627\u0637\u0644\u0627\u0639\u0627\u062a\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u0645\u0647\u0627\u0631\u062a \u0647\u0627 \u060c \u062a\u062c\u0631\u0628\u0647 \u0648 \u067e\u06cc\u0634\u06cc\u0646\u0647 \u062d\u0631\u0641\u0647 \u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u062f<\/p>\n<\/li>\n<li>\n<p>BusinessAdvisor: \u06cc\u06a9 \u0645\u062a\u062e\u0635\u0635 \u0645\u0634\u062a\u0631\u06cc \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u062e\u062f\u0645\u0627\u062a \u060c \u0642\u06cc\u0645\u062a \u06af\u0630\u0627\u0631\u06cc \u0648 \u062c\u0632\u0626\u06cc\u0627\u062a \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u062f<\/p>\n<\/li>\n<li>\n<p>ResearchAgent: \u06cc\u06a9 \u0645\u062a\u062e\u0635\u0635 \u062a\u062d\u0642\u06cc\u0642\u0627\u062a\u06cc \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0641\u0646\u0627\u0648\u0631\u06cc \u060c \u0631\u0648\u0646\u062f\u0647\u0627 \u0648 \u0627\u062e\u0628\u0627\u0631 \u0635\u0646\u0639\u062a \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u062f<\/p>\n<\/li>\n<\/ul>\n<p>\u0645\u0632\u06cc\u062a \u06af\u0633\u062a\u0631\u062f\u0647 \u062a\u0631\u06a9\u06cc\u0628 \u0639\u0648\u0627\u0645\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u062f\u0631 \u06cc\u06a9 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0622\u0646\u0647\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0627 \u0627\u0631\u0627\u0626\u0647 \u06cc\u06a9 \u062a\u062c\u0631\u0628\u0647 \u062a\u0639\u0627\u0645\u0644\u06cc \u06a9\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u062a\u0646\u0627\u0633\u0628 \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u060c \u06cc\u06a9 \u062a\u062c\u0631\u0628\u0647 \u0634\u062e\u0635\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u0646\u062f \u0648 \u0628\u0647 \u0622\u0633\u0627\u0646\u06cc \u062a\u06a9\u0631\u0627\u0631 \u0634\u0648\u0646\u062f \u0631\u0648\u06cc \u0633\u0627\u06cc\u0631 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0647\u0627\u06cc \u0639\u0645\u0648\u0645\u06cc \u062a\u0631.<\/p>\n<p>\u0627\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0648\u0628 \u0633\u0627\u06cc\u062a \u0634\u0645\u0627 \u0631\u0627 \u0627\u0632 \u0647\u0645 \u062c\u062f\u0627 \u06a9\u0646\u062f \u0632\u06cc\u0631\u0627 \u0628\u0631\u062e\u0644\u0627\u0641 \u062f\u0627\u0634\u062a\u0646 \u06cc\u06a9 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0627\u0633\u062a\u0639\u062f\u0627\u062f \u0634\u0645\u0627 \u060c \u06cc\u06a9 \u0639\u0627\u0645\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0642\u0627\u062f\u0631 \u0628\u0647 \u0647\u062f\u0627\u06cc\u062a \u0628\u0627\u0632\u062f\u06cc\u062f \u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u060c \u067e\u0627\u0633\u062e \u062f\u0627\u062f\u0646 \u0628\u0647 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u062f \u062f\u0631 \u0645\u0648\u0631\u062f \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u0634\u0645\u0627 \u0648 \u062a\u0648\u0635\u06cc\u0647 \u0628\u0647 \u06a9\u0627\u0631 \u0645\u0631\u0628\u0648\u0637\u0647 \u0627\u0633\u062a \u0631\u0648\u06cc \u0639\u0644\u0627\u0642\u0647<\/p>\n<p>\u06cc\u06a9\u06cc \u062f\u06cc\u06af\u0631 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0639\u0627\u0644\u06cc \u060c \u0627\u0645\u06a9\u0627\u0646 \u0634\u0628\u06cc\u0647 \u0633\u0627\u0632\u06cc \u0645\u06a9\u0627\u0644\u0645\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0627\u0639\u062b \u0634\u0648\u062f \u06a9\u0647 \u0627\u06cc\u0646 \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627 \u067e\u0648\u06cc\u0627\u062a\u0631 \u060c \u062c\u0630\u0627\u0628 \u062a\u0631 \u0648 \u063a\u0648\u0637\u0647 \u0648\u0631\u06cc \u0627\u062d\u0633\u0627\u0633 \u06a9\u0646\u062f \u0648 \u062f\u0631 \u0639\u06cc\u0646 \u062d\u0627\u0644 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0634\u0645\u0627 \u062f\u0631 \u06a9\u0627\u0631 \u0628\u0627 \u0627\u0628\u0632\u0627\u0631 \u0645\u062f\u0631\u0646 \u0686\u0642\u062f\u0631 \u062e\u0648\u0628 \u0647\u0633\u062a\u06cc\u062f.<\/p>\n<p>\u0647\u0645\u0647 \u0627\u06cc\u0646 \u062a\u0631\u06a9\u06cc\u0628\u0627\u062a \u0631\u0648\u0634\u06cc \u0639\u0645\u0644\u06cc \u0648 \u0642\u0627\u0628\u0644 \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0634\u0641 \u0639\u0648\u0627\u0645\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0631\u0627 \u062f\u0631 \u0627\u062e\u062a\u06cc\u0627\u0631 \u0634\u0645\u0627 \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u062f. \u0627\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 \u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc \u0648 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u0634\u062e\u0635\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u0627\u062c\u0631\u0627\u06cc \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u062a\u062c\u0627\u0631\u06cc \u062f\u0631 \u0645\u0642\u06cc\u0627\u0633 \u06a9\u0627\u0645\u0644 \u0646\u062f\u0627\u0631\u062f \u062a\u0627 \u0628\u0628\u06cc\u0646\u062f \u0627\u06cc\u0646 \u0646\u0648\u0639 \u0645\u0641\u0647\u0648\u0645 \u0686\u0642\u062f\u0631 \u0627\u0631\u0632\u0634\u0645\u0646\u062f \u0627\u0633\u062a.<\/p>\n<p>\u0627\u06cc\u0646 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0634\u0634 \u0635\u0641\u062d\u0647 \u0632\u06cc\u0631 \u0631\u0627 \u062e\u0648\u0627\u0647\u062f \u062f\u0627\u0634\u062a:<\/p>\n<ul>\n<li>\n<p>\u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc &#8211; \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc<\/p>\n<\/li>\n<li>\n<p>\u067e\u0631\u0648\u0698\u0647 \u0647\u0627 &#8211; \u0646\u0645\u0627\u06cc\u0634 \u0628\u0631\u062e\u06cc \u0627\u0632 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u0628\u0631\u062c\u0633\u062a\u0647 \u0648 \u0645\u0647\u0627\u0631\u062a \u0647\u0627\u06cc \u0641\u0646\u06cc<\/p>\n<\/li>\n<li>\n<p>\u0634\u063a\u0644\u06cc &#8211; \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0646 \u0645\u0647\u0627\u0631\u062a \u060c \u062a\u062c\u0631\u0628\u0647 \u060c \u0622\u0645\u0648\u0632\u0634 \u0648 \u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647 \u0647\u0627<\/p>\n<\/li>\n<li>\n<p>\u062e\u062f\u0645\u0627\u062a &#8211; \u062e\u062f\u0645\u0627\u062a \u0645\u0634\u062a\u0631\u06cc \u0648 \u062a\u0639\u0627\u0645\u0644 process<\/p>\n<\/li>\n<li>\n<p>\u062a\u062d\u0642\u06cc\u0642 &#8211; \u0631\u0627\u0647\u06cc \u0628\u0631\u0627\u06cc \u062c\u0633\u062a\u062c\u0648\u06cc \u0648\u0628 \u062f\u0631 \u0645\u0648\u0631\u062f \u0635\u0646\u0639\u062a \u0641\u0646\u0627\u0648\u0631\u06cc<\/p>\n<\/li>\n<li>\n<p>\u062a\u0645\u0627\u0633 &#8211; \u0627\u0644\u0641 page \u0628\u0627 \u0641\u0631\u0645 \u062a\u0645\u0627\u0633 \u0628\u0627 \u06a9\u0627\u0631\u0628\u0631<\/p>\n<\/li>\n<\/ul>\n<p>\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u062f \u06a9\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0627\u06a9\u0646\u0634 \u0634\u0645\u0627 \u062f\u0631 \u0632\u06cc\u0631 \u0686\u06af\u0648\u0646\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f:<\/p>\n<p>\u0627\u0648\u0644 \u060c \u0634\u0645\u0627 \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627 \u062e\u0648\u062f \u0631\u0627 \u062f\u0627\u0631\u06cc\u062f homepage:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegaar.com\/blog\/wp-content\/uploads\/2025\/04\/4ac8fd65-4d3a-4da1-80b8-4b4ff5136e7e.png\" alt=\"\u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc Portfolio AI\" class=\"image--center mx-auto\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0628\u0639\u062f\u06cc \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u0634\u0645\u0627 \u0627\u0633\u062a page:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegaar.com\/blog\/wp-content\/uploads\/2025\/04\/1c05544d-5255-40c2-85da-d072c8ecd6fc.png\" alt=\"\u0635\u0641\u062d\u0647 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627 AI\" class=\"image--center mx-auto\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u062d\u0627\u0644\u0627 \u0634\u0645\u0627 \u062d\u0631\u0641\u0647 \u062e\u0648\u062f \u0631\u0627 \u062f\u0627\u0631\u06cc\u062f page:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegaar.com\/blog\/wp-content\/uploads\/2025\/04\/ce61c17e-d948-49b5-83fa-7a77556796b5.png\" alt=\"\u0635\u0641\u062d\u0647 \u0634\u063a\u0644\u06cc \u067e\u0631\u062a\u0641\u0648\u06cc AI\" class=\"image--center mx-auto\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0633\u067e\u0633 \u0634\u0645\u0627 \u062e\u062f\u0645\u0627\u062a \u0631\u0627 \u062f\u0627\u0631\u06cc\u062f page:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegaar.com\/blog\/wp-content\/uploads\/2025\/04\/45614042-68b1-466a-9c43-b5f6aa5fde26.png\" alt=\"\u0635\u0641\u062d\u0647 \u062e\u062f\u0645\u0627\u062a \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627 AI\" class=\"image--center mx-auto\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0633\u067e\u0633 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u062d\u0642\u06cc\u0642 \u0648 \u0628\u06cc\u0646\u0634 \u062e\u0648\u062f \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f page:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegaar.com\/blog\/wp-content\/uploads\/2025\/04\/c2c083be-bd9a-4fac-9713-ff6c895d0cb0.png\" alt=\"\u0635\u0641\u062d\u0647 \u062a\u062d\u0642\u06cc\u0642 \u0648 \u0628\u06cc\u0646\u0634 \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627 AI\" class=\"image--center mx-auto\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u062f\u0631 \u0622\u062e\u0631 \u060c \u0634\u0645\u0627 \u062a\u0645\u0627\u0633 \u062e\u0648\u062f \u0631\u0627 \u062f\u0627\u0631\u06cc\u062f page:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegaar.com\/blog\/wp-content\/uploads\/2025\/04\/3c73726a-7de2-46af-a474-ce03fa3ace7b.png\" alt=\"\u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0628\u0627 \u0645\u0646 \u062a\u0645\u0627\u0633 \u0628\u06af\u06cc\u0631\u06cc\u062f\" class=\"image--center mx-auto\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u062d\u0627\u0644 \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0634\u0631\u0648\u0639 \u0628\u0647 \u0633\u0627\u062e\u062a\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u06a9\u0646\u06cc\u0645 \u060c \u0627\u0632 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u067e\u0627\u06cc\u062a\u0648\u0646.<\/p>\n<h2 id=\"heading-building-our-python-backend\"><span class=\"ez-toc-section\" id=\"%d8%b3%d8%a7%d8%ae%d8%aa_%d8%a8%d8%a7%da%a9%d8%aa%d8%b1%db%8c_%d9%be%d8%a7%db%8c%d8%aa%d9%88%d9%86_%d9%85%d8%a7\"><\/span>\u0633\u0627\u062e\u062a \u0628\u0627\u06a9\u062a\u0631\u06cc \u067e\u0627\u06cc\u062a\u0648\u0646 \u0645\u0627<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0645\u0646 \u0627\u0632 MACOS \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u0645 \u06a9\u0631\u062f \u0648 \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0646\u06cc\u0632 \u0628\u0627\u06cc\u062f \u06a9\u0627\u0631 \u06a9\u0646\u0646\u062f \u0631\u0648\u06cc \u0644\u06cc\u0646\u0648\u06a9\u0633 \u0627\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0648\u06cc\u0646\u062f\u0648\u0632 \u0647\u0633\u062a\u06cc\u062f \u060c \u0628\u06cc\u0634\u062a\u0631 \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0628\u0627\u06cc\u062f \u06a9\u0627\u0631 \u06a9\u0646\u0646\u062f (\u0627\u06af\u0631\u0686\u0647 \u062a\u0641\u0627\u0648\u062a \u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0645\u062d\u06cc\u0637 \u067e\u0627\u06cc\u062a\u0648\u0646 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f). \u062f\u0631 \u0635\u0648\u0631\u062a \u0644\u0632\u0648\u0645 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0635\u062d\u06cc\u062d \u0631\u0627 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f &#8211; \u0648 \u0645\u06cc \u062f\u0627\u0646\u06cc\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u062e\u0648\u062f \u0631\u0627 \u0645\u06cc \u062f\u0627\u0646\u06cc\u062f terminal \u0647\u0646\u06af\u0627\u0645 \u062a\u0644\u0627\u0634 \u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u06cc\u06a9 \u062f\u0633\u062a\u0648\u0631 \u060c \u0628\u0647 \u0634\u0645\u0627 \u062e\u0637\u0627\u06cc\u06cc \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<h3 id=\"heading-creating-an-account-on-groq-cloud\"><span class=\"ez-toc-section\" id=\"%d8%a7%db%8c%d8%ac%d8%a7%d8%af_%db%8c%da%a9_%d8%ad%d8%b3%d8%a7%d8%a8_%da%a9%d8%a7%d8%b1%d8%a8%d8%b1%db%8c_%d8%af%d8%b1_groq_cloud\"><\/span>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u062d\u0633\u0627\u0628 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062f\u0631 Groq Cloud<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0642\u0628\u0644\u0627\u064b \u0630\u06a9\u0631 \u0634\u062f \u060c \u0645\u0627 \u0627\u0632 Llama 3 \u0645\u062a\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 Groq Cloud \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u06a9\u0647 \u0627\u06cc\u062f\u0647 \u0622\u0644 \u0627\u0633\u062a. \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u060c \u0627\u0648\u0644 \u060c \u0645\u0627 \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u062d\u0633\u0627\u0628 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 \u0631\u0648\u06cc Groq Cloud \u060c \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegaar.com\/blog\/wp-content\/uploads\/2025\/04\/80f8a1a6-de52-4a3d-870a-25c1067c13eb.png\" alt=\"\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u062d\u0633\u0627\u0628 on \u0627\u0628\u0631 \u0627\u0628\u0631\" class=\"image--center mx-auto\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u067e\u0633 \u0627\u0632 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u062d\u0633\u0627\u0628 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0631\u0648\u06cc Groq Cloud \u060c \u0628\u0647 \u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc API \u0628\u0631\u0648\u06cc\u062f page \u0648 \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u060c \u06cc\u06a9 \u06a9\u0644\u06cc\u062f API \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. \u0645\u0646 \u0627\u0633\u0645 \u0631\u0627 \u0628\u0647 \u0645\u0646 \u062f\u0627\u062f\u0645 <code>team-ai-agents<\/code>:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegaar.com\/blog\/wp-content\/uploads\/2025\/04\/7c7dcc3e-685b-4383-b80a-4d8088be7d2d.png\" alt=\"\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u06a9\u0644\u06cc\u062f API Cloud Groq\" class=\"image--center mx-auto\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u06a9\u0644\u06cc\u062f API \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0628\u0627\u0634\u062f \u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u062c\u0627\u06cc\u06cc \u0627\u06cc\u0645\u0646 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f &#8211; \u0628\u0639\u062f\u0627\u064b \u0628\u0647 \u0622\u0646 \u0627\u062d\u062a\u06cc\u0627\u062c \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u0634\u062a.<\/p>\n<pre><code class=\"lang-shell\">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\n<\/code><\/pre>\n<h3 id=\"heading-setting-up-our-python-project\"><span class=\"ez-toc-section\" id=\"%d8%aa%d9%86%d8%b8%db%8c%d9%85_%d9%be%d8%b1%d9%88%da%98%d9%87_python_%d9%85%d8%a7\"><\/span>\u062a\u0646\u0638\u06cc\u0645 \u067e\u0631\u0648\u0698\u0647 Python \u0645\u0627<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062e\u0648\u0628 \u060c \u062d\u0627\u0644\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0647 \u0633\u0631\u0639\u062a \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u0645. \u0628\u0647 \u06cc\u06a9 \u0645\u06a9\u0627\u0646 \u0628\u0631\u0648\u06cc\u062f \u0631\u0648\u06cc \u0631\u0627\u06cc\u0627\u0646\u0647 \u0634\u0645\u0627 \u060c \u0645\u0627\u0646\u0646\u062f \u062f\u0633\u06a9 \u062a\u0627\u067e \u060c \u0648 \u067e\u0648\u0634\u0647 \u0627\u06cc \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>ai-agent-app<\/code>\u0628\u0634\u0631 <code>cd<\/code> \u0648\u0627\u0631\u062f \u067e\u0648\u0634\u0647 \u067e\u0631\u0648\u0698\u0647 \u0634\u0648\u06cc\u062f \u0648 \u0622\u0645\u0627\u062f\u0647 \u0634\u0648\u06cc\u062f &#8211; \u0645\u0627 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u0645 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u067e\u0627\u06cc\u062a\u0648\u0646 \u060c \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u0645.<\/p>\n<p>\u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc \u06a9\u0646\u0645 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f <code>agno<\/code> \u0648\u062a <code>groq<\/code> \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u062d\u0644\u06cc \u062f\u0631 \u06cc\u06a9 \u0645\u062d\u06cc\u0637 \u0645\u062c\u0627\u0632\u06cc \u067e\u0627\u06cc\u062a\u0648\u0646. \u0627\u0628\u062a\u062f\u0627 \u0627\u0632 \u0627\u06cc\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f terminal \u0641\u0631\u0645\u0627\u0646 \u0628\u0631\u0627\u06cc \u062a\u0646\u0638\u06cc\u0645 \u06cc\u06a9 \u0645\u062d\u06cc\u0637 \u0645\u062c\u0627\u0632\u06cc Python \u062f\u0631 \u062f\u0627\u062e\u0644 \u062e\u0648\u062f <code>ai-agent-app<\/code> \u067e\u0648\u0634\u0647:<\/p>\n<pre><code class=\"lang-shell\">python3 -m venv venv\nsource venv\/bin\/activate\ncd venv\n<\/code><\/pre>\n<p>\u062a\u0648\u062c\u0647: \u0628\u0633\u062a\u06af\u06cc \u062f\u0627\u0631\u062f \u0631\u0648\u06cc \u0645\u062d\u06cc\u0637 \u0645\u062d\u0644\u06cc \u067e\u0627\u06cc\u062a\u0648\u0646 \u0634\u0645\u0627 \u060c \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0644\u0627\u0632\u0645 \u0628\u0627\u0634\u062f \u0627\u0632 \u0622\u0646\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>python<\/code> \u06cc\u0627 <code>python3<\/code> \u0641\u0631\u0645\u0627\u0646 \u0627\u062c\u0631\u0627\u06cc \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u067e\u0627\u06cc\u062a\u0648\u0646. \u062f\u0631 \u0645\u062d\u06cc\u0637 \u0648 \u0645\u062b\u0627\u0644 \u0647\u0627\u06cc \u0645\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0645 <code>python3<\/code>\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 \u0631\u0627 \u0645\u062a\u0646\u0627\u0633\u0628 \u0628\u0627 \u0646\u06cc\u0627\u0632 \u062e\u0648\u062f \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0647\u0645\u06cc\u0646 \u0627\u0645\u0631 \u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0647\u0631 \u06cc\u06a9 \u0646\u06cc\u0632 \u0635\u062f\u0642 \u0645\u06cc \u06a9\u0646\u062f <code>pip<\/code> \u06cc\u0627 <code>pip3<\/code> \u0647\u0646\u06af\u0627\u0645 \u0646\u0635\u0628 \u0628\u0633\u062a\u0647 \u0647\u0627\u06cc \u067e\u0627\u06cc\u062a\u0648\u0646. \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u06a9\u062f\u0627\u0645 \u0646\u0633\u062e\u0647 \u0627\u0632 Python \u0648 pip \u0634\u0645\u0627 \u0628\u0627 <code>python --version<\/code>\u0628\u0627 <code>python3 --version<\/code> \u0628\u0627 <code>pip --version<\/code> \u0648\u062a <code>pip3 --version<\/code> \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u062f\u0631 \u0634\u0645\u0627 terminal \u067e\u0646\u062c\u0631\u0647<\/p>\n<p>\u062f\u0633\u062a\u0648\u0631 \u0641\u0648\u0642 \u0628\u0627\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u062f <code>venv<\/code> \u067e\u0648\u0634\u0647 \u062f\u0627\u062e\u0644 \u062e\u0648\u062f <code>ai-agent-app<\/code> \u067e\u0648\u0634\u0647 \u0627\u06cc\u0646 \u0628\u0627 \u062a\u0645\u0627\u0645 \u0646\u0642\u0627\u0637 \u067e\u0627\u06cc\u0627\u0646\u06cc API \u0634\u0645\u0627 \u06a9\u0647 \u0628\u0639\u062f\u0627\u064b \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u060c \u0639\u0642\u0628 \u0645\u0627\u0646\u062f\u0647 \u0634\u0645\u0627 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f \u0631\u0648\u06cc \u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0645\u062d\u06cc\u0637 \u0645\u062c\u0627\u0632\u06cc Python \u0634\u0645\u0627 \u0646\u06cc\u0632 \u0641\u0639\u0627\u0644 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0648 \u063a\u06cc\u0631\u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0645\u062d\u06cc\u0637 \u067e\u0627\u06cc\u062a\u0648\u0646 \u062e\u0648\u062f \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"lang-shell\"># Activate \u0631\u0648\u06cc macOS\/Linux\nsource venv\/bin\/activate\n\n# Activate \u0631\u0648\u06cc Windows\nvenv\\Scripts\\activate\n\n# Deactivate works \u0631\u0648\u06cc all platforms\nconda deactivate\n<\/code><\/pre>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647 \u060c \u0627\u06cc\u062f\u0647 \u062e\u0648\u0628\u06cc \u0628\u0631\u0627\u06cc \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u067e\u0631\u0648\u0698\u0647 \u062f\u0631 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u06a9\u062f \u0634\u0645\u0627 \u0627\u0633\u062a. \u0627\u06a9\u0646\u0648\u0646 \u0628\u0627\u06cc\u062f \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f <code>agno<\/code> \u0648\u062a <code>groq<\/code> \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>pip<\/code> \u062f\u0631 \u06a9\u0646\u0627\u0631 \u0686\u0646\u062f \u0628\u0633\u062a\u0647 \u062f\u06cc\u06af\u0631: <code>flask<\/code>\u0628\u0627 <code>requests<\/code>\u0648\u062a <code>python-dotenv<\/code>\u0628\u0634\u0631 \u0628\u0631\u0627\u06cc \u062a\u0646\u0638\u06cc\u0645 \u0645\u062d\u06cc\u0637 \u0633\u0631\u0648\u0631 \u062e\u0648\u062f \u0628\u0647 \u0627\u06cc\u0646 \u0628\u0633\u062a\u0647 \u0647\u0627 \u0627\u062d\u062a\u06cc\u0627\u062c \u062f\u0627\u0631\u06cc\u062f \u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u067e\u06cc\u0634 \u0628\u0631\u0648\u06cc\u062f \u0648 \u0647\u0645\u0647 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0627 \u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"lang-shell\">pip install agno\npip install groq\npip install flask\npip install flask_cors\npip install requests\npip install python-dotenv\n<\/code><\/pre>\n<p>\u0628\u0627 \u0646\u0635\u0628 \u0627\u06cc\u0646 \u0628\u0633\u062a\u0647 \u0647\u0627\u06cc \u067e\u0627\u06cc\u062a\u0648\u0646 \u060c \u0627\u06a9\u0646\u0648\u0646 \u0622\u0645\u0627\u062f\u0647 \u062a\u0646\u0638\u06cc\u0645 API \u062e\u0648\u062f \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0647\u0633\u062a\u06cc\u062f. \u0645\u0627 \u0627\u0632 Flask Framework Application Python \u0628\u0647 \u0647\u0645\u0631\u0627\u0647 \u0628\u0633\u062a\u0647 CORS \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u0645 \u062f\u0631 \u0647\u0631 \u06a9\u062c\u0627 \u0628\u0647 \u0633\u0631\u0648\u0631 \u062f\u0633\u062a\u0631\u0633\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u0645. \u062f\u0631 \u0639\u06cc\u0646 \u062d\u0627\u0644 \u060c \u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0632 \u0645\u0627\u0698\u0648\u0644 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u060c \u06a9\u0647 \u0628\u0647 \u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc HTTP \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u067e\u0627\u06cc\u062a\u0648\u0646 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0634\u0645\u0627 \u0646\u06cc\u0632 \u0628\u0647 <code>.env<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0628\u0631\u0627\u06cc \u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc API \u062e\u0648\u062f \u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u062d\u062a\u0645\u0627\u064b \u0646\u0635\u0628 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f <code>python-dotenv<\/code> \u0628\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u062f\u0631 \u0645\u062d\u06cc\u0637 \u067e\u0627\u06cc\u062a\u0648\u0646 \u062e\u0648\u062f \u060c \u0627\u06af\u0631\u0686\u0647 \u062f\u0631 \u0628\u0631\u062e\u06cc \u0645\u0648\u0627\u0631\u062f \u060c \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0646\u0635\u0628 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<h3 id=\"heading-working-on-the-python-codebase\"><span class=\"ez-toc-section\" id=\"%da%a9%d8%a7%d8%b1_%d8%b1%d9%88%db%8c_%d9%be%d8%a7%db%8c%da%af%d8%a7%d9%87_%da%a9%d8%af_%d9%be%d8%a7%db%8c%d8%aa%d9%88%d9%86\"><\/span>\u06a9\u0627\u0631 \u0631\u0648\u06cc \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u067e\u0627\u06cc\u062a\u0648\u0646<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062e\u0648\u0628 \u060c \u0632\u0645\u0627\u0646 \u0634\u0631\u0648\u0639 \u06a9\u0627\u0631 \u0631\u0648\u06cc \u067e\u0627\u06cc\u0647 \u06a9\u062f \u0627\u0645\u0627 \u0627\u0628\u062a\u062f\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u062a\u0645\u0627\u0645 \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0631\u0627 \u062a\u0648\u0644\u06cc\u062f \u06a9\u0646\u06cc\u0645. \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u0628\u0627 \u0627\u062c\u0631\u0627\u06cc \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u062c\u0631\u0627 \u06a9\u0647 \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0645 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f. \u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 \u0631\u0627 \u062f\u0631 <code>venv<\/code> \u067e\u0648\u0634\u0647:<\/p>\n<pre><code class=\"lang-shell\">mkdir agents\ntouch .env main.py\ncd agents\ntouch __init__.py base_agent.py career_agent.py client_agent.py project_agent.py research_agent.py welcome_agent.py\n<\/code><\/pre>\n<p>\u0628\u0627 \u0627\u06cc\u0646 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u060c \u0627\u06a9\u0646\u0648\u0646 \u0628\u0627\u06cc\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f:<\/p>\n<ul>\n<li>\n<p>\u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 <code>.env<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0628\u0631\u0627\u06cc \u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc API \u062e\u0648\u062f<\/p>\n<\/li>\n<li>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0639\u0648\u0627\u0645\u0644 \u0645\u062e\u062a\u0644\u0641 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u062e\u0648\u062f \u060c \u06cc\u06a9 \u067e\u0648\u0634\u0647 Agents \u0628\u0627 \u062a\u0645\u0627\u0645 \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a<\/p>\n<\/li>\n<li>\n<p>\u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 <code>main.py<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u060c \u06a9\u0647 \u0641\u0627\u06cc\u0644 \u0627\u0635\u0644\u06cc \u067e\u0631\u0648\u0698\u0647 \u0628\u0631\u0627\u06cc \u06a9\u0644 \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0627\u0637\u0646 \u0634\u0645\u0627 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f<\/p>\n<\/li>\n<\/ul>\n<p>\u062e\u0648\u0628 \u060c \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627\u06cc \u0634\u0645\u0627 \u062a\u0646\u0638\u06cc\u0645 \u0634\u062f\u0647 \u0627\u0646\u062f. \u062a\u0646\u0647\u0627 \u0686\u06cc\u0632\u06cc \u06a9\u0647 \u0628\u0627\u0642\u06cc \u0645\u0627\u0646\u062f\u0647 \u0627\u0633\u062a \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u0627\u0633\u062a \u0648 \u0628\u0627\u0637\u0646 \u06a9\u0627\u0645\u0644 \u0627\u0633\u062a. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 <code>.env<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u060c \u0632\u06cc\u0631\u0627 \u0641\u0642\u0637 \u0628\u0647 \u06cc\u06a9 \u062e\u0637 \u06a9\u062f \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f \u0648 \u0627\u06cc\u0646 \u0628\u0631\u0627\u06cc \u06a9\u0644\u06cc\u062f API \u0634\u0645\u0627\u0633\u062a. \u0645\u062b\u0627\u0644 \u0645\u0646 \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u06a9\u0644\u06cc\u062f API \u062e\u0648\u062f \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"lang-shell\">GROQ_API_KEY=\"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\"\n<\/code><\/pre>\n<p>\u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0627\u06a9\u0646\u0648\u0646 \u062f\u0627\u0631\u0627\u06cc \u06cc\u06a9 \u06a9\u0644\u06cc\u062f API \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 Groq Cloud \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f. \u062d\u0627\u0644 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0634\u0631\u0648\u0639 \u0628\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06a9\u062f \u0628\u0631\u0627\u06cc \u0647\u0645\u0647 \u0639\u0648\u0627\u0645\u0644 \u0645\u062e\u062a\u0644\u0641 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u06a9\u0646\u06cc\u0645. \u0627\u0648\u0644\u06cc\u0646 \u067e\u0631\u0648\u0646\u062f\u0647 \u0627\u06cc \u06a9\u0647 \u0645\u0627 \u06a9\u0627\u0631 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u0631\u0648\u06cc \u062e\u0648\u0627\u0647\u062f \u0634\u062f <code>__init__.py<\/code> \u06a9\u0647 \u0648\u0627\u0631\u062f\u0627\u062a \u0631\u0627 \u0628\u0631\u0627\u06cc \u0647\u0645\u0647 \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627\u06cc \u0639\u0627\u0645\u0644 AI \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u06a9\u062f \u0631\u0627 \u0628\u0647 \u067e\u0631\u0648\u0646\u062f\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"lang-python\"><span class=\"hljs-keyword\">from<\/span> agents.welcome_agent <span class=\"hljs-keyword\">import<\/span> WelcomeAgent\n<span class=\"hljs-keyword\">from<\/span> agents.project_agent <span class=\"hljs-keyword\">import<\/span> ProjectAgent\n<span class=\"hljs-keyword\">from<\/span> agents.career_agent <span class=\"hljs-keyword\">import<\/span> CareerAgent\n<span class=\"hljs-keyword\">from<\/span> agents.client_agent <span class=\"hljs-keyword\">import<\/span> ClientAgent\n<span class=\"hljs-keyword\">from<\/span> agents.research_agent <span class=\"hljs-keyword\">import<\/span> ResearchAgent\n\n<span class=\"hljs-comment\"># Export all agents<\/span>\n__all__ = [<span class=\"hljs-string\">'WelcomeAgent'<\/span>, <span class=\"hljs-string\">'ProjectAgent'<\/span>, <span class=\"hljs-string\">'CareerAgent'<\/span>, <span class=\"hljs-string\">'ClientAgent'<\/span>, <span class=\"hljs-string\">'ResearchAgent'<\/span>]\n<\/code><\/pre>\n<p>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f \u060c \u062a\u0645\u0627\u0645 \u06a9\u0644\u0627\u0633 \u0647\u0627\u06cc \u0646\u0645\u0627\u06cc\u0646\u062f\u06af\u0627\u0646 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0627\u0632 \u0627\u06cc\u0646\u062c\u0627 \u0648\u0627\u0631\u062f \u0648 \u0635\u0627\u062f\u0631 \u0645\u06cc \u0634\u0648\u0646\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0622\u0646\u0647\u0627 \u062f\u0631 \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>main.py<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0628\u0639\u062f\u0627\u064b<\/p>\n<p>\u062e\u0648\u0628 \u060c \u062e\u0648\u0628 \u0627\u06a9\u0646\u0648\u0646 \u060c \u0645\u0627 6 \u067e\u0631\u0648\u0646\u062f\u0647 \u0639\u0627\u0645\u0644 AI \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631 \u062f\u0627\u0631\u06cc\u0645 \u0631\u0648\u06cc\u060c \u0634\u0631\u0648\u0639 \u0628\u0627 <code>base_agent.py<\/code> \u067e\u0631\u0648\u0646\u062f\u0647<\/p>\n<p>\u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0627\u06cc\u0646 \u06a9\u062f \u0631\u0627 \u0628\u0647 \u067e\u0631\u0648\u0646\u062f\u0647 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"lang-python\"><span class=\"hljs-keyword\">from<\/span> agno.agent <span class=\"hljs-keyword\">import<\/span> Agent\n<span class=\"hljs-keyword\">from<\/span> agno.models.groq <span class=\"hljs-keyword\">import<\/span> Groq\n<span class=\"hljs-keyword\">import<\/span> os\n\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">BaseAgent<\/span>:<\/span>\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">__init__<\/span>(<span class=\"hljs-params\">self, name, description, avatar=<span class=\"hljs-string\">\"default_avatar.png\"<\/span><\/span>):<\/span>\n\n        self.name = name\n        self.description = description\n        self.avatar = avatar\n        self.model = Groq(id=<span class=\"hljs-string\">\"llama-3.3-70b-versatile\"<\/span>)\n        self.agent = Agent(model=self.model, markdown=<span class=\"hljs-literal\">True<\/span>)\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">get_response<\/span>(<span class=\"hljs-params\">self, query, stream=False<\/span>):<\/span>\n\n        <span class=\"hljs-keyword\">return<\/span> self.agent.get_response(query, stream=stream)\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">print_response<\/span>(<span class=\"hljs-params\">self, query, stream=True<\/span>):<\/span>\n\n        <span class=\"hljs-keyword\">return<\/span> self.agent.print_response(query, stream=stream)\n<\/code><\/pre>\n<p>\u0627\u06cc\u0646 \u06a9\u0644\u0627\u0633 \u0627\u0632 <code>agno<\/code> \u0686\u0627\u0631\u0686\u0648\u0628 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0639\u0648\u0627\u0645\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u062f\u0644 Llama 3.3 70B Groq \u060c \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0627 \u0628\u0631\u062e\u06cc \u0645\u062d\u062f\u0648\u062f\u06cc\u062a \u0647\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u062a\u0645\u0627\u0633 \u0647\u0627\u06cc API \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0628\u0627\u06cc\u062f \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u0634\u0645\u0627 \u062e\u0648\u0628 \u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0633\u0627\u062e\u062a\u0627\u0631 \u0627\u0633\u0627\u0633\u06cc \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0633\u0627\u06cc\u0631 \u0639\u0648\u0627\u0645\u0644 \u062a\u062e\u0635\u0635\u06cc \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0627 \u0639\u0645\u0644\u06a9\u0631\u062f \u062e\u0627\u0635 \u062f\u0627\u0645\u0646\u0647 \u0628\u0647 \u0627\u0631\u062b \u0628\u0631\u062f\u0647 \u0648 \u06af\u0633\u062a\u0631\u0634 \u062f\u0647\u0646\u062f.<\/p>\n<p>\u0645\u062f\u0644\u06cc \u06a9\u0647 \u0645\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u062f\u06cc\u0645 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0627\u0633\u062a \u0631\u0648\u06cc \u067e\u0644\u062a \u0641\u0631\u0645 \u0627\u0628\u0631 Groq \u060c \u0648 \u0627\u06af\u0631 \u0628\u062e\u0648\u0627\u0647\u06cc\u0645 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0622\u0646 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u0645. \u0647\u0631 \u0645\u062f\u0644 \u062f\u0627\u0631\u0627\u06cc \u062c\u0648\u0627\u0646\u0628 \u0645\u062b\u0628\u062a \u0648 \u0645\u0646\u0641\u06cc \u0627\u0633\u062a \u0648 \u06cc\u06a9 \u062a\u0627\u0631\u06cc\u062e \u0628\u0631\u0634 \u0628\u0631\u0627\u06cc \u0628\u0647 \u0631\u0648\u0632 \u0628\u0648\u062f\u0646 \u0622\u0646 \u0627\u0633\u062a \u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0646\u062a\u0638\u0627\u0631 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0646\u062a\u0627\u06cc\u062c \u0645\u062a\u0641\u0627\u0648\u062a\u06cc \u06a9\u0633\u0628 \u06a9\u0646\u06cc\u062f. \u0641\u0642\u0637 \u0628\u0647 \u062e\u0627\u0637\u0631 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 \u0628\u0647 \u0631\u0648\u0632 LLM \u0645\u0627\u0646\u0646\u062f OpenAI \u0646\u062a\u0627\u06cc\u062c \u0628\u0647\u062a\u0631\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u060c \u0627\u0645\u0627 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0645\u062c\u0628\u0648\u0631 \u0634\u0648\u06cc\u062f \u0647\u0632\u06cc\u0646\u0647 \u0622\u0646 \u0631\u0627 \u0628\u067e\u0631\u062f\u0627\u0632\u06cc\u062f.<\/p>\n<p>\u067e\u0631\u0648\u0646\u062f\u0647 \u0628\u0639\u062f\u06cc \u06a9\u0647 \u0645\u0627 \u06a9\u0627\u0631 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u0631\u0648\u06cc \u062e\u0648\u0627\u0647\u062f \u0634\u062f <code>career_agent.py<\/code> \u067e\u0631\u0648\u0646\u062f\u0647<\/p>\n<p>\u0648 \u0627\u06cc\u0646 \u0627\u06cc\u0646 \u06a9\u062f \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0628\u0631\u0627\u06cc \u0622\u0646 \u0627\u0633\u062a:<\/p>\n<pre><code class=\"lang-python\"><span class=\"hljs-keyword\">from<\/span> agents.base_agent <span class=\"hljs-keyword\">import<\/span> BaseAgent\n\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">CareerAgent<\/span>(<span class=\"hljs-params\">BaseAgent<\/span>):<\/span>\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">__init__<\/span>(<span class=\"hljs-params\">self<\/span>):<\/span>\n        super().__init__(\n            name=<span class=\"hljs-string\">\"CareerGuide\"<\/span>,\n            description=<span class=\"hljs-string\">\"I'm the career specialist. I can provide information about skills, experience, and job suitability.\"<\/span>,\n            avatar=<span class=\"hljs-string\">\"career_avatar.png\"<\/span>\n        )\n\n        self.skills = {\n            <span class=\"hljs-string\">\"languages\"<\/span>: [<span class=\"hljs-string\">\"Python\"<\/span>, <span class=\"hljs-string\">\"JavaScript\"<\/span>, <span class=\"hljs-string\">\"TypeScript\"<\/span>, <span class=\"hljs-string\">\"Java\"<\/span>, <span class=\"hljs-string\">\"SQL\"<\/span>],\n            <span class=\"hljs-string\">\"frameworks\"<\/span>: [<span class=\"hljs-string\">\"React\"<\/span>, <span class=\"hljs-string\">\"Vue.js\"<\/span>, <span class=\"hljs-string\">\"Node.js\"<\/span>, <span class=\"hljs-string\">\"Django\"<\/span>, <span class=\"hljs-string\">\"Flask\"<\/span>, <span class=\"hljs-string\">\"Spring Boot\"<\/span>],\n            <span class=\"hljs-string\">\"tools\"<\/span>: [<span class=\"hljs-string\">\"Git\"<\/span>, <span class=\"hljs-string\">\"Docker\"<\/span>, <span class=\"hljs-string\">\"AWS\"<\/span>, <span class=\"hljs-string\">\"Azure\"<\/span>, <span class=\"hljs-string\">\"CI\/CD\"<\/span>, <span class=\"hljs-string\">\"Kubernetes\"<\/span>],\n            <span class=\"hljs-string\">\"soft_skills\"<\/span>: [<span class=\"hljs-string\">\"Team leadership\"<\/span>, <span class=\"hljs-string\">\"Project management\"<\/span>, <span class=\"hljs-string\">\"Agile methodologies\"<\/span>, <span class=\"hljs-string\">\"Technical writing\"<\/span>, <span class=\"hljs-string\">\"Client communication\"<\/span>]\n        }\n\n        self.experience = [\n            {\n                <span class=\"hljs-string\">\"title\"<\/span>: <span class=\"hljs-string\">\"Senior Full Stack Developer\"<\/span>,\n                <span class=\"hljs-string\">\"company\"<\/span>: <span class=\"hljs-string\">\"Tech Innovations Inc.\"<\/span>,\n                <span class=\"hljs-string\">\"period\"<\/span>: <span class=\"hljs-string\">\"2020-Present\"<\/span>,\n                <span class=\"hljs-string\">\"responsibilities\"<\/span>: [\n                    <span class=\"hljs-string\">\"Led development of cloud-based SaaS platform\"<\/span>,\n                    <span class=\"hljs-string\">\"Managed team of 5 developers\"<\/span>,\n                    <span class=\"hljs-string\">\"Implemented CI\/CD pipeline reducing deployment time by 40%\"<\/span>,\n                    <span class=\"hljs-string\">\"Architected microservices infrastructure\"<\/span>\n                ]\n            },\n            {\n                <span class=\"hljs-string\">\"title\"<\/span>: <span class=\"hljs-string\">\"Full Stack Developer\"<\/span>,\n                <span class=\"hljs-string\">\"company\"<\/span>: <span class=\"hljs-string\">\"WebSolutions Co.\"<\/span>,\n                <span class=\"hljs-string\">\"period\"<\/span>: <span class=\"hljs-string\">\"2017-2020\"<\/span>,\n                <span class=\"hljs-string\">\"responsibilities\"<\/span>: [\n                    <span class=\"hljs-string\">\"Developed responsive web applications using React and Node.js\"<\/span>,\n                    <span class=\"hljs-string\">\"Implemented RESTful APIs and database schemas\"<\/span>,\n                    <span class=\"hljs-string\">\"Collaborated with UX\/UI designers to implement user-friendly interfaces\"<\/span>,\n                    <span class=\"hljs-string\">\"Participated in code reviews and mentored junior developers\"<\/span>\n                ]\n            },\n            {\n                <span class=\"hljs-string\">\"title\"<\/span>: <span class=\"hljs-string\">\"Junior Developer\"<\/span>,\n                <span class=\"hljs-string\">\"company\"<\/span>: <span class=\"hljs-string\">\"StartUp Labs\"<\/span>,\n                <span class=\"hljs-string\">\"period\"<\/span>: <span class=\"hljs-string\">\"2015-2017\"<\/span>,\n                <span class=\"hljs-string\">\"responsibilities\"<\/span>: [\n                    <span class=\"hljs-string\">\"Built and maintained client websites\"<\/span>,\n                    <span class=\"hljs-string\">\"Developed custom WordPress plugins\"<\/span>,\n                    <span class=\"hljs-string\">\"Implemented responsive designs and cross-browser compatibility\"<\/span>,\n                    <span class=\"hljs-string\">\"Assisted in database design and optimization\"<\/span>\n                ]\n            }\n        ]\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">get_skills_summary<\/span>(<span class=\"hljs-params\">self<\/span>):<\/span>\n\n        prompt = <span class=\"hljs-string\">f\"\"\"\n        Generate a professional summary of the following skills for a portfolio website:\n\n        Programming Languages: <span class=\"hljs-subst\">{<span class=\"hljs-string\">', '<\/span>.join(self.skills[<span class=\"hljs-string\">'languages'<\/span>])}<\/span>\n        Frameworks &amp; Libraries: <span class=\"hljs-subst\">{<span class=\"hljs-string\">', '<\/span>.join(self.skills[<span class=\"hljs-string\">'frameworks'<\/span>])}<\/span>\n        Tools &amp; Platforms: <span class=\"hljs-subst\">{<span class=\"hljs-string\">', '<\/span>.join(self.skills[<span class=\"hljs-string\">'tools'<\/span>])}<\/span>\n        Soft Skills: <span class=\"hljs-subst\">{<span class=\"hljs-string\">', '<\/span>.join(self.skills[<span class=\"hljs-string\">'soft_skills'<\/span>])}<\/span>\n\n        Format the response in markdown with appropriate sections and highlights.\n        \"\"\"<\/span>\n        <span class=\"hljs-keyword\">return<\/span> self.get_response(prompt)\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">get_experience_summary<\/span>(<span class=\"hljs-params\">self<\/span>):<\/span>\n\n        experience_text = <span class=\"hljs-string\">\"# Work Experience\\n\\n\"<\/span>\n        <span class=\"hljs-keyword\">for<\/span> job <span class=\"hljs-keyword\">in<\/span> self.experience:\n            experience_text += <span class=\"hljs-string\">f\"## <span class=\"hljs-subst\">{job[<span class=\"hljs-string\">'title'<\/span>]}<\/span> at <span class=\"hljs-subst\">{job[<span class=\"hljs-string\">'company'<\/span>]}<\/span>\\n\"<\/span>\n            experience_text += <span class=\"hljs-string\">f\"**<span class=\"hljs-subst\">{job[<span class=\"hljs-string\">'period'<\/span>]}<\/span>**\\n\\n\"<\/span>\n            experience_text += <span class=\"hljs-string\">\"**Responsibilities:**\\n\"<\/span>\n            <span class=\"hljs-keyword\">for<\/span> resp <span class=\"hljs-keyword\">in<\/span> job[<span class=\"hljs-string\">'responsibilities'<\/span>]:\n                experience_text += <span class=\"hljs-string\">f\"- <span class=\"hljs-subst\">{resp}<\/span>\\n\"<\/span>\n            experience_text += <span class=\"hljs-string\">\"\\n\"<\/span>\n\n        prompt = <span class=\"hljs-string\">f\"\"\"\n        Based \u0631\u0648\u06cc the following work experience, generate a professional career summary for a portfolio website:\n\n        <span class=\"hljs-subst\">{experience_text}<\/span>\n\n        Highlight career progression, key achievements, and growth. Format the response in markdown.\n        \"\"\"<\/span>\n        <span class=\"hljs-keyword\">return<\/span> self.get_response(prompt)\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">assess_job_fit<\/span>(<span class=\"hljs-params\">self, job_description<\/span>):<\/span>\n\n        skills_flat = []\n        <span class=\"hljs-keyword\">for<\/span> skill_category <span class=\"hljs-keyword\">in<\/span> self.skills.values():\n            skills_flat.extend(skill_category)\n\n        experience_flat = []\n        <span class=\"hljs-keyword\">for<\/span> job <span class=\"hljs-keyword\">in<\/span> self.experience:\n            experience_flat.extend(job[<span class=\"hljs-string\">'responsibilities'<\/span>])\n\n        prompt = <span class=\"hljs-string\">f\"\"\"\n        Assess the fit for the following job description based \u0631\u0648\u06cc the skills and experience provided:\n\n        Job Description:\n        <span class=\"hljs-subst\">{job_description}<\/span>\n\n        Skills:\n        <span class=\"hljs-subst\">{<span class=\"hljs-string\">', '<\/span>.join(skills_flat)}<\/span>\n\n        Experience:\n        <span class=\"hljs-subst\">{<span class=\"hljs-string\">' '<\/span>.join(experience_flat)}<\/span>\n\n        Provide an analysis of strengths, potential gaps, and overall suitability for the role. Format the response in markdown.\n        \"\"\"<\/span>\n        <span class=\"hljs-keyword\">return<\/span> self.get_response(prompt)\n<\/code><\/pre>\n<p>\u0627\u06cc\u0646 \u0639\u0627\u0645\u0644 \u0628\u0631\u0627\u06cc \u06a9\u0645\u06a9 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u062f\u0631 \u0632\u0645\u06cc\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627\u06cc \u0645\u0631\u062a\u0628\u0637 \u0628\u0627 \u0634\u063a\u0644\u06cc \u0645\u0627\u0646\u0646\u062f:<\/p>\n<ul>\n<li>\n<p>\u0627\u06cc\u062c\u0627\u062f \u062e\u0644\u0627\u0635\u0647 \u0647\u0627\u06cc \u062d\u0631\u0641\u0647 \u0627\u06cc \u0627\u0632 \u0645\u0647\u0627\u0631\u062a \u0647\u0627\u06cc \u0641\u0646\u06cc \u0648 \u0646\u0631\u0645<\/p>\n<\/li>\n<li>\n<p>\u062a\u0648\u0644\u06cc\u062f \u0631\u0648\u0627\u06cc\u062a \u0647\u0627\u06cc \u0634\u063a\u0644\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0631\u0648\u06cc \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631<\/p>\n<\/li>\n<li>\n<p>\u0627\u0631\u0632\u06cc\u0627\u0628\u06cc \u0645\u0646\u0627\u0633\u0628 \u06a9\u0627\u0631 \u0628\u0627 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0645\u0647\u0627\u0631\u062a \u0647\u0627 \u0648 \u062a\u062c\u0631\u0628\u0647 \u062f\u0631 \u0628\u0631\u0627\u0628\u0631 \u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0634\u063a\u0644\u06cc<\/p>\n<\/li>\n<\/ul>\n<p>\u0639\u0627\u0645\u0644 \u0627\u0632 \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc LLM \u0639\u0627\u0645\u0644 \u067e\u0627\u06cc\u0647 (\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u062f\u0644 Groq&#8217;s Llama 3.3 70B) \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u067e\u0627\u0633\u062e \u0647\u0627\u06cc \u0632\u0628\u0627\u0646 \u0637\u0628\u06cc\u0639\u06cc \u06a9\u0647 \u062f\u0631 Markdown \u0642\u0627\u0644\u0628 \u0628\u0646\u062f\u06cc \u0634\u062f\u0647 \u0627\u0646\u062f \u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u06af\u0646\u062c\u0627\u0646\u062f\u0646 \u062f\u0631 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0647\u0627\u06cc \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627 \u060c R\u00e9sum\u00e9s \u06cc\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0634\u063a\u0644\u06cc \u0645\u0646\u0627\u0633\u0628 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u067e\u0631\u0648\u0646\u062f\u0647 \u062f\u0627\u0631\u0627\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0634\u063a\u0644\u06cc \u0646\u0645\u0648\u0646\u0647 \u0627\u0633\u062a \u0648 \u062f\u0631 \u06cc\u06a9 \u0627\u062c\u0631\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc \u060c \u0627\u06cc\u0646 \u0627\u0632 \u06cc\u06a9 \u0628\u0627\u0646\u06a9 \u0627\u0637\u0644\u0627\u0639\u0627\u062a\u06cc \u062d\u0627\u0635\u0644 \u0645\u06cc \u0634\u0648\u062f<\/p>\n<p>\u0632\u0645\u0627\u0646 \u062e\u0648\u0628 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0646\u062f\u0647 \u0628\u0639\u062f\u06cc AI &#8211; \u0627\u06cc\u0646 \u0628\u0627\u0631 \u0627\u0633\u062a <code>client_agent.py<\/code>\u060c \u06a9\u0647 \u0627\u06cc\u0646 \u06a9\u062f \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n<pre><code class=\"lang-python\"><span class=\"hljs-keyword\">from<\/span> agents.base_agent <span class=\"hljs-keyword\">import<\/span> BaseAgent\n\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">ClientAgent<\/span>(<span class=\"hljs-params\">BaseAgent<\/span>):<\/span>\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">__init__<\/span>(<span class=\"hljs-params\">self<\/span>):<\/span>\n        super().__init__(\n            name=<span class=\"hljs-string\">\"BusinessAdvisor\"<\/span>,\n            description=<span class=\"hljs-string\">\"I'm the client specialist. I can provide information about services, pricing, and project details.\"<\/span>,\n            avatar=<span class=\"hljs-string\">\"client_avatar.png\"<\/span>\n        )\n\n        self.services = {\n            <span class=\"hljs-string\">\"web_development\"<\/span>: {\n                <span class=\"hljs-string\">\"name\"<\/span>: <span class=\"hljs-string\">\"Web Development\"<\/span>,\n                <span class=\"hljs-string\">\"description\"<\/span>: <span class=\"hljs-string\">\"Custom web application development using modern frameworks and best practices.\"<\/span>,\n                <span class=\"hljs-string\">\"pricing_model\"<\/span>: <span class=\"hljs-string\">\"Project-based or hourly\"<\/span>,\n                <span class=\"hljs-string\">\"price_range\"<\/span>: <span class=\"hljs-string\">\"$5,000 - $50,000 depending \u0631\u0648\u06cc complexity\"<\/span>,\n                <span class=\"hljs-string\">\"timeline\"<\/span>: <span class=\"hljs-string\">\"4-12 weeks depending \u0631\u0648\u06cc scope\"<\/span>,\n                <span class=\"hljs-string\">\"technologies\"<\/span>: [<span class=\"hljs-string\">\"React\"<\/span>, <span class=\"hljs-string\">\"Vue.js\"<\/span>, <span class=\"hljs-string\">\"Node.js\"<\/span>, <span class=\"hljs-string\">\"Django\"<\/span>, <span class=\"hljs-string\">\"Flask\"<\/span>]\n            },\n            <span class=\"hljs-string\">\"mobile_development\"<\/span>: {\n                <span class=\"hljs-string\">\"name\"<\/span>: <span class=\"hljs-string\">\"Mobile App Development\"<\/span>,\n                <span class=\"hljs-string\">\"description\"<\/span>: <span class=\"hljs-string\">\"Native and cross-platform mobile application development for iOS and Android.\"<\/span>,\n                <span class=\"hljs-string\">\"pricing_model\"<\/span>: <span class=\"hljs-string\">\"Project-based\"<\/span>,\n                <span class=\"hljs-string\">\"price_range\"<\/span>: <span class=\"hljs-string\">\"$8,000 - $60,000 depending \u0631\u0648\u06cc complexity\"<\/span>,\n                <span class=\"hljs-string\">\"timeline\"<\/span>: <span class=\"hljs-string\">\"6-16 weeks depending \u0631\u0648\u06cc scope\"<\/span>,\n                <span class=\"hljs-string\">\"technologies\"<\/span>: [<span class=\"hljs-string\">\"React Native\"<\/span>, <span class=\"hljs-string\">\"Flutter\"<\/span>, <span class=\"hljs-string\">\"Swift\"<\/span>, <span class=\"hljs-string\">\"Kotlin\"<\/span>]\n            },\n            <span class=\"hljs-string\">\"consulting\"<\/span>: {\n                <span class=\"hljs-string\">\"name\"<\/span>: <span class=\"hljs-string\">\"Technical Consulting\"<\/span>,\n                <span class=\"hljs-string\">\"description\"<\/span>: <span class=\"hljs-string\">\"Expert advice \u0631\u0648\u06cc architecture, technology stack, and development practices.\"<\/span>,\n                <span class=\"hljs-string\">\"pricing_model\"<\/span>: <span class=\"hljs-string\">\"Hourly\"<\/span>,\n                <span class=\"hljs-string\">\"price_range\"<\/span>: <span class=\"hljs-string\">\"$150 - $250 per hour\"<\/span>,\n                <span class=\"hljs-string\">\"timeline\"<\/span>: <span class=\"hljs-string\">\"Ongoing or as needed\"<\/span>,\n                <span class=\"hljs-string\">\"technologies\"<\/span>: [<span class=\"hljs-string\">\"Various based \u0631\u0648\u06cc client needs\"<\/span>]\n            }\n        }\n\n        self.process = [\n            <span class=\"hljs-string\">\"Initial consultation to understand requirements\"<\/span>,\n            <span class=\"hljs-string\">\"Proposal and quote preparation\"<\/span>,\n            <span class=\"hljs-string\">\"Contract signing and project kickoff\"<\/span>,\n            <span class=\"hljs-string\">\"Design and prototyping phase\"<\/span>,\n            <span class=\"hljs-string\">\"Development sprints with regular client feedback\"<\/span>,\n            <span class=\"hljs-string\">\"Testing and quality assurance\"<\/span>,\n            <span class=\"hljs-string\">\"Deployment and launch\"<\/span>,\n            <span class=\"hljs-string\">\"Post-launch support and maintenance\"<\/span>\n        ]\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">get_services_overview<\/span>(<span class=\"hljs-params\">self<\/span>):<\/span>\n\n        services_text = <span class=\"hljs-string\">\"# Services Offered\\n\\n\"<\/span>\n        <span class=\"hljs-keyword\">for<\/span> service_id, service <span class=\"hljs-keyword\">in<\/span> self.services.items():\n            services_text += <span class=\"hljs-string\">f\"## <span class=\"hljs-subst\">{service[<span class=\"hljs-string\">'name'<\/span>]}<\/span>\\n\"<\/span>\n            services_text += <span class=\"hljs-string\">f\"<span class=\"hljs-subst\">{service[<span class=\"hljs-string\">'description'<\/span>]}<\/span>\\n\\n\"<\/span>\n            services_text += <span class=\"hljs-string\">f\"**Pricing Model**: <span class=\"hljs-subst\">{service[<span class=\"hljs-string\">'pricing_model'<\/span>]}<\/span>\\n\"<\/span>\n            services_text += <span class=\"hljs-string\">f\"**Price Range**: <span class=\"hljs-subst\">{service[<span class=\"hljs-string\">'price_range'<\/span>]}<\/span>\\n\"<\/span>\n            services_text += <span class=\"hljs-string\">f\"**Timeline**: <span class=\"hljs-subst\">{service[<span class=\"hljs-string\">'timeline'<\/span>]}<\/span>\\n\"<\/span>\n            services_text += <span class=\"hljs-string\">f\"**Technologies**: <span class=\"hljs-subst\">{<span class=\"hljs-string\">', '<\/span>.join(service[<span class=\"hljs-string\">'technologies'<\/span>])}<\/span>\\n\\n\"<\/span>\n\n        prompt = <span class=\"hljs-string\">f\"\"\"\n        Generate a professional overview of the following services for a programmer's portfolio website:\n\n        <span class=\"hljs-subst\">{services_text}<\/span>\n\n        Format the response in markdown with appropriate sections and highlights.\n        \"\"\"<\/span>\n        <span class=\"hljs-keyword\">return<\/span> self.get_response(prompt)\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">get_service_details<\/span>(<span class=\"hljs-params\">self, service_id<\/span>):<\/span>\n\n        <span class=\"hljs-keyword\">if<\/span> service_id <span class=\"hljs-keyword\">in<\/span> self.services:\n            service = self.services[service_id]\n            prompt = <span class=\"hljs-string\">f\"\"\"\n            Generate a detailed description for the following service:\n\n            Service Name: <span class=\"hljs-subst\">{service[<span class=\"hljs-string\">'name'<\/span>]}<\/span>\n            Description: <span class=\"hljs-subst\">{service[<span class=\"hljs-string\">'description'<\/span>]}<\/span>\n            Pricing Model: <span class=\"hljs-subst\">{service[<span class=\"hljs-string\">'pricing_model'<\/span>]}<\/span>\n            Price Range: <span class=\"hljs-subst\">{service[<span class=\"hljs-string\">'price_range'<\/span>]}<\/span>\n            Timeline: <span class=\"hljs-subst\">{service[<span class=\"hljs-string\">'timeline'<\/span>]}<\/span>\n            Technologies: <span class=\"hljs-subst\">{<span class=\"hljs-string\">', '<\/span>.join(service[<span class=\"hljs-string\">'technologies'<\/span>])}<\/span>\n\n            Include information about the value proposition, typical deliverables, and client benefits. Format the response in markdown.\n            \"\"\"<\/span>\n            <span class=\"hljs-keyword\">return<\/span> self.get_response(prompt)\n        <span class=\"hljs-keyword\">else<\/span>:\n            <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-string\">\"Service not found. Please check the service ID and try again.\"<\/span>\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">explain_process<\/span>(<span class=\"hljs-params\">self<\/span>):<\/span>\n\n        process_text = <span class=\"hljs-string\">\"# Client Engagement Process\\n\\n\"<\/span>\n        <span class=\"hljs-keyword\">for<\/span> i, step <span class=\"hljs-keyword\">in<\/span> enumerate(self.process, <span class=\"hljs-number\">1<\/span>):\n            process_text += <span class=\"hljs-string\">f\"## Step <span class=\"hljs-subst\">{i}<\/span>: <span class=\"hljs-subst\">{step}<\/span>\\n\\n\"<\/span>\n\n        prompt = <span class=\"hljs-string\">f\"\"\"\n        Based \u0631\u0648\u06cc the following client engagement process, generate a detailed explanation for potential clients:\n\n        <span class=\"hljs-subst\">{process_text}<\/span>\n\n        For each step, provide a brief explanation of what happens, what the client can expect, and any deliverables. Format the response in markdown.\n        \"\"\"<\/span>\n        <span class=\"hljs-keyword\">return<\/span> self.get_response(prompt)\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">generate_proposal<\/span>(<span class=\"hljs-params\">self, project_description<\/span>):<\/span>\n\n        prompt = <span class=\"hljs-string\">f\"\"\"\n        Generate a professional project proposal based \u0631\u0648\u06cc the following client requirements:\n\n        Project Description:\n        <span class=\"hljs-subst\">{project_description}<\/span>\n\n        Include the following sections:\n        1. Project Understanding\n        2. Proposed Approach\n        3. Estimated Timeline\n        4. Estimated Budget Range\n        5. Next Steps\n\n        Base your proposal \u0631\u0648\u06cc the services and processes described in the portfolio. Format the response in markdown.\n        \"\"\"<\/span>\n        <span class=\"hljs-keyword\">return<\/span> self.get_response(prompt)\n<\/code><\/pre>\n<p>\u0627\u06cc\u0646 \u0639\u0627\u0645\u0644 \u0628\u0631\u0627\u06cc \u06a9\u0645\u06a9 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u062f\u0631 \u0632\u0645\u06cc\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627\u06cc \u0645\u0634\u062a\u0631\u06cc \u0648 \u0645\u0634\u0627\u063a\u0644 \u0645\u0627\u0646\u0646\u062f:<\/p>\n<ul>\n<li>\n<p>\u0627\u0631\u0627\u0626\u0647 \u0646\u0645\u0627\u06cc \u06a9\u0644\u06cc \u0627\u0632 \u062e\u062f\u0645\u0627\u062a \u0645\u0648\u062c\u0648\u062f \u0628\u0631\u0627\u06cc \u0645\u0648\u0627\u062f \u0628\u0627\u0632\u0627\u0631\u06cc\u0627\u0628\u06cc<\/p>\n<\/li>\n<li>\n<p>\u0627\u0631\u0627\u0626\u0647 \u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062e\u062f\u0645\u0627\u062a \u062f\u0642\u06cc\u0642 \u0628\u0631\u0627\u06cc \u067e\u06cc\u0634\u0646\u0647\u0627\u062f\u0627\u062a \u062e\u0627\u0635<\/p>\n<\/li>\n<li>\n<p>\u062a\u0648\u0636\u06cc\u062d \u062f\u0631\u06af\u06cc\u0631\u06cc \u0645\u0634\u062a\u0631\u06cc process \u0628\u0647 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0628\u0627\u0644\u0642\u0648\u0647<\/p>\n<\/li>\n<li>\n<p>\u0627\u06cc\u062c\u0627\u062f \u067e\u06cc\u0634\u0646\u0647\u0627\u062f\u0627\u062a \u067e\u0631\u0648\u0698\u0647 \u0633\u0641\u0627\u0631\u0634\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0631\u0648\u06cc \u0627\u0644\u0632\u0627\u0645\u0627\u062a \u0645\u0634\u062a\u0631\u06cc<\/p>\n<\/li>\n<\/ul>\n<p>\u0627\u06cc\u0646 \u0639\u0627\u0645\u0644 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0632 \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc LLM \u0639\u0627\u0645\u0644 \u067e\u0627\u06cc\u0647 (\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u062f\u0644 LLAMA 3.3 70B GROQ) \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u0645\u062d\u062a\u0648\u0627\u06cc \u062d\u0631\u0641\u0647 \u0627\u06cc \u0648 \u062a\u062c\u0627\u0631\u06cc \u06af\u0631\u0627 \u062f\u0631 Markdown \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f. \u0645\u0627\u0646\u0646\u062f \u0642\u0628\u0644 \u060c \u0627\u06cc\u0646 \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0645\u0686\u0646\u06cc\u0646 \u062f\u0627\u0631\u0627\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062e\u062f\u0645\u0627\u062a \u0646\u0645\u0648\u0646\u0647 \u0627\u0633\u062a.<\/p>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u06a9\u0627\u0631 \u0631\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645 \u0631\u0648\u06cc \u062f\u0631 <code>project_agent.py<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0648 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0627\u06cc\u0646 \u06a9\u062f \u0628\u0647 \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u0622\u0646:<\/p>\n<pre><code class=\"lang-python\"><span class=\"hljs-keyword\">from<\/span> agents.base_agent <span class=\"hljs-keyword\">import<\/span> BaseAgent\n\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">ProjectAgent<\/span>(<span class=\"hljs-params\">BaseAgent<\/span>):<\/span>\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">__init__<\/span>(<span class=\"hljs-params\">self<\/span>):<\/span>\n        super().__init__(\n            name=<span class=\"hljs-string\">\"TechExpert\"<\/span>,\n            description=<span class=\"hljs-string\">\"I'm the project specialist. I can provide detailed information about any project in this portfolio.\"<\/span>,\n            avatar=<span class=\"hljs-string\">\"project_avatar.png\"<\/span>\n        )\n\n        self.projects = {\n            <span class=\"hljs-string\">\"project1\"<\/span>: {\n                <span class=\"hljs-string\">\"name\"<\/span>: <span class=\"hljs-string\">\"E-commerce Platform\"<\/span>,\n                <span class=\"hljs-string\">\"tech_stack\"<\/span>: [<span class=\"hljs-string\">\"React\"<\/span>, <span class=\"hljs-string\">\"Node.js\"<\/span>, <span class=\"hljs-string\">\"MongoDB\"<\/span>, <span class=\"hljs-string\">\"Express\"<\/span>],\n                <span class=\"hljs-string\">\"description\"<\/span>: <span class=\"hljs-string\">\"A full-stack e-commerce platform with user authentication, product catalog, shopping cart, and payment processing.\"<\/span>,\n                <span class=\"hljs-string\">\"highlights\"<\/span>: [<span class=\"hljs-string\">\"Responsive design\"<\/span>, <span class=\"hljs-string\">\"RESTful API\"<\/span>, <span class=\"hljs-string\">\"Stripe integration\"<\/span>, <span class=\"hljs-string\">\"JWT authentication\"<\/span>],\n                <span class=\"hljs-string\">\"github_link\"<\/span>: <span class=\"hljs-string\">\"https:\/\/github.com\/username\/ecommerce-platform\"<\/span>,\n                <span class=\"hljs-string\">\"demo_link\"<\/span>: <span class=\"hljs-string\">\"https:\/\/ecommerce-demo.example.com\"<\/span>\n            },\n            <span class=\"hljs-string\">\"project2\"<\/span>: {\n                <span class=\"hljs-string\">\"name\"<\/span>: <span class=\"hljs-string\">\"Task Management App\"<\/span>,\n                <span class=\"hljs-string\">\"tech_stack\"<\/span>: [<span class=\"hljs-string\">\"Vue.js\"<\/span>, <span class=\"hljs-string\">\"Firebase\"<\/span>, <span class=\"hljs-string\">\"Tailwind CSS\"<\/span>],\n                <span class=\"hljs-string\">\"description\"<\/span>: <span class=\"hljs-string\">\"A real-time task management application with collaborative features, notifications, and progress tracking.\"<\/span>,\n                <span class=\"hljs-string\">\"highlights\"<\/span>: [<span class=\"hljs-string\">\"Real-time updates\"<\/span>, <span class=\"hljs-string\">\"User collaboration\"<\/span>, <span class=\"hljs-string\">\"Drag-and-drop interface\"<\/span>, <span class=\"hljs-string\">\"Progressive Web App\"<\/span>],\n                <span class=\"hljs-string\">\"github_link\"<\/span>: <span class=\"hljs-string\">\"https:\/\/github.com\/username\/task-manager\"<\/span>,\n                <span class=\"hljs-string\">\"demo_link\"<\/span>: <span class=\"hljs-string\">\"https:\/\/taskmanager-demo.example.com\"<\/span>\n            },\n            <span class=\"hljs-string\">\"project3\"<\/span>: {\n                <span class=\"hljs-string\">\"name\"<\/span>: <span class=\"hljs-string\">\"Data Visualization Dashboard\"<\/span>,\n                <span class=\"hljs-string\">\"tech_stack\"<\/span>: [<span class=\"hljs-string\">\"Python\"<\/span>, <span class=\"hljs-string\">\"Django\"<\/span>, <span class=\"hljs-string\">\"D3.js\"<\/span>, <span class=\"hljs-string\">\"PostgreSQL\"<\/span>],\n                <span class=\"hljs-string\">\"description\"<\/span>: <span class=\"hljs-string\">\"An interactive dashboard for visualizing complex datasets with filtering, sorting, and export capabilities.\"<\/span>,\n                <span class=\"hljs-string\">\"highlights\"<\/span>: [<span class=\"hljs-string\">\"Interactive charts\"<\/span>, <span class=\"hljs-string\">\"Data filtering\"<\/span>, <span class=\"hljs-string\">\"CSV\/PDF export\"<\/span>, <span class=\"hljs-string\">\"Responsive design\"<\/span>],\n                <span class=\"hljs-string\">\"github_link\"<\/span>: <span class=\"hljs-string\">\"https:\/\/github.com\/username\/data-dashboard\"<\/span>,\n                <span class=\"hljs-string\">\"demo_link\"<\/span>: <span class=\"hljs-string\">\"https:\/\/dataviz-demo.example.com\"<\/span>\n            }\n        }\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">get_project_list<\/span>(<span class=\"hljs-params\">self<\/span>):<\/span>\n\n        project_list = <span class=\"hljs-string\">\"# Available Projects\\n\\n\"<\/span>\n        <span class=\"hljs-keyword\">for<\/span> project_id, project <span class=\"hljs-keyword\">in<\/span> self.projects.items():\n            project_list += <span class=\"hljs-string\">f\"## <span class=\"hljs-subst\">{project[<span class=\"hljs-string\">'name'<\/span>]}<\/span>\\n\"<\/span>\n            project_list += <span class=\"hljs-string\">f\"**Tech Stack**: <span class=\"hljs-subst\">{<span class=\"hljs-string\">', '<\/span>.join(project[<span class=\"hljs-string\">'tech_stack'<\/span>])}<\/span>\\n\"<\/span>\n            project_list += <span class=\"hljs-string\">f\"<span class=\"hljs-subst\">{project[<span class=\"hljs-string\">'description'<\/span>]}<\/span>\\n\\n\"<\/span>\n\n        <span class=\"hljs-keyword\">return<\/span> project_list\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">get_project_details<\/span>(<span class=\"hljs-params\">self, project_id<\/span>):<\/span>\n\n        <span class=\"hljs-keyword\">if<\/span> project_id <span class=\"hljs-keyword\">in<\/span> self.projects:\n            project = self.projects[project_id]\n            prompt = <span class=\"hljs-string\">f\"\"\"\n            Generate a detailed description for the following project:\n\n            Project Name: <span class=\"hljs-subst\">{project[<span class=\"hljs-string\">'name'<\/span>]}<\/span>\n            Tech Stack: <span class=\"hljs-subst\">{<span class=\"hljs-string\">', '<\/span>.join(project[<span class=\"hljs-string\">'tech_stack'<\/span>])}<\/span>\n            Description: <span class=\"hljs-subst\">{project[<span class=\"hljs-string\">'description'<\/span>]}<\/span>\n            Highlights: <span class=\"hljs-subst\">{<span class=\"hljs-string\">', '<\/span>.join(project[<span class=\"hljs-string\">'highlights'<\/span>])}<\/span>\n            GitHub: <span class=\"hljs-subst\">{project[<span class=\"hljs-string\">'github_link'<\/span>]}<\/span>\n            Demo: <span class=\"hljs-subst\">{project[<span class=\"hljs-string\">'demo_link'<\/span>]}<\/span>\n\n            Include technical details about implementation challenges and solutions. Format the response in markdown.\n            \"\"\"<\/span>\n            <span class=\"hljs-keyword\">return<\/span> self.get_response(prompt)\n        <span class=\"hljs-keyword\">else<\/span>:\n            <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-string\">\"Project not found. Please check the project ID and try again.\"<\/span>\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">answer_technical_question<\/span>(<span class=\"hljs-params\">self, project_id, question<\/span>):<\/span>\n\n        <span class=\"hljs-keyword\">if<\/span> project_id <span class=\"hljs-keyword\">in<\/span> self.projects:\n            project = self.projects[project_id]\n            prompt = <span class=\"hljs-string\">f\"\"\"\n            Answer the following technical question about this project:\n\n            Project Name: <span class=\"hljs-subst\">{project[<span class=\"hljs-string\">'name'<\/span>]}<\/span>\n            Tech Stack: <span class=\"hljs-subst\">{<span class=\"hljs-string\">', '<\/span>.join(project[<span class=\"hljs-string\">'tech_stack'<\/span>])}<\/span>\n            Description: <span class=\"hljs-subst\">{project[<span class=\"hljs-string\">'description'<\/span>]}<\/span>\n            Highlights: <span class=\"hljs-subst\">{<span class=\"hljs-string\">', '<\/span>.join(project[<span class=\"hljs-string\">'highlights'<\/span>])}<\/span>\n\n            Question: <span class=\"hljs-subst\">{question}<\/span>\n\n            Provide a detailed technical answer with code examples if relevant.\n            \"\"\"<\/span>\n            <span class=\"hljs-keyword\">return<\/span> self.get_response(prompt)\n        <span class=\"hljs-keyword\">else<\/span>:\n            <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-string\">\"Project not found. Please check the project ID and try again.\"<\/span>\n<\/code><\/pre>\n<p>\u0627\u06cc\u0646 \u0639\u0627\u0645\u0644 \u0628\u0631\u0627\u06cc \u06a9\u0645\u06a9 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u062f\u0631 \u0632\u0645\u06cc\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627\u06cc \u0645\u0631\u062a\u0628\u0637 \u0628\u0627 \u067e\u0631\u0648\u0698\u0647 \u0645\u0627\u0646\u0646\u062f:<\/p>\n<ul>\n<li>\n<p>\u0627\u0631\u0627\u0626\u0647 \u0646\u0645\u0627\u06cc \u06a9\u0644\u06cc \u0627\u0632 \u06a9\u0644\u06cc\u0647 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627 \u062f\u0631 \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627<\/p>\n<\/li>\n<li>\n<p>\u062a\u0648\u0644\u06cc\u062f \u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062f\u0642\u06cc\u0642 \u0627\u0632 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u062e\u0627\u0635<\/p>\n<\/li>\n<li>\n<p>\u067e\u0627\u0633\u062e \u062f\u0627\u062f\u0646 \u0628\u0647 \u0633\u0624\u0627\u0644\u0627\u062a \u0641\u0646\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u062c\u0632\u0626\u06cc\u0627\u062a \u0627\u062c\u0631\u0627\u06cc<\/p>\n<\/li>\n<\/ul>\n<p>\u0639\u0627\u0645\u0644 \u060c \u0645\u0627\u0646\u0646\u062f \u0645\u062b\u0627\u0644\u0647\u0627\u06cc \u0642\u0628\u0644\u06cc \u060c \u0627\u0632 \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc LLM \u0639\u0627\u0645\u0644 \u067e\u0627\u06cc\u0647 (\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u062f\u0644 Groq&#8217;s Llama 3.3 70B) \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u0645\u062d\u062a\u0648\u0627\u06cc \u0641\u0646\u06cc \u0648 \u067e\u0631\u0648\u0698\u0647 \u06af\u0631\u0627 \u06a9\u0647 \u062f\u0631 Markdown \u0642\u0627\u0644\u0628 \u0628\u0646\u062f\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a \u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0628\u0631\u0627\u06cc \u0645\u0633\u062a\u0646\u062f\u0627\u062a \u0641\u0646\u06cc \u06cc\u0627 \u0647\u0646\u06af\u0627\u0645 \u067e\u0627\u0633\u062e \u0628\u0647 \u0633\u0648\u0627\u0644\u0627\u062a \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0627\u062c\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u0645\u0641\u06cc\u062f \u0627\u0633\u062a. \u0645\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0627\u0632 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0645\u0633\u062e\u0631\u0647 \u0628\u0631 \u062e\u0644\u0627\u0641 \u06cc\u06a9 \u0628\u0627\u0646\u06a9 \u0627\u0637\u0644\u0627\u0639\u0627\u062a\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0628\u0627 \u0627\u062a\u0645\u0627\u0645 \u0622\u0646 \u067e\u0631\u0648\u0646\u062f\u0647 \u060c \u062f\u0648 \u0628\u0627\u0642\u06cc \u0645\u0627\u0646\u062f\u0647 \u0627\u0633\u062a. \u0645\u0648\u0631\u062f \u0628\u0639\u062f\u06cc \u0627\u0633\u062a <code>research_agent.py<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u067e\u06cc\u0634 \u0628\u0631\u0648\u06cc\u062f \u0648 \u0627\u06cc\u0646 \u06a9\u062f \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"lang-python\"><span class=\"hljs-keyword\">from<\/span> agents.base_agent <span class=\"hljs-keyword\">import<\/span> BaseAgent\n<span class=\"hljs-keyword\">import<\/span> requests\n<span class=\"hljs-keyword\">import<\/span> os\n<span class=\"hljs-keyword\">import<\/span> json\n\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">ResearchAgent<\/span>(<span class=\"hljs-params\">BaseAgent<\/span>):<\/span>\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">__init__<\/span>(<span class=\"hljs-params\">self<\/span>):<\/span>\n        super().__init__(\n            name=<span class=\"hljs-string\">\"ResearchAssistant\"<\/span>,\n            description=<span class=\"hljs-string\">\"I'm the research specialist. I can search the web for information about technologies, trends, and industry news.\"<\/span>,\n            avatar=<span class=\"hljs-string\">\"research_avatar.png\"<\/span>\n        )\n        self.api_key = os.getenv(<span class=\"hljs-string\">\"GROQ_API_KEY\"<\/span>)\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">search_web<\/span>(<span class=\"hljs-params\">self, query<\/span>):<\/span>\n\n        headers = {\n            <span class=\"hljs-string\">\"Authorization\"<\/span>: <span class=\"hljs-string\">f\"Bearer <span class=\"hljs-subst\">{self.api_key}<\/span>\"<\/span>,\n            <span class=\"hljs-string\">\"Content-Type\"<\/span>: <span class=\"hljs-string\">\"application\/json\"<\/span>\n        }\n\n        payload = {\n            <span class=\"hljs-string\">\"model\"<\/span>: <span class=\"hljs-string\">\"llama-3.3-70b-versatile\"<\/span>,\n            <span class=\"hljs-string\">\"messages\"<\/span>: [\n                {<span class=\"hljs-string\">\"role\"<\/span>: <span class=\"hljs-string\">\"system\"<\/span>, <span class=\"hljs-string\">\"content\"<\/span>: <span class=\"hljs-string\">\"You are a helpful research assistant.\"<\/span>},\n                {<span class=\"hljs-string\">\"role\"<\/span>: <span class=\"hljs-string\">\"user\"<\/span>, <span class=\"hljs-string\">\"content\"<\/span>: <span class=\"hljs-string\">f\"Search the web for: <span class=\"hljs-subst\">{query}<\/span>\"<\/span>}\n            ],\n            <span class=\"hljs-string\">\"tools\"<\/span>: [\n                {\n                    <span class=\"hljs-string\">\"type\"<\/span>: <span class=\"hljs-string\">\"web_search\"<\/span>\n                }\n            ]\n        }\n\n        <span class=\"hljs-keyword\">try<\/span>:\n            response = requests.post(\n                <span class=\"hljs-string\">\"https:\/\/api.groq.com\/openai\/v1\/chat\/completions\"<\/span>,\n                headers=headers,\n                json=payload\n            )\n\n            <span class=\"hljs-keyword\">if<\/span> response.status_code == <span class=\"hljs-number\">200<\/span>:\n                result = response.json()\n                <span class=\"hljs-keyword\">return<\/span> result[<span class=\"hljs-string\">\"choices\"<\/span>][<span class=\"hljs-number\">0<\/span>][<span class=\"hljs-string\">\"message\"<\/span>][<span class=\"hljs-string\">\"content\"<\/span>]\n            <span class=\"hljs-keyword\">else<\/span>:\n                <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-string\">f\"Error searching the web: <span class=\"hljs-subst\">{response.status_code}<\/span> - <span class=\"hljs-subst\">{response.text}<\/span>\"<\/span>\n        <span class=\"hljs-keyword\">except<\/span> Exception <span class=\"hljs-keyword\">as<\/span> e:\n            <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-string\">f\"Error searching the web: <span class=\"hljs-subst\">{str(e)}<\/span>\"<\/span>\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">research_technology<\/span>(<span class=\"hljs-params\">self, technology<\/span>):<\/span>\n\n        query = <span class=\"hljs-string\">f\"latest developments and best practices for <span class=\"hljs-subst\">{technology}<\/span> in software development\"<\/span>\n        search_results = self.search_web(query)\n\n        prompt = <span class=\"hljs-string\">f\"\"\"\n        Based \u0631\u0648\u06cc the following search results about <span class=\"hljs-subst\">{technology}<\/span>, provide a concise summary of:\n        1. What it is\n        2. Current state and popularity\n        3. Key features and benefits\n        4. Common use cases\n        5. Future trends\n\n        Search Results:\n        <span class=\"hljs-subst\">{search_results}<\/span>\n\n        Format the response in markdown with appropriate sections.\n        \"\"\"<\/span>\n        <span class=\"hljs-keyword\">return<\/span> self.get_response(prompt)\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">compare_technologies<\/span>(<span class=\"hljs-params\">self, tech1, tech2<\/span>):<\/span>\n\n        query = <span class=\"hljs-string\">f\"comparison between <span class=\"hljs-subst\">{tech1}<\/span> and <span class=\"hljs-subst\">{tech2}<\/span> for software development\"<\/span>\n        search_results = self.search_web(query)\n\n        prompt = <span class=\"hljs-string\">f\"\"\"\n        Based \u0631\u0648\u06cc the following search results comparing <span class=\"hljs-subst\">{tech1}<\/span> and <span class=\"hljs-subst\">{tech2}<\/span>, provide a detailed comparison including:\n        6. Core differences\n        7. Performance considerations\n        8. Learning curve\n        9. Community support\n        10. Use case recommendations\n\n        Search Results:\n        <span class=\"hljs-subst\">{search_results}<\/span>\n\n        Format the response in markdown with a comparison table and explanatory text.\n        \"\"\"<\/span>\n        <span class=\"hljs-keyword\">return<\/span> self.get_response(prompt)\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">get_industry_trends<\/span>(<span class=\"hljs-params\">self<\/span>):<\/span>\n\n        query = <span class=\"hljs-string\">\"latest trends in software development industry\"<\/span>\n        search_results = self.search_web(query)\n\n        prompt = <span class=\"hljs-string\">f\"\"\"\n        Based \u0631\u0648\u06cc the following search results about software development trends, provide a summary of:\n        11. Emerging technologies\n        12. Industry shifts\n        13. In-demand skills\n        14. Future predictions\n\n        Search Results:\n        <span class=\"hljs-subst\">{search_results}<\/span>\n\n        Format the response in markdown with appropriate sections and highlights.\n        \"\"\"<\/span>\n        <span class=\"hljs-keyword\">return<\/span> self.get_response(prompt)\n<\/code><\/pre>\n<p>\u0627\u06cc\u0646 \u0639\u0627\u0645\u0644 \u0628\u0631\u0627\u06cc \u06a9\u0645\u06a9 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u062f\u0631 \u0627\u0646\u062c\u0627\u0645 \u06a9\u0627\u0631\u0647\u0627\u06cc \u0645\u0631\u062a\u0628\u0637 \u0628\u0627 \u062a\u062d\u0642\u06cc\u0642 \u0645\u0627\u0646\u0646\u062f:<\/p>\n<ul>\n<li>\n<p>\u062a\u062d\u0642\u06cc\u0642 \u062f\u0631 \u0645\u0648\u0631\u062f \u0641\u0646 \u0622\u0648\u0631\u06cc \u0647\u0627\u06cc \u062e\u0627\u0635 \u0628\u0631\u0627\u06cc \u062f\u0631\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u060c \u0645\u0632\u0627\u06cc\u0627 \u0648 \u0645\u0648\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0622\u0646\u0647\u0627<\/p>\n<\/li>\n<li>\n<p>\u0645\u0642\u0627\u06cc\u0633\u0647 \u0641\u0646 \u0622\u0648\u0631\u06cc \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u0631\u0627\u06cc \u062a\u0635\u0645\u06cc\u0645 \u06af\u06cc\u0631\u06cc \u0622\u06af\u0627\u0647\u0627\u0646\u0647<\/p>\n<\/li>\n<li>\n<p>\u0628\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0631\u0648\u06cc \u0631\u0648\u0646\u062f \u0635\u0646\u0639\u062a \u0648 \u0641\u0646 \u0622\u0648\u0631\u06cc \u0647\u0627\u06cc \u0646\u0648\u0638\u0647\u0648\u0631<\/p>\n<\/li>\n<\/ul>\n<p>\u0622\u0646\u0686\u0647 \u0627\u06cc\u0646 \u0639\u0627\u0645\u0644 \u0631\u0627 \u062f\u0631 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0628\u0627 \u0633\u0627\u06cc\u0631 \u0639\u0648\u0627\u0645\u0644 \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0645\u06cc \u06a9\u0646\u062f \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0642\u0627\u0628\u0644\u06cc\u062a \u062c\u0633\u062a\u062c\u0648\u06cc \u0648\u0628 Groq Toolhouse API \u0628\u0647 \u062c\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0641\u0642\u0637 \u0628\u0647 \u062a\u06a9\u06cc\u0647 \u0628\u067e\u0631\u062f\u0627\u0632\u062f \u060c \u0628\u0647 \u0637\u0648\u0631 \u0641\u0639\u0627\u0644 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0631\u0627 \u0627\u0632 \u0648\u0628 \u0628\u062f\u0633\u062a \u0645\u06cc \u0622\u0648\u0631\u062f \u0631\u0648\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0627\u0632 \u067e\u06cc\u0634 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u06cc\u0627 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0622\u0645\u0648\u0632\u0634 LLM. \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0628\u0647 \u0622\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0641\u0639\u0644\u06cc \u0648 \u062c\u0627\u0645\u0639 \u062a\u0631\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u0645\u0648\u0636\u0648\u0639\u0627\u062a \u0641\u0646\u0627\u0648\u0631\u06cc \u0628\u0647 \u0633\u0631\u0639\u062a \u062f\u0631 \u062d\u0627\u0644 \u062a\u062d\u0648\u0644 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u062f.<\/p>\n<p>\u062e\u0648\u0628 \u060c \u0627\u06a9\u0646\u0648\u0646 \u0645\u0627 \u06cc\u06a9 \u0639\u0627\u0645\u0644 \u0622\u062e\u0631 AI \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u062f\u0627\u0631\u06cc\u0645 \u0648 \u0627\u06cc\u0646 \u0627\u0633\u062a <code>welcome_agent.py<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0627\u06cc\u0646 \u06a9\u062f \u0631\u0627 \u0628\u0647 \u067e\u0631\u0648\u0646\u062f\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"lang-python\"><span class=\"hljs-keyword\">from<\/span> agents.base_agent <span class=\"hljs-keyword\">import<\/span> BaseAgent\n\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">WelcomeAgent<\/span>(<span class=\"hljs-params\">BaseAgent<\/span>):<\/span>\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">__init__<\/span>(<span class=\"hljs-params\">self<\/span>):<\/span>\n        super().__init__(\n            name=<span class=\"hljs-string\">\"Greeter\"<\/span>,\n            description=<span class=\"hljs-string\">\"I'm the welcome agent for this portfolio. I can help guide you to the right section based \u0631\u0648\u06cc your interests.\"<\/span>,\n            avatar=<span class=\"hljs-string\">\"welcome_avatar.png\"<\/span>\n        )\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">greet<\/span>(<span class=\"hljs-params\">self, visitor_type=None<\/span>):<\/span>\n\n        <span class=\"hljs-keyword\">if<\/span> visitor_type == <span class=\"hljs-string\">\"employer\"<\/span>:\n            <span class=\"hljs-keyword\">return<\/span> self.get_response(\n                <span class=\"hljs-string\">\"Generate a friendly, professional greeting for a potential employer visiting a programmer's portfolio website. \"<\/span>\n                <span class=\"hljs-string\">\"Mention that they can explore the Projects section to see technical skills and the Career section for professional experience.\"<\/span>\n            )\n        <span class=\"hljs-keyword\">elif<\/span> visitor_type == <span class=\"hljs-string\">\"client\"<\/span>:\n            <span class=\"hljs-keyword\">return<\/span> self.get_response(\n                <span class=\"hljs-string\">\"Generate a friendly, business-oriented greeting for a potential client visiting a programmer's portfolio website. \"<\/span>\n                <span class=\"hljs-string\">\"Mention that they can check out the Projects section for examples of past work and the Client section for service details.\"<\/span>\n            )\n        <span class=\"hljs-keyword\">elif<\/span> visitor_type == <span class=\"hljs-string\">\"fellow_programmer\"<\/span>:\n            <span class=\"hljs-keyword\">return<\/span> self.get_response(\n                <span class=\"hljs-string\">\"Generate a friendly, casual greeting for a fellow programmer visiting a portfolio website. \"<\/span>\n                <span class=\"hljs-string\">\"Mention that they can explore the Projects section for technical details and code samples.\"<\/span>\n            )\n        <span class=\"hljs-keyword\">else<\/span>:\n            <span class=\"hljs-keyword\">return<\/span> self.get_response(\n                <span class=\"hljs-string\">\"Generate a friendly, general greeting for a visitor to a programmer's portfolio website. \"<\/span>\n                <span class=\"hljs-string\">\"Ask if they are an employer, client, or fellow programmer to provide more tailored information.\"<\/span>\n            )\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">suggest_section<\/span>(<span class=\"hljs-params\">self, interest<\/span>):<\/span>\n\n        prompt = <span class=\"hljs-string\">f\"Based \u0631\u0648\u06cc a visitor expressing interest in '<span class=\"hljs-subst\">{interest}<\/span>', 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.\"<\/span>\n        <span class=\"hljs-keyword\">return<\/span> self.get_response(prompt)\n<\/code><\/pre>\n<p>\u0627\u06cc\u0646 \u0639\u0627\u0645\u0644 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0646\u0642\u0637\u0647 \u0627\u0635\u0644\u06cc \u062a\u0645\u0627\u0633 \u0628\u0631\u0627\u06cc \u0628\u0627\u0632\u062f\u06cc\u062f \u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u0627\u0632 \u06cc\u06a9 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<ul>\n<li>\n<p>\u062a\u0628\u0631\u06cc\u06a9 \u0647\u0627\u06cc \u0634\u062e\u0635\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0631\u0648\u06cc \u0646\u0648\u0639 \u0628\u0627\u0632\u062f\u06cc\u062f \u06a9\u0646\u0646\u062f\u0647<\/p>\n<\/li>\n<li>\n<p>\u0631\u0627\u0647\u0646\u0645\u0627\u06cc\u06cc \u0628\u0647 \u0628\u062e\u0634 \u0647\u0627\u06cc \u0645\u0631\u0628\u0648\u0637\u0647 \u0631\u0648\u06cc \u0639\u0644\u0627\u06cc\u0642 \u062e\u0627\u0635<\/p>\n<\/li>\n<li>\n<p>\u06cc\u06a9 \u0645\u0642\u062f\u0645\u0647 \u062f\u0648\u0633\u062a\u0627\u0646\u0647 \u0648 \u0645\u06a9\u0627\u0644\u0645\u0647 \u0627\u06cc \u0628\u0627 \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627<\/p>\n<\/li>\n<\/ul>\n<p>\u062f\u0631 <code>WelcomeAgent<\/code> \u0633\u0627\u062f\u0647 \u062a\u0631 \u0627\u0632 \u0628\u0631\u062e\u06cc \u062f\u06cc\u06af\u0631 \u0627\u0632 \u0639\u0648\u0627\u0645\u0644 \u0627\u0633\u062a \u06a9\u0647 \u0645\u0627 \u0628\u0647 \u0622\u0646\u0647\u0627 \u0646\u06af\u0627\u0647 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645 \u0632\u06cc\u0631\u0627 \u062a\u0645\u0631\u06a9\u0632 \u062f\u0627\u0631\u062f \u0631\u0648\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0628\u0631\u062f\u0627\u0634\u062a \u0627\u0648\u0644 \u0645\u062b\u0628\u062a \u0648 \u06a9\u0645\u06a9 \u0628\u0647 \u0628\u0627\u0632\u062f\u06cc\u062f \u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u0628\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc \u0645\u0631\u062a\u0628\u0637 \u0628\u0627 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u0622\u0646\u0647\u0627 \u062f\u0631 \u062d\u0631\u06a9\u062a \u0627\u0633\u062a. \u0627\u0632 \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc LLM \u0639\u0627\u0645\u0644 \u067e\u0627\u06cc\u0647 \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u067e\u0627\u0633\u062e \u0647\u0627\u06cc \u0637\u0628\u06cc\u0639\u06cc \u0648 \u0645\u0646\u0627\u0633\u0628 \u0645\u0646\u0627\u0633\u0628 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u062e\u0648\u0628 \u062e\u0648\u0628 &#8211; API \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0634\u0645\u0627 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u0622\u0645\u0627\u062f\u0647 \u0627\u0633\u062a. \u0634\u0645\u0627 \u0641\u0642\u0637 \u06cc\u06a9 \u067e\u0631\u0648\u0646\u062f\u0647 \u0622\u062e\u0631 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631 \u062f\u0627\u0631\u06cc\u062f \u0631\u0648\u06cc: <code>main.py<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0627\u06cc \u06a9\u0647 \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u0634\u0645\u0627 \u0631\u0627 \u062a\u06a9\u0645\u06cc\u0644 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u067e\u0631\u0648\u0646\u062f\u0647 \u0628\u0633\u06cc\u0627\u0631 \u0628\u0632\u0631\u06af \u0627\u0633\u062a \u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u0646 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0633\u0647 \u0642\u0633\u0645\u062a \u062a\u0642\u0633\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u0645. \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u0647\u0631 \u0628\u062e\u0634 \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0646\u062f\u0647 \u06a9\u067e\u06cc \u0648 \u0686\u0633\u0628\u0627\u0646\u062f\u0647 \u0627\u06cc\u062f. \u0627\u06af\u0631 \u0642\u0628\u0644\u0627\u064b \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0646\u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f \u060c \u0627\u0631\u0632\u0634 \u0646\u0635\u0628 \u067e\u0633\u0648\u0646\u062f \u067e\u0627\u06cc\u062a\u0648\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0622\u0646 \u062f\u0627\u0631\u062f VS Code \u0627\u0632 \u0622\u0646\u062c\u0627 \u06a9\u0647 \u0627\u06cc\u0646 \u0627\u0634\u06a9\u0627\u0644 \u0632\u062f\u0627\u06cc\u06cc \u060c \u0644\u06cc\u0646\u062a \u0648 \u0642\u0627\u0644\u0628 \u0628\u0646\u062f\u06cc \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627\u06cc \u067e\u0627\u06cc\u062a\u0648\u0646 \u0627\u0633\u062a.<\/p>\n<p>\u062e\u0648\u0628 \u060c \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0627\u0648\u0644\u06cc\u0646 \u0642\u0633\u0645\u062a \u0627\u0632 \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u0628\u0631\u0627\u06cc \u0645\u0627 \u0627\u0633\u062a <code>main.py<\/code> \u067e\u0631\u0648\u0646\u062f\u0647:<\/p>\n<pre><code class=\"lang-python\"><span class=\"hljs-keyword\">from<\/span> flask <span class=\"hljs-keyword\">import<\/span> Flask, request, jsonify\n<span class=\"hljs-keyword\">import<\/span> os\n<span class=\"hljs-keyword\">from<\/span> dotenv <span class=\"hljs-keyword\">import<\/span> load_dotenv\n<span class=\"hljs-keyword\">import<\/span> json\n<span class=\"hljs-keyword\">import<\/span> requests\n<span class=\"hljs-keyword\">from<\/span> flask_cors <span class=\"hljs-keyword\">import<\/span> CORS\n\n\nload_dotenv()\n\n\napp = Flask(__name__)\nCORS(app)\n\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">BaseAgent<\/span>:<\/span>\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">__init__<\/span>(<span class=\"hljs-params\">self, name, description<\/span>):<\/span>\n        self.name = name\n        self.description = description\n\n        self.api_key = os.getenv(<span class=\"hljs-string\">\"GROQ_API_KEY\"<\/span>)\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">get_response<\/span>(<span class=\"hljs-params\">self, prompt<\/span>):<\/span>\n\n        <span class=\"hljs-keyword\">try<\/span>:\n            headers = {\n                <span class=\"hljs-string\">\"Authorization\"<\/span>: <span class=\"hljs-string\">f\"Bearer <span class=\"hljs-subst\">{self.api_key}<\/span>\"<\/span>,\n                <span class=\"hljs-string\">\"Content-Type\"<\/span>: <span class=\"hljs-string\">\"application\/json\"<\/span>\n            }\n\n            data = {\n                <span class=\"hljs-string\">\"model\"<\/span>: <span class=\"hljs-string\">\"llama3-8b-8192\"<\/span>,\n                <span class=\"hljs-string\">\"messages\"<\/span>: [\n                    {<span class=\"hljs-string\">\"role\"<\/span>: <span class=\"hljs-string\">\"system\"<\/span>, <span class=\"hljs-string\">\"content\"<\/span>: <span class=\"hljs-string\">f\"You are <span class=\"hljs-subst\">{self.name}<\/span>, <span class=\"hljs-subst\">{self.description}<\/span>. Respond in a helpful, concise, and professional manner.\"<\/span>},\n                    {<span class=\"hljs-string\">\"role\"<\/span>: <span class=\"hljs-string\">\"user\"<\/span>, <span class=\"hljs-string\">\"content\"<\/span>: prompt}\n                ],\n                <span class=\"hljs-string\">\"temperature\"<\/span>: <span class=\"hljs-number\">0.7<\/span>,\n                <span class=\"hljs-string\">\"max_tokens\"<\/span>: <span class=\"hljs-number\">500<\/span>\n            }\n\n            response = requests.post(\n                <span class=\"hljs-string\">\"https:\/\/api.groq.com\/openai\/v1\/chat\/completions\"<\/span>,\n                headers=headers,\n                json=data\n            )\n\n            <span class=\"hljs-keyword\">if<\/span> response.status_code == <span class=\"hljs-number\">200<\/span>:\n                <span class=\"hljs-keyword\">return<\/span> response.json()[<span class=\"hljs-string\">\"choices\"<\/span>][<span class=\"hljs-number\">0<\/span>][<span class=\"hljs-string\">\"message\"<\/span>][<span class=\"hljs-string\">\"content\"<\/span>]\n            <span class=\"hljs-keyword\">else<\/span>:\n                <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-string\">f\"Error: <span class=\"hljs-subst\">{response.status_code}<\/span> - <span class=\"hljs-subst\">{response.text}<\/span>\"<\/span>\n        <span class=\"hljs-keyword\">except<\/span> Exception <span class=\"hljs-keyword\">as<\/span> e:\n            <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-string\">f\"An error occurred: <span class=\"hljs-subst\">{str(e)}<\/span>\"<\/span>\n\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">WelcomeAgent<\/span>(<span class=\"hljs-params\">BaseAgent<\/span>):<\/span>\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">__init__<\/span>(<span class=\"hljs-params\">self<\/span>):<\/span>\n        super().__init__(\n            <span class=\"hljs-string\">\"WelcomeAgent\"<\/span>,\n            <span class=\"hljs-string\">\"a welcome specialist who greets visitors and helps them navigate the portfolio website\"<\/span>\n        )\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">greet<\/span>(<span class=\"hljs-params\">self, visitor_type=None<\/span>):<\/span>\n        <span class=\"hljs-keyword\">if<\/span> visitor_type == <span class=\"hljs-string\">\"employer\"<\/span>:\n            <span class=\"hljs-keyword\">return<\/span> self.get_response(<span class=\"hljs-string\">\"Generate a warm welcome message for an employer visiting a programmer's portfolio website. Suggest they check out the Projects and Career sections.\"<\/span>)\n        <span class=\"hljs-keyword\">elif<\/span> visitor_type == <span class=\"hljs-string\">\"client\"<\/span>:\n            <span class=\"hljs-keyword\">return<\/span> self.get_response(<span class=\"hljs-string\">\"Generate a warm welcome message for a potential client visiting a programmer's portfolio website. Suggest they check out the Services section.\"<\/span>)\n        <span class=\"hljs-keyword\">elif<\/span> visitor_type == <span class=\"hljs-string\">\"fellow_programmer\"<\/span>:\n            <span class=\"hljs-keyword\">return<\/span> self.get_response(<span class=\"hljs-string\">\"Generate a warm welcome message for a fellow programmer visiting a programmer's portfolio website. Suggest they check out the Projects and Research sections.\"<\/span>)\n        <span class=\"hljs-keyword\">else<\/span>:\n            <span class=\"hljs-keyword\">return<\/span> self.get_response(<span class=\"hljs-string\">\"Generate a general welcome message for a visitor to a programmer's portfolio website. Ask if they are an employer, client, or fellow programmer.\"<\/span>)\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">suggest_section<\/span>(<span class=\"hljs-params\">self, interest<\/span>):<\/span>\n        <span class=\"hljs-keyword\">return<\/span> self.get_response(<span class=\"hljs-string\">f\"A visitor to my portfolio website has expressed interest in <span class=\"hljs-subst\">{interest}<\/span>. Suggest which section(s) of the website they should visit based \u0631\u0648\u06cc this interest.\"<\/span>)\n\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">ProjectAgent<\/span>(<span class=\"hljs-params\">BaseAgent<\/span>):<\/span>\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">__init__<\/span>(<span class=\"hljs-params\">self<\/span>):<\/span>\n        super().__init__(\n            <span class=\"hljs-string\">\"ProjectAgent\"<\/span>,\n            <span class=\"hljs-string\">\"a project specialist who provides detailed information about the programmer's projects\"<\/span>\n        )\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">get_project_list<\/span>(<span class=\"hljs-params\">self<\/span>):<\/span>\n        <span class=\"hljs-keyword\">return<\/span> self.get_response(<span class=\"hljs-string\">\"Generate a list of 3-5 impressive software development projects that could be in a programmer's portfolio. Include a brief description for each.\"<\/span>)\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">get_project_details<\/span>(<span class=\"hljs-params\">self, project_id<\/span>):<\/span>\n        project_prompts = {\n            <span class=\"hljs-string\">\"project1\"<\/span>: <span class=\"hljs-string\">\"Describe in detail an e-commerce platform project for a programmer's portfolio. Include technologies used, challenges overcome, and key features.\"<\/span>,\n            <span class=\"hljs-string\">\"project2\"<\/span>: <span class=\"hljs-string\">\"Describe in detail a task management application project for a programmer's portfolio. Include technologies used, challenges overcome, and key features.\"<\/span>,\n            <span class=\"hljs-string\">\"project3\"<\/span>: <span class=\"hljs-string\">\"Describe in detail a data visualization dashboard project for a programmer's portfolio. Include technologies used, challenges overcome, and key features.\"<\/span>\n        }\n\n        prompt = project_prompts.get(\n            project_id, <span class=\"hljs-string\">f\"Describe a project called <span class=\"hljs-subst\">{project_id}<\/span> in detail.\"<\/span>)\n        <span class=\"hljs-keyword\">return<\/span> self.get_response(prompt)\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">answer_technical_question<\/span>(<span class=\"hljs-params\">self, project_id, question<\/span>):<\/span>\n        <span class=\"hljs-keyword\">return<\/span> self.get_response(<span class=\"hljs-string\">f\"Answer this technical question about a project: '<span class=\"hljs-subst\">{question}<\/span>'. The project is <span class=\"hljs-subst\">{project_id}<\/span>.\"<\/span>)\n<\/code><\/pre>\n<p>\u0627\u06cc\u0646 \u0628\u062e\u0634 \u0627\u0632 \u06a9\u062f \u062f\u0627\u0631\u0627\u06cc \u0648\u0627\u0631\u062f\u0627\u062a \u060c \u062a\u0646\u0638\u06cc\u0645 \u0648 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0633\u0644\u0627\u0645 \u0647\u0627\u06cc \u0634\u0645\u0627 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0646\u062f\u0647 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0627\u0633\u062a.<\/p>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0628\u0631\u0627\u06cc \u0642\u0633\u0645\u062a \u062f\u0648\u0645 \u060c \u0627\u06cc\u0646 \u06a9\u062f \u0631\u0627 \u062f\u0631 \u0632\u06cc\u0631 \u0627\u0648\u0644\u06cc\u0646 \u06a9\u062f \u0627\u0636\u0627\u0641\u0647 \u0634\u062f\u0647 \u0628\u0647 \u067e\u0631\u0648\u0646\u062f\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"lang-python\">\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">CareerAgent<\/span>(<span class=\"hljs-params\">BaseAgent<\/span>):<\/span>\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">__init__<\/span>(<span class=\"hljs-params\">self<\/span>):<\/span>\n        super().__init__(\n            <span class=\"hljs-string\">\"CareerAgent\"<\/span>,\n            <span class=\"hljs-string\">\"a career specialist who provides information about the programmer's skills and experience\"<\/span>\n        )\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">get_skills_summary<\/span>(<span class=\"hljs-params\">self<\/span>):<\/span>\n        <span class=\"hljs-keyword\">return<\/span> self.get_response(<span class=\"hljs-string\">\"Generate a comprehensive summary of technical and professional skills for a full-stack developer's portfolio.\"<\/span>)\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">get_experience_summary<\/span>(<span class=\"hljs-params\">self<\/span>):<\/span>\n        <span class=\"hljs-keyword\">return<\/span> self.get_response(<span class=\"hljs-string\">\"Generate a summary of work experience for a full-stack developer with 5+ years of experience.\"<\/span>)\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">assess_job_fit<\/span>(<span class=\"hljs-params\">self, job_description<\/span>):<\/span>\n        <span class=\"hljs-keyword\">return<\/span> self.get_response(<span class=\"hljs-string\">f\"Assess how well a full-stack developer with 5+ years of experience would fit this job description: '<span class=\"hljs-subst\">{job_description}<\/span>'. Highlight matching skills and experience.\"<\/span>)\n\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">ClientAgent<\/span>(<span class=\"hljs-params\">BaseAgent<\/span>):<\/span>\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">__init__<\/span>(<span class=\"hljs-params\">self<\/span>):<\/span>\n        super().__init__(\n            <span class=\"hljs-string\">\"ClientAgent\"<\/span>,\n            <span class=\"hljs-string\">\"a client specialist who provides information about services, pricing, and the client engagement process\"<\/span>\n        )\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">get_services_overview<\/span>(<span class=\"hljs-params\">self<\/span>):<\/span>\n        <span class=\"hljs-keyword\">return<\/span> self.get_response(<span class=\"hljs-string\">\"Generate an overview of services that a freelance full-stack developer might offer to clients.\"<\/span>)\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">get_service_details<\/span>(<span class=\"hljs-params\">self, service_type<\/span>):<\/span>\n        service_prompts = {\n            <span class=\"hljs-string\">\"web_development\"<\/span>: <span class=\"hljs-string\">\"Describe web development services offered by a freelance full-stack developer, including technologies, pricing range, and typical timeline.\"<\/span>,\n            <span class=\"hljs-string\">\"mobile_development\"<\/span>: <span class=\"hljs-string\">\"Describe mobile app development services offered by a freelance full-stack developer, including technologies, pricing range, and typical timeline.\"<\/span>,\n            <span class=\"hljs-string\">\"consulting\"<\/span>: <span class=\"hljs-string\">\"Describe technical consulting services offered by a freelance full-stack developer, including areas of expertise, hourly rate range, and engagement model.\"<\/span>\n        }\n\n        prompt = service_prompts.get(\n            service_type, <span class=\"hljs-string\">f\"Describe <span class=\"hljs-subst\">{service_type}<\/span> services in detail.\"<\/span>)\n        <span class=\"hljs-keyword\">return<\/span> self.get_response(prompt)\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">explain_process<\/span>(<span class=\"hljs-params\">self<\/span>):<\/span>\n        <span class=\"hljs-keyword\">return<\/span> self.get_response(<span class=\"hljs-string\">\"Explain the client engagement process for a freelance full-stack developer, from initial consultation to project delivery.\"<\/span>)\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">generate_proposal<\/span>(<span class=\"hljs-params\">self, project_description<\/span>):<\/span>\n        <span class=\"hljs-keyword\">return<\/span> self.get_response(<span class=\"hljs-string\">f\"Generate a project proposal for this client request: '<span class=\"hljs-subst\">{project_description}<\/span>'. Include estimated timeline, cost range, and approach.\"<\/span>)\n\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">ResearchAgent<\/span>(<span class=\"hljs-params\">BaseAgent<\/span>):<\/span>\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">__init__<\/span>(<span class=\"hljs-params\">self<\/span>):<\/span>\n        super().__init__(\n            <span class=\"hljs-string\">\"ResearchAgent\"<\/span>,\n            <span class=\"hljs-string\">\"a research specialist who provides information about technologies, trends, and industry news\"<\/span>\n        )\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">search_web<\/span>(<span class=\"hljs-params\">self, query<\/span>):<\/span>\n        <span class=\"hljs-keyword\">return<\/span> self.get_response(<span class=\"hljs-string\">f\"Provide information about '<span class=\"hljs-subst\">{query}<\/span>' as if you've just searched the web for the latest information. Include key points and insights.\"<\/span>)\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">compare_technologies<\/span>(<span class=\"hljs-params\">self, tech1, tech2<\/span>):<\/span>\n        <span class=\"hljs-keyword\">return<\/span> self.get_response(<span class=\"hljs-string\">f\"Compare <span class=\"hljs-subst\">{tech1}<\/span> vs <span class=\"hljs-subst\">{tech2}<\/span> in terms of features, performance, use cases, community support, and future prospects.\"<\/span>)\n\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">get_industry_trends<\/span>(<span class=\"hljs-params\">self<\/span>):<\/span>\n        <span class=\"hljs-keyword\">return<\/span> self.get_response(<span class=\"hljs-string\">\"Describe current trends in software development and technology that are important for developers to be aware of.\"<\/span>)\n\n\nwelcome_agent = WelcomeAgent()\nproject_agent = ProjectAgent()\ncareer_agent = CareerAgent()\nclient_agent = ClientAgent()\nresearch_agent = ResearchAgent()\n\n\n<span class=\"hljs-meta\">@app.route('\/static\/images\/default_avatar.png')<\/span>\n<span class=\"hljs-meta\">@app.route('\/static\/images\/default_project.jpg')<\/span>\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">block_default_images<\/span>():<\/span>\n\n    response = app.make_response(\n        <span class=\"hljs-string\">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;'<\/span>)\n    response.headers[<span class=\"hljs-string\">'Content-Type'<\/span>] = <span class=\"hljs-string\">'image\/gif'<\/span>\n\n    response.headers[<span class=\"hljs-string\">'Cache-Control'<\/span>] = <span class=\"hljs-string\">'public, max-age=31536000'<\/span>\n    response.headers[<span class=\"hljs-string\">'Expires'<\/span>] = <span class=\"hljs-string\">'Thu, 31 Dec 2037 23:59:59 GMT'<\/span>\n    <span class=\"hljs-keyword\">return<\/span> response\n\n\n<span class=\"hljs-meta\">@app.route('\/api\/welcome', methods=['POST'])<\/span>\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">welcome_agent_endpoint<\/span>():<\/span>\n    data = request.json\n    message = data.get(<span class=\"hljs-string\">'message'<\/span>, <span class=\"hljs-string\">''<\/span>)\n\n    visitor_type = <span class=\"hljs-literal\">None<\/span>\n    <span class=\"hljs-keyword\">if<\/span> <span class=\"hljs-string\">'employer'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower():\n        visitor_type = <span class=\"hljs-string\">'employer'<\/span>\n    <span class=\"hljs-keyword\">elif<\/span> <span class=\"hljs-string\">'client'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower():\n        visitor_type = <span class=\"hljs-string\">'client'<\/span>\n    <span class=\"hljs-keyword\">elif<\/span> <span class=\"hljs-string\">'programmer'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower() <span class=\"hljs-keyword\">or<\/span> <span class=\"hljs-string\">'developer'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower():\n        visitor_type = <span class=\"hljs-string\">'fellow_programmer'<\/span>\n\n    <span class=\"hljs-keyword\">if<\/span> <span class=\"hljs-string\">'interest'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower() <span class=\"hljs-keyword\">or<\/span> <span class=\"hljs-string\">'looking for'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower():\n\n        interest = message.replace(<span class=\"hljs-string\">'interest'<\/span>, <span class=\"hljs-string\">''<\/span>).replace(\n            <span class=\"hljs-string\">'looking for'<\/span>, <span class=\"hljs-string\">''<\/span>).strip()\n        response = welcome_agent.suggest_section(interest)\n    <span class=\"hljs-keyword\">else<\/span>:\n        response = welcome_agent.greet(visitor_type)\n\n    <span class=\"hljs-keyword\">return<\/span> jsonify({<span class=\"hljs-string\">'response'<\/span>: response})\n<\/code><\/pre>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634 \u0627\u0632 \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u0634\u0645\u0627 \u060c \u067e\u0627\u0633\u062e \u0647\u0627\u06cc \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u0648 \u06cc\u06a9 \u0645\u0633\u06cc\u0631 API \u062e\u0648\u0634 \u0622\u0645\u062f\u06cc\u062f \u062f\u0627\u0631\u06cc\u062f.<\/p>\n<p>\u062f\u0631 \u0622\u062e\u0631 \u060c \u06a9\u062f \u0631\u0627 \u0628\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0627\u06cc\u0646 \u0642\u0637\u0639\u0647 \u0646\u0647\u0627\u06cc\u06cc \u062f\u0631 \u067e\u0627\u06cc\u0627\u0646 \u062a\u06a9\u0645\u06cc\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"lang-python\">\n<span class=\"hljs-meta\">@app.route('\/api\/project', methods=['POST'])<\/span>\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">project_agent_endpoint<\/span>():<\/span>\n    data = request.json\n    message = data.get(<span class=\"hljs-string\">'message'<\/span>, <span class=\"hljs-string\">''<\/span>)\n\n    project_id = <span class=\"hljs-literal\">None<\/span>\n    <span class=\"hljs-keyword\">if<\/span> <span class=\"hljs-string\">'e-commerce'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower() <span class=\"hljs-keyword\">or<\/span> <span class=\"hljs-string\">'ecommerce'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower():\n        project_id = <span class=\"hljs-string\">'project1'<\/span>\n    <span class=\"hljs-keyword\">elif<\/span> <span class=\"hljs-string\">'task'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower() <span class=\"hljs-keyword\">or<\/span> <span class=\"hljs-string\">'management'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower():\n        project_id = <span class=\"hljs-string\">'project2'<\/span>\n    <span class=\"hljs-keyword\">elif<\/span> <span class=\"hljs-string\">'data'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower() <span class=\"hljs-keyword\">or<\/span> <span class=\"hljs-string\">'visualization'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower() <span class=\"hljs-keyword\">or<\/span> <span class=\"hljs-string\">'dashboard'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower():\n        project_id = <span class=\"hljs-string\">'project3'<\/span>\n\n    <span class=\"hljs-keyword\">if<\/span> project_id <span class=\"hljs-keyword\">and<\/span> (<span class=\"hljs-string\">'tell me more'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower() <span class=\"hljs-keyword\">or<\/span> <span class=\"hljs-string\">'details'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower()):\n        response = project_agent.get_project_details(project_id)\n    <span class=\"hljs-keyword\">elif<\/span> <span class=\"hljs-string\">'list'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower() <span class=\"hljs-keyword\">or<\/span> <span class=\"hljs-string\">'all projects'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower():\n        response = project_agent.get_project_list()\n    <span class=\"hljs-keyword\">elif<\/span> project_id:\n\n        response = project_agent.answer_technical_question(project_id, message)\n    <span class=\"hljs-keyword\">else<\/span>:\n\n        response = project_agent.get_response(\n            <span class=\"hljs-string\">f\"The user asked: '<span class=\"hljs-subst\">{message}<\/span>'. Respond as if you are a project specialist for a portfolio website. \"<\/span>\n            <span class=\"hljs-string\">\"If they're asking about a specific project, suggest they mention one of the projects: \"<\/span>\n            <span class=\"hljs-string\">\"E-commerce Platform, Task Management App, or Data Visualization Dashboard.\"<\/span>\n        )\n\n    <span class=\"hljs-keyword\">return<\/span> jsonify({<span class=\"hljs-string\">'response'<\/span>: response})\n\n\n<span class=\"hljs-meta\">@app.route('\/api\/career', methods=['POST'])<\/span>\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">career_agent_endpoint<\/span>():<\/span>\n    data = request.json\n    message = data.get(<span class=\"hljs-string\">'message'<\/span>, <span class=\"hljs-string\">''<\/span>)\n\n    <span class=\"hljs-keyword\">if<\/span> <span class=\"hljs-string\">'skills'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower():\n        response = career_agent.get_skills_summary()\n    <span class=\"hljs-keyword\">elif<\/span> <span class=\"hljs-string\">'experience'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower() <span class=\"hljs-keyword\">or<\/span> <span class=\"hljs-string\">'work history'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower():\n        response = career_agent.get_experience_summary()\n    <span class=\"hljs-keyword\">elif<\/span> <span class=\"hljs-string\">'job'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower() <span class=\"hljs-keyword\">or<\/span> <span class=\"hljs-string\">'position'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower() <span class=\"hljs-keyword\">or<\/span> <span class=\"hljs-string\">'role'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower():\n\n        response = career_agent.assess_job_fit(message)\n    <span class=\"hljs-keyword\">else<\/span>:\n\n        response = career_agent.get_response(\n            <span class=\"hljs-string\">f\"The user asked: '<span class=\"hljs-subst\">{message}<\/span>'. Respond as if you are a career specialist for a portfolio website. \"<\/span>\n            <span class=\"hljs-string\">\"Suggest they ask about skills, experience, or job fit assessment.\"<\/span>\n        )\n\n    <span class=\"hljs-keyword\">return<\/span> jsonify({<span class=\"hljs-string\">'response'<\/span>: response})\n\n\n<span class=\"hljs-meta\">@app.route('\/api\/client', methods=['POST'])<\/span>\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">client_agent_endpoint<\/span>():<\/span>\n    data = request.json\n    message = data.get(<span class=\"hljs-string\">'message'<\/span>, <span class=\"hljs-string\">''<\/span>)\n\n    <span class=\"hljs-keyword\">if<\/span> <span class=\"hljs-string\">'services'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower() <span class=\"hljs-keyword\">or<\/span> <span class=\"hljs-string\">'offerings'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower():\n        response = client_agent.get_services_overview()\n    <span class=\"hljs-keyword\">elif<\/span> <span class=\"hljs-string\">'web'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower() <span class=\"hljs-keyword\">and<\/span> <span class=\"hljs-string\">'development'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower():\n        response = client_agent.get_service_details(<span class=\"hljs-string\">'web_development'<\/span>)\n    <span class=\"hljs-keyword\">elif<\/span> <span class=\"hljs-string\">'mobile'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower() <span class=\"hljs-keyword\">and<\/span> <span class=\"hljs-string\">'development'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower():\n        response = client_agent.get_service_details(<span class=\"hljs-string\">'mobile_development'<\/span>)\n    <span class=\"hljs-keyword\">elif<\/span> <span class=\"hljs-string\">'consulting'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower() <span class=\"hljs-keyword\">or<\/span> <span class=\"hljs-string\">'technical consulting'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower():\n        response = client_agent.get_service_details(<span class=\"hljs-string\">'consulting'<\/span>)\n    <span class=\"hljs-keyword\">elif<\/span> <span class=\"hljs-string\">'process'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower() <span class=\"hljs-keyword\">or<\/span> <span class=\"hljs-string\">'how does it work'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower():\n        response = client_agent.explain_process()\n    <span class=\"hljs-keyword\">elif<\/span> <span class=\"hljs-string\">'proposal'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower() <span class=\"hljs-keyword\">or<\/span> <span class=\"hljs-string\">'quote'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower() <span class=\"hljs-keyword\">or<\/span> <span class=\"hljs-string\">'estimate'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower():\n\n        response = client_agent.generate_proposal(message)\n    <span class=\"hljs-keyword\">else<\/span>:\n\n        response = client_agent.get_response(\n            <span class=\"hljs-string\">f\"The user asked: '<span class=\"hljs-subst\">{message}<\/span>'. Respond as if you are a client specialist for a portfolio website. \"<\/span>\n            <span class=\"hljs-string\">\"Suggest they ask about services, the client engagement process, or request a proposal.\"<\/span>\n        )\n\n    <span class=\"hljs-keyword\">return<\/span> jsonify({<span class=\"hljs-string\">'response'<\/span>: response})\n\n\n<span class=\"hljs-meta\">@app.route('\/api\/research', methods=['POST'])<\/span>\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">research_agent_endpoint<\/span>():<\/span>\n    data = request.json\n    message = data.get(<span class=\"hljs-string\">'message'<\/span>, <span class=\"hljs-string\">''<\/span>)\n\n    <span class=\"hljs-keyword\">if<\/span> <span class=\"hljs-string\">'compare'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower() <span class=\"hljs-keyword\">and<\/span> (<span class=\"hljs-string\">'vs'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower() <span class=\"hljs-keyword\">or<\/span> <span class=\"hljs-string\">'versus'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower()):\n\n        tech_parts = message.lower().replace(<span class=\"hljs-string\">'compare'<\/span>, <span class=\"hljs-string\">''<\/span>).replace(\n            <span class=\"hljs-string\">'vs'<\/span>, <span class=\"hljs-string\">' '<\/span>).replace(<span class=\"hljs-string\">'versus'<\/span>, <span class=\"hljs-string\">' '<\/span>).split()\n        tech1 = tech_parts[<span class=\"hljs-number\">0<\/span>] <span class=\"hljs-keyword\">if<\/span> len(tech_parts) &gt; <span class=\"hljs-number\">0<\/span> <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-string\">''<\/span>\n        tech2 = tech_parts[<span class=\"hljs-number\">-1<\/span>] <span class=\"hljs-keyword\">if<\/span> len(tech_parts) &gt; <span class=\"hljs-number\">1<\/span> <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-string\">''<\/span>\n        response = research_agent.compare_technologies(tech1, tech2)\n    <span class=\"hljs-keyword\">elif<\/span> <span class=\"hljs-string\">'trends'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower() <span class=\"hljs-keyword\">or<\/span> <span class=\"hljs-string\">'industry'<\/span> <span class=\"hljs-keyword\">in<\/span> message.lower():\n        response = research_agent.get_industry_trends()\n    <span class=\"hljs-keyword\">else<\/span>:\n        response = research_agent.search_web(message)\n\n    <span class=\"hljs-keyword\">return<\/span> jsonify({<span class=\"hljs-string\">'response'<\/span>: response})\n\n\n<span class=\"hljs-keyword\">if<\/span> __name__ == <span class=\"hljs-string\">'__main__'<\/span>:\n\n    app.config[<span class=\"hljs-string\">'SEND_FILE_MAX_AGE_DEFAULT'<\/span>] = <span class=\"hljs-number\">0<\/span>\n    app.config[<span class=\"hljs-string\">'TEMPLATES_AUTO_RELOAD'<\/span>] = <span class=\"hljs-literal\">True<\/span>   <span class=\"hljs-comment\"># Ensure templates reload<\/span>\n\n<span class=\"hljs-meta\">    @app.after_request<\/span>\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">add_header<\/span>(<span class=\"hljs-params\">response<\/span>):<\/span>\n        response.headers[<span class=\"hljs-string\">'Cache-Control'<\/span>] = <span class=\"hljs-string\">'no-store, no-cache, must-revalidate, max-age=0'<\/span>\n        response.headers[<span class=\"hljs-string\">'Pragma'<\/span>] = <span class=\"hljs-string\">'no-cache'<\/span>\n        response.headers[<span class=\"hljs-string\">'Expires'<\/span>] = <span class=\"hljs-string\">'0'<\/span>\n        <span class=\"hljs-keyword\">return<\/span> response\n\n    app.run(host=<span class=\"hljs-string\">'0.0.0.0'<\/span>, port=<span class=\"hljs-number\">5001<\/span>, debug=<span class=\"hljs-literal\">True<\/span>,\n            use_reloader=<span class=\"hljs-literal\">False<\/span>, threaded=<span class=\"hljs-literal\">True<\/span>)\n<\/code><\/pre>\n<p>\u062e\u0648\u0628 \u060c \u0627\u06af\u0631 \u067e\u0631\u0648\u0646\u062f\u0647 \u0634\u0645\u0627 \u062e\u0637\u0627\u06cc\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f \u060c \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u0622\u0646\u0647\u0627 \u0646\u0627\u0634\u06cc \u0627\u0632 \u062a\u0648\u0631\u0641\u062a\u06af\u06cc \u067e\u0627\u06cc\u062a\u0648\u0646 \u0647\u0633\u062a\u0646\u062f. \u0627\u0645\u06cc\u062f\u0648\u0627\u0631\u0645 \u06a9\u0647 \u0642\u0627\u0644\u0628 \u0628\u0646\u062f\u06cc \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0631\u0637\u0631\u0641 \u0646\u06a9\u0646\u062f.<\/p>\n<p>\u067e\u0631\u0648\u0646\u062f\u0647 \u0627\u06a9\u0646\u0648\u0646 \u06a9\u0627\u0645\u0644 \u0627\u0633\u062a \u0648 \u0634\u0645\u0627 \u0628\u0642\u06cc\u0647 \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc AI API \u062e\u0648\u062f \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f.<\/p>\n<h3 id=\"heading-running-our-python-backend\"><span class=\"ez-toc-section\" id=\"%d8%a8%d8%a7%da%a9%d8%aa%d8%b1%db%8c_%d9%be%d8%a7%db%8c%d8%aa%d9%88%d9%86_%d9%85%d8%a7_%d8%b1%d8%a7_%d8%a7%d8%ac%d8%b1%d8%a7_%d9%85%db%8c_%da%a9%d9%86%db%8c%d9%85\"><\/span>\u0628\u0627\u06a9\u062a\u0631\u06cc \u067e\u0627\u06cc\u062a\u0648\u0646 \u0645\u0627 \u0631\u0627 \u0627\u062c\u0631\u0627 \u0645\u06cc \u06a9\u0646\u06cc\u0645<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062a\u0645\u0627\u0645 \u0622\u0646\u0686\u0647 \u06a9\u0647 \u0628\u0627\u0642\u06cc \u0645\u0627\u0646\u062f\u0647 \u0627\u0633\u062a \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0633\u0631\u0648\u0631 Flask \u062e\u0648\u062f \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f \u0648 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646 \u06af\u06cc\u0631\u06cc \u0648 \u0627\u062c\u0631\u0627\u06cc \u0622\u0646 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f. \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0627 \u0627\u06cc\u0646 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u062c\u0631\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f <code>venv<\/code> \u067e\u0648\u0634\u0647:<\/p>\n<pre><code class=\"lang-shell\">python3 main.py\n<\/code><\/pre>\n<p>\u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0634\u0645\u0627 \u0627\u06a9\u0646\u0648\u0646 \u0628\u0627\u06cc\u062f \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 \u0628\u0627\u0634\u062f \u0631\u0648\u06cc http:\/\/127.0.0.1:5001\/. \u0627\u06af\u0631 \u0628\u0647 page \u062e\u0637\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u0646 \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f:<\/p>\n<pre><code class=\"lang-markdown\">Not Found\n\nThe requested URL was not found \u0631\u0648\u06cc the server. If you entered the URL manually please check your spelling and try again.\n<\/code><\/pre>\n<p>\u0627\u06cc\u0646 \u0627\u0646\u062a\u0638\u0627\u0631 \u0645\u06cc \u0631\u0648\u062f \u060c \u0632\u06cc\u0631\u0627 \u0627\u06af\u0631 \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f \u060c \u0645\u062a\u0648\u062c\u0647 \u062e\u0648\u0627\u0647\u06cc\u062f \u0634\u062f \u06a9\u0647 \u0647\u06cc\u0686 \u0645\u0633\u06cc\u0631 \u062f\u0631\u06cc\u0627\u0641\u062a \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f \u060c \u0641\u0642\u0637 \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u067e\u0633\u062a \u0631\u0627 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u062f\u06cc\u062f\u0646 \u0622\u0646\u0647\u0627 \u062f\u0631 \u062d\u0627\u0644 \u06a9\u0627\u0631 \u060c \u0628\u0627\u06cc\u062f \u0627\u0632 \u06cc\u06a9 \u0645\u0634\u062a\u0631\u06cc HTTP \u0645\u0627\u0646\u0646\u062f Postman \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u06af\u0632\u06cc\u0646\u0647 \u062f\u06cc\u06af\u0631 \u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u062e\u06cc \u0627\u0633\u062a <code>curl<\/code> \u062f\u0633\u062a\u0648\u0631\u0627\u062a\u06cc \u06a9\u0647 \u06cc\u06a9 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u067e\u0633\u062a \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u06a9\u0646\u0646\u062f \u060c \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f terminal\u0628\u0634\u0631 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 <code>curl<\/code> \u0632\u06cc\u0631\u0627 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u06a9\u0645\u062a\u0631\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f. \u0634\u0645\u0627 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u06a9\u067e\u06cc \u0648 \u0686\u0633\u0628\u0627\u0646\u062f\u0646 \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u062f\u0627\u0631\u06cc\u062f.<\/p>\n<p>\u0647\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u067e\u0633\u062a \u062f\u0642\u06cc\u0642\u0627\u064b \u0627\u0632 \u06cc\u06a9 \u062a\u0645\u0627\u0633 API \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0631\u0648\u06cc Groq Cloud \u0628\u0631\u0627\u06cc \u06a9\u0644\u06cc\u062f API \u062e\u0648\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f https: \/\/console.groq.com\/\u06a9\u0644\u06cc\u062f\u0647\u0627. \u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0631\u0627\u06cc\u06af\u0627\u0646 \u0627\u0633\u062a \u0627\u0645\u0627 \u0645\u062d\u062f\u0648\u062f\u06cc\u062a \u0647\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631 \u0645\u0633\u062a\u0646\u062f\u0627\u062a \u0622\u0646\u0647\u0627 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f \u0631\u0648\u06cc \u0645\u062d\u062f\u0648\u062f\u06cc\u062a \u0646\u0631\u062e<\/p>\n<p>\u0645\u0646 \u0628\u0631\u062e\u06cc \u0627\u0632 \u062f\u0633\u062a\u0648\u0631\u0627\u062a CURL \u0646\u0645\u0648\u0646\u0647 \u0631\u0627 \u062f\u0631 \u0632\u06cc\u0631 \u0627\u0631\u0627\u0626\u0647 \u062f\u0627\u062f\u0647 \u0627\u0645 &#8211; \u0641\u0642\u0637 \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 \u062e\u0648\u062f \u06a9\u067e\u06cc \u06a9\u0631\u062f\u0647 \u0648 \u0686\u0633\u0628\u0627\u0646\u062f\u0647 \u0627\u06cc\u062f terminal \u0648 \u0636\u0631\u0628\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f \u060c \u0648 \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u067e\u06cc\u0627\u0645 \u067e\u0627\u0633\u062e \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<p><strong>1. \u0622\u0632\u0645\u0627\u06cc\u0634 \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc \u0639\u0627\u0645\u0644 \u062e\u0648\u0634 \u0622\u0645\u062f\u06cc\u062f<\/strong><\/p>\n<pre><code class=\"lang-shell\">curl -X POST http:\/\/localhost:5001\/api\/welcome \\\n  -H \"Content-Type: application\/json\" \\\n  -d '{\"message\": \"I am an employer looking for a skilled developer\"}'\n<\/code><\/pre>\n<p><strong>2. \u0622\u0632\u0645\u0627\u06cc\u0634 \u0646\u0642\u0637\u0647 \u0627\u0646\u062a\u0647\u0627\u06cc\u06cc \u0639\u0627\u0645\u0644 \u067e\u0631\u0648\u0698\u0647<\/strong><\/p>\n<pre><code class=\"lang-shell\">curl -X POST http:\/\/localhost:5001\/api\/project \\\n  -H \"Content-Type: application\/json\" \\\n  -d '{\"message\": \"Tell me more about the e-commerce project\"}'\n<\/code><\/pre>\n<p><strong>3. \u062a\u0633\u062a \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc \u0639\u0627\u0645\u0644 \u0634\u063a\u0644\u06cc<\/strong><\/p>\n<pre><code class=\"lang-shell\">curl -X POST http:\/\/localhost:5001\/api\/career \\\n  -H \"Content-Type: application\/json\" \\\n  -d '{\"message\": \"What skills do you have?\"}'\n<\/code><\/pre>\n<p><strong>4. \u0622\u0632\u0645\u0627\u06cc\u0634 \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc \u0639\u0627\u0645\u0644 \u0645\u0634\u062a\u0631\u06cc<\/strong><\/p>\n<pre><code class=\"lang-shell\">curl -X POST http:\/\/localhost:5001\/api\/client \\\n  -H \"Content-Type: application\/json\" \\\n  -d '{\"message\": \"What services do you offer?\"}'\n<\/code><\/pre>\n<p><strong>5. \u0622\u0632\u0645\u0627\u06cc\u0634 \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc \u0646\u0645\u0627\u06cc\u0646\u062f\u0647 \u062a\u062d\u0642\u06cc\u0642<\/strong><\/p>\n<pre><code class=\"lang-shell\">curl -X POST http:\/\/localhost:5001\/api\/research \\\n  -H \"Content-Type: application\/json\" \\\n  -d '{\"message\": \"What are the current trends in web development?\"}'\n<\/code><\/pre>\n<h2 id=\"heading-building-our-react-frontend\"><span class=\"ez-toc-section\" id=\"%d8%b3%d8%a7%d8%ae%d8%aa_%d8%ac%d8%a8%d9%87%d9%87_react_%d9%85%d8%a7\"><\/span>\u0633\u0627\u062e\u062a \u062c\u0628\u0647\u0647 React \u0645\u0627<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0627 \u0628\u0647 \u0646\u06cc\u0645\u0647 \u0631\u0627\u0647 \u0631\u0633\u06cc\u062f\u0647 \u0627\u06cc\u0645 \u0648 \u062a\u0645\u0627\u0645 \u0622\u0646\u0686\u0647 \u0628\u0627\u0642\u06cc \u0645\u0627\u0646\u062f\u0647 \u0627\u0633\u062a \u0633\u0627\u062e\u062a \u062c\u0644\u0648\u06cc \u0634\u0645\u0627 \u0627\u0633\u062a. \u0645\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 VITE \u0642\u0633\u0645\u062a \u062c\u0644\u0648\u06cc\u06cc \u0631\u0627 \u0645\u06cc \u0633\u0627\u0632\u06cc\u0645 \u0648 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0634\u0634 \u0635\u0641\u062d\u0647 \u062e\u0648\u0627\u0647\u062f \u062f\u0627\u0634\u062a. \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0627\u06a9\u0646\u0648\u0646 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0647\u0633\u062a\u06cc\u062f root \u067e\u0648\u0634\u0647 \u0628\u0631\u0627\u06cc <code>ai-agent-app<\/code> \u067e\u0631\u0648\u0698\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0633\u0631\u0648\u0631 Python \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f \u0632\u06cc\u0631\u0627 \u0642\u0633\u0645\u062a \u062c\u0644\u0648\u06cc \u0634\u0645\u0627 \u0642\u0635\u062f \u062f\u0627\u0631\u062f \u0628\u0647 \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc API \u06a9\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f \u0645\u062a\u0635\u0644 \u0634\u0648\u062f.<\/p>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u067e\u0631\u0648\u0698\u0647 React \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Vite \u060c Tailwind CSS \u060c React-Router \u0648 Axios \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f \u060c \u06a9\u0647 \u0645\u0627 \u0628\u0647 \u0622\u0646 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645 page \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u0648 \u0648\u0627\u06a9\u0634\u06cc:<\/p>\n<pre><code class=\"lang-shell\">npm create vite@latest frontend -- --template react\ncd frontend\nnpm install -D tailwindcss@3 postcss autoprefixer react-router axios\nnpx tailwindcss init -p\nnpm install\n<\/code><\/pre>\n<p>\u0639\u0627\u0644\u06cc \u060c \u0627\u06a9\u0646\u0648\u0646 \u0628\u0627 \u0622\u0646 \u0628\u0633\u062a\u0647 \u0647\u0627 \u0646\u0635\u0628 \u0634\u062f\u0647 \u0648 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u0645\u0627 \u062a\u0646\u0638\u06cc\u0645 \u0634\u062f\u0647 \u0627\u0633\u062a \u060c \u0645\u0627 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u0622\u0645\u0627\u062f\u0647 \u0634\u0631\u0648\u0639 \u0647\u0633\u062a\u06cc\u0645 \u0631\u0648\u06cc \u067e\u0627\u06cc\u0647 \u06a9\u062f \u0627\u0645\u0627 \u0642\u0628\u0644 \u0627\u0632 \u0622\u0646 \u060c \u0645\u0627 \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u06cc\u06af\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0642\u0635\u062f \u062f\u0627\u0631\u062f \u0647\u0645\u0647 \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627 \u0648 \u067e\u0648\u0634\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u0645\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u062e\u06cc\u0644\u06cc \u0633\u0631\u06cc\u0639\u062a\u0631 \u0627\u0632 \u0627\u0646\u062c\u0627\u0645 \u0647\u0645\u0647 \u0622\u0646\u0647\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062f\u0633\u062a\u06cc \u0627\u0633\u062a.<\/p>\n<p>\u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 \u0631\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u067e\u0648\u0634\u0647 \u062c\u0644\u0648\u06cc \u0622\u0646 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"lang-shell\">mkdir -p src\/components src\/pages\ntouch src\/style.css src\/components\/{Chat,Footer,Layout,Navbar}.jsx\ntouch src\/pages\/{Career,Contact,Home,Projects,Research,Services}.jsx\n<\/code><\/pre>\n<p>Frontend React \u0645\u0627 \u0627\u06a9\u0646\u0648\u0646 \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0631\u0648\u0698\u0647 \u0645\u0627\u0646\u0646\u062f \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0628\u0627\u0634\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegaar.com\/blog\/wp-content\/uploads\/2025\/04\/9940901d-bd7a-49dd-a18b-ab3edf5e3714.png\" alt=\"\u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0631\u0648\u0698\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 AI \u0639\u0627\u0645\u0644 AI\" class=\"image--center mx-auto\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0645\u0627 \u0627\u06a9\u0646\u0648\u0646 \u0622\u0645\u0627\u062f\u0647 \u0634\u0631\u0648\u0639 \u0628\u0647 \u0646\u0648\u0634\u062a\u0646 \u06a9\u062f \u0647\u0633\u062a\u06cc\u0645.<\/p>\n<p>\u0628\u0627\u0644\u0627 \u0627\u0648\u0644 \u0627\u0633\u062a <code>tailwind.config.js<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0627\u06cc\u0646 \u062a\u0646\u0647\u0627 \u067e\u0631\u0648\u0646\u062f\u0647 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u06a9\u0627\u0631 \u06a9\u0646\u06cc\u062f \u0631\u0648\u06cc\u060c \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u06cc\u06af\u0631\u0627\u0646 \u0627\u0632 \u0642\u0628\u0644 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u062e\u0648\u062f \u0631\u0627 \u062f\u0627\u0631\u0646\u062f. \u062a\u0645\u0627\u0645 \u06a9\u062f \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u067e\u0631\u0648\u0646\u062f\u0647 \u0631\u0627 \u0628\u0627 \u06a9\u062f \u0632\u06cc\u0631 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"lang-javascript\"><span class=\"hljs-comment\">\/** <span class=\"hljs-doctag\">@type <span class=\"hljs-type\">{import('tailwindcss').Config}<\/span> <\/span>*\/<\/span>\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n  <span class=\"hljs-attr\">content<\/span>: [<span class=\"hljs-string\">'.\/index.html'<\/span>, <span class=\"hljs-string\">'.\/src\/**\/*.{js,ts,jsx,tsx}'<\/span>],\n  <span class=\"hljs-attr\">theme<\/span>: {\n    <span class=\"hljs-attr\">extend<\/span>: {},\n  },\n  <span class=\"hljs-attr\">plugins<\/span>: [],\n};\n<\/code><\/pre>\n<p>\u062a\u0645\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u062f \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0645\u0633\u06cc\u0631\u0647\u0627 \u0631\u0627 \u0628\u0647 \u062a\u0645\u0627\u0645 \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627\u06cc \u0627\u0644\u06af\u0648\u06cc \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u062e\u0648\u0628 \u060c \u0628\u0639\u062f \u060c \u0634\u0645\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0627\u0631 \u06a9\u0646\u06cc\u062f \u0631\u0648\u06cc \u0633\u0628\u06a9 \u0647\u0627\u06cc \u0634\u0645\u0627 \u0648 css tailwind. \u0633\u0647 \u067e\u0631\u0648\u0646\u062f\u0647 CSS \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u0631\u0648\u06cc: <code>App.css<\/code>\u0628\u0627 <code>index.css<\/code>\u0648\u062a <code>style.css<\/code>\u0628\u0634\u0631<\/p>\n<p>\u0627\u0648\u0644 <code>App.css<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u062a\u0645\u0627\u0645 \u06a9\u062f \u0631\u0627 \u0628\u0627 \u0627\u06cc\u0646 \u06a9\u062f \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"lang-css\"><span class=\"hljs-selector-id\">#root<\/span> {\n  <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n  <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">text-align<\/span>: left;\n  <span class=\"hljs-attribute\">display<\/span>: flex;\n  <span class=\"hljs-attribute\">flex-direction<\/span>: column;\n  <span class=\"hljs-attribute\">min-height<\/span>: <span class=\"hljs-number\">100vh<\/span>;\n}\n\n<span class=\"hljs-selector-tag\">main<\/span> {\n  <span class=\"hljs-attribute\">flex<\/span>: <span class=\"hljs-number\">1<\/span>;\n}\n<\/code><\/pre>\n<p>\u0645\u0627 \u0641\u0642\u0637 \u0686\u0646\u062f \u0633\u0628\u06a9 \u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u0627\u0633\u0627\u0633\u06cc \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u062f\u0627\u0631\u06cc\u0645 <code>root<\/code> \u0648\u062a <code>main<\/code>\u0628\u0634\u0631<\/p>\n<p>\u0628\u0639\u062f\u06cc \u0627\u0633\u062a <code>index.css<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u062f\u0631 \u0632\u06cc\u0631 \u06a9\u062f \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0634\u0645\u0627 \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u062f \u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0646\u062f\u0647 \u0628\u0627 \u0622\u0646 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"lang-css\"><span class=\"hljs-keyword\">@tailwind<\/span> base;\n<span class=\"hljs-keyword\">@tailwind<\/span> components;\n<span class=\"hljs-keyword\">@tailwind<\/span> utilities;\n\n<span class=\"hljs-selector-pseudo\">:root<\/span> {\n  <span class=\"hljs-attribute\">font-family<\/span>: system-ui, Avenir, Helvetica, Arial, sans-serif;\n  <span class=\"hljs-attribute\">font-synthesis<\/span>: none;\n  <span class=\"hljs-attribute\">text-rendering<\/span>: optimizeLegibility;\n  <span class=\"hljs-attribute\">-webkit-font-smoothing<\/span>: antialiased;\n  <span class=\"hljs-attribute\">-moz-osx-font-smoothing<\/span>: grayscale;\n}\n\n<span class=\"hljs-keyword\">@layer<\/span> components {\n  <span class=\"hljs-selector-class\">.chat-container<\/span> {\n    @apply w-full h-96 flex flex-col;\n  }\n\n  <span class=\"hljs-selector-class\">.chat-messages<\/span> {\n    @apply flex-1 overflow-y-auto p-4;\n  }\n\n  <span class=\"hljs-selector-class\">.message<\/span> {\n    @apply flex mb-4;\n  }\n\n  <span class=\"hljs-selector-class\">.user-message<\/span> {\n    @apply justify-end;\n  }\n\n  <span class=\"hljs-selector-class\">.agent-message<\/span> {\n    @apply justify-start;\n  }\n\n  <span class=\"hljs-selector-class\">.message-avatar<\/span> {\n    @apply flex-shrink-0 mr-2;\n  }\n\n  <span class=\"hljs-selector-class\">.avatar-placeholder<\/span> {\n    @apply w-10 h-10 rounded-full bg-blue-500 text-white flex items-center justify-center font-bold;\n  }\n\n  <span class=\"hljs-selector-class\">.message-content<\/span> {\n    @apply p-3 rounded-lg max-w-xs <span class=\"hljs-attribute\">sm<\/span>:max-w-sm md:max-w-md;\n  }\n\n  <span class=\"hljs-selector-class\">.user-message<\/span> <span class=\"hljs-selector-class\">.message-content<\/span> {\n    @apply bg-blue-500 text-white;\n  }\n\n  <span class=\"hljs-selector-class\">.agent-message<\/span> <span class=\"hljs-selector-class\">.message-content<\/span> {\n    @apply bg-gray-200 text-gray-800;\n  }\n\n  <span class=\"hljs-selector-class\">.chat-input-container<\/span> {\n    @apply p-4 border-t border-gray-200;\n  }\n\n  <span class=\"hljs-selector-class\">.chat-input-group<\/span> {\n    @apply flex;\n  }\n\n  <span class=\"hljs-selector-class\">.chat-input<\/span> {\n    @apply flex-1 border border-gray-300 rounded-l-lg p-2 <span class=\"hljs-attribute\">focus<\/span>:outline-none focus:ring-<span class=\"hljs-number\">2<\/span> focus:ring-blue-<span class=\"hljs-number\">500<\/span>;\n  }\n\n  <span class=\"hljs-selector-class\">.chat-send-button<\/span> {\n    @apply bg-blue-500 text-white px-4 py-2 rounded-r-lg <span class=\"hljs-attribute\">hover<\/span>:bg-blue-<span class=\"hljs-number\">600<\/span> focus:outline-none focus:ring-<span class=\"hljs-number\">2<\/span> focus:ring-blue-<span class=\"hljs-number\">500<\/span>;\n  }\n\n  <span class=\"hljs-selector-class\">.loading-dots<\/span><span class=\"hljs-selector-pseudo\">:after<\/span> {\n    @apply content-['...'] animate-pulse;\n  }\n\n  <span class=\"hljs-selector-class\">.project-image-placeholder<\/span> {\n    @apply h-48 bg-gray-300 flex items-center justify-center text-gray-600 font-semibold;\n  }\n\n  <span class=\"hljs-selector-class\">.agent-avatar-placeholder<\/span> {\n    @apply w-16 h-16 rounded-full bg-blue-500 text-white flex items-center justify-center font-bold mx-auto;\n  }\n}\n<\/code><\/pre>\n<p>\u0647\u0645\u0647 \u0627\u06cc\u0646 \u0633\u0628\u06a9 \u0647\u0627 \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u062a\u0646\u0638\u06cc\u0645 CSS Tailwind \u0634\u0645\u0627 \u062f\u0631 \u0637\u0648\u0644 \u067e\u0631\u0648\u0698\u0647 \u0634\u0645\u0627 \u0627\u0633\u062a.<\/p>\n<p>\u0641\u0642\u0637 \u06cc\u06a9 \u067e\u0631\u0648\u0646\u062f\u0647 \u0628\u0631\u0627\u06cc CSS \u0628\u0627\u0642\u06cc \u0645\u0627\u0646\u062f\u0647 \u0627\u0633\u062a \u0648 \u0627\u06cc\u0646 \u0627\u0633\u062a <code>style.css<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0627\u06cc\u0646 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0628\u0632\u0631\u06af \u0627\u0633\u062a \u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u0646 \u06a9\u062f \u0631\u0627 \u0628\u0647 \u062f\u0648 \u0628\u062e\u0634 \u062a\u0642\u0633\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u0645 &#8211; \u0641\u0642\u0637 \u06a9\u067e\u06cc \u06a9\u0631\u062f\u0647 \u0648 \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0646\u062f\u0647 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0642\u0633\u0645\u062a \u0627\u0648\u0644 \u0627\u0633\u062a:<\/p>\n<pre><code class=\"lang-css\"><span class=\"hljs-comment\">\/* Main Styles *\/<\/span>\n<span class=\"hljs-selector-tag\">body<\/span> {\n  <span class=\"hljs-attribute\">font-family<\/span>: <span class=\"hljs-string\">'Inter'<\/span>, -apple-system, BlinkMacSystemFont, <span class=\"hljs-string\">'Segoe UI'<\/span>, Roboto, Oxygen,\n    Ubuntu, Cantarell, <span class=\"hljs-string\">'Open Sans'<\/span>, <span class=\"hljs-string\">'Helvetica Neue'<\/span>, sans-serif;\n  <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#333<\/span>;\n  <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#f8f9fa<\/span>;\n}\n\n<span class=\"hljs-comment\">\/* Layout Styles *\/<\/span>\n<span class=\"hljs-selector-id\">#root<\/span> {\n  <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n  <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">text-align<\/span>: left;\n  <span class=\"hljs-attribute\">display<\/span>: flex;\n  <span class=\"hljs-attribute\">flex-direction<\/span>: column;\n  <span class=\"hljs-attribute\">min-height<\/span>: <span class=\"hljs-number\">100vh<\/span>;\n}\n\n<span class=\"hljs-selector-tag\">main<\/span> {\n  <span class=\"hljs-attribute\">flex<\/span>: <span class=\"hljs-number\">1<\/span>;\n}\n\n<span class=\"hljs-selector-tag\">h1<\/span>,\n<span class=\"hljs-selector-tag\">h2<\/span>,\n<span class=\"hljs-selector-tag\">h3<\/span>,\n<span class=\"hljs-selector-tag\">h4<\/span>,\n<span class=\"hljs-selector-tag\">h5<\/span>,\n<span class=\"hljs-selector-tag\">h6<\/span> {\n  <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">600<\/span>;\n}\n\n<span class=\"hljs-selector-tag\">footer<\/span> {\n  <span class=\"hljs-attribute\">margin-top<\/span>: auto;\n}\n\n<span class=\"hljs-comment\">\/* Navbar Styles *\/<\/span>\n<span class=\"hljs-selector-class\">.navbar<\/span> {\n  <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">2px<\/span> <span class=\"hljs-number\">4px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0.1<\/span>);\n}\n\n<span class=\"hljs-selector-class\">.navbar-brand<\/span> {\n  <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">700<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.navbar<\/span> <span class=\"hljs-selector-class\">.container<\/span> {\n  <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">1320px<\/span>;\n}\n\n<span class=\"hljs-comment\">\/* Card Styles *\/<\/span>\n<span class=\"hljs-selector-class\">.card<\/span> {\n  <span class=\"hljs-attribute\">border<\/span>: none;\n  <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">0.5rem<\/span>;\n  <span class=\"hljs-attribute\">transition<\/span>: transform <span class=\"hljs-number\">0.3s<\/span> ease, box-shadow <span class=\"hljs-number\">0.3s<\/span> ease;\n  <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">2em<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.card<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {\n  <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateY<\/span>(-<span class=\"hljs-number\">5px<\/span>);\n  <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">10px<\/span> <span class=\"hljs-number\">20px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0.1<\/span>);\n}\n\n<span class=\"hljs-comment\">\/* Agent Styles *\/<\/span>\n<span class=\"hljs-selector-class\">.agent-avatar-placeholder<\/span> {\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">80px<\/span>;\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">80px<\/span>;\n  <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">50%<\/span>;\n  <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#6c757d<\/span>;\n  <span class=\"hljs-attribute\">color<\/span>: white;\n  <span class=\"hljs-attribute\">display<\/span>: flex;\n  <span class=\"hljs-attribute\">align-items<\/span>: center;\n  <span class=\"hljs-attribute\">justify-content<\/span>: center;\n  <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">24px<\/span>;\n  <span class=\"hljs-attribute\">font-weight<\/span>: bold;\n  <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span> auto;\n  <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">3px<\/span> solid <span class=\"hljs-number\">#fff<\/span>;\n  <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">2px<\/span> <span class=\"hljs-number\">4px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0.1<\/span>);\n}\n\n<span class=\"hljs-selector-class\">.avatar-placeholder<\/span> {\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">40px<\/span>;\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">40px<\/span>;\n  <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">50%<\/span>;\n  <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#6c757d<\/span>;\n  <span class=\"hljs-attribute\">color<\/span>: white;\n  <span class=\"hljs-attribute\">display<\/span>: flex;\n  <span class=\"hljs-attribute\">align-items<\/span>: center;\n  <span class=\"hljs-attribute\">justify-content<\/span>: center;\n  <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">16px<\/span>;\n  <span class=\"hljs-attribute\">font-weight<\/span>: bold;\n}\n\n<span class=\"hljs-comment\">\/* Chat Container Styles *\/<\/span>\n<span class=\"hljs-selector-class\">.chat-container<\/span> {\n  <span class=\"hljs-attribute\">display<\/span>: flex;\n  <span class=\"hljs-attribute\">flex-direction<\/span>: column;\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">400px<\/span>;\n  <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#dee2e6<\/span>;\n  <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">0.25rem<\/span>;\n  <span class=\"hljs-attribute\">overflow<\/span>: hidden;\n}\n\n<span class=\"hljs-selector-class\">.chat-messages<\/span> {\n  <span class=\"hljs-attribute\">flex<\/span>: <span class=\"hljs-number\">1<\/span>;\n  <span class=\"hljs-attribute\">overflow-y<\/span>: auto;\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n  <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#f8f9fa<\/span>;\n}\n<\/code><\/pre>\n<p>\u0648 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0642\u0633\u0645\u062a \u062f\u0648\u0645 \u0627\u0633\u062a:<\/p>\n<pre><code class=\"lang-css\"><span class=\"hljs-selector-class\">.chat-input-container<\/span> {\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0.5rem<\/span>;\n  <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#fff<\/span>;\n  <span class=\"hljs-attribute\">border-top<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#dee2e6<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.chat-input-group<\/span> {\n  <span class=\"hljs-attribute\">display<\/span>: flex;\n}\n\n<span class=\"hljs-selector-class\">.chat-input<\/span> {\n  <span class=\"hljs-attribute\">flex<\/span>: <span class=\"hljs-number\">1<\/span>;\n  <span class=\"hljs-attribute\">margin-right<\/span>: <span class=\"hljs-number\">0.5rem<\/span>;\n  <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#dee2e6<\/span>;\n  <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">0.25rem<\/span>;\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0.5rem<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.chat-send-button<\/span> {\n  <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#007bff<\/span>;\n  <span class=\"hljs-attribute\">color<\/span>: white;\n  <span class=\"hljs-attribute\">border<\/span>: none;\n  <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">0.25rem<\/span>;\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0.5rem<\/span> <span class=\"hljs-number\">1rem<\/span>;\n  <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n}\n\n<span class=\"hljs-selector-class\">.chat-send-button<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {\n  <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#0069d9<\/span>;\n}\n\n<span class=\"hljs-comment\">\/* Message Styles *\/<\/span>\n<span class=\"hljs-selector-class\">.message<\/span> {\n  <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n  <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">80%<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.user-message<\/span> {\n  <span class=\"hljs-attribute\">margin-left<\/span>: auto;\n  <span class=\"hljs-attribute\">text-align<\/span>: right;\n}\n\n<span class=\"hljs-selector-class\">.agent-message<\/span> {\n  <span class=\"hljs-attribute\">display<\/span>: flex;\n  <span class=\"hljs-attribute\">align-items<\/span>: flex-start;\n}\n\n<span class=\"hljs-selector-class\">.message-avatar<\/span> {\n  <span class=\"hljs-attribute\">margin-right<\/span>: <span class=\"hljs-number\">0.5rem<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.message-content<\/span> {\n  <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#fff<\/span>;\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0.75rem<\/span>;\n  <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">0.5rem<\/span>;\n  <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">1px<\/span> <span class=\"hljs-number\">2px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0.05<\/span>);\n}\n\n<span class=\"hljs-selector-class\">.user-message<\/span> <span class=\"hljs-selector-class\">.message-content<\/span> {\n  <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#007bff<\/span>;\n  <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#fff<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.agent-message<\/span> <span class=\"hljs-selector-class\">.message-content<\/span> {\n  <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#fff<\/span>;\n}\n\n<span class=\"hljs-comment\">\/* Loading Animation *\/<\/span>\n<span class=\"hljs-selector-class\">.loading-dots<\/span><span class=\"hljs-selector-pseudo\">:after<\/span> {\n  <span class=\"hljs-attribute\">content<\/span>: <span class=\"hljs-string\">'.'<\/span>;\n  <span class=\"hljs-attribute\">animation<\/span>: dots <span class=\"hljs-number\">1.5s<\/span> <span class=\"hljs-built_in\">steps<\/span>(<span class=\"hljs-number\">5<\/span>, end) infinite;\n}\n\n<span class=\"hljs-keyword\">@keyframes<\/span> dots {\n  0%,\n  20% {\n    <span class=\"hljs-attribute\">content<\/span>: <span class=\"hljs-string\">'.'<\/span>;\n  }\n  40% {\n    <span class=\"hljs-attribute\">content<\/span>: <span class=\"hljs-string\">'..'<\/span>;\n  }\n  60% {\n    <span class=\"hljs-attribute\">content<\/span>: <span class=\"hljs-string\">'...'<\/span>;\n  }\n  80%,\n  100% {\n    <span class=\"hljs-attribute\">content<\/span>: <span class=\"hljs-string\">''<\/span>;\n  }\n}\n<\/code><\/pre>\n<p>\u0627\u06cc\u0646 \u06a9\u062f \u062f\u0627\u0631\u0627\u06cc \u0633\u0628\u06a9 \u0647\u0627\u06cc \u0627\u0635\u0644\u06cc \u0628\u0631\u0627\u06cc \u0637\u0631\u062d \u0645\u062d\u062a\u0648\u0627\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0645\u0631\u0627\u0642\u0628\u062a \u0627\u0632 \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a. \u0645\u0627 \u0641\u0642\u0637 \u0642\u0637\u0639\u0627\u062a \u0648 \u0635\u0641\u062d\u0627\u062a \u0631\u0627 \u0628\u0627\u0642\u06cc \u0645\u0627\u0646\u062f\u0647 \u0627\u06cc\u0645 \u060c \u0648 \u0633\u067e\u0633 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f. \u0642\u0628\u0644 \u0627\u0632 \u0634\u0631\u0648\u0639 \u0631\u0648\u06cc \u0622\u0646 \u067e\u0648\u0634\u0647 \u0647\u0627 \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0647 \u0633\u0631\u0639\u062a \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645 <code>App.jsx<\/code> \u0648\u062a <code>main.jsx<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627 \u062f\u0631 <code>src<\/code> \u067e\u0648\u0634\u0647<\/p>\n<p>\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u060c \u0627\u06cc\u0646 \u06a9\u062f \u0631\u0627 \u0628\u0647 <code>App.jsx<\/code> \u067e\u0631\u0648\u0646\u062f\u0647:<\/p>\n<pre><code class=\"lang-javascript\"><span class=\"hljs-keyword\">import<\/span> { BrowserRouter <span class=\"hljs-keyword\">as<\/span> Router, Routes, Route } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-router'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Layout <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/components\/Layout'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Home <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/pages\/Home'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Projects <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/pages\/Projects'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Career <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/pages\/Career'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Services <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/pages\/Services'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Research <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/pages\/Research'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Contact <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/pages\/Contact'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'.\/App.css'<\/span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Router<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Layout<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Routes<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Route<\/span> <span class=\"hljs-attr\">path<\/span>=<span class=\"hljs-string\">\"\/\"<\/span> <span class=\"hljs-attr\">element<\/span>=<span class=\"hljs-string\">{<\/span>&lt;<span class=\"hljs-attr\">Home<\/span> \/&gt;<\/span>} \/&gt;\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Route<\/span> <span class=\"hljs-attr\">path<\/span>=<span class=\"hljs-string\">\"https:\/\/www.freecodecamp.org\/projects\"<\/span> <span class=\"hljs-attr\">element<\/span>=<span class=\"hljs-string\">{<\/span>&lt;<span class=\"hljs-attr\">Projects<\/span> \/&gt;<\/span>} \/&gt;\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Route<\/span> <span class=\"hljs-attr\">path<\/span>=<span class=\"hljs-string\">\"\/career\"<\/span> <span class=\"hljs-attr\">element<\/span>=<span class=\"hljs-string\">{<\/span>&lt;<span class=\"hljs-attr\">Career<\/span> \/&gt;<\/span>} \/&gt;\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Route<\/span> <span class=\"hljs-attr\">path<\/span>=<span class=\"hljs-string\">\"\/services\"<\/span> <span class=\"hljs-attr\">element<\/span>=<span class=\"hljs-string\">{<\/span>&lt;<span class=\"hljs-attr\">Services<\/span> \/&gt;<\/span>} \/&gt;\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Route<\/span> <span class=\"hljs-attr\">path<\/span>=<span class=\"hljs-string\">\"\/research\"<\/span> <span class=\"hljs-attr\">element<\/span>=<span class=\"hljs-string\">{<\/span>&lt;<span class=\"hljs-attr\">Research<\/span> \/&gt;<\/span>} \/&gt;\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Route<\/span> <span class=\"hljs-attr\">path<\/span>=<span class=\"hljs-string\">\"\/contact\"<\/span> <span class=\"hljs-attr\">element<\/span>=<span class=\"hljs-string\">{<\/span>&lt;<span class=\"hljs-attr\">Contact<\/span> \/&gt;<\/span>} \/&gt;\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Routes<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Layout<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Router<\/span>&gt;<\/span><\/span>\n  );\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> App;\n<\/code><\/pre>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0646\u062f\u0647 \u060c \u062a\u0645\u0627\u0645 \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u062f\u0627\u0631\u06cc\u062f. \u0627\u06cc\u0646\u06af\u0648\u0646\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0634\u0645\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0635\u0641\u062d\u0627\u062a \u062d\u0631\u06a9\u062a \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f <code>BrowserRouter<\/code>\u0628\u0634\u0631<\/p>\n<p>\u062f\u0631 \u0622\u062e\u0631 \u060c \u062a\u0645\u0627\u0645 \u06a9\u062f \u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0622\u0646 \u0631\u0627 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0648 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f <code>main.jsx<\/code> \u0628\u0627 \u0627\u06cc\u0646:<\/p>\n<pre><code class=\"lang-javascript\"><span class=\"hljs-keyword\">import<\/span> { StrictMode } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { createRoot } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-dom\/client'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'.\/index.css'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'.\/style.css'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> App <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/App.jsx'<\/span>;\n\ncreateRoot(<span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'root'<\/span>)).render(\n  <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">StrictMode<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">App<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">StrictMode<\/span>&gt;<\/span><\/span>\n);\n<\/code><\/pre>\n<p>\u062a\u0646\u0647\u0627 \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0627\u062f\u06cc\u0645 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 import \u0628\u0631\u0627\u06cc <code>import '.\/style.css'<\/code> \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0646\u062f\u0647 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0628\u0647 \u0633\u0628\u06a9 \u0647\u0627\u06cc \u0627\u06cc\u0646 \u067e\u0631\u0648\u0646\u062f\u0647 \u062f\u0633\u062a\u0631\u0633\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0632\u0645\u0627\u0646 \u06a9\u0627\u0631 \u0631\u0648\u06cc \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627\u06cc \u0645\u0624\u0644\u0641\u0647 \u0634\u0645\u0627 \u060c \u0628\u0627 \u0634\u0631\u0648\u0639 <code>Chat.jsx<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0645\u0646 \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u0631\u0627 \u062a\u0642\u0633\u06cc\u0645 \u06a9\u0631\u062f\u0645 \u0632\u06cc\u0631\u0627 \u0627\u06cc\u0646 \u06cc\u06a9 \u067e\u0631\u0648\u0646\u062f\u0647 \u0628\u0632\u0631\u06af \u0627\u0633\u062a \u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u062d\u062a\u0645\u0627\u064b \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0647\u0645 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0645\u0627\u0646\u0646\u062f \u06af\u0630\u0634\u062a\u0647 \u060c \u0642\u0633\u0645\u062a \u0627\u0648\u0644 \u0627\u0633\u062a:<\/p>\n<pre><code class=\"lang-javascript\"><span class=\"hljs-keyword\">import<\/span> { useState, useEffect, useRef, useCallback } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> axios <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"axios\"<\/span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Chat<\/span>(<span class=\"hljs-params\">{ agentType, initialMessage, agentInitials, directQuestion }<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> [messages, setMessages] = useState([]);\n  <span class=\"hljs-keyword\">const<\/span> [input, setInput] = useState(<span class=\"hljs-string\">\"\"<\/span>);\n  <span class=\"hljs-keyword\">const<\/span> [isLoading, setIsLoading] = useState(<span class=\"hljs-literal\">false<\/span>);\n  <span class=\"hljs-keyword\">const<\/span> messagesEndRef = useRef(<span class=\"hljs-literal\">null<\/span>);\n  <span class=\"hljs-keyword\">const<\/span> [processedQuestions, setProcessedQuestions] = useState([]);\n\n  <span class=\"hljs-keyword\">const<\/span> API_BASE_URL = <span class=\"hljs-string\">\"http:\/\/127.0.0.1:5001\"<\/span>;\n\n  <span class=\"hljs-keyword\">const<\/span> scrollToBottom = <span class=\"hljs-function\">() =&gt;<\/span> {\n    messagesEndRef.current?.scrollIntoView({ <span class=\"hljs-attr\">behavior<\/span>: <span class=\"hljs-string\">\"smooth\"<\/span> });\n  };\n\n  <span class=\"hljs-keyword\">const<\/span> handleSendMessage = useCallback(\n    <span class=\"hljs-keyword\">async<\/span> (questionOverride = <span class=\"hljs-literal\">null<\/span>) =&gt; {\n      <span class=\"hljs-keyword\">const<\/span> messageToSend = questionOverride || input;\n\n      <span class=\"hljs-keyword\">if<\/span> (!messageToSend.trim()) <span class=\"hljs-keyword\">return<\/span>;\n\n      <span class=\"hljs-keyword\">const<\/span> userMessage = {\n        <span class=\"hljs-attr\">content<\/span>: messageToSend,\n        <span class=\"hljs-attr\">isUser<\/span>: <span class=\"hljs-literal\">true<\/span>,\n      };\n\n      setMessages(<span class=\"hljs-function\">(<span class=\"hljs-params\">prev<\/span>) =&gt;<\/span> [...prev, userMessage]);\n\n      <span class=\"hljs-keyword\">if<\/span> (!questionOverride) {\n        setInput(<span class=\"hljs-string\">\"\"<\/span>);\n      }\n\n      setIsLoading(<span class=\"hljs-literal\">true<\/span>);\n\n      <span class=\"hljs-keyword\">try<\/span> {\n        <span class=\"hljs-keyword\">const<\/span> response = <span class=\"hljs-keyword\">await<\/span> axios.post(\n          <span class=\"hljs-string\">`<span class=\"hljs-subst\">${API_BASE_URL}<\/span>\/api\/<span class=\"hljs-subst\">${agentType}<\/span>`<\/span>,\n          {\n            <span class=\"hljs-attr\">message<\/span>: messageToSend,\n          },\n          {\n            <span class=\"hljs-attr\">headers<\/span>: {\n              <span class=\"hljs-string\">\"Content-Type\"<\/span>: <span class=\"hljs-string\">\"application\/json\"<\/span>,\n              <span class=\"hljs-string\">\"Access-Control-Allow-Origin\"<\/span>: <span class=\"hljs-string\">\"*\"<\/span>,\n            },\n          }\n        );\n\n        <span class=\"hljs-keyword\">if<\/span> (response.data &amp;&amp; response.data.response) {\n          setMessages(<span class=\"hljs-function\">(<span class=\"hljs-params\">prev<\/span>) =&gt;<\/span> [\n            ...prev,\n            {\n              <span class=\"hljs-attr\">content<\/span>: response.data.response,\n              <span class=\"hljs-attr\">isUser<\/span>: <span class=\"hljs-literal\">false<\/span>,\n            },\n          ]);\n        }\n      } <span class=\"hljs-keyword\">catch<\/span> (error) {\n        <span class=\"hljs-built_in\">console<\/span>.error(<span class=\"hljs-string\">\"Error sending message:\"<\/span>, error);\n        setMessages(<span class=\"hljs-function\">(<span class=\"hljs-params\">prev<\/span>) =&gt;<\/span> [\n          ...prev,\n          {\n            <span class=\"hljs-attr\">content<\/span>:\n              <span class=\"hljs-string\">\"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\/\"<\/span>,\n            <span class=\"hljs-attr\">isUser<\/span>: <span class=\"hljs-literal\">false<\/span>,\n          },\n        ]);\n      } <span class=\"hljs-keyword\">finally<\/span> {\n        setIsLoading(<span class=\"hljs-literal\">false<\/span>);\n      }\n    },\n    [input, agentType, API_BASE_URL]\n  );\n\n  <span class=\"hljs-keyword\">const<\/span> handleKeyPress = <span class=\"hljs-function\">(<span class=\"hljs-params\">e<\/span>) =&gt;<\/span> {\n    <span class=\"hljs-keyword\">if<\/span> (e.key === <span class=\"hljs-string\">\"Enter\"<\/span>) {\n      handleSendMessage();\n    }\n  };\n\n  <span class=\"hljs-keyword\">const<\/span> cleanQuestion = <span class=\"hljs-function\">(<span class=\"hljs-params\">question<\/span>) =&gt;<\/span> {\n    <span class=\"hljs-keyword\">return<\/span> question.replace(<span class=\"hljs-regexp\">\/\\s*\\[\\d+\\]\\s*$\/<\/span>, <span class=\"hljs-string\">\"\"<\/span>);\n  };\n\n  useEffect(<span class=\"hljs-function\">() =&gt;<\/span> {\n    <span class=\"hljs-keyword\">if<\/span> (initialMessage) {\n      setMessages([\n        {\n          <span class=\"hljs-attr\">content<\/span>: initialMessage,\n          <span class=\"hljs-attr\">isUser<\/span>: <span class=\"hljs-literal\">false<\/span>,\n        },\n      ]);\n    }\n  }, [initialMessage]);\n\n  useEffect(<span class=\"hljs-function\">() =&gt;<\/span> {\n    scrollToBottom();\n  }, [messages]);\n<\/code><\/pre>\n<p>\u0642\u0633\u0645\u062a \u0627\u0648\u0644 \u0627\u06cc\u0646 \u06a9\u062f \u0648\u0627\u0631\u062f\u0627\u062a \u0634\u0645\u0627 \u060c URL \u067e\u0627\u06cc\u0647 \u0628\u0631\u0627\u06cc \u0627\u062a\u0635\u0627\u0644 \u0628\u0647 \u0628\u0627\u0637\u0646 \u0648 \u062a\u0648\u0627\u0628\u0639 \u0627\u0633\u062a.<\/p>\n<p>\u062d\u0627\u0644 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0642\u0633\u0645\u062a \u062f\u0648\u0645 \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645:<\/p>\n<pre><code class=\"lang-javascript\">  useEffect(<span class=\"hljs-function\">() =&gt;<\/span> {\n    <span class=\"hljs-keyword\">if<\/span> (\n      directQuestion &amp;&amp;\n      directQuestion.trim() !== <span class=\"hljs-string\">\"\"<\/span> &amp;&amp;\n      !processedQuestions.includes(directQuestion)\n    ) {\n      <span class=\"hljs-keyword\">const<\/span> cleanedQuestion = cleanQuestion(directQuestion);\n      setInput(cleanedQuestion);\n      handleSendMessage(cleanedQuestion);\n      setProcessedQuestions(<span class=\"hljs-function\">(<span class=\"hljs-params\">prev<\/span>) =&gt;<\/span> [...prev, directQuestion]);\n    }\n  }, [directQuestion, processedQuestions, handleSendMessage]);\n\n  <span class=\"hljs-keyword\">const<\/span> renderContent = <span class=\"hljs-function\">(<span class=\"hljs-params\">content<\/span>) =&gt;<\/span> {\n    <span class=\"hljs-keyword\">let<\/span> formattedContent = content;\n\n    formattedContent = formattedContent.replace(\n      <span class=\"hljs-regexp\">\/#{6}\\s+(.*?)(?=\\n|$)\/g<\/span>,\n      <span class=\"hljs-string\">\"&lt;h6&gt;$1&lt;\/h6&gt;\"<\/span>\n    );\n    formattedContent = formattedContent.replace(\n      <span class=\"hljs-regexp\">\/#{5}\\s+(.*?)(?=\\n|$)\/g<\/span>,\n      <span class=\"hljs-string\">\"&lt;h5&gt;$1&lt;\/h5&gt;\"<\/span>\n    );\n    formattedContent = formattedContent.replace(\n      <span class=\"hljs-regexp\">\/#{4}\\s+(.*?)(?=\\n|$)\/g<\/span>,\n      <span class=\"hljs-string\">\"&lt;h4&gt;$1&lt;\/h4&gt;\"<\/span>\n    );\n    formattedContent = formattedContent.replace(\n      <span class=\"hljs-regexp\">\/#{3}\\s+(.*?)(?=\\n|$)\/g<\/span>,\n      <span class=\"hljs-string\">\"&lt;h3&gt;$1&lt;\/h3&gt;\"<\/span>\n    );\n    formattedContent = formattedContent.replace(\n      <span class=\"hljs-regexp\">\/#{2}\\s+(.*?)(?=\\n|$)\/g<\/span>,\n      <span class=\"hljs-string\">\"&lt;h2&gt;$1&lt;\/h2&gt;\"<\/span>\n    );\n    formattedContent = formattedContent.replace(\n      <span class=\"hljs-regexp\">\/#{1}\\s+(.*?)(?=\\n|$)\/g<\/span>,\n      <span class=\"hljs-string\">\"&lt;h1&gt;$1&lt;\/h1&gt;\"<\/span>\n    );\n\n    formattedContent = formattedContent.replace(\n      <span class=\"hljs-regexp\">\/\\*\\*(.*?)\\*\\*\/g<\/span>,\n      <span class=\"hljs-string\">\"&lt;strong&gt;$1&lt;\/strong&gt;\"<\/span>\n    );\n\n    formattedContent = formattedContent.replace(<span class=\"hljs-regexp\">\/\\*(.*?)\\*\/g<\/span>, <span class=\"hljs-string\">\"&lt;em&gt;$1&lt;\/em&gt;\"<\/span>);\n\n    formattedContent = formattedContent.replace(<span class=\"hljs-regexp\">\/`(.*?)`\/g<\/span>, <span class=\"hljs-string\">\"&lt;code&gt;$1&lt;\/code&gt;\"<\/span>);\n\n    formattedContent = formattedContent.replace(\n      <span class=\"hljs-regexp\">\/\\[(.*?)\\]\\((.*?)\\)\/g<\/span>,\n      <span class=\"hljs-string\">'&lt;a href=\"https:\/\/www.freecodecamp.org\/news\/build-a-team-of-ai-agents-for-your-website-for-free\/\" target=\"_blank\"&gt;$1&lt;\/a&gt;'<\/span>\n    );\n\n    formattedContent = formattedContent.replace(\n      <span class=\"hljs-regexp\">\/^\\s*\\*\\s+(.*?)(?=\\n|$)\/gm<\/span>,\n      <span class=\"hljs-string\">\"&lt;li&gt;$1&lt;\/li&gt;\"<\/span>\n    );\n    formattedContent = formattedContent.replace(\n      <span class=\"hljs-regexp\">\/&lt;li&gt;(.*?)&lt;\\\/li&gt;(?:\\s*&lt;li&gt;.*?&lt;\\\/li&gt;)*\/g<\/span>,\n      <span class=\"hljs-string\">\"&lt;ul&gt;$&amp;&lt;\/ul&gt;\"<\/span>\n    );\n\n    formattedContent = formattedContent.replace(\n      <span class=\"hljs-regexp\">\/^\\s*\\d+\\.\\s+(.*?)(?=\\n|$)\/gm<\/span>,\n      <span class=\"hljs-string\">\"&lt;li&gt;$1&lt;\/li&gt;\"<\/span>\n    );\n    formattedContent = formattedContent.replace(\n      <span class=\"hljs-regexp\">\/&lt;li&gt;(.*?)&lt;\\\/li&gt;(?:\\s*&lt;li&gt;.*?&lt;\\\/li&gt;)*\/g<\/span>,\n      <span class=\"hljs-string\">\"&lt;ol&gt;$&amp;&lt;\/ol&gt;\"<\/span>\n    );\n\n    <span class=\"hljs-keyword\">return<\/span> { <span class=\"hljs-attr\">__html<\/span>: formattedContent };\n  };\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"chat-container\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"chat-messages\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">{<\/span>`${<span class=\"hljs-attr\">agentType<\/span>}<span class=\"hljs-attr\">-messages<\/span>`}&gt;<\/span>\n        {messages.map((message, index) =&gt; (\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>\n            <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{index}<\/span>\n            <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{<\/span>`<span class=\"hljs-attr\">message<\/span> ${\n              <span class=\"hljs-attr\">message.isUser<\/span> ? \"<span class=\"hljs-attr\">user-message<\/span>\" <span class=\"hljs-attr\">:<\/span> \"<span class=\"hljs-attr\">agent-message<\/span>\"\n            }`}\n          &gt;<\/span>\n            {!message.isUser &amp;&amp; (\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"message-avatar\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"avatar-placeholder\"<\/span>&gt;<\/span>\n                  {agentInitials || \"AI\"}\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            )}\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"message-content\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">dangerouslySetInnerHTML<\/span>=<span class=\"hljs-string\">{renderContent(message.content)}<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        ))}\n        {isLoading &amp;&amp; (\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"message agent-message\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"message-avatar\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"avatar-placeholder\"<\/span>&gt;<\/span>{agentInitials || \"AI\"}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"message-content\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"loading-dots\"<\/span>&gt;<\/span>Thinking<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        )}\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">{messagesEndRef}<\/span> \/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"chat-input-container\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"chat-input-group\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span>\n            <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span>\n            <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">{<\/span>`${<span class=\"hljs-attr\">agentType<\/span>}<span class=\"hljs-attr\">-input<\/span>`}\n            <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"chat-input\"<\/span>\n            <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Type your message...\"<\/span>\n            <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">{input}<\/span>\n            <span class=\"hljs-attr\">onChange<\/span>=<span class=\"hljs-string\">{(e)<\/span> =&gt;<\/span> setInput(e.target.value)}\n            onKeyPress={handleKeyPress}\n          \/&gt;\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n            <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">{<\/span>`${<span class=\"hljs-attr\">agentType<\/span>}<span class=\"hljs-attr\">-send<\/span>`}\n            <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"chat-send-button\"<\/span>\n            <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> handleSendMessage()}\n          &gt;\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"fa-solid fa-paper-plane mr-2\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span>Send\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> Chat;\n<\/code><\/pre>\n<p>\u0642\u0633\u0645\u062a \u062f\u0648\u0645 \u06a9\u062f \u0628\u06cc\u0634\u062a\u0631 \u062f\u0627\u0631\u0627\u06cc JSX \u0628\u0631\u0627\u06cc \u0645\u0624\u0644\u0641\u0647 \u0647\u0627 \u0627\u0633\u062a.<\/p>\n<p>\u062f\u0631\u0633\u062a \u0627\u0633\u062a \u060c \u0628\u0639\u062f \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645 <code>Footer.jsx<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0631\u0627 \u0628\u0627 \u0627\u0641\u0632\u0648\u062f\u0646 \u0627\u06cc\u0646 \u06a9\u062f \u0628\u0647 \u067e\u0631\u0648\u0646\u062f\u0647:<\/p>\n<pre><code class=\"lang-javascript\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Footer<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">footer<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bg-dark text-white py-4\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"row\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"col-md-6\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span>&gt;<\/span>Portfolio<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Showcasing my work with the help of AI agents<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"col-md-6 text-md-end\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span>&gt;<\/span>Connect<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"social-links\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-white me-2\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-white me-2\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-white me-2\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"row mt-3\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"col-12 text-center\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mb-0\"<\/span>&gt;<\/span>\n              <span class=\"hljs-symbol\">&amp;copy;<\/span> {new Date().getFullYear()} Portfolio. All rights reserved.\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">footer<\/span>&gt;<\/span><\/span>\n  );\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> Footer;\n<\/code><\/pre>\n<p>\u06a9\u062f \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u06a9\u0627\u0645\u0644\u0627\u064b \u062a\u0648\u0636\u06cc\u062d\u06cc \u0627\u0633\u062a-\u0628\u0631\u062e\u06cc \u0627\u0632 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062a\u0645\u0627\u0633 \u0631\u0627 \u062f\u0631 \u0627\u062e\u062a\u06cc\u0627\u0631 \u0634\u0645\u0627 \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u062f\u0631 \u067e\u0627\u06cc\u06cc\u0646 \u0634\u0645\u0627 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f page \u062f\u0631 \u0628\u062e\u0634 \u067e\u0627\u0648\u0631\u0642\u06cc<\/p>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u06a9\u0627\u0631 \u06a9\u0646\u06cc\u0645 \u0631\u0648\u06cc \u062f\u0631 <code>Layout.jsx<\/code>\u0628\u0634\u0631 \u0645\u0646 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u062f\u0648 \u0642\u0633\u0645\u062a \u062a\u0642\u0633\u06cc\u0645 \u06a9\u0631\u062f\u0647 \u0627\u0645.<\/p>\n<p>\u0642\u0633\u0645\u062a \u0627\u0648\u0644 \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"lang-javascript\"><span class=\"hljs-keyword\">import<\/span> { Link, useLocation } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react-router\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Layout<\/span>(<span class=\"hljs-params\">{ children }<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> location = useLocation();\n  <span class=\"hljs-keyword\">const<\/span> [isMenuOpen, setIsMenuOpen] = useState(<span class=\"hljs-literal\">false<\/span>);\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    &lt;div className=\"flex flex-col min-h-screen\"&gt;\n      &lt;nav className=\"bg-gray-800 text-white\"&gt;\n        &lt;div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\"&gt;\n          &lt;div className=\"flex justify-between h-16\"&gt;\n            &lt;div className=\"flex items-center\"&gt;\n              &lt;Link className=\"text-xl font-bold\" to=\"\/\"&gt;\n                Portfolio\n              &lt;\/Link&gt;\n            &lt;\/div&gt;\n            &lt;div className=\"hidden md:block\"&gt;\n              &lt;div className=\"ml-10 flex items-center space-x-4\"&gt;\n                &lt;Link\n                  className={`px-3 py-2 rounded-md text-sm font-medium ${\n                    location.pathname === \"\/\"\n                      ? \"bg-gray-900 text-white\"\n                      : \"text-gray-300 hover:bg-gray-700 hover:text-white\"\n                  }`}\n                  to=\"\/\"\n                &gt;\n                  Home\n                &lt;\/Link&gt;\n                &lt;Link\n                  className={`px-3 py-2 rounded-md text-sm font-medium ${\n                    location.pathname === \"https:\/\/www.freecodecamp.org\/projects\"\n                      ? \"bg-gray-900 text-white\"\n                      : \"text-gray-300 hover:bg-gray-700 hover:text-white\"\n                  }`}\n                  to=\"https:\/\/www.freecodecamp.org\/projects\"\n                &gt;\n                  Projects\n                &lt;\/Link&gt;\n                &lt;Link\n                  className={`px-3 py-2 rounded-md text-sm font-medium ${\n                    location.pathname === \"\/career\"\n                      ? \"bg-gray-900 text-white\"\n                      : \"text-gray-300 hover:bg-gray-700 hover:text-white\"\n                  }`}\n                  to=\"\/career\"\n                &gt;\n                  Career\n                &lt;\/Link&gt;\n                &lt;Link\n                  className={`px-3 py-2 rounded-md text-sm font-medium ${\n                    location.pathname === \"\/services\"\n                      ? \"bg-gray-900 text-white\"\n                      : \"text-gray-300 hover:bg-gray-700 hover:text-white\"\n                  }`}\n                  to=\"\/services\"\n                &gt;\n                  Services\n                &lt;\/Link&gt;\n                &lt;Link\n                  className={`px-3 py-2 rounded-md text-sm font-medium ${\n                    location.pathname === \"\/research\"\n                      ? \"bg-gray-900 text-white\"\n                      : \"text-gray-300 hover:bg-gray-700 hover:text-white\"\n                  }`}\n                  to=\"\/research\"\n                &gt;\n                  Research\n                &lt;\/Link&gt;\n                &lt;Link\n                  className={`px-3 py-2 rounded-md text-sm font-medium ${\n                    location.pathname === \"\/contact\"\n                      ? \"bg-gray-900 text-white\"\n                      : \"text-gray-300 hover:bg-gray-700 hover:text-white\"\n                  }`}\n                  to=\"\/contact\"\n                &gt;\n                  Contact\n                &lt;\/Link&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div className=\"md:hidden flex items-center\"&gt;\n              &lt;button\n                onClick={() =&gt; setIsMenuOpen(!isMenuOpen)}\n                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\"\n              &gt;\n                &lt;span className=\"sr-only\"&gt;Open main menu&lt;\/span&gt;\n                {isMenuOpen ? (\n                  &lt;svg\n                    className=\"block h-6 w-6\"\n                    xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n                    fill=\"none\"\n                    viewBox=\"0 0 24 24\"\n                    stroke=\"currentColor\"\n                    aria-hidden=\"true\"\n                  &gt;\n                    &lt;path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth=\"2\"\n                      d=\"M6 18L18 6M6 6l12 12\"\n                    \/&gt;\n                  &lt;\/svg&gt;\n                ) : (\n                  &lt;svg\n                    className=\"block h-6 w-6\"\n                    xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n                    fill=\"none\"\n                    viewBox=\"0 0 24 24\"\n                    stroke=\"currentColor\"\n                    aria-hidden=\"true\"\n                  &gt;\n                    &lt;path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth=\"2\"\n                      d=\"M4 6h16M4 12h16M4 18h16\"\n                    \/&gt;\n                  &lt;\/svg&gt;\n                )}\n              &lt;\/button&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n<\/code><\/pre>\n<p>\u0627\u06cc\u0646 \u0628\u062e\u0634 \u0627\u0632 \u06a9\u062f \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0637\u0631\u062d \u0627\u0646\u062a\u0638\u0627\u0631 \u0645\u06cc \u0631\u0648\u062f \u060c \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u062f\u0627\u0631\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0642\u0633\u0645\u062a \u062f\u0648\u0645 \u06a9\u062f \u0627\u0636\u0627\u0641\u0647 \u0634\u062f\u0647 \u0628\u0647 \u067e\u0631\u0648\u0646\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<pre><code class=\"lang-javascript\">        {<span class=\"hljs-comment\">\/* Mobile menu, show\/hide based \u0631\u0648\u06cc menu state *\/<\/span>}\n        {isMenuOpen &amp;&amp; (\n          <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"md:hidden\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"px-2 pt-2 pb-3 space-y-1 sm:px-3\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{<\/span>`<span class=\"hljs-attr\">block<\/span> <span class=\"hljs-attr\">px-3<\/span> <span class=\"hljs-attr\">py-2<\/span> <span class=\"hljs-attr\">rounded-md<\/span> <span class=\"hljs-attr\">text-base<\/span> <span class=\"hljs-attr\">font-medium<\/span> ${\n                  <span class=\"hljs-attr\">location.pathname<\/span> === <span class=\"hljs-string\">\"\/\"<\/span>\n                    ? \"<span class=\"hljs-attr\">bg-gray-900<\/span> <span class=\"hljs-attr\">text-white<\/span>\"\n                    <span class=\"hljs-attr\">:<\/span> \"<span class=\"hljs-attr\">text-gray-300<\/span> <span class=\"hljs-attr\">hover:bg-gray-700<\/span> <span class=\"hljs-attr\">hover:text-white<\/span>\"\n                }`}\n                <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"\/\"<\/span>\n                <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> setIsMenuOpen(false)}\n              &gt;\n                Home\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{<\/span>`<span class=\"hljs-attr\">block<\/span> <span class=\"hljs-attr\">px-3<\/span> <span class=\"hljs-attr\">py-2<\/span> <span class=\"hljs-attr\">rounded-md<\/span> <span class=\"hljs-attr\">text-base<\/span> <span class=\"hljs-attr\">font-medium<\/span> ${\n                  <span class=\"hljs-attr\">location.pathname<\/span> === <span class=\"hljs-string\">\"https:\/\/www.freecodecamp.org\/projects\"<\/span>\n                    ? \"<span class=\"hljs-attr\">bg-gray-900<\/span> <span class=\"hljs-attr\">text-white<\/span>\"\n                    <span class=\"hljs-attr\">:<\/span> \"<span class=\"hljs-attr\">text-gray-300<\/span> <span class=\"hljs-attr\">hover:bg-gray-700<\/span> <span class=\"hljs-attr\">hover:text-white<\/span>\"\n                }`}\n                <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"https:\/\/www.freecodecamp.org\/projects\"<\/span>\n                <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> setIsMenuOpen(false)}\n              &gt;\n                Projects\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{<\/span>`<span class=\"hljs-attr\">block<\/span> <span class=\"hljs-attr\">px-3<\/span> <span class=\"hljs-attr\">py-2<\/span> <span class=\"hljs-attr\">rounded-md<\/span> <span class=\"hljs-attr\">text-base<\/span> <span class=\"hljs-attr\">font-medium<\/span> ${\n                  <span class=\"hljs-attr\">location.pathname<\/span> === <span class=\"hljs-string\">\"\/career\"<\/span>\n                    ? \"<span class=\"hljs-attr\">bg-gray-900<\/span> <span class=\"hljs-attr\">text-white<\/span>\"\n                    <span class=\"hljs-attr\">:<\/span> \"<span class=\"hljs-attr\">text-gray-300<\/span> <span class=\"hljs-attr\">hover:bg-gray-700<\/span> <span class=\"hljs-attr\">hover:text-white<\/span>\"\n                }`}\n                <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"\/career\"<\/span>\n                <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> setIsMenuOpen(false)}\n              &gt;\n                Career\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{<\/span>`<span class=\"hljs-attr\">block<\/span> <span class=\"hljs-attr\">px-3<\/span> <span class=\"hljs-attr\">py-2<\/span> <span class=\"hljs-attr\">rounded-md<\/span> <span class=\"hljs-attr\">text-base<\/span> <span class=\"hljs-attr\">font-medium<\/span> ${\n                  <span class=\"hljs-attr\">location.pathname<\/span> === <span class=\"hljs-string\">\"\/services\"<\/span>\n                    ? \"<span class=\"hljs-attr\">bg-gray-900<\/span> <span class=\"hljs-attr\">text-white<\/span>\"\n                    <span class=\"hljs-attr\">:<\/span> \"<span class=\"hljs-attr\">text-gray-300<\/span> <span class=\"hljs-attr\">hover:bg-gray-700<\/span> <span class=\"hljs-attr\">hover:text-white<\/span>\"\n                }`}\n                <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"\/services\"<\/span>\n                <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> setIsMenuOpen(false)}\n              &gt;\n                Services\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{<\/span>`<span class=\"hljs-attr\">block<\/span> <span class=\"hljs-attr\">px-3<\/span> <span class=\"hljs-attr\">py-2<\/span> <span class=\"hljs-attr\">rounded-md<\/span> <span class=\"hljs-attr\">text-base<\/span> <span class=\"hljs-attr\">font-medium<\/span> ${\n                  <span class=\"hljs-attr\">location.pathname<\/span> === <span class=\"hljs-string\">\"\/research\"<\/span>\n                    ? \"<span class=\"hljs-attr\">bg-gray-900<\/span> <span class=\"hljs-attr\">text-white<\/span>\"\n                    <span class=\"hljs-attr\">:<\/span> \"<span class=\"hljs-attr\">text-gray-300<\/span> <span class=\"hljs-attr\">hover:bg-gray-700<\/span> <span class=\"hljs-attr\">hover:text-white<\/span>\"\n                }`}\n                <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"\/research\"<\/span>\n                <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> setIsMenuOpen(false)}\n              &gt;\n                Research\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{<\/span>`<span class=\"hljs-attr\">block<\/span> <span class=\"hljs-attr\">px-3<\/span> <span class=\"hljs-attr\">py-2<\/span> <span class=\"hljs-attr\">rounded-md<\/span> <span class=\"hljs-attr\">text-base<\/span> <span class=\"hljs-attr\">font-medium<\/span> ${\n                  <span class=\"hljs-attr\">location.pathname<\/span> === <span class=\"hljs-string\">\"\/contact\"<\/span>\n                    ? \"<span class=\"hljs-attr\">bg-gray-900<\/span> <span class=\"hljs-attr\">text-white<\/span>\"\n                    <span class=\"hljs-attr\">:<\/span> \"<span class=\"hljs-attr\">text-gray-300<\/span> <span class=\"hljs-attr\">hover:bg-gray-700<\/span> <span class=\"hljs-attr\">hover:text-white<\/span>\"\n                }`}\n                <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"\/contact\"<\/span>\n                <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> setIsMenuOpen(false)}\n              &gt;\n                Contact\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n        )}\n      &lt;\/nav&gt;\n\n      <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8\"<\/span>&gt;<\/span>\n        {children}\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span><\/span>\n\n      <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">footer<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bg-gray-800 text-white py-8\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"md:flex md:justify-between\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mb-8 md:mb-0\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-lg font-semibold mb-2\"<\/span>&gt;<\/span>Portfolio<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-300\"<\/span>&gt;<\/span>\n                Showcasing my work with the help of AI agents\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mt-8 border-t border-gray-700 pt-8 text-center\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-300\"<\/span>&gt;<\/span>\n              <span class=\"hljs-symbol\">&amp;copy;<\/span> 1404 Portfolio. All rights reserved.\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">footer<\/span>&gt;<\/span><\/span>\n    &lt;\/div&gt;\n  );\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> Layout;\n<\/code><\/pre>\n<p>\u0627\u06cc\u0646 \u06a9\u062f \u062f\u0627\u0631\u0627\u06cc \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u0624\u0644\u0641\u0647 \u0637\u0631\u062d \u0631\u0627 \u062a\u06a9\u0645\u06cc\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0645\u0627 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u062a\u0645\u0627\u0645 \u0634\u062f\u0647 \u0627\u06cc\u0645 \u0627\u06a9\u0646\u0648\u0646 \u0628\u0631\u0627\u06cc \u0622\u062e\u0631\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u060c <code>Navbar.jsx<\/code>\u060c \u0642\u0628\u0644 \u0627\u0632 \u062d\u0631\u06a9\u062a \u0631\u0648\u06cc \u0628\u0647 \u0635\u0641\u062d\u0627\u062a<\/p>\n<p>\u0627\u06cc\u0646 \u06a9\u062f \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0646\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<pre><code class=\"lang-javascript\"><span class=\"hljs-keyword\">import<\/span> { Link, useLocation } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-router'<\/span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Navbar<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> location = useLocation();\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">nav<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"navbar navbar-expand-lg navbar-dark bg-dark\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"navbar-brand\"<\/span> <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"\/\"<\/span>&gt;<\/span>\n          Portfolio\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n          <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"navbar-toggler\"<\/span>\n          <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"button\"<\/span>\n          <span class=\"hljs-attr\">data-bs-toggle<\/span>=<span class=\"hljs-string\">\"collapse\"<\/span>\n          <span class=\"hljs-attr\">data-bs-target<\/span>=<span class=\"hljs-string\">\"#navbarNav\"<\/span>\n        &gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"navbar-toggler-icon\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"collapse navbar-collapse\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"navbarNav\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"navbar-nav ms-auto\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"nav-item\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{<\/span>`<span class=\"hljs-attr\">nav-link<\/span> ${\n                  <span class=\"hljs-attr\">location.pathname<\/span> === <span class=\"hljs-string\">'\/'<\/span> ? '<span class=\"hljs-attr\">active<\/span>' <span class=\"hljs-attr\">:<\/span> ''\n                }`}\n                <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"\/\"<\/span>\n              &gt;<\/span>\n                Home\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"nav-item\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{<\/span>`<span class=\"hljs-attr\">nav-link<\/span> ${\n                  <span class=\"hljs-attr\">location.pathname<\/span> === <span class=\"hljs-string\">\"https:\/\/www.freecodecamp.org\/projects\"<\/span> ? '<span class=\"hljs-attr\">active<\/span>' <span class=\"hljs-attr\">:<\/span> ''\n                }`}\n                <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"https:\/\/www.freecodecamp.org\/projects\"<\/span>\n              &gt;<\/span>\n                Projects\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"nav-item\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{<\/span>`<span class=\"hljs-attr\">nav-link<\/span> ${\n                  <span class=\"hljs-attr\">location.pathname<\/span> === <span class=\"hljs-string\">'\/career'<\/span> ? '<span class=\"hljs-attr\">active<\/span>' <span class=\"hljs-attr\">:<\/span> ''\n                }`}\n                <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"\/career\"<\/span>\n              &gt;<\/span>\n                Career\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"nav-item\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{<\/span>`<span class=\"hljs-attr\">nav-link<\/span> ${\n                  <span class=\"hljs-attr\">location.pathname<\/span> === <span class=\"hljs-string\">'\/services'<\/span> ? '<span class=\"hljs-attr\">active<\/span>' <span class=\"hljs-attr\">:<\/span> ''\n                }`}\n                <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"\/services\"<\/span>\n              &gt;<\/span>\n                Services\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"nav-item\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{<\/span>`<span class=\"hljs-attr\">nav-link<\/span> ${\n                  <span class=\"hljs-attr\">location.pathname<\/span> === <span class=\"hljs-string\">'\/research'<\/span> ? '<span class=\"hljs-attr\">active<\/span>' <span class=\"hljs-attr\">:<\/span> ''\n                }`}\n                <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"\/research\"<\/span>\n              &gt;<\/span>\n                Research\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"nav-item\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{<\/span>`<span class=\"hljs-attr\">nav-link<\/span> ${\n                  <span class=\"hljs-attr\">location.pathname<\/span> === <span class=\"hljs-string\">'\/contact'<\/span> ? '<span class=\"hljs-attr\">active<\/span>' <span class=\"hljs-attr\">:<\/span> ''\n                }`}\n                <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"\/contact\"<\/span>\n              &gt;<\/span>\n                Contact\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">nav<\/span>&gt;<\/span><\/span>\n  );\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> Navbar;\n<\/code><\/pre>\n<p>\u0645\u0624\u0644\u0641\u0647 NAVBAR \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc \u0634\u0645\u0627 \u0631\u0627 \u062f\u0627\u0631\u062f \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0635\u0641\u062d\u0627\u062a \u062d\u0631\u06a9\u062a \u06a9\u0646\u06cc\u062f <code>react-router<\/code>\u0628\u0634\u0631<\/p>\n<p>\u062e\u0648\u0628 \u060c \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u0645\u0624\u0644\u0641\u0647 \u0622\u0645\u0627\u062f\u0647 \u0627\u0633\u062a! \u062a\u0645\u0627\u0645 \u0622\u0646\u0686\u0647 \u0628\u0627\u0642\u06cc \u0645\u0627\u0646\u062f\u0647 \u0634\u0634 \u0627\u0633\u062a page \u0645\u0633\u06cc\u0631\u0647\u0627 \u062f\u0631 \u067e\u0648\u0634\u0647 \u0635\u0641\u062d\u0627\u062a \u0645\u0627.<\/p>\n<p>\u0627\u0648\u0644\u06cc\u0646 \u067e\u0631\u0648\u0646\u062f\u0647 \u0627\u06cc \u06a9\u0647 \u0645\u0627 \u06a9\u0627\u0631 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u0631\u0648\u06cc \u062e\u0648\u0627\u0647\u062f \u0634\u062f <code>Career.jsx<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0645\u0646 \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u062e\u0648\u0627\u0646\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u06af\u0630\u0634\u062a\u0647 \u062a\u0642\u0633\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u0645 \u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0628\u062e\u0634 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0631\u0627 \u0628\u0627 \u0642\u0633\u0645\u062a \u0627\u0648\u0644 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"lang-javascript\"><span class=\"hljs-keyword\">import<\/span> { useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Chat <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/Chat\"<\/span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Career<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> initialMessage =\n    <span class=\"hljs-string\">\"Hello! I'm CareerAgent, the career specialist. I can provide information about skills, experience, and professional background. What would you like to know?\"<\/span>;\n\n  <span class=\"hljs-keyword\">const<\/span> [currentQuestion, setCurrentQuestion] = useState(<span class=\"hljs-string\">\"\"<\/span>);\n\n  <span class=\"hljs-keyword\">const<\/span> askCareerQuestion = <span class=\"hljs-function\">(<span class=\"hljs-params\">question<\/span>) =&gt;<\/span> {\n    setCurrentQuestion(<span class=\"hljs-string\">`<span class=\"hljs-subst\">${question}<\/span> [<span class=\"hljs-subst\">${<span class=\"hljs-built_in\">Date<\/span>.now()}<\/span>]`<\/span>);\n\n    <span class=\"hljs-built_in\">setTimeout<\/span>(<span class=\"hljs-function\">() =&gt;<\/span> {\n      setCurrentQuestion(<span class=\"hljs-string\">\"\"<\/span>);\n    }, <span class=\"hljs-number\">500<\/span>);\n  };\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    &lt;div&gt;\n      &lt;div className=\"flex flex-col md:flex-row gap-8 mb-12\"&gt;\n        &lt;div className=\"md:w-1\/3\"&gt;\n          &lt;h1 className=\"text-3xl font-bold mb-4\"&gt;Career&lt;\/h1&gt;\n          &lt;p className=\"text-lg mb-4\"&gt;\n            Here you can find information about my professional background,\n            skills, and experience. Feel free to ask CareerAgent for more\n            details.\n          &lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;div className=\"md:w-2\/3\"&gt;\n          &lt;div className=\"bg-white rounded-lg shadow-md overflow-hidden\"&gt;\n            &lt;div className=\"p-6\"&gt;\n              &lt;h5 className=\"text-xl font-semibold mb-2\"&gt;\n                Chat with CareerAgent\n              &lt;\/h5&gt;\n              &lt;p className=\"text-gray-600 mb-4\"&gt;\n                Our career specialist can provide information about skills,\n                experience, and professional background.\n              &lt;\/p&gt;\n              &lt;Chat\n                agentType=\"career\"\n                initialMessage={initialMessage}\n                agentInitials=\"CA\"\n                directQuestion={currentQuestion}\n              \/&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n\n      &lt;div className=\"mb-12\"&gt;\n        &lt;div className=\"mb-6\"&gt;\n          &lt;h2 className=\"text-2xl font-bold mb-4\"&gt;Skills&lt;\/h2&gt;\n        &lt;\/div&gt;\n        &lt;div className=\"grid grid-cols-1 md:grid-cols-3 gap-6\"&gt;\n          &lt;div className=\"bg-white rounded-lg shadow-md overflow-hidden h-full\"&gt;\n            &lt;div className=\"p-6\"&gt;\n              &lt;h5 className=\"text-xl font-semibold mb-4\"&gt;\n                Frontend Development\n              &lt;\/h5&gt;\n              &lt;ul className=\"divide-y divide-gray-200\"&gt;\n                &lt;li className=\"py-3 flex justify-between items-center\"&gt;\n                  React\n                  &lt;span className=\"px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full\"&gt;\n                    Expert\n                  &lt;\/span&gt;\n                &lt;\/li&gt;\n                &lt;li className=\"py-3 flex justify-between items-center\"&gt;\n                  Vue.js\n                  &lt;span className=\"px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full\"&gt;\n                    Advanced\n                  &lt;\/span&gt;\n                &lt;\/li&gt;\n                &lt;li className=\"py-3 flex justify-between items-center\"&gt;\n                  Angular\n                  &lt;span className=\"px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full\"&gt;\n                    Intermediate\n                  &lt;\/span&gt;\n                &lt;\/li&gt;\n                &lt;li className=\"py-3 flex justify-between items-center\"&gt;\n                  TypeScript\n                  &lt;span className=\"px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full\"&gt;\n                    Advanced\n                  &lt;\/span&gt;\n                &lt;\/li&gt;\n                &lt;li className=\"py-3 flex justify-between items-center\"&gt;\n                  CSS\/SASS\n                  &lt;span className=\"px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full\"&gt;\n                    Expert\n                  &lt;\/span&gt;\n                &lt;\/li&gt;\n              &lt;\/ul&gt;\n              &lt;button\n                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\"\n                onClick={() =&gt;\n                  askCareerQuestion(\n                    \"Tell me more about your frontend development skills\"\n                  )\n                }\n              &gt;\n                Ask About Frontend Skills\n              &lt;\/button&gt;\n<\/code><\/pre>\n<p>\u0645\u0627\u0646\u0646\u062f \u06af\u0630\u0634\u062a\u0647 \u060c \u0645\u0627 \u0648\u0627\u0631\u062f\u0627\u062a \u060c \u0627\u06cc\u0627\u0644\u062a \u0647\u0627 \u0648 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627 \u0631\u0627 \u062f\u0627\u0631\u06cc\u0645. \u0627\u06a9\u0646\u0648\u0646 \u0628\u0631\u0627\u06cc \u0642\u0633\u0645\u062a \u062f\u0648\u0645 \u060c \u06a9\u0647 \u0627\u06cc\u0646\u062c\u0627 \u0627\u0633\u062a:<\/p>\n<pre><code class=\"lang-javascript\"> &lt;\/div&gt;\n          &lt;\/div&gt;\n          <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bg-white rounded-lg shadow-md overflow-hidden h-full\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"p-6\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-xl font-semibold mb-4\"<\/span>&gt;<\/span>\n                Backend Development\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"divide-y divide-gray-200\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-3 flex justify-between items-center\"<\/span>&gt;<\/span>\n                  Node.js\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full\"<\/span>&gt;<\/span>\n                    Expert\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-3 flex justify-between items-center\"<\/span>&gt;<\/span>\n                  Python\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full\"<\/span>&gt;<\/span>\n                    Advanced\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-3 flex justify-between items-center\"<\/span>&gt;<\/span>\n                  Django\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full\"<\/span>&gt;<\/span>\n                    Intermediate\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-3 flex justify-between items-center\"<\/span>&gt;<\/span>\n                  Flask\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full\"<\/span>&gt;<\/span>\n                    Advanced\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-3 flex justify-between items-center\"<\/span>&gt;<\/span>\n                  SQL\/NoSQL\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full\"<\/span>&gt;<\/span>\n                    Advanced\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mt-4 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors\"<\/span>\n                <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span>\n                  askCareerQuestion(\n                    \"Tell me more about your backend development skills\"\n                  )\n                }\n              &gt;\n                Ask About Backend Skills\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n          <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bg-white rounded-lg shadow-md overflow-hidden h-full\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"p-6\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-xl font-semibold mb-4\"<\/span>&gt;<\/span>Other Skills<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"divide-y divide-gray-200\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-3 flex justify-between items-center\"<\/span>&gt;<\/span>\n                  DevOps\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full\"<\/span>&gt;<\/span>\n                    Intermediate\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-3 flex justify-between items-center\"<\/span>&gt;<\/span>\n                  UI\/UX Design\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full\"<\/span>&gt;<\/span>\n                    Advanced\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-3 flex justify-between items-center\"<\/span>&gt;<\/span>\n                  Project Management\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full\"<\/span>&gt;<\/span>\n                    Advanced\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-3 flex justify-between items-center\"<\/span>&gt;<\/span>\n                  Agile Methodologies\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full\"<\/span>&gt;<\/span>\n                    Expert\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-3 flex justify-between items-center\"<\/span>&gt;<\/span>\n                  Technical Writing\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full\"<\/span>&gt;<\/span>\n                    Intermediate\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mt-4 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors\"<\/span>\n                <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span>\n                  askCareerQuestion(\"What other skills do you have?\")\n                }\n              &gt;\n                Ask About Other Skills\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n<\/code><\/pre>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06a9\u062f \u0645\u0624\u0644\u0641\u0647 \u0628\u0633\u06cc\u0627\u0631 \u0628\u06cc\u0634\u062a\u0631\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f page\u0628\u0634\u0631 \u062f\u0631 \u0622\u062e\u0631 \u060c \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u06cc\u0645 \u0642\u0633\u0645\u062a \u0622\u062e\u0631 \u06a9\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 page:<\/p>\n<pre><code class=\"lang-javascript\">&lt;div className=<span class=\"hljs-string\">\"mb-12\"<\/span>&gt;\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mb-6\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-2xl font-bold mb-4\"<\/span>&gt;<\/span>Experience<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"space-y-6\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bg-white rounded-lg shadow-md overflow-hidden\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"p-6\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex justify-between items-start mb-2\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-xl font-semibold\"<\/span>&gt;<\/span>\n                  Senior Full-Stack Developer\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-500 text-sm\"<\/span>&gt;<\/span>2020 - Present<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h6<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-600 mb-3\"<\/span>&gt;<\/span>Tech Innovations Inc.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h6<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-700 mb-4\"<\/span>&gt;<\/span>\n                Lead developer for multiple web and mobile applications,\n                managing a team of 5 developers. Implemented CI\/CD pipelines and\n                improved development workflow efficiency by 30%.\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors\"<\/span>\n                <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span>\n                  askCareerQuestion(\n                    \"Tell me more about your experience at Tech Innovations Inc.\"\n                  )\n                }\n              &gt;\n                More Details\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bg-white rounded-lg shadow-md overflow-hidden\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"p-6\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex justify-between items-start mb-2\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-xl font-semibold\"<\/span>&gt;<\/span>Full-Stack Developer<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-500 text-sm\"<\/span>&gt;<\/span>2017 - 2020<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h6<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-600 mb-3\"<\/span>&gt;<\/span>WebSolutions Co.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h6<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-700 mb-4\"<\/span>&gt;<\/span>\n                Developed and maintained multiple client websites and web\n                applications. Specialized in React frontend development and\n                Node.js backend services.\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors\"<\/span>\n                <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span>\n                  askCareerQuestion(\n                    \"Tell me more about your experience at WebSolutions Co.\"\n                  )\n                }\n              &gt;\n                More Details\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bg-white rounded-lg shadow-md overflow-hidden\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"p-6\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex justify-between items-start mb-2\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-xl font-semibold\"<\/span>&gt;<\/span>Junior Web Developer<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-500 text-sm\"<\/span>&gt;<\/span>2015 - 2017<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h6<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-600 mb-3\"<\/span>&gt;<\/span>Digital Creations Ltd.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h6<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-700 mb-4\"<\/span>&gt;<\/span>\n                Worked \u0631\u0648\u06cc frontend development for e-commerce websites. Gained\n                experience with JavaScript, CSS, and responsive design\n                principles.\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors\"<\/span>\n                <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span>\n                  askCareerQuestion(\n                    \"Tell me more about your experience at Digital Creations Ltd.\"\n                  )\n                }\n              &gt;\n                More Details\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n      &lt;\/div&gt;\n\n      <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"grid grid-cols-1 md:grid-cols-2 gap-6\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bg-white rounded-lg shadow-md overflow-hidden\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"p-6\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-xl font-semibold mb-4\"<\/span>&gt;<\/span>Education<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mb-6\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex justify-between items-start mb-1\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h6<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"font-medium\"<\/span>&gt;<\/span>\n                  Master of Science in Computer Science\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h6<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-500 text-sm\"<\/span>&gt;<\/span>2013 - 2015<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-600\"<\/span>&gt;<\/span>University of Technology<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex justify-between items-start mb-1\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h6<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"font-medium\"<\/span>&gt;<\/span>\n                  Bachelor of Science in Software Engineering\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h6<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-500 text-sm\"<\/span>&gt;<\/span>2009 - 2013<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-600\"<\/span>&gt;<\/span>State University<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n              <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mt-4 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors\"<\/span>\n              <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span>\n                askCareerQuestion(\n                  \"Tell me more about your educational background\"\n                )\n              }\n            &gt;\n              Ask About Education\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bg-white rounded-lg shadow-md overflow-hidden\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"p-6\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-xl font-semibold mb-4\"<\/span>&gt;<\/span>Certifications<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"divide-y divide-gray-200\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-3 flex justify-between items-center\"<\/span>&gt;<\/span>\n                AWS Certified Solutions Architect\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-500 text-sm\"<\/span>&gt;<\/span>2022<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-3 flex justify-between items-center\"<\/span>&gt;<\/span>\n                Google Cloud Professional Developer\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-500 text-sm\"<\/span>&gt;<\/span>2021<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-3 flex justify-between items-center\"<\/span>&gt;<\/span>\n                Microsoft Certified: Azure Developer Associate\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-500 text-sm\"<\/span>&gt;<\/span>2020<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-3 flex justify-between items-center\"<\/span>&gt;<\/span>\n                Certified Scrum Master\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-500 text-sm\"<\/span>&gt;<\/span>2019<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n              <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mt-4 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors\"<\/span>\n              <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span>\n                askCareerQuestion(\"Tell me more about your certifications\")\n              }\n            &gt;\n              Ask About Certifications\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n    &lt;\/div&gt;\n  );\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> Career;\n<\/code><\/pre>\n<p>\u0648 \u0627\u06cc\u0646 \u0645\u0627 \u0631\u0627 \u06a9\u0627\u0645\u0644 \u0645\u06cc \u06a9\u0646\u062f <code>Career.jsx<\/code> page: \u0645\u0627 \u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634 \u0627\u0632 \u06a9\u062f \u0641\u0631\u0645 \u0647\u0627 \u0648 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u062f\u0627\u0631\u06cc\u0645.<\/p>\n<p>\u0628\u0639\u062f\u06cc \u0645\u0627\u0633\u062a <code>Contact.jsx<\/code> page\u0628\u0634\u0631 \u0645\u0627\u0646\u0646\u062f \u0642\u0628\u0644 \u060c \u0645\u0646 \u0628\u0631\u0627\u06cc \u062e\u0648\u0627\u0646\u0627\u06cc\u06cc \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u0631\u0627 \u062a\u0642\u0633\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u0645 \u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0642\u0633\u0645\u062a \u0627\u0648\u0644 \u0627\u06cc\u0646 \u06a9\u062f \u0631\u0627 \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"lang-javascript\"><span class=\"hljs-keyword\">import<\/span> { useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Contact<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> [formData, setFormData] = useState({\n    <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"\"<\/span>,\n    <span class=\"hljs-attr\">email<\/span>: <span class=\"hljs-string\">\"\"<\/span>,\n    <span class=\"hljs-attr\">subject<\/span>: <span class=\"hljs-string\">\"\"<\/span>,\n    <span class=\"hljs-attr\">message<\/span>: <span class=\"hljs-string\">\"\"<\/span>,\n  });\n  <span class=\"hljs-keyword\">const<\/span> [formResponse, setFormResponse] = useState(<span class=\"hljs-literal\">null<\/span>);\n\n  <span class=\"hljs-keyword\">const<\/span> handleChange = <span class=\"hljs-function\">(<span class=\"hljs-params\">e<\/span>) =&gt;<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> { id, value } = e.target;\n    setFormData(<span class=\"hljs-function\">(<span class=\"hljs-params\">prevData<\/span>) =&gt;<\/span> ({\n      ...prevData,\n      [id]: value,\n    }));\n  };\n\n  <span class=\"hljs-keyword\">const<\/span> handleSubmit = <span class=\"hljs-function\">(<span class=\"hljs-params\">e<\/span>) =&gt;<\/span> {\n    e.preventDefault();\n\n    setFormResponse({\n      <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"success\"<\/span>,\n      <span class=\"hljs-attr\">message<\/span>:\n        <span class=\"hljs-string\">\"Thank you for your message! I'll get back to you as soon as possible.\"<\/span>,\n    });\n\n    setFormData({\n      <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"\"<\/span>,\n      <span class=\"hljs-attr\">email<\/span>: <span class=\"hljs-string\">\"\"<\/span>,\n      <span class=\"hljs-attr\">subject<\/span>: <span class=\"hljs-string\">\"\"<\/span>,\n      <span class=\"hljs-attr\">message<\/span>: <span class=\"hljs-string\">\"\"<\/span>,\n    });\n\n    <span class=\"hljs-built_in\">document<\/span>\n      .getElementById(<span class=\"hljs-string\">\"form-response\"<\/span>)\n      .scrollIntoView({ <span class=\"hljs-attr\">behavior<\/span>: <span class=\"hljs-string\">\"smooth\"<\/span> });\n  };\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    &lt;div&gt;\n      &lt;div className=\"flex flex-col md:flex-row gap-8 mb-12\"&gt;\n        &lt;div className=\"md:w-2\/3\"&gt;\n          &lt;h1 className=\"text-3xl font-bold mb-4\"&gt;Contact Me&lt;\/h1&gt;\n          &lt;p className=\"text-lg mb-4\"&gt;\n            Have a question or want to discuss a potential project? Feel free to\n            reach out using the form below or through any of my social media\n            channels.\n          &lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;div className=\"md:w-1\/3\"&gt;\n          &lt;div className=\"bg-white rounded-lg shadow-md overflow-hidden\"&gt;\n            &lt;div className=\"p-6\"&gt;\n              &lt;h5 className=\"text-xl font-semibold mb-4\"&gt;Quick Links&lt;\/h5&gt;\n              &lt;div className=\"flex flex-col gap-2\"&gt;\n                &lt;a\n                  href=\"https:\/\/www.freecodecamp.org\/projects\"\n                  className=\"py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 text-center transition-colors\"\n                &gt;\n                  View Projects\n                &lt;\/a&gt;\n                &lt;a\n                  href=\"http:\/\/www.freecodecamp.org\/services\"\n                  className=\"py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 text-center transition-colors\"\n                &gt;\n                  Services &amp; Pricing\n                &lt;\/a&gt;\n                &lt;a\n                  href=\"http:\/\/www.freecodecamp.org\/research\"\n                  className=\"py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 text-center transition-colors\"\n                &gt;\n                  Research &amp; Resources\n                &lt;\/a&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n\n      &lt;div className=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-12\"&gt;\n        &lt;div className=\"bg-white rounded-lg shadow-md overflow-hidden\"&gt;\n          &lt;div className=\"p-6\"&gt;\n            &lt;h5 className=\"text-xl font-semibold mb-4\"&gt;Contact Form&lt;\/h5&gt;\n            &lt;form id=\"contact-form\" onSubmit={handleSubmit}&gt;\n              &lt;div className=\"mb-4\"&gt;\n                &lt;label\n                  htmlFor=\"name\"\n                  className=\"block text-sm font-medium text-gray-700 mb-1\"\n                &gt;\n                  Name\n                &lt;\/label&gt;\n                &lt;input\n                  type=\"text\"\n                  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\"\n                  id=\"name\"\n                  placeholder=\"Your Name\"\n                  required\n                  value={formData.name}\n                  onChange={handleChange}\n                \/&gt;\n              &lt;\/div&gt;\n<\/code><\/pre>\n<p>\u0645\u0627 \u0648\u0627\u0631\u062f\u0627\u062a \u060c \u06a9\u0627\u0631\u06a9\u0631\u062f\u0647\u0627 \u0648 \u0628\u062e\u0634\u06cc \u0627\u0632 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u062f\u0627\u0631\u06cc\u0645. \u062f\u0631 \u0622\u062e\u0631 \u060c \u0642\u0633\u0645\u062a \u062f\u0648\u0645 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u06a9\u0645\u06cc\u0644 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f page:<\/p>\n<pre><code class=\"lang-javascript\">&lt;div className=<span class=\"hljs-string\">\"mb-4\"<\/span>&gt;\n                <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span>\n                  <span class=\"hljs-attr\">htmlFor<\/span>=<span class=\"hljs-string\">\"email\"<\/span>\n                  <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"block text-sm font-medium text-gray-700 mb-1\"<\/span>\n                &gt;<\/span>\n                  Email\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span><\/span>\n                <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span>\n                  <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"email\"<\/span>\n                  <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"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\"<\/span>\n                  <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"email\"<\/span>\n                  <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"your.email@example.com\"<\/span>\n                  <span class=\"hljs-attr\">required<\/span>\n                  <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">{formData.email}<\/span>\n                  <span class=\"hljs-attr\">onChange<\/span>=<span class=\"hljs-string\">{handleChange}<\/span>\n                \/&gt;<\/span><\/span>\n              &lt;\/div&gt;\n              <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mb-4\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span>\n                  <span class=\"hljs-attr\">htmlFor<\/span>=<span class=\"hljs-string\">\"subject\"<\/span>\n                  <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"block text-sm font-medium text-gray-700 mb-1\"<\/span>\n                &gt;<\/span>\n                  Subject\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span>\n                  <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span>\n                  <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"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\"<\/span>\n                  <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"subject\"<\/span>\n                  <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Subject\"<\/span>\n                  <span class=\"hljs-attr\">required<\/span>\n                  <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">{formData.subject}<\/span>\n                  <span class=\"hljs-attr\">onChange<\/span>=<span class=\"hljs-string\">{handleChange}<\/span>\n                \/&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n              <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mb-4\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span>\n                  <span class=\"hljs-attr\">htmlFor<\/span>=<span class=\"hljs-string\">\"message\"<\/span>\n                  <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"block text-sm font-medium text-gray-700 mb-1\"<\/span>\n                &gt;<\/span>\n                  Message\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">textarea<\/span>\n                  <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"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\"<\/span>\n                  <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"message\"<\/span>\n                  <span class=\"hljs-attr\">rows<\/span>=<span class=\"hljs-string\">\"5\"<\/span>\n                  <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Your message...\"<\/span>\n                  <span class=\"hljs-attr\">required<\/span>\n                  <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">{formData.message}<\/span>\n                  <span class=\"hljs-attr\">onChange<\/span>=<span class=\"hljs-string\">{handleChange}<\/span>\n                &gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">textarea<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n              <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n                <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"submit\"<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors\"<\/span>\n              &gt;<\/span>\n                Send Message\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><\/span>\n            &lt;\/form&gt;\n            <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>\n              <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"form-response\"<\/span>\n              <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mt-4\"<\/span>\n              <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{{<\/span> <span class=\"hljs-attr\">display:<\/span> <span class=\"hljs-attr\">formResponse<\/span> ? \"<span class=\"hljs-attr\">block<\/span>\" <span class=\"hljs-attr\">:<\/span> \"<span class=\"hljs-attr\">none<\/span>\" }}\n            &gt;<\/span>\n              {formResponse &amp;&amp; (\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>\n                  <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{<\/span>`<span class=\"hljs-attr\">p-4<\/span> ${\n                    <span class=\"hljs-attr\">formResponse.type<\/span> === <span class=\"hljs-string\">\"success\"<\/span>\n                      ? \"<span class=\"hljs-attr\">bg-green-100<\/span> <span class=\"hljs-attr\">text-green-700<\/span>\"\n                      <span class=\"hljs-attr\">:<\/span> \"<span class=\"hljs-attr\">bg-red-100<\/span> <span class=\"hljs-attr\">text-red-700<\/span>\"\n                  } <span class=\"hljs-attr\">rounded-md<\/span>`}\n                &gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bi bi-check-circle-fill mr-2\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span>\n                  {formResponse.message}\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n              )}\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"space-y-6\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bg-white rounded-lg shadow-md overflow-hidden\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"p-6\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-xl font-semibold mb-4\"<\/span>&gt;<\/span>\n                Contact Information\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"space-y-3\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex items-center\"<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bi bi-envelope mr-2\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span>\n                    <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"mailto:contact@example.com\"<\/span>\n                    <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-blue-500 hover:underline\"<\/span>\n                  &gt;<\/span>\n                    contact@example.com\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex items-center\"<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bi bi-geo-alt mr-2\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span>\n                  UK\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-xl font-semibold mt-6 mb-3\"<\/span>&gt;<\/span>\n                Connect \u0631\u0648\u06cc Social Media\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex flex-wrap gap-2\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span>\n                  <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span>\n                  <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"px-3 py-1.5 border border-gray-800 text-gray-800 rounded-md hover:bg-gray-100 flex items-center transition-colors\"<\/span>\n                &gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bi bi-github mr-1\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> GitHub\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span>\n                  <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span>\n                  <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"px-3 py-1.5 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 flex items-center transition-colors\"<\/span>\n                &gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bi bi-linkedin mr-1\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> LinkedIn\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span>\n                  <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span>\n                  <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"px-3 py-1.5 border border-gray-800 text-gray-800 rounded-md hover:bg-gray-100 flex items-center transition-colors\"<\/span>\n                &gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bi bi-twitter mr-1\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> X\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bg-white rounded-lg shadow-md overflow-hidden\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"p-6\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-xl font-semibold mb-3\"<\/span>&gt;<\/span>Availability<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-700 mb-3\"<\/span>&gt;<\/span>\n                I'm currently available for freelance work and consulting. My\n                typical response time is within 24 hours.\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-700\"<\/span>&gt;<\/span>\n                For urgent inquiries, please call the phone number listed above.\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  );\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> Contact;\n<\/code><\/pre>\n<p>\u0628\u0627 \u0622\u0646 \u060c \u0627\u06cc\u0646 page \u0627\u06a9\u0646\u0648\u0646 \u0627\u0646\u062c\u0627\u0645 \u0634\u062f\u0647 \u0627\u0633\u062a \u060c \u0648 \u0645\u0627 \u0628\u0642\u06cc\u0647 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627 \u0648 \u0641\u0631\u0645 \u0647\u0627 \u0631\u0627 \u062f\u0627\u0631\u06cc\u0645.<\/p>\n<p>\u062e\u0648\u0628 \u0641\u0642\u0637 \u0686\u0647\u0627\u0631 \u0635\u0641\u062d\u0647 \u0628\u0627\u0642\u06cc \u0645\u0627\u0646\u062f\u0647 \u0627\u0633\u062a: \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06a9\u0627\u0631 \u06a9\u0646\u06cc\u0645 \u0631\u0648\u06cc \u062e\u0627\u0646\u0647 page \u0627\u0648\u0644 \u06a9\u062f \u0686\u0646\u062f\u0627\u0646 \u0628\u0632\u0631\u06af \u0646\u06cc\u0633\u062a \u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0647\u0645\u0647 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u0647\u0627 \u0631\u0627 \u06cc\u06a9\u0628\u0627\u0631\u0647 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645.<\/p>\n<p>\u0627\u06cc\u0646 \u06a9\u062f \u0628\u0631\u0627\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0628\u0647 <code>Home.jsx<\/code> page  \u067e\u0631\u0648\u0646\u062f\u0647:<\/p>\n<pre><code class=\"lang-javascript\"><span class=\"hljs-keyword\">import<\/span> { Link } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-router'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Chat <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'..\/components\/Chat'<\/span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Home<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> initialMessage =\n    <span class=\"hljs-string\">\"Hello! I'm WelcomeAgent, the welcome specialist. I can help you navigate this portfolio website. Are you an employer, client, or fellow programmer?\"<\/span>;\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex flex-col md:flex-row gap-8 mb-12\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"md:w-1\/3\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-3xl font-bold mb-4\"<\/span>&gt;<\/span>Welcome to my Portfolio<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-lg mb-4\"<\/span>&gt;<\/span>\n            This portfolio showcases my work and skills with the help of\n            specialized AI agents. Each agent is designed to assist you with\n            different aspects of my portfolio.\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-700\"<\/span>&gt;<\/span>\n            Feel free to interact with the WelcomeAgent to get personalized\n            recommendations \u0631\u0648\u06cc which sections of the portfolio to explore based\n            \u0631\u0648\u06cc your interests.\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"md:w-2\/3\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bg-white rounded-lg shadow-md overflow-hidden\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"p-6\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-xl font-semibold mb-2\"<\/span>&gt;<\/span>\n                Chat with WelcomeAgent\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-600 mb-4\"<\/span>&gt;<\/span>\n                Our welcome specialist can help you navigate this portfolio\n                website.\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Chat<\/span>\n                <span class=\"hljs-attr\">agentType<\/span>=<span class=\"hljs-string\">\"welcome\"<\/span>\n                <span class=\"hljs-attr\">initialMessage<\/span>=<span class=\"hljs-string\">{initialMessage}<\/span>\n                <span class=\"hljs-attr\">agentInitials<\/span>=<span class=\"hljs-string\">\"WA\"<\/span>\n              \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mb-12\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mb-6\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-2xl font-bold mb-4\"<\/span>&gt;<\/span>Meet the Agents<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"grid grid-cols-1 md:grid-cols-3 gap-6\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bg-white rounded-lg shadow-md overflow-hidden h-full\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"p-6 flex flex-col items-center\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"agent-avatar-placeholder mb-4\"<\/span>&gt;<\/span>PA<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-xl font-semibold mb-2\"<\/span>&gt;<\/span>ProjectAgent<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-600 mb-4 text-center\"<\/span>&gt;<\/span>\n                Provides detailed information about my projects, technologies\n                used, and challenges overcome.\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span>\n                <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"https:\/\/www.freecodecamp.org\/projects\"<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mt-auto py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors\"<\/span>\n              &gt;<\/span>\n                View Projects\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bg-white rounded-lg shadow-md overflow-hidden h-full\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"p-6 flex flex-col items-center\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"agent-avatar-placeholder mb-4\"<\/span>&gt;<\/span>CA<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-xl font-semibold mb-2\"<\/span>&gt;<\/span>CareerAgent<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-600 mb-4 text-center\"<\/span>&gt;<\/span>\n                Shares information about my skills, experience, and professional\n                background.\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span>\n                <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"\/career\"<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mt-auto py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors\"<\/span>\n              &gt;<\/span>\n                View Career\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bg-white rounded-lg shadow-md overflow-hidden h-full\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"p-6 flex flex-col items-center\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"agent-avatar-placeholder mb-4\"<\/span>&gt;<\/span>BA<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-xl font-semibold mb-2\"<\/span>&gt;<\/span>BusinessAdvisor<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-600 mb-4 text-center\"<\/span>&gt;<\/span>\n                Provides information about services, pricing, and client\n                engagement process.\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span>\n                <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"\/services\"<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mt-auto py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors\"<\/span>\n              &gt;<\/span>\n                View Services\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"grid grid-cols-1 md:grid-cols-2 gap-6\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bg-white rounded-lg shadow-md overflow-hidden h-full\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"p-6\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-xl font-semibold mb-2\"<\/span>&gt;<\/span>Featured Projects<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-600 mb-4\"<\/span>&gt;<\/span>\n              Check out some of my recent work:\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"divide-y divide-gray-200\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-3 px-2\"<\/span>&gt;<\/span>E-commerce Platform<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-3 px-2\"<\/span>&gt;<\/span>Task Management Application<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-3 px-2\"<\/span>&gt;<\/span>Data Visualization Dashboard<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mt-4\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span>\n                <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"https:\/\/www.freecodecamp.org\/projects\"<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"inline-block py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors\"<\/span>\n              &gt;<\/span>\n                View All Projects\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bg-white rounded-lg shadow-md overflow-hidden h-full\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"p-6\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-xl font-semibold mb-2\"<\/span>&gt;<\/span>Research &amp; Insights<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-600 mb-4\"<\/span>&gt;<\/span>\n              Explore my research \u0631\u0648\u06cc emerging technologies and industry trends:\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"divide-y divide-gray-200\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-3 px-2\"<\/span>&gt;<\/span>AI in Web Development<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-3 px-2\"<\/span>&gt;<\/span>Modern Frontend Frameworks<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-3 px-2\"<\/span>&gt;<\/span>Cloud Architecture Patterns<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mt-4\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span>\n                <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"\/research\"<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"inline-block py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors\"<\/span>\n              &gt;<\/span>\n                View Research\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> Home;\n<\/code><\/pre>\n<p>\u0627\u06cc\u0646 \u06a9\u062f \u0628\u0631\u0627\u06cc \u062e\u0627\u0646\u0647 \u0645\u0627 \u062f\u0627\u0631\u062f page \u0648 \u0627\u0633\u062a\u0642\u0628\u0627\u0644<\/p>\n<p>\u062e\u0648\u0628 \u060c \u062d\u0627\u0644\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06a9\u0627\u0631 \u06a9\u0646\u06cc\u0645 \u0631\u0648\u06cc \u062f\u0631 <code>Projects.jsx<\/code> page\u0628\u0634\u0631 \u0628\u0631\u0627\u06cc \u062e\u0648\u0627\u0646\u0627\u06cc\u06cc \u060c \u062a\u0642\u0633\u06cc\u0645 \u062f\u0648\u0628\u0627\u0631\u0647 \u06a9\u062f \u0628\u0647 \u0646\u0635\u0641 \u0633\u0627\u062f\u0647 \u062a\u0631 \u0627\u0633\u062a. \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0642\u0633\u0645\u062a \u0627\u0648\u0644 \u0627\u0633\u062a:<\/p>\n<pre><code class=\"lang-javascript\"><span class=\"hljs-keyword\">import<\/span> { useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Chat <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/Chat\"<\/span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Projects<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> initialMessage =\n    <span class=\"hljs-string\">\"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?\"<\/span>;\n\n  <span class=\"hljs-keyword\">const<\/span> [currentQuestion, setCurrentQuestion] = useState(<span class=\"hljs-string\">\"\"<\/span>);\n\n  <span class=\"hljs-keyword\">const<\/span> askProjectQuestion = <span class=\"hljs-function\">(<span class=\"hljs-params\">question<\/span>) =&gt;<\/span> {\n    setCurrentQuestion(<span class=\"hljs-string\">`<span class=\"hljs-subst\">${question}<\/span> [<span class=\"hljs-subst\">${<span class=\"hljs-built_in\">Date<\/span>.now()}<\/span>]`<\/span>);\n\n    <span class=\"hljs-built_in\">setTimeout<\/span>(<span class=\"hljs-function\">() =&gt;<\/span> {\n      setCurrentQuestion(<span class=\"hljs-string\">\"\"<\/span>);\n    }, <span class=\"hljs-number\">500<\/span>);\n  };\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    &lt;div&gt;\n      &lt;div className=\"flex flex-col md:flex-row gap-8 mb-12\"&gt;\n        &lt;div className=\"md:w-1\/3\"&gt;\n          &lt;h1 className=\"text-3xl font-bold mb-4\"&gt;Projects&lt;\/h1&gt;\n          &lt;p className=\"text-lg mb-4\"&gt;\n            Here you can explore my portfolio of projects. Feel free to ask\n            ProjectAgent for more details about any project.\n          &lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;div className=\"md:w-2\/3\"&gt;\n          &lt;div className=\"bg-white rounded-lg shadow-md overflow-hidden\"&gt;\n            &lt;div className=\"p-6\"&gt;\n              &lt;h5 className=\"text-xl font-semibold mb-2\"&gt;\n                Chat with ProjectAgent\n              &lt;\/h5&gt;\n              &lt;p className=\"text-gray-600 mb-4\"&gt;\n                Our project specialist can provide detailed information about\n                projects, technologies, and challenges.\n              &lt;\/p&gt;\n              &lt;Chat\n                agentType=\"project\"\n                initialMessage={initialMessage}\n                agentInitials=\"PA\"\n                directQuestion={currentQuestion}\n              \/&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n\n      &lt;div className=\"mb-12\"&gt;\n        &lt;div className=\"mb-6\"&gt;\n          &lt;h2 className=\"text-2xl font-bold mb-4\"&gt;Featured Projects&lt;\/h2&gt;\n        &lt;\/div&gt;\n        &lt;div className=\"grid grid-cols-1 md:grid-cols-3 gap-6\"&gt;\n          &lt;div className=\"bg-white rounded-lg shadow-md overflow-hidden\"&gt;\n            &lt;div className=\"project-image-placeholder\"&gt;E-commerce Platform&lt;\/div&gt;\n            &lt;div className=\"p-6\"&gt;\n              &lt;h5 className=\"text-xl font-semibold mb-2\"&gt;\n                E-commerce Platform\n              &lt;\/h5&gt;\n              &lt;p className=\"text-gray-600 mb-4\"&gt;\n                A full-featured e-commerce platform with product management,\n                shopping cart, and payment processing.\n              &lt;\/p&gt;\n              &lt;div className=\"flex justify-between items-center\"&gt;\n                &lt;div className=\"flex space-x-2\"&gt;\n                  &lt;button\n                    type=\"button\"\n                    className=\"py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors\"\n                    onClick={() =&gt;\n                      askProjectQuestion(\n                        \"Tell me more about the E-commerce Platform project\"\n                      )\n                    }\n                  &gt;\n                    View Details\n                  &lt;\/button&gt;\n                  &lt;button\n                    type=\"button\"\n                    className=\"py-1.5 px-3 text-sm border border-gray-500 text-gray-500 rounded-md hover:bg-gray-50 transition-colors\"\n                    onClick={() =&gt;\n                      askProjectQuestion(\n                        \"What technologies were used in the E-commerce Platform project?\"\n                      )\n                    }\n                  &gt;\n                    Technologies\n                  &lt;\/button&gt;\n                &lt;\/div&gt;\n                &lt;span className=\"text-sm text-gray-500\"&gt;1402&lt;\/span&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div className=\"bg-white rounded-lg shadow-md overflow-hidden\"&gt;\n            &lt;div className=\"project-image-placeholder\"&gt;Task Management App&lt;\/div&gt;\n            &lt;div className=\"p-6\"&gt;\n              &lt;h5 className=\"text-xl font-semibold mb-2\"&gt;\n                Task Management Application\n              &lt;\/h5&gt;\n              &lt;p className=\"text-gray-600 mb-4\"&gt;\n                A collaborative task management application with real-time\n                updates and team collaboration features.\n              &lt;\/p&gt;\n              &lt;div className=\"flex justify-between items-center\"&gt;\n                &lt;div className=\"flex space-x-2\"&gt;\n                  &lt;button\n                    type=\"button\"\n                    className=\"py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors\"\n                    onClick={() =&gt;\n                      askProjectQuestion(\n                        \"Tell me more about the Task Management Application project\"\n                      )\n                    }\n                  &gt;\n                    View Details\n                  &lt;\/button&gt;\n<\/code><\/pre>\n<p>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0642\u0628\u0644\u0627\u064b \u0646\u06cc\u0632 \u06af\u0641\u062a\u0647 \u0634\u062f \u060c \u0645\u0627 \u0648\u0627\u0631\u062f\u0627\u062a \u060c \u062a\u0648\u0627\u0628\u0639 \u0648 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627 \u0631\u0627 \u062f\u0627\u0631\u06cc\u0645. \u062a\u06a9\u0645\u06cc\u0644 page \u0628\u0627 \u0642\u0633\u0645\u062a \u062f\u0648\u0645 \u06a9\u062f \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627:<\/p>\n<pre><code class=\"lang-javascript\"> &lt;button\n                    type=<span class=\"hljs-string\">\"button\"<\/span>\n                    className=<span class=\"hljs-string\">\"py-1.5 px-3 text-sm border border-gray-500 text-gray-500 rounded-md hover:bg-gray-50 transition-colors\"<\/span>\n                    onClick={<span class=\"hljs-function\">() =&gt;<\/span>\n                      askProjectQuestion(\n                        <span class=\"hljs-string\">\"What technologies were used in the Task Management Application project?\"<\/span>\n                      )\n                    }\n                  &gt;\n                    Technologies\n                  &lt;\/button&gt;\n                &lt;\/div&gt;\n                <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-sm text-gray-500\"<\/span>&gt;<\/span>2022<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span><\/span>\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n          <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bg-white rounded-lg shadow-md overflow-hidden\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"project-image-placeholder\"<\/span>&gt;<\/span>Data Visualization<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"p-6\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-xl font-semibold mb-2\"<\/span>&gt;<\/span>\n                Data Visualization Dashboard\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-600 mb-4\"<\/span>&gt;<\/span>\n                An interactive dashboard for visualizing complex datasets with\n                customizable charts and filters.\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex justify-between items-center\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex space-x-2\"<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n                    <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"button\"<\/span>\n                    <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors\"<\/span>\n                    <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span>\n                      askProjectQuestion(\n                        \"Tell me more about the Data Visualization Dashboard project\"\n                      )\n                    }\n                  &gt;\n                    View Details\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n                    <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"button\"<\/span>\n                    <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-1.5 px-3 text-sm border border-gray-500 text-gray-500 rounded-md hover:bg-gray-50 transition-colors\"<\/span>\n                    <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span>\n                      askProjectQuestion(\n                        \"What technologies were used in the Data Visualization Dashboard project?\"\n                      )\n                    }\n                  &gt;\n                    Technologies\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-sm text-gray-500\"<\/span>&gt;<\/span>2021<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n\n      <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"grid grid-cols-1 md:grid-cols-2 gap-6\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bg-white rounded-lg shadow-md overflow-hidden\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"p-6\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-xl font-semibold mb-2\"<\/span>&gt;<\/span>\n              Technical Skills Showcase\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-600 mb-4\"<\/span>&gt;<\/span>\n              These projects demonstrate proficiency in the following\n              technologies:\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"grid grid-cols-1 md:grid-cols-2 gap-4\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h6<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"font-semibold mb-2\"<\/span>&gt;<\/span>Frontend<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h6<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"list-disc pl-5 space-y-1\"<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>React<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>Vue.js<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>Angular<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>TypeScript<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>CSS\/SASS<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h6<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"font-semibold mb-2\"<\/span>&gt;<\/span>Backend<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h6<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"list-disc pl-5 space-y-1\"<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>Node.js<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>Python<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>Django<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>Flask<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>MongoDB<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n              <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mt-4 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors\"<\/span>\n              <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span>\n                askProjectQuestion(\n                  \"What other technologies are you proficient in?\"\n                )\n              }\n            &gt;\n              Ask About Other Skills\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bg-white rounded-lg shadow-md overflow-hidden\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"p-6\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-xl font-semibold mb-2\"<\/span>&gt;<\/span>Project Inquiry<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-600 mb-4\"<\/span>&gt;<\/span>\n              Interested in a specific type of project or technology? Ask\n              ProjectAgent for more information.\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex flex-col space-y-3\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors\"<\/span>\n                <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span>\n                  askProjectQuestion(\n                    \"Do you have any projects involving machine learning or AI?\"\n                  )\n                }\n              &gt;\n                Ask About AI Projects\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors\"<\/span>\n                <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span>\n                  askProjectQuestion(\"What are your most challenging projects?\")\n                }\n              &gt;\n                Ask About Challenging Projects\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors\"<\/span>\n                <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span>\n                  askProjectQuestion(\n                    \"Can you show me examples of your UI\/UX work?\"\n                  )\n                }\n              &gt;\n                Ask About UI\/UX Work\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n    &lt;\/div&gt;\n  );\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> Projects;\n<\/code><\/pre>\n<p>\u0628\u0627 \u0627\u0636\u0627\u0641\u0647 \u0634\u062f\u0646 \u0627\u062c\u0632\u0627\u06cc \u0628\u0627\u0642\u06cc\u0645\u0627\u0646\u062f\u0647 \u060c \u0627\u06cc\u0646 page \u0627\u06a9\u0646\u0648\u0646 \u06a9\u0627\u0645\u0644 \u0627\u0633\u062a<\/p>\n<p>\u0648\u0642\u062a \u0622\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f <code>Research.jsx<\/code> page\u060c \u0628\u0627 \u0634\u0631\u0648\u0639 \u0646\u06cc\u0645\u0647 \u0627\u0648\u0644 \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f:<\/p>\n<pre><code class=\"lang-javascript\"><span class=\"hljs-keyword\">import<\/span> { useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Chat <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/Chat\"<\/span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Research<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> initialMessage =\n    <span class=\"hljs-string\">\"Hello! I'm ResearchAgent, the research specialist. I can provide information about technologies, trends, and industry news. What would you like to know?\"<\/span>;\n  <span class=\"hljs-keyword\">const<\/span> [searchQuery, setSearchQuery] = useState(<span class=\"hljs-string\">\"\"<\/span>);\n  <span class=\"hljs-keyword\">const<\/span> [tech1, setTech1] = useState(<span class=\"hljs-string\">\"\"<\/span>);\n  <span class=\"hljs-keyword\">const<\/span> [tech2, setTech2] = useState(<span class=\"hljs-string\">\"\"<\/span>);\n\n  <span class=\"hljs-keyword\">const<\/span> [currentQuestion, setCurrentQuestion] = useState(<span class=\"hljs-string\">\"\"<\/span>);\n\n  <span class=\"hljs-keyword\">const<\/span> askResearchQuestion = <span class=\"hljs-function\">(<span class=\"hljs-params\">question<\/span>) =&gt;<\/span> {\n    setCurrentQuestion(<span class=\"hljs-string\">`<span class=\"hljs-subst\">${question}<\/span> [<span class=\"hljs-subst\">${<span class=\"hljs-built_in\">Date<\/span>.now()}<\/span>]`<\/span>);\n\n    <span class=\"hljs-built_in\">setTimeout<\/span>(<span class=\"hljs-function\">() =&gt;<\/span> {\n      setCurrentQuestion(<span class=\"hljs-string\">\"\"<\/span>);\n    }, <span class=\"hljs-number\">500<\/span>);\n  };\n\n  <span class=\"hljs-keyword\">const<\/span> handleSearch = <span class=\"hljs-function\">(<span class=\"hljs-params\">e<\/span>) =&gt;<\/span> {\n    e.preventDefault();\n    <span class=\"hljs-keyword\">if<\/span> (searchQuery.trim()) {\n      askResearchQuestion(<span class=\"hljs-string\">`Search for information about: <span class=\"hljs-subst\">${searchQuery}<\/span>`<\/span>);\n      setSearchQuery(<span class=\"hljs-string\">\"\"<\/span>);\n    }\n  };\n\n  <span class=\"hljs-keyword\">const<\/span> handleCompare = <span class=\"hljs-function\">(<span class=\"hljs-params\">e<\/span>) =&gt;<\/span> {\n    e.preventDefault();\n    <span class=\"hljs-keyword\">if<\/span> (tech1.trim() &amp;&amp; tech2.trim()) {\n      askResearchQuestion(<span class=\"hljs-string\">`Compare <span class=\"hljs-subst\">${tech1}<\/span> vs <span class=\"hljs-subst\">${tech2}<\/span>`<\/span>);\n      setTech1(<span class=\"hljs-string\">\"\"<\/span>);\n      setTech2(<span class=\"hljs-string\">\"\"<\/span>);\n    }\n  };\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    &lt;div&gt;\n      &lt;div className=\"flex flex-col md:flex-row gap-8 mb-12\"&gt;\n        &lt;div className=\"md:w-1\/3\"&gt;\n          &lt;h1 className=\"text-3xl font-bold mb-4\"&gt;Research &amp; Insights&lt;\/h1&gt;\n          &lt;p className=\"text-lg mb-4\"&gt;\n            Here you can explore research \u0631\u0648\u06cc technologies, trends, and industry\n            news. Feel free to ask ResearchAgent for more information.\n          &lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;div className=\"md:w-2\/3\"&gt;\n          &lt;div className=\"bg-white rounded-lg shadow-md overflow-hidden\"&gt;\n            &lt;div className=\"p-6\"&gt;\n              &lt;h5 className=\"text-xl font-semibold mb-2\"&gt;\n                Chat with ResearchAgent\n              &lt;\/h5&gt;\n              &lt;p className=\"text-gray-600 mb-4\"&gt;\n                Our research specialist can provide information about\n                technologies, trends, and industry news.\n              &lt;\/p&gt;\n              &lt;Chat\n                agentType=\"research\"\n                initialMessage={initialMessage}\n                agentInitials=\"RA\"\n                directQuestion={currentQuestion}\n              \/&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n\n      &lt;div className=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-12\"&gt;\n        &lt;div className=\"bg-white rounded-lg shadow-md overflow-hidden\"&gt;\n          &lt;div className=\"p-6\"&gt;\n            &lt;h5 className=\"text-xl font-semibold mb-3\"&gt;\n              Search for Information\n            &lt;\/h5&gt;\n            &lt;p className=\"text-gray-600 mb-4\"&gt;\n              Enter a topic to search for the latest information and insights.\n            &lt;\/p&gt;\n            &lt;form onSubmit={handleSearch}&gt;\n              &lt;div className=\"flex mb-4\"&gt;\n                &lt;input\n                  type=\"text\"\n                  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\"\n                  placeholder=\"e.g., WebAssembly, Edge Computing, etc.\"\n                  value={searchQuery}\n                  onChange={(e) =&gt; setSearchQuery(e.target.value)}\n                \/&gt;\n                &lt;button\n                  className=\"px-4 py-2 bg-blue-500 text-white rounded-r-md hover:bg-blue-600 transition-colors\"\n                  type=\"submit\"\n                &gt;\n                  Search\n                &lt;\/button&gt;\n              &lt;\/div&gt;\n            &lt;\/form&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div className=\"bg-white rounded-lg shadow-md overflow-hidden\"&gt;\n          &lt;div className=\"p-6\"&gt;\n            &lt;h5 className=\"text-xl font-semibold mb-3\"&gt;Compare Technologies&lt;\/h5&gt;\n            &lt;p className=\"text-gray-600 mb-4\"&gt;\n              Compare two technologies to understand their pros, cons, and use\n              cases.\n            &lt;\/p&gt;\n            &lt;form onSubmit={handleCompare}&gt;\n              &lt;div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3 mb-4\"&gt;\n                &lt;div&gt;\n                  &lt;input\n                    type=\"text\"\n                    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\"\n                    placeholder=\"First technology\"\n                    value={tech1}\n                    onChange={(e) =&gt; setTech1(e.target.value)}\n                  \/&gt;\n                &lt;\/div&gt;\n<\/code><\/pre>\n<p>\u0645\u0627 \u0648\u0627\u0631\u062f\u0627\u062a \u060c \u062f\u0648\u0644\u062a \u060c \u06a9\u0627\u0631\u06a9\u0631\u062f\u0647\u0627 \u0648 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u062d\u0642\u06cc\u0642 \u062f\u0627\u0631\u06cc\u0645 \u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0628\u0633\u06cc\u0627\u0631 \u0633\u0627\u062f\u0647 \u0627\u0633\u062a. \u0627\u06a9\u0646\u0648\u0646 \u060c \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 page \u0628\u0627 \u0627\u062a\u0645\u0627\u0645 \u0622\u0646 \u0628\u0627 \u0628\u0642\u06cc\u0647 \u06a9\u062f:<\/p>\n<pre><code class=\"lang-javascript\">&lt;div&gt;\n                  <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span>\n                    <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span>\n                    <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"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\"<\/span>\n                    <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Second technology\"<\/span>\n                    <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">{tech2}<\/span>\n                    <span class=\"hljs-attr\">onChange<\/span>=<span class=\"hljs-string\">{(e)<\/span> =&gt;<\/span> setTech2(e.target.value)}\n                  \/&gt;<\/span>\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n              <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors\"<\/span>\n                <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"submit\"<\/span>\n              &gt;<\/span>\n                Compare\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><\/span>\n            &lt;\/form&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n\n      <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mb-12\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mb-6\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-2xl font-bold mb-4\"<\/span>&gt;<\/span>Current Tech Trends<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"grid grid-cols-1 md:grid-cols-3 gap-6\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bg-white rounded-lg shadow-md overflow-hidden h-full\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"p-6 flex flex-col h-full\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-xl font-semibold mb-3\"<\/span>&gt;<\/span>\n                AI in Web Development\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-600 mb-4 flex-grow\"<\/span>&gt;<\/span>\n                Exploring how artificial intelligence is transforming web\n                development practices and tools.\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors self-start\"<\/span>\n                <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span>\n                  askResearchQuestion(\"Tell me about AI in web development\")\n                }\n              &gt;\n                Learn More\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bg-white rounded-lg shadow-md overflow-hidden h-full\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"p-6 flex flex-col h-full\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-xl font-semibold mb-3\"<\/span>&gt;<\/span>\n                Modern Frontend Frameworks\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-600 mb-4 flex-grow\"<\/span>&gt;<\/span>\n                Analysis of current frontend frameworks, their strengths, and\n                ideal use cases.\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors self-start\"<\/span>\n                <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span>\n                  askResearchQuestion(\"Compare modern frontend frameworks\")\n                }\n              &gt;\n                Learn More\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bg-white rounded-lg shadow-md overflow-hidden h-full\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"p-6 flex flex-col h-full\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-xl font-semibold mb-3\"<\/span>&gt;<\/span>\n                Cloud Architecture Patterns\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-600 mb-4 flex-grow\"<\/span>&gt;<\/span>\n                Best practices and patterns for designing scalable cloud-based\n                applications.\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors self-start\"<\/span>\n                <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span>\n                  askResearchQuestion(\"Explain cloud architecture patterns\")\n                }\n              &gt;\n                Learn More\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n\n      <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mb-6\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bg-white rounded-lg shadow-md overflow-hidden\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"p-6\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-xl font-semibold mb-3\"<\/span>&gt;<\/span>Industry Trends<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-600 mb-4\"<\/span>&gt;<\/span>\n              Stay updated \u0631\u0648\u06cc the latest trends in software development and\n              technology.\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n              <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors\"<\/span>\n              <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span>\n                askResearchQuestion(\n                  \"What are the current trends in software development and technology?\"\n                )\n              }\n            &gt;\n              Get Industry Trends\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n    &lt;\/div&gt;\n  );\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> Research;\n<\/code><\/pre>\n<p>\u0646\u06cc\u0645\u0647 \u062f\u0648\u0645 \u06a9\u062f \u062f\u0627\u0631\u0627\u06cc \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u0628\u0627\u0642\u06cc\u0645\u0627\u0646\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 page\u0628\u0634\u0631<\/p>\n<p>\u062d\u0627\u0644\u0627 \u0628\u0631\u0627\u06cc \u0641\u06cc\u0646\u0627\u0644 page \u06a9\u0647 \u0628\u0631\u0627\u06cc <code>Services.jsx<\/code>\u0628\u0634\u0631 \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u0628\u0633\u06cc\u0627\u0631 \u0628\u0632\u0631\u06af \u0627\u0633\u062a \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u0627 \u0622\u0646 \u0631\u0627 \u062a\u062c\u0632\u06cc\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<p>\u0648 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0627\u0648\u0644\u06cc\u0646 \u0642\u0633\u0645\u062a \u0627\u0632 \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u0627\u0636\u0627\u0641\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<pre><code class=\"lang-javascript\"><span class=\"hljs-keyword\">import<\/span> { useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> axios <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"axios\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Chat <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/Chat\"<\/span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Services<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> initialMessage =\n    <span class=\"hljs-string\">\"Hello! I'm BusinessAdvisor, the client specialist. I can provide information about services, pricing, and project details. What would you like to know?\"<\/span>;\n  <span class=\"hljs-keyword\">const<\/span> [projectDescription, setProjectDescription] = useState(<span class=\"hljs-string\">\"\"<\/span>);\n\n  <span class=\"hljs-keyword\">const<\/span> [currentQuestion, setCurrentQuestion] = useState(<span class=\"hljs-string\">\"\"<\/span>);\n\n  <span class=\"hljs-keyword\">const<\/span> askClientQuestion = <span class=\"hljs-function\">(<span class=\"hljs-params\">question<\/span>) =&gt;<\/span> {\n    setCurrentQuestion(<span class=\"hljs-string\">`<span class=\"hljs-subst\">${question}<\/span> [<span class=\"hljs-subst\">${<span class=\"hljs-built_in\">Date<\/span>.now()}<\/span>]`<\/span>);\n\n    <span class=\"hljs-built_in\">setTimeout<\/span>(<span class=\"hljs-function\">() =&gt;<\/span> {\n      setCurrentQuestion(<span class=\"hljs-string\">\"\"<\/span>);\n    }, <span class=\"hljs-number\">500<\/span>);\n  };\n\n  <span class=\"hljs-keyword\">const<\/span> generateProposal = <span class=\"hljs-keyword\">async<\/span> () =&gt; {\n    <span class=\"hljs-keyword\">if<\/span> (!projectDescription.trim()) <span class=\"hljs-keyword\">return<\/span>;\n\n    <span class=\"hljs-keyword\">try<\/span> {\n      <span class=\"hljs-keyword\">const<\/span> response = <span class=\"hljs-keyword\">await<\/span> axios.post(<span class=\"hljs-string\">\"\/api\/client\/proposal\"<\/span>, {\n        <span class=\"hljs-attr\">project_description<\/span>: projectDescription,\n      });\n\n      <span class=\"hljs-keyword\">if<\/span> (response.data &amp;&amp; response.data.proposal) {\n        askClientQuestion(\n          <span class=\"hljs-string\">`Can you provide a proposal for this project: <span class=\"hljs-subst\">${projectDescription}<\/span>`<\/span>\n        );\n      }\n    } <span class=\"hljs-keyword\">catch<\/span> (error) {\n      <span class=\"hljs-built_in\">console<\/span>.error(<span class=\"hljs-string\">\"Error generating proposal:\"<\/span>, error);\n    }\n  };\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    &lt;div&gt;\n      &lt;div className=\"flex flex-col md:flex-row gap-8 mb-12\"&gt;\n        &lt;div className=\"md:w-1\/3\"&gt;\n          &lt;h1 className=\"text-3xl font-bold mb-4\"&gt;Services&lt;\/h1&gt;\n          &lt;p className=\"text-lg mb-4\"&gt;\n            Here you can find information about the services I offer. Feel free\n            to ask BusinessAdvisor for more details about pricing, timelines,\n            and project specifics.\n          &lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;div className=\"md:w-2\/3\"&gt;\n          &lt;div className=\"bg-white rounded-lg shadow-md overflow-hidden\"&gt;\n            &lt;div className=\"p-6\"&gt;\n              &lt;h5 className=\"text-xl font-semibold mb-2\"&gt;\n                Chat with BusinessAdvisor\n              &lt;\/h5&gt;\n              &lt;p className=\"text-gray-600 mb-4\"&gt;\n                Our client specialist can provide information about services,\n                pricing, and project details.\n              &lt;\/p&gt;\n              &lt;Chat\n                agentType=\"client\"\n                initialMessage={initialMessage}\n                agentInitials=\"BA\"\n                directQuestion={currentQuestion}\n              \/&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n\n      &lt;div className=\"mb-12\"&gt;\n        &lt;div className=\"mb-6\"&gt;\n          &lt;h2 className=\"text-2xl font-bold mb-4\"&gt;Services Offered&lt;\/h2&gt;\n        &lt;\/div&gt;\n        &lt;div className=\"grid grid-cols-1 md:grid-cols-3 gap-6\"&gt;\n          &lt;div className=\"bg-white rounded-lg shadow-md overflow-hidden h-full\"&gt;\n            &lt;div className=\"p-6\"&gt;\n              &lt;h5 className=\"text-xl font-semibold mb-2\"&gt;Web Development&lt;\/h5&gt;\n              &lt;p className=\"text-gray-600 mb-4\"&gt;\n                Custom web application development using modern frameworks and\n                best practices.\n              &lt;\/p&gt;\n              &lt;h6 className=\"font-semibold mb-2\"&gt;Technologies&lt;\/h6&gt;\n              &lt;ul className=\"list-disc pl-5 space-y-1 mb-4\"&gt;\n                &lt;li&gt;React&lt;\/li&gt;\n                &lt;li&gt;Vue.js&lt;\/li&gt;\n                &lt;li&gt;Node.js&lt;\/li&gt;\n                &lt;li&gt;Django&lt;\/li&gt;\n                &lt;li&gt;Flask&lt;\/li&gt;\n              &lt;\/ul&gt;\n              &lt;h6 className=\"font-semibold mb-2\"&gt;Details&lt;\/h6&gt;\n              &lt;ul className=\"space-y-2 mb-4\"&gt;\n                &lt;li&gt;\n                  &lt;strong&gt;Pricing Model:&lt;\/strong&gt; Project-based or hourly\n                &lt;\/li&gt;\n                &lt;li&gt;\n                  &lt;strong&gt;Price Range:&lt;\/strong&gt; $5,000 - $50,000 depending \u0631\u0648\u06cc\n                  complexity\n                &lt;\/li&gt;\n                &lt;li&gt;\n                  &lt;strong&gt;Timeline:&lt;\/strong&gt; 4-12 weeks depending \u0631\u0648\u06cc scope\n                &lt;\/li&gt;\n              &lt;\/ul&gt;\n              &lt;button\n                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\"\n                onClick={() =&gt;\n                  askClientQuestion(\n                    \"Tell me more about your web development services\"\n                  )\n                }\n              &gt;\n                Ask about Web Development\n              &lt;\/button&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n<\/code><\/pre>\n<p>\u0645\u0627 \u0628\u06cc\u0634\u062a\u0631 \u062f\u0627\u0631\u06cc\u0645 import \u0628\u06cc\u0627\u0646\u06cc\u0647 \u0647\u0627 \u060c \u0627\u06cc\u0627\u0644\u062a \u0647\u0627 \u0648 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u0646\u0645\u0627\u06cc\u0646\u062f\u0647 AI BusinessAdvisor \u0645\u0627. \u062f\u0631 \u0642\u0633\u0645\u062a \u0628\u0639\u062f\u06cc \u0627\u06cc\u0646 \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627:<\/p>\n<pre><code class=\"lang-javascript\"> &lt;div className=<span class=\"hljs-string\">\"bg-white rounded-lg shadow-md overflow-hidden h-full\"<\/span>&gt;\n            <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"p-6\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-xl font-semibold mb-2\"<\/span>&gt;<\/span>\n                Mobile App Development\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-600 mb-4\"<\/span>&gt;<\/span>\n                Native and cross-platform mobile application development for iOS\n                and Android.\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h6<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"font-semibold mb-2\"<\/span>&gt;<\/span>Technologies<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h6<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"list-disc pl-5 space-y-1 mb-4\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>React Native<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>Flutter<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>Swift<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>Kotlin<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h6<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"font-semibold mb-2\"<\/span>&gt;<\/span>Details<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h6<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"space-y-2 mb-4\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>Pricing Model:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> Project-based\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>Price Range:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> $8,000 - $60,000 depending \u0631\u0648\u06cc\n                  complexity\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>Timeline:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> 6-16 weeks depending \u0631\u0648\u06cc scope\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mt-2 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors\"<\/span>\n                <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span>\n                  askClientQuestion(\n                    \"Tell me more about your mobile app development services\"\n                  )\n                }\n              &gt;\n                Ask about Mobile Development\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n          &lt;\/div&gt;\n          <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bg-white rounded-lg shadow-md overflow-hidden h-full\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"p-6\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-xl font-semibold mb-2\"<\/span>&gt;<\/span>\n                Technical Consulting\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-600 mb-4\"<\/span>&gt;<\/span>\n                Expert advice \u0631\u0648\u06cc architecture, technology stack, and development\n                practices.\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h6<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"font-semibold mb-2\"<\/span>&gt;<\/span>Areas of Expertise<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h6<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"list-disc pl-5 space-y-1 mb-4\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>System Architecture<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>Database Design<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>Performance Optimization<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>Security Best Practices<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>DevOps Implementation<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h6<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"font-semibold mb-2\"<\/span>&gt;<\/span>Details<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h6<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"space-y-2 mb-4\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>Pricing Model:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> Hourly\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>Price Range:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> $150 - $250 per hour\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>Timeline:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> Ongoing or as needed\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mt-2 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors\"<\/span>\n                <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span>\n                  askClientQuestion(\n                    \"Tell me more about your technical consulting services\"\n                  )\n                }\n              &gt;\n                Ask about Consulting\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n<\/code><\/pre>\n<p>\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0646\u062a\u0638\u0627\u0631 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645 \u06a9\u0647 \u06a9\u062f \u0627\u062c\u0632\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u0645 page\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u06cc\u0645 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u0642\u0633\u0645\u062a \u0622\u062e\u0631 \u0627\u06a9\u0646\u0648\u0646 \u0628\u0647 \u067e\u0627\u06cc\u0627\u0646 \u0628\u0631\u0633\u0627\u0646\u06cc\u0645:<\/p>\n<pre><code class=\"lang-javascript\"> &lt;div className=<span class=\"hljs-string\">\"mb-12\"<\/span>&gt;\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mb-6\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-2xl font-bold mb-4\"<\/span>&gt;<\/span>Client Engagement Process<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"w-full\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bg-white rounded-lg shadow-md overflow-hidden\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"p-6\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"grid grid-cols-1 md:grid-cols-4 gap-6\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mb-6 md:mb-0\"<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex flex-col items-center\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"w-12 h-12 rounded-full bg-blue-500 text-white flex items-center justify-center text-xl font-bold mb-4\"<\/span>&gt;<\/span>\n                      1\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-lg font-semibold mt-2 mb-1\"<\/span>&gt;<\/span>\n                      Initial Consultation\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-600 text-center\"<\/span>&gt;<\/span>\n                      Understanding your requirements and project goals\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mb-6 md:mb-0\"<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex flex-col items-center\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"w-12 h-12 rounded-full bg-blue-500 text-white flex items-center justify-center text-xl font-bold mb-4\"<\/span>&gt;<\/span>\n                      2\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-lg font-semibold mt-2 mb-1\"<\/span>&gt;<\/span>\n                      Proposal\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-600 text-center\"<\/span>&gt;<\/span>\n                      Detailed quote and project plan preparation\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mb-6 md:mb-0\"<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex flex-col items-center\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"w-12 h-12 rounded-full bg-blue-500 text-white flex items-center justify-center text-xl font-bold mb-4\"<\/span>&gt;<\/span>\n                      3\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-lg font-semibold mt-2 mb-1\"<\/span>&gt;<\/span>\n                      Development\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-600 text-center\"<\/span>&gt;<\/span>\n                      Regular sprints with client feedback\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mb-6 md:mb-0\"<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex flex-col items-center\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"w-12 h-12 rounded-full bg-blue-500 text-white flex items-center justify-center text-xl font-bold mb-4\"<\/span>&gt;<\/span>\n                      4\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-lg font-semibold mt-2 mb-1\"<\/span>&gt;<\/span>\n                      Delivery\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-600 text-center\"<\/span>&gt;<\/span>\n                      Testing, deployment, and ongoing support\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex justify-center mt-8\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n                  <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors\"<\/span>\n                  <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span>\n                    askClientQuestion(\n                      \"Explain your client engagement process in detail\"\n                    )\n                  }\n                &gt;\n                  Learn More About the Process\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n      &lt;\/div&gt;\n\n      <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"w-full\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bg-white rounded-lg shadow-md overflow-hidden\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"p-6\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-xl font-semibold mb-2\"<\/span>&gt;<\/span>Request a Proposal<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-gray-600 mb-4\"<\/span>&gt;<\/span>\n              Interested in working together? Describe your project below and\n              BusinessAdvisor will generate a custom proposal for you.\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mb-4\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span>\n                <span class=\"hljs-attr\">htmlFor<\/span>=<span class=\"hljs-string\">\"project-description\"<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"block text-sm font-medium text-gray-700 mb-1\"<\/span>\n              &gt;<\/span>\n                Describe your project:\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">textarea<\/span>\n                <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"project-description\"<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"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\"<\/span>\n                <span class=\"hljs-attr\">rows<\/span>=<span class=\"hljs-string\">\"5\"<\/span>\n                <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Enter project description...\"<\/span>\n                <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">{projectDescription}<\/span>\n                <span class=\"hljs-attr\">onChange<\/span>=<span class=\"hljs-string\">{(e)<\/span> =&gt;<\/span> setProjectDescription(e.target.value)}\n              &gt;<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">textarea<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n              <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"py-2 px-4 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors\"<\/span>\n              <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{generateProposal}<\/span>\n            &gt;<\/span>\n              Generate Proposal\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n    &lt;\/div&gt;\n  );\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> Services;\n<\/code><\/pre>\n<p>\u062e\u062f\u0645\u0627\u062a \u0645\u0627 page \u06a9\u0627\u0645\u0644 \u0627\u0633\u062a \u060c \u0648 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u06cc\u0632 \u0647\u0645\u06cc\u0646\u0637\u0648\u0631 \u0627\u0633\u062a!<\/p>\n<p>\u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0633\u0631\u0648\u0631 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u067e\u0627\u06cc\u062a\u0648\u0646 \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 \u0627\u0633\u062a \u060c \u0648 \u0633\u067e\u0633 \u0628\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0645\u0639\u0645\u0648\u0644 Vite Run \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u062f\u0631 \u0642\u0633\u0645\u062a \u062c\u0644\u0648\u06cc React \u062e\u0648\u062f \u0631\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f <code>frontend<\/code> \u067e\u0648\u0634\u0647:<\/p>\n<pre><code class=\"lang-shell\">npm run dev\n<\/code><\/pre>\n<p>\u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u0648\u0628 \u0633\u0627\u06cc\u062a \u0631\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 \u0648 \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f \u0631\u0648\u06cc http: \/\/localhost: 5173\/ \u0628\u0627 \u06a9\u0627\u0631\u06af\u0632\u0627\u0631\u0627\u0646 AI \u06a9\u0627\u0631 \u0631\u0648\u06cc \u0647\u0645\u0647 \u0635\u0641\u062d\u0627\u062a (\u062c\u062f\u0627 \u0627\u0632 \u0645\u062e\u0627\u0637\u0628 page\u060c \u06a9\u0647 \u06cc\u06a9\u06cc \u0646\u062f\u0627\u0631\u062f). \u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0647\u0631 \u0628\u0627\u0631 \u06a9\u0647 \u0627\u0632 \u06cc\u06a9\u06cc \u0627\u0632 \u0639\u0648\u0627\u0645\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0628\u0631\u0627\u06cc \u067e\u0631\u0633\u06cc\u062f\u0646 \u0633\u0648\u0627\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f \u060c \u0627\u0632 1 \u062a\u0645\u0627\u0633 API \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0631\u0648\u06cc Groq Cloud \u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u062d\u062f\u0648\u062f\u06cc\u062a \u0646\u0631\u062e \u0631\u0627 \u0628\u0631\u0627\u06cc LLM \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<h2 id=\"heading-conclusion\"><span class=\"ez-toc-section\" id=\"%d9%be%d8%a7%db%8c%d8%a7%d9%86\"><\/span>\u067e\u0627\u06cc\u0627\u0646<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u062a\u06cc\u0645 \u0627\u0632 \u0646\u0645\u0627\u06cc\u0646\u062f\u06af\u0627\u0646 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0628\u0631\u0627\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a \u0634\u0645\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0633\u06cc\u0633\u062a\u0645 \u0639\u0627\u0645\u0644 \u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f Agno \u0648 Groq \u0631\u0648\u0634\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0628\u0631\u0627\u06cc \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0646 \u0686\u06af\u0648\u0646\u06af\u06cc \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0646\u0648\u0622\u0648\u0631\u0627\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u062f\u0648\u0646 \u0635\u0631\u0641 \u0647\u0632\u06cc\u0646\u0647 \u0632\u06cc\u0627\u062f\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u062f\u0647\u062f.<\/p>\n<p>\u062a\u0631\u06a9\u06cc\u0628\u06cc \u0627\u0632 Agno \u0648 Groq \u0645\u0633\u06cc\u0631\u06cc \u0631\u0627\u06cc\u06af\u0627\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0648\u0634 \u062f\u0631 \u0639\u0648\u0627\u0645\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0633\u06cc\u0627\u0631 \u0645\u0641\u06cc\u062f \u0628\u0627\u0634\u062f. \u0628\u0627 \u0639\u0627\u0645\u0644 \u0628\u062f\u0648\u0646 \u06a9\u062f Agno orchestration \u0648 \u0627\u0633\u062a\u0646\u062a\u0627\u062c \u0641\u0648\u0642 \u0627\u0644\u0639\u0627\u062f\u0647 \u0633\u0631\u06cc\u0639 Groq \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0628\u0627 \u0642\u062f\u0631\u062a \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0631\u0627 \u06a9\u0647 \u0628\u0627 \u0628\u0627\u0632\u062f\u06cc\u062f \u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u062f\u0631\u06af\u06cc\u0631 \u0645\u06cc \u0634\u0648\u0646\u062f \u060c \u0645\u0633\u062a\u0642\u0631 \u06a9\u0646\u06cc\u062f \u0648 \u062a\u0639\u0627\u0645\u0644 \u0631\u0627 \u0622\u0633\u0627\u0646 \u062a\u0631 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u060c \u062e\u0648\u0627\u0647 \u06cc\u06a9 \u0686\u062a \u0628\u0627\u0628\u0627\u062a \u060c \u0645\u0648\u0644\u062f \u0645\u062d\u062a\u0648\u0627 \u06cc\u0627 \u062f\u0633\u062a\u06cc\u0627\u0631 \u0647\u0648\u0634\u0645\u0646\u062f \u0628\u0627\u0634\u062f \u060c \u0627\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631\u0647\u0627 \u0627\u062f\u063a\u0627\u0645 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0631\u0627 \u062f\u0631 \u0628\u0631\u0646\u062f \u0634\u0645\u0627 \u0622\u0633\u0627\u0646\u062a\u0631 \u0627\u0632 \u0647\u0645\u06cc\u0634\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f. \u0628\u0627 \u067e\u06cc\u0634\u0631\u0641\u062a \u0647\u0627\u06cc\u06cc \u06a9\u0647 AI Technology \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f \u060c \u0642\u0627\u062f\u0631 \u0628\u0647 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0631\u062f\u0646 \u0627\u06cc\u0646 \u0631\u0627\u0647 \u062d\u0644 \u0647\u0627\u06cc \u0631\u0627\u06cc\u06af\u0627\u0646 \u0642\u0637\u0639\u0627\u064b \u0634\u0645\u0627 \u0631\u0627 \u062f\u0631 \u067e\u06cc\u0634 \u06af\u0631\u0641\u062a\u0647 \u0648 \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u0648\u0628 \u0633\u0627\u06cc\u062a \u0634\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0647\u0645\u0686\u0646\u0627\u0646 \u0628\u0647 \u0645\u062f\u0631\u0646 \u0633\u0627\u0632\u06cc \u0628\u0631\u0646\u062f \u062e\u0648\u062f \u0627\u062f\u0627\u0645\u0647 \u0645\u06cc \u062f\u0647\u06cc\u062f \u060c \u0648\u0627\u0642\u0639\u0627\u064b \u0628\u062f\u0631\u062e\u0634\u062f.<\/p>\n<h3 id=\"heading-stay-up-to-date-with-tech-programming-productivity-and-ai\"><span class=\"ez-toc-section\" id=\"%d8%a8%d8%a7_%d9%81%d9%86%d8%a7%d9%88%d8%b1%db%8c_%d8%8c_%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87_%d9%86%d9%88%db%8c%d8%b3%db%8c_%d8%8c_%d8%a8%d9%87%d8%b1%d9%87_%d9%88%d8%b1%db%8c_%d9%88_%d9%87%d9%88%d8%b4_%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c_%d8%a8%d9%87_%d8%b1%d9%88%d8%b2_%d8%a8%d8%a7%d8%b4%db%8c%d8%af\"><\/span>\u0628\u0627 \u0641\u0646\u0627\u0648\u0631\u06cc \u060c \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u060c \u0628\u0647\u0631\u0647 \u0648\u0631\u06cc \u0648 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0628\u0647 \u0631\u0648\u0632 \u0628\u0627\u0634\u06cc\u062f<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06af\u0631 \u0627\u0632 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0647\u0627 \u0644\u0630\u062a \u0628\u0631\u062f\u06cc\u062f \u060c \u0645\u0646 \u0631\u0627 \u062f\u0631 \u0631\u0633\u0627\u0646\u0647 \u0647\u0627\u06cc \u0627\u062c\u062a\u0645\u0627\u0639\u06cc \u0648\u0635\u0644 \u06a9\u0646\u06cc\u062f \u0648 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f \u060c \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0646 \u0645\u062d\u062a\u0648\u0627\u06cc \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0647\u0645\u0647 \u0627\u06cc\u0646 \u0645\u0648\u0636\u0648\u0639\u0627\u062a \u0631\u0627 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0645\u06cc \u06af\u0630\u0627\u0631\u0645 \ud83d\udd25<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegaar.com\/blog\/wp-content\/uploads\/2025\/04\/3766c236-f276-4939-996e-61ab1306cc26.png\" alt=\"\u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0646\u0631\u0645 \u0627\u0641\u0632\u0627\u0631 \u0627\u0646\u062f\u0631\u0648 \u0628\u0627\u06cc\u0632\u062f\u0646 \u0648 \u0646\u0648\u06cc\u0633\u0646\u062f\u0647 \u0641\u0646\u06cc \u0631\u0633\u0627\u0646\u0647 \u0647\u0627\u06cc \u0627\u062c\u062a\u0645\u0627\u0639\u06cc\" class=\"image--center mx-auto\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<\/section>\n<p><br \/>\n<br \/>\u0645\u0646\u062a\u0634\u0631 \u0634\u062f\u0647 \u062f\u0631 1404-04-01 06:49:16<br \/>\n<\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-center kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;center&quot;,&quot;id&quot;:&quot;18880&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;0&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;0&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;5&quot;,&quot;greet&quot;:&quot;\u0627\u0645\u062a\u06cc\u0627\u0632 \u0634\u0645\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628&quot;,&quot;legend&quot;:&quot;0\\\/5 (0 \u0631\u0627\u06cc)&quot;,&quot;size&quot;:&quot;30&quot;,&quot;title&quot;:&quot;\u0631\u0648\u0634 \u0633\u0627\u062e\u062a \u062a\u06cc\u0645\u06cc \u0627\u0632 \u0646\u0645\u0627\u06cc\u0646\u062f\u06af\u0627\u0646 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0628\u0631\u0627\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a \u062e\u0648\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u0631\u0627\u06cc\u06af\u0627\u0646 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Agno \u0648 Groq&quot;,&quot;width&quot;:&quot;0&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} ({count} \u0631\u0627\u06cc)&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 0px;\">\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 24px;\">\n            <span class=\"kksr-muted\">\u0627\u0645\u062a\u06cc\u0627\u0632 \u0634\u0645\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628<\/span>\n    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">\u0632\u0645\u0627\u0646 \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u0645\u0637\u0627\u0644\u0639\u0647: <\/span> <span class=\"rt-time\"> 50<\/span> <span class=\"rt-label rt-postfix\">\u062f\u0642\u06cc\u0642\u0647<\/span><\/span>\u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0628\u0647 \u0633\u0631\u0639\u062a \u0631\u0648\u0634 \u06a9\u0627\u0631 \u0645\u0627 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0628\u06cc\u0634\u062a\u0631 \u0648 \u0628\u06cc\u0634\u062a\u0631 \u0634\u0631\u06a9\u062a \u0647\u0627 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f \u062a\u0627 \u0628\u0647 \u0622\u0646\u0647\u0627 \u06a9\u0645\u06a9 \u06a9\u0646\u062f \u062a\u0627 \u0645\u0634\u062a\u0631\u06cc \u0647\u0627 \u0631\u0627 \u062d\u0641\u0638 \u0648 \u062d\u0641\u0638 \u06a9\u0646\u0646\u062f. \u062a\u06cc\u0645 \u0647\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0632 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0648\u0628 \u0633\u0627\u06cc\u062a \u0647\u0627\u06cc \u0646\u0648\u0622\u0648\u0631\u0627\u0646\u0647 \u0648 \u067e\u0627\u0633\u062e\u06af\u0648 \u06a9\u0647 \u0642\u0627\u062f\u0631 \u0628\u0647 \u062f\u0631\u06af\u06cc\u0631 \u06a9\u0631\u062f\u0646 \u0628\u0627\u0632\u062f\u06cc\u062f [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":18881,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1743,1686],"tags":[1100,1748,1747,1925,1844,1919,2123,2134,1745],"class_list":["post-18880","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-python","category-ai","tag-javascript","tag-python-hosting","tag-python-vps","tag----django","tag-1844","tag----python","tag-2123","tag-2134","tag-1745"],"acf":[],"_links":{"self":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts\/18880","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/comments?post=18880"}],"version-history":[{"count":0,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts\/18880\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/media\/18881"}],"wp:attachment":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/media?parent=18880"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/categories?post=18880"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/tags?post=18880"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}