index.html

<div class="w-100 text-center"><p class="h6"><!DOCTYPE html>
<html>
<head>
    <title>Midjourney Prompt Generator</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center">Midjourney Prompt Machine</h1>
        <form id="promptForm">
            <div class="form-group">
                <label for="description">Enter Description:</label>
                <textarea class="form-control" id="description" name="description" rows="6" required></textarea>
            </div>
            <div class="form-group">
                <label for="numPrompts">Number of prompts to output:</label>
                <input class="form-control" id="numPrompts" name="numPrompts" value="4" min="1" max="5" type="number" required></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Generate Prompt</button>
        </form>
        
        <hr>
        
        <div id="outputDiv" class="mt-4"></div>
        <button id="copyButton" class="btn btn-secondary mt-2">Copy Text</button>

    </div>

    <script>
        const apiKey = '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'; // Replace with your actual API key
        const apiUrl = 'https://api.openai.com/v1/chat/completions';
        const responseDiv = document.getElementById('outputDiv');

        function generateResponse(prompt) {
            const data = {
                model: 'gpt-3.5-turbo',
                messages: [{ role: 'system', content: 'You are a prompt generator for Midjourney.' }, { role: 'user', content: prompt }],
            };

            fetch(apiUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${apiKey}`,
                },
                body: JSON.stringify(data),
            })
            .then(response => response.json())
            .then(data => {
                const reply = data.choices[0].message.content;
                responseDiv.innerHTML = `<p>${reply}</p>`;
            })
            .catch(error => {
                console.error('Error:', error);
                responseDiv.innerHTML = `<p><strong>Error:</strong> ${error}</p>`;
            });
        }
        
        document.getElementById('promptForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const letterNums = ['zero','one', 'two', 'three', 'four', 'five'];
            const description = document.getElementById('description').value;
            let numPrompts = parseInt(document.getElementById('numPrompts').value);
            numPrompts = letterNums[numPrompts].toUpperCase();
            const formattedPrompt = `<p>
As a prompt generator for a generative AI called "Midjourney", you will create image prompts for the AI to visualize. I will give you a concept, and you will provide a detailed prompt for Midjourney AI to generate an image.

Please adhere to the structure and formatting below, and follow these guidelines:

- Do not use the words "description" or ":" in any form.
- Do not place a comma between [ar] and [v].
- Write each prompt in one line without using return.

Structure:
[1] = ${description}
[2] = a detailed description of [1] with specific imagery details.
[3] = a detailed description of the scene's environment.
[4] = a detailed description of the scene's mood, feelings, and atmosphere.
[5] = A style (e.g. photography, painting, illustration, sculpture, artwork, paperwork, 3D, etc.) for [1].
[6] = A description of how [5] will be executed (e.g. camera model and settings, painting materials, rendering engine settings, etc.)
[ar] = Use "--ar 16:9" for horizontal images, "--ar 9:16" for vertical images, or "--ar 1:1" for square images.
[v] = Use "--niji" for Japanese art style, or "--v 5" for other styles.

Formatting: 
Follow this prompt structure: "/imagine prompt: [1], [2], [3], [4], [5], [6], [ar] [v]".

Your task: Create '${numPrompts}' distinct prompt${(numPrompts=='one')?'':'s'} (and just ${numPrompts} please! not more not less) for each concept [1], varying in description, environment, atmosphere, and realization.

- Write your prompts in English.
- Do not describe unreal concepts as "real" or "photographic".
- Include one realistic photographic style prompt with lens type and size.
- Separate different prompts with two new lines.

Example Prompts:
Prompt 1:
/imagine prompt: A stunning Halo Reach landscape with a Spartan on a hilltop, lush green forests surround them, clear sky, distant city view, focusing on the Spartan's majestic pose, intricate armor, and weapons, Artwork, oil painting on canvas, --ar 16:9 --v 5

Prompt 2:
/imagine prompt: A captivating Halo Reach landscape with a Spartan amidst a battlefield, fallen enemies around, smoke and fire in the background, emphasizing the Spartan's determination and bravery, detailed environment blending chaos and beauty, Illustration, digital art, --ar 16:9 -- v 5
</p>`;
           responseDiv.innerHTML = '<p>Generating...<br>Please wait!</p>';

           generateResponse(formattedPrompt);
        });
        
        document.getElementById('copyButton').addEventListener('click', function() {
            const promptText = document.getElementById('outputDiv').innerText;
            const textArea = document.createElement('textarea');
            textArea.value = promptText;
            document.body.appendChild(textArea);
            textArea.select();
            document.execCommand('copy');
            document.body.removeChild(textArea);
            
            alert('Prompt text copied to clipboard!');
        });
    </script>
</body>
</html></p></div>