Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ADARSH KUMAR - AI Image Generator</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='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=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <!-- Loading Screen --> | |
| <div id="loading-screen"> | |
| <div class="loading-container"> | |
| <div class="loading-logo"> | |
| <div class="logo-animation"> | |
| <div class="logo-circle"></div> | |
| <div class="logo-text"> | |
| <span class="gradient-text">ADARSH KUMAR</span> | |
| <span class="subtext">IS MAKING IT</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="loading-animation"> | |
| <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div> | |
| </div> | |
| <div class="loading-text"> | |
| <span class="animated-text">Initializing Creative Intelligence</span> | |
| <div class="loading-dots"> | |
| <span class="dot">.</span> | |
| <span class="dot">.</span> | |
| <span class="dot">.</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Application --> | |
| <div id="app-container" class="hidden"> | |
| <!-- Header Area --> | |
| <header class="app-header"> | |
| <div class="header-logo"> | |
| <span class="gradient-text">ADARSH KUMAR</span> | |
| <span class="header-version">AI Studio </span> | |
| </div> | |
| <div class="header-controls"> | |
| <button id="theme-toggle" class="theme-toggle" title="Toggle Dark/Light Mode"> | |
| <i class="fas fa-moon"></i> | |
| </button> | |
| <button id="menu-toggle" class="menu-toggle"> | |
| <i class="fas fa-bars"></i> | |
| <span>Menu</span> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Container --> | |
| <div class="main-container"> | |
| <!-- Sidebar --> | |
| <div id="sidebar" class="sidebar"> | |
| <div class="sidebar-header"> | |
| <h1 class="app-title">Creator Studio</h1> | |
| <button id="sidebar-close" class="sidebar-close"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="sidebar-content"> | |
| <div class="latest-creation-preview"> | |
| <h3 class="sidebar-section-title">Latest Creation</h3> | |
| <div id="latest-creation" class="latest-creation"> | |
| <div class="latest-creation-placeholder"> | |
| <i class="fas fa-image"></i> | |
| <p>Generate an image to see it here</p> | |
| </div> | |
| </div> | |
| </div> | |
| <form id="generation-form"> | |
| <div class="form-group"> | |
| <label for="prompt">Prompt</label> | |
| <div class="prompt-container"> | |
| <textarea id="prompt" placeholder="Describe your vision in detail..." rows="4"></textarea> | |
| <button type="button" id="upgrade-prompt-btn" class="upgrade-btn" title="Enhance with AI"> | |
| <i class="fas fa-wand-magic-sparkles"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="negative-prompt">Negative Prompt</label> | |
| <textarea id="negative-prompt" placeholder="Elements to avoid in your image..." rows="2"></textarea> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label for="width">Width</label> | |
| <select id="width"> | |
| <option value="512">512px</option> | |
| <option value="640">640px</option> | |
| <option value="768" selected>768px</option> | |
| <option value="1024">1024px</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="height">Height</label> | |
| <select id="height"> | |
| <option value="512">512px</option> | |
| <option value="640">640px</option> | |
| <option value="768" selected>768px</option> | |
| <option value="1024">1024px</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="seed">Seed</label> | |
| <div class="seed-container"> | |
| <input type="number" id="seed" min="0" max="999999" value="0"> | |
| <button type="button" id="random-seed" class="random-btn pulse-effect" title="Generate random seed"> | |
| <i class="fas fa-dice"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="form-group checkbox-group"> | |
| <input type="checkbox" id="tiling"> | |
| <label for="tiling">Seamless Tiling</label> | |
| </div> | |
| <div class="form-actions"> | |
| <button type="button" id="advanced-settings-btn" class="secondary-btn"> | |
| <i class="fas fa-sliders"></i> Advanced Settings | |
| </button> | |
| <button type="submit" id="generate-btn" class="primary-btn pulse-animation"> | |
| <i class="fas fa-bolt"></i> Create Image | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="main-content"> | |
| <div class="content-section" data-aos="fade-up"> | |
| <h2 class="section-title">Creative Canvas</h2> | |
| <div id="image-display" class="image-display"> | |
| <div class="placeholder-wrapper"> | |
| <div class="placeholder-content"> | |
| <i class="fas fa-image placeholder-icon pulse-slow"></i> | |
| <p>Your masterpiece will appear here</p> | |
| <span class="helper-tip">Use the form to create something amazing</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="image-controls"> | |
| <button id="download-current" class="control-btn" disabled> | |
| <i class="fas fa-download"></i> Download | |
| </button> | |
| <button id="share-current" class="control-btn" disabled> | |
| <i class="fas fa-share-alt"></i> Share | |
| </button> | |
| <button id="favorite-current" class="control-btn" disabled> | |
| <i class="far fa-heart"></i> Favorite | |
| </button> | |
| </div> | |
| </div> | |
| <div class="content-section" data-aos="fade-up" data-aos-delay="100"> | |
| <h2 class="section-title">Creation Gallery</h2> | |
| <div id="history-gallery" class="history-gallery"> | |
| <!-- Will be populated by JavaScript --> | |
| <div class="empty-history-message"> | |
| <i class="fas fa-images"></i> | |
| <p>Your creations will be displayed here</p> | |
| <span class="helper-tip">Get started by generating your first image!</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Advanced Settings Modal --> | |
| <div id="advanced-settings-modal" class="modal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h2><i class="fas fa-cog fa-spin-pulse"></i> Advanced Settings</h2> | |
| <button class="close-modal"><i class="fas fa-times"></i></button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="form-group"> | |
| <label for="subseed">Subseed</label> | |
| <input type="number" id="subseed" min="0" max="999999" value="0"> | |
| <small class="setting-hint">Variation seed for more control</small> | |
| </div> | |
| <div class="form-group"> | |
| <label for="attention">Attention (Guidance Scale)</label> | |
| <div class="slider-container"> | |
| <input type="range" id="attention" min="0" max="1" step="0.01" value="0.5"> | |
| <span id="attention-value">0.5</span> | |
| </div> | |
| <small class="setting-hint">Higher values = more precise prompt following</small> | |
| </div> | |
| <div class="form-group"> | |
| <label>Reference Image</label> | |
| <div class="reference-image-container"> | |
| <input type="file" id="reference-image" accept="image/*"> | |
| <label for="reference-image" class="file-upload-label"> | |
| <i class="fas fa-cloud-upload-alt"></i> Upload Reference | |
| </label> | |
| </div> | |
| <div id="reference-preview" class="reference-preview hidden"> | |
| <img id="reference-preview-img" src="#" alt="Reference Image"> | |
| <button id="remove-reference" class="remove-reference"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <small class="setting-hint">Use an existing image as reference</small> | |
| </div> | |
| <div class="form-group"> | |
| <label for="reference-type">Reference Type</label> | |
| <select id="reference-type"> | |
| <option value="style">Style</option> | |
| <option value="content">Content</option> | |
| <option value="composition">Composition</option> | |
| </select> | |
| <small class="setting-hint">How to use the reference image</small> | |
| </div> | |
| <div class="form-group"> | |
| <label for="reference-strength">Reference Strength</label> | |
| <div class="slider-container"> | |
| <input type="range" id="reference-strength" min="0" max="1" step="0.01" value="0.5"> | |
| <span id="reference-strength-value">0.5</span> | |
| </div> | |
| <small class="setting-hint">How much influence the reference has</small> | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button id="reset-advanced-settings" class="secondary-btn"> | |
| <i class="fas fa-undo"></i> Reset | |
| </button> | |
| <button id="save-advanced-settings" class="primary-btn"> | |
| <i class="fas fa-check"></i> Apply Settings | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt Enhancement Modal --> | |
| <div id="prompt-modal" class="modal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h2><i class="fas fa-magic"></i> AI Enhanced Prompt</h2> | |
| <button class="close-modal"><i class="fas fa-times"></i></button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="form-group"> | |
| <label for="original-prompt">Your Original Prompt</label> | |
| <textarea id="original-prompt" rows="3" readonly></textarea> | |
| </div> | |
| <div class="enhancement-animation"> | |
| <div class="enhancement-line"></div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="enhanced-prompt">AI Enhanced Version</label> | |
| <textarea id="enhanced-prompt" rows="5"></textarea> | |
| <small class="setting-hint">Feel free to edit this enhanced prompt</small> | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button id="cancel-prompt-enhancement" class="secondary-btn"> | |
| <i class="fas fa-times"></i> Keep Original | |
| </button> | |
| <button id="use-enhanced-prompt" class="primary-btn"> | |
| <i class="fas fa-check-double"></i> Use Enhanced | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Image Viewer Modal --> | |
| <div id="image-viewer-modal" class="modal"> | |
| <div class="modal-content fullscreen"> | |
| <div class="modal-header"> | |
| <h2><i class="fas fa-image"></i> Image Showcase</h2> | |
| <button class="close-modal"><i class="fas fa-times"></i></button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="modal-columns"> | |
| <div class="image-viewer-container"> | |
| <img id="viewer-image" src="#" alt="Generated Image"> | |
| <div class="image-actions"> | |
| <button id="download-image" class="image-action-btn"> | |
| <i class="fas fa-download"></i> Download | |
| </button> | |
| <button id="share-image" class="image-action-btn"> | |
| <i class="fas fa-share-alt"></i> Share | |
| </button> | |
| </div> | |
| </div> | |
| <div class="image-details"> | |
| <div class="detail-section"> | |
| <h3 class="detail-section-title">Creation Details</h3> | |
| <div class="detail-item"> | |
| <span class="detail-label"><i class="fas fa-keyboard"></i> Prompt:</span> | |
| <span id="viewer-prompt" class="detail-value"></span> | |
| </div> | |
| <div class="detail-item"> | |
| <span class="detail-label"><i class="fas fa-ban"></i> Negative Prompt:</span> | |
| <span id="viewer-negative-prompt" class="detail-value"></span> | |
| </div> | |
| <div class="detail-stats"> | |
| <div class="stat-item"> | |
| <span class="stat-label"><i class="fas fa-expand"></i> Size:</span> | |
| <span id="viewer-size" class="stat-value"></span> | |
| </div> | |
| <div class="stat-item"> | |
| <span class="stat-label"><i class="fas fa-seedling"></i> Seed:</span> | |
| <span id="viewer-seed" class="stat-value"></span> | |
| </div> | |
| <div class="stat-item"> | |
| <span class="stat-label"><i class="far fa-clock"></i> Created:</span> | |
| <span id="viewer-timestamp" class="stat-value"></span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="detail-actions"> | |
| <button id="regenerate-image" class="primary-btn full-width"> | |
| <i class="fas fa-sync-alt fa-spin-hover"></i> Create Similar Image | |
| </button> | |
| <button id="edit-prompt-image" class="secondary-btn full-width"> | |
| <i class="fas fa-edit"></i> Edit & Create New | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Share Modal --> | |
| <div id="share-modal" class="modal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h2><i class="fas fa-share-alt"></i> Share Your Creation</h2> | |
| <button class="close-modal"><i class="fas fa-times"></i></button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="share-preview"> | |
| <img id="share-preview-img" src="#" alt="Share Preview"> | |
| </div> | |
| <div class="share-options"> | |
| <button class="share-btn facebook"> | |
| <i class="fab fa-facebook"></i> Facebook | |
| </button> | |
| <button class="share-btn twitter"> | |
| <i class="fab fa-twitter"></i> Twitter | |
| </button> | |
| <button class="share-btn pinterest"> | |
| <i class="fab fa-pinterest"></i> Pinterest | |
| </button> | |
| <button class="share-btn whatsapp"> | |
| <i class="fab fa-whatsapp"></i> WhatsApp | |
| </button> | |
| </div> | |
| <div class="share-link"> | |
| <input type="text" id="share-link-input" readonly> | |
| <button id="copy-link" class="copy-btn"> | |
| <i class="fas fa-copy"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Toast Notifications Container --> | |
| <div id="toast-container"></div> | |
| <!-- Scripts --> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="{{ url_for('static', filename='js/main.js') }}"></script> | |
| </body> | |
| </html> |