import React, { useState, useEffect, FormEvent, ChangeEvent } from 'react'; interface InputData { prompt: string; negative_prompt: string; image: File | null; mask: File | null; width: number; height: number; num_outputs: number; scheduler: string; num_inference_steps: number; guidance_scale: number; prompt_strength: number; seed: string; refine: string; high_noise_frac: number; refine_steps: string; apply_watermark: boolean; lora_scale: number; } interface Prediction { output: string[]; } interface OutputData { prediction: Prediction | null; timestamp: string; prompt: string; } const TruncatedText = ({ text }: { text: string }) => { const [isTruncated, setIsTruncated] = useState(true); const toggleTruncated = () => { setIsTruncated(!isTruncated); }; if (text.length < 34) { return {text}; } return ( {isTruncated ? `${text.substring(0, 24)}...` : text} {isTruncated ? 'Read More' : 'Read Less'} ); }; const IndexPage = () => { const [inputData, setInputData] = useState({ prompt: '', negative_prompt: '', image: null, mask: null, width: 1024, height: 1024, num_outputs: 1, scheduler: 'K_EULER', num_inference_steps: 50, guidance_scale: 7.5, prompt_strength: 0.8, seed: '', refine: 'no_refiner', high_noise_frac: 0.8, refine_steps: '', apply_watermark: false, lora_scale: 0.6, }); const [output, setOutput] = useState([]); const [isLoading, setIsLoading] = useState(false); useEffect(() => { const savedOutput = localStorage.getItem('output'); if (savedOutput) { setOutput(JSON.parse(savedOutput)); } }, []); const handleChange = (e: ChangeEvent) => { const { name, value, type } = e.target as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement; // Handle file inputs differently if (type === 'file') { const files = (e.target as HTMLInputElement).files; setInputData((prevData) => ({ ...prevData, [name]: files ? files[0] : null })); } else if (type === 'checkbox') { // Check if the 'checked' property exists before accessing it if ('checked' in e.target) { setInputData((prevData) => ({ ...prevData, [name]: (e.target as HTMLInputElement).checked })); } } else { setInputData((prevData) => ({ ...prevData, [name]: value })); } }; const handleSubmit = async (e: FormEvent) => { e.preventDefault(); setIsLoading(true); try { const formData = new FormData(); for (const key in inputData) { // Changed this line to fix the 'no-prototype-builtins' error if (Object.prototype.hasOwnProperty.call(inputData, key)) { const inputKey = key as keyof InputData; if (typeof inputData[inputKey] === 'string' || inputData[inputKey] instanceof Blob) { formData.append(inputKey, inputData[inputKey] as string | Blob); } } } const response = await fetch('/api/replicate_logo', { method: 'POST', body: formData, }); const result = await response.json(); if (response.ok) { const timestamp = new Date().toISOString(); const newOutput = { prediction: result.prediction, timestamp, prompt: inputData.prompt, }; const updatedOutput = [...output, newOutput]; setOutput(updatedOutput); localStorage.setItem('output', JSON.stringify(updatedOutput)); setInputData({ prompt: '', negative_prompt: '', image: null, mask: null, width: 1024, height: 1024, num_outputs: 1, scheduler: 'K_EULER', num_inference_steps: 50, guidance_scale: 7.5, prompt_strength: 0.8, seed: '', refine: 'no_refiner', high_noise_frac: 0.8, refine_steps: '', apply_watermark: false, lora_scale: 0.6, }); } } catch (error) { console.error("An error occurred:", error); } finally { setIsLoading(false); } }; return ( Image Generation App {/* Textareas take full width */} {/* Single row, multiple items */} no_refiner expert_ensemble_refiner base_image_refiner Apply Watermark {/* Submit button */} {isLoading ? 'Generating...' : 'Generate'} {output.map((imageData, index) => ( Generated Image {index + 1}: {imageData.prediction?.output ? ( { try { const response = await fetch(imageData.prediction?.output[0] || ""); // Used optional chaining and default to empty string const blob = await response.blob(); const url = window.URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = `generated_image_${index + 1}.png`; document.body.appendChild(link); link.click(); document.body.removeChild(link); window.URL.revokeObjectURL(url); } catch (error) { console.error("Failed to download the image", error); } }} className="absolute top-0 right-0 bg-green-600 text-white px-3 py-1 rounded" > Download ) : ( Image URLs not available. )} Date: {new Date(imageData.timestamp).toLocaleDateString()} Time: {new Date(imageData.timestamp).toLocaleTimeString()} ))} )} export default IndexPage;
Image URLs not available.
Date: {new Date(imageData.timestamp).toLocaleDateString()} Time: {new Date(imageData.timestamp).toLocaleTimeString()}