File size: 5,804 Bytes
5630022 bf487f4 5630022 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
<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> |