Spaces:

shukdevdatta123
/

EduHelp

Running

File size: 9,445 Bytes

b656ce8

<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Educational Assistant</title>
  <!-- Bootstrap 5 -->
  <link
    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-c7DF2uX692G1LB+AU6CtQbmu6Ubfbdr6FLllSVEW9v56MZPPiBYkoQ7RZ2hFOTg1"
    crossorigin="anonymous"
  />
  <!-- Animate.css -->
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
  <!-- AOS -->
  <link
    href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css"
    rel="stylesheet"
  />
  <style>
    body {
      background: #f8f9fa;
    }
    .hero {
      background: url('image.jpeg') center/cover no-repeat;
      height: 300px;
      position: relative;
    }
    .hero h1 {
      position: absolute;
      bottom: 20px;
      left: 20px;
      color: white;
      text-shadow: 0 0 10px rgba(0,0,0,0.7);
    }
    .offcanvas-body {
      padding-top: 1rem;
    }
  </style>
</head>
<body>
  <!-- Navbar with sidebar toggle -->
  <nav class="navbar navbar-light bg-white shadow-sm">
    <div class="container-fluid">
      <button
        class="btn btn-outline-primary"
        type="button"
        data-bs-toggle="offcanvas"
        data-bs-target="#sidebar"
        aria-controls="sidebar"
      >
        ☰ Instructions
      </button>
      <span class="navbar-brand mb-0 h1">Educational Assistant</span>
    </div>
  </nav>

  <!-- Offcanvas Sidebar -->
  <div
    class="offcanvas offcanvas-start"
    tabindex="-1"
    id="sidebar"
    aria-labelledby="sidebarLabel"
  >
    <div class="offcanvas-header">
      <h5 id="sidebarLabel">Instructions</h5>
      <button
        type="button"
        class="btn-close text-reset"
        data-bs-dismiss="offcanvas"
        aria-label="Close"
      ></button>
    </div>
    <div class="offcanvas-body">
      <ol>
        <li>Enter your OpenAI API key below (password field).</li>
        <li>Upload a PDF via the “Upload PDF” button.</li>
        <li>Select one:
          <ul>
            <li>Generate Summary</li>
            <li>Generate Quiz</li>
            <li>Ask a Question</li>
            <li>Generate Study Plan</li>
          </ul>
        </li>
        <li>If asking a question, type it in.</li>
        <li>Click “Generate” and then download your result as PDF.</li>
      </ol>
    </div>
  </div>

  <!-- Hero Section -->
  <section class="hero mb-4">
    <h1 class="animate__animated animate__fadeInDown">Study Smarter</h1>
  </section>

  <!-- Main Content -->
  <div class="container" data-aos="fade-up">
    <div class="row g-4">
      <!-- Controls Column -->
      <div class="col-lg-4">
        <div class="card shadow-sm">
          <div class="card-body">
            <div class="mb-3">
              <label for="apiKey" class="form-label">OpenAI API Key</label>
              <input
                type="password"
                class="form-control"
                id="apiKey"
                placeholder="sk-..."
              />
            </div>
            <div class="mb-3">
              <label for="pdfUpload" class="form-label">Upload PDF</label>
              <input
                class="form-control"
                type="file"
                id="pdfUpload"
                accept="application/pdf"
              />
            </div>
            <div class="mb-3">
              <label class="form-label">Option</label>
              <select class="form-select" id="optionSelect">
                <option>Generate Summary</option>
                <option>Generate Quiz</option>
                <option>Ask a Question</option>
                <option>Generate Study Plan</option>
              </select>
            </div>
            <div class="mb-3 d-none" id="questionGroup">
              <label for="questionInput" class="form-label">Your Question</label>
              <input
                type="text"
                class="form-control"
                id="questionInput"
                placeholder="Type your question..."
              />
            </div>
            <div class="d-grid">
              <button class="btn btn-primary" id="generateBtn">
                Generate
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Output Column -->
      <div class="col-lg-8">
        <div class="card shadow-sm">
          <div class="card-body">
            <h5 class="card-title">Result</h5>
            <div id="result" style="white-space: pre-wrap; min-height: 200px;">
              <!-- AI response appears here -->
            </div>
            <div class="mt-3 text-end">
              <button
                class="btn btn-success d-none"
                id="downloadBtn"
              >
                Download as PDF
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Scripts -->
  <!-- Bootstrap JS & dependencies -->
  <script
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-E6mRv7/D+K0PtPpK0O1J3DRgIh+tp3loX3f7ogf20+RskmIOrthyxU2048gASBZd"
    crossorigin="anonymous"
  ></script>
  <!-- PDF.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
  <!-- jsPDF -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <!-- AOS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>

  <script>
    AOS.init();
    const pdfjsLib = window['pdfjs-dist/build/pdf'];
    pdfjsLib.GlobalWorkerOptions.workerSrc =
      'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js';

    let pdfText = '';

    // Show/hide question input
    document
      .getElementById('optionSelect')
      .addEventListener('change', (e) => {
        const qg = document.getElementById('questionGroup');
        qg.classList.toggle(
          'd-none',
          e.target.value !== 'Ask a Question'
        );
      });

    // Load PDF and extract text
    document
      .getElementById('pdfUpload')
      .addEventListener('change', async (e) => {
        const file = e.target.files[0];
        if (!file) return;
        const arrayBuffer = await file.arrayBuffer();
        const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
        let fullText = '';
        for (let i = 1; i <= pdf.numPages; i++) {
          const page = await pdf.getPage(i);
          const txt = await page.getTextContent();
          fullText += txt.items.map((it) => it.str).join(' ') + '\n\n';
        }
        pdfText = fullText.trim();
        alert('PDF loaded: ' + pdf.numPages + ' pages');
      });

    // Generate & display, then prepare PDF download
    document
      .getElementById('generateBtn')
      .addEventListener('click', async () => {
        const key = document.getElementById('apiKey').value.trim();
        if (!key) return alert('Enter your OpenAI API key.');
        if (!pdfText) return alert('Please upload a PDF first.');
        const option = document.getElementById('optionSelect').value;
        let systemPrompt = '';
        let userPrompt = pdfText;
        if (option === 'Generate Summary') {
          systemPrompt = 'You are a smart assistant. Give a summary of the PDF.';
        } else if (option === 'Generate Quiz') {
          systemPrompt =
            'You are a smart assistant. Generate 10 multiple-choice quiz questions with 4 options each (include the correct answer).';
        } else if (option === 'Ask a Question') {
          systemPrompt = 'You are a smart assistant. Answer the user’s question based on the PDF.';
          const q = document.getElementById('questionInput').value.trim();
          if (!q) return alert('Type your question.');
          userPrompt += '\n\nUser question: ' + q;
        } else if (option === 'Generate Study Plan') {
          systemPrompt =
            'You are a smart assistant. Generate a balanced 7-day study plan dividing PDF content into 7 topics.';
        }

        // Call OpenAI
        const responseDiv = document.getElementById('result');
        responseDiv.textContent = 'Generating…';
        const resp = await fetch('https://api.openai.com/v1/chat/completions', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            Authorization: 'Bearer ' + key,
          },
          body: JSON.stringify({
            model: 'gpt-4o-mini',
            messages: [
              { role: 'system', content: systemPrompt },
              { role: 'user', content: userPrompt },
            ],
          }),
        });
        const data = await resp.json();
        const text = data.choices[0].message.content.trim();
        responseDiv.textContent = text;

        // Generate PDF with jsPDF
        const { jsPDF } = window.jspdf;
        const doc = new jsPDF();
        const lines = doc.splitTextToSize(text, 180);
        doc.setFontSize(12);
        doc.text(lines, 10, 10);
        // Show download button
        const dl = document.getElementById('downloadBtn');
        dl.classList.remove('d-none');
        dl.onclick = () => doc.save(`${option.replace(/ /g, '_')}.pdf`);
      });
  </script>
</body>
</html>