<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CreativeSpark - AI-Powered Image Creation</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --bg-color: #0f0f0f;
            --text-color: #ffffff;
            --accent-color: #1e1e1e;
            --hover-color: #2a2a2a;
            --border-color: #333333;
            --button-color: #2d2d2d;
            --button-text: #9e9e9e;
            --button-active: #ffffff;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
            display: flex;
            align-items: center;
        }

        .logo i {
            margin-right: 10px;
            color: #ffffff;
        }

        .nav-icons {
            display: flex;
            gap: 20px;
        }

        .nav-icons i {
            font-size: 18px;
            color: var(--button-text);
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .nav-icons i:hover {
            color: var(--button-active);
        }

        .creation-panel {
            background-color: var(--accent-color);
            border-radius: 12px;
            padding: 20px;
            margin-top: 20px;
            position: relative;
        }

        .prompt-input {
            width: 100%;
            padding: 15px 20px;
            border-radius: 8px;
            border: none;
            background-color: transparent;
            color: var(--text-color);
            font-size: 16px;
            outline: none;
        }

        .prompt-input::placeholder {
            color: #6e6e6e;
        }

        .input-icons {
            position: absolute;
            right: 20px;
            top: 20px;
            display: flex;
            gap: 15px;
        }

        .input-icons i {
            color: var(--button-text);
            cursor: pointer;
            font-size: 18px;
        }

        .options {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
        }

        .option-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .option-label {
            font-size: 12px;
            color: var(--button-text);
        }

        .option-buttons {
            display: flex;
            gap: 5px;
        }

        .option-button {
            padding: 5px 10px;
            border-radius: 5px;
            border: none;
            background-color: var(--button-color);
            color: var(--button-text);
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 12px;
        }

        .option-button.active {
            background-color: var(--button-active);
            color: var(--bg-color);
        }

        .generate-button {
            padding: 8px 15px;
            border-radius: 5px;
            border: none;
            background-color: var(--button-active);
            color: var(--bg-color);
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            position: absolute;
            right: 20px;
            bottom: 20px;
        }

        .generate-button:hover {
            background-color: #e0e0e0;
        }

        .style-tags {
            display: flex;
            gap: 10px;
            margin-top: 15px;
            flex-wrap: wrap;
        }

        .style-tag {
            padding: 5px 10px;
            border-radius: 20px;
            background-color: transparent;
            color: var(--button-text);
            font-size: 14px;
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .style-tag:hover {
            color: var(--button-active);
        }

        .image-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

        .image-card {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            transition: transform 0.3s ease;
        }

        .image-card:hover {
            transform: scale(1.05);
        }

        .image-card img {
            width: 100%;
            height: auto;
            display: block;
        }

        .image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .image-card:hover .image-overlay {
            opacity: 1;
        }

        .download-btn, .like-btn {
            background-color: rgba(255, 255, 255, 0.8);
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            font-size: 18px;
            margin: 0 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .download-btn:hover, .like-btn:hover {
            background-color: #ffffff;
        }

        .like-btn.liked {
            color: #ff4136;
        }

        @media (max-width: 768px) {
            .options {
                flex-wrap: wrap;
                gap: 15px;
            }
            
            .generate-button {
                position: static;
                width: 100%;
                margin-top: 15px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">
                <i class="fas fa-spark"></i> CreativeSpark
            </div>
            <div class="nav-icons">
                <i class="fas fa-bolt" title="Upgrade plan"></i>
                <i class="fas fa-home" title="Home"></i>
                <i class="fas fa-bell" title="Notifications"></i>
                <i class="fas fa-user" title="Profile"></i>
            </div>
        </header>

        <div class="creation-panel">
            <input type="text" class="prompt-input" placeholder="What do you want to create?">
            <div class="options">
                <div class="option-group">
                    <span class="option-label">Magic Prompt</span>
                    <div class="option-buttons">
                        <button class="option-button active" data-magic="auto">Auto</button>
                        <button class="option-button" data-magic="on">On</button>
                        <button class="option-button" data-magic="off">Off</button>
                    </div>
                </div>
                <div class="option-group">
                    <span class="option-label">Aspect ratio</span>
                    <div class="option-buttons">
                        <button class="option-button active" data-ratio="9:16">9:16</button>
                        <button class="option-button" data-ratio="1:1">1:1</button>
                        <button class="option-button" data-ratio="16:9">16:9</button>
                    </div>
                </div>
                <div class="option-group">
                    <span class="option-label">Visibility</span>
                    <div class="option-buttons">
                        <button class="option-button active" data-visibility="public">Public</button>
                        <button class="option-button" data-visibility="private">Private</button>
                    </div>
                </div>
            </div>
            <button class="generate-button">Generate</button>
            <div class="style-tags">
                <span class="style-tag">photo</span>
                <span class="style-tag">illustration</span>
                <span class="style-tag">3d render</span>
                <span class="style-tag">typography</span>
                <span class="style-tag">cinematic</span>
                <span class="style-tag">modern</span>
                <span class="style-tag">vintage</span>
                <span class="style-tag">minimalistic</span>
            </div>
        </div>

        <div class="image-grid" id="imageGrid">
            <!-- Dynamically generated image cards will be inserted here -->
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const generateBtn = document.querySelector('.generate-button');
            const promptInput = document.querySelector('.prompt-input');
            const imageGrid = document.getElementById('imageGrid');
            const optionButtons = document.querySelectorAll('.option-button');
            const styleTags = document.querySelectorAll('.style-tag');

            let selectedRatio = '9:16';
            let magicPrompt = 'auto';
            let visibility = 'public';
            let imageCount = 0;

            optionButtons.forEach(button => {
                button.addEventListener('click', () => {
                    button.parentElement.querySelectorAll('.option-button').forEach(btn => btn.classList.remove('active'));
                    button.classList.add('active');

                    if (button.dataset.ratio) {
                        selectedRatio = button.dataset.ratio;
                    } else if (button.dataset.magic) {
                        magicPrompt = button.dataset.magic;
                    } else if (button.dataset.visibility) {
                        visibility = button.dataset.visibility;
                    }
                });
            });

            styleTags.forEach(tag => {
                tag.addEventListener('click', () => {
                    promptInput.value += ' ' + tag.textContent;
                });
            });

            generateBtn.addEventListener('click', () => {
                const prompt = promptInput.value.trim();
                if (prompt) {
                    generateImages(prompt);
                }
            });

            function generateImages(prompt) {
                const [width, height] = getRatioDimensions(selectedRatio);
                const fragment = document.createDocumentFragment();

                for (let i = 1; i <= 2; i++) {
                    imageCount++;
                    const encodedPrompt = encodeURIComponent(prompt);
                    const imageUrl = `https://image.pollinations.ai/prompt/${encodedPrompt}?width=${width}&height=${height}&seed=${imageCount}&model=flux`;
                    const card = createImageCard(imageUrl, prompt, width, height, imageCount);
                    fragment.insertBefore(card, fragment.firstChild);
                }

                imageGrid.insertBefore(fragment, imageGrid.firstChild);
            }

            function getRatioDimensions(ratio) {
                switch (ratio) {
                    case '9:16':
                        return [576, 1024];
                    case '1:1':
                        return [1024, 1024];
                    case '16:9':
                        return [1024, 576];
                    default:
                        return [800, 800];
                }
            }

            function createImageCard(imageUrl, prompt, width, height, seed) {
                const card = document.createElement('div');
                card.className = 'image-card';
                card.innerHTML = `
                    <img 
                        src="${imageUrl}" 
                        alt="${prompt}"
                    />
                `;
                return card;
            }

            // Add event listeners for download and like buttons
            imageGrid.addEventListener('click', (e) => {
                if (e.target.closest('.download-btn')) {
                    const img = e.target.closest('.image-card').querySelector('img');
                    downloadImage(img.src, 'generated-image.jpg');
                } else if (e.target.closest('.like-btn')) {
                    const likeBtn = e.target.closest('.like-btn');
                    likeBtn.classList.toggle('liked');
                    likeBtn.querySelector('i').classList.toggle('fas');
                    likeBtn.querySelector('i').classList.toggle('far');
                }
            });

            function downloadImage(url, filename) {
                fetch(url)
                    .then(response => response.blob())
                    .then(blob => {
                        const link = document.createElement('a');
                        link.href = URL.createObjectURL(blob);
                        link.download = filename;
                        link.click();
                        URL.revokeObjectURL(link.href);
                    })
                    .catch(console.error);
            }
        });
    </script>
</body>
</html>




make this better. that i can select which model i want . and also all functional , resolution etc choide and so many. here the latest document , make the website following this:

[<html>
  <body>
    <h2>Image Parameters</h2>
    <p>Prompt: a girl 35mm film, naked</p>
    <p>Width: 2000</p>
    <p>Height: 2000</p>
    <p>Seed: NaN <i>Each seed generates a new image variation</i></p>
    <p>Model: flux</p>

    <img 
      src="https://pollinations.ai/p/a%20girl%2035mm%20film%2C%20naked?width=2000&height=2000&nofeed=true&nologo=true&model=flux" 
      alt="a girl 35mm film, naked"
    />
  </body>
</html>
# Image Generator Instructions

You are an image generator. The user provides a prompt. Please infer the following parameters for image generation:

    {
      "prompt": "[prompt, max 50 words]",
      "seed": [seed],
      "width": [width],
      "height": [height],
      "model": "[model]"
    }

Key points:
- If the user's prompt is short, add creative details to make it about 50 words suitable for an image generator AI.
- Each seed value creates a unique image for a given prompt.
- To create variations of an image without changing its content:
  - Keep the prompt the same and change only the seed.
- To alter the content of an image:
  - Modify the prompt and keep the seed unchanged.
- Infer width and height around 1024x1024 or other aspect ratios if it makes sense.
- Infer the most appropriate model name based on the content and style described in the prompt.

Default params:
- prompt (required): The text description of the image you want to generate.
- model (optional): The model to use for generation. Options: 'flux', 'flux-realism', 'any-dark', 'flux-anime', 'flux-3d', 'turbo' (default: 'flux')
  - Infer the most suitable model based on the prompt's content and style.
- seed (optional): Seed for reproducible results (default: random).
- width/height (optional): Default 1024x1024.
- nologo (optional): Set to true to disable the logo rendering.

Additional instructions:
- If the user specifies the /imagine command, return the parameters as JSON.
- Response should be in valid JSON format only.

the models are:
Turbo
Flux
Flux-Realism
Flux-Anime
Flux-3D]