Scribd
Upload
6 views1 page

React Webcam Quiz Generator App

This document outlines a React application that uses a webcam to capture images and generate multiple-choice questions from extracted text. It includes mock functions for text extraction and question generation, as well as functionality to download the generated questions as a PDF. The app utilizes the OpenAI API for question generation and jsPDF for PDF creation.

Uploaded by

Acaf VVgs
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
6 views1 page

React Webcam Quiz Generator App

This document outlines a React application that uses a webcam to capture images and generate multiple-choice questions from extracted text. It includes mock functions for text extraction and question generation, as well as functionality to download the generated questions as a PDF. The app utilizes the OpenAI API for question generation and jsPDF for PDF creation.

Uploaded by

Acaf VVgs
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

import React, { useState } from 'react';

import Webcam from 'react-webcam';


import { OpenAI } from 'openai';
import jsPDF from 'jspdf';

// Mock OCR function (replace with Google Vision API call)


const extractTextFromImage = async (imageSrc) => {
// In real app: Send imageSrc to Google Vision API
return "Sample extracted text from image."; // Placeholder
};

// Mock question generation (replace with OpenAI API)


const generateQuestions = async (text) => {
const openai = new OpenAI({ apiKey: 'your-openai-key' });
const response = await [Link]({
model: 'gpt-4',
messages: [{ role: 'user', content: `Generate 5 multiple-choice questions from:
${text}` }],
});
return [Link][0].[Link];
};

function App() {
const [image, setImage] = useState(null);
const [questions, setQuestions] = useState('');
const webcamRef = [Link](null);

const capture = () => {


const imageSrc = [Link]();
setImage(imageSrc);
};

const processImage = async () => {


if (!image) return;
const text = await extractTextFromImage(image);
const q = await generateQuestions(text);
setQuestions(q);
};

const downloadPDF = () => {


const doc = new jsPDF();
[Link](questions, 10, 10);
[Link]('[Link]');
};

return (
<div>
<Webcam ref={webcamRef} screenshotFormat="image/jpeg" />
<button onClick={capture}>Capture Image</button>
<button onClick={processImage}>Generate Questions</button>
<p>{questions}</p>
<button onClick={downloadPDF}>Download PDF</button>
</div>
);
}

export default App;

You might also like