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} ); }; 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 */}
{/* Submit button */}
{output.map((imageData, index) => (

Generated Image {index + 1}:

{imageData.prediction?.output ? (
{`Generated
) : (

Image URLs not available.

)}

Date: {new Date(imageData.timestamp).toLocaleDateString()} Time: {new Date(imageData.timestamp).toLocaleTimeString()}

))}
)} export default IndexPage;