first commit
This commit is contained in:
inubimambo
27
.gitignore
vendored
27
.gitignore
vendored
@@ -0,0 +1,27 @@
|
||||
# Node
|
||||
node_modules/
|
||||
uploads/
|
||||
|
||||
# System
|
||||
.DS_Store
|
||||
.env
|
||||
*.log
|
||||
dist/
|
||||
build/
|
||||
__pycache__/
|
||||
*.pyc
|
||||
*.pyo
|
||||
*.pyd
|
||||
.cache/
|
||||
coverage/
|
||||
*.sqlite3
|
||||
*.db
|
||||
*.tgz
|
||||
*.zip
|
||||
*.bak
|
||||
*.tmp
|
||||
*.swp
|
||||
*.swo
|
||||
*.idea/
|
||||
*.iml
|
||||
*.code-workspace
|
||||
|
||||
0
.vscode/settings.json
vendored
0
.vscode/settings.json
vendored
@@ -0,0 +1,59 @@
|
||||
body {
|
||||
font-family: 'Segoe UI', Arial, sans-serif;
|
||||
background: #f7f9fb;
|
||||
color: #222;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
header {
|
||||
background: linear-gradient(90deg, #6a82fb 0%, #fc5c7d 100%);
|
||||
color: #fff;
|
||||
padding: 2rem 1rem 1rem 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
main {
|
||||
max-width: 900px;
|
||||
margin: 2rem auto;
|
||||
padding: 1rem;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.07);
|
||||
}
|
||||
section {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
h2 {
|
||||
color: #6a82fb;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
#upload-section input[type="file"] {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
button {
|
||||
background: #6a82fb;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 0.6rem 1.2rem;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
button:hover {
|
||||
background: #fc5c7d;
|
||||
}
|
||||
#summary-output, #quiz-output, #reminder-output, #progress-output {
|
||||
background: #f0f4fa;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
min-height: 60px;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
background: #f0f4fa;
|
||||
color: #888;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
43
index.html
43
index.html
@@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>EduCat: AI Study Buddy</title>
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>EduCat: AI Study Buddy</h1>
|
||||
<p>Your AI-powered study companion for polytechnic success!</p>
|
||||
</header>
|
||||
<main>
|
||||
<section id="upload-section">
|
||||
<h2>Upload Study Materials</h2>
|
||||
<input type="file" id="file-upload" multiple accept=".pdf,.doc,.docx,.ppt,.pptx,.txt">
|
||||
<button id="upload-btn">Upload</button>
|
||||
<div id="upload-status"></div>
|
||||
</section>
|
||||
<section id="summary-section">
|
||||
<h2>AI Summary</h2>
|
||||
<div id="summary-output">Upload your notes to see a summary here.</div>
|
||||
</section>
|
||||
<section id="quiz-section">
|
||||
<h2>Practice Quiz</h2>
|
||||
<div id="quiz-output">AI-generated quizzes will appear here.</div>
|
||||
</section>
|
||||
<section id="reminder-section">
|
||||
<h2>Study Reminders</h2>
|
||||
<div id="reminder-output">Personalized reminders will show here.</div>
|
||||
</section>
|
||||
<section id="progress-section">
|
||||
<h2>Progress Dashboard</h2>
|
||||
<div id="progress-output">Track your study progress visually!</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>EduCat © 2025. All rights reserved.</p>
|
||||
</footer>
|
||||
<script src="js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
515
js/app.js
515
js/app.js
@@ -0,0 +1,515 @@
|
||||
// EduCat: AI Study Buddy - Initial JS
|
||||
|
||||
// --- PAGE ROUTING LOGIC ---
|
||||
const pages = {
|
||||
main: `
|
||||
<header><h1>🐾 Welcome to EduCat: AI Study Buddy</h1><p>Your purr-fect companion for smarter studying!</p></header>
|
||||
<main>
|
||||
<section id="dashboard-section"></section>
|
||||
<section id="reminder-section"></section>
|
||||
<section id="chat-section"></section>
|
||||
</main>
|
||||
`,
|
||||
upload: `
|
||||
<header><h1>📤 Upload Materials & AI Summary 🐱</h1></header>
|
||||
<main>
|
||||
<section id="upload-section"></section>
|
||||
<section id="summary-section"></section>
|
||||
</main>
|
||||
`,
|
||||
quiz: `
|
||||
<header><h1>📝 Practice Quiz 🐾</h1></header>
|
||||
<main>
|
||||
<section id="quiz-section"></section>
|
||||
</main>
|
||||
`,
|
||||
chatbot: `
|
||||
<header><h1>💬 EduCat Chatbot 🐱</h1></header>
|
||||
<main>
|
||||
<section id="chat-section"></section>
|
||||
</main>
|
||||
`
|
||||
};
|
||||
|
||||
function renderPage(page) {
|
||||
document.body.innerHTML = `
|
||||
<nav style="display:flex;gap:1.2rem;padding:1rem 2rem;background:#f0f4fa;align-items:center;">
|
||||
<button class="nav-btn" data-page="main">🏠 Home</button>
|
||||
<button class="nav-btn" data-page="upload">📤 Upload & Summary</button>
|
||||
<button class="nav-btn" data-page="quiz">📝 Practice Quiz</button>
|
||||
<button class="nav-btn" data-page="chatbot">💬 Chatbot</button>
|
||||
</nav>
|
||||
${pages[page]}
|
||||
<footer><p>EduCat © 2025. All rights reserved.</p></footer>
|
||||
`;
|
||||
document.querySelectorAll('.nav-btn').forEach(btn => {
|
||||
btn.onclick = () => renderPage(btn.dataset.page);
|
||||
});
|
||||
// Re-initialize page content
|
||||
if (page === 'main') {
|
||||
renderDashboard();
|
||||
renderReminders();
|
||||
renderChatbot();
|
||||
} else if (page === 'upload') {
|
||||
renderUpload();
|
||||
renderSummary();
|
||||
} else if (page === 'quiz') {
|
||||
renderQuiz();
|
||||
} else if (page === 'chatbot') {
|
||||
renderChatbot();
|
||||
}
|
||||
}
|
||||
|
||||
// --- COMPONENT RENDERERS ---
|
||||
function renderDashboard() {
|
||||
const progressSection = document.getElementById('dashboard-section');
|
||||
if (!progressSection) return;
|
||||
progressSection.innerHTML = `
|
||||
<h2>📊 Progress Dashboard 🐾</h2>
|
||||
<div id="dashboard-cards" style="display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;">
|
||||
<div class="dashboard-card">
|
||||
<h3>📚 Study Sessions</h3>
|
||||
<p><b>5</b> sessions this week</p>
|
||||
<div class="dashboard-bar"><div style="width:70%"></div></div>
|
||||
</div>
|
||||
<div class="dashboard-card">
|
||||
<h3>✅ Quizzes Completed</h3>
|
||||
<p><b>3</b> / 5 this week</p>
|
||||
<div class="dashboard-bar"><div style="width:60%"></div></div>
|
||||
</div>
|
||||
<div class="dashboard-card">
|
||||
<h3>🏆 Streak</h3>
|
||||
<p><b>4</b> days in a row</p>
|
||||
<div class="dashboard-bar"><div style="width:80%"></div></div>
|
||||
</div>
|
||||
<div class="dashboard-card">
|
||||
<h3>💡 Motivation</h3>
|
||||
<p>“Keep going, you’re doing great!”</p>
|
||||
<div class="dashboard-bar"><div style="width:90%"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderReminders() {
|
||||
const reminderSection = document.getElementById('reminder-section');
|
||||
if (!reminderSection) return;
|
||||
reminderSection.innerHTML = `
|
||||
<h2>⏰ Study Reminders 🐱</h2>
|
||||
<div class="reminder-card">
|
||||
<ul id="reminder-list">
|
||||
<li>📅 Next quiz: <b>Friday, 3pm</b></li>
|
||||
<li>⏰ Review notes for <b>Math</b> tonight</li>
|
||||
<li>📝 Complete 2 practice quizzes by <b>Sunday</b></li>
|
||||
<li>💧 Take a short break every 45 minutes!</li>
|
||||
</ul>
|
||||
<form id="reminder-form" style="margin-top:1em;display:flex;gap:0.5em;flex-wrap:wrap;">
|
||||
<input type="text" id="reminder-input" placeholder="Add a schedule, quiz date, etc..." style="flex:1;padding:0.4em;border-radius:6px;border:1px solid #ccc;">
|
||||
<button type="submit">Add</button>
|
||||
</form>
|
||||
</div>
|
||||
`;
|
||||
const reminderList = document.getElementById('reminder-list');
|
||||
const reminderForm = document.getElementById('reminder-form');
|
||||
const reminderInput = document.getElementById('reminder-input');
|
||||
reminderForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
const val = reminderInput.value.trim();
|
||||
if (val) {
|
||||
const li = document.createElement('li');
|
||||
li.textContent = val;
|
||||
reminderList.appendChild(li);
|
||||
reminderInput.value = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function renderChatbot() {
|
||||
const chatSection = document.getElementById('chat-section');
|
||||
if (!chatSection) return;
|
||||
chatSection.innerHTML = `
|
||||
<h2>EduCat Chatbot</h2>
|
||||
<div id="chat-window" style="background:#f0f4fa;min-height:120px;padding:1rem;border-radius:8px;overflow-y:auto;max-height:260px;margin-bottom:1rem;"></div>
|
||||
<div style="display:flex;gap:0.5rem;">
|
||||
<input type="text" id="chat-input" placeholder="Type your message..." style="flex:1;padding:0.5rem;border-radius:6px;border:1px solid #ccc;">
|
||||
<button id="chat-send">Send</button>
|
||||
</div>
|
||||
`;
|
||||
const chatWindow = document.getElementById('chat-window');
|
||||
const chatInput = document.getElementById('chat-input');
|
||||
const sendBtn = document.getElementById('chat-send');
|
||||
|
||||
function addBubble(text, sender) {
|
||||
const bubble = document.createElement('div');
|
||||
bubble.className = sender === 'user' ? 'bubble user-bubble' : 'bubble ai-bubble';
|
||||
bubble.innerHTML = text;
|
||||
chatWindow.appendChild(bubble);
|
||||
chatWindow.scrollTop = chatWindow.scrollHeight;
|
||||
}
|
||||
|
||||
function showTyping() {
|
||||
const typing = document.createElement('div');
|
||||
typing.className = 'bubble ai-bubble typing';
|
||||
typing.id = 'ai-typing';
|
||||
typing.innerHTML = '<span class="dot"></span><span class="dot"></span><span class="dot"></span> EduCat is typing...';
|
||||
chatWindow.appendChild(typing);
|
||||
chatWindow.scrollTop = chatWindow.scrollHeight;
|
||||
}
|
||||
|
||||
function hideTyping() {
|
||||
const typing = document.getElementById('ai-typing');
|
||||
if (typing) typing.remove();
|
||||
}
|
||||
|
||||
sendBtn.addEventListener('click', sendMessage);
|
||||
chatInput.addEventListener('keydown', e => { if (e.key === 'Enter') sendMessage(); });
|
||||
|
||||
function sendMessage() {
|
||||
const msg = chatInput.value.trim();
|
||||
if (!msg) return;
|
||||
addBubble(msg, 'user');
|
||||
chatInput.value = '';
|
||||
showTyping();
|
||||
fetch('/api/chat', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ message: msg })
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
hideTyping();
|
||||
setTimeout(() => {
|
||||
addBubble(data.reply || data.error, 'ai');
|
||||
}, 500); // Simulate slight delay for realism
|
||||
})
|
||||
.catch(() => {
|
||||
hideTyping();
|
||||
addBubble('Error contacting chatbot.', 'ai');
|
||||
});
|
||||
}
|
||||
|
||||
// Add styles for bubbles and typing
|
||||
const style = document.createElement('style');
|
||||
style.innerHTML = `
|
||||
#chat-window { font-size: 1rem; }
|
||||
.bubble {
|
||||
display: inline-block;
|
||||
padding: 0.6em 1em;
|
||||
margin: 0.3em 0;
|
||||
border-radius: 18px;
|
||||
max-width: 80%;
|
||||
word-break: break-word;
|
||||
clear: both;
|
||||
position: relative;
|
||||
animation: fadeIn 0.2s;
|
||||
}
|
||||
.user-bubble {
|
||||
background: #6a82fb;
|
||||
color: #fff;
|
||||
align-self: flex-end;
|
||||
float: right;
|
||||
margin-left: 20%;
|
||||
}
|
||||
.ai-bubble {
|
||||
background: #fff;
|
||||
color: #222;
|
||||
border: 1px solid #e0e0e0;
|
||||
align-self: flex-start;
|
||||
float: left;
|
||||
margin-right: 20%;
|
||||
}
|
||||
.typing {
|
||||
opacity: 0.7;
|
||||
font-style: italic;
|
||||
}
|
||||
.dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 2px;
|
||||
background: #6a82fb;
|
||||
border-radius: 50%;
|
||||
animation: blink 1.4s infinite both;
|
||||
}
|
||||
.dot:nth-child(2) { animation-delay: 0.2s; }
|
||||
.dot:nth-child(3) { animation-delay: 0.4s; }
|
||||
@keyframes blink {
|
||||
0%, 80%, 100% { opacity: 0.2; }
|
||||
40% { opacity: 1; }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
function renderUpload() {
|
||||
const uploadSection = document.getElementById('upload-section');
|
||||
if (!uploadSection) return;
|
||||
uploadSection.innerHTML = `
|
||||
<h2>📤 Upload Study Materials 🐾</h2>
|
||||
<input type="file" id="file-upload" multiple accept=".pdf,.doc,.docx,.ppt,.pptx,.txt">
|
||||
<button id="upload-btn">Upload</button>
|
||||
<div id="upload-status"></div>
|
||||
`;
|
||||
document.getElementById('upload-btn').addEventListener('click', async () => {
|
||||
const fileInput = document.getElementById('file-upload');
|
||||
const statusDiv = document.getElementById('upload-status');
|
||||
if (!fileInput.files.length) {
|
||||
statusDiv.textContent = 'Please select at least one file.';
|
||||
return;
|
||||
}
|
||||
const file = fileInput.files[0];
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
statusDiv.textContent = 'Uploading...';
|
||||
try {
|
||||
const response = await fetch('/api/upload', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
const result = await response.json();
|
||||
if (response.ok) {
|
||||
statusDiv.textContent = 'File uploaded! Getting summary...';
|
||||
// Call Flowise summarization endpoint
|
||||
const summaryRes = await fetch('/api/flowise', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ filename: result.filename })
|
||||
});
|
||||
const summaryData = await summaryRes.json();
|
||||
document.getElementById('summary-output').textContent = summaryData.summary || 'No summary available.';
|
||||
} else {
|
||||
statusDiv.textContent = result.error || 'Upload failed.';
|
||||
}
|
||||
} catch (err) {
|
||||
statusDiv.textContent = 'Error uploading file.';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function renderSummary() {
|
||||
const summarySection = document.getElementById('summary-section');
|
||||
if (!summarySection) return;
|
||||
summarySection.innerHTML = `
|
||||
<h2>📝 AI Summary 🐱</h2>
|
||||
<div id="summary-output">Upload your notes to see a summary here.</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderQuiz() {
|
||||
const quizSection = document.getElementById('quiz-section');
|
||||
if (!quizSection) return;
|
||||
// Subjects and questions
|
||||
const subjects = {
|
||||
Math: [
|
||||
{
|
||||
q: 'What is the value of π (pi) rounded to 2 decimal places?',
|
||||
opts: ['A. 3.12', 'B. 3.14', 'C. 3.16', 'D. 3.18'],
|
||||
ans: 'B. 3.14'
|
||||
},
|
||||
{
|
||||
q: 'Solve: 5 × 6 = ?',
|
||||
opts: ['A. 11', 'B. 30', 'C. 56', 'D. 26'],
|
||||
ans: 'B. 30'
|
||||
}
|
||||
],
|
||||
Science: [
|
||||
{
|
||||
q: 'What planet is known as the Red Planet?',
|
||||
opts: ['A. Venus', 'B. Mars', 'C. Jupiter', 'D. Saturn'],
|
||||
ans: 'B. Mars'
|
||||
},
|
||||
{
|
||||
q: 'What is H2O commonly known as?',
|
||||
opts: ['A. Oxygen', 'B. Hydrogen', 'C. Water', 'D. Helium'],
|
||||
ans: 'C. Water'
|
||||
}
|
||||
],
|
||||
History: [
|
||||
{
|
||||
q: 'Who was the first President of the United States?',
|
||||
opts: ['A. Abraham Lincoln', 'B. George Washington', 'C. John Adams', 'D. Thomas Jefferson'],
|
||||
ans: 'B. George Washington'
|
||||
},
|
||||
{
|
||||
q: 'In which year did World War II end?',
|
||||
opts: ['A. 1942', 'B. 1945', 'C. 1948', 'D. 1950'],
|
||||
ans: 'B. 1945'
|
||||
}
|
||||
]
|
||||
};
|
||||
let selectedSubject = Object.keys(subjects)[0];
|
||||
let currentQ = 0;
|
||||
quizSection.innerHTML = `
|
||||
<h2>Practice Quiz 🐾</h2>
|
||||
<div style="margin-bottom:1em;">
|
||||
<label for="subject-select"><b>Subject:</b></label>
|
||||
<select id="subject-select">
|
||||
${Object.keys(subjects).map(s => `<option value="${s}">${s}</option>`).join('')}
|
||||
</select>
|
||||
</div>
|
||||
<div class="quiz-card enhanced-quiz-card">
|
||||
<div class="quiz-q"></div>
|
||||
<div class="quiz-options"></div>
|
||||
<div class="quiz-feedback"></div>
|
||||
<div class="quiz-progress"></div>
|
||||
<div style="margin-top:1em;display:flex;justify-content:space-between;gap:0.5em;">
|
||||
<button id="prev-q">Previous</button>
|
||||
<button id="next-q">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
const subjectSelect = document.getElementById('subject-select');
|
||||
const quizQ = quizSection.querySelector('.quiz-q');
|
||||
const quizOpts = quizSection.querySelector('.quiz-options');
|
||||
const quizFeedback = quizSection.querySelector('.quiz-feedback');
|
||||
const quizProgress = quizSection.querySelector('.quiz-progress');
|
||||
const prevBtn = document.getElementById('prev-q');
|
||||
const nextBtn = document.getElementById('next-q');
|
||||
|
||||
function renderQuestion() {
|
||||
const qArr = subjects[selectedSubject];
|
||||
const qObj = qArr[currentQ];
|
||||
quizQ.innerHTML = `<span class='quiz-q-num'>Q${currentQ + 1} of ${qArr.length}</span> ${qObj.q}`;
|
||||
quizOpts.innerHTML = qObj.opts.map(opt => `<button class="quiz-opt">${opt}</button>`).join('');
|
||||
quizFeedback.textContent = '';
|
||||
quizProgress.innerHTML = `<div class='quiz-bar-bg'><div class='quiz-bar-fg' style='width:${((currentQ+1)/qArr.length)*100}%'></div></div>`;
|
||||
prevBtn.style.visibility = currentQ === 0 ? 'hidden' : 'visible';
|
||||
nextBtn.style.display = currentQ === qArr.length - 1 ? 'none' : 'inline-block';
|
||||
}
|
||||
renderQuestion();
|
||||
|
||||
quizOpts.addEventListener('click', function(e) {
|
||||
if (e.target.classList.contains('quiz-opt')) {
|
||||
const qObj = subjects[selectedSubject][currentQ];
|
||||
if (e.target.textContent === qObj.ans) {
|
||||
quizFeedback.textContent = '✅ Correct!';
|
||||
quizFeedback.style.color = '#2ecc40';
|
||||
} else {
|
||||
quizFeedback.textContent = '❌ Try again!';
|
||||
quizFeedback.style.color = '#fc5c7d';
|
||||
}
|
||||
}
|
||||
});
|
||||
subjectSelect.addEventListener('change', function() {
|
||||
selectedSubject = this.value;
|
||||
currentQ = 0;
|
||||
renderQuestion();
|
||||
});
|
||||
prevBtn.addEventListener('click', function() {
|
||||
if (currentQ > 0) {
|
||||
currentQ--;
|
||||
renderQuestion();
|
||||
}
|
||||
});
|
||||
nextBtn.addEventListener('click', function() {
|
||||
if (currentQ < subjects[selectedSubject].length - 1) {
|
||||
currentQ++;
|
||||
renderQuestion();
|
||||
}
|
||||
});
|
||||
|
||||
// Add/Update styles for enhanced quiz UI
|
||||
const quizStyle = document.createElement('style');
|
||||
quizStyle.innerHTML = `
|
||||
.enhanced-quiz-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 16px rgba(106,130,251,0.10);
|
||||
padding: 1.5rem 1.2rem 1.2rem 1.2rem;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
.quiz-q {
|
||||
font-weight: bold;
|
||||
margin-bottom: 1.1rem;
|
||||
font-size: 1.15rem;
|
||||
color: #6a82fb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.7em;
|
||||
}
|
||||
.quiz-q-num {
|
||||
background: #f0f4fa;
|
||||
color: #6a82fb;
|
||||
border-radius: 8px;
|
||||
padding: 0.2em 0.7em;
|
||||
font-size: 0.95em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
.quiz-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.7em;
|
||||
margin-bottom: 1.1rem;
|
||||
}
|
||||
.quiz-opt {
|
||||
background: #f7f9fb;
|
||||
border: 2px solid #6a82fb;
|
||||
color: #6a82fb;
|
||||
border-radius: 8px;
|
||||
padding: 0.7em 1.2em;
|
||||
font-size: 1.05em;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, color 0.2s, border 0.2s;
|
||||
text-align: left;
|
||||
}
|
||||
.quiz-opt:hover {
|
||||
background: #6a82fb;
|
||||
color: #fff;
|
||||
border: 2px solid #fc5c7d;
|
||||
}
|
||||
.quiz-feedback {
|
||||
font-size: 1.1em;
|
||||
margin-top: 0.5em;
|
||||
min-height: 1.5em;
|
||||
}
|
||||
.quiz-bar-bg {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
background: #e0e7fa;
|
||||
border-radius: 5px;
|
||||
margin: 0.7em 0 0.2em 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.quiz-bar-fg {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #6a82fb 0%, #fc5c7d 100%);
|
||||
border-radius: 5px;
|
||||
transition: width 0.4s;
|
||||
}
|
||||
#prev-q, #next-q {
|
||||
background: #6a82fb;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 0.5em 1.2em;
|
||||
border-radius: 6px;
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
#prev-q[style*="hidden"] {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
#next-q {
|
||||
background: #fc5c7d;
|
||||
}
|
||||
#next-q[style*="none"] {
|
||||
display: none !important;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(quizStyle);
|
||||
}
|
||||
|
||||
// --- INITIALIZE APP ---
|
||||
renderPage('main');
|
||||
|
||||
// Placeholder for AI summary, quiz, reminders, and progress dashboard
|
||||
// TODO: Connect to backend APIs (Perplexity, Gemini Dev, Telegram/Discord bots, etc.)
|
||||
|
||||
1472
package-lock.json
generated
Normal file
1472
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
21
package.json
Normal file
21
package.json
Normal file
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "educat-ai-study-buddy",
|
||||
"version": "1.0.0",
|
||||
"description": "EduCat: AI Study Buddy - Node.js backend with Flowise integration",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
"start": "node server.js",
|
||||
"dev": "nodemon server.js"
|
||||
},
|
||||
"author": "",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"axios": "^1.6.7",
|
||||
"cors": "^2.8.5",
|
||||
"express": "^4.18.2",
|
||||
"multer": "^2.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nodemon": "^3.0.3"
|
||||
}
|
||||
}
|
||||
75
server.js
Normal file
75
server.js
Normal file
@@ -0,0 +1,75 @@
|
||||
const express = require('express');
|
||||
const multer = require('multer');
|
||||
const path = require('path');
|
||||
const cors = require('cors');
|
||||
const fs = require('fs');
|
||||
const axios = require('axios');
|
||||
|
||||
const app = express();
|
||||
const PORT = process.env.PORT || 3000;
|
||||
|
||||
// Middleware
|
||||
app.use(cors());
|
||||
app.use(express.json());
|
||||
app.use(express.static(path.join(__dirname)));
|
||||
|
||||
// Multer setup for file uploads
|
||||
const upload = multer({
|
||||
dest: path.join(__dirname, 'uploads/')
|
||||
});
|
||||
|
||||
// File upload endpoint
|
||||
app.post('/api/upload', upload.single('file'), async (req, res) => {
|
||||
if (!req.file) {
|
||||
return res.status(400).json({ error: 'No file uploaded' });
|
||||
}
|
||||
// TODO: Integrate with Flowise API for summarization/quiz
|
||||
// Example: send file to Flowise and get summary/quiz
|
||||
// const flowiseResponse = await axios.post('FLOWISE_API_URL', ...);
|
||||
res.json({
|
||||
message: 'File uploaded successfully',
|
||||
filename: req.file.filename,
|
||||
originalname: req.file.originalname
|
||||
});
|
||||
});
|
||||
|
||||
// Placeholder endpoint for summarization/quiz (to be implemented)
|
||||
app.post('/api/flowise', async (req, res) => {
|
||||
// Simulate Flowise integration: read uploaded file and return a fake summary
|
||||
const { filename } = req.body;
|
||||
if (!filename) {
|
||||
return res.status(400).json({ error: 'Filename required' });
|
||||
}
|
||||
const filePath = path.join(__dirname, 'uploads', filename);
|
||||
try {
|
||||
const fileContent = fs.readFileSync(filePath, 'utf8');
|
||||
// TODO: Replace with actual Flowise API call
|
||||
// const flowiseResponse = await axios.post('FLOWISE_API_URL', { content: fileContent });
|
||||
// return res.json({ summary: flowiseResponse.data.summary });
|
||||
res.json({ summary: `Sample summary for file: ${filename}\n\n${fileContent.substring(0, 200)}...` });
|
||||
} catch (err) {
|
||||
res.status(500).json({ error: 'Could not read file for summary.' });
|
||||
}
|
||||
});
|
||||
|
||||
// Chatbot endpoint for chitchat with Flowise ChatGPT
|
||||
app.post('/api/chat', async (req, res) => {
|
||||
const { message } = req.body;
|
||||
if (!message) {
|
||||
return res.status(400).json({ error: 'Message required' });
|
||||
}
|
||||
try {
|
||||
const flowiseRes = await axios.post(
|
||||
'https://flowise.suika.cc/api/v1/prediction/5079e3d1-4e79-42f5-9c90-1142d9eede4c',
|
||||
{ question: message },
|
||||
{ headers: { 'Content-Type': 'application/json' } }
|
||||
);
|
||||
res.json({ reply: flowiseRes.data.text || flowiseRes.data.answer || 'No reply.' });
|
||||
} catch (err) {
|
||||
res.status(500).json({ error: 'Failed to get reply from Flowise.' });
|
||||
}
|
||||
});
|
||||
|
||||
app.listen(PORT, () => {
|
||||
console.log(`EduCat backend running on http://localhost:${PORT}`);
|
||||
});
|
||||
Reference in New Issue
Block a user