Added quiz and content page

client/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@google/generative-ai": "^0.1.3",
     "@sentry/react": "^6.1.0",
     "@sentry/tracing": "^6.1.0",
     "@testing-library/jest-dom": "^5.11.9",

client/src/App.js

@@ -2,9 +2,12 @@ import "./App.css";
 import React, { Component } from "react";
 import jwtDecode from "jwt-decode";
 import { Route, Switch, Redirect } from "react-router-dom";
-
+import ContentPage from "./components/ContentPage.jsx";
+import QuizPage from "./components/QuizPage.jsx";
+import Quiz from "./components/Quiz.jsx";
 import http from "./services/httpService";
 import { api } from "./config.js";
+
 import Dashboard from "./components/dashboard";
 import Jumotron from "./components/common/jumbotron";
 import NotFound from "./components/not-found";
@@ -39,6 +42,18 @@ class App extends Component {
           <Route
             path="/dashboard"
             render={(props) => <Dashboard {...props} user={this.state.user} />}
+          />
+            <Route
+            path="/contentPage"
+            render={(props) => <ContentPage {...props} user={this.state.user} />}
+          />
+            <Route
+            path="/QuizPage"
+            render={(props) => <QuizPage {...props} user={this.state.user} />}
+          />
+            <Route
+            path="/quiz"
+            render={(props) => <Quiz {...props} user={this.state.user} />}
           />
           <Route path="/not-found" component={NotFound} />
           <ProtectedRoute

client/src/components/ContentPage.jsx

@@ -0,0 +1,109 @@
+import React from 'react'
+import { Link } from 'react-router-dom';
+import { GoogleGenerativeAI, HarmCategory, HarmBlockThreshold } from "@google/generative-ai";
+import { useState } from 'react';
+function ContentPage() {
+
+//  Quiz Generation
+const [quizSearch,setQuizSearch]=useState("");
+
+// const [toQuiz,setToQuiz]=useState(0);
+    const [obj,setobj]=useState({});
+    const [userSearch,setUserSearch]=useState("hello");
+    const [content,setContent]=useState("");
+    const MODEL_NAME = "gemini-pro";
+    const API_KEY = "AIzaSyCaGAhM12gInhJSVkdeu6Z6oHN_EIwf9PQ";    
+    async function run(userString,type) {
+      const genAI = new GoogleGenerativeAI(API_KEY);
+      const model = genAI.getGenerativeModel({ model: MODEL_NAME });
+
+      const parts = [{ text:  userString }];
+
+      const generationConfig = {
+        temperature: 0.9,
+        topK: 1,
+        topP: 1,
+        maxOutputTokens: 2048,
+      };
+
+      const safetySettings = [
+        { category: HarmCategory.HARM_CATEGORY_HARASSMENT, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE },
+        { category: HarmCategory.HARM_CATEGORY_HATE_SPEECH, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE },
+        { category: HarmCategory.HARM_CATEGORY_SEXUALLY_EXPLICIT, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE },
+        { category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE },
+      ];
+
+      const result = await model.generateContent({
+        contents: [{ role: "user", parts }],
+        generationConfig,
+        safetySettings,
+      });
+
+      const response = result.response;
+      if(type==="Content"){
+        setContent(response.text());
+        // console.log(response.text());
+      }
+      else{
+        let newString = response.text();
+        // setContent(response.text());
+        console.log(newString);
+
+        const cur_json=JSON.parse(newString);
+
+        // setobj(cur_json);
+       const content=cur_json;  
+       setobj(cur_json);  
+       content.Questions.forEach((item,index)=>{
+        const ques=`Question ${index+1}: ${item.Question}`;
+         const ans=`answer :${item.Correct_Answer}`;
+         console.log(ques);
+
+         item.Options.forEach((curOption,index1)=>{
+          console.log(`${String.fromCharCode(97+index1) })  ${curOption}`);
+         })
+
+        //  console.log(ans);
+     })
+
+      }
+
+    }
+
+    const handleSubmit=()=>{
+     run(userSearch,"Content");
+     setQuizSearch(`Generate 4 medium-level MCQ questions on ${userSearch} along with options. Also, mention the correct answer at the end of all questions along with the question number. Please generate questions and answers in the JSON format given below:'Question: .....Options: ....Correct_Answer: ....'ALERT: Don't use any markdowns. Give output in JSON format. Enclose all the questions in an additional curly brace.`)
+     run(quizSearch,"Quiz")
+     setUserSearch("");
+     quizSearch("");
+
+    }
+
+
+
+  return (
+    <>
+    {/* <div>Hello World</div> */}
+     <div>
+      <input type="text" 
+        onInput={(e)=>setUserSearch(e.target.value)}      
+      />
+
+      <button 
+      onClick={handleSubmit}>Submit</button>
+
+ <textarea  name="postContent" 
+         rows={40}
+         cols={40}
+        value={content} // ...force the input's value to match the state variable...
+        onChange={(e) => setContent(e.target.value)} 
+
+      />
+<Link to="QuizPage" state={{ from: "obj" }} > <button type='button' >Quiz</button></Link>
+</div>
+    </>
+  )
+}
+
+
+export default ContentPage;

client/src/components/Quiz.jsx

@@ -0,0 +1,75 @@
+// import { useState } from 'react'
+// import { GoogleGenerativeAI, HarmCategory, HarmBlockThreshold } from "@google/generative-ai";
+// import QuizPage from './QuizPage.jsx';
+
+
+// function Quiz() {
+
+//   const MODEL_NAME = "gemini-pro";
+//   const API_KEY = "AIzaSyCaGAhM12gInhJSVkdeu6Z6oHN_EIwf9PQ";    
+
+//   async function run(userString) {
+//     const genAI = new GoogleGenerativeAI(API_KEY);
+//     const model = genAI.getGenerativeModel({ model: MODEL_NAME });
+
+//     const parts = [{ text:  userString }];
+
+//     const generationConfig = {
+//       temperature: 0.9,
+//       topK: 1,
+//       topP: 1,
+//       maxOutputTokens: 2048,
+//     };
+
+//     const safetySettings = [
+//       { category: HarmCategory.HARM_CATEGORY_HARASSMENT, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE },
+//       { category: HarmCategory.HARM_CATEGORY_HATE_SPEECH, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE },
+//       { category: HarmCategory.HARM_CATEGORY_SEXUALLY_EXPLICIT, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE },
+//       { category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE },
+//     ];
+
+//     const result = await model.generateContent({
+//       contents: [{ role: "user", parts }],
+//       generationConfig,
+//       safetySettings,
+//     });
+
+//     const response = result.response;
+
+
+
+//     // obj.forEach((item,index)=>{
+//     //   console.log(index);
+//     //    console.log(item);
+//     // })
+
+//     // console.log(typeof(response.text().json()));
+//   }
+
+//   const handleSubmit=()=>{
+//    run(userSearch);
+//    setToQuiz(true);
+//   }
+
+
+//   return (
+//     <>
+
+// {toQuiz?<></>:<>
+
+// <div>
+//       <button 
+//       onClick={handleSubmit}>Submit</button>
+//      </div>
+// </>}
+
+// {(!toQuiz)?<></>:<>
+
+// <QuizPage data={obj.Questions}/>
+// </>}
+
+//     </>
+//   )
+// }
+
+// export default Quiz

client/src/components/QuizPage.css

@@ -0,0 +1,7 @@
+.container .Correct{
+    background-color: greenyellow;
+}
+
+.container .Wrong{
+    background-color: red;
+}