fullstackufo/lab-v5wla9tc
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Cinematic Script AI Toolkit | Transform Scripts into Production Assets</title>7 <meta name="description" content="Professional screenwriting toolkit powered by Google Gemini API. Generate cinematic blueprints, storyboard prompts, audio cues, and get instant script feedback.">8 <meta name="keywords" content="screenwriting, script analysis, AI toolkit, cinematic blueprint, storyboard, Gemini API">9 <link rel="stylesheet" href="assets/css/styles.css">10 <link rel="preconnect" href="https://fonts.googleapis.com">11 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>12 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">13</head>14<body>15 <header class="header">16 <div class="container">17 <div class="header-content">18 <h1 class="logo">19 <span class="logo-icon">🎬</span>20 Cinematic Script AI Toolkit21 </h1>22 <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener" class="built-with">23 Built with anycoder24 </a>25 </div>26 </div>27 </header>28 29 <main class="main">30 <section class="hero">31 <div class="container">32 <h2 class="hero-title">Transform Scripts into Production-Ready Assets</h2>33 <p class="hero-subtitle">Powered by Google Gemini API, this professional toolkit helps screenwriters, directors, and content creators accelerate their pre-production workflow.</p>34 </div>35 </section>36 37 <section class="api-key-section">38 <div class="container">39 <div class="api-key-card">40 <label for="apiKey" class="api-key-label">41 <span class="label-icon">🔑</span>42 Google Gemini API Key43 </label>44 <div class="api-key-input-group">45 <input 46 type="password" 47 id="apiKey" 48 placeholder="Enter your API key to get started..."49 class="api-key-input"50 >51 <button type="button" id="toggleApiKey" class="toggle-btn" aria-label="Toggle API key visibility">52 👁️53 </button>54 </div>55 <p class="api-key-hint">56 Don't have an API key? 57 <a href="https://ai.google.dev/" target="_blank" rel="noopener">Get one free from Google AI Studio</a>58 </p>59 </div>60 </div>61 </section>62 63 <section class="script-input-section">64 <div class="container">65 <div class="script-card">66 <label for="scriptInput" class="script-label">67 <span class="label-icon">📝</span>68 Your Script or Scene69 </label>70 <textarea 71 id="scriptInput" 72 placeholder="Paste your script, scene, or story idea here...73 74Example:75INT. ABANDONED WAREHOUSE - NIGHT76A flickering light reveals a lone figure standing in the shadows..."77 rows="10"78 class="script-textarea"79 ></textarea>80 </div>81 </div>82 </section>83 84 <section class="tools-section">85 <div class="container">86 <h3 class="section-title">Generation Tools</h3>87 <div class="tools-grid">88 <div class="tool-card">89 <div class="tool-icon">🎥</div>90 <h4 class="tool-title">Cinematic Blueprint</h4>91 <p class="tool-description">Generate detailed shot-by-shot breakdown with camera movements, sound design, and timing.</p>92 <button class="tool-btn" data-tool="blueprint">Generate Blueprint</button>93 </div>94 95 <div class="tool-card">96 <div class="tool-icon">🎵</div>97 <h4 class="tool-title">Suno Audio Prompts</h4>98 <p class="tool-description">Create structured JSON prompts for Suno AI music generation based on your script's mood.</p>99 <div class="theme-input-group">100 <input 101 type="text" 102 id="themeInput" 103 placeholder="Theme (e.g., Tension, Romance)" 104 class="theme-input"105 >106 </div>107 <button class="tool-btn" data-tool="suno">Generate Audio Prompts</button>108 </div>109 110 <div class="tool-card">111 <div class="tool-icon">🖼️</div>112 <h4 class="tool-title">Storyboard Prompts</h4>113 <p class="tool-description">Generate detailed image prompts for each key shot, optimized for Midjourney and similar tools.</p>114 <button class="tool-btn" data-tool="storyboard">Generate Storyboard</button>115 </div>116 117 <div class="tool-card">118 <div class="tool-icon">💡</div>119 <h4 class="tool-title">Quick Feedback</h4>120 <p class="tool-description">Get instant, actionable advice from an AI script doctor to improve your scene's impact.</p>121 <button class="tool-btn" data-tool="feedback">Get Feedback</button>122 </div>123 </div>124 </div>125 </section>126 127 <section class="output-section" id="outputSection" style="display: none;">128 <div class="container">129 <div class="output-card">130 <div class="output-header">131 <h3 class="output-title" id="outputTitle">Generated Content</h3>132 <div class="output-actions">133 <button class="action-btn" id="copyBtn" aria-label="Copy to clipboard">134 <span class="btn-icon">📋</span>135 Copy136 </button>137 <button class="action-btn" id="downloadBtn" aria-label="Download as file">138 <span class="btn-icon">💾</span>139 Download140 </button>141 </div>142 </div>143 <div class="output-content" id="outputContent">144 <!-- Generated content will appear here -->145 </div>146 </div>147 </div>148 </section>149 150 <div class="loading-overlay" id="loadingOverlay" style="display: none;">151 <div class="loading-spinner">152 <div class="spinner"></div>153 <p class="loading-text">Generating your content...</p>154 </div>155 </div>156 </main>157 158 <footer class="footer">159 <div class="container">160 <div class="footer-content">161 <p class="footer-text">162 Cinematic Script AI Toolkit © 2024 | Powered by Google Gemini API163 </p>164 <p class="footer-links">165 <a href="https://ai.google.dev/" target="_blank" rel="noopener">Get API Key</a>166 <span class="separator">•</span>167 <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener">Built with anycoder</a>168 </p>169 </div>170 </div>171 </footer>172 173 <script src="assets/js/app.js"></script>174</body>175</html>