diff --git a/app/api/generateImages/route.ts b/app/api/generateImages/route.ts index 2917e52..7515a7a 100644 --- 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 index e69de29..65cdc38 100644 --- 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, + }); + } \ No newline at end of file diff --git a/app/api/suggestion/route.ts b/app/api/suggestion/route.ts index 544cf96..e7dc745 100644 --- 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 index 0c76bd7..b74da4e 100644 --- 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 ( + {/* header */}
{/* Prompt Input */} {children} + ) diff --git a/app/page.tsx b/app/page.tsx index 2b37688..2710e6b 100644 --- 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 ( -
-

hi

-
- ) +
+ +
+ ); } + +export default HomePage; \ No newline at end of file diff --git a/components/ClientProvider.tsx b/components/ClientProvider.tsx new file mode 100644 index 0000000..3de12ee --- /dev/null +++ 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 ( + <> + + {children} + + ); +} \ No newline at end of file diff --git a/components/Images.tsx b/components/Images.tsx new file mode 100644 index 0000000..b9f2ef8 --- /dev/null +++ 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 ( +
+ + + {isLoading && ( +

+ Loading AI Generated + Images... +

+ )} + +
+ {images?.imageUrls?.map((image: ImageType, i: number) => ( +
+ {/* create a white div that when hovered it appears */} +
+

+ {/* This removes the Timestamp and File extension */} + {image.name.split("_").shift()?.toString().split(".").shift()} +

+
+ +
+ ))} +
+
+ ); +} + +export default Images; \ No newline at end of file diff --git a/components/PromptInput.tsx b/components/PromptInput.tsx index c8e2aa0..4a152af 100644 --- 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) => { + e.preventDefault(); + + await submitPrompt(); + }; + + const loading = isLoading || isValidating; console.log(suggestion); return (
-
+