changes for gemini api (#21)

* changes for gemini api

* adding google ai package

---------

Co-authored-by: Visakh Vijayan <visakh.vijayan@jalantechnologies.com>

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@google/generative-ai": "^0.2.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

src/components/main/main.component.tsx

@@ -8,6 +8,10 @@ import { ImBullhorn, ImCopy } from "react-icons/im";
 import { HiVolumeOff } from "react-icons/hi";
 import { MonoHeadingXXLarge, MonoParagraphLarge } from "baseui/typography";
 import { StyledLink } from "baseui/link";
+// import { getQuoteFromNinja } from "../../services/ninja";
+import { getQuoteFromGemini } from "../../services/gemini";
+import { QuoteResponse } from "../../types/common";
+import { getQuoteFromNinja } from "../../services/ninja";
 
 let firstLoad = true;
 
@@ -17,10 +21,9 @@ export const Main = () => {
     const [isLoading, setIsLoading] = useState(false);
     const [isCopied, setIsCopied] = useState(false);
     const [isSpeaking, setIsSpeaking] = useState(false);
+    const [isPoweredByGemini, setPoweredByGemini] = useState(false);
 
     const promotionText = `\n\nDiscover more such quotes at - ${window.location.origin}`;
-    const NINJA_API_KEY = process.env.REACT_APP_NINJA_API_KEY as string;
-    const NINJA_URL = process.env.REACT_APP_NINJA_URL as string;
 
     const handleSpeakClick = (text: string) => {
 
@@ -43,32 +46,30 @@ export const Main = () => {
     }
 
     const fetchNewQuote = async () => {
-        setIsLoading(true);
+      setIsLoading(true);
 
-        const response = await fetch(
-            NINJA_URL,
-            {
-                method: 'GET',
-                headers: {
-                    'X-Api-Key': NINJA_API_KEY
-                }
-            }
-        );
+      let data: QuoteResponse = { quote: '', author: ''};
 
-        const data = await response.json();
+      if (Math.random() < 0.5) {
+        setPoweredByGemini(false);
+        data = await getQuoteFromNinja();
+      } else {
+        data = await getQuoteFromGemini();
+        setPoweredByGemini(true);
+      }
 
-        setQuote(data[0].quote);
-        setAuthor(data[0].author);
+      setQuote(data.quote);
+      setAuthor(data.author);
 
-        setIsCopied(false);
-        setIsLoading(false);
+      setIsCopied(false);
+      setIsLoading(false);
     }
 
     useEffect(() => {
-        if (firstLoad) {
-            firstLoad = false;
-            fetchNewQuote();
-        }
+      if (firstLoad) {
+          firstLoad = false;
+          fetchNewQuote();
+      }
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
@@ -115,7 +116,10 @@ export const Main = () => {
                     </CopyToClipboard>
                 </ButtonGroup>
             </Block>
-            <Block style={{ display: 'flex', justifyContent: 'center', marginTop: '5%' }}>
+            <Block style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '20px' }}>
+              {isPoweredByGemini ? <u>Powered By Gemini</u>: ''}
+            </Block>
+            <Block style={{ display: 'flex', justifyContent: 'center', marginTop: '3%' }}>
                 <Block>
                     <StyledLink target="blank" href="https://github.com/visakhvjn/random-quotes" style={{ textDecoration: 'none', color: 'grey' }}>
                         Github

src/services/gemini.ts

@@ -0,0 +1,50 @@
+import { QuoteResponse } from "../types/common";
+
+const { GoogleGenerativeAI, HarmCategory, HarmBlockThreshold } = require("@google/generative-ai");
+
+const MODEL_NAME = 'gemini-1.0-pro';
+const API_KEY = process.env.REACT_APP_GEMINI_API_KEY;
+
+export const getQuoteFromGemini = async (): Promise<QuoteResponse> => {
+  const genAI = new GoogleGenerativeAI(API_KEY);
+  const model = genAI.getGenerativeModel({ model: MODEL_NAME });
+
+  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 parts = [
+    {text: "Give me a motivational quote in the form of json\n {\"quote\":\"<quote>\",\"author\":\"<author>\"}"},
+  ];
+
+  const result = await model.generateContent({
+    contents: [{ role: "user", parts }],
+    generationConfig,
+    safetySettings,
+  });
+
+  const response = result.response;
+  return JSON.parse(response.text()) as QuoteResponse;
+}

src/services/ninja.ts

@@ -0,0 +1,16 @@
+import { QuoteResponse } from "../types/common";
+
+const NINJA_API_KEY = process.env.REACT_APP_NINJA_API_KEY as string;
+const NINJA_URL = process.env.REACT_APP_NINJA_URL as string;
+
+export const getQuoteFromNinja = async () => {
+  const response = await fetch(NINJA_URL,
+    {
+      method: 'GET',
+      headers: { 'X-Api-Key': NINJA_API_KEY }
+    }
+  );
+
+  const data = await response.json();
+  return data[0] as QuoteResponse;
+}

src/types/common.ts

@@ -0,0 +1,4 @@
+export type QuoteResponse = {
+  quote: string;
+  author: string;
+}