👌 IMPROVE: Added suggestion feature (#412)

msaaddev · web-flow · commit a2ad6d35d158 · 2023-02-08T21:53:11.000+05:00
👌 IMPROVE: Added suggestion feature
diff --git a/wallpaper-generator/.env.example b/wallpaper-generator/.env.example
@@ -1 +1,2 @@
 OPENAI_API_KEY=
+RAPIDAPI_KEY=
diff --git a/wallpaper-generator/README.md b/wallpaper-generator/README.md
@@ -9,6 +9,7 @@
 ### ⚡️ Features
 
 - Generator wallpapers using AI
+- Suggest wallpapers
 - Mobile friendly
 
 ## 📖 Guide
diff --git a/wallpaper-generator/assets/cover.png b/wallpaper-generator/assets/cover.png
diff --git a/wallpaper-generator/pages/api/list.ts b/wallpaper-generator/pages/api/list.ts
@@ -0,0 +1,38 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+import axios from "axios";
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  if (req.method === "POST") {
+    const options = {
+      method: "POST",
+      url: "https://thefluentme.p.rapidapi.com/generate-post",
+      headers: {
+        "content-type": "application/json",
+        "X-RapidAPI-Key": process.env.RAPIDAPI_KEY,
+        "X-RapidAPI-Host": "thefluentme.p.rapidapi.com",
+      },
+      data: '{"post_title":"Suggest a list with 30 items that contains any word that describes a wallpaper","ai_model":"advanced_01","post_min_length":"199","post_max_length":"500"}',
+    };
+
+    try {
+      const response = await axios.request(options);
+
+      const suggestions: string[] = [];
+
+      response.data.ai_post.split(" ").map((word: string) => {
+        if (!word.match(/[\d.]+/)) {
+          suggestions.push(word);
+        }
+      });
+
+      res.status(200).json( suggestions);
+    } catch (err) {
+      res.status(500).json({ error: err });
+      console.log(err);
+    }
+  }
+}
diff --git a/wallpaper-generator/pages/index.tsx b/wallpaper-generator/pages/index.tsx
@@ -4,11 +4,16 @@ import Head from "next/head";
 import Image from "next/image";
 import axios from "axios";
 
-const Home: NextPage = () => {
+type IProps = {
+  data: string[];
+}
+
+const Home: NextPage<IProps> = ({ data }) => {
   const [description, setDescription] = useState<string>(
-    "Milky way galaxy"
+    data[0]
   );
   const buttonRef = useRef<HTMLButtonElement>(null);
+  const suggestButtonRef = useRef<HTMLButtonElement>(null);
   const [wallpaper, setWallpaper] = useState<string | null>(null);
 
   /**
@@ -18,6 +23,7 @@ const Home: NextPage = () => {
    */
   const generateWallpaper = async () => {
     buttonRef.current!.disabled = true;
+    setWallpaper(null);
     try {
       buttonRef.current!.innerText = "Generating wallpaper...";
       const response = await axios.post("/api/generate", {
@@ -33,6 +39,34 @@ const Home: NextPage = () => {
     }
   };
 
+  const suggestWallpaper = async () => {
+    buttonRef.current!.disabled = true;
+    suggestButtonRef.current!.disabled = true;
+    setWallpaper(null);
+
+    // Get random word from data
+    const index = Math.floor(Math.random() * data.length);
+    const word = data[index];
+    data.slice(index, 1);
+
+    setDescription(word);
+
+    try {
+      suggestButtonRef.current!.innerText = "Suggesting wallpaper...";
+      const response = await axios.post("/api/generate", {
+        description: word,
+      });
+      setWallpaper(response.data.data[0].url);
+    } catch (err) {
+      console.log(err);
+      setWallpaper(null);
+    } finally {
+      suggestButtonRef.current!.innerText = "Suggest wallpaper";
+      buttonRef.current!.disabled = false;
+      suggestButtonRef.current!.disabled = false;
+    }
+  }
+
   return (
     <div className="flex min-h-screen flex-col items-center justify-center py-2">
       <Head>
@@ -64,7 +98,14 @@ const Home: NextPage = () => {
               onChange={(e) => setDescription(e.target.value)}
             />
           </div>
-          <div className="mt-6 flex justify-center w-full">
+          <div className="mt-6 flex space-x-4 justify-center w-full">
+            <button
+              className="w-full py-2 md:text-sm bg-[#081477] rounded-md text-white"
+              onClick={suggestWallpaper}
+              ref={suggestButtonRef}
+            >
+              Suggest wallpaper
+            </button>
             <button
               className="w-full py-2 md:text-sm bg-[#081477] rounded-md text-white"
               onClick={generateWallpaper}
@@ -95,11 +136,28 @@ const Home: NextPage = () => {
           <a href="https://rapidapi.com/?utm_source=github.com/RapidAPI&utm_medium=DevRel&utm_campaign=DevRel" className="underline">
             Rapid
           </a>{" "}
-          DevRel Team • Powered by <a href="https://openai.com/" className="underline">OpenAI</a> and <a href="https://rapidapi.com/hub?utm_source=RapidAPI.com/examples&utm_medium=DevRel&utm_campaign=DevRel">Rapid</a>
+          DevRel Team • Powered by <a href="https://openai.com/" className="underline">OpenAI</a> and <a href="https://rapidapi.com/hub?utm_source=RapidAPI.com/examples&utm_medium=DevRel&utm_campaign=DevRel" className="underline">Rapid</a>
         </p>
       </div>
     </div>
   );
 };
 
 export default Home;
+
+export async function getServerSideProps() {
+  const res = await axios.post("http://localhost:3000/api/list");
+  const { data } = res;
+
+  if (!data) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return {
+    props: {
+      data,
+    },
+  };
+}
