Academic Muse：用人工智能赋能学习，提升无限生产力！🚀✨📚👩🏻‍💻

学术缪斯

这是KendoReact 免费组件挑战赛的参赛作品。

我建造的

Academic Muse是一个创新的学术平台，它通过人工智能生成的讲解和动态反馈，帮助学习者探索、理解和掌握新知识。它能无缝引导你从深入学习陌生学科到精准管理学习进度，让你的学习之旅既充满乐趣又高效。

核心学习章节

1️⃣主题指南📚

输入任何主题并选择您的学术水平，即可获得由人工智能生成的、专为您量身定制的清晰解释。

2️⃣测试与成长🧠

分享你对某个主题的理解，让 AI 进行基于 SWOT 的分析，提供有见地的反馈和建议，以加深你的掌握。

3️⃣主要收获💡

根据你选择的主题和学术水平，生成简洁的摘要、关键术语、缩写词和精选的学习资源，以加强你的记忆。

生产力和时间管理工具

1️⃣番茄钟计时器⏱️

设置专注的工作间隔（25 至 120 分钟），并通过有节奏的声音保持专注，帮助您保持专注。

2️⃣每日学习提示⏰

设置最多三个每日提醒，这些提醒仅在您访问网站时激活——确保您的学习课程以温和、及时的提醒开始。

3️⃣每周学习脉搏📊

安排您的学习或深度工作时间，并通过引人注目的条形图即时可视化您的每周进度，突出显示您的势头。

4️⃣学习计划表🗓️

规划您一天的学习或工作时段（每个时段持续 30 至 120 分钟），并在开始时间前后及时收到提醒。全面的会话历史记录会跟踪已完成、错过和正在进行的会话（甚至包括即将到来的会话）。

附加功能

1️⃣切换模式（深色/浅色） 🌗

享受可自定义的界面，同时提供深色和浅色主题，带来舒适、个性化的观看体验。

2️⃣直观的导航🍔

使用汉堡菜单轻松探索平台的不同部分，实现流畅且引人入胜的互动。

演示

想亲眼看看它的实际效果吗？
点击这里访问我的网站：学术缪斯

或者你可以在这里观看它的运行演示：

如果你对编程感兴趣👩🏻‍💻👨🏻‍💻，欢迎来这里浏览我的GitHub代码库。

Divya4879 /我的 KendoReact 应用

学术缪斯

请访问Academic Muse查看详情。

Academic Muse是一个充满活力的学术平台，它会根据您的教育水平定制学习资源、评估和反馈，从而助力您的学习之旅。它还配备了番茄钟计时器、智能提醒和可视化会话跟踪功能，以提高学习效率和进度。

项目概述

Academic Muse彻底改变了您获取、整合和记忆知识的方式。它提供量身定制的主题指南、带有深度反馈的互动式测验，以及与您的学术水平相匹配的简洁要点，从而革新您的学习体验。凭借强大的时间管理工具，例如番茄钟、可自定义的每日提醒、带有每周可视化分析的会话记录，以及带有持续提醒的当日会话安排功能，Academic Muse 为研究和日常学习提供了一套全面的解决方案。

学术发现的力量

保持井然有序并积极参与：

定制主题指南：生成适合您学术水平的解释。
互动式评估：测试您的理解程度，并获得详细的个性化评估……

在 GitHub 上查看

KendoReact 体验

Academic Muse 利用一套KendoReact组件，打造出精致直观的用户界面。这些组件协同工作，@progress/kendo-theme-default确保用户界面统一、专业且易于使用。以下详细介绍每个组件、其用途以及在我的应用程序中的使用位置。

1️⃣ @progress/kendo-react-dialogs

窗户
- 用途：提供浮动面板或窗口，用于弹出表单、附加信息面板或工具窗口等高级功能。
- 在 Academic Muse 中：此组件会向首次访问者显示欢迎模态框，向他们介绍网站的用途和主要功能。
对话
- 用法：启用模态对话框，通过在主要内容上叠加显示来提示用户输入或显示重要消息。
- 在 Academic Muse 中：用于确认信息、警告。
对话框操作栏
- 用途：为对话框操作按钮（例如，确定、取消）提供样式容器，以增强用户体验。
- 在 Academic Muse 中：确保对话框中的操作按钮样式一致且易于访问。

import { Dialog, DialogActionsBar } from '@progress/kendo-react-dialogs';
import { Window } from "@progress/kendo-react-dialogs";

2️⃣ @progress/kendo-react-dropdowns

下拉列表
- 用法：显示一个下拉菜单，用于选择主题或类别等项目。
- 在 Academic Muse 中：用于以各种形式选择学术水平、主题或类别。
下拉列表更改事件
- 用法：提供类型化的事件处理程序，用于管理下拉列表选择的变化。
- 在 Academic Muse 中：确保对用户选择进行一致且类型安全的处理。

import { DropDownList, DropDownListChangeEvent } from '@progress/kendo-react-dropdowns';

3️⃣ @progress/kendo-react-inputs

输入
- 用途：用于捕获简短用户输入（例如查询、主题或会话名称）的基本文本输入字段。
- 在 Academic Muse 中：用于表单中以捕获主题名称和其他简短的文本输入。
数字文本框
- 用途：允许数值输入，并可选递增/递减控制，非常适合设置时间长度或数值。
- 在 Academic Muse 中：可用于指定数值，例如会话持续时间或学习目标。
文本区域
- 用途：支持多行文本输入，适合用户输入较长的内容。
- 在 Academic Muse 中：用于用户需要输入详细解释或大量笔记的情况。
输入框更改事件、数字文本框更改事件、文本区域更改事件
- 用途：类型化的事件处理程序，可确保对输入更改进行一致且类型安全的管理。
- 在 Academic Muse 中：用于可靠地处理用户在各种表单组件中的输入。

import { TextArea, TextAreaChangeEvent } from '@progress/kendo-react-inputs';
import { Input, InputChangeEvent } from '@progress/kendo-react-inputs';
import { NumericTextBox, NumericTextBoxChangeEvent } from '@progress/kendo-react-inputs';

4️⃣ @progress/kendo-react-buttons

按钮
- 用途：提供响应式、主题化的按钮，用于触发表单提交或导航等操作。
- 在 Academic Muse 中：广泛用于“生成解释”、“评估理解”和“添加学习课程”等操作。
纽扣把手
- 用法：允许以编程方式访问按钮的方法和属性。
- 在 Academic Muse 中：当需要通过代码控制或触发按钮行为时非常有用。

import { Button } from '@progress/kendo-react-buttons';

5️⃣ @progress/kendo-react-popup

弹出窗口
- 用法：渲染可锚定到页面上元素的上下文感知弹出容器。
- 在 Academic Muse 中：用于在用户忘记在“关键要点”部分添加主题名称时显示交互式叠加层。

import { Popup } from '@progress/kendo-react-popup';
const [showPopup, setShowPopup] = useState<boolean>(false);
const [popupMessage, setPopupMessage] = useState<string>('');

6️⃣ @progress/kendo-react-charts

图表
- 用途：构建交互式和响应式图表的核心组件。
- Academic Muse：通过数据驱动的图表，可视化每周学习课程和用户整体进度。
图表系列，图表系列项
- 用法：定义图表中的各个数据系列。
- 在 Academic Muse 中：表示各种学习指标和绩效指标。
图表类别轴，图表类别轴项
- 用法：配置图表的类别（x）轴，以便清晰地对数据进行分类和标记。
- 在 Academic Muse 中：确保图表数据组织清晰，易于理解。

import {
  Chart,
  ChartSeries,
  ChartSeriesItem,
  ChartCategoryAxis,
  ChartCategoryAxisItem,
} from '@progress/kendo-react-charts';

7️⃣ @progress/kendo-react-dateinputs

时间选择器
- 用途：提供用户友好的界面，方便选择时间，对于安排和设置课程时间至关重要。
- 在 Academic Muse 中：用于日程安排界面，使用户可以轻松设置和调整学习时间。

import { TimePicker } from '@progress/kendo-react-dateinputs';
<TimePicker value={newSessionStart}
 onChange={(e) => setNewSessionStart(e.value as Date)}
 format="HH:mm"
 />

8️⃣ @progress/kendo-react-notification

通知
- 用途：以非侵入式的方式显示及时的警报、确认或成功消息。
- 在 Academic Muse 中：用于发送通知，例如成功消息、提醒或错误警报。

import { Notification } from '@progress/kendo-react-notification';
<Notification
          type={{ style: 'warning', icon: true }}
          closable={true}
          onClose={() => setNotificationSession(null)}
          style={{
            position: 'fixed',
            top: '12rem',
            right: '1rem',
            zIndex: 3000,
            width: '300px',
            borderRadius: '8px',
            backgroundColor: 'var(--notification-bg)',
            border: `1px solid var(--notification-border)`
          }}
 />

9️⃣ @progress/kendo-react-progressbars

进度条
- 用途：显示可视化进度指示器。其外观（例如，绿色）可通过内联样式或 CSS 进行自定义。
- 在 Academic Muse 中：用于跟踪内容生成等操作过程中的进度，提供实时反馈。

import { ProgressBar } from "@progress/kendo-react-progressbars";

🔟 @progress/kendo-react-labels

标签
- 用途：提供样式化的标签组件，以一致地显示文本提示或表单字段标签。
- 在 Academic Muse 中：确保所有表单标签和文本提示保持一致的专业外观。

import { Label } from "@progress/kendo-react-labels";

注：所有这些组件都包含在KendoReact Core套件中，该套件可免费使用。它们为构建现代、易于访问且响应迅速的 Web 应用程序提供了强大的基础。

力求给人留下深刻印象

Academic Muse 通过在其核心模块中无缝集成先进的Groq AI API ，重新定义了学习体验。这种智能集成不仅增强了内容呈现，还通过动态讲解、个性化反馈和简洁精辟的关键见解，激发并赋能学习者。最终呈现出一段优雅而令人惊叹的学习之旅，将复杂的主题转化为引人入胜且易于理解的知识。

1️⃣主题指南：

借助Groq AI的强大功能，主题指南能够生成全面深入的解释，将复杂的主题分解成清晰易懂、引人入胜的叙述。该部分内容根据用户指定的主题和学术水平量身定制，将学习转化为一次启发性的探索之旅，不仅能够提供信息，还能吸引和激励学习者。

2️⃣测试与成长：

测试与成长板块利用Groq AI为用户提交的内容提供个性化的实时反馈。通过详细的评估和 SWOT 分析，AI 提供建设性的见解和切实可行的建议，从而推动持续改进。这种变革性的反馈机制将每一次互动都转化为成长的机会，使学习既互动又真正鼓舞人心。

3️⃣要点总结：

在“要点总结”部分，Groq AI将海量信息提炼成简洁明了、切实可行的见解。通过生成动态 SWOT 分析、突出关键要点，并提供创新的缩写词和学习技巧，本部分为学习者提供快速参考资料，巩固学习成果。

设计精美

1️⃣ 定制组件样式：

利用 Kendo UI ThemeBuilder 为我的组件设置样式，完全按照我最初的设想进行，从按钮形状和间距到字体排版，对所有元素都进行了自定义。
2️⃣ 无缝设计集成：

利用 Progress ThemeBuilder 打造了一个既优雅又用户友好的界面，确保每个细节都为和谐的体验做出贡献。
3️⃣ 导出和集成：

导出了一个包含 Sass、CSS、自定义组件和字体的 ZIP 包，然后将其作为 NPM 包集成到我的项目中，与 KendoReact Material 主题完美兼容。
4️⃣ 迭代式设计流程：

我们采用迭代式设计方法，对每一个设计细节——从配色方案到字体——进行精雕细琢，最终打造出精致、愉悦且一致的用户体验。🚀✨