what this app doing? <html><head><base href="/" />
<style>
body {
  font-family: Arial, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: #f5f5f5;
}

.input-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.character-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.input-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input, textarea, select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 10px;
}

button {
  background: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background: #45a049;
}

#story-preview {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin: 20px 0;
  min-height: 200px;
  display: none;
}

#comic-container {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin: 20px 0;
  max-width: 1024px;
  margin: 20px auto;
}

.comic-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  background: white;
  padding: 20px;
  border: 2px solid #333;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.comic-panel {
  aspect-ratio: 1;
  border: 2px solid #000;
  overflow: hidden;
  position: relative;
}

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

.panel-number {
  position: absolute;
  top: 5px;
  left: 5px;
  background: rgba(255,255,255,0.8);
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: bold;
  font-size: 12px;
}

.error-message {
  color: #d32f2f;
  background: #ffebee;
  padding: 10px;
  border-radius: 4px;
  margin: 10px 0;
  display: none;
}

.loading {
  display: none;
  text-align: center;
  padding: 20px;
}

.loading:after {
  content: "...";
  animation: dots 1.5s steps(5, end) infinite;
}

@keyframes dots {
  0%, 20% { content: "."; }
  40% { content: ".."; }
  60% { content: "..."; }
  80%, 100% { content: ""; }
}
</style>
</head>
<body>
<div class="input-section">
  <h1>Comic Strip Creator</h1>
  
  <div class="character-inputs">
    <div class="character-1">
      <h2>Character 1</h2>
      <div class="input-group">
        <label for="char1-name">Name:</label>
        <input type="text" id="char1-name" required>
      </div>
      <div class="input-group">
        <label for="char1-description">Description:</label>
        <textarea id="char1-description" rows="4" required></textarea>
      </div>
    </div>
    
    <div class="character-2">
      <h2>Character 2</h2>
      <div class="input-group">
        <label for="char2-name">Name:</label>
        <input type="text" id="char2-name" required>
      </div>
      <div class="input-group">
        <label for="char2-description">Description:</label>
        <textarea id="char2-description" rows="4" required></textarea>
      </div>
    </div>
  </div>

  <div class="input-group">
    <label for="story-outline">Story Outline:</label>
    <textarea id="story-outline" rows="4" required></textarea>
  </div>

  <div class="input-group">
    <label for="scene-description">Scene Description:</label>
    <textarea id="scene-description" rows="4" required></textarea>
  </div>

  <div class="input-group">
    <label for="art-style">Art Style:</label>
    <select id="art-style" required>
      <option value="manga">Manga</option>
      <option value="comic">Comic Book</option>
      <option value="realistic">Realistic</option>
      <option value="cartoon">Cartoon</option>
      <option value="watercolor">Watercolor</option>
    </select>
  </div>

  <div id="error-message" class="error-message"></div>
  <div id="loading" class="loading">Generating story</div>
  <button id="generate-story">Generate Story</button>
</div>

<div id="story-preview"></div>
<button id="generate-panels" style="display: none;">Generate Comic Panels</button>
<div id="comic-container">
  <div id="comic-grid" class="comic-grid"></div>
</div>

<script>
async function validateInputs() {
  const requiredFields = [
    { id: 'char1-name', label: 'Character 1 Name' },
    { id: 'char1-description', label: 'Character 1 Description' },
    { id: 'char2-name', label: 'Character 2 Name' },
    { id: 'char2-description', label: 'Character 2 Description' },
    { id: 'story-outline', label: 'Story Outline' },
    { id: 'scene-description', label: 'Scene Description' }
  ];

  for (const field of requiredFields) {
    const value = document.getElementById(field.id).value.trim();
    if (!value) {
      throw new Error(`Please fill in the ${field.label} field`);
    }
  }
}

async function generateStory() {
  const errorMessage = document.getElementById('error-message');
  const loading = document.getElementById('loading');
  errorMessage.style.display = 'none';
  
  try {
    await validateInputs();
    
    loading.style.display = 'block';
    const char1Name = document.getElementById('char1-name').value;
    const char1Desc = document.getElementById('char1-description').value;
    const char2Name = document.getElementById('char2-name').value;
    const char2Desc = document.getElementById('char2-description').value;
    const storyOutline = document.getElementById('story-outline').value;
    const sceneDesc = document.getElementById('scene-description').value;
    const artStyle = document.getElementById('art-style').value;

    const prompt = `Create a 4-panel comic strip story with characters: ${char1Name} (${char1Desc}) and ${char2Name} (${char2Desc}). Story outline: ${storyOutline}. Scene: ${sceneDesc}. Style: ${artStyle}. Break it into 4 distinct scenes without dialogue.`;

    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 comic strip writer. Create visual scene descriptions without dialogue.' },
          { role: 'user', content: prompt }
        ],
        model: 'mistral',
        jsonMode: false
      }),
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.text();
    const storyPreview = document.getElementById('story-preview');
    storyPreview.style.display = 'block';
    storyPreview.innerHTML = `<h2>Generated Story Panels:</h2><p>${data}</p>`;
    
    document.getElementById('generate-panels').style.display = 'block';
    window.storyData = data;
  } catch (error) {
    errorMessage.textContent = error.message || 'Failed to generate story. Please try again.';
    errorMessage.style.display = 'block';
    console.error('Error:', error);
  } finally {
    loading.style.display = 'none';
  }
}

async function generateImages() {
  const artStyle = document.getElementById('art-style').value;
  const char1Name = document.getElementById('char1-name').value;
  const char2Name = document.getElementById('char2-name').value;
  const gridContainer = document.getElementById('comic-grid');
  gridContainer.innerHTML = '';

  try {
    const scenes = window.storyData.split('\n').filter(scene => scene.trim());
    
    for (let i = 0; i < Math.min(scenes.length, 4); i++) {
      const scene = scenes[i];
      const prompt = `Comic panel ${i+1} of 4: ${scene}, featuring ${char1Name} and ${char2Name}. Style: ${artStyle}, consistent character designs, comic book layout`;
      const encodedPrompt = encodeURIComponent(prompt);
      
      const panel = document.createElement('div');
      panel.className = 'comic-panel';
      panel.innerHTML = `
        <div class="panel-number">#${i+1}</div>
        <img src="https://image.pollinations.ai/prompt/${encodedPrompt}?width=512&height=512&nologo=true" 
             alt="Comic panel ${i+1}: ${scene}" 
             width="512" height="512">
      `;
      gridContainer.appendChild(panel);
    }
  } catch (error) {
    console.error('Error generating images:', error);
    alert('Failed to generate images. Please try again.');
  }
}

document.getElementById('generate-story').addEventListener('click', generateStory);
document.getElementById('generate-panels').addEventListener('click', generateImages);
</script>
</body></html>