<!DOCTYPE html>
<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>