Spaces:

TryChAI
/

MidjourneyPromptEngine

Running

App Files Files Community

Update index.html

by TryChAI - opened Nov 22, 2023

base: refs/heads/main

←

from: refs/pr/1

Discussion Files changed

+118

-18

Files changed (1) hide show

index.html +118 -18

index.html CHANGED Viewed

@@ -1,19 +1,119 @@
-<!DOCTYPE html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</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>