adding netlify functions (#28)

* adding netlify functions

* changes for default export

* json

* cors

* cors2

---------

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

netlify/functions/gemini.ts

@@ -0,0 +1,49 @@
+import { QuoteResponse, QuoteSource } from './types';
+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()), type: QuoteSource.GEMINI } as QuoteResponse;
+}

netlify/functions/ninja.ts

@@ -0,0 +1,16 @@
+import { QuoteResponse, QuoteSource } from './types';
+
+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], type: QuoteSource.NINJA } as QuoteResponse;
+}

netlify/functions/quote.ts

@@ -0,0 +1,27 @@
+import type { Context } from '@netlify/functions';
+import { getQuoteFromNinja } from './ninja';
+import { getQuoteFromGemini } from './gemini';
+
+const quote = async (req: Request, context: Context) => {
+  let data;
+
+  if (req.method === 'OPTIONS') {
+    const res = new Response();
+
+    res.headers.set("Access-Control-Allow-Origin", "*");
+    res.headers.append("Access-Control-Allow-Headers", "*");
+    res.headers.append("Access-Control-Allow-Methods", "*");
+
+    return res;
+  }
+
+  if (Math.random() < 0.5) {
+    data = await getQuoteFromNinja();
+  } else {
+    data = await getQuoteFromGemini();
+  }
+
+  return Response.json({ data });
+}
+
+export default quote;

netlify/functions/types.ts

@@ -0,0 +1,10 @@
+export enum QuoteSource {
+  NINJA = 'NINJA',
+  GEMINI = 'GEMINI'
+}
+
+export type QuoteResponse = {
+  quote: string;
+  author: string;
+  type: QuoteSource;
+}

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@google/generative-ai": "^0.2.1",
+    "@netlify/functions": "^2.6.0",
     "@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,11 +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 { getQuoteFromGemini } from "../../services/gemini";
-import { QuoteResponse } from "../../types/common";
-import { getQuoteFromNinja } from "../../services/ninja";
+import { QuoteResponse, QuoteSource } from "../../types/common";
 import { Input } from "baseui/input";
 import { addSubscriber, isSubscribedAlready } from "../../services/firebase";
+import { getQuoteFromNetlify } from "../../services/netlify";
 
 let firstLoad = true;
 
@@ -53,15 +52,8 @@ export const Main = () => {
     const fetchNewQuote = async () => {
       setIsLoading(true);
 
-      let data: QuoteResponse = { quote: '', author: ''};
-
-      if (Math.random() < 0.5) {
-        setPoweredByGemini(false);
-        data = await getQuoteFromNinja();
-      } else {
-        data = await getQuoteFromGemini();
-        setPoweredByGemini(true);
-      }
+      let data: QuoteResponse = await getQuoteFromNetlify();
+      setPoweredByGemini(data.type === QuoteSource.GEMINI);
 
       setQuote(data.quote);
       setAuthor(data.author);

src/services/netlify.ts

@@ -0,0 +1,9 @@
+import { QuoteResponse } from "../types/common";
+
+const NETLIFY_QUOTE_URL = process.env.REACT_APP_NETLIFY_QUOTE_URL as string;
+
+export const getQuoteFromNetlify = async () => {
+  const response = await fetch(NETLIFY_QUOTE_URL);
+  const data = await response.json();
+  return data.data as QuoteResponse;
+}

src/types/common.ts

@@ -1,4 +1,10 @@
+export enum QuoteSource {
+  NINJA = 'NINJA',
+  GEMINI = 'GEMINI'
+}
+
 export type QuoteResponse = {
   quote: string;
   author: string;
+  type: QuoteSource;
 }