education-module-ai
Version:
AI Education Module using Agent Framework
281 lines (271 loc) • 9.59 kB
JSX
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const head_1 = __importDefault(require("next/head"));
const link_1 = __importDefault(require("next/link"));
const config_1 = require("../config");
// Inline styles object with proper React CSSProperties type
const styles = {
container: {
minHeight: '100vh',
padding: '0 0.5rem',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
maxWidth: '1200px',
margin: '0 auto',
},
main: {
padding: '5rem 0',
flex: 1,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
width: '100%',
},
title: {
margin: 0,
lineHeight: 1.15,
fontSize: '4rem',
textAlign: 'center',
},
description: {
lineHeight: 1.5,
fontSize: '1.5rem',
margin: '1rem 0',
textAlign: 'center',
},
apiStatus: {
margin: '2rem 0',
fontSize: '1.2rem',
},
loading: {
color: '#f0ad4e',
},
online: {
color: '#5cb85c',
fontWeight: 'bold',
},
offline: {
color: '#d9534f',
fontWeight: 'bold',
},
grid: {
display: 'flex',
alignItems: 'stretch',
justifyContent: 'center',
flexWrap: 'wrap',
width: '100%',
marginTop: '3rem',
},
card: {
margin: '1rem',
flexBasis: '30%',
padding: '1.5rem',
color: 'inherit',
textDecoration: 'none',
border: '1px solid #eaeaea',
borderRadius: '10px',
transition: 'color 0.15s ease, border-color 0.15s ease',
minHeight: '250px',
},
cardFeatured: {
margin: '1rem',
flexBasis: '100%',
padding: '1.5rem',
color: 'inherit',
textDecoration: 'none',
border: '2px solid #0070f3',
borderRadius: '10px',
transition: 'color 0.15s ease, border-color 0.15s ease',
minHeight: '250px',
backgroundColor: '#f5f9ff',
},
cardTitle: {
margin: '0 0 1rem 0',
fontSize: '1.5rem',
},
cardContent: {
margin: '0 0 1.5rem 0',
fontSize: '1.25rem',
lineHeight: 1.5,
},
subjectsList: {
paddingLeft: '1.5rem',
},
subjectsListItem: {
marginBottom: '0.5rem',
textTransform: 'capitalize',
},
button: {
backgroundColor: '#0070f3',
color: 'white',
border: 'none',
borderRadius: '5px',
padding: '0.75rem 1.5rem',
fontSize: '1rem',
cursor: 'pointer',
transition: 'background-color 0.15s ease',
},
buttonDisabled: {
backgroundColor: '#cccccc',
color: 'white',
border: 'none',
borderRadius: '5px',
padding: '0.75rem 1.5rem',
fontSize: '1rem',
cursor: 'not-allowed',
},
};
const Home = () => {
const [apiStatus, setApiStatus] = (0, react_1.useState)('loading');
const [subjects, setSubjects] = (0, react_1.useState)([
'mathematics',
'science',
'history',
'language_arts',
'computer_science',
'art',
'music'
]);
(0, react_1.useEffect)(() => {
// Check if the API is online
const checkApiStatus = async () => {
try {
// Try to fetch educational contents to see if the API is running
const response = await fetch((0, config_1.getApiUrl)('/api/educational-contents'));
if (response.ok) {
setApiStatus('online');
}
else {
setApiStatus('offline');
}
}
catch (error) {
setApiStatus('offline');
console.error('Error checking API status:', error);
}
};
checkApiStatus();
}, []);
// Get status style based on current API status
const getStatusStyle = () => {
if (apiStatus === 'loading')
return styles.loading;
if (apiStatus === 'online')
return styles.online;
return styles.offline;
};
// Get button style based on disabled state
const getButtonStyle = (disabled) => {
return disabled ? styles.buttonDisabled : styles.button;
};
return (<div style={styles.container}>
<head_1.default>
<title>Education Module</title>
<meta name="description" content="AI-powered educational platform"/>
<link rel="icon" href="/favicon.ico"/>
</head_1.default>
<main style={styles.main}>
<h1 style={styles.title}>
Welcome to the Education Module
</h1>
<p style={styles.description}>
An AI-powered educational platform
</p>
<div style={styles.apiStatus}>
API Status: {' '}
{apiStatus === 'loading' ? (<span style={styles.loading}>Checking...</span>) : apiStatus === 'online' ? (<span style={styles.online}>Online</span>) : (<span style={styles.offline}>Offline - Make sure to run the backend with 'pnpm run backend'</span>)}
</div>
<div style={styles.grid}>
<div style={styles.card}>
<h2 style={styles.cardTitle}>Educational Content</h2>
<p style={styles.cardContent}>Explore educational content in various subjects:</p>
<ul style={styles.subjectsList}>
{subjects.map((subject) => (<li key={subject} style={styles.subjectsListItem}>{subject.replace('_', ' ')}</li>))}
</ul>
</div>
<div style={styles.card}>
<h2 style={styles.cardTitle}>Learning Sessions</h2>
<p style={styles.cardContent}>Start an interactive learning session with our AI tutor!</p>
<button style={getButtonStyle(apiStatus !== 'online')} disabled={apiStatus !== 'online'}>
Start Session
</button>
</div>
<div style={styles.card}>
<h2 style={styles.cardTitle}>User Profile</h2>
<p style={styles.cardContent}>Create and manage your learning profile.</p>
<button style={getButtonStyle(apiStatus !== 'online')} disabled={apiStatus !== 'online'}>
Manage Profile
</button>
</div>
<div style={styles.card}>
<h2 style={styles.cardTitle}>AI Quiz Generator</h2>
<p style={styles.cardContent}>Test your knowledge with AI-generated quizzes on any topic of your choice.</p>
<link_1.default href="/quiz">
<button style={getButtonStyle(apiStatus !== 'online')} disabled={apiStatus !== 'online'}>
Generate Quiz
</button>
</link_1.default>
</div>
<div style={styles.card}>
<h2 style={styles.cardTitle}>Ask Educational Questions</h2>
<p style={styles.cardContent}>Get answers to your educational questions with detailed explanations from our AI tutor.</p>
<link_1.default href="/questions">
<button style={getButtonStyle(apiStatus !== 'online')} disabled={apiStatus !== 'online'}>
Ask Questions
</button>
</link_1.default>
</div>
<div style={styles.cardFeatured}>
<h2 style={styles.cardTitle}>AI Learning Path Generator</h2>
<p style={styles.cardContent}>Get a personalized learning path for any topic, complete with resources and step-by-step guidance.</p>
<link_1.default href="/learning-path">
<button style={getButtonStyle(apiStatus !== 'online')} disabled={apiStatus !== 'online'}>
Generate Learning Path
</button>
</link_1.default>
</div>
</div>
</main>
</div>);
};
exports.default = Home;