# Project export: Quizzical

This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small.

## Project metadata

- Hackathon: Cal Hacks 10.0
- Tagline: Elevate studying with our AI: personalized study material at your fingertips. We make studying easy so you can focus on learning. Revolutionize learning – for students, by students.
- Devpost: https://devpost.com/software/quizzical-nk0c67
- GitHub: https://github.com/Calhacks10-0/file_to_flashcard
- Team: 1 GitHub contributor(s) — aaravurg (27 commits)

## Devpost submission (written by the team)

### Inspiration

The inspiration for our transformative study tool emerges from the universal challenges students encounter when sifting through extensive information to identify the most relevant study material. As students ourselves, we often grapple with the task of making our own notes for each and every class while trying to manage the inherent stress of dorm and college life. Traditional methods can sometimes miss the mark, either bypassing crucial concepts or because of the use of presenting materials that don't align with individual comprehension levels. We aim to devise a system that goes beyond merely delivering information, but rather engage, respond, and progress with the student. While the adaptive learning realm in educational technology provides some cues, our game-changer was the integration of generative AI to convert lecture notes or videos students provide into tailored, interactive study aids. The goal isn't merely to assist with information but to shape the material based on a student's unique learning curve, ensuring every topic or concept fits like a puzzle piece in their cognitive map. Our approach isn't just about efficiency; it's about redefining the study experience, harnessing technology's power to cater to each student's needs - a study revolution for students, by students.

### What it does

Building on this vision, the heart of our system lies in its ability to transform traditional lecture notes or videos provided by students into dynamic, personalized study aids through generative AI. Rather than wading through a static set of notes, students experience a responsive learning environment where content evolves to meet their unique needs. Quizzical allows the user to upload any study material in either video format or pdf format. Our application synthesizes all of the content in the study material allowing for the creation of flashcards and concise summaries. Our approach streamlines the learning process, ensuring that students don't just study, but they engage with material fashioned specifically for them, offering a blend of efficiency and individualized learning.

### How we built it

MERN Stack (MongoDB, Express.js, React.js, Node.js) Together.ai API HuggingFace Model llama-2-70b-chat Whisper.ai

### Challenges we ran into

Integrating multiple technologies like the MERN Stack, Together.ai API, HuggingFace, and Whisper.ai, while ensuring they all communicated flawlessly, proved to be complex. Each tool had its nuances and required specific configurations to function harmoniously within our system. The translation of lecture videos into structured data via Whisper.ai posed particular difficulties, especially with the extended processing time required to accurately convert the content. Furthermore, optimizing the HuggingFace model, llama-2-70b-chat, to ensure the generated study material was both relevant and accurate, demanded continuous fine-tuning. Despite these obstacles, our commitment to delivering a transformative study tool drove us to innovate, iterate, and eventually overcome each hurdle.

### Accomplishments we're proud of

One of our most notable achievements is the system's versatility in handling various formats of learning content. We successfully engineered our tool to accept both PDF lecture notes and videos, ensuring that students have the flexibility to upload their preferred study materials. This adaptability not only broadens our user base but also caters to diverse learning preferences. The transformation of these formats into tailored study aids showcases our dedication to creating a truly comprehensive and inclusive study platform.

### What we learned

We learned a lot about LLMs and Gen AI through this project.

### What's next

In our future developments for this project, we aim to further harness the power of video, elevating the potential of our AI to generate diverse study materials tailored to the three primary learning styles: visual, auditory, and kinesthetic. Recognizing that each student has a unique learning preference, the system will be designed to interpret the provided content, whether it's textual lecture notes or videos, and transform them into a format that resonates best with the user's style of learning. Furthermore, the advanced use of facial expression analytics will play a pivotal role; as students interact with each flashcard, the AI will detect signs of confusion. Based on these nuanced emotional cues, the system will respond in real-time, fine-tuning and generating content that addresses the specific areas of challenge, ensuring a comprehensive and adaptive learning experience for all.

## README (from the GitHub repository)

# Welcome to Quizzical
Quizzical is an AI powered tool for effective studying. Take advantage of our innovative flashcards and concise summaries to level up your study routine. 

## How it works
Quizzical is the perfect tool to use while studying. Simply upload your lecture notes, slides, or lecture recordings. Our efficient algorithm will scrape all of the relevant information from the uploaded files and generate custom flashcards for you to practice along with all the main points gathered from the file.
## Installation
You will need to use npm and pip to install all the necessary packages.


`git clone <repository-url>`
<br>
Replace <repository-url> with the link of this repository.
<br>
<br>

`cd quizzical`
<br>
Go into main directory
<br>
<br>
`cd client`
<br>
Switch into the client directory
<br>
<br>
`npm install`
<br>
Install all of the necessary front-end dependencies with the above commands
<br>
<br>
`cd ..`
<br>
Switch back to the parent directory, quizzical.
<br>
<br>
`cd server`
<br>
Switch into the server directory
<br>
<br>
`npm install`
<br>
Install all of the necessary back-end dependencies with the above commands.
<br>
<br>
You also have to install the necessary python libraries with the pip command
<br>
`pip install  git+https://github.com/openai/whisper.git`
<br>
<br>
`pip install moviepy`
<br>
<br>
`pip install ffmpeg`
<br>
<br>

## Execution
Switch into the client directory and type in
<br>
`npm start`
<br>
Switch into the server directory and type in
<br>
`npm start`
<br>
And now you should be good to go, you can use our product successfully!


## Detected evidence (automated analysis)

Indexed codebase: 21 recognized source files, 38 KB.
- CSS (language) — detected in the code
- Express (technology) — detected in the code
- HTML (language) — detected in the code
- JavaScript (language) — detected in the code
- LangChain (technology) — detected in the code
- MongoDB (technology) — detected in the code
- Python (language) — detected in the code
- React (technology) — detected in the code
- Hugging Face (technology) — claimed on Devpost, not found in the code
- Node.js (technology) — claimed on Devpost, not found in the code

## Codebase structure (from repository index)

### Files (31 of 31)

```
.DS_Store
quizzical/.DS_Store
quizzical/client/.gitignore
quizzical/client/package.json
quizzical/client/public/index.html
quizzical/client/public/manifest.json
quizzical/client/public/robots.txt
quizzical/client/README.md
quizzical/client/src/App.css
quizzical/client/src/App.js
quizzical/client/src/App.test.js
quizzical/client/src/components/FileUploader.js
quizzical/client/src/components/Flashcard.js
quizzical/client/src/components/Form.js
quizzical/client/src/components/Navbar.js
quizzical/client/src/index.css
quizzical/client/src/index.js
quizzical/client/src/pages/Auth.js
quizzical/client/src/pages/Home.js
quizzical/client/src/pages/Review.js
quizzical/client/src/reportWebVitals.js
quizzical/server/.DS_Store
quizzical/server/package.json
quizzical/server/src/index.js
quizzical/server/src/models/Users.js
quizzical/server/src/routes/pdfparse.js
quizzical/server/src/routes/transcription.txt
quizzical/server/src/routes/users.js
quizzical/server/transcription.txt
quizzical/server/videoToText.py
README.md
```

### Dependencies

- quizzical/client/package.json: @chakra-ui/react@^2.8.1, @emotion/react@^11.11.1, @emotion/styled@^11.11.0, @testing-library/jest-dom@^5.17.0, @testing-library/react@^13.4.0, @testing-library/user-event@^13.5.0, axios@^1.5.1, bootstrap@^5.3.2, framer-motion@^10.16.4, fs@^0.0.1-security, langchain@^0.0.175, pdf-parse@^1.1.1, react@^18.2.0, react-bootstrap@^2.9.1, react-cookie@^6.1.1, react-dom@^18.2.0, react-router-dom@^6.16.0, react-scripts@5.0.1, react-spinners@^0.13.8, web-vitals@^2.1.4
- quizzical/server/package.json: axios@^1.6.0, bcrypt@^5.1.1, cors@^2.8.5, express@^4.18.2, fs@^0.0.1-security, jsonwebtoken@^9.0.2, langchain@^0.0.175, mongoose@^7.5.3, multer@^1.4.5-lts.1, nodemon@^3.0.1, pdf-parse@github:aaravurg/updated-pdf-parse-library

### Recent commits (newest first)

- Update README.md
- Update README.md
- Update README.md
- Update README.md
- Update README.md
- Update README.md
- Update README.md
- Update README.md
- Update README.md
- Create README.md
- added buffer
- ui and summary feature
- removed random audio
- removed random video
- working flashcards
- working pdf and mp4 flashcard generation
- Update videoToText.py
- Add files via upload
- llm working
- text from pdf works

## Key source files (fetched from GitHub, selected and truncated for size)

### quizzical/server/package.json

```
{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon src/index.js"
  },
  "author": "",
  "license": "ISC",
  "type": "module",
  "dependencies": {
    "axios": "^1.6.0",
    "bcrypt": "^5.1.1",
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "fs": "^0.0.1-security",
    "jsonwebtoken": "^9.0.2",
    "langchain": "^0.0.175",
    "mongoose": "^7.5.3",
    "multer": "^1.4.5-lts.1",
    "pdf-parse": "github:aaravurg/updated-pdf-parse-library"
  },
  "devDependencies": {
    "nodemon": "^3.0.1"
  }
}

```

### quizzical/client/package.json

```
{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@chakra-ui/react": "^2.8.1",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.5.1",
    "bootstrap": "^5.3.2",
    "framer-motion": "^10.16.4",
    "fs": "^0.0.1-security",
    "langchain": "^0.0.175",
    "pdf-parse": "^1.1.1",
    "react": "^18.2.0",
    "react-bootstrap": "^2.9.1",
    "react-cookie": "^6.1.1",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.16.0",
    "react-scripts": "5.0.1",
    "react-spinners": "^0.13.8",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

```

### quizzical/server/src/index.js

```javascript
import express from "express";
import cors from "cors";
import mongoose from "mongoose";
import { userRouter } from "./routes/users.js";
import { pdfRouter } from "./routes/pdfparse.js";
const app = express();

app.use(express.json());
app.use(cors());
app.use("/auth", userRouter);
app.use("/pdf", pdfRouter); 

mongoose.connect(
  "mongodb+srv://aurgaonkar:aarav123@quiz.iuj1aba.mongodb.net/"
);

app.listen(3001, () => console.log("SERVER STARTEDDDD"));

```

### quizzical/client/src/index.js

```javascript
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

```

### quizzical/client/src/App.js

```javascript
import logo from './logo.svg';
import './App.css';
import {BrowserRouter as Router, Routes, Route} from "react-router-dom";
import {Home} from './pages/Home.js'
import {Auth} from './pages/Auth.js'
import {Review} from './pages/Review.js'
import { Navbar } from './components/Navbar.js';

function App() {
  return (
    <div className="App">
      <Router>
        <Navbar/>
        <Routes>
          <Route path="/" element={<Home/>}/>
          <Route path="/auth" element={<Auth/>}/>
          <Route path="/review" element={<Review/>}/>

        </Routes>
      </Router>
      
    </div>
  );
}

export default App;

```

### quizzical/server/videoToText.py

```python
import moviepy.editor
import whisper
from sys import argv
import ssl
ssl._create_default_https_context = ssl._create_unverified_context

video=moviepy.editor.VideoFileClip(argv[1])
audio=video.audio
audio.write_audiofile("video.mp3")

model = whisper.load_model("base")
result = model.transcribe("video.mp3")

with open("transcription.txt", "w") as f:
    f.write(result["text"])


```

### quizzical/client/src/App.test.js

```javascript
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

```

### quizzical/client/src/reportWebVitals.js

```javascript
const reportWebVitals = onPerfEntry => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
};

export default reportWebVitals;

```

### quizzical/client/src/index.css

```css
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

```

### quizzical/client/public/index.html

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

```

[11 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]