Spaces:

shukdevdatta123
/

EduHelp

Running

File size: 11,257 Bytes

<!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>

  <!-- Google Font -->
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet"/>

  <!-- 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>
    /* ========== CSS VARIABLES ========== */
    :root {
      --clr-primary: #6C63FF;
      --clr-secondary: #FF6584;
      --clr-bg: #F4F7FF;
      --clr-card-bg: rgba(255, 255, 255, 0.65);
      --clr-text: #333;
      --transition: 0.3s ease-in-out;
      --font: 'Poppins', sans-serif;
    }

    body {
      margin: 0;
      font-family: var(--font);
      background: var(--clr-bg);
      color: var(--clr-text);
      overflow-x: hidden;
    }

    /* ===== HERO ===== */
    .hero {
      position: relative;
      height: 300px;
      background: linear-gradient(135deg, rgba(108,99,255,0.8), rgba(255,101,132,0.8)), 
                  url('image.jpeg') center/cover no-repeat;
    }
    .hero h1 {
      position: absolute;
      bottom: 30px;
      left: 30px;
      font-size: 3rem;
      color: #fff;
      text-shadow: 0 3px 10px rgba(0,0,0,0.4);
      margin: 0;
    }

    /* ===== NAVBAR ===== */
    .navbar {
      background: #fff;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }
    .navbar-brand {
      font-weight: 600;
      color: var(--clr-primary) !important;
    }
    .btn-outline-primary {
      border-color: var(--clr-primary);
      color: var(--clr-primary);
      transition: var(--transition);
    }
    .btn-outline-primary:hover {
      background: var(--clr-primary);
      color: #fff;
    }

    /* ===== OFFCANVAS ===== */
    .offcanvas {
      backdrop-filter: blur(4px);
    }
    .offcanvas-header {
      border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    .offcanvas-body ol {
      padding-left: 1rem;
    }

    /* ===== CARDS ===== */
    .card {
      background: var(--clr-card-bg);
      backdrop-filter: blur(8px);
      border: none;
      border-radius: 1rem;
      transition: var(--transition);
    }
    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    .card-title {
      font-weight: 600;
      color: var(--clr-primary);
    }

    /* ===== FORM ELEMENTS ===== */
    .form-control, .form-select {
      border-radius: 0.75rem;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
      transition: var(--transition);
    }
    .form-control:focus, .form-select:focus {
      border-color: var(--clr-primary);
      box-shadow: 0 0 0 0.2rem rgba(108,99,255,0.25);
    }

    /* ===== BUTTONS ===== */
    .btn-primary {
      background: linear-gradient(135deg, var(--clr-primary), var(--clr-secondary));
      border: none;
      border-radius: 0.75rem;
      transition: var(--transition);
    }
    .btn-primary:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 20px rgba(108,99,255,0.3);
    }
    .btn-success {
      background: var(--clr-primary);
      border: none;
      border-radius: 0.75rem;
      transition: var(--transition);
    }
    .btn-success:hover {
      background: var(--clr-secondary);
      transform: translateY(-2px);
    }

    /* ===== RESULT BOX ===== */
    #result {
      background: #fff;
      padding: 1rem;
      border-radius: 0.75rem;
      min-height: 200px;
      box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
      white-space: pre-wrap;
    }

    /* ===== SCROLLBAR ===== */
    ::-webkit-scrollbar {
      width: 8px;
    }
    ::-webkit-scrollbar-track {
      background: #f1f1f1;
    }
    ::-webkit-scrollbar-thumb {
      background: var(--clr-primary);
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <!-- NAVBAR -->
  <nav class="navbar navbar-light">
    <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">How to Use</h5>
      <button
        type="button"
        class="btn-close"
        data-bs-dismiss="offcanvas"
        aria-label="Close"
      ></button>
    </div>
    <div class="offcanvas-body">
      <ol>
        <li>Enter your OpenAI API key.</li>
        <li>Upload a PDF file.</li>
        <li>Select one of:
          <ul>
            <li>Generate Summary</li>
            <li>Generate Quiz</li>
            <li>Ask a Question</li>
            <li>Generate Study Plan</li>
          </ul>
        </li>
        <li>If “Ask a Question,” type it in the field.</li>
        <li>Click “Generate” and download the PDF.</li>
      </ol>
    </div>
  </div>

  <!-- HERO -->
  <section class="hero animate__animated animate__fadeIn"></section>

  <!-- MAIN -->
  <div class="container my-5" data-aos="fade-up">
    <div class="row g-4">
      <!-- CONTROLS -->
      <div class="col-lg-4">
        <div class="card p-4">
          <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 for="optionSelect" 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>
      <!-- OUTPUT -->
      <div class="col-lg-8">
        <div class="card p-4">
          <h5 class="card-title">Result</h5>
          <div id="result"></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>

  <!-- SCRIPTS -->
  <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>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <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 = '';

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

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

    // Generate & download
    document.getElementById('generateBtn').addEventListener('click', async () => {
      const key = document.getElementById('apiKey').value.trim();
      if (!key) return alert('Please enter your OpenAI API key.');
      if (!pdfText) return alert('Please upload a PDF first.');

      const opt = document.getElementById('optionSelect').value;
      let sys = '', user = pdfText;
      if (opt === 'Generate Summary') {
        sys = 'You are a smart assistant. Give a summary of the PDF.';
      } else if (opt === 'Generate Quiz') {
        sys = 'You are a smart assistant. Generate 10 multiple-choice quiz questions with 4 options each (include the correct answer).';
      } else if (opt === 'Ask a Question') {
        sys = '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('Please type your question.');
        user += '\\n\\nUser question: ' + q;
      } else {
        sys = 'You are a smart assistant. Generate a balanced 7-day study plan dividing PDF content into 7 topics.';
      }

      // Call OpenAI
      const resDiv = document.getElementById('result');
      resDiv.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: sys },
            { role: 'user', content: user },
          ],
        }),
      });
      const data = await resp.json();
      const text = data.choices[0].message.content.trim();
      resDiv.textContent = text;

      // Prepare PDF
      const { jsPDF } = window.jspdf;
      const doc = new jsPDF();
      const lines = doc.splitTextToSize(text, 180);
      doc.setFontSize(12);
      doc.text(lines, 10, 10);

      const dlBtn = document.getElementById('downloadBtn');
      dlBtn.classList.remove('d-none');
      dlBtn.onclick = () => doc.save(`${opt.replace(/ /g, '_')}.pdf`);
    });
  </script>
</body>
</html>