Spaces:

Malaji71
/

midjourney-video-prompt-test

Running

App Files Files Community

Malaji71 commited on Jun 20, 2025

Commit

3cf698a

verified ·

1 Parent(s): c54e360

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AI Motion Grammar System - Professional Prompting Tool</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background: #0a0a0a; color: #e0e0e0; line-height: 1.6; overflow-x: hidden; } .container { max-width: 1400px; margin: 0 auto; padding: 20px; } header { text-align: center; padding: 40px 0; background: linear-gradient(135deg, #1a1a2e, #0f0f1e); border-radius: 20px; margin-bottom: 40px; position: relative; overflow: hidden; } header::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(138, 43, 226, 0.1) 0%, transparent 70%); animation: pulse 4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 0.8; } } h1 { font-size: 3em; margin-bottom: 10px; background: linear-gradient(45deg, #8a2be2, #ff6b6b, #4ecdc4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative; z-index: 1; } .subtitle { font-size: 1.2em; color: #888; position: relative; z-index: 1; } .grammar-builder { background: #1a1a1a; border-radius: 15px; padding: 30px; margin-bottom: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border: 1px solid #333; } .builder-section { margin-bottom: 25px; } .builder-section h3 { color: #8a2be2; margin-bottom: 15px; font-size: 1.3em; } .parameter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px; } .parameter-card { background: #252525; border: 1px solid #444; border-radius: 10px; padding: 15px; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .parameter-card:hover { transform: translateY(-2px); border-color: #8a2be2; box-shadow: 0 5px 15px rgba(138, 43, 226, 0.3); } .parameter-card.selected { background: #2a1a3a; border-color: #8a2be2; box-shadow: 0 0 20px rgba(138, 43, 226, 0.5); } .parameter-card.selected::before { content: '✓'; position: absolute; top: 10px; right: 10px; color: #4ecdc4; font-size: 1.2em; font-weight: bold; } .param-label { font-weight: bold; color: #4ecdc4; display: block; margin-bottom: 5px; } .param-value { font-size: 1.1em; margin-bottom: 5px; } .param-score { font-size: 0.9em; color: #888; } .motion-score-meter { background: #1a1a1a; border-radius: 10px; padding: 20px; margin: 20px 0; text-align: center; } .score-display { font-size: 3em; font-weight: bold; margin: 10px 0; background: linear-gradient(45deg, #4ecdc4, #8a2be2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .score-bar { width: 100%; height: 30px; background: #252525; border-radius: 15px; overflow: hidden; position: relative; margin: 20px 0; } .score-fill { height: 100%; background: linear-gradient(90deg, #4ecdc4, #8a2be2, #ff6b6b); border-radius: 15px; transition: width 0.5s ease; position: relative; overflow: hidden; } .score-fill::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation: shimmer 2s infinite; } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .generated-prompt { background: #0a0a0a; border: 2px solid #8a2be2; border-radius: 10px; padding: 20px; margin: 20px 0; font-family: 'Courier New', monospace; font-size: 1.1em; position: relative; overflow: hidden; } .generated-prompt::before { content: 'GENERATED PROMPT'; position: absolute; top: 5px; left: 10px; font-size: 0.7em; color: #8a2be2; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .prompt-text { margin-top: 10px; word-wrap: break-word; color: #4ecdc4; } .copy-button { position: absolute; top: 5px; right: 10px; background: #8a2be2; color: white; border: none; border-radius: 5px; padding: 5px 15px; cursor: pointer; font-size: 0.9em; transition: all 0.3s ease; } .copy-button:hover { background: #9a3bf2; transform: translateY(-1px); } .copy-button:active { transform: translateY(0); } .test-matrix { background: #1a1a1a; border-radius: 15px; padding: 30px; margin-top: 40px; } .test-item { background: #252525; border-radius: 10px; padding: 15px; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease; } .test-item:hover { background: #2a2a2a; transform: translateX(5px); } .test-prompt { flex: 1; margin-right: 20px; font-family: 'Courier New', monospace; color: #4ecdc4; } .test-score { background: linear-gradient(45deg, #8a2be2, #ff6b6b); color: white; padding: 5px 15px; border-radius: 20px; font-weight: bold; min-width: 60px; text-align: center; } .controls { display: flex; gap: 15px; margin: 20px 0; flex-wrap: wrap; } .control-button { background: #8a2be2; color: white; border: none; border-radius: 10px; padding: 12px 25px; cursor: pointer; font-size: 1em; transition: all 0.3s ease; position: relative; overflow: hidden; } .control-button::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255,255,255,0.3); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.5s, height 0.5s; } .control-button:hover::before { width: 300px; height: 300px; } .control-button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(138, 43, 226, 0.4); } .control-button.secondary { background: #444; } .formula-display { background: #0a0a0a; border: 1px solid #333; border-radius: 10px; padding: 20px; margin: 20px 0; font-family: 'Courier New', monospace; text-align: center; color: #888; } .tips-section { background: linear-gradient(135deg, #1a1a2e, #2a1a3a); border-radius: 15px; padding: 30px; margin-top: 40px; border: 1px solid #8a2be2; } .tips-section h3 { color: #4ecdc4; margin-bottom: 20px; } .tip-item { margin-bottom: 15px; padding-left: 20px; position: relative; } .tip-item::before { content: '→'; position: absolute; left: 0; color: #8a2be2; font-weight: bold; } @media (max-width: 768px) { h1 { font-size: 2em; } .parameter-grid { grid-template-columns: 1fr; } .controls { flex-direction: column; } .control-button { width: 100%; } } </style> </head> <body> <div class="container"> <header> <h1>AI Motion Grammar System</h1> <p class="subtitle">Professional Prompt Engineering for Midjourney V1 Video</p> </header> <div class="grammar-builder"> <h3>Motion Grammar Builder</h3> <div class="builder-section"> <h3>1. Gradient Intensity</h3> <div class="parameter-grid" id="gradientGrid">  </div> </div> <div class="builder-section"> <h3>2. Movement Type</h3> <div class="parameter-grid" id="movementGrid">  </div> </div> <div class="builder-section"> <h3>3. Smoothness Descriptor</h3> <div class="parameter-grid" id="smoothnessGrid">  </div> </div> <div class="builder-section"> <h3>4. Energy Level</h3> <div class="parameter-grid" id="energyGrid">  </div> </div> <div class="builder-section"> <h3>5. Motion Setting</h3> <div class="parameter-grid" id="motionSettingGrid">  </div> </div> <div class="motion-score-meter"> <h3>Calculated Motion Score</h3> <div class="score-display" id="scoreDisplay">0.00</div> <div class="score-bar"> <div class="score-fill" id="scoreFill" style="width: 0%"></div> </div> <p id="scoreDescription">Select parameters to calculate motion intensity</p> </div> <div class="generated-prompt"> <button class="copy-button" onclick="copyPrompt()">Copy</button> <div class="prompt-text" id="promptDisplay"> Select parameters above to generate your prompt </div> </div> <div class="formula-display"> Motion Score = Gradient Intensity × Energy Multiplier × Motion Setting </div> <div class="controls"> <button class="control-button" onclick="generateRandomPrompt()"> Generate Random Prompt </button> <button class="control-button secondary" onclick="resetBuilder()"> Reset All </button> <button class="control-button" onclick="generateTestMatrix()"> Generate Test Matrix </button> </div> </div> <div class="test-matrix" id="testMatrix" style="display: none;"> <h3>Systematic Test Matrix</h3> <div id="testItems">  </div> </div> <div class="tips-section"> <h3>Professional Usage Tips</h3> <div class="tip-item">Start with medium intensity (0.5-0.7) for predictable, usable results</div> <div class="tip-item">Always include smoothness descriptors to maintain visual coherence</div> <div class="tip-item">Stack multiple movement descriptors for stronger effects</div> <div class="tip-item">Use "impossible" or "extreme" sparingly - they can overwhelm the composition</div> <div class="tip-item">Match energy level with motion setting for optimal results</div> <div class="tip-item">Test systematically - small changes can have big impacts</div> </div> </div> <script> // Data structures based on the framework const grammarData = { gradient: { minimal: { words: ['subtle', 'gentle', 'slight'], score: 0.1 }, low: { words: ['soft', 'mild', 'easy'], score: 0.3 }, medium: { words: ['smooth', 'flowing', 'steady'], score: 0.5 }, high: { words: ['dramatic', 'sweeping', 'bold'], score: 0.7 }, extreme: { words: ['impossible', 'explosive', 'extreme'], score: 1.0 } }, movement: { linear: ['pan', 'tilt', 'dolly', 'track'], rotational: ['orbit', 'spiral', 'spin', 'rotate'], complex: ['weave', 'dance', 'swoop', 'surge'], zoom: ['zoom', 'push', 'pull', 'magnify'], compound: ['spiral-zoom', 'dolly-rotate', 'pan-tilt', 'orbit-push'] }, smoothness: ['seamless', 'fluid', 'silk-smooth', 'butter-smooth', 'smooth', 'rhythmic', 'pulsing'], energy: { low: { words: ['calm', 'serene', 'peaceful', 'tranquil'], multiplier: 0.5 }, medium: { words: ['balanced', 'rhythmic', 'flowing', 'steady'], multiplier: 1.0 }, high: { words: ['energetic', 'dynamic', 'vibrant', 'lively'], multiplier: 1.5 }, extreme: { words: ['frenetic', 'explosive', 'chaotic', 'turbulent'], multiplier: 2.0 } }, motionSetting: { low: 0.7, high: 1.3 } }; // State management let selectedParams = { gradient: null, movement: null, smoothness: null, energy: null, motionSetting: null }; // Initialize the builder function initializeBuilder() { populateGradientGrid(); populateMovementGrid(); populateSmoothnessGrid(); populateEnergyGrid(); populateMotionSettingGrid(); } function populateGradientGrid() { const grid = document.getElementById('gradientGrid'); Object.entries(grammarData.gradient).forEach(([level, data]) => { const card = createParameterCard( level, data.words[0], `Score: ${data.score}`, () => selectParameter('gradient', level, data) ); grid.appendChild(card); }); } function populateMovementGrid() { const grid = document.getElementById('movementGrid'); Object.entries(grammarData.movement).forEach(([type, movements]) => { const card = createParameterCard( type, movements[0], `${movements.length} variations`, () => selectParameter('movement', type, movements) ); grid.appendChild(card); }); } function populateSmoothnessGrid() { const grid = document.getElementById('smoothnessGrid'); grammarData.smoothness.forEach(smooth => { const card = createParameterCard( 'descriptor', smooth, 'Transition quality', () => selectParameter('smoothness', smooth, smooth) ); grid.appendChild(card); }); } function populateEnergyGrid() { const grid = document.getElementById('energyGrid'); Object.entries(grammarData.energy).forEach(([level, data]) => { const card = createParameterCard( level, data.words[0], `Multiplier: ${data.multiplier}x`, () => selectParameter('energy', level, data) ); grid.appendChild(card); }); } function populateMotionSettingGrid() { const grid = document.getElementById('motionSettingGrid'); Object.entries(grammarData.motionSetting).forEach(([setting, multiplier]) => { const card = createParameterCard( `--motion ${setting}`, setting.toUpperCase(), `Multiplier: ${multiplier}x`, () => selectParameter('motionSetting', setting, multiplier) ); grid.appendChild(card); }); } function createParameterCard(label, value, score, onClick) { const card = document.createElement('div'); card.className = 'parameter-card'; card.innerHTML = ` <span class="param-label">${label}</span> <span class="param-value">${value}</span> <span class="param-score">${score}</span> `; card.onclick = onClick; return card; } function selectParameter(type, key, value) { // Update state selectedParams[type] = { key, value }; // Update UI const grid = document.getElementById(`${type}Grid`); grid.querySelectorAll('.parameter-card').forEach(card => { card.classList.remove('selected'); }); event.currentTarget.classList.add('selected'); // Update prompt and score updatePromptAndScore(); } function updatePromptAndScore() { if (Object.values(selectedParams).every(param => param !== null)) { const prompt = generatePrompt(); const score = calculateScore(); document.getElementById('promptDisplay').textContent = prompt; document.getElementById('scoreDisplay').textContent = score.toFixed(2); document.getElementById('scoreFill').style.width = `${Math.min(score * 50, 100)}%`; // Update description based on score const descriptions = { 0.1: 'Minimal motion - barely perceptible', 0.3: 'Subtle motion - gentle movement', 0.5: 'Balanced motion - smooth and professional', 0.7: 'Dynamic motion - strong cinematic movement', 1.0: 'Extreme motion - maximum intensity', 1.5: 'Hyper motion - reality-bending effects', 2.0: 'Chaos motion - experimental territory' }; let description = 'Custom motion profile'; for (const [threshold, desc] of Object.entries(descriptions)) { if (score <= parseFloat(threshold)) { description = desc; break; } } document.getElementById('scoreDescription').textContent = description; } } function generatePrompt() { const gradient = selectedParams.gradient.value.words[0]; const movement = Array.isArray(selectedParams.movement.value) ? selectedParams.movement.value[0] : selectedParams.movement.value; const smoothness = selectedParams.smoothness.value; const energy = selectedParams.energy.value.words[0]; const motionSetting = selectedParams.motionSetting.key; return `${gradient} camera ${movement}, ${smoothness}, ${energy} --motion ${motionSetting}`; } function calculateScore() { const gradientScore = selectedParams.gradient.value.score; const energyMultiplier = selectedParams.energy.value.multiplier; const motionMultiplier = selectedParams.motionSetting.value; return gradientScore * energyMultiplier * motionMultiplier; } function copyPrompt() { const promptText = document.getElementById('promptDisplay').textContent; navigator.clipboard.writeText(promptText).then(() => { const button = document.querySelector('.copy-button'); const originalText = button.textContent; button.textContent = 'Copied!'; setTimeout(() => { button.textContent = originalText; }, 2000); }); } function generateRandomPrompt() { // Random selections const gradientKeys = Object.keys(grammarData.gradient); const movementKeys = Object.keys(grammarData.movement); const energyKeys = Object.keys(grammarData.energy); const motionKeys = Object.keys(grammarData.motionSetting); const randomGradient = gradientKeys[Math.floor(Math.random() * gradientKeys.length)]; const randomMovement = movementKeys[Math.floor(Math.random() * movementKeys.length)]; const randomSmoothness = grammarData.smoothness[Math.floor(Math.random() * grammarData.smoothness.length)]; const randomEnergy = energyKeys[Math.floor(Math.random() * energyKeys.length)]; const randomMotion = motionKeys[Math.floor(Math.random() * motionKeys.length)]; // Clear selections document.querySelectorAll('.parameter-card').forEach(card => { card.classList.remove('selected'); }); // Make selections selectedParams = { gradient: { key: randomGradient, value: grammarData.gradient[randomGradient] }, movement: { key: randomMovement, value: grammarData.movement[randomMovement] }, smoothness: { key: randomSmoothness, value: randomSmoothness }, energy: { key: randomEnergy, value: grammarData.energy[randomEnergy] }, motionSetting: { key: randomMotion, value: grammarData.motionSetting[randomMotion] } }; // Update UI updatePromptAndScore(); // Highlight selected cards setTimeout(() => { document.querySelectorAll('.parameter-card').forEach(card => { const text = card.textContent.toLowerCase(); if (text.includes(selectedParams.gradient.value.words[0]) || text.includes(selectedParams.movement.value[0]) || text.includes(selectedParams.smoothness.value) || text.includes(selectedParams.energy.value.words[0]) || text.includes(randomMotion)) { card.classList.add('selected'); } }); }, 100); } function resetBuilder() { selectedParams = { gradient: null, movement: null, smoothness: null, energy: null, motionSetting: null }; document.querySelectorAll('.parameter-card').forEach(card => { card.classList.remove('selected'); }); document.getElementById('promptDisplay').textContent = 'Select parameters above to generate your prompt'; document.getElementById('scoreDisplay').textContent = '0.00'; document.getElementById('scoreFill').style.width = '0%'; document.getElementById('scoreDescription').textContent = 'Select parameters to calculate motion intensity'; } function generateTestMatrix() { const testMatrix = document.getElementById('testMatrix'); const testItems = document.getElementById('testItems'); // Clear existing items testItems.innerHTML = ''; // Generate systematic test cases const testCases = [ { gradient: 'minimal', movement: 'linear', smoothness: 'seamless', energy: 'low', motion: 'low' }, { gradient: 'low', movement: 'linear', smoothness: 'fluid', energy: 'medium', motion: 'low' }, { gradient: 'medium', movement: 'rotational', smoothness: 'smooth', energy: 'medium', motion: 'low' }, { gradient: 'medium', movement: 'zoom', smoothness: 'seamless', energy: 'high', motion: 'high' }, { gradient: 'high', movement: 'complex', smoothness: 'fluid', energy: 'high', motion: 'high' }, { gradient: 'extreme', movement: 'compound', smoothness: 'seamless', energy: 'extreme', motion: 'high' } ]; testCases.forEach(test => { const gradient = grammarData.gradient[test.gradient].words[0]; const movement = grammarData.movement[test.movement][0]; const smoothness = test.smoothness; const energy = grammarData.energy[test.energy].words[0]; const prompt = `${gradient} camera ${movement}, ${smoothness}, ${energy} --motion ${test.motion}`; const score = grammarData.gradient[test.gradient].score * grammarData.energy[test.energy].multiplier * grammarData.motionSetting[test.motion]; const item = document.createElement('div'); item.className = 'test-item'; item.innerHTML = ` <div class="test-prompt">${prompt}</div> <div class="test-score">${score.toFixed(2)}</div> `; item.onclick = () => { navigator.clipboard.writeText(prompt); item.style.background = '#2a3a2a'; setTimeout(() => { item.style.background = ''; }, 500); }; testItems.appendChild(item); }); testMatrix.style.display = 'block'; testMatrix.scrollIntoView({ behavior: 'smooth' }); } // Initialize on load initializeBuilder(); </script> </body> </html> - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +543 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Midjourney Video Prompt Test
-emoji: 🌍
-colorFrom: gray
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: midjourney-video-prompt-test
+emoji: 🐳
+colorFrom: pink
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,543 @@
-<!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>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Motion Grammar System - Professional Prompting Tool</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); opacity: 0.5; }
+            50% { transform: scale(1.1); opacity: 0.8; }
+        }
+        @keyframes shimmer {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+        .gradient-text {
+            background: linear-gradient(45deg, #8a2be2, #ff6b6b, #4ecdc4);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .score-fill::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+            animation: shimmer 2s infinite;
+        }
+        .parameter-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(138, 43, 226, 0.3);
+        }
+        .parameter-card.selected {
+            box-shadow: 0 0 20px rgba(138, 43, 226, 0.5);
+        }
+        .control-button:hover::before {
+            width: 300px;
+            height: 300px;
+        }
+        .header-glow::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: radial-gradient(circle, rgba(138, 43, 226, 0.1) 0%, transparent 70%);
+            animation: pulse 4s ease-in-out infinite;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-200 font-sans antialiased">
+    <div class="container mx-auto px-4 py-8 max-w-7xl">
+        <!-- Header -->
+        <header class="text-center py-12 px-6 bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl mb-10 relative overflow-hidden header-glow">
+            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-3 gradient-text">AI Motion Grammar System</h1>
+            <p class="text-lg md:text-xl text-gray-400">Professional Prompt Engineering for Midjourney V1 Video</p>
+            <div class="absolute inset-0 bg-gradient-to-br from-purple-900/10 via-transparent to-cyan-500/10"></div>
+        </header>
+        <!-- Main Builder -->
+        <div class="bg-gray-800 rounded-xl p-6 md:p-8 mb-8 shadow-xl border border-gray-700">
+            <h2 class="text-2xl font-bold mb-6 text-purple-400 flex items-center">
+                <i class="fas fa-cogs mr-3"></i> Motion Grammar Builder
+            </h2>
+            <!-- Gradient Intensity -->
+            <div class="mb-8">
+                <h3 class="text-xl font-semibold mb-4 text-cyan-400 flex items-center">
+                    <span class="bg-gray-700 rounded-full w-8 h-8 flex items-center justify-center mr-3 text-sm">1</span>
+                    Gradient Intensity
+                </h3>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4" id="gradientGrid">
+                    <!-- Populated by JS -->
+                </div>
+            </div>
+            <!-- Movement Type -->
+            <div class="mb-8">
+                <h3 class="text-xl font-semibold mb-4 text-cyan-400 flex items-center">
+                    <span class="bg-gray-700 rounded-full w-8 h-8 flex items-center justify-center mr-3 text-sm">2</span>
+                    Movement Type
+                </h3>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4" id="movementGrid">
+                    <!-- Populated by JS -->
+                </div>
+            </div>
+            <!-- Smoothness Descriptor -->
+            <div class="mb-8">
+                <h3 class="text-xl font-semibold mb-4 text-cyan-400 flex items-center">
+                    <span class="bg-gray-700 rounded-full w-8 h-8 flex items-center justify-center mr-3 text-sm">3</span>
+                    Smoothness Descriptor
+                </h3>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4" id="smoothnessGrid">
+                    <!-- Populated by JS -->
+                </div>
+            </div>
+            <!-- Energy Level -->
+            <div class="mb-8">
+                <h3 class="text-xl font-semibold mb-4 text-cyan-400 flex items-center">
+                    <span class="bg-gray-700 rounded-full w-8 h-8 flex items-center justify-center mr-3 text-sm">4</span>
+                    Energy Level
+                </h3>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4" id="energyGrid">
+                    <!-- Populated by JS -->
+                </div>
+            </div>
+            <!-- Motion Setting -->
+            <div class="mb-8">
+                <h3 class="text-xl font-semibold mb-4 text-cyan-400 flex items-center">
+                    <span class="bg-gray-700 rounded-full w-8 h-8 flex items-center justify-center mr-3 text-sm">5</span>
+                    Motion Setting
+                </h3>
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4" id="motionSettingGrid">
+                    <!-- Populated by JS -->
+                </div>
+            </div>
+            <!-- Motion Score -->
+            <div class="bg-gray-800 rounded-xl p-6 mb-8 border border-gray-700">
+                <h3 class="text-xl font-semibold mb-4 text-center text-purple-400">Calculated Motion Score</h3>
+                <div class="text-5xl font-bold text-center mb-2 gradient-text" id="scoreDisplay">0.00</div>
+                <div class="w-full h-8 bg-gray-700 rounded-full overflow-hidden mb-4">
+                    <div class="h-full bg-gradient-to-r from-cyan-400 via-purple-500 to-pink-500 rounded-full transition-all duration-500" id="scoreFill" style="width: 0%"></div>
+                </div>
+                <p class="text-center text-gray-400" id="scoreDescription">Select parameters to calculate motion intensity</p>
+            </div>
+            <!-- Generated Prompt -->
+            <div class="bg-gray-900 rounded-xl p-6 mb-8 border-2 border-purple-500 relative overflow-hidden">
+                <div class="absolute top-2 left-3 text-xs text-purple-400 font-mono">GENERATED PROMPT</div>
+                <button class="absolute top-2 right-3 bg-purple-600 text-white px-3 py-1 rounded text-sm hover:bg-purple-700 transition" onclick="copyPrompt()">
+                    <i class="fas fa-copy mr-1"></i> Copy
+                </button>
+                <div class="mt-6 font-mono text-cyan-400 break-words" id="promptDisplay">
+                    Select parameters above to generate your prompt
+                </div>
+            </div>
+            <!-- Formula -->
+            <div class="bg-gray-900 rounded-xl p-4 mb-8 border border-gray-700 text-center font-mono text-gray-500">
+                Motion Score = Gradient Intensity × Energy Multiplier × Motion Setting
+            </div>
+            <!-- Controls -->
+            <div class="flex flex-col sm:flex-row gap-4 mb-8">
+                <button class="flex-1 bg-purple-600 hover:bg-purple-700 text-white py-3 px-6 rounded-lg font-medium transition flex items-center justify-center" onclick="generateRandomPrompt()">
+                    <i class="fas fa-random mr-2"></i> Generate Random Prompt
+                </button>
+                <button class="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-3 px-6 rounded-lg font-medium transition flex items-center justify-center" onclick="resetBuilder()">
+                    <i class="fas fa-redo mr-2"></i> Reset All
+                </button>
+                <button class="flex-1 bg-cyan-600 hover:bg-cyan-700 text-white py-3 px-6 rounded-lg font-medium transition flex items-center justify-center" onclick="generateTestMatrix()">
+                    <i class="fas fa-table mr-2"></i> Generate Test Matrix
+                </button>
+            </div>
+        </div>
+        <!-- Test Matrix (Hidden by default) -->
+        <div class="bg-gray-800 rounded-xl p-6 md:p-8 mt-10 hidden" id="testMatrix">
+            <h2 class="text-2xl font-bold mb-6 text-purple-400 flex items-center">
+                <i class="fas fa-table mr-3"></i> Systematic Test Matrix
+            </h2>
+            <div class="space-y-3" id="testItems">
+                <!-- Populated by JS -->
+            </div>
+        </div>
+        <!-- Tips Section -->
+        <div class="bg-gradient-to-br from-gray-800 to-purple-900/30 rounded-xl p-6 md:p-8 mt-10 border border-purple-500/30">
+            <h2 class="text-2xl font-bold mb-6 text-cyan-400 flex items-center">
+                <i class="fas fa-lightbulb mr-3"></i> Professional Usage Tips
+            </h2>
+            <ul class="space-y-3">
+                <li class="flex items-start">
+                    <span class="text-purple-400 mr-3 mt-1">→</span>
+                    <span>Start with medium intensity (0.5-0.7) for predictable, usable results</span>
+                </li>
+                <li class="flex items-start">
+                    <span class="text-purple-400 mr-3 mt-1">→</span>
+                    <span>Always include smoothness descriptors to maintain visual coherence</span>
+                </li>
+                <li class="flex items-start">
+                    <span class="text-purple-400 mr-3 mt-1">→</span>
+                    <span>Stack multiple movement descriptors for stronger effects</span>
+                </li>
+                <li class="flex items-start">
+                    <span class="text-purple-400 mr-3 mt-1">→</span>
+                    <span>Use "impossible" or "extreme" sparingly - they can overwhelm the composition</span>
+                </li>
+                <li class="flex items-start">
+                    <span class="text-purple-400 mr-3 mt-1">→</span>
+                    <span>Match energy level with motion setting for optimal results</span>
+                </li>
+                <li class="flex items-start">
+                    <span class="text-purple-400 mr-3 mt-1">→</span>
+                    <span>Test systematically - small changes can have big impacts</span>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <script>
+        // Data structures based on the framework
+        const grammarData = {
+            gradient: {
+                minimal: { words: ['subtle', 'gentle', 'slight'], score: 0.1 },
+                low: { words: ['soft', 'mild', 'easy'], score: 0.3 },
+                medium: { words: ['smooth', 'flowing', 'steady'], score: 0.5 },
+                high: { words: ['dramatic', 'sweeping', 'bold'], score: 0.7 },
+                extreme: { words: ['impossible', 'explosive', 'extreme'], score: 1.0 }
+            },
+            movement: {
+                linear: ['pan', 'tilt', 'dolly', 'track'],
+                rotational: ['orbit', 'spiral', 'spin', 'rotate'],
+                complex: ['weave', 'dance', 'swoop', 'surge'],
+                zoom: ['zoom', 'push', 'pull', 'magnify'],
+                compound: ['spiral-zoom', 'dolly-rotate', 'pan-tilt', 'orbit-push']
+            },
+            smoothness: ['seamless', 'fluid', 'silk-smooth', 'butter-smooth', 'smooth', 'rhythmic', 'pulsing'],
+            energy: {
+                low: { words: ['calm', 'serene', 'peaceful', 'tranquil'], multiplier: 0.5 },
+                medium: { words: ['balanced', 'rhythmic', 'flowing', 'steady'], multiplier: 1.0 },
+                high: { words: ['energetic', 'dynamic', 'vibrant', 'lively'], multiplier: 1.5 },
+                extreme: { words: ['frenetic', 'explosive', 'chaotic', 'turbulent'], multiplier: 2.0 }
+            },
+            motionSetting: {
+                low: 0.7,
+                high: 1.3
+            }
+        };
+        // State management
+        let selectedParams = {
+            gradient: null,
+            movement: null,
+            smoothness: null,
+            energy: null,
+            motionSetting: null
+        };
+        // Initialize the builder
+        function initializeBuilder() {
+            populateGradientGrid();
+            populateMovementGrid();
+            populateSmoothnessGrid();
+            populateEnergyGrid();
+            populateMotionSettingGrid();
+        }
+        function populateGradientGrid() {
+            const grid = document.getElementById('gradientGrid');
+            Object.entries(grammarData.gradient).forEach(([level, data]) => {
+                const card = createParameterCard(
+                    level,
+                    data.words[0],
+                    `Score: ${data.score}`,
+                    () => selectParameter('gradient', level, data)
+                );
+                grid.appendChild(card);
+            });
+        }
+        function populateMovementGrid() {
+            const grid = document.getElementById('movementGrid');
+            Object.entries(grammarData.movement).forEach(([type, movements]) => {
+                const card = createParameterCard(
+                    type,
+                    movements[0],
+                    `${movements.length} variations`,
+                    () => selectParameter('movement', type, movements)
+                );
+                grid.appendChild(card);
+            });
+        }
+        function populateSmoothnessGrid() {
+            const grid = document.getElementById('smoothnessGrid');
+            grammarData.smoothness.forEach(smooth => {
+                const card = createParameterCard(
+                    'descriptor',
+                    smooth,
+                    'Transition quality',
+                    () => selectParameter('smoothness', smooth, smooth)
+                );
+                grid.appendChild(card);
+            });
+        }
+        function populateEnergyGrid() {
+            const grid = document.getElementById('energyGrid');
+            Object.entries(grammarData.energy).forEach(([level, data]) => {
+                const card = createParameterCard(
+                    level,
+                    data.words[0],
+                    `Multiplier: ${data.multiplier}x`,
+                    () => selectParameter('energy', level, data)
+                );
+                grid.appendChild(card);
+            });
+        }
+        function populateMotionSettingGrid() {
+            const grid = document.getElementById('motionSettingGrid');
+            Object.entries(grammarData.motionSetting).forEach(([setting, multiplier]) => {
+                const card = createParameterCard(
+                    `--motion ${setting}`,
+                    setting.toUpperCase(),
+                    `Multiplier: ${multiplier}x`,
+                    () => selectParameter('motionSetting', setting, multiplier)
+                );
+                grid.appendChild(card);
+            });
+        }
+        function createParameterCard(label, value, score, onClick) {
+            const card = document.createElement('div');
+            card.className = 'bg-gray-700 border border-gray-600 rounded-lg p-4 cursor-pointer transition hover:border-purple-500 parameter-card';
+            card.innerHTML = `
+                <div class="text-xs uppercase text-cyan-400 font-semibold mb-1">${label}</div>
+                <div class="text-lg font-medium mb-1">${value}</div>
+                <div class="text-sm text-gray-400">${score}</div>
+            `;
+            card.onclick = onClick;
+            return card;
+        }
+        function selectParameter(type, key, value) {
+            // Update state
+            selectedParams[type] = { key, value };
+            // Update UI
+            const grid = document.getElementById(`${type}Grid`);
+            grid.querySelectorAll('.parameter-card').forEach(card => {
+                card.classList.remove('selected', 'border-purple-500');
+            });
+            event.currentTarget.classList.add('selected', 'border-purple-500');
+            // Update prompt and score
+            updatePromptAndScore();
+        }
+        function updatePromptAndScore() {
+            if (Object.values(selectedParams).every(param => param !== null)) {
+                const prompt = generatePrompt();
+                const score = calculateScore();
+                document.getElementById('promptDisplay').textContent = prompt;
+                document.getElementById('scoreDisplay').textContent = score.toFixed(2);
+                document.getElementById('scoreFill').style.width = `${Math.min(score * 50, 100)}%`;
+                // Update description based on score
+                const descriptions = {
+                    0.1: 'Minimal motion - barely perceptible',
+                    0.3: 'Subtle motion - gentle movement',
+                    0.5: 'Balanced motion - smooth and professional',
+                    0.7: 'Dynamic motion - strong cinematic movement',
+                    1.0: 'Extreme motion - maximum intensity',
+                    1.5: 'Hyper motion - reality-bending effects',
+                    2.0: 'Chaos motion - experimental territory'
+                };
+                let description = 'Custom motion profile';
+                for (const [threshold, desc] of Object.entries(descriptions)) {
+                    if (score <= parseFloat(threshold)) {
+                        description = desc;
+                        break;
+                    }
+                }
+                document.getElementById('scoreDescription').textContent = description;
+            }
+        }
+        function generatePrompt() {
+            const gradient = selectedParams.gradient.value.words[0];
+            const movement = Array.isArray(selectedParams.movement.value)
+                ? selectedParams.movement.value[0]
+                : selectedParams.movement.value;
+            const smoothness = selectedParams.smoothness.value;
+            const energy = selectedParams.energy.value.words[0];
+            const motionSetting = selectedParams.motionSetting.key;
+            return `${gradient} camera ${movement}, ${smoothness}, ${energy} --motion ${motionSetting}`;
+        }
+        function calculateScore() {
+            const gradientScore = selectedParams.gradient.value.score;
+            const energyMultiplier = selectedParams.energy.value.multiplier;
+            const motionMultiplier = selectedParams.motionSetting.value;
+            return gradientScore * energyMultiplier * motionMultiplier;
+        }
+        function copyPrompt() {
+            const promptText = document.getElementById('promptDisplay').textContent;
+            navigator.clipboard.writeText(promptText).then(() => {
+                const button = document.querySelector('.copy-button');
+                const originalText = button.innerHTML;
+                button.innerHTML = '<i class="fas fa-check mr-1"></i> Copied!';
+                setTimeout(() => {
+                    button.innerHTML = originalText;
+                }, 2000);
+            });
+        }
+        function generateRandomPrompt() {
+            // Random selections
+            const gradientKeys = Object.keys(grammarData.gradient);
+            const movementKeys = Object.keys(grammarData.movement);
+            const energyKeys = Object.keys(grammarData.energy);
+            const motionKeys = Object.keys(grammarData.motionSetting);
+            const randomGradient = gradientKeys[Math.floor(Math.random() * gradientKeys.length)];
+            const randomMovement = movementKeys[Math.floor(Math.random() * movementKeys.length)];
+            const randomSmoothness = grammarData.smoothness[Math.floor(Math.random() * grammarData.smoothness.length)];
+            const randomEnergy = energyKeys[Math.floor(Math.random() * energyKeys.length)];
+            const randomMotion = motionKeys[Math.floor(Math.random() * motionKeys.length)];
+            // Clear selections
+            document.querySelectorAll('.parameter-card').forEach(card => {
+                card.classList.remove('selected', 'border-purple-500');
+            });
+            // Make selections
+            selectedParams = {
+                gradient: { key: randomGradient, value: grammarData.gradient[randomGradient] },
+                movement: { key: randomMovement, value: grammarData.movement[randomMovement] },
+                smoothness: { key: randomSmoothness, value: randomSmoothness },
+                energy: { key: randomEnergy, value: grammarData.energy[randomEnergy] },
+                motionSetting: { key: randomMotion, value: grammarData.motionSetting[randomMotion] }
+            };
+            // Update UI
+            updatePromptAndScore();
+            // Highlight selected cards
+            setTimeout(() => {
+                document.querySelectorAll('.parameter-card').forEach(card => {
+                    const text = card.textContent.toLowerCase();
+                    if (text.includes(selectedParams.gradient.value.words[0]) ||
+                        text.includes(selectedParams.movement.value[0]) ||
+                        text.includes(selectedParams.smoothness.value) ||
+                        text.includes(selectedParams.energy.value.words[0]) ||
+                        text.includes(randomMotion)) {
+                        card.classList.add('selected', 'border-purple-500');
+                    }
+                });
+            }, 100);
+        }
+        function resetBuilder() {
+            selectedParams = {
+                gradient: null,
+                movement: null,
+                smoothness: null,
+                energy: null,
+                motionSetting: null
+            };
+            document.querySelectorAll('.parameter-card').forEach(card => {
+                card.classList.remove('selected', 'border-purple-500');
+            });
+            document.getElementById('promptDisplay').textContent = 'Select parameters above to generate your prompt';
+            document.getElementById('scoreDisplay').textContent = '0.00';
+            document.getElementById('scoreFill').style.width = '0%';
+            document.getElementById('scoreDescription').textContent = 'Select parameters to calculate motion intensity';
+        }
+        function generateTestMatrix() {
+            const testMatrix = document.getElementById('testMatrix');
+            const testItems = document.getElementById('testItems');
+            // Clear existing items
+            testItems.innerHTML = '';
+            // Generate systematic test cases
+            const testCases = [
+                { gradient: 'minimal', movement: 'linear', smoothness: 'seamless', energy: 'low', motion: 'low' },
+                { gradient: 'low', movement: 'linear', smoothness: 'fluid', energy: 'medium', motion: 'low' },
+                { gradient: 'medium', movement: 'rotational', smoothness: 'smooth', energy: 'medium', motion: 'low' },
+                { gradient: 'medium', movement: 'zoom', smoothness: 'seamless', energy: 'high', motion: 'high' },
+                { gradient: 'high', movement: 'complex', smoothness: 'fluid', energy: 'high', motion: 'high' },
+                { gradient: 'extreme', movement: 'compound', smoothness: 'seamless', energy: 'extreme', motion: 'high' }
+            ];
+            testCases.forEach(test => {
+                const gradient = grammarData.gradient[test.gradient].words[0];
+                const movement = grammarData.movement[test.movement][0];
+                const smoothness = test.smoothness;
+                const energy = grammarData.energy[test.energy].words[0];
+                const prompt = `${gradient} camera ${movement}, ${smoothness}, ${energy} --motion ${test.motion}`;
+                const score = grammarData.gradient[test.gradient].score *
+                              grammarData.energy[test.energy].multiplier *
+                              grammarData.motionSetting[test.motion];
+                const item = document.createElement('div');
+                item.className = 'bg-gray-700 rounded-lg p-4 flex flex-col sm:flex-row justify-between items-center hover:bg-gray-600 transition cursor-pointer';
+                item.innerHTML = `
+                    <div class="font-mono text-cyan-400 mb-2 sm:mb-0 sm:mr-4 flex-1">${prompt}</div>
+                    <div class="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-4 py-1 rounded-full font-bold text-sm whitespace-nowrap">
+                        ${score.toFixed(2)}
+                    </div>
+                `;
+                item.onclick = () => {
+                    navigator.clipboard.writeText(prompt);
+                    item.classList.add('bg-green-900/30');
+                    setTimeout(() => {
+                        item.classList.remove('bg-green-900/30');
+                    }, 500);
+                };
+                testItems.appendChild(item);
+            });
+            testMatrix.classList.remove('hidden');
+            testMatrix.scrollIntoView({ behavior: 'smooth' });
+        }
+        // Initialize on load
+        document.addEventListener('DOMContentLoaded', initializeBuilder);
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Malaji71/midjourney-video-prompt-test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>