|
<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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'; |
|
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> |
