diff --git a/pages/index.tsx b/pages/index.tsx index 31b61c4..9789927 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,35 +1,33 @@ import React, { useState, useEffect } from "react"; import type { NextPage } from "next"; -import { useWallet } from '@meshsdk/react'; -import { CardanoWallet } from '@meshsdk/react'; -import { Transaction } from '@meshsdk/core'; -import '@dexhunterio/swaps/lib/assets/style.css' -import Swap from '@dexhunterio/swaps' +import { useWallet } from "@meshsdk/react"; +import { CardanoWallet } from "@meshsdk/react"; +import { Transaction } from "@meshsdk/core"; +import "@dexhunterio/swaps/lib/assets/style.css"; +import Swap from "@dexhunterio/swaps"; -import { useTokenCheck } from '../hooks/TokenCheck'; +import { useTokenCheck } from "../hooks/TokenCheck"; -import WalletBalance from '../components/WalletBalance'; -import Spinner from '../components/Spinner'; -import ErrorPopup from '../components/ErrorPopup'; -import DownloadImage from '../components/DownloadImage'; +import WalletBalance from "../components/WalletBalance"; +import Spinner from "../components/Spinner"; +import ErrorPopup from "../components/ErrorPopup"; +import DownloadImage from "../components/DownloadImage"; - -import logo from '../pages/styles/catsky-logo-white.png'; -import jpglogo from '../pages/styles/jpglogo.png' -import tokenlogo from '../pages/styles/tokenlogo.png' -import chartlogo from '../pages/styles/chartlogo.png' +import logo from "../pages/styles/catsky-logo-white.png"; +import jpglogo from "../pages/styles/jpglogo.png"; +import tokenlogo from "../pages/styles/tokenlogo.png"; +import chartlogo from "../pages/styles/chartlogo.png"; //import darkSynthAudio from '../darkSynthAudio.mp3'; - const Home: NextPage = () => { - const { connected, wallet } = useWallet(); + const { connected, wallet } = useWallet(); const [unsignedTx, setUnsignedTx] = useState(null); - const [prompt, setPrompt] = useState(''); - const [promptSummary, setPromptSummary] = useState(''); + const [prompt, setPrompt] = useState(""); + const [promptSummary, setPromptSummary] = useState(""); const [chunkedPrompt, setChunkedPrompt] = useState([]); const [generatedImages, setGeneratedImages] = useState([]); - const [generatedPrompt, setGeneratedPrompt] = useState(''); // State variable to store the generated prompt + const [generatedPrompt, setGeneratedPrompt] = useState(""); // State variable to store the generated prompt const [error, setError] = useState(null); const [chunkedMetadata, setChunkedMetadata] = useState([]); const [selectedModel, setSelectedModel] = useState("dall-e-2"); @@ -37,7 +35,7 @@ const Home: NextPage = () => { const [selectedQuality, setSelectedQuality] = useState("standard"); const [isLoading, setIsLoading] = useState(false); // State to manage loading state const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 }); - const [selectedStyle, setSelectedStyle] = useState(''); // State to store the selected style + const [selectedStyle, setSelectedStyle] = useState(""); // State to store the selected style //const GENERATIONS_MADE_KEY = "generationsMade"; @@ -49,175 +47,170 @@ const Home: NextPage = () => { const [mintingPrice, setMintingPrice] = useState(8.69); // Default to the initial price // Call the custom hook to get the data const { catskyAssetSummary, hasMinRequiredTokens } = useTokenCheck(); - + const catskyBalance = catskyAssetSummary["$CATSKY"] || 0; const catnipBalance = catskyAssetSummary["CatNip NFT"] || 0; const ognftBalance = catskyAssetSummary["OG NFT"] || 0; const inifinitymintsBalance = catskyAssetSummary["Era I"] || 0; - - const [showInfo, setShowInfo] = useState(false); - const autoExpand = (event: React.ChangeEvent) => { - const textarea = event.target; - textarea.style.height = 'inherit'; // Reset the height + textarea.style.height = "inherit"; // Reset the height textarea.style.height = `${textarea.scrollHeight}px`; // Set to scrollHeight }; - -// Inside the updateOptions function -const updateOptions = () => { - const modelSelect = document.getElementById("model") as HTMLSelectElement; - const sizeSelect = document.getElementById("size") as HTMLSelectElement; - const qualitySelect = document.getElementById("quality") as HTMLSelectElement; - const selectedModel = modelSelect.value; - - sizeSelect.innerHTML = ""; - qualitySelect.innerHTML = ""; - - if (selectedModel === "dall-e-2") { - // Add size options for DALL·E-2 - const sizeOptions = [ - { value: "256x256", label: "Small" }, - { value: "512x512", label: "Medium" }, - { value: "1024x1024", label: "Large" }, - ]; - sizeOptions.forEach((optionData) => { - const option = document.createElement("option"); - option.value = optionData.value; - option.textContent = optionData.label; - sizeSelect.appendChild(option); - }); - // Add quality options for DALL·E-2 - const qualityOption = document.createElement("option"); - qualityOption.value = "standard"; - qualityOption.textContent = "Standard"; - qualitySelect.appendChild(qualityOption); - } else if (selectedModel === "dall-e-3") { - // Add size options for DALL·E-3 - const sizeOptions = [ - { value: "1024x1024", label: "Square" }, - ]; - sizeOptions.forEach((optionData) => { - const option = document.createElement("option"); - option.value = optionData.value; - option.textContent = optionData.label; - sizeSelect.appendChild(option); - }); - - - - // Add quality options for DALL·E-3 if user has CatNip - if (catnipBalance >= 3 || ognftBalance >= 1 || inifinitymintsBalance >=10) { - const landscapeOption = document.createElement("option"); - landscapeOption.value = "1792x1024"; - landscapeOption.textContent = "Landscape"; - sizeSelect.appendChild(landscapeOption); - - const portraitOption = document.createElement("option"); - portraitOption.value = "1024x1792"; - portraitOption.textContent = "Portrait"; - sizeSelect.appendChild(portraitOption); + // Inside the updateOptions function + const updateOptions = () => { + const modelSelect = document.getElementById("model") as HTMLSelectElement; + const sizeSelect = document.getElementById("size") as HTMLSelectElement; + const qualitySelect = document.getElementById( + "quality" + ) as HTMLSelectElement; + const selectedModel = modelSelect.value; + + sizeSelect.innerHTML = ""; + qualitySelect.innerHTML = ""; + + if (selectedModel === "dall-e-2") { + // Add size options for DALL·E-2 + const sizeOptions = [ + { value: "256x256", label: "Small" }, + { value: "512x512", label: "Medium" }, + { value: "1024x1024", label: "Large" }, + ]; + sizeOptions.forEach((optionData) => { + const option = document.createElement("option"); + option.value = optionData.value; + option.textContent = optionData.label; + sizeSelect.appendChild(option); + }); - const standardOption = document.createElement("option"); - standardOption.value = "standard"; - standardOption.textContent = "Standard"; - qualitySelect.appendChild(standardOption); + // Add quality options for DALL·E-2 + const qualityOption = document.createElement("option"); + qualityOption.value = "standard"; + qualityOption.textContent = "Standard"; + qualitySelect.appendChild(qualityOption); + } else if (selectedModel === "dall-e-3") { + // Add size options for DALL·E-3 + const sizeOptions = [{ value: "1024x1024", label: "Square" }]; + sizeOptions.forEach((optionData) => { + const option = document.createElement("option"); + option.value = optionData.value; + option.textContent = optionData.label; + sizeSelect.appendChild(option); + }); - const hdOption = document.createElement("option"); - hdOption.value = "hd"; - hdOption.textContent = "HD"; - qualitySelect.appendChild(hdOption); - } else { - const disabledOption = document.createElement("option"); - disabledOption.value = ""; - disabledOption.textContent = "Select"; - sizeSelect.appendChild(disabledOption); + // Add quality options for DALL·E-3 if user has CatNip + if ( + catnipBalance >= 3 || + ognftBalance >= 1 || + inifinitymintsBalance >= 10 + ) { + const landscapeOption = document.createElement("option"); + landscapeOption.value = "1792x1024"; + landscapeOption.textContent = "Landscape"; + sizeSelect.appendChild(landscapeOption); + + const portraitOption = document.createElement("option"); + portraitOption.value = "1024x1792"; + portraitOption.textContent = "Portrait"; + sizeSelect.appendChild(portraitOption); + + const standardOption = document.createElement("option"); + standardOption.value = "standard"; + standardOption.textContent = "Standard"; + qualitySelect.appendChild(standardOption); + + const hdOption = document.createElement("option"); + hdOption.value = "hd"; + hdOption.textContent = "HD"; + qualitySelect.appendChild(hdOption); + } else { + const disabledOption = document.createElement("option"); + disabledOption.value = ""; + disabledOption.textContent = "Select"; + sizeSelect.appendChild(disabledOption); - // Quality options are disabled if CatNip is not available - qualitySelect.disabled = true; + // Quality options are disabled if CatNip is not available + qualitySelect.disabled = true; + } } - } - - // Update size and quality based on the new selections - setSelectedSize(sizeSelect.value); - setSelectedQuality(qualitySelect.value); - setSelectedModel(modelSelect.value); -}; + // Update size and quality based on the new selections + setSelectedSize(sizeSelect.value); + setSelectedQuality(qualitySelect.value); + setSelectedModel(modelSelect.value); + }; const getRandomPrompt = async () => { try { setIsLoading(true); // Set loading state to true //const audio = new Audio("/darkSynthAudio.MP3"); //audio.play(); - + // Call your internal API endpoint instead of OpenAI's API directly - const response = await fetch('/api/getRandomPrompt'); - + const response = await fetch("/api/getRandomPrompt"); + if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } - + const data = await response.json(); const randomPrompt = data.prompt; console.log(randomPrompt); - + if (randomPrompt !== null) { setPrompt(randomPrompt); setIsLoading(false); // Reset loading state } } catch (error) { setIsLoading(false); // Ensure loading state is reset even on error - console.error('Error generating random prompt:', error); - + console.error("Error generating random prompt:", error); } - } + }; const summarizePrompt = async (prompt: string) => { - try { - const response = await fetch('/api/summarizePrompt', { - method: 'POST', + const response = await fetch("/api/summarizePrompt", { + method: "POST", headers: { - 'Content-Type': 'application/json', + "Content-Type": "application/json", }, body: JSON.stringify({ prompt }), }); - + if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } - + const data = await response.json(); const summary = data.summary; console.log(summary); - + return summary; } catch (error) { - console.error('Error generating summarized prompt:', error); + console.error("Error generating summarized prompt:", error); throw error; } }; - + const generateImage = async () => { - // if (generationsMade < generationsAllowed) { - // setGenerationsMade(prevGenerationsMade => prevGenerationsMade + 1); - // if (typeof window !== 'undefined') { - // localStorage.setItem(GENERATIONS_MADE_KEY, (generationsMade + 1).toString()); - // } + // if (generationsMade < generationsAllowed) { + // setGenerationsMade(prevGenerationsMade => prevGenerationsMade + 1); + // if (typeof window !== 'undefined') { + // localStorage.setItem(GENERATIONS_MADE_KEY, (generationsMade + 1).toString()); + // } try { setIsLoading(true); // Set loading state to true when generating image - console.log(selectedModel,selectedModel,selectedQuality); - const response = await fetch('/api/generateImage', { - method: 'POST', + console.log(selectedModel, selectedModel, selectedQuality); + const response = await fetch("/api/generateImage", { + method: "POST", headers: { - 'Content-Type': 'application/json', + "Content-Type": "application/json", }, - + body: JSON.stringify({ prompt: `${prompt} In Style: '${selectedStyle}'`, // Include the selected style in the prompt size: selectedSize, @@ -230,37 +223,36 @@ const updateOptions = () => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } - + const data = await response.json(); const imageUrls = data.imageUrls; - + setGeneratedImages(imageUrls); + setUploadedImage(null); console.log(imageUrls); setGeneratedPrompt(prompt); - + // Get summary for the prompt const promptSummary = await summarizePrompt(prompt); setPromptSummary(promptSummary); - + // Chunking image URLs for metadata - const chunkedMetadata = chunkData(imageUrls.join(','), 64); + const chunkedMetadata = chunkData(imageUrls.join(","), 64); setChunkedMetadata(chunkedMetadata); - + // Chunking prompt for metadata const chunkedPromptData = chunkData(prompt, 64); setChunkedPrompt(chunkedPromptData); - setIsLoading(false); // Set loading state to false when image generation is complete - } catch (error) { - console.error('Failed to generate images:', error); - setError('An error occurred while generating images'); + console.error("Failed to generate images:", error); + setError("An error occurred while generating images"); setIsLoading(false); // Ensure loading state is reset even on error } -// } + // } }; -/* + /* const generateStableDiffusionImage = async () => { try { setIsLoading(true); @@ -299,7 +291,7 @@ const updateOptions = () => { } }; */ - + // Function to chunk data into specified size const chunkData = (data: string, size: number) => { const chunks = []; @@ -308,12 +300,12 @@ const updateOptions = () => { } return chunks; }; - + const handleStyleSelection = (style: string) => { setSelectedStyle(style); }; - -/* + + /* useEffect(() => { if (typeof window !== 'undefined') { const storedGenerationsMade = localStorage.getItem(GENERATIONS_MADE_KEY); @@ -332,10 +324,10 @@ const updateOptions = () => { }, [catskyBalance]); */ useEffect(() => { - console.log("$CATSKY",catskyBalance); - console.log("CatNip",catnipBalance); - console.log("OG-NFT",ognftBalance); - console.log("Era I",inifinitymintsBalance); + console.log("$CATSKY", catskyBalance); + console.log("CatNip", catnipBalance); + console.log("OG-NFT", ognftBalance); + console.log("Era I", inifinitymintsBalance); const calculatedMintingPrice = calculateMintingPrice(catskyBalance); const firstDigitMintingPrice = calculatedMintingPrice / 1000000; // Extracting the first digit setMintingPrice(firstDigitMintingPrice); @@ -349,220 +341,231 @@ const updateOptions = () => { setSelectedQuality("standard"); updateOptions(); } - }, [connected]); - - // Function to calculate the minting price based on CATSKY token holdings - const calculateMintingPrice = (catskyBalance: number) => { - if (catskyBalance >= 5000000000) { - return 4690000; // 5 billion CATSKY tokens - } else if (catskyBalance >= 3000000000) { - return 5690000; // 3 billion CATSKY tokens - } else if (catskyBalance >= 1000000000) { - return 6690000; // 1 billion CATSKY tokens - } else if (catskyBalance >= 500000000) { - return 7690000; // 500M CATSKY tokens - } else { - return 8690000; // Default initial price when no CATSKY tokens are held - } + }, [connected]); + + // Function to calculate the minting price based on CATSKY token holdings + const calculateMintingPrice = (catskyBalance: number) => { + if (catskyBalance >= 5000000000) { + return 4690000; // 5 billion CATSKY tokens + } else if (catskyBalance >= 3000000000) { + return 5690000; // 3 billion CATSKY tokens + } else if (catskyBalance >= 1000000000) { + return 6690000; // 1 billion CATSKY tokens + } else if (catskyBalance >= 500000000) { + return 7690000; // 500M CATSKY tokens + } else { + return 8690000; // Default initial price when no CATSKY tokens are held + } + }; + + const processTransaction = async () => { + const price = calculateMintingPrice(catskyBalance); + console.log("mint price:", price); + console.log("Chunked image URL (2):", chunkedMetadata); + console.log("Chunked Prompt (2):", chunkedPrompt); + + const tx = new Transaction({ initiator: wallet }).sendLovelace( + "addr1vxufv40n45m0x7du3kk305trmsvclgdnw3ly2lxq2gkqxqga696du", + + price.toString() + ); + // Assuming this code block is within a JSX context + // Define the type of metadataObj + type MetadataObject = { + URLs: string[]; + Prompt: string[]; + [key: string]: string[]; // Allow additional properties with string array values + }; + + // Aggregate chunked URLs + let metadataKey = 674; + let metadataObj: MetadataObject = { + URLs: [], + Prompt: [], }; - const processTransaction = async () => { - const price = calculateMintingPrice(catskyBalance); - console.log('mint price:', price); - console.log('Chunked image URL (2):', chunkedMetadata ) - console.log('Chunked Prompt (2):', chunkedPrompt); - - const tx = new Transaction({ initiator: wallet }) - .sendLovelace( - 'addr1vxufv40n45m0x7du3kk305trmsvclgdnw3ly2lxq2gkqxqga696du', - - price.toString() - ); - // Assuming this code block is within a JSX context - // Define the type of metadataObj - type MetadataObject = { - URLs: string[]; - Prompt: string[]; - [key: string]: string[]; // Allow additional properties with string array values - }; - - // Aggregate chunked URLs - let metadataKey = 674; - let metadataObj: MetadataObject = { - URLs: [], - Prompt: [], - }; - - // Iterate through each chunk of metadata, split it, and extract URLs - chunkedMetadata.forEach((chunk: string) => { - let urlsInChunk: string[] = chunk.split(','); - metadataObj.URLs.push(...urlsInChunk); - }); - - // Iterate through each chunk of prompt, split it, and extract prompt - chunkedPrompt.forEach((chunk: string) => { - let promptInChunk: string[] = chunk.split(','); - metadataObj.Prompt.push(...promptInChunk); - }); - - // Add additional metadata properties - metadataObj['Era'] = ['V1.0: Wildcat Genesis Era']; // Explicitly define Era as string[] - metadataObj['Text'] = ['Powered by Catsky AI and Sick City']; // Explicitly define Text as string[] - metadataObj['Settings'] = [selectedModel, selectedSize, selectedQuality] - metadataObj['Name'] = [promptSummary] - // Set metadata with aggregated URLs, prompt, and additional metadata strings - tx.setMetadata(metadataKey, metadataObj); - - try { - // Build transaction - const unsignedTx = await tx.build(); - setUnsignedTx(unsignedTx); // Save unsignedTx to state - console.log('Unsigned transaction:', unsignedTx); - - // Sign transaction - if (!unsignedTx) { - console.error('Unsigned transaction not available'); - return; - } - const signedTx = await wallet.signTx(unsignedTx); - console.log('Signed transaction:', signedTx); - - // Submit transaction - const txHash = await wallet.submitTx(signedTx); - console.log('Transaction hash:', txHash); - } catch (error) { - setError(' Not enough ADA!') - console.error('Error processing transaction:', error); + // Iterate through each chunk of metadata, split it, and extract URLs + chunkedMetadata.forEach((chunk: string) => { + let urlsInChunk: string[] = chunk.split(","); + metadataObj.URLs.push(...urlsInChunk); + }); + + // Iterate through each chunk of prompt, split it, and extract prompt + chunkedPrompt.forEach((chunk: string) => { + let promptInChunk: string[] = chunk.split(","); + metadataObj.Prompt.push(...promptInChunk); + }); + + // Add additional metadata properties + metadataObj["Era"] = ["V1.0: Wildcat Genesis Era"]; // Explicitly define Era as string[] + metadataObj["Text"] = ["Powered by Catsky AI and Sick City"]; // Explicitly define Text as string[] + metadataObj["Settings"] = [selectedModel, selectedSize, selectedQuality]; + metadataObj["Name"] = [promptSummary]; + // Set metadata with aggregated URLs, prompt, and additional metadata strings + tx.setMetadata(metadataKey, metadataObj); + + try { + // Build transaction + const unsignedTx = await tx.build(); + setUnsignedTx(unsignedTx); // Save unsignedTx to state + console.log("Unsigned transaction:", unsignedTx); + + // Sign transaction + if (!unsignedTx) { + console.error("Unsigned transaction not available"); + return; } + const signedTx = await wallet.signTx(unsignedTx); + console.log("Signed transaction:", signedTx); + + // Submit transaction + const txHash = await wallet.submitTx(signedTx); + console.log("Transaction hash:", txHash); + } catch (error) { + setError(" Not enough ADA!"); + console.error("Error processing transaction:", error); + } }; useEffect(() => { updateOptions(); }, []); - - useEffect(() => { const updateCursor = (e: MouseEvent) => { setCursorPos({ x: e.clientX, y: e.clientY }); }; - window.addEventListener('mousemove', updateCursor); + window.addEventListener("mousemove", updateCursor); return () => { - window.removeEventListener('mousemove', updateCursor); + window.removeEventListener("mousemove", updateCursor); }; }, []); const saveImage = async (imageUrl: string) => { try { - // Open the image in a new tab - window.open(imageUrl, '_blank'); + // Open the image in a new tab + window.open(imageUrl, "_blank"); } catch (error) { - console.error('Error opening image:', error); + console.error("Error opening image:", error); } - }; + }; - // Function to toggle the info pop-up - const toggleInfo = () => setShowInfo(!showInfo); + // Function to toggle the info pop-up + const toggleInfo = () => setShowInfo(!showInfo); - + const [uploadedImage, setUploadedImage] = useState(null); + function handleChange(event: React.ChangeEvent) { + if (event?.currentTarget?.files?.length == 1) { + const image_file = event.currentTarget.files[0]; + const image_url = URL.createObjectURL(image_file); + setUploadedImage(image_url); + // Chunking image URLs for metadata + const chunkedMetadata = chunkData(image_url, 64); + setChunkedMetadata(chunkedMetadata); + + // Chunking text + const chunkedPromptData = chunkData("TEST", 64); + setChunkedPrompt(chunkedPromptData); + setGeneratedImages([]); + } + } return ( <> -
+

Infinity Mint V1.0 -

+

Powered by Catsky AI

- Logo - Logo - Logo -
{/* Form Section */}
- -
- +
+
-

More Info

+

+ More Info +

{showInfo}
-
- {connected} - -
-
- - Hold 100M $CATSKY for HD Model - -
+
+ {connected} + +
+
Hold 100M $CATSKY for HD Model
+ +
+ + + - - - - - - -
+
-
- +
+
- handleStyleSelection(e.target.value)} + > + @@ -580,9 +583,11 @@ const updateOptions = () => {
-
- -
+
+ +
-
+
+
+
+ {showInfo && ( +
+

+ Models: Dalle 2 and 3 are + the current OpenAI Image Genearation Models. Dalle3 is + significantly better, but slower +

+
+ )} +
-
-
- {showInfo && ( -
-

Models: Dalle 2 and 3 are the current OpenAI Image Genearation Models. Dalle3 is significantly better, but slower

-
- )} -
- -
- -
- setSelectedSize(e.target.value)} // Add this line - > - -
-
-
-
- {showInfo && ( -
-

Small = 256x256

-

Medium = 512x512

-

Large = 1024x1024

-

Square = 1024x1024

-

Landscape = 1792x1024

-

Portrait = 1024x1792

- -
- )} + >
+
+
+
+ {showInfo && ( +
+

+ Small = 256x256 +

+

+ Medium = 512x512 +

+

+ Large = 1024x1024 +

+

+ Square = 1024x1024 +

+

+ Landscape = 1792x1024 +

+

+ Portrait = 1024x1792 +

+
+ )} +
-
- -
- setSelectedQuality(e.target.value)}> + onChange={(e) => setSelectedQuality(e.target.value)} + > -
-
-
- {showInfo && ( -
-

Qualtiy: Dalle 3 has 2 quality options to try

-
- )} -
- - - -
-
- {showInfo && ( -
-

Hold $CATSKY when minting!

-

-

0.5 B = ₳ 1 ADA an 11% Discount

-

1.0 B = ₳ 2 ADA an 22% Discount!

-

3.0 B = ₳ 3 ADA an 34% Discount!!

-

5.0 B = ₳ 4 ADA an 46% Discount!!!

-
- )} -
- -
+ Upload Image + + +
- {/* "Your Creation" Section */} -
- - {isLoading && ( + +
+
+ {showInfo && ( +
+

+ Hold $CATSKY when minting! +

+

+

+ 0.5 B = ₳ 1 ADA an 11% + Discount +

+

+ 1.0 B = ₳ 2 ADA an 22% + Discount! +

+

+ 3.0 B = ₳ 3 ADA an 34% + Discount!! +

+

+ 5.0 B = ₳ 4 ADA an 46% + Discount!!! +

+
+ )} +
+ +
+ + {/* "Your Creation" Section */} +
+ + {isLoading && (
- +
- )} - - {!!generatedImages && generatedImages.length > 0 && ( -
- {generatedImages.map((imageUrl, imageIndex) => ( -
- {`Generated saveImage(imageUrl)} - /> -
- -
-
-
Model: {selectedModel}
-
Size: {selectedSize}
-
Quality: {selectedQuality}
-
- {/* Prompt */} + )} + + {!!generatedImages && generatedImages.length > 0 && ( +
+ {generatedImages.map((imageUrl, imageIndex) => ( +
+ {`Generated saveImage(imageUrl)} + /> +
+ +
+
+
Model: {selectedModel}
+
Size: {selectedSize}
+
Quality: {selectedQuality}
+
+ {/* Prompt */}
Prompt: {generatedPrompt}
- ))} + ))} +
+ )} + {uploadedImage && ( +
+
+ {`Uploaded saveImage(uploadedImage)} + />
- )} -
+
+ )} +
- ); - } + ); +}; export default Home; - - -//reupload to aws \ No newline at end of file +//reupload to aws