Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cinematic Script AI Toolkit | Transform Scripts into Production Assets</title> | |
| <meta name="description" content="Professional screenwriting toolkit powered by Google Gemini API. Generate cinematic blueprints, storyboard prompts, audio cues, and get instant script feedback."> | |
| <meta name="keywords" content="screenwriting, script analysis, AI toolkit, cinematic blueprint, storyboard, Gemini API"> | |
| <link rel="stylesheet" href="assets/css/styles.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <div class="container"> | |
| <div class="header-content"> | |
| <h1 class="logo"> | |
| <span class="logo-icon">🎬</span> | |
| Cinematic Script AI Toolkit | |
| </h1> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener" class="built-with"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="main"> | |
| <section class="hero"> | |
| <div class="container"> | |
| <h2 class="hero-title">Transform Scripts into Production-Ready Assets</h2> | |
| <p class="hero-subtitle">Powered by Google Gemini API, this professional toolkit helps screenwriters, directors, and content creators accelerate their pre-production workflow.</p> | |
| </div> | |
| </section> | |
| <section class="api-key-section"> | |
| <div class="container"> | |
| <div class="api-key-card"> | |
| <label for="apiKey" class="api-key-label"> | |
| <span class="label-icon">🔑</span> | |
| Google Gemini API Key | |
| </label> | |
| <div class="api-key-input-group"> | |
| <input | |
| type="password" | |
| id="apiKey" | |
| placeholder="Enter your API key to get started..." | |
| class="api-key-input" | |
| > | |
| <button type="button" id="toggleApiKey" class="toggle-btn" aria-label="Toggle API key visibility"> | |
| 👁️ | |
| </button> | |
| </div> | |
| <p class="api-key-hint"> | |
| Don't have an API key? | |
| <a href="https://ai.google.dev/" target="_blank" rel="noopener">Get one free from Google AI Studio</a> | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="script-input-section"> | |
| <div class="container"> | |
| <div class="script-card"> | |
| <label for="scriptInput" class="script-label"> | |
| <span class="label-icon">📝</span> | |
| Your Script or Scene | |
| </label> | |
| <textarea | |
| id="scriptInput" | |
| placeholder="Paste your script, scene, or story idea here... | |
| Example: | |
| INT. ABANDONED WAREHOUSE - NIGHT | |
| A flickering light reveals a lone figure standing in the shadows..." | |
| rows="10" | |
| class="script-textarea" | |
| ></textarea> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="tools-section"> | |
| <div class="container"> | |
| <h3 class="section-title">Generation Tools</h3> | |
| <div class="tools-grid"> | |
| <div class="tool-card"> | |
| <div class="tool-icon">🎥</div> | |
| <h4 class="tool-title">Cinematic Blueprint</h4> | |
| <p class="tool-description">Generate detailed shot-by-shot breakdown with camera movements, sound design, and timing.</p> | |
| <button class="tool-btn" data-tool="blueprint">Generate Blueprint</button> | |
| </div> | |
| <div class="tool-card"> | |
| <div class="tool-icon">🎵</div> | |
| <h4 class="tool-title">Suno Audio Prompts</h4> | |
| <p class="tool-description">Create structured JSON prompts for Suno AI music generation based on your script's mood.</p> | |
| <div class="theme-input-group"> | |
| <input | |
| type="text" | |
| id="themeInput" | |
| placeholder="Theme (e.g., Tension, Romance)" | |
| class="theme-input" | |
| > | |
| </div> | |
| <button class="tool-btn" data-tool="suno">Generate Audio Prompts</button> | |
| </div> | |
| <div class="tool-card"> | |
| <div class="tool-icon">🖼️</div> | |
| <h4 class="tool-title">Storyboard Prompts</h4> | |
| <p class="tool-description">Generate detailed image prompts for each key shot, optimized for Midjourney and similar tools.</p> | |
| <button class="tool-btn" data-tool="storyboard">Generate Storyboard</button> | |
| </div> | |
| <div class="tool-card"> | |
| <div class="tool-icon">💡</div> | |
| <h4 class="tool-title">Quick Feedback</h4> | |
| <p class="tool-description">Get instant, actionable advice from an AI script doctor to improve your scene's impact.</p> | |
| <button class="tool-btn" data-tool="feedback">Get Feedback</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="output-section" id="outputSection" style="display: none;"> | |
| <div class="container"> | |
| <div class="output-card"> | |
| <div class="output-header"> | |
| <h3 class="output-title" id="outputTitle">Generated Content</h3> | |
| <div class="output-actions"> | |
| <button class="action-btn" id="copyBtn" aria-label="Copy to clipboard"> | |
| <span class="btn-icon">📋</span> | |
| Copy | |
| </button> | |
| <button class="action-btn" id="downloadBtn" aria-label="Download as file"> | |
| <span class="btn-icon">💾</span> | |
| Download | |
| </button> | |
| </div> | |
| </div> | |
| <div class="output-content" id="outputContent"> | |
| <!-- Generated content will appear here --> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="loading-overlay" id="loadingOverlay" style="display: none;"> | |
| <div class="loading-spinner"> | |
| <div class="spinner"></div> | |
| <p class="loading-text">Generating your content...</p> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="footer"> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <p class="footer-text"> | |
| Cinematic Script AI Toolkit © 2024 | Powered by Google Gemini API | |
| </p> | |
| <p class="footer-links"> | |
| <a href="https://ai.google.dev/" target="_blank" rel="noopener">Get API Key</a> | |
| <span class="separator">•</span> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener">Built with anycoder</a> | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script src="assets/js/app.js"></script> | |
| </body> | |
| </html> |