iamseeley/formLogic

formLogic

100

import { sdxlForm } from 'https://esm.town/v/iamseeley/sdxlLightning';

import { sdv3Form } from 'https://esm.town/v/iamseeley/sdv3';

import { stableCascadeForm } from 'https://esm.town/v/iamseeley/stableCascade';

import { realisticVisionForm } from 'https://esm.town/v/iamseeley/realisticVision';

import { sdTurboForm } from 'https://esm.town/v/iamseeley/sdTurbo';

const sizeMapping = {

"square_hd": { width: '1080px', height: '1080px' },

"square": { width: '512px', height: '512px' },

"portrait_4_3": { width: '480px', height: '640px' },

"portrait_16_9": { width: '720px', height: '1280px' },

"landscape_4_3": { width: '640px', height: '480px' },

"landscape_16_9": { width: '1280px', height: '720px' }

};

const promptKey = 'imagePromptValue';

export function updateForm() {

const model = document.getElementById('model').value;

const modelParams = document.getElementById('modelParams');

modelParams.innerHTML = '';

if (model === 'fal-ai/fast-lightning-sdxl') {

modelParams.innerHTML = sdxlForm;

} else if (model === 'fal-ai/stable-diffusion-v3-medium') {

modelParams.innerHTML = sdv3Form;

} else if (model === 'fal-ai/stable-cascade') {

modelParams.innerHTML = stableCascadeForm;

} else if (model === 'fal-ai/realistic-vision') {

modelParams.innerHTML = realisticVisionForm;

} else if (model === 'fal-ai/fast-turbo-diffusion') {

modelParams.innerHTML = sdTurboForm;

}

// Add conditions for other models here

// Set the prompt value from localStorage if available

const savedPrompt = localStorage.getItem(promptKey);

if (savedPrompt) {

document.getElementById('prompt').value = savedPrompt;

}

export async function handleFormSubmit(event) {

event.preventDefault();

const model = document.getElementById('model').value;

const imageSize = document.getElementById('image_size')?.value;

const prompt = document.getElementById('prompt').value;

// Store the prompt value in localStorage

localStorage.setItem(promptKey, prompt);

// Create and show the loading container immediately

const resultDiv = document.getElementById('result');

const loadingContainer = document.createElement('div');

loadingContainer.className = 'loading-container';

const loadingShimmer = document.createElement('div');

loadingShimmer.className = 'loading-shimmer';

const imageFooter = document.createElement('div');

imageFooter.className = 'image-footer';

const modelElement = document.createElement('p');

modelElement.className = 'model-name';

modelElement.textContent = `Model: ${model}`; // Set the model name immediately

const removeButton = document.createElement('button');

removeButton.textContent = 'x';

removeButton.className = 'close-button';

removeButton.onclick = () => loadingContainer.remove();

imageFooter.appendChild(modelElement);

imageFooter.appendChild(removeButton);

loadingContainer.appendChild(loadingShimmer);

loadingContainer.appendChild(imageFooter);

resultDiv.prepend(loadingContainer);

// Calculate and set the height of the loading container based on aspect ratio

const aspectRatios = {

'square_hd': 1,

'square': 1,

'portrait_4_3': 4 / 3,

'portrait_16_9': 16 / 9,

'landscape_4_3': 4 / 3,

'landscape_16_9': 16 / 9

};

const aspectRatio = aspectRatios[imageSize] || 1; // Default to 1 if imageSize is not found

const containerWidth = loadingContainer.offsetWidth;

loadingShimmer.style.height = `${containerWidth / aspectRatio}px`;

// Only retrieve elements that exist

const modelName = document.getElementById('model_name')?.value;

const negativePrompt = document.getElementById('negative_prompt')?.value;

const numInferenceSteps = document.getElementById('num_inference_steps')?.value;

const guidanceScale = document.getElementById('guidance_scale')?.value;

const seed = document.getElementById('seed')?.value;

const numImages = document.getElementById('num_images')?.value;

const enableSafetyChecker = document.getElementById('enable_safety_checker')?.checked;