Add files via upload

bhubesh757 · May 27, 2023 · 75c3361 · 75c3361
1 parent 17994b4
commit 75c3361
Show file tree

Hide file tree

Showing 8 changed files with 180 additions and 12 deletions.
diff --git a/app/api/generateImages/route.ts b/app/api/generateImages/route.ts
@@ -5,7 +5,7 @@ export async function POST(request: Request) {
   const prompt = res.prompt;
 
   const response = await fetch(
-    "",
+    "https://ai-imggeneration-ms-azure007.azurewebsites.net/api/generateimage",
     {
       method: "POST",
       headers: {

diff --git a/app/api/getImages/route.ts b/app/api/getImages/route.ts
@@ -0,0 +1,17 @@
+export async function GET(request: Request) {
+    const response = await fetch(
+      "https://ai-imggeneration-ms-azure007.azurewebsites.net/api/getimages",
+      {
+        cache: "no-store",
+      }
+    );
+
+    const blob = await response.blob();
+    const textData = await blob.text();
+
+    const data = JSON.parse(textData);
+
+    return new Response(JSON.stringify(data), {
+      status: 200,
+    });
+  }
diff --git a/app/api/suggestion/route.ts b/app/api/suggestion/route.ts
@@ -1,6 +1,6 @@
 export async function GET(request: Request) {
     const response = await fetch(
-      "http://localhost:7071/api/getChatGPTSuggestion ",
+      "https://ai-imggeneration-ms-azure007.azurewebsites.net/api/getchatgptsuggestion ",
       {
         cache: "no-store",
       }

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,11 +2,12 @@ import '../styles/globals.css'
 import { Inter } from 'next/font/google'
 import Header from '@/components/Header'
 import PromptInput from '@/components/PromptInput'
+import ClientProvider from '@/components/ClientProvider'
 
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata = {
-  title: 'Create Next App',
+  title: 'AI Image Generator',
   description: 'Generated by create next app',
 }
 
@@ -18,11 +19,13 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
+        <ClientProvider>
         {/* header */}
         <Header></Header>
         {/* Prompt Input */}
         <PromptInput></PromptInput>
         {children}
+        </ClientProvider>
         </body>
     </html>
   )

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,8 +1,11 @@
+import Images from "../components/Images";
 
-export default function Home() {
+async function HomePage() {
   return (
-    <main>
-     <h1>hi</h1>
-    </main>
-  )
+    <div className="mx-0 md:10">
+      <Images />
+    </div>
+  );
 }
+
+export default HomePage;
diff --git a/components/ClientProvider.tsx b/components/ClientProvider.tsx
@@ -0,0 +1,15 @@
+"use client";
+import { Toaster } from "react-hot-toast";
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <Toaster position="bottom-center" />
+      {children}
+    </>
+  );
+}
diff --git a/components/Images.tsx b/components/Images.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import Image from "next/image";
+import useSWR from "swr";
+import fetchImages from "../lib/fetchImages";
+
+type ImageType = {
+  name: string;
+  url: string;
+};
+
+function Images() {
+  const {
+    data: images,
+    isLoading,
+    mutate: refreshImages,
+    isValidating,
+  } = useSWR("images", fetchImages, {
+    revalidateOnFocus: false,
+  });
+  console.log(images);
+
+
+  return (
+    <div>
+        <button
+        className="fixed bottom-10 right-10 bg-violet-400/90 text-white px-5 py-3 rounded-md 
+      hover:bg-violet-500 focus:outline-none focus:ring-2 focus:ring-violet-400 font-bold z-20"
+        onClick={() => refreshImages(images)}
+      >
+        {!isLoading && isValidating ? "Refreshing..." : "Refresh Images"}
+      </button>
+
+      {isLoading && (
+        <p className="animate-pulse text-center pb-7 font-extralight">
+          Loading <span className="text-violet-400">AI</span> Generated
+          Images...
+        </p>
+      )}
+
+      <div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 px-0 md:px-10">
+        {images?.imageUrls?.map((image: ImageType, i: number) => (
+          <div
+            className={`relative cursor-help ${
+              i === 0 && "md:col-span-2 md:row-span-2"
+            } hover:scale-[103%] transition-transform duration-200 ease-in-out 
+            
+            `}
+            key={image.name}
+          >
+            {/* create a white div that when hovered it appears */}
+            <div className="absolute flex justify-center items-center w-full h-full bg-white opacity-0 hover:opacity-80 transition-opacity duration-200 z-10">
+              <p className="text-center font-light text-lg p-5">
+                {/* This removes the Timestamp and File extension */}
+                {image.name.split("_").shift()?.toString().split(".").shift()}
+              </p>
+            </div>
+            <Image
+              src={image.url}
+              alt=""
+              height={800}
+              width={800}
+              className="w-full rounded-sm shadow-2xl drop-shadow-lg -z-10"
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default Images;
diff --git a/components/PromptInput.tsx b/components/PromptInput.tsx
@@ -1,8 +1,11 @@
 'use client'
 
 import fetchSuggestionFromChatGPT from "@/lib/fetchSuggestionFromChatGpt";
-import { useState } from "react"
+import { FormEvent , useState } from "react"
+import fetchImages from "../lib/fetchImages";
 import useSWR from 'swr'
+import toast from "react-hot-toast";
+
 
 function PromptInput() {
 
@@ -11,13 +14,65 @@ function PromptInput() {
         revalidateOnFocus: false,
 
     });
+
+    const { mutate: updateImages } = useSWR("images", fetchImages, {
+      revalidateOnFocus: false,
+    });
 
+    const submitPrompt = async (useSuggestion?: boolean) => {
+      const inputPrompt = input;
+
+      setInput("");
+      console.log(inputPrompt);
+
+      const notificationPrompt = inputPrompt || suggestion;
+      const notificationPromptShort = notificationPrompt.slice(0, 20);
+
+      const notification = toast.loading(
+        `AI is creating Amazing For You: ${notificationPromptShort}...`
+      );
+
+      const p = useSuggestion
+        ? suggestion
+        : inputPrompt || (!isLoading && !isValidating && suggestion);
+
+      const res = await fetch("/api/generateImages", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          prompt: p,
+        }),
+      });
+
+      const data = await res.json();
+      if (data.error) {
+        toast.error(data.error);
+      } else {
+        toast.success(`Your AI Art has been Generated!`, {
+          id: notification,
+        });
+      }
+
+      updateImages();
+
+    };
+    const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+
+      await submitPrompt();
+    };
+
+
     const loading = isLoading || isValidating;
     console.log(suggestion);
 
   return (
     <div className='m-10'>
-    <form className='flex flex-col lg:flex-row shadow-md shadow-slate-400 border rounded-md lg:divide-x'>
+    <form 
+    onSubmit={handleSubmit}
+    className='flex flex-col lg:flex-row shadow-md shadow-slate-400 border rounded-md lg:divide-x'>
         <textarea value={input} 
         onChange = {(e) => setInput(e.target.value) }
         placeholder={
@@ -27,13 +82,16 @@ function PromptInput() {
         <button
         type = "submit"
         className={`p-4 ${input ? 'bg-violet-500 text-white transitions-colors duration-200' : ''}`}
+        disabled={loading}
         > 
             Generate</button>
         <button className='p-4 bg-violet-400 text-white transition-colors duration-200 font-bold disabled:text-gray-300 
         disabled:cursor-not-allowed disabled:bg-gray-400
-        '> Use Suggestion</button>
+        '
+        onClick= {() => submitPrompt(true)}
+        > Use Suggestion</button>
         <button
-        className='p-4 text-violet-400 text-white transition-colors duration-200 font-bold disabled:text-gray-500 
+        className='p-4 text-violet-400 transition-colors duration-200 font-bold disabled:text-gray-500 
         disabled:cursor-not-allowed disabled:bg-gray-400'
         onClick={mutate}
         > New Suggestion</button>