understand the app, resolve any possibly errors, and following the same logic, rewrite the code from scratch, so that the application becomes better and understandable to the user, using the same apis for generated text and images: <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Comic Strip Creator</title>
    <style>
        :root {
            --primary: #2c3e50;
            --secondary: #3498db;
            --accent: #e74c3e;
            --light: #ecf0f1;
            --dark: #34495e;
        }

        body {
            font-family: 'Comic Sans MS', cursive, sans-serif;
            margin: 0;
            padding: 20px;
            background: var(--light);
            box-sizing: border-box;
        }

        .container {
            max-width: 1600px; /* Increased max-width for larger panels */
            margin: 0 auto;
        }

        .header {
            text-align: center;
            color: var(--primary);
            padding: 20px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .comic-workspace {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-top: 20px;
        }

        .controls {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .controls h2 {
            margin-top: 0;
            color: var(--secondary);
        }

        .section {
            margin-bottom: 20px;
        }

        .section h3 {
            margin-bottom: 10px;
            color: var(--dark);
        }

        select, input, textarea {
            width: 100%;
            padding: 10px;
            margin: 5px 0 15px 0;
            border: 1px solid var(--primary);
            border-radius: 5px;
            box-sizing: border-box;
        }

        button {
            background: var(--secondary);
            color: white;
            border: none;
            padding: 15px 30px; /* Increased padding for larger buttons */
            border-radius: 5px;
            cursor: pointer;
            margin: 10px 5px;
            transition: transform 0.2s, background 0.2s;
            font-size: 18px; /* Larger font size */
        }

        button:hover {
            transform: scale(1.05);
            background: #2980b9;
        }

        button:disabled {
            background: #95a5a6;
            cursor: not-allowed;
            transform: none;
        }

        .comic-preview {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            min-height: 1200px; /* Increased height for larger panels */
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 40px; /* Increased gap for better visibility */
            width: 100%;
            position: relative;
        }

        .combined-panel {
            width: 100%;
            aspect-ratio: 1.5; /* Wider aspect ratio */
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .panel-container {
            position: relative;
            width: 100%;
            min-height: 1200px; /* Increased height */
            background: var(--light);
            border-radius: 10px;
            padding: 20px;
            box-sizing: border-box;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 20px;
        }

        .comic-panel {
            background: white;
            border: 2px solid var(--primary);
            border-radius: 5px;
            overflow: hidden;
            transition: transform 0.2s;
            position: relative;
            height: 500px; /* Increased height for larger images */
        }

        .comic-panel img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .comic-panel .loading-spinner {
            border: 3px solid #f3f3f3;
            border-top: 3px solid var(--secondary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        .speech-bubble {
            position: absolute;
            background: white;
            border: 2px solid var(--primary);
            border-radius: 20px;
            padding: 10px;
            cursor: move;
            min-width: 120px;
            max-width: 250px;
            box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
            user-select: none;
            font-size: 16px;
        }

        .speech-bubble.char1-bubble {
            background: #ffebee;
        }

        .speech-bubble.char2-bubble {
            background: #e3f2fd;
        }

        .speech-bubble:hover .edit-bubble {
            display: block;
        }

        .edit-bubble {
            display: none;
            position: absolute;
            top: 5px;
            right: 5px;
            background: rgba(0,0,0,0.1);
            border-radius: 50%;
            padding: 2px 6px;
            cursor: pointer;
            font-size: 14px; /* Increased font size */
            color: var(--primary);
        }

        .loading {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
            z-index: 1000;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .loading-spinner {
            width: 80px; /* Increased size */
            height: 80px; /* Increased size */
            border: 8px solid var(--light);
            border-top: 8px solid var(--secondary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @media (max-width: 1200px) {
            .comic-preview {
                grid-template-columns: 1fr;
                grid-template-rows: repeat(4, 1fr);
                min-height: 2400px; /* Adjusted height for single column */
            }

            .panel-container {
                grid-template-columns: 1fr;
            }

            .comic-panel {
                height: 800px; /* Adjusted height for smaller screens */
            }
        }

        /* Optional: Styling for the story section */
        .comic-story {
            grid-column: 1 / -1;
            background: #ecf0f1;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            position: relative;
        }

        .comic-story h3 {
            margin-top: 0;
            color: var(--dark);
        }

        .editable-story {
            background: #fff;
            border: 1px solid var(--primary);
            padding: 10px;
            border-radius: 5px;
            min-height: 150px;
            font-size: 16px;
            resize: vertical;
            overflow: auto;
        }

        /* Button to save edited story */
        .save-story-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: var(--accent);
            padding: 5px 10px;
            font-size: 14px;
            border-radius: 5px;
            cursor: pointer;
            color: white;
            display: none;
        }

        .editable-story:focus + .save-story-btn,
        .save-story-btn:hover {
            display: inline-block;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Elements
            const characterPresets = document.getElementById('characterPresets');
            const generateStoryBtn = document.getElementById('generateStoryBtn');
            const generateImageBtn = document.getElementById('generateImageBtn');
            const generateDialogueBtn = document.getElementById('generateDialogueBtn');
            const saveStoryBtn = document.getElementById('saveStoryBtn');
            const loading = document.getElementById('loading');
            const comicPreview = document.getElementById('comicPreview');

            // Preset Data
            const characterData = {
                'superheroes': {
                    char1Name: 'Captain Thunder',
                    char1Desc: 'A confident superhero with electric powers, wears a blue and gold costume',
                    char2Name: 'Dr. Shadow',
                    char2Desc: 'A mysterious anti-hero with dark matter powers, wears a black cloak',
                    storyOutline: "A new superhero learns to control their powers with help from a mentor, but things go hilariously wrong during training.",
                    sceneDescription: "A superhero flying through a cityscape at sunset"
                },
                'wizards': {
                    char1Name: 'Merlin Jr.',
                    char1Desc: 'A young wizard apprentice with wild red hair and star-covered robes',
                    char2Name: 'Professor Spellbound',
                    char2Desc: 'An elderly wizard teacher with a long silver beard and crystal spectacles',
                    storyOutline: "A young wizard attempts their first major spell in class, but accidentally turns their teacher into a talking teapot.",
                    sceneDescription: "A wizard's spell going hilariously wrong in a magical classroom"
                },
                'robots': {
                    char1Name: 'B33P',
                    char1Desc: 'A curious little robot with expressive LED eyes and retractable arms',
                    char2Name: 'Professor Jones',
                    char2Desc: 'A brilliant roboticist with messy hair and a lab coat',
                    storyOutline: "A newly activated robot explores the world for the first time with their inventor, discovering the joy and confusion of human customs.",
                    sceneDescription: "A robot learning to ride a bicycle in the park"
                }
            };

            // Event Listeners
            characterPresets.addEventListener('change', () => {
                const preset = characterPresets.value;
                if (characterData[preset]) {
                    document.getElementById('char1Name').value = characterData[preset].char1Name;
                    document.getElementById('char1Description').value = characterData[preset].char1Desc;
                    document.getElementById('char2Name').value = characterData[preset].char2Name;
                    document.getElementById('char2Description').value = characterData[preset].char2Desc;
                    document.getElementById('storyOutline').value = characterData[preset].storyOutline;
                    document.getElementById('sceneDescription').value = characterData[preset].sceneDescription;
                } else {
                    document.getElementById('char1Name').value = '';
                    document.getElementById('char1Description').value = '';
                    document.getElementById('char2Name').value = '';
                    document.getElementById('char2Description').value = '';
                    document.getElementById('storyOutline').value = '';
                    document.getElementById('sceneDescription').value = '';
                }
            });

            generateStoryBtn.addEventListener('click', generateStoryScene);
            generateImageBtn.addEventListener('click', generateImages);
            generateDialogueBtn.addEventListener('click', generateDialogues);

            // Function to handle saving edited story
            function saveEditedStory() {
                const editableStory = document.querySelector('.editable-story');
                const storyContent = editableStory.innerHTML.trim();
                if (storyContent === '') {
                    alert('Story cannot be empty.');
                    return;
                }
                // Update the background story or any necessary variables here
                alert('Story saved successfully!');
                // Optionally, you can trigger updates to image prompts or dialogues here
            }

            // Event Listener for Save Story Button
            // In this revised version, we'll handle saving the story via the save button in the story section
            // Hence, no separate event listener is needed here unless dynamic behaviors are required

            // Loading Indicator Functions
            function showLoading() {
                loading.style.display = 'block';
            }

            function hideLoading() {
                loading.style.display = 'none';
            }

            // Generate Story Scene Function
            async function generateStoryScene() {
                const char1Name = document.getElementById('char1Name').value.trim();
                const char1Desc = document.getElementById('char1Description').value.trim();
                const char2Name = document.getElementById('char2Name').value.trim();
                const char2Desc = document.getElementById('char2Description').value.trim();
                const storyOutline = document.getElementById('storyOutline').value.trim();
                const sceneDescription = document.getElementById('sceneDescription').value.trim();

                if (!char1Name || !char2Name || !storyOutline || !sceneDescription) {
                    alert('Please fill in all required fields.');
                    return;
                }

                generateStoryBtn.disabled = true;
                showLoading();

                try {
                    // Construct the prompt for the story generation
                    const prompt = `Generate a short story based on the following details:\nCharacters:\n1. ${char1Name}: ${char1Desc}\n2. ${char2Name}: ${char2Desc}\nStory Outline: ${storyOutline}\nScene Description: ${sceneDescription}\n\nProvide a coherent narrative that unfolds across four panels.`;

                    // Make POST request to text.pollinations.ai with the specified parameters
                    const response = await fetch('https://text.pollinations.ai/', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            messages: [
                                { role: 'system', content: 'You are a creative storyteller.' },
                                { role: 'user', content: prompt }
                            ],
                            model: 'openai', // You can switch to 'mistral' if desired
                            seed: 42,
                            jsonMode: true
                        })
                    });

                    if (!response.ok) {
                        throw new Error('Failed to generate story.');
                    }

                    const data = await response.json();
                    const story = data.choices && data.choices[0] && data.choices[0].message && data.choices[0].message.content
                        ? data.choices[0].message.content
                        : 'A mysterious story unfolds...';

                    // Display Story in Editable Preview
                    comicPreview.innerHTML = `
                        <div class="comic-story">
                            <h3>Story Scene</h3>
                            <div contenteditable="true" class="editable-story">${story.replace(/\n/g, '<br>')}</div>
                            <button class="save-story-btn" id="saveStoryBtn">Save Story</button>
                        </div>`;

                    // Add Event Listener for Save Story Button
                    document.getElementById('saveStoryBtn').addEventListener('click', () => {
                        const editableStory = document.querySelector('.editable-story');
                        const storyContent = editableStory.innerText.trim();
                        if (storyContent === '') {
                            alert('Story cannot be empty.');
                            return;
                        }
                        // Update the story outline textarea with edited content
                        document.getElementById('storyOutline').value = storyContent;
                        alert('Story saved successfully! You can now generate images and dialogues based on the updated story.');
                        // Optionally, enable image and dialogue generation here
                    });

                    // Show Generate Image Button
                    generateImageBtn.style.display = 'inline-block';
                } catch (error) {
                    console.error('Story generation error:', error);
                    alert('Error generating story. Please try again.');

                    // Provide a fallback story instead of showing error
                    const fallbackStory = `In a delightful turn of events, ${char1Name} and ${char2Name} find themselves in ${sceneDescription}. 
Following the outline of "${storyOutline}", their adventure unfolds across four memorable scenes:

Panel 1: ${char1Name} (${char1Desc}) initiates the action.
Panel 2: ${char2Name} (${char2Desc}) responds with unexpected flair.
Panel 3: The situation intensifies as both characters interact.
Panel 4: A satisfying resolution brings their story to a close.`;

                    comicPreview.innerHTML = `
                        <div class="comic-story">
                            <h3>Story Scene</h3>
                            <div contenteditable="true" class="editable-story">${fallbackStory.replace(/\n/g, '<br>')}</div>
                            <button class="save-story-btn" id="saveStoryBtnFallback">Save Story</button>
                            <small>(Using fallback story due to API unavailability)</small>
                        </div>`;

                    // Add Event Listener for Save Story Button
                    document.getElementById('saveStoryBtnFallback').addEventListener('click', () => {
                        const editableStory = document.querySelector('.editable-story');
                        const storyContent = editableStory.innerText.trim();
                        if (storyContent === '') {
                            alert('Story cannot be empty.');
                            return;
                        }
                        // Update the story outline textarea with edited content
                        document.getElementById('storyOutline').value = storyContent;
                        alert('Story saved successfully! You can now generate images and dialogues based on the updated story.');
                    });

                    // Show Generate Image Button
                    generateImageBtn.style.display = 'inline-block';
                } finally {
                    hideLoading();
                    generateStoryBtn.disabled = false;
                }
            }

            // Generate Images Function
            async function generateImages() {
                const char1Name = document.getElementById('char1Name').value.trim();
                const char1Desc = document.getElementById('char1Description').value.trim();
                const char2Name = document.getElementById('char2Name').value.trim();
                const char2Desc = document.getElementById('char2Description').value.trim();
                const storyOutline = document.getElementById('storyOutline').value.trim();
                const sceneDescription = document.getElementById('sceneDescription').value.trim();
                const style = document.getElementById('artStyle').value;

                if (!storyOutline) {
                    alert('Please generate and save a story before generating images.');
                    return;
                }

                showLoading();
                generateImageBtn.disabled = true;

                try {
                    const width = 2048; // Increased width for larger images
                    const height = 1536; // Increased height for larger images

                    // Create a panel container with larger aspect ratio
                    comicPreview.innerHTML = '<div class="combined-panel"></div>';
                    const combinedPanel = comicPreview.querySelector('.combined-panel');

                    // Generate one large image with 4 panels
                    const imagePrompt = `${style} style comic strip divided into 4 large panels: 
Panel 1: Beginning - ${storyOutline}
Panel 2: Development
Panel 3: Climax
Panel 4: Resolution`;

                    const imageUrl = `https://image.pollinations.ai/prompt/${encodeURIComponent(imagePrompt)}?width=${width}&height=${height}&model=default&seed=${Math.floor(Math.random() * 100000)}&nologo=true`;

                    // Create image with cross-origin attributes
                    const img = new Image();
                    img.crossOrigin = "anonymous"; // To avoid CORS issues
                    img.src = imageUrl;
                    img.alt = "Comic strip with 4 panels";

                    // Add error handling
                    img.onerror = (error) => {
                        console.error('Image loading error:', error);
                        hideLoading();
                        generateImageBtn.disabled = false;
                        alert('Error loading the image. Please try again.');
                    };

                    img.onload = () => {
                        try {
                            splitImageIntoPanels(img);
                        } catch (error) {
                            console.error('Error splitting image:', error);
                            hideLoading();
                            generateImageBtn.disabled = false;
                            alert('Error processing the image. Please try again.');
                        }
                    };

                } catch (error) {
                    console.error('Image generation error:', error);
                    alert('Error generating images. Please try again.');
                    hideLoading();
                    generateImageBtn.disabled = false;
                }
            }

            // Function to split image into draggable panels
            function splitImageIntoPanels(sourceImg) {
                try {
                    const panelContainer = document.createElement('div');
                    panelContainer.className = 'panel-container';

                    // Create 4 canvas elements for the split panels
                    for(let i = 0; i < 4; i++) {
                        const canvas = document.createElement('canvas');
                        const ctx = canvas.getContext('2d');
                        
                        // Set specific dimensions
                        canvas.width = sourceImg.width / 2;
                        canvas.height = sourceImg.height / 2;

                        // Calculate source coordinates
                        const sx = (i % 2) * canvas.width;
                        const sy = Math.floor(i / 2) * canvas.height;

                        try {
                            // Draw portion of original image
                            ctx.drawImage(sourceImg, 
                                sx, sy, canvas.width, canvas.height,
                                0, 0, canvas.width, canvas.height
                            );

                            // Create panel div
                            const panel = document.createElement('div');
                            panel.className = 'comic-panel';
                            panel.style.cursor = 'move';
                            
                            // Create and add image
                            const panelImg = document.createElement('img');
                            panelImg.src = canvas.toDataURL('image/png');
                            panelImg.alt = `Panel ${i + 1}`;
                            panel.appendChild(panelImg);

                            // Make panel draggable
                            makePanelDraggable(panel);
                            panelContainer.appendChild(panel);
                        } catch (err) {
                            console.error('Error processing panel:', err);
                            continue;
                        }
                    }

                    comicPreview.innerHTML = '';
                    comicPreview.appendChild(panelContainer);
                    
                    // Show generate dialogue button after panels are created
                    const generateDialogueBtn = document.getElementById('generateDialogueBtn');
                    if (generateDialogueBtn) {
                        generateDialogueBtn.style.display = 'inline-block';
                    }

                } catch (error) {
                    console.error('Error in splitImageIntoPanels:', error);
                    throw error;
                } finally {
                    hideLoading();
                }
            }

            // Function to make a panel draggable
            function makePanelDraggable(panel) {
                panel.addEventListener('mousedown', (e) => {
                    e.preventDefault();
                    let shiftX = e.clientX - panel.getBoundingClientRect().left;
                    let shiftY = e.clientY - panel.getBoundingClientRect().top;

                function moveAt(pageX, pageY) {
                    panel.style.position = 'absolute';
                    panel.style.zIndex = 1000;
                    panel.style.left = pageX - shiftX + 'px';
                    panel.style.top = pageY - shiftY + 'px';
                }

                function onMouseMove(e) {
                    moveAt(e.pageX, e.pageY);
                }

                document.addEventListener('mousemove', onMouseMove);

                panel.onmouseup = function() {
                    document.removeEventListener('mousemove', onMouseMove);
                    panel.onmouseup = null;
                };
                });

                panel.ondragstart = function() {
                    return false;
                };
            }

            // Generate Dialogues Function
            async function generateDialogues() {
                const panels = document.querySelectorAll('.comic-panel');
                const char1Name = document.getElementById('char1Name').value.trim();
                const char2Name = document.getElementById('char2Name').value.trim();
                const storyOutline = document.getElementById('storyOutline').value.trim();

                if (!storyOutline) {
                    alert('Please generate and save a story before generating dialogues.');
                    return;
                }

                showLoading();
                generateDialogueBtn.disabled = true;

                try {
                    // Generate dialogues using AI
                    const dialogues = await generatePanelDialogues();
                    
                    panels.forEach((panel, index) => {
                        if (dialogues[index]) {
                            const bubble = createDialogueBubble(dialogues[index], index);
                            panel.appendChild(bubble);
                        }
                    });

                } catch (error) {
                    console.error('Dialogue generation error:', error);
                    alert('Error generating dialogues. Please try again.');
                } finally {
                    hideLoading();
                    generateDialogueBtn.disabled = false;
                }
            }

            async function generatePanelDialogues() {
                const char1Name = document.getElementById('char1Name').value.trim();
                const char2Name = document.getElementById('char2Name').value.trim();
                const storyOutline = document.getElementById('storyOutline').value.trim();

                // Use the edited or generated story for prompts
                const prompt = `Based on the following story, generate a short dialogue for each of the four panels in the comic strip between ${char1Name} and ${char2Name}.\n\nStory:\n${storyOutline}`;

                const response = await fetch('https://text.pollinations.ai/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        messages: [
                            { role: 'system', content: 'You are a creative dialogue generator for comic strips.' },
                            { role: 'user', content: prompt }
                        ],
                        model: 'openai',
                        seed: Math.floor(Math.random() * 100000),
                        jsonMode: true
                    })
                });

                if (!response.ok) {
                    throw new Error('Failed to generate dialogues.');
                }

                const data = await response.json();
                const dialogue = data.choices && data.choices[0] && data.choices[0].message && data.choices[0].message.content
                    ? data.choices[0].message.content
                    : '';

                return dialogue.split('\n').map(line => line.trim()).filter(line => line.length > 0).slice(0, 4);
            }

            // Function to create dialogue bubble
            function createDialogueBubble(text, index) {
                const bubble = document.createElement('div');
                bubble.className = `speech-bubble char${(index % 2) + 1}-bubble`;
                bubble.textContent = text;

                // Optional: Add an edit button inside the bubble
                const editBtn = document.createElement('span');
                editBtn.className = 'edit-bubble';
                editBtn.textContent = '✎';
                bubble.appendChild(editBtn);

                // Make bubble editable on double-click
                bubble.addEventListener('dblclick', () => {
                    const isEditing = bubble.getAttribute('contenteditable') === 'true';
                    if (isEditing) {
                        bubble.setAttribute('contenteditable', 'false');
                        editBtn.style.display = 'none';
                    } else {
                        bubble.setAttribute('contenteditable', 'true');
                        bubble.focus();
                        editBtn.style.display = 'block';
                    }
                });

                // Save edited dialogue on blur
                bubble.addEventListener('blur', () => {
                    bubble.setAttribute('contenteditable', 'false');
                    editBtn.style.display = 'none';
                });

                // Make bubble draggable
                makeBubbleDraggable(bubble);

                return bubble;
            }

            // Function to make a bubble draggable
            function makeBubbleDraggable(bubble) {
                let pos = { x: 0, y: 0 };

                bubble.addEventListener('mousedown', (e) => {
                    e.preventDefault();
                    pos = {
                        x: e.clientX - bubble.offsetLeft,
                        y: e.clientY - bubble.offsetTop
                    };

                    document.addEventListener('mousemove', drag);
                    document.addEventListener('mouseup', dragEnd);
                });

                function drag(e) {
                    bubble.style.position = 'absolute';
                    bubble.style.left = (e.clientX - pos.x) + 'px';
                    bubble.style.top = (e.clientY - pos.y) + 'px';
                }

                function dragEnd() {
                    document.removeEventListener('mousemove', drag);
                    document.removeEventListener('mouseup', dragEnd);
                }
            }

            // Initialize
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Comic Strip Creator</h1>
            <p>Create your own comic strips with AI-powered assistance!</p>
        </div>

        <div class="comic-workspace">
            <div class="controls">
                <h2>Setup Your Comic</h2>
                
                <!-- Character Controls -->
                <div class="section character-controls">
                    <h3>Characters</h3>
                    <select id="characterPresets">
                        <option value="">Select character preset...</option>
                        <option value="superheroes">Superhero Story</option>
                        <option value="wizards">Wizard Academy</option>
                        <option value="robots">Robot & Inventor</option>
                    </select>
                    
                    <div>
                        <h4>Character 1</h4>
                        <input type="text" id="char1Name" placeholder="Character name">
                        <textarea id="char1Description" placeholder="Describe character's appearance and personality..." rows="3"></textarea>
                    </div>
                    
                    <div>
                        <h4>Character 2</h4>
                        <input type="text" id="char2Name" placeholder="Character name">
                        <textarea id="char2Description" placeholder="Describe character's appearance and personality..." rows="3"></textarea>
                    </div>
                </div>

                <!-- Story Outline Input -->
                <div class="section story-controls">
                    <h3>Story Outline</h3>
                    <textarea id="storyOutline" placeholder="Write a brief outline of your story..." rows="4"></textarea>
                </div>

                <!-- Scene Controls -->
                <div class="section scene-controls">
                    <h3>Scene Description</h3>
                    <textarea id="sceneDescription" placeholder="Describe your scene..." rows="4"></textarea>
                </div>

                <!-- Art Style Selection -->
                <div class="section style-controls">
                    <h3>Art Style Selection</h3>
                    <select id="artStyle">
                        <option value="manga">Manga</option>
                        <option value="western">Western Comic</option>
                        <option value="cartoon">Cartoon</option>
                        <option value="realistic">Realistic</option>
                    </select>
                </div>

                <!-- Action Buttons -->
                <button id="generateStoryBtn">Generate Story Scene</button>
                <button id="generateImageBtn" style="display: none;">Generate Image Panels</button>
                <button id="generateDialogueBtn" style="display: none;">Generate Dialogues</button>
            </div>

            <!-- Comic Preview Area -->
            <div class="comic-preview" id="comicPreview">
                <!-- Dynamic content will be inserted here -->
            </div>
        </div>
    </div>

    <!-- Loading Spinner -->
    <div class="loading" id="loading">
        <div class="loading-spinner"></div>
    </div>
</body>
</html>