The Ultimate Guide to Building Your First AI-Powered Web App with Leonardo.Ai and [AFFILIATE_LINK_WEBFLOW]

<div class="ai-generator-container">
  <div class="input-section">
    <h2>Generate Your AI Image</h2>
    <form id="image-generator-form">
      <div class="form-group">
        <label for="prompt">Describe your image:</label>
        <textarea id="prompt" name="prompt" required></textarea>
      </div>
      
      <div class="form-group">
        <label for="style">Art Style:</label>
        <select id="style" name="style">
          <option value="realistic">Realistic</option>
          <option value="artistic">Artistic</option>
          <option value="abstract">Abstract</option>
        </select>
      </div>
      
      <button type="submit" id="generate-btn">Generate Image</button>
    </form>
  </div>
  
  <div class="output-section">
    <div id="loading" class="hidden">Generating your image...</div>
    <div id="result-container" class="hidden">
      <img id="generated-image" src="" alt="Generated image">
      <button id="download-btn">Download Image</button>
    </div>
  </div>
</div>

// Add this to your [AFFILIATE_LINK_WEBFLOW] page's custom code section
async function generateImage(prompt, style) {
  const loadingDiv = document.getElementById('loading');
  const resultContainer = document.getElementById('result-container');
  
  // Show loading state
  loadingDiv.classList.remove('hidden');
  resultContainer.classList.add('hidden');
  
  try {
    // This would typically go through your backend/serverless function
    const response = await fetch('/.netlify/functions/generate-image', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        prompt: prompt,
        style: style
      })
    });
    
    const data = await response.json();
    
    if (data.success) {
      // Display the generated image
      document.getElementById('generated-image').src = data.imageUrl;
      loadingDiv.classList.add('hidden');
      resultContainer.classList.remove('hidden');
    } else {
      throw new Error(data.error || 'Failed to generate image');
    }
  } catch (error) {
    console.error('Error:', error);
    alert('Failed to generate image. Please try again.');
    loadingDiv.classList.add('hidden');
  }
}

// Form submission handler
document.getElementById('image-generator-form').addEventListener('submit', function(e) {
  e.preventDefault();
  
  const prompt = document.getElementById('prompt').value;
  const style = document.getElementById('style').value;
  
  if (prompt.trim()) {
    generateImage(prompt, style);
  }
});

// netlify/functions/generate-image.js
exports.handler = async (event, context) => {
  if (event.httpMethod !== 'POST') {
    return { statusCode: 405, body: 'Method Not Allowed' };
  }
  
  const { prompt, style } = JSON.parse(event.body);
  const LEONARDO_API_KEY = process.env.LEONARDO_API_KEY;
  
  try {
    const response = await fetch('https://cloud.leonardo.ai/api/rest/v1/generations', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${LEONARDO_API_KEY}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        prompt: prompt,
        num_images: 1,
        width: 512,
        height: 512,
        guidance_scale: 7,
        // Add style-specific parameters based on the style selection
      })
    });
    
    const data = await response.json();
    
    return {
      statusCode: 200,
      body: JSON.stringify({
        success: true,
        imageUrl: data.url,
        generationId: data.sdGenerationJob.generationId
      })
    };
  } catch (error) {
    return {
      statusCode: 500,
      body: JSON.stringify({
        success: false,
        error: 'Failed to generate image'
      })
    };
  }
};