You need to add full openrouter integration, the llm will take the markdown and design an html slideshow based on that. You should also use the internet to find images relevant to the slideshow. You should use searchx.euan.live to do this

components/ai-slideshow.js

@@ -0,0 +1,244 @@
+class AISlideshow extends HTMLElement {
+  constructor() {
+    super();
+    this.apiKey = localStorage.getItem('openrouter-key') || '';
+    this.slides = [];
+  }
+
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.render();
+    this.addEventListeners();
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          margin-top: 2rem;
+        }
+        .ai-section {
+          background: white;
+          border-radius: 0.75rem;
+          padding: 1.5rem;
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+        .api-input {
+          display: flex;
+          gap: 0.5rem;
+          margin-bottom: 1rem;
+        }
+        .api-input input {
+          flex: 1;
+          padding: 0.5rem;
+          border: 1px solid #d1d5db;
+          border-radius: 0.375rem;
+          font-size: 0.875rem;
+        }
+        .api-input button {
+          padding: 0.5rem 1rem;
+          background: #4f46e5;
+          color: white;
+          border: none;
+          border-radius: 0.375rem;
+          cursor: pointer;
+          font-size: 0.875rem;
+        }
+        .api-input button:hover {
+          background: #4338ca;
+        }
+        .generate-btn {
+          width: 100%;
+          padding: 0.75rem;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          color: white;
+          border: none;
+          border-radius: 0.5rem;
+          font-weight: 600;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.5rem;
+        }
+        .generate-btn:hover {
+          opacity: 0.9;
+        }
+        .generate-btn:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+        .loading {
+          display: inline-block;
+          width: 1rem;
+          height: 1rem;
+          border: 2px solid rgba(255,255,255,.3);
+          border-radius: 50%;
+          border-top-color: white;
+          animation: spin 1s ease-in-out infinite;
+        }
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+        .error {
+          color: #ef4444;
+          font-size: 0.875rem;
+          margin-top: 0.5rem;
+        }
+      </style>
+      <div class="ai-section">
+        <h3 class="text-lg font-semibold mb-3">✨ AI Enhanced Slideshow</h3>
+        <div class="api-input">
+          <input type="password" id="api-key-input" placeholder="Enter OpenRouter API key" value="${this.apiKey}">
+          <button id="save-key">Save</button>
+        </div>
+        <button id="generate-ai" class="generate-btn">
+          <i data-feather="sparkles"></i>
+          Generate AI Slideshow
+        </button>
+        <div id="error" class="error"></div>
+      </div>
+    `;
+  }
+
+  addEventListeners() {
+    const saveBtn = this.shadowRoot.getElementById('save-key');
+    const generateBtn = this.shadowRoot.getElementById('generate-ai');
+    const apiInput = this.shadowRoot.getElementById('api-key-input');
+    const errorDiv = this.shadowRoot.getElementById('error');
+
+    saveBtn.addEventListener('click', () => {
+      this.apiKey = apiInput.value.trim();
+      localStorage.setItem('openrouter-key', this.apiKey);
+      saveBtn.textContent = 'Saved!';
+      setTimeout(() => saveBtn.textContent = 'Save', 1000);
+    });
+
+    generateBtn.addEventListener('click', async () => {
+      if (!this.apiKey) {
+        errorDiv.textContent = 'Please enter your OpenRouter API key first';
+        return;
+      }
+
+      const markdown = document.getElementById('markdown-input').value.trim();
+      if (!markdown) {
+        errorDiv.textContent = 'Please enter some markdown content';
+        return;
+      }
+
+      generateBtn.disabled = true;
+      generateBtn.innerHTML = '<div class="loading"></div> Generating...';
+      errorDiv.textContent = '';
+
+      try {
+        const html = await this.generateAISlideshow(markdown);
+        document.getElementById('slides-preview').innerHTML = html;
+        document.getElementById('export-btn').disabled = false;
+      } catch (error) {
+        errorDiv.textContent = error.message;
+      } finally {
+        generateBtn.disabled = false;
+        generateBtn.innerHTML = '<i data-feather="sparkles"></i> Generate AI Slideshow';
+      }
+    });
+  }
+
+  async generateAISlideshow(markdown) {
+    const slides = markdown.split(/\n---\n/);
+    let html = '';
+
+    for (let i = 0; i < slides.length; i++) {
+      const slide = slides[i];
+      
+      // Search for relevant images
+      const searchQuery = this.extractKeywords(slide);
+      const images = await this.searchImages(searchQuery);
+      
+      // Generate AI-enhanced slide
+      const prompt = `
+Create a beautiful, modern slide HTML based on this markdown content:
+${slide}
+
+Use Tailwind CSS classes for styling. Include:
+1. A compelling title
+2. Clean, readable typography
+3. One or more relevant images from this list: ${JSON.stringify(images.slice(0, 3))}
+4. Beautiful color scheme and layout
+5. Subtle animations and transitions
+
+Return only the HTML, no explanations.
+`;
+
+      const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${this.apiKey}`,
+          'Content-Type': 'application/json',
+          'HTTP-Referer': window.location.href,
+          'X-Title': 'Markdown Slides'
+        },
+        body: JSON.stringify({
+          model: 'anthropic/claude-3-haiku-20240307',
+          messages: [
+            {
+              role: 'user',
+              content: prompt
+            }
+          ],
+          max_tokens: 2000,
+          temperature: 0.7
+        })
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to generate slide content');
+      }
+
+      const data = await response.json();
+      const slideHtml = data.choices[0].message.content;
+      
+      html += `
+        <div class="ai-slide mb-6">
+          ${slideHtml}
+        </div>
+      `;
+    }
+
+    return html;
+  }
+
+  extractKeywords(text) {
+    // Simple keyword extraction
+    const words = text.toLowerCase()
+      .replace(/[^\w\s]/g, '')
+      .split(/\s+/)
+      .filter(word => word.length > 3 && !['this', 'that', 'with', 'from', 'have', 'will', 'your', 'more'].includes(word));
+    
+    const count = {};
+    words.forEach(word => count[word] = (count[word] || 0) + 1);
+    
+    return Object.entries(count)
+      .sort(([,a], [,b]) => b - a)
+      .slice(0, 3)
+      .map(([word]) => word)
+      .join(' ');
+  }
+
+  async searchImages(query) {
+    try {
+      const response = await fetch(`https://searchx.euan.live/search?q=${encodeURIComponent(query)}&safesearch=true&format=json`);
+      const data = await response.json();
+      
+      return data.results
+        .filter(result => result.url && result.url.match(/\.(jpg|jpeg|png|gif|webp)$/i))
+        .slice(0, 5)
+        .map(result => result.url);
+    } catch (error) {
+      console.error('Image search failed:', error);
+      return [];
+    }
+  }
+}
+
+customElements.define('ai-slideshow', AISlideshow);

index.html

@@ -10,6 +10,7 @@
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/pptxgenjs@3.7.0/dist/pptxgen.bundle.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
 </head>
 <body class="bg-gray-50 min-h-screen">
     <custom-navbar></custom-navbar>