Ctrl+K
- 1.52 kB initial commit
- 227 Bytes <!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"> <!-- Gradient options will be populated here --> </div> </div> <div class="builder-section"> <h3>2. Movement Type</h3> <div class="parameter-grid" id="movementGrid"> <!-- Movement options will be populated here --> </div> </div> <div class="builder-section"> <h3>3. Smoothness Descriptor</h3> <div class="parameter-grid" id="smoothnessGrid"> <!-- Smoothness options will be populated here --> </div> </div> <div class="builder-section"> <h3>4. Energy Level</h3> <div class="parameter-grid" id="energyGrid"> <!-- Energy options will be populated here --> </div> </div> <div class="builder-section"> <h3>5. Motion Setting</h3> <div class="parameter-grid" id="motionSettingGrid"> <!-- Motion setting options will be populated here --> </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"> <!-- Test items will be populated here --> </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
- 26.2 kB Change the subtitle to. Testing Prompt Engineering for Midjourney V1 Video - Follow Up Deployment
- 388 Bytes initial commit