how to make this app more interesting and clever? <!DOCTYPE html><html><head><base href="."><title>Lyrical Storybook Creator</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lora:ital@0;1&family=Dancing+Script&display=swap');

/* Update color variables */
:root {
  --primary: #9f7aea;
  --secondary: #4fd1c5;
  --dark: #2d3748;
  --light: #f7fafc;
  --accent: #f6ad55;
  --gradient-start: #9f7aea;
  --gradient-end: #4fd1c5;
  --surface: rgba(255, 255, 255, 0.05);
  --surface-hover: rgba(255, 255, 255, 0.1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Lora', serif;
  background: linear-gradient(135deg, var(--dark) 0%, #1a1c2c 100%);
  color: var(--light);
  line-height: 1.8;
}

.app {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.header {
  text-align: center;
  margin-bottom: 3rem;
}

.header h1 {
  font-family: 'Playfair Display', serif;
  font-size: 3.5rem;
  background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1.5rem;
  letter-spacing: -0.5px;
}

.header p {
  font-family: 'Dancing Script', cursive;
  font-size: 1.5rem;
  color: var(--secondary);
  opacity: 0.9;
}

.error-message {
  display: none;
  background: #f56565;
  color: white;
  padding: 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.project-creation {
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 1.5rem;
  padding: 2.5rem;
  margin-bottom: 3rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.input-group {
  margin-bottom: 1.5rem;
}

.input-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

textarea, input, select {
  background: var(--surface);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 1rem;
  padding: 1rem;
  font-family: 'Lora', serif;
  font-size: 1rem;
  color: var(--light);
  transition: all 0.3s ease;
}

textarea:focus, input:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(246, 173, 85, 0.2);
}

.style-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: rgba(255,255,255,0.05);
  border-radius: 0.5rem;
}

select {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 0.5rem;
  background: rgba(255,255,255,0.05);
  color: var(--light);
  font-size: 1rem;
  transition: all 0.3s ease;
}

select:focus {
  outline: none;
  border-color: var(--primary);
}

.storybook-container {
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 1.5rem;
  padding: 3rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.storybook-page {
  background: rgba(255,255,255,0.98);
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.page-illustration {
  flex: 1;
  position: relative;
  min-height: 300px;
  border-radius: 0.5rem;
  overflow: hidden;
}

.page-text {
  font-family: 'Lora', serif;
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--dark);
  padding: 2rem;
}

.page-controls {
  margin-top: 2rem;
}

.page-btn {
  background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  font-family: 'Lora', serif;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.page-btn:hover {
  transform: translateY(-2px);
}

@keyframes pageFlip {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

.page-transition {
  animation: pageFlip 0.6s ease;
}

/* Add these button styles */
.btn {
  font-family: 'Lora', serif;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.btn-primary {
  background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
  border: none;
}

.btn-secondary {
  background: var(--surface);
  border: 2px solid var(--secondary);
  color: var(--secondary);
}

.btn-secondary {
  margin-left: 1rem;
}

#resetBtn {
  background: var(--surface);
  border: 2px solid var(--accent);
  color: var(--accent);
}

#resetBtn:hover {
  background: var(--surface-hover);
  border-color: var(--gradient-end);
  color: var(--gradient-end);
}

.btn:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn.generating {
  position: relative;
}

.btn.generating:after {
  content: '';
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 2px solid #fff;
  border-radius: 50%;
  border-left-color: transparent;
  margin-left: 0.5rem;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>
<meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin">
<meta http-equiv="Cross-Origin-Embedder-Policy" content="require-corp">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script>
class PollinationsAPI {
  static async generateImage(prompt, settings = {}) {
    const baseUrl = 'https://image.pollinations.ai/prompt/';
    const params = new URLSearchParams({
      width: settings.width || 1280,
      height: settings.height || 720,
      seed: settings.seed || Math.floor(Math.random() * 1000000),
      nologo: 'true',
      private: 'true'
    });
    
    const encodedPrompt = encodeURIComponent(prompt);
    const url = `${baseUrl}${encodedPrompt}?${params}`;
    
    return url;
  }

  static async generateText(prompt) {
    const url = `https://text.pollinations.ai/${encodeURIComponent(prompt)}`;
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error('Text generation failed');
    }
    return response.text();
  }
}

class MusicVideoCreator {
  constructor() {
    this.scenes = [];
    this.currentPage = 0;
    this.pages = [];
    this.isGenerating = false;
    this.audioFile = null;
    this.defaultSettings = {
      lyrics: '',
      theme: '',
      styleFilter: 'watercolor',
      bookLayout: 'single',
      textStyle: 'storybook'
    };

    this.showError = this.showError.bind(this);
    this.init();
  }

  init() {
    this.generateBtn = document.getElementById('generateBtn');
    this.customizeBtn = document.getElementById('customizeBtn');
    this.exportBtn = document.getElementById('exportBtn');
    this.resetBtn = document.getElementById('resetBtn');
    this.previewArea = document.getElementById('previewArea');
    
    this.bindEvents();
  }

  bindEvents() {
    this.generateBtn.addEventListener('click', () => this.generatePages());
    this.customizeBtn.addEventListener('click', () => this.customizeStyle());
    this.exportBtn.addEventListener('click', () => this.exportStorybook());
    this.resetBtn.addEventListener('click', () => this.resetApp());
  }

  showError(message) {
    const errorMessage = document.getElementById('errorMessage');
    errorMessage.textContent = message;
    errorMessage.style.display = 'block';
    setTimeout(() => {
      errorMessage.style.display = 'none';
    }, 5000);
  }

  async generatePages() {
    if (this.isGenerating) return;
    
    const lyrics = document.getElementById('lyrics').value;
    const theme = document.getElementById('theme').value;
    const styleFilter = document.getElementById('styleFilter').value;

    if (!lyrics || !theme) {
      this.showError('Please enter both lyrics and theme');
      return;
    }

    this.isGenerating = true;
    this.generateBtn.classList.add('generating');
    this.generateBtn.textContent = 'Generating...';

    try {
      const segments = lyrics.split('\n\n').filter(seg => seg.trim());
      this.pages = [];
      
      for (let i = 0; i < segments.length; i++) {
        const scenePrompt = await PollinationsAPI.generateText(
          `Create a vivid, detailed description for a storybook illustration. 
           Context: These song lyrics: "${segments[i]}"
           Theme: ${theme}
           Style: ${styleFilter}
           Consider:
           - The emotional tone and mood
           - Key symbols and metaphors
           - Color palette and lighting
           - Character expressions and poses
           - Environmental details and setting
           - Composition and focal points
           Describe the scene in rich, artistic detail.`
        );

        const imagePrompt = `${styleFilter} illustration, masterpiece, professional storybook art, 
          highly detailed, dramatic lighting, vibrant colors, 
          ${theme}, ${scenePrompt}, 
          trending on artstation, award winning book illustration, 
          elegant composition, artistic masterpiece`;

        const imageUrl = await PollinationsAPI.generateImage(
          imagePrompt, 
          {
            width: 1280,
            height: 720,
            // Add some randomness to get varied results
            seed: Math.floor(Math.random() * 1000000)
          }
        );

        const page = {
          lyrics: segments[i],
          description: scenePrompt,
          imageUrl: imageUrl,
        };
        
        this.pages.push(page);
        this.showPage(i);
      }

    } catch (error) {
      console.error('Error generating pages:', error);
      this.showError('Error generating pages: ' + error.message);
    } finally {
      this.isGenerating = false;
      this.generateBtn.classList.remove('generating');
      this.generateBtn.textContent = 'Generate Storybook';
    }
  }

  async exportStorybook() {
    try {
      const { jsPDF } = window.jspdf;
      const doc = new jsPDF();
      
      // Show loading state
      this.exportBtn.disabled = true;
      this.exportBtn.textContent = 'Exporting...';

      for (let i = 0; i < this.pages.length; i++) {
        const page = this.pages[i];
        if (i > 0) doc.addPage();

        try {
          // Create new image and wait for load
          const img = new Image();
          await new Promise((resolve, reject) => {
            img.crossOrigin = 'Anonymous';
            img.onload = resolve;
            img.onerror = reject;
            img.src = page.imageUrl;
          });

          // Convert to canvas and get data URL
          const canvas = document.createElement('canvas');
          canvas.width = img.width;
          canvas.height = img.height;
          const ctx = canvas.getContext('2d');
          ctx.drawImage(img, 0, 0);
          const imgData = canvas.toDataURL('image/jpeg', 0.95);

          // Add to PDF with proper scaling
          const pdfWidth = doc.internal.pageSize.getWidth();
          const pdfHeight = (img.height * pdfWidth) / img.width;
          doc.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight);

          // Add text below image
          doc.setFont('helvetica');
          doc.setFontSize(12);
          const textY = pdfHeight + 10;
          const lines = doc.splitTextToSize(page.lyrics, pdfWidth - 20);
          doc.text(lines, 10, textY);

        } catch (err) {
          console.error('Error processing page:', err);
          this.showError(`Error processing page ${i + 1}`);
        }
      }
      
      doc.save('lyrical_storybook.pdf');
    } catch (error) {
      console.error('Error exporting storybook:', error);
      this.showError('Failed to export storybook: ' + error.message);
    } finally {
      this.exportBtn.disabled = false;
      this.exportBtn.textContent = 'Export Storybook';
    }
  }

  customizeStyle() {
    const style = document.getElementById('styleFilter').value;
    const layout = document.getElementById('bookLayout').value;
    const textStyle = document.getElementById('textStyle').value;

    // Apply text style changes
    const textElements = document.querySelectorAll('.page-text');
    textElements.forEach(el => {
      switch(textStyle) {
        case 'storybook':
          el.style.fontFamily = '"Crimson Text", serif';
          break;
        case 'elegant':
          el.style.fontFamily = '"Playfair Display", serif';
          break;
        case 'modern':
          el.style.fontFamily = '"Roboto", sans-serif';
          break;
        case 'handwritten':
          el.style.fontFamily = '"Dancing Script", cursive';
          break;
      }
    });

    // Apply layout changes
    const container = document.querySelector('.storybook-page');
    switch(layout) {
      case 'single':
        container.style.flexDirection = 'column';
        break;
      case 'spread':
        container.style.flexDirection = 'row';
        break;
      case 'scroll':
        container.style.flexDirection = 'column';
        container.style.overflowY = 'auto';
        break;
    }

    // Update style prompt for image generation
    this.stylePrompt = `${style} style, ${layout} composition`;
    
    // Regenerate current page with new style
    if (this.pages.length > 0) {
      this.showPage(this.currentPage);
    }
  }

  resetApp() {
    // Reset form inputs
    document.getElementById('lyrics').value = this.defaultSettings.lyrics;
    document.getElementById('theme').value = this.defaultSettings.theme;
    document.getElementById('styleFilter').value = this.defaultSettings.styleFilter;
    document.getElementById('bookLayout').value = this.defaultSettings.bookLayout;
    document.getElementById('textStyle').value = this.defaultSettings.textStyle;

    // Reset preview area
    this.previewArea.innerHTML = '<p>Preview will appear here</p>';
    
    // Reset internal state
    this.pages = [];
    this.currentPage = 0;
    this.isGenerating = false;
    
    // Reset any error messages
    document.getElementById('errorMessage').style.display = 'none';
    
    // Reset buttons to default state
    this.generateBtn.classList.remove('generating');
    this.generateBtn.textContent = 'Generate Storybook';
    this.exportBtn.disabled = false;
    this.exportBtn.textContent = 'Export Storybook';
  }

  showPage(index) {
    if (index >= 0 && index < this.pages.length) {
      this.currentPage = index;
      const page = this.pages[index];

      this.previewArea.innerHTML = `
        <div class="storybook-page page-transition">
          <div class="page-illustration">
            <img src="${page.imageUrl}" alt="Story illustration" style="width: 100%; height: 100%; object-fit: cover;">
          </div>
          <div class="page-text">
            <p>${page.lyrics}</p>
          </div>
        </div>
        <div class="page-controls">
          <button class="page-btn" onclick="musicVideoCreator.previousPage()" ${index === 0 ? 'disabled' : ''}>Previous</button>
          <span>Page ${index + 1} of ${this.pages.length}</span>
          <button class="page-btn" onclick="musicVideoCreator.nextPage()" ${index === this.pages.length - 1 ? 'disabled' : ''}>Next</button>
        </div>
      `;
    }
  }

  nextPage() {
    if (this.currentPage < this.pages.length - 1) {
      this.currentPage++;
      this.showPage(this.currentPage);
    }
  }

  previousPage() {
    if (this.currentPage > 0) {
      this.currentPage--;
      this.showPage(this.currentPage);
    }
  }
}

document.addEventListener('DOMContentLoaded', () => {
  window.musicVideoCreator = new MusicVideoCreator();
});
</script>

<meta name="referrer" content="no-referrer">
</head><body>
<div class="app">
  <header class="header">
    <h1>Lyrical Storybook Creator</h1>
    <p style="font-family: 'Playfair Display', serif; font-size: 1.8rem; text-shadow: 0 2px 4px rgba(0,0,0,0.2); margin-top: 0.5rem;">Transform your lyrics into an illustrated storybook journey</p>
  </header>

  <div class="error-message" id="errorMessage"></div>

  <section class="project-creation">
    <div class="input-group">
      <label for="lyrics">Song Lyrics</label>
      <textarea id="lyrics" rows="6" placeholder="Paste your lyrics here..."></textarea>
    </div>

    <div class="input-group">
      <label for="theme">Theme &amp; Mood</label>
      <input type="text" id="theme" placeholder="e.g., Dreamy, nostalgic summer evening">
    </div>

    <div class="style-controls">
      <div class="input-group">
        <label for="styleFilter">Art Style</label>
        <select id="styleFilter">
          <option value="watercolor">Watercolor</option>
          <option value="digital">Digital Art</option>
          <option value="sketch">Pencil Sketch</option>
          <option value="abstract">Abstract</option>
        </select>
      </div>

      <div class="input-group">
        <label for="bookLayout">Page Layout</label>
        <select id="bookLayout">
          <option value="single">Single Page</option>
          <option value="spread">Double Spread</option>
          <option value="scroll">Scrolling Story</option>
        </select>
      </div>
      
      <div class="input-group">
        <label for="textStyle">Text Style</label>
        <select id="textStyle">
          <option value="storybook">Storybook</option>
          <option value="elegant">Elegant</option>
          <option value="modern">Modern</option>
          <option value="handwritten">Handwritten</option>
        </select>
      </div>
    </div>

    <div class="controls">
      <button class="btn btn-primary" id="generateBtn">Generate Storybook</button>
      <button class="btn btn-secondary" id="customizeBtn">Customize Style</button>
      <button class="btn btn-primary" id="exportBtn">Export Storybook</button>
      <button class="btn btn-secondary" id="resetBtn">Reset</button>
    </div>
  </section>

  <div class="storybook-container">
    <div class="preview-content" id="previewArea">
      <p>Preview will appear here</p>
    </div>
  </div>
</div>

</body></html>