i want to create an app with this code. Can you understand from the code what I want from this application and help me do it? html><head><base href="https://pollinations.ai"><!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;
        }

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

        .container {
            max-width: 1200px;
            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);
            width: 100%;
        }

        .character-input {
            margin-bottom: 20px;
            padding: 10px;
            background: var(--light);
            border-radius: 5px;
        }

        .comic-preview {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            min-height: 800px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: 20px;
            width: 100%;
        }

        .comic-panel {
            border: 2px solid var(--primary);
            margin: 0;  
            padding: 10px;
            min-height: 350px;
            position: relative;
            background: white;
        }

        .speech-bubble {
            background: white;
            border: 2px solid var(--primary);
            border-radius: 20px;
            padding: 10px;
            margin: 10px;
            position: relative;
            cursor: move;
            min-width: 100px;
            max-width: 200px;
        }

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

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

        .speech-bubble-text {
            min-height: 20px;
        }

        .edit-bubble {
            display: none;
            position: absolute;
            right: 5px;
            top: 5px;
            cursor: pointer;
            font-size: 12px;
            color: var(--primary);
        }

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

        button {
            background: var(--secondary);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
            transition: transform 0.2s;
        }

        button:hover {
            transform: scale(1.05);
        }

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

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

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

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

        .preview-controls {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: center;
        }

        #actionButtons {
            display: none;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .preview-controls button {
            min-width: 150px;
        }
    </style>
    <script>
        async function generateImageFromAPI(description, style) {
            try {
                const prompt = `${style} style comic panel: ${description}`;
                const encodedPrompt = encodeURIComponent(prompt);
                const imageUrl = `https://image.pollinations.ai/prompt/${encodedPrompt}`;
                
                const panel = document.querySelector('.comic-panel:last-child');
                if (panel) {
                    const img = document.createElement('img');
                    img.src = imageUrl;
                    img.alt = `Comic panel in ${style} style showing ${description}`;
                    img.style.maxWidth = '100%';
                    panel.appendChild(img);
                }
                
                return imageUrl;
            } catch (error) {
                console.error('Error generating image:', error);
                return `Generated image for: ${description} in style: ${style}`;
            }
        }

        async function generateDialogueFromAPI(prompt, characterNum) {
            try {
                const response = await fetch(`https://text.pollinations.ai/${encodeURIComponent(prompt)}`);
                const text = await response.text();
                
                const panel = document.querySelector('.comic-panel:last-child');
                if (panel) {
                    const bubble = document.createElement('div');
                    bubble.className = `speech-bubble char${characterNum}-bubble`;
                    const textDiv = document.createElement('div');
                    textDiv.className = 'speech-bubble-text';
                    textDiv.textContent = text;
                    bubble.appendChild(textDiv);
                    panel.appendChild(bubble);
                    makeBubblesEditable();
                }
                
                return text;
            } catch (error) {
                console.error('Error generating dialogue:', error);
                return `Generated dialogue for: ${prompt}`;
            }
        }

        async function generateDialogue() {
            const prompt = document.getElementById('dialoguePrompt').value;
            const char1Name = document.getElementById('char1Name').value;
            const char2Name = document.getElementById('char2Name').value;

            if (!prompt || !char1Name || !char2Name) {
                alert('Please enter a dialogue prompt and character names');
                return;
            }
            
            showLoading();
            try {
                await generateDialogueFromAPI(`${prompt} by ${char1Name}`, 1);
                await generateDialogueFromAPI(`${prompt} by ${char2Name}`, 2);
            } catch (error) {
                console.error('Error:', error);
                alert('Failed to generate dialogue. Please try again.');
            } finally {
                hideLoading();
            }
        }

        async function generateImage() {
            const char1Name = document.getElementById('char1Name').value;
            const char1Desc = document.getElementById('char1Description').value;
            const char2Name = document.getElementById('char2Name').value;
            const char2Desc = document.getElementById('char2Description').value;
            const storyOutline = document.getElementById('storyOutline').value;
            const style = document.getElementById('artStyle').value;
            
            if (!char1Name || !char2Name || !storyOutline) {
                alert('Please fill in character information and story outline');
                return;
            }
            
            showLoading();
            try {
                document.getElementById('comicPreview').innerHTML = '';
                
                const panelDescriptions = [
                    `${style} style: Scene 1 - Introduction with ${char1Name} (${char1Desc}) and ${char2Name} (${char2Desc}): ${storyOutline}`,
                    `${style} style: Scene 2 - Conflict develops between ${char1Name} and ${char2Name}: ${storyOutline}`,
                    `${style} style: Scene 3 - Rising action with ${char1Name} and ${char2Name}: ${storyOutline}`,
                    `${style} style: Scene 4 - Resolution between ${char1Name} and ${char2Name}: ${storyOutline}`
                ];
                
                for (let i = 0; i < 4; i++) {
                    addPanel();
                    await generateImageFromAPI(panelDescriptions[i], style);
                }
            } catch (error) {
                console.error('Error:', error);
                alert('Failed to generate images. Please try again.');
            } finally {
                hideLoading();
            }
        }

        function generateStoryScene() {
            const char1Name = document.getElementById('char1Name').value;
            const char1Desc = document.getElementById('char1Description').value;
            const char2Name = document.getElementById('char2Name').value;
            const char2Desc = document.getElementById('char2Description').value;
            const storyOutline = document.getElementById('storyOutline').value;

            if (!char1Name || !char2Name || !storyOutline) {
                alert('Please fill in character information and story outline');
                return;
            }

            showLoading();
            try {
                document.getElementById('comicPreview').innerHTML = '';
                
                // Create 4 empty panels
                for (let i = 0; i < 4; i++) {
                    addPanel();
                }

                // Show the action buttons after panels are created
                document.getElementById('actionButtons').style.display = 'flex';
                hideLoading();
            } catch (error) {
                console.error('Error:', error);
                alert('Failed to generate scene. Please try again.');
                hideLoading();
            }
        }

        function makeBubblesEditable() {
            document.querySelectorAll('.speech-bubble').forEach(bubble => {
                // Make bubble draggable
                bubble.addEventListener('mousedown', startDragging);
                
                // Add edit button
                const editBtn = document.createElement('span');
                editBtn.className = 'edit-bubble';
                editBtn.innerHTML = '✎';
                editBtn.onclick = (e) => {
                    e.stopPropagation();
                    const text = bubble.querySelector('.speech-bubble-text');
                    const newText = prompt('Edit dialogue:', text.textContent);
                    if (newText) text.textContent = newText;
                };
                bubble.appendChild(editBtn);
            });
        }

        let isDragging = false;
        let currentBubble = null;
        let offsetX, offsetY;

        function startDragging(e) {
            isDragging = true;
            currentBubble = e.target.closest('.speech-bubble');
            const rect = currentBubble.getBoundingClientRect();
            offsetX = e.clientX - rect.left;
            offsetY = e.clientY - rect.top;
            
            document.addEventListener('mousemove', dragBubble);
            document.addEventListener('mouseup', stopDragging);
        }

        function dragBubble(e) {
            if (!isDragging) return;
            
            const panel = currentBubble.closest('.comic-panel');
            const panelRect = panel.getBoundingClientRect();
            
            const x = e.clientX - panelRect.left - offsetX;
            const y = e.clientY - panelRect.top - offsetY;
            
            currentBubble.style.left = `${x}px`;
            currentBubble.style.top = `${y}px`;
        }

        function stopDragging() {
            isDragging = false;
            document.removeEventListener('mousemove', dragBubble);
            document.removeEventListener('mouseup', stopDragging);
        }

        function saveComic() {
            const panels = document.querySelectorAll('.comic-panel');
            const comicData = Array.from(panels).map(panel => ({
                images: Array.from(panel.querySelectorAll('img')).map(img => img.src),
                dialogues: Array.from(panel.querySelectorAll('.speech-bubble')).map(bubble => bubble.textContent)
            }));
            
            localStorage.setItem('savedComic', JSON.stringify(comicData));
            alert('Comic saved successfully!');
        }

        function loadSavedComic() {
            const savedComic = localStorage.getItem('savedComic');
            if (savedComic) {
                const comicData = JSON.parse(savedComic);
                document.getElementById('comicPreview').innerHTML = '';
                comicData.forEach((panelData, index) => {
                    addPanel();
                    const panel = document.querySelector('.comic-panel:last-child');
                    panelData.images.forEach(imgSrc => {
                        const img = document.createElement('img');
                        img.src = imgSrc;
                        img.alt = `Comic panel ${index + 1}`;
                        img.style.maxWidth = '100%';
                        panel.appendChild(img);
                    });
                    panelData.dialogues.forEach(text => {
                        const bubble = document.createElement('div');
                        bubble.className = 'speech-bubble';
                        bubble.textContent = text;
                        panel.appendChild(bubble);
                    });
                });
            }
        }

        function addPanel() {
            const panelCount = document.querySelectorAll('.comic-panel').length + 1;
            const panel = document.createElement('div');
            panel.className = 'comic-panel';
            panel.innerHTML = `<div class="panel-number">Panel ${panelCount}</div>`;
            document.getElementById('comicPreview').appendChild(panel);
        }

        function showLoading() {
            document.getElementById('loading').style.display = 'block';
        }

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

        function prefillScene() {
            const testScene = document.getElementById('testScenes').value;
            document.getElementById('sceneDescription').value = testScene;
        }

        function prefillDialogue() {
            const testDialogue = document.getElementById('testDialogues').value;
            document.getElementById('dialoguePrompt').value = testDialogue;
        }

        function prefillCharacters(characterSet) {
            switch(characterSet) {
                case 'superheroes':
                    document.getElementById('char1Name').value = 'Captain Thunder';
                    document.getElementById('char1Description').value = 'A confident superhero with electric powers, wears a blue and gold costume';
                    document.getElementById('char2Name').value = 'Dr. Shadow';
                    document.getElementById('char2Description').value = 'A mysterious anti-hero with dark matter powers, wears a black cloak';
                    break;
                case 'wizards':
                    document.getElementById('char1Name').value = 'Merlin Jr.';
                    document.getElementById('char1Description').value = 'A young wizard apprentice with wild red hair and star-covered robes';
                    document.getElementById('char2Name').value = 'Professor Spellbound';
                    document.getElementById('char2Description').value = 'An elderly wizard teacher with a long silver beard and crystal spectacles';
                    break;
                case 'robots':
                    document.getElementById('char1Name').value = 'B33P';
                    document.getElementById('char1Description').value = 'A curious little robot with expressive LED eyes and retractable arms';
                    document.getElementById('char2Name').value = 'Professor Jones';
                    document.getElementById('char2Description').value = 'A brilliant roboticist with messy hair and a lab coat';
                    break;
            }
        }

        function prefillStoryOutline(preset) {
            const outlines = {
                hero: "A new superhero learns to control their powers with help from a mentor, but things go hilariously wrong during training.",
                magic: "A young wizard attempts their first major spell in class, but accidentally turns their teacher into a talking teapot.",
                robot: "A newly activated robot explores the world for the first time with their inventor, discovering the joy and confusion of human customs."
            };
            document.getElementById('storyOutline').value = outlines[preset] || '';
        }

        window.onload = function() {
            loadSavedComic();
            if (document.querySelectorAll('.comic-panel').length === 0) {
                // Only add initial panel if no saved comic is loaded
                addPanel();
            }
        };
    </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>Controls</h2>

                <!-- Character Controls -->
                <div class="character-controls">
                    <h3>Characters</h3>
                    <select id="characterPresets" onchange="prefillCharacters(this.value)">
                        <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 class="character-input">
                        <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 class="character-input">
                        <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="story-controls">
                    <h3>Story Outline</h3>
                    <select id="storyPresets" onchange="prefillStoryOutline(this.value)">
                        <option value="">Select story preset...</option>
                        <option value="hero">Superhero Training Day</option>
                        <option value="magic">Magical Mishap</option>
                        <option value="robot">First Day Alive</option>
                    </select>
                    <textarea id="storyOutline" placeholder="Write a brief outline of your story..." rows="4"></textarea>
                </div>

                <!-- Scene Controls -->
                <div class="scene-controls">
                    <h3>Scene Description</h3>
                    <select id="testScenes" onchange="prefillScene()">
                        <option value="">Select a test scene...</option>
                        <option value="A superhero flying through a cityscape at sunset">Superhero Scene</option>
                        <option value="Two cats having tea in a Victorian parlor">Cats Tea Party</option>
                        <option value="A robot learning to ride a bicycle in the park">Robot Learning</option>
                        <option value="A wizard's spell going hilariously wrong">Wizard Mishap</option>
                    </select>
                    <textarea id="sceneDescription" placeholder="Describe your scene..." rows="4"></textarea>
                    
                    <h3>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>

                    <h3>Dialogue Generation</h3>
                    <select id="testDialogues" onchange="prefillDialogue()">
                        <option value="">Select a test dialogue...</option>
                        <option value="Write a funny conversation between a superhero and a cat">Superhero & Cat</option>
                        <option value="Create a dramatic dialogue between a robot and its inventor">Robot & Inventor</option>
                        <option value="Write a silly exchange between two wizards about a failed spell">Wizard Chat</option>
                        <option value="Generate dialogue for a detective interviewing a suspicious penguin">Detective Scene</option>
                    </select>
                    <input type="text" id="dialoguePrompt" placeholder="Enter dialogue context...">
                </div>
            </div>

            <div class="comic-preview" id="comicPreview"></div>
            <div class="preview-controls" id="previewControls">
                <button onclick="generateStoryScene()">Generate Story Scene</button>
                <div id="actionButtons" style="display: none">
                    <button onclick="generateImage()">Generate Image</button>
                    <button onclick="generateDialogue()">Generate Dialogue</button>
                    <button onclick="addPanel()">Add Panel</button>
                    <button onclick="saveComic()">Save Comic</button>
                </div>
            </div>
        </div>
    </div>

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