StudyPal：您的人工智能个性化学习伙伴
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
介绍
学生们在应对现代教育的复杂性时，会遇到各种各样的挑战，从理解复杂的概念到有效地管理时间。传统的学习资源往往无法满足个体的需求和学习风格。StudyPal 作为一种动态且适应性强的解决方案，利用最新的人工智能和机器学习技术，提供个性化的学习体验。
StudyPal体验
主题选择和个性化
学生登录StudyPal后，可以从精选列表中选择自己感兴趣的科目，开启个性化的学习之旅。他们需要提供教育背景信息，StudyPal会根据他们当前的知识水平定制学习材料和练习。“附加信息”部分允许学生指定学习重点领域，确保学习内容与他们的学习目标相符。
智能学习材料生成
StudyPal 的人工智能引擎会生成简洁全面的学习资料，这些资料针对所选科目量身定制。这些资料将核心概念提炼成要点，方便快速复习和巩固。聊天功能则提供详细的解释，帮助读者进一步理解。
借助人工智能辅助进行多项选择题练习
StudyPal 提供交互式多项选择题练习模块，帮助用户将知识应用于实践。CopilotKit 的人工智能助手会在练习过程中提供情境指导，培养用户的独立思考和问题解决能力。
揭示其背后的原理：更深入的理解
学生可以通过向人工智能助手查询每个答案选项背后的详细解释和理由，从而更深入地了解相关主题。这种互动功能有助于培养批判性思维和分析能力。
进度跟踪和记分板
StudyPal 内置全面的记分板，可实时监控学习进度并评估学习表现。即时反馈能帮助学生发现需要改进的地方，并庆祝取得的成就。
StudyPal 的实际应用案例：
-
课堂辅助：
StudyPal 可以融入传统课堂教学，作为教师授课的补充。学生可以使用该平台复习关键概念、获取更多学习资料，并巩固课堂所学内容。教师也可以利用 StudyPal 为不同学习需求的学生提供个性化的帮助和支持。 -
远程学习支持：
随着远程和混合式学习模式的兴起，StudyPal 可以成为学生和教师的宝贵工具。学生可以通过网络连接随时随地访问 StudyPal，从而在课堂之外继续学习。教师可以使用 StudyPal 进行远程辅导、提供作业反馈并实时跟踪学生的学习进度。 -
考试准备：
StudyPal 是一款全面的考试准备工具，适用于标准化考试、入学考试和资格认证考试。学生可以利用该平台复习学习资料、练习考试题型，并获得人工智能助手提供的个性化反馈和指导。StudyPal 的自适应学习功能可以帮助学生发现薄弱环节，并将学习精力集中在最需要的地方。 -
职业发展：
除了学术学习之外，StudyPal 还能为各行各业的专业人士提供职业发展支持。专业人士可以利用该平台巩固行业知识、备考专业认证考试，并提升项目管理、数据分析或编程语言等领域的技能。StudyPal 的个性化学习方案能够帮助专业人士保持行业竞争力，并助力职业发展。 -
特殊教育支持：
StudyPal 可根据不同学习能力的学生的需求进行调整，包括有特殊教育需求的学生。教育工作者可以定制 StudyPal 的学习材料和练习，以适应不同的学习风格，为有学习障碍的学生提供额外支持，并提供互动测验或多媒体演示等替代评估方法。StudyPal 的人工智能助手还可以为需要额外支持的学生提供有针对性的帮助和便利。 -
语言学习和英语作为第二语言 (ESL) 支持：
StudyPal 可作为语言学习平台，帮助学生学习新语言或提高英语水平。学生可以访问 StudyPal 提供的语言专属学习资料，练习词汇和语法，并与人工智能助手进行对话练习。StudyPal 的自适应学习功能可以帮助学生按照自己的节奏学习，并根据个人需求和目标定制语言学习体验。
StudyPal 的技术栈
前端
StudyPal 的前端采用 React 精心打造，React 是一个著名的 JavaScript 库，以其创建引人入胜的用户界面的能力而闻名。借助 React 的组件化架构和虚拟 DOM，StudyPal 即使在处理复杂的 UI 元素和实时更新时，也能确保流畅且响应迅速的用户体验。
UI 设计：
我们项目的用户界面是使用 Tailwind 框架自主设计和开发的。如果您想开发类似的项目，您可以自行创建 UI，也可以使用我们 GitHub 代码库中的 UI。
Copilotkit 集成：为了集成 Copilotkit，组件需要用 `<head> ` 和`<body>` 标签
包裹。后端 URL 也包含在这些标签内。以下示例展示了如何在项目的 MCQ 部分集成 Copilotkit：<Copilotkit></Copilotkit>
const PracticeMCQ = () => {
return (
<>
<CopilotKit url="http://localhost:3000/api">
<McqQns />
</CopilotKit>
</>
)
}
为了方便学生在多项选择题练习中使用人工智能辅助，StudyPal 集成了<CopilotPopup/>CopilotKit 的组件。该组件提供了一个聊天界面，学生可以在这里请求多项选择题题目和提示，而无需透露完整答案。
<CopilotPopup
instructions={instructions}
defaultOpen={false}
labels={{
title: "StudyPal Copilot",
initial: "Hi there! 👋 You can ask me to generate personalized MCQ questions and hints.",
}}
clickOutsideToClose={false}
/>
为了管理提示显示，StudyPal 同时使用了 CopilotKit 的 ` <hook>`useCopilotAction和 ` useMakeCopilotReadable<hook>` 接口。前者允许应用程序定义由用户在聊天界面中的输入触发的自定义操作，而后者则确保 Copilot 可以读取代码段。
const [hintsShown, setHintsShown] = useState(new Array(questions.length).fill(false));
useMakeCopilotReadable(
"This is the current value of hintsShown usestate to show hints to questions: " + JSON.stringify(hintsShown)
);
useCopilotAction({
name: "updateHintsShown",
description: "Show or hide hints by updating the hintsShown state based on user requests for hints.",
parameters: [
{
name: "showHint",
type: "boolean",
description: "Show or hide hints."
},
{
name: "indexNo",
type: "number",
description: "Index number of the question for which the hint should be shown or hidden."
}
],
handler: async ({ showHint, indexNo }) => {
const newHintsShown = [...hintsShown];
newHintsShown[indexNo] = showHint;
setHintsShown(newHintsShown);
if (!hintUsed[indexNo]) {
hintUsed[indexNo] = showHint;
}
},
render: "Updating hints..."
});
此外，选择题虽然提供了多个选项，但最初不会显示任何提示。不过，当学生向 Copilot 请求帮助时，提示会在每个问题下方动态生成。这种方式确保学生能够以交互方式获取针对其具体问题的个性化提示。例如：
const [questions, setQuestions] = useState([{}]);
useMakeCopilotReadable(
"This is the questions with their options, hint and answers: " + JSON.stringify(questions)
);
useCopilotAction({
name: "newQuestions",
description: "Provide questions based on conditions given. If number of questions are not specified provide 10 of them. Do not tell questions and options in chat.",
parameters: [{
name: "items",
type: "object[]",
description: 'The new questions.',
attributes: [
{ name: "question", type: "string", description: 'The MCQ questions.' },
{ name: "option1", type: "string", description: "One of the four options and only one of them is correct." },
{ name: "option2", type: "string", description: "One of the four options and only one of them is correct." },
{ name: "option3", type: "string", description: "One of the four options and only one of them is correct." },
{ name: "option4", type: "string", description: "One of the four options and only one of them is correct." },
{ name: "hint", type: "string", description: "Hint to the question." },
{ name: "answer", type: "string", description: "Correct answer among available options." }
],
}],
handler: async ({ items }) => {
// { question, option1, option2, option3, option4, hint, answer }
const newQuestions = items.map(item => ({
question: item.question,
options: [item.option1, item.option2, item.option3, item.option4],
hint: item.hint,
answer: item.answer
}));
setQuestions(newQuestions);
setShowQuestion(true);
setHintsShown(new Array(newQuestions.length).fill(false));
setHintUsed(new Array(newQuestions.length).fill(false));
},
render: "Updating questions...",
});
修订点是使用 OpenAI API 生成的，并使用与上述类似的技术与聊天集成。
后端
在后端，StudyPal 利用了高性能的 JavaScript 运行时环境 Node.js 和轻量级 Web 应用框架 Express.js。这种组合能够高效地处理服务器端操作，包括与 CopilotKit API 通信和处理用户请求。
CopilotKit 的集成是 StudyPal 人工智能功能的核心。作为一座桥梁，CopilotKit 实现了 StudyPal 应用与 GPT-3.5 等强大的语言模型之间的无缝通信。借助 CopilotKit 的 API，StudyPal 可以利用自然语言处理 (NLP) 和机器学习领域的尖端技术，生成个性化的学习资料、上下文相关的提示和详细的解释。
const HEADERS = {
// Modify CORS headers to match your frontend's origin
"Access-Control-Allow-Origin": "http://localhost:5173",
"Access-Control-Allow-Methods": "GET, POST, OPTIONS, PUT, PATCH, DELETE",
"Access-Control-Allow-Headers": "X-Requested-With,content-type",
};
// Use CORS for all routes
app.use(cors());
// Use express.json() to parse JSON bodies into JS objects
app.use(express.json());
// Define a route for POST requests to '/api'
app.post('/api', (request, response) => {
try {
const copilotKit = new CopilotBackend();
const adapterOptions = {
model: "gpt-3.5-turbo"
};
copilotKit.streamHttpServerResponse(request, response, new OpenAIAdapter(adapterOptions), HEADERS);
} catch (err) {
console.error(err);
response.end("error");
}
});
发展实践
StudyPal 的代码库遵循最新的行业标准，确保开发过程流畅高效。凭借 React、Node.js 和 CopilotKit 等顶尖技术，StudyPal 展示了教育技术领域的创新。
包起来
StudyPal 是一款功能全面的工具，正在重塑传统的学习模式。它集成了 CopilotKit，可在各种场景下提供个性化和智能化的支持，涵盖课堂拓展、远程学习和考试准备等领域。StudyPal 赋能学习者和教育者，展现了科技在教育领域的变革潜力。
演示
项目安装和设置指南
●克隆代码库：
git clone https://github.com/rajesh-adk-137/StudyPal.git
●安装依赖项：
-
前端内部：
npm install -
后端内部：
npm install
●设置环境变量： 在后端
添加一个文件并插入您的 API 密钥。.env.local
OPENAI_API_KEY=sk-proj-*******************************
我们使用的gpt-3.5-turbo是 OpenAI 模型。如果您想使用不同的 OpenAI 模型，请更改model配置文件中的相应设置backend\server.js。
const adapterOptions = {
model: "gpt-3.5-turbo"
};
●启动开发服务器：
- 设置前端：
- 设置后端：
●访问页面：
打开浏览器并访问http://localhost:5173。
-
如果您的前端并非运行在当前 URL 上
http://localhost:5173，而是运行在其他 URL 上，则需要更改 CORS 地址backend\server.js。在 HEADERS 文件中，需要更改以下行："Access-Control-Allow-Origin": "http://localhost:5173",
●有关 CopilotKit 的更多信息，请访问网站： https://www.copilotkit.ai/。
●项目 GitHub 链接：
https://github.com/rajesh-adk-137/StudyPal