AI 正在迅速改变我们的工作方式，越来越多的公司正在使用它来帮助他们获得和留住客户。团队还使用 AI 创建创新和响应式网站，这些网站能够吸引访问者，同时提供有用的信息。

AI 代理是客户服务的强大工具。让它们为您的平台和网站提供支持听起来像是一个昂贵的提议，需要高技术专长。但随着 Agno 和 Groq 等新的现代平台的出现，现在更容易将 AI 代理系统集成到您的网站中，同时仍然保持在预算范围内。

在本文中，您将完成开发自己的 AI 代理生态系统（免费）的过程。这将使您能够拥有一个可以处理客户查询、创建内容、分析用户行为并为每个用户提供自定义个人体验的网站。这是一个很棒的设置，因为您可以自动化部分业务，加快潜在客户的产生并腾出时间来处理更多高优先级的任务。

本文适用于熟悉 JavaScript、React 和 Python 的开发人员。即使你对这三者没有完全了解，只要你是有一定知识的初学者或初级，你应该至少能够理解一些代码。例如，JavaScript 和 Python 在语法方面非常相似，所以如果你有使用它们中的任何一个的经验，那么只需阅读代码库就会让你了解一切是如何工作的。

在本教程中，我们将构建一个投资组合网站。但是，您可以将您在此处学到的想法和概念用于任何类型的网站，无论您是独立企业家还是大公司的一员。借助这些工具和框架，可以在不超出预算的情况下改变您的网络形象。

• 先决条件

• 什么是 AI 代理？

• 什么是 Agno 和 Groq Cloud？

• 您将构建的内容

• 构建我们的 Python 后端

  • 在 Groq Cloud 上创建帐户

  • 设置我们的 Python 项目

  • 使用 Python 代码库

  • 运行我们的 Python 后端

• 构建我们的 React 前端

• 结论

• 及时了解技术、编程、生产力和 AI

先决条件

• JavaScript、React 和 Python 的先验知识

• 在您的计算机上本地安装和设置 Python

• Groq Cloud 上的帐户

• 安装的代码编辑器/IDE，如 Cursor、Windsurf 或 VS Code

什么是 AI 代理？

AI 代理是旨在使用人工智能与他们的世界交互并实现某些目标的计算机系统或程序。他们能够通过传感器、用户输入或数据感知他们的世界，并采取行动来实现目标，通常具有一定程度的自主性。这意味着他们将自己决定事情，有时几乎没有人工干预，具体取决于它们的设计方式。

什么是 Agno 和 Groq Cloud？

Agno 是一个轻量级库，可让您构建多模态代理。它是一个 AI 推理引擎，旨在优化 LLM 的速度和性能。这意味着它可以提供超快的 AI 模型推理，减少延迟并提高资源利用率。它有可能取代当前的推理平台，如 NVIDIA TensorRT 或 Hugging Face 的文本生成推理 （TGI）。

Groq Cloud 是一个基于云的 AI 推理平台，基于 Groq LPU（语言处理单元）芯片，针对超低延迟 AI 工作负载进行了优化。Groq 擅长高速令牌生成速率，非常适合实时 AI 应用程序，如聊天机器人、AI 编码帮助和其他延迟敏感型工作负载。Groq Cloud 平台通过免费套餐提供对其大型语言模型 （LLM） 的免费访问，但存在一些使用限制。

如果您访问 Groq Cloud Playground，您可以找到来自不同公司的 LLM 模型，例如：

• Qwen

• DeepSeek R1

• 谷歌 Gemma 2

• 拥抱脸

• Meta llama

• Mistral AI

• 开放人工智能

这很棒，因为 Groq Cloud 让我们可以灵活地从这些 AI LLM 模型中的任何一个中进行选择，用于我们的 AI 代理应用程序。Agno 基本上充当多个 AI 代理的编排层。在我们的例子中，这将是 WelcomeAgent、ProjectAgent、CareerAgent、BusinessAdvisor 和 ResearchAgent。

该平台能够管理他们的对话、任务委派和内存。当我们的任何 AI 代理需要推理或生成输出时，Agno 会使用 Groq Cloud，它可以运行大型语言模型 （LLM），并且以超低延迟实现这一点。这样做的好处是它确保它具有快速有效的响应。Groq Cloud 本身不是 LLM，而是一个高性能推理引擎，可以托管和提供来自许多不同提供商的 LLM。

对于这个项目，我们将使用 Meta 的 LLaMA 3 模型，因为它在性能和准确性之间取得了很好的平衡，并且是公开访问的。这意味着它非常适合我们投资组合网站中的 AI 代理。

值得一提的是，我们本可以使用 llama.com 的 LLaMA 模型。不过，我们将通过 Groq Cloud 使用它，因为这样，我们可以为每个 AI 代理获得更好的优化、更多的功能和更高质量的响应。这是因为 Groq Cloud 为我们提供了灵活性，可以根据需要在不同的 AI 模型之间进行测试和选择，这意味着我们可以获得最适合我们需求的模型。

您将构建的内容

今天，您将构建一个包含 AI 代理的投资组合网站，任何人都可以与之交互。这些 AI 代理就像客户服务代表，因为任何人都可以向他们询问有关您的技能和投资组合的问题，并且他们会向该人提供信息。

这很棒，因为这意味着潜在客户可以 24/7 全天候了解您的任何信息，而无需在您不在时实际与您交谈。您甚至可以将此投资组合用作构建投资组合网站的模板或作为创建投资组合网站的灵感。

您的投资组合网站上总共将有五个 AI 代理：

• WelcomeAgent：帮助用户浏览网站的专家，无论用户是雇主、客户还是程序员同行

• ProjectAgent：可以提供有关项目、技术和挑战信息的项目专家

• CareerAgent：可以提供有关技能、经验和专业背景信息的职业专家

• BusinessAdvisor：可以提供有关服务、定价和项目详细信息的客户专家

• ResearchAgent：可以提供有关技术、趋势和行业新闻信息的研究专家

将 AI 代理整合到投资组合网站中的巨大好处是，它们可以通过提供量身定制的交互式体验来创建个性化体验，而不是在其他更通用的网站上轻易复制。

这可以使您的网站与众不同，因为与拥有一个静态网站来展示您的才能相反，AI 代理能够引导访问者、回答有关您的项目的查询并根据兴趣推荐相关工作。

另一个很棒的功能是能够模拟对话，这可以使投资组合感觉更有活力、更吸引人、更身临其境，同时还可以展示您如何使用现代工具的能力。

所有这些结合在一起，为您提供了一种实用且易于使用的方法来探索 AI 代理。这可以是一个真实的例子，也可以是一个不需要实现全面业务应用程序的个人项目，就能看到这种类型的概念有多么有价值。

该网站将包含以下六个页面：

• 主页 – 主网页

• 项目 – 展示一些特色项目和技术技能

• 职业 – 展示技能、经验、教育和认证

• 服务 – 客户服务和参与流程

• 研究 – 一种搜索有关科技行业的网络的方法

• 联系人 – 带有用于联系用户的表单的页面

您可以在下面看到您的前端 React 应用程序将是什么样子：

首先，您有您的投资组合主页：

接下来是你的 Projects 页面：

现在你有你的 Career 页面了：

然后，您会看到 Services （服务） 页面：

然后，您可以看到您的 Research and Insights 页面：

最后，您有 Contact （联系） 页面：

现在，让我们开始构建您的应用程序，从 Python 后端开始。

构建我们的 Python 后端

在本教程中，我将使用 macOS，并且这些命令也应该可以在 Linux 上运行。如果您是 Windows 用户，大多数命令都应该有效（尽管存在一些差异，例如激活 Python 环境）。如果需要，您可以通过搜索来找到正确的命令 - 并且您会知道您的终端在尝试运行命令时是否出现错误。

在 Groq Cloud 上创建帐户

如前所述，我们将通过 Groq Cloud 使用 Meta 的 LLaMA 3，这是理想的。所以，首先，我们必须在 Groq Cloud 上创建一个帐户，如图所示。

在 Groq Cloud 上创建帐户后，转到 API 密钥页面并创建 API 密钥，如本例所示。我给我起了名字：team-ai-agents

您应该有一个类似于此示例的 API 密钥，因此请确保将其保存在安全的地方 - 我们稍后会需要它。

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

设置我们的 Python 项目

好了，现在让我们快速设置我们的项目。导航到计算机上的某个位置（例如桌面），然后创建一个名为 .的文件夹并准备好 – 我们将开始使用 Python 构建后端。ai-agent-appcd

我建议在 Python 虚拟环境中进行本地安装和安装。首先，使用以下终端命令在您的文件夹内设置 Python 虚拟环境：agnogroqai-agent-app

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

注意：根据您的本地 Python 环境，您可能需要使用 or 命令来运行 Python 命令。在我的环境和示例中，我使用 ，因此请调整命令以满足您的需求。pythonpython3python3

这同样适用于使用 或 安装 Python 包时。您可以使用终端窗口中的 、 和 命令检查您安装的 Python 和 pip 版本。pippip3python --versionpython3 --versionpip --versionpip3 --version

上面的命令应该在你的文件夹内创建一个文件夹。这将是你的 REST 后端，其中包含你的所有 API 端点，你的 React 前端将在本教程的后面使用。你的 Python 虚拟环境也已激活。venvai-agent-app

要激活和停用 Python 环境，您可以使用以下命令：

# Activate on macOS/Linux
source venv/bin/activate

# Activate on Windows
venvScriptsactivate

# Deactivate works on all platforms
conda deactivate

此时，最好在代码编辑器中打开项目。现在，您需要与其他一些包一起安装和使用：、 和 .您需要这些包来设置服务器环境，因此请使用以下命令安装它们：agnogroqpipflaskrequestspython-dotenv

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

安装这些 Python 包后，您现在可以为此项目设置 API。我们将使用 Python Web 应用程序框架 Flask 以及 CORS 包，以便我们可以在任何地方访问服务器。同时，我们还将使用 requests 模块，它允许我们使用 Python 发送 HTTP 请求。

请注意，您还需要一个 API 密钥文件，因此请确保您已在 Python 环境中安装了该软件包，尽管在某些情况下，它会自动安装。.envpython-dotenv

在 Python 代码库上工作

好了，是时候开始代码库了。但首先，让我们为您的项目生成所有文件。您只需运行我为项目创建的运行脚本即可完成此作。在文件夹中运行以下命令：venv

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

使用此脚本，您现在应该拥有：

• 为您的 API 密钥创建文件.env

• 已创建一个代理文件夹，其中包含用于创建不同 AI 代理的所有文件

• 已创建一个文件，该文件将成为整个后端应用程序的主项目文件main.py

好了，您的文件已设置完毕。剩下的就是添加代码库，后端就完成了。让我们从文件开始，因为它只需要一行代码，那就是你的 API 密钥。查看我的示例并使用您自己的 API 密钥更新它：.env

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

您的应用程序现在有一个 API 密钥，它允许您访问 Groq Cloud。现在，让我们开始为所有各种 AI 代理添加代码。我们将要处理的第一个文件是保存所有 AI 代理文件的导入的文件。__init__.py

将此代码添加到文件中：

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

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

如您所见，AI 代理的所有类都将从此处导入和导出，以便您稍后可以在文件中使用它们。main.py

好。现在，我们有 6 个 AI 代理文件要处理，从文件开始。base_agent.py

请确保将此代码添加到文件中：

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

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

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

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

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

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

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

此类使用该框架创建由 Groq 的 LLama 3.3 70B 模型提供支持的 AI 代理，该模型可以免费使用，但对 API 调用有一些使用限制。这对您的项目来说应该没问题。它提供了应用程序中的其他专用代理可以从中继承并通过特定于域的功能进行扩展的基本结构。agno

我们选择的模型在 Groq Cloud 平台上可用，如果需要，我们可以更改它。每个模型都有优点和缺点，以及其最新程度的截止日期，因此您可以期望获得不同的结果。请记住，使用像 OpenAI 这样的最新 LLM 会提供更好的结果，但您可能需要为此付费。

我们将要处理的下一个文件将是该文件。career_agent.py

这是它所需的代码：

from agents.base_agent import BaseAgent

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

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

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

    def get_skills_summary(self):

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

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

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

    def get_experience_summary(self):

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

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

        {experience_text}

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

    def assess_job_fit(self, job_description):

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

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

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

        Job Description:
        {job_description}

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

        Experience:
        {' '.join(experience_flat)}

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

该代理旨在帮助用户完成与职业相关的任务，例如：

• 创建技术和软技能的专业摘要

• 根据工作经验生成职业叙事

• 通过将技能和经验与职位描述进行比较来评估工作匹配度

代理使用基本代理的 LLM 功能（使用 Groq 的 LLama 3.3 70B 模型）生成以 Markdown 格式设置的自然语言响应，使其适合包含在投资组合网站、简历或工作应用程序中。此文件包含示例职业数据，在实际实施中，这些数据将来自数据库

下一个 AI 代理的 Ok time – 这次是 ，它接收以下代码：client_agent.py

from agents.base_agent import BaseAgent

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

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

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

    def get_services_overview(self):

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

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

        {services_text}

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

    def get_service_details(self, service_id):

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

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

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

    def explain_process(self):

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

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

        {process_text}

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

    def generate_proposal(self, project_description):

        prompt = f"""
        Generate a professional project proposal based on the following client requirements:

        Project Description:
        {project_description}

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

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

此代理旨在帮助用户完成与客户和业务相关的任务，例如：

• 提供营销材料可用服务的概述

• 为特定产品生成详细的服务描述

• 向潜在客户解释客户参与流程

• 根据客户要求创建自定义项目提案

该代理还使用基本代理的 LLM 功能（使用 Groq 的 LLama 3.3 70B 模型）来生成以 Markdown 格式化的专业、面向业务的内容。与以前一样，此文件也包含示例服务数据。

现在我们可以开始处理该文件并将以下代码添加到其代码库中：project_agent.py

from agents.base_agent import BaseAgent

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

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

    def get_project_list(self):

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

        return project_list

    def get_project_details(self, project_id):

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

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

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

    def answer_technical_question(self, project_id, question):

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

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

            Question: {question}

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

此代理旨在帮助用户完成与项目相关的任务，例如：

• 提供 portfolio 中所有项目的概览

• 生成特定项目的详细描述

• 回答有关实现细节的技术问题

与前面的示例一样，代理使用基本代理的 LLM 功能（使用 Groq 的 LLama 3.3 70B 模型）来生成以 Markdown 格式化的面向项目的技术内容。这适用于技术文档，或响应有关项目实施的查询。我们在这里使用模拟数据，而不是数据库。

完成该文件后，我们只剩下两个文件。接下来是文件，所以继续添加以下代码：research_agent.py

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

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

    def search_web(self, query):

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

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

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

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

    def research_technology(self, technology):

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

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

        Search Results:
        {search_results}

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

    def compare_technologies(self, tech1, tech2):

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

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

        Search Results:
        {search_results}

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

    def get_industry_trends(self):

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

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

        Search Results:
        {search_results}

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

此代理旨在帮助用户完成与研究相关的任务，例如：

• 研究特定技术以了解其功能、优势和用例

• 比较不同的技术以做出明智的决策

• 随时了解行业趋势和新兴技术

与其他代理相比，该代理的独特之处在于，它使用 Groq Toolhouse API 的 Web 搜索功能主动从 Web 获取实时信息，而不是仅仅依赖预定义数据或 LLM 的训练数据。这使它能够提供有关快速发展的技术主题的更新和全面的信息。

好了，现在我们要创建最后一个 AI 代理，它就是文件。将此代码添加到文件中：welcome_agent.py

from agents.base_agent import BaseAgent

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

    def greet(self, visitor_type=None):

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

    def suggest_section(self, interest):

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

此代理旨在作为投资组合网站访客的初始联系点，提供：

• 基于访客类型的个性化问候语

• 根据特定兴趣对相关部分的指导

• 对作品集的友好、对话式介绍

这比我们看过的其他一些代理更简单，因为它专注于创造积极的第一印象并帮助访客导航到与他们的需求最相关的内容。它使用基本代理的 LLM 功能来生成自然的、上下文适当的响应。WelcomeAgent

好的，很好 – 您的后端 API 几乎已准备就绪。您只需要处理最后一个文件：完成代码库的文件。这个文件很大，所以我会把它分成三个部分。您需要将每个部分复制并粘贴到文件中。如果您还没有这样做，那么值得为 VS Code 安装 Python 扩展，因为它具有 Python 文件的调试、linting 和格式化功能。main.py

好了，这是我们文件的代码库的第一部分：main.py

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

load_dotenv()

app = Flask(__name__)
CORS(app)

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

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

    def get_response(self, prompt):

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

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

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

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

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

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

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

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

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

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

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

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

这部分代码包含您的 imports、setup 和 AI agent 的一些问候语。

现在是第 2 部分，将此代码添加到您添加的第一个代码下的文件中：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    response = app.make_response(
        b'GIF89ax01x00x01x00x80x00x00xffxffxffx00x00x00!xf9x04x01x00x00x00x00,x00x00x00x00x01x00x01x00x00x02x02Dx01x00;')
    response.headers['Content-Type'] = 'image/gif'

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

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

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

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

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

    return jsonify({'response': response})

在代码库的这一部分中，您有更多的 AI 响应和受欢迎的 API 路由。

最后，通过在末尾添加最后一部分来完成代码：

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

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

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

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

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

    return jsonify({'response': response})

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

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

        response = career_agent.assess_job_fit(message)
    else:

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

    return jsonify({'response': response})

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

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

        response = client_agent.generate_proposal(message)
    else:

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

    return jsonify({'response': response})

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

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

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

    return jsonify({'response': response})

if __name__ == '__main__':

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

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

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

好的，如果你的文件有错误，它们可能是由 Python 缩进引起的。希望格式不会使它们太难修复。

文件现已完成，并且您已创建其余的 AI API 路由。

运行我们的 Python 后端

剩下的就是运行你的 Flask 服务器并启动并运行后端。你可以使用文件夹内的这个运行脚本来做到这一点：venv

python3 main.py

您的后端现在应该在 http://127.0.0.1:5001/ 上运行。如果您转到该页面，您将看到如下错误：

Not Found

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

这是意料之中的，因为如果你检查了代码库，你会意识到没有 GET 路由，只有 POST 路由。要查看它们正常工作，您需要使用像 Postman 这样的 HTTP 客户端。另一个选项是创建一些发送 POST 请求的命令，您可以从终端运行该请求。让我们使用 ，因为设置较少。您需要复制并粘贴命令。curlcurl

每个 POST 请求将只使用 Groq Cloud 上的一个 API 调用作为您的 API 密钥，您可以在此处查看 https://console.groq.com/keys。请记住，它是免费使用的，但您可以在其有关速率限制的文档中找到使用限制。

我在下面提供了一些示例 curl 命令 – 只需将它们复制并粘贴到您的终端中，然后按 Enter，您应该会看到响应消息：

1. 测试 Welcome Agent 端点

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

2. 测试 Project Agent 端点

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

3. 测试 Career Agent 端点

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

4. 测试 Client Agent 端点

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

5. 测试 Research Agent 端点

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

构建我们的 React 前端

我们已经走过了一半，剩下的就是构建你的前端。我们将使用 Vite 构建前端，网站将有六个页面。确保你现在在项目的根文件夹中。你可以让 Python 服务器保持运行状态，因为你的前端将连接到你创建的 API 路由。ai-agent-app

现在，运行下面的命令，使用 Vite、Tailwind CSS、react-router 和 Axios 设置你的 React 项目，我们需要它们来进行页面路由和获取请求：

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

太好了，现在安装了这些包并设置了我们的依赖项，我们几乎可以开始编写代码库了。但在此之前，我们需要再运行一个脚本，该脚本将为我们的项目创建所有文件和文件夹。这比手动完成要快得多。

在 frontend 文件夹中运行以下命令：

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

我们的 React 前端现在应该有一个项目结构，如下所示：

我们现在准备开始编写一些代码。

首先是文件。这是您需要处理的唯一配置文件，因为其他文件已经具有我们需要的配置。将文件中的所有代码替换为以下代码：tailwind.config.js

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

此代码所做的只是添加所有模板文件的路径。

好了，接下来，您将处理样式和 Tailwind CSS。有三个 CSS 文件需要处理：、 和 。App.cssindex.cssstyle.css

首先是文件。在此处将所有代码替换为以下代码：App.css

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

main {
  flex: 1;
}

我们这里只有一些基本的布局样式 和 。rootmain

接下来是文件。下面是你需要的代码，所以用它替换文件中的所有内容：index.css

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

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

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

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

  .message {
    @apply flex mb-4;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

所有这些样式都与整个项目中的 Tailwind CSS 设置相关。

只剩下一个文件用于 CSS，它就是文件。这是一个大文件，因此我将代码分成两部分 – 只需将它们复制并粘贴到文件中即可。style.css

这是第一部分：

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

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

main {
  flex: 1;
}

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

footer {
  margin-top: auto;
}

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

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

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

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

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

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

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

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

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

这是第二部分：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

此代码包含网站内容布局的主要样式。这就照顾到样式了。我们只剩下组件和页面，然后您就可以运行您的应用程序了。在开始处理这些文件夹之前，让我们快速执行文件夹中的 and 文件。App.jsxmain.jsxsrc

因此，将以下代码添加到文件中：App.jsx

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

function App() {
  return (

          <Route path="/" element={} />
          <Route path="/projects" element={} />
          <Route path="/career" element={} />
          <Route path="/services" element={} />
          <Route path="/research" element={} />
          <Route path="/contact" element={} />

  );
}

export default App;

在此文件中，您拥有所有路由。这就是使用 .BrowserRouter

最后，将 中的所有代码替换为以下内容：main.jsx

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

createRoot(document.getElementById('root')).render(

);

我们在这里所做的唯一更新是添加了一个导入，因此现在您可以在应用程序中访问此文件中的样式。import './style.css'

是时候处理您的组件文件了，从文件开始。我拆分了代码库，因为它是一个大文件，因此请确保将它们全部添加到一起。Chat.jsx

和以前一样，这是第一部分：

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

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

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

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

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

      if (!messageToSend.trim()) return;

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

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

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

      setIsLoading(true);

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

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

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

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

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

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

此代码的第一部分包含您的导入、连接到后端的基 URL 和函数。

现在让我们添加代码库的第二部分：

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

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

    formattedContent = formattedContent.replace(
      /#{6}s+(.*?)(?=n|$)/g,
      "
$1
"
    );
    formattedContent = formattedContent.replace(
      /#{5}s+(.*?)(?=n|$)/g,
      "
$1
"
    );
    formattedContent = formattedContent.replace(
      /#{4}s+(.*?)(?=n|$)/g,
      "
$1
"
    );
    formattedContent = formattedContent.replace(
      /#{3}s+(.*?)(?=n|$)/g,
      "
$1
"
    );
    formattedContent = formattedContent.replace(
      /#{2}s+(.*?)(?=n|$)/g,
      "
$1
"
    );
    formattedContent = formattedContent.replace(
      /#{1}s+(.*?)(?=n|$)/g,
      "
$1
"
    );

    formattedContent = formattedContent.replace(
      /**(.*?)**/g,
      "$1"
    );

    formattedContent = formattedContent.replace(/*(.*?)*/g, "$1");

    formattedContent = formattedContent.replace(/(.*?)/g, "$1");

    formattedContent = formattedContent.replace(
      /[(.*?)]((.*?))/g,
      '$1'
    );

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

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

    return { __html: formattedContent };
  };

  return (
    

      <div id="{${agentType}-messages}">
        {messages.map((message, index) => (
          

            {!message.isUser && (
              

                

                  {agentInitials || "AI"}
                
              
            )}
            

              

            
          
        ))}
        {isLoading && (
          

            

              
{agentInitials || "AI"}
            
            

              Thinking
            
          
        )}
        

      
      

        

           setInput(e.target.value)}
            onKeyPress={handleKeyPress}
          />
          <button id="{${agentType}-send}"> handleSendMessage()}
          >
            Send
          
        
      
    
  );
}

export default Chat;

代码的第二部分主要包含组件的 JSX。

好了，接下来让我们通过将以下代码添加到文件中来执行文件：Footer.jsx

function Footer() {
  return (
    
  );
}

export default Footer;

该代码几乎是不言自明的——它有一些联系方式，这些详细信息将显示在页面底部的页脚部分。

现在我们可以处理 .我还将其分为两部分。Layout.jsx

在此处添加代码库的第一部分：

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

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

  return (
    

      

正如布局所预期的那样，这部分代码有很多组件。

以下是要添加到文件中的代码的第二部分：

{/* Mobile menu, show/hide based on menu state */}
        {isMenuOpen && (
          

            

               setIsMenuOpen(false)}
              >
                Home

               setIsMenuOpen(false)}
              >
                Projects

               setIsMenuOpen(false)}
              >
                Career

               setIsMenuOpen(false)}
              >
                Services

               setIsMenuOpen(false)}
              >
                Research

               setIsMenuOpen(false)}
              >
                Contact

            
          
        )}
      

      

        {children}