Update static/js/script.js

static/js/script.js

@@ -10,7 +10,7 @@ class InkBoard {
     init() {
         this.setupEventListeners();
         this.loadGallery();
-        this.showSection('create'); // Default to create section
+        this.showSection('create');
     }
 
     setupEventListeners() {
@@ -34,7 +34,7 @@ class InkBoard {
 
     async generateContent() {
         const sceneIdea = document.getElementById('scene-idea').value.trim();
-        
+
         if (!sceneIdea) {
             this.showAlert('Please enter a scene idea', 'danger');
             return;
@@ -45,31 +45,25 @@ class InkBoard {
             this.setButtonLoading(true);
 
             const response = await fetch('/generate', {
-  method: 'POST',
-  headers: { 'Content-Type': 'application/json' },
-  body: JSON.stringify({ scene_idea: userInput })
-})
-.then(res => {
-  if (!res.ok) throw new Error("Server error");
-  return res.json();
-})
-.then(data => {
-  if (data.error) throw new Error(data.error);
-  displayStory(data.story);
-  displayImage(data.image_url);
-})
-.catch(err => {
-  console.error("Fetch error:", err.message);
-  alert("Oops! " + err.message);
-});
-                
-          
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ scene_idea: sceneIdea })
+            });
+
+            const contentType = response.headers.get("content-type");
+            if (!contentType || !contentType.includes("application/json")) {
+                const text = await response.text();
+                console.error("Non-JSON response:", text);
+                this.showAlert("Server error or you're not logged in", "danger");
+                return;
+            }
+
             const data = await response.json();
 
             if (data.success) {
                 this.displayResult(data);
-                this.loadGallery(); // Refresh gallery
-                document.getElementById('scene-idea').value = ''; // Clear input
+                this.loadGallery();
+                document.getElementById('scene-idea').value = '';
                 this.showAlert('Story and image generated successfully!', 'success');
             } else {
                 this.showAlert(data.error || 'Failed to generate content', 'danger');
@@ -86,27 +80,22 @@ class InkBoard {
 
     displayResult(data) {
         const resultsSection = document.getElementById('results-section');
-        
-        // Build image section only if image was generated
+
         const imageSection = data.image_url ? `
             <div class="col-lg-6 mb-4">
                 <div class="image-container">
                     <img src="${data.image_url}" alt="Generated Scene" class="img-fluid rounded shadow">
                 </div>
-            </div>
-        ` : '';
-        
-        // Adjust story column width based on whether image exists
+            </div>` : '';
+
         const storyColClass = data.image_url ? 'col-lg-6' : 'col-12';
-        
-        // Build download button only if image exists
+
         const downloadButton = data.image_url ? `
             <button class="btn btn-outline-success btn-sm" onclick="inkBoard.downloadImage('${data.image_url}')">
                 <i class="fas fa-download me-1"></i>
                 Download Image
-            </button>
-        ` : '';
-        
+            </button>` : '';
+
         const resultHTML = `
             <div class="col-12 mb-5">
                 <div class="card shadow-lg border-0">
@@ -140,8 +129,6 @@ class InkBoard {
         `;
 
         resultsSection.innerHTML = resultHTML;
-        
-        // Smooth scroll to results
         resultsSection.scrollIntoView({ behavior: 'smooth' });
     }
 
@@ -149,11 +136,10 @@ class InkBoard {
         try {
             const response = await fetch('/get_creations');
             const data = await response.json();
-            
             const galleryGrid = document.getElementById('gallery-grid');
-            
+
             if (data.creations && data.creations.length > 0) {
-                const galleryHTML = data.creations.map(creation => this.createGalleryItem(creation)).join('');
+                const galleryHTML = data.creations.map(c => this.createGalleryItem(c)).join('');
                 galleryGrid.innerHTML = galleryHTML;
             } else {
                 galleryGrid.innerHTML = `
@@ -161,8 +147,7 @@ class InkBoard {
                         <i class="fas fa-palette fa-3x text-muted mb-3"></i>
                         <h5 class="text-muted">No creations yet</h5>
                         <p class="text-muted">Start by describing a scene above!</p>
-                    </div>
-                `;
+                    </div>`;
             }
         } catch (error) {
             console.error('Error loading gallery:', error);
@@ -170,8 +155,8 @@ class InkBoard {
     }
 
     createGalleryItem(creation) {
-        const journalEntry = creation.journal_entry ? 
-            `<div class="journal-entry">
+        const journalEntry = creation.journal_entry ? `
+            <div class="journal-entry">
                 <small class="text-muted">
                     <i class="fas fa-journal-whills me-1"></i>
                     Journal Entry:
@@ -179,11 +164,9 @@ class InkBoard {
                 <p class="mb-0 mt-1">${creation.journal_entry}</p>
             </div>` : '';
 
-        // Only include image section if image exists
         const imageSection = creation.image_url ? 
             `<img src="${creation.image_url}" alt="Scene: ${creation.scene_idea}" loading="lazy">` : '';
-        
-        // Only include download button if image exists
+
         const downloadButton = creation.image_url ? 
             `<button class="btn btn-outline-success btn-sm" onclick="inkBoard.downloadImage('${creation.image_url}')">
                 <i class="fas fa-download me-1"></i>
@@ -210,14 +193,13 @@ class InkBoard {
                         ${downloadButton}
                     </div>
                 </div>
-            </div>
-        `;
+            </div>`;
     }
 
     openJournal(creationId, existingText = '') {
         this.currentCreationId = creationId;
         document.getElementById('journal-text').value = existingText;
-        
+
         const modal = new bootstrap.Modal(document.getElementById('journalModal'));
         modal.show();
     }
@@ -231,251 +213,65 @@ class InkBoard {
         const journalText = document.getElementById('journal-text').value.trim();
 
         try {
-            const response = await fetch('/save_journal', {
+            const res = await fetch('/save_journal', {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
+                headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({
                     creation_id: this.currentCreationId,
                     journal_entry: journalText
                 })
             });
 
-            const data = await response.json();
+            const data = await res.json();
 
             if (data.success) {
-                this.showAlert('Journal entry saved!', 'success');
-                this.loadGallery(); // Refresh gallery
-                
-                // Close modal
+                this.showAlert('Journal saved successfully!', 'success');
+                this.loadGallery();
                 const modal = bootstrap.Modal.getInstance(document.getElementById('journalModal'));
                 modal.hide();
             } else {
-                this.showAlert(data.error || 'Failed to save journal', 'danger');
+                this.showAlert('Failed to save journal.', 'danger');
             }
-
         } catch (error) {
             console.error('Error saving journal:', error);
-            this.showAlert('Network error. Please try again.', 'danger');
+            this.showAlert('Network error.', 'danger');
         }
     }
 
-    downloadImage(imageUrl) {
-        // Create a temporary link element to trigger download
-        const link = document.createElement('a');
-        link.href = imageUrl;
-        link.download = `inkboard-creation-${Date.now()}.png`;
-        link.target = '_blank';
-        
-        // Trigger download
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-        
-        this.showAlert('Image download started!', 'success');
+    downloadImage(url) {
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'inkboard-image.png';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
     }
 
-    showLoading(show) {
-        const loadingSection = document.getElementById('loading-section');
-        const resultsSection = document.getElementById('results-section');
-        
-        if (show) {
-            loadingSection.classList.remove('d-none');
-            resultsSection.innerHTML = ''; // Clear previous results
-        } else {
-            loadingSection.classList.add('d-none');
-        }
-    }
-
-    setButtonLoading(loading) {
-        const btn = document.getElementById('generate-btn');
-        const btnText = btn.querySelector('.btn-text');
-        const spinner = btn.querySelector('.spinner-border');
-        
-        if (loading) {
-            btn.classList.add('loading');
-            btn.disabled = true;
-            btnText.classList.add('d-none');
-            spinner.classList.remove('d-none');
-        } else {
-            btn.classList.remove('loading');
-            btn.disabled = false;
-            btnText.classList.remove('d-none');
-            spinner.classList.add('d-none');
-        }
+    showAlert(message, type = 'info') {
+        const alertBox = document.getElementById('alert-box');
+        alertBox.innerHTML = `
+            <div class="alert alert-${type} alert-dismissible fade show" role="alert">
+                ${message}
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+            </div>`;
     }
 
-    showAlert(message, type) {
-        // Remove existing alerts
-        const existingAlert = document.querySelector('.alert');
-        if (existingAlert) {
-            existingAlert.remove();
-        }
-
-        // Create new alert
-        const alert = document.createElement('div');
-        alert.className = `alert alert-${type} alert-dismissible fade show`;
-        alert.innerHTML = `
-            ${message}
-            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
-        `;
-
-        // Insert at the top of the main container
-        const main = document.querySelector('main');
-        main.insertBefore(alert, main.firstChild);
-
-        // Auto-dismiss after 5 seconds
-        setTimeout(() => {
-            if (alert.parentNode) {
-                alert.remove();
-            }
-        }, 5000);
+    showLoading(state) {
+        const loader = document.getElementById('loading-spinner');
+        loader.style.display = state ? 'block' : 'none';
     }
 
-    showSection(sectionName) {
-        // Hide all sections
-        document.querySelectorAll('.dashboard-section').forEach(section => {
-            section.classList.add('d-none');
-        });
-
-        // Remove active class from all nav buttons
-        document.querySelectorAll('.btn-nav').forEach(btn => {
-            btn.classList.remove('active');
-        });
-
-        // Show selected section
-        const targetSection = document.getElementById(`${sectionName}-section`);
-        if (targetSection) {
-            targetSection.classList.remove('d-none');
-        }
-
-        // Add active class to the correct button
-        const buttonSelectors = {
-            'create': 'Create Story',
-            'gallery': 'Gallery', 
-            'journal': 'Journal'
-        };
-        
-        document.querySelectorAll('.btn-nav').forEach(btn => {
-            if (btn.textContent.trim().includes(buttonSelectors[sectionName])) {
-                btn.classList.add('active');
-            }
-        });
-
-        // Update current section
-        this.currentSection = sectionName;
-
-        // Load content based on section
-        if (sectionName === 'gallery') {
-            this.loadGallery();
-        } else if (sectionName === 'journal') {
-            this.loadJournalEntries();
-        }
-    }
-
-    async loadJournalEntries() {
-        try {
-            const response = await fetch('/get_creations');
-            const data = await response.json();
-            
-            const journalContainer = document.getElementById('journal-entries');
-            
-            // Filter creations that have journal entries
-            const entriesWithJournal = data.creations?.filter(creation => creation.journal_entry) || [];
-            
-            if (entriesWithJournal.length > 0) {
-                const journalHTML = entriesWithJournal.map(creation => this.createJournalEntry(creation)).join('');
-                journalContainer.innerHTML = journalHTML;
-            } else {
-                journalContainer.innerHTML = `
-                    <div class="col-12 text-center py-5">
-                        <i class="fas fa-journal-whills fa-3x text-muted mb-3"></i>
-                        <h5 class="text-muted">No journal entries yet</h5>
-                        <p class="text-muted">Create a story and add journal entries to see them here!</p>
-                    </div>
-                `;
-            }
-        } catch (error) {
-            console.error('Error loading journal entries:', error);
-        }
-    }
-
-    createJournalEntry(creation) {
-        const date = new Date().toLocaleDateString();
-        return `
-            <div class="col-lg-6 col-xl-4 mb-4">
-                <div class="card journal-card">
-                    <div class="card-body">
-                        <div class="journal-meta mb-2">
-                            <small class="text-muted">
-                                <i class="fas fa-calendar me-1"></i>
-                                ${date}
-                            </small>
-                        </div>
-                        <h6 class="card-title">
-                            <i class="fas fa-quote-left me-1"></i>
-                            ${creation.scene_idea}
-                        </h6>
-                        <div class="journal-entry-preview mb-3">
-                            <p class="card-text">${creation.journal_entry}</p>
-                        </div>
-                        <div class="d-flex justify-content-between align-items-center">
-                            <button class="btn btn-sm btn-outline-primary" onclick="inkBoard.openJournal('${creation.id}', '${creation.journal_entry}')">
-                                <i class="fas fa-edit me-1"></i>
-                                Edit
-                            </button>
-                            <button class="btn btn-sm btn-outline-secondary" onclick="inkBoard.viewFullStory('${creation.id}')">
-                                <i class="fas fa-eye me-1"></i>
-                                View Story
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        `;
+    setButtonLoading(loading) {
+        const button = document.getElementById('generate-btn');
+        button.disabled = loading;
+        button.innerHTML = loading ? `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Generating...` : `Generate`;
     }
 
-    viewFullStory(creationId) {
-        // Switch to gallery and highlight the specific creation
-        this.showSection('gallery');
-        // You could add highlighting logic here
+    showSection(section) {
+        this.currentSection = section;
+        // Add logic here if needed for tab switching
     }
 }
 
-// Initialize the application
-const inkBoard = new InkBoard();
-
-// Additional utility functions
-document.addEventListener('DOMContentLoaded', function() {
-    // Add smooth scrolling for all anchor links
-    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-        anchor.addEventListener('click', function (e) {
-            e.preventDefault();
-            document.querySelector(this.getAttribute('href')).scrollIntoView({
-                behavior: 'smooth'
-            });
-        });
-    });
-
-    // Add loading animation to images
-    document.addEventListener('load', function(e) {
-        if (e.target.tagName === 'IMG') {
-            e.target.style.opacity = '0';
-            e.target.style.transition = 'opacity 0.3s ease';
-            setTimeout(() => {
-                e.target.style.opacity = '1';
-            }, 100);
-        }
-    }, true);
-});
-
-// Handle window resize for masonry grid
-window.addEventListener('resize', function() {
-    // Trigger reflow for masonry grid
-    const grid = document.getElementById('gallery-grid');
-    if (grid) {
-        grid.style.columnCount = '';
-        grid.offsetHeight; // Force reflow
-    }
-});
+// Initialize
+const inkBoard = new InkBoard();