File size: 6,348 Bytes
48b5f42 d1af7ec 48b5f42 d1af7ec 48b5f42 d1af7ec 48b5f42 21f7c68 bf487f4 21f7c68 |
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 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title> MIDJOURNEY PROMPT MACHINE </title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="card">
<h1>Welcome to the MIDJOURNEY PROMPT MACHINE</h1>
<p>You can create very complex prompts <i>index.html</i> by using very few words.</p>
<p>
Also don't forget to check the creators of this app
<a href="https://trychai.org" target="_blank">TRYCHAI</a>.
</p>
</div>
</body>
</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> |