Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CosXL Image Editor</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| :root { | |
| --primary: #7e57c2; | |
| --primary-dark: #5e35b1; | |
| --secondary: #26c6da; | |
| --dark-bg: #121212; | |
| --dark-surface: #1e1e1e; | |
| --dark-card: #252525; | |
| --text-primary: #ffffff; | |
| --text-secondary: #b0b0b0; | |
| --success: #66bb6a; | |
| --warning: #ffca28; | |
| --error: #ef5350; | |
| } | |
| body { | |
| background: linear-gradient(135deg, var(--dark-bg) 0%, #1a1a2e 100%); | |
| color: var(--text-primary); | |
| min-height: 100vh; | |
| padding: 20px; | |
| line-height: 1.6; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 20px 0; | |
| margin-bottom: 30px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| .logo-icon { | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 24px; | |
| } | |
| .logo-text { | |
| font-size: 28px; | |
| font-weight: 700; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .tabs { | |
| display: flex; | |
| background: var(--dark-card); | |
| border-radius: 12px; | |
| padding: 6px; | |
| margin-bottom: 30px; | |
| } | |
| .tab { | |
| flex: 1; | |
| padding: 15px 20px; | |
| text-align: center; | |
| cursor: pointer; | |
| border-radius: 8px; | |
| transition: all 0.3s ease; | |
| font-weight: 600; | |
| opacity: 0.7; | |
| } | |
| .tab.active { | |
| background: var(--primary-dark); | |
| opacity: 1; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .card { | |
| background: var(--dark-card); | |
| border-radius: 16px; | |
| padding: 30px; | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); | |
| margin-bottom: 30px; | |
| } | |
| .card-header { | |
| margin-bottom: 25px; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .card-title { | |
| font-size: 22px; | |
| font-weight: 600; | |
| } | |
| .card-icon { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 10px; | |
| background: var(--primary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 30px; | |
| } | |
| @media (max-width: 900px) { | |
| .grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .form-group { | |
| margin-bottom: 20px; | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: 10px; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| } | |
| input, textarea, select { | |
| width: 100%; | |
| padding: 14px 18px; | |
| border-radius: 10px; | |
| background: var(--dark-surface); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| color: var(--text-primary); | |
| font-size: 16px; | |
| transition: all 0.3s ease; | |
| } | |
| input:focus, textarea:focus, select:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgba(126, 87, 194, 0.3); | |
| } | |
| textarea { | |
| min-height: 120px; | |
| resize: vertical; | |
| } | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| padding: 16px 28px; | |
| border-radius: 12px; | |
| font-weight: 600; | |
| font-size: 16px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| border: none; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 12px rgba(126, 87, 194, 0.4); | |
| } | |
| .btn-secondary { | |
| background: var(--dark-surface); | |
| color: var(--text-primary); | |
| } | |
| .btn-secondary:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| .image-upload { | |
| border: 2px dashed rgba(255, 255, 255, 0.2); | |
| border-radius: 16px; | |
| padding: 40px 20px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| background: var(--dark-surface); | |
| position: relative; | |
| overflow: hidden; | |
| min-height: 250px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .image-upload:hover { | |
| border-color: var(--primary); | |
| } | |
| .image-upload i { | |
| font-size: 48px; | |
| color: var(--text-secondary); | |
| margin-bottom: 15px; | |
| } | |
| .image-upload p { | |
| margin-bottom: 15px; | |
| } | |
| .preview-container { | |
| position: relative; | |
| min-height: 300px; | |
| background: var(--dark-surface); | |
| border-radius: 16px; | |
| overflow: hidden; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .preview-image { | |
| max-width: 100%; | |
| max-height: 500px; | |
| display: none; | |
| } | |
| .placeholder { | |
| color: var(--text-secondary); | |
| text-align: center; | |
| padding: 40px; | |
| } | |
| .placeholder i { | |
| font-size: 64px; | |
| margin-bottom: 20px; | |
| opacity: 0.3; | |
| } | |
| .examples { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: 20px; | |
| margin-top: 20px; | |
| } | |
| .example-card { | |
| background: var(--dark-surface); | |
| border-radius: 12px; | |
| overflow: hidden; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .example-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); | |
| border-color: var(--primary); | |
| } | |
| .example-image { | |
| width: 100%; | |
| height: 150px; | |
| object-fit: cover; | |
| } | |
| .example-title { | |
| padding: 15px; | |
| font-weight: 500; | |
| text-align: center; | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| .loading { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(30, 30, 30, 0.8); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 10; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.3s ease; | |
| } | |
| .loading.active { | |
| opacity: 1; | |
| pointer-events: all; | |
| } | |
| .spinner { | |
| width: 50px; | |
| height: 50px; | |
| border: 5px solid rgba(255, 255, 255, 0.1); | |
| border-top: 5px solid var(--primary); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin-bottom: 20px; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .progress-text { | |
| font-size: 18px; | |
| font-weight: 500; | |
| } | |
| .notification { | |
| position: fixed; | |
| top: 20px; | |
| right: 20px; | |
| padding: 16px 24px; | |
| border-radius: 12px; | |
| background: var(--dark-card); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| transform: translateX(120%); | |
| transition: transform 0.3s ease; | |
| z-index: 1000; | |
| } | |
| .notification.show { | |
| transform: translateX(0); | |
| } | |
| .notification.success { | |
| border-left: 4px solid var(--success); | |
| } | |
| .notification.error { | |
| border-left: 4px solid var(--error); | |
| } | |
| .notification-icon { | |
| font-size: 20px; | |
| } | |
| .notification.success .notification-icon { | |
| color: var(--success); | |
| } | |
| .notification.error .notification-icon { | |
| color: var(--error); | |
| } | |
| .parameters { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 20px; | |
| } | |
| @media (max-width: 600px) { | |
| .parameters { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .slider-container { | |
| background: var(--dark-surface); | |
| padding: 20px; | |
| border-radius: 12px; | |
| } | |
| .slider-value { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 10px; | |
| } | |
| .slider-value span:last-child { | |
| font-weight: 600; | |
| color: var(--primary); | |
| } | |
| input[type="range"] { | |
| -webkit-appearance: none; | |
| width: 100%; | |
| height: 8px; | |
| border-radius: 4px; | |
| background: rgba(255, 255, 255, 0.1); | |
| outline: none; | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: var(--primary); | |
| cursor: pointer; | |
| box-shadow: 0 0 10px rgba(126, 87, 194, 0.5); | |
| } | |
| .result-actions { | |
| display: flex; | |
| gap: 15px; | |
| margin-top: 20px; | |
| } | |
| footer { | |
| text-align: center; | |
| padding: 30px 0; | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| margin-top: 40px; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .api-status { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-top: 15px; | |
| padding: 8px 12px; | |
| border-radius: 8px; | |
| background: rgba(38, 198, 218, 0.15); | |
| } | |
| .api-status.connected .status-indicator { | |
| background: var(--success); | |
| } | |
| .api-status.connecting .status-indicator { | |
| background: var(--warning); | |
| } | |
| .api-status.disconnected .status-indicator { | |
| background: var(--error); | |
| } | |
| .status-indicator { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <div class="logo"> | |
| <div class="logo-icon"> | |
| <i class="fas fa-magic"></i> | |
| </div> | |
| <div class="logo-text">CosXL Editor</div> | |
| </div> | |
| <div class="app-version">v1.2.0</div> | |
| </header> | |
| <div class="tabs"> | |
| <div class="tab active" data-tab="edit">Image Editor</div> | |
| <div class="tab" data-tab="generate">Text to Image</div> | |
| <div class="tab" data-tab="examples">Examples</div> | |
| </div> | |
| <!-- Edit Tab --> | |
| <div id="edit-tab" class="tab-content"> | |
| <div class="grid"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <div class="card-icon"> | |
| <i class="fas fa-upload"></i> | |
| </div> | |
| <h2 class="card-title">Image Input</h2> | |
| </div> | |
| <div class="image-upload" id="uploadArea"> | |
| <i class="fas fa-cloud-upload-alt"></i> | |
| <p>Drag & Drop your image here</p> | |
| <p class="text-secondary">or click to browse</p> | |
| <input type="file" id="imageInput" accept="image/*" class="hidden"> | |
| </div> | |
| <div class="preview-container" id="inputPreview"> | |
| <div class="placeholder"> | |
| <i class="fas fa-image"></i> | |
| <p>No image selected</p> | |
| </div> | |
| <img id="inputImage" class="preview-image" alt="Input preview"> | |
| </div> | |
| <div class="api-status connected" id="apiStatus"> | |
| <span class="status-indicator"></span> | |
| <span>Connected to CosXL API</span> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <div class="card-icon"> | |
| <i class="fas fa-sliders-h"></i> | |
| </div> | |
| <h2 class="card-title">Edit Parameters</h2> | |
| </div> | |
| <div class="form-group"> | |
| <label for="prompt">Edit Prompt</label> | |
| <textarea id="prompt" placeholder="Describe what you want to change, e.g. 'Make the sky cloudy'"></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label for="negativePrompt">Negative Prompt</label> | |
| <input type="text" id="negativePrompt" placeholder="What to avoid, e.g. 'blurry, low quality'"> | |
| </div> | |
| <div class="parameters"> | |
| <div class="form-group"> | |
| <label for="guidanceScale">Guidance Scale</label> | |
| <div class="slider-container"> | |
| <div class="slider-value"> | |
| <span>Strength</span> | |
| <span id="guidanceValue">7.0</span> | |
| </div> | |
| <input type="range" id="guidanceScale" min="1" max="20" step="0.5" value="7"> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="steps">Steps</label> | |
| <div class="slider-container"> | |
| <div class="slider-value"> | |
| <span>Detail Level</span> | |
| <span id="stepsValue">20</span> | |
| </div> | |
| <input type="range" id="steps" min="10" max="50" step="1" value="20"> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="btn btn-primary" onclick="generateEdit()"> | |
| <i class="fas fa-wand-magic-sparkles"></i> Generate Edit | |
| </button> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <div class="card-icon"> | |
| <i class="fas fa-image"></i> | |
| </div> | |
| <h2 class="card-title">Output Image</h2> | |
| </div> | |
| <div class="preview-container" id="outputPreview"> | |
| <div class="loading" id="outputLoading"> | |
| <div class="spinner"></div> | |
| <div class="progress-text">Processing your image...</div> | |
| </div> | |
| <div class="placeholder"> | |
| <i class="fas fa-sync-alt"></i> | |
| <p>Your edited image will appear here</p> | |
| </div> | |
| <img id="resultImage" class="preview-image" alt="Output image"> | |
| </div> | |
| <div class="result-actions"> | |
| <button class="btn btn-secondary" id="downloadBtn" disabled> | |
| <i class="fas fa-download"></i> Download | |
| </button> | |
| <button class="btn btn-secondary"> | |
| <i class="fas fa-share-alt"></i> Share | |
| </button> | |
| <button class="btn btn-secondary" id="resetBtn"> | |
| <i class="fas fa-redo"></i> Try Again | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Generate Tab --> | |
| <div id="generate-tab" class="tab-content hidden"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <div class="card-icon"> | |
| <i class="fas fa-font"></i> | |
| </div> | |
| <h2 class="card-title">Text to Image Generation</h2> | |
| </div> | |
| <div class="grid"> | |
| <div class="form-group"> | |
| <label for="generatePrompt">Prompt</label> | |
| <textarea id="generatePrompt" placeholder="Describe the image you want to create"></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label for="generateNegPrompt">Negative Prompt</label> | |
| <input type="text" id="generateNegPrompt" placeholder="What to avoid, e.g. 'blurry, low quality'"> | |
| </div> | |
| </div> | |
| <div class="parameters"> | |
| <div class="form-group"> | |
| <label for="genGuidanceScale">Guidance Scale</label> | |
| <div class="slider-container"> | |
| <div class="slider-value"> | |
| <span>Strength</span> | |
| <span id="genGuidanceValue">7.0</span> | |
| </div> | |
| <input type="range" id="genGuidanceScale" min="1" max="20" step="0.5" value="7"> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="genSteps">Steps</label> | |
| <div class="slider-container"> | |
| <div class="slider-value"> | |
| <span>Detail Level</span> | |
| <span id="genStepsValue">20</span> | |
| </div> | |
| <input type="range" id="genSteps" min="10" max="50" step="1" value="20"> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="btn btn-primary" id="generateImageBtn"> | |
| <i class="fas fa-sparkles"></i> Generate Image | |
| </button> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <div class="card-icon"> | |
| <i class="fas fa-image"></i> | |
| </div> | |
| <h2 class="card-title">Generated Image</h2> | |
| </div> | |
| <div class="preview-container" id="generateOutputPreview"> | |
| <div class="loading" id="generateLoading"> | |
| <div class="spinner"></div> | |
| <div class="progress-text">Generating your image...</div> | |
| </div> | |
| <div class="placeholder"> | |
| <i class="fas fa-sync-alt"></i> | |
| <p>Your generated image will appear here</p> | |
| </div> | |
| <img id="generatedImage" class="preview-image" alt="Generated image"> | |
| </div> | |
| <div class="result-actions"> | |
| <button class="btn btn-secondary" id="downloadGeneratedBtn" disabled> | |
| <i class="fas fa-download"></i> Download | |
| </button> | |
| <button class="btn btn-secondary"> | |
| <i class="fas fa-share-alt"></i> Share | |
| </button> | |
| <button class="btn btn-secondary" id="resetGenerateBtn"> | |
| <i class="fas fa-redo"></i> Try Again | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Examples Tab --> | |
| <div id="examples-tab" class="tab-content hidden"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <div class="card-icon"> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <h2 class="card-title">Example Gallery</h2> | |
| </div> | |
| <p>Select an example to see how CosXL can transform images. Click on any example to load it into the editor.</p> | |
| <div class="examples"> | |
| <div class="example-card" data-example="0"> | |
| <img src="https://images.unsplash.com/photo-1501854140801-50d01698950b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80" class="example-image"> | |
| <div class="example-title">Landscape Enhancement</div> | |
| </div> | |
| <div class="example-card" data-example="1"> | |
| <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80" class="example-image"> | |
| <div class="example-title">Portrait Stylization</div> | |
| </div> | |
| <div class="example-card" data-example="2"> | |
| <img src="https://images.unsplash.com/photo-1543857778-c4a1a569e7bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80" class="example-image"> | |
| <div class="example-title">Urban Transformation</div> | |
| </div> | |
| <div class="example-card" data-example="3"> | |
| <img src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80" class="example-image"> | |
| <div class="example-title">Interior Design</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| <p>CosXL Edit UI v1.0 | Powered by MultimodalArt API</p> | |
| <p>© 2023 AI Art Studio. All rights reserved.</p> | |
| </footer> | |
| </div> | |
| <div class="notification success" id="successNotification"> | |
| <div class="notification-icon"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <div class="notification-content"> | |
| <div class="notification-title">Success!</div> | |
| <div class="notification-message">Image processed successfully</div> | |
| </div> | |
| </div> | |
| <div class="notification error" id="errorNotification"> | |
| <div class="notification-icon"> | |
| <i class="fas fa-exclamation-circle"></i> | |
| </div> | |
| <div class="notification-content"> | |
| <div class="notification-title">Error</div> | |
| <div class="notification-message">Something went wrong</div> | |
| </div> | |
| </div> | |
| <script> | |
| // API configuration | |
| const API_URL = "https://multimodalart-cosxl.hf.space/api/predict/"; | |
| // DOM Elements | |
| const tabs = document.querySelectorAll('.tab'); | |
| const tabContents = document.querySelectorAll('.tab-content'); | |
| const uploadArea = document.getElementById('uploadArea'); | |
| const imageInput = document.getElementById('imageInput'); | |
| const inputPreview = document.getElementById('inputPreview'); | |
| const inputImage = document.getElementById('inputImage'); | |
| const guidanceScale = document.getElementById('guidanceScale'); | |
| const steps = document.getElementById('steps'); | |
| const guidanceValue = document.getElementById('guidanceValue'); | |
| const stepsValue = document.getElementById('stepsValue'); | |
| const outputLoading = document.getElementById('outputLoading'); | |
| const resultImage = document.getElementById('resultImage'); | |
| const successNotification = document.getElementById('successNotification'); | |
| const errorNotification = document.getElementById('errorNotification'); | |
| const downloadBtn = document.getElementById('downloadBtn'); | |
| const resetBtn = document.getElementById('resetBtn'); | |
| const generateImageBtn = document.getElementById('generateImageBtn'); | |
| const downloadGeneratedBtn = document.getElementById('downloadGeneratedBtn'); | |
| const resetGenerateBtn = document.getElementById('resetGenerateBtn'); | |
| const generatedImage = document.getElementById('generatedImage'); | |
| const generateLoading = document.getElementById('generateLoading'); | |
| const apiStatus = document.getElementById('apiStatus'); | |
| // State variables | |
| let currentImage = null; | |
| let editedImageData = null; | |
| let generatedImageData = null; | |
| // Tab switching | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| // Remove active class from all tabs | |
| tabs.forEach(t => t.classList.remove('active')); | |
| // Add active class to clicked tab | |
| tab.classList.add('active'); | |
| // Hide all tab contents | |
| tabContents.forEach(content => content.classList.add('hidden')); | |
| // Show selected tab content | |
| const tabId = tab.getAttribute('data-tab'); | |
| document.getElementById(`${tabId}-tab`).classList.remove('hidden'); | |
| }); | |
| }); | |
| // Initialize slider values | |
| guidanceValue.textContent = guidanceScale.value; | |
| stepsValue.textContent = steps.value; | |
| // Update slider values | |
| guidanceScale.addEventListener('input', () => { | |
| guidanceValue.textContent = guidanceScale.value; | |
| }); | |
| steps.addEventListener('input', () => { | |
| stepsValue.textContent = steps.value; | |
| }); | |
| // Image upload handling | |
| uploadArea.addEventListener('click', () => { | |
| imageInput.click(); | |
| }); | |
| uploadArea.addEventListener('dragover', (e) => { | |
| e.preventDefault(); | |
| uploadArea.style.borderColor = 'var(--primary)'; | |
| uploadArea.style.backgroundColor = 'rgba(126, 87, 194, 0.1)'; | |
| }); | |
| uploadArea.addEventListener('dragleave', () => { | |
| uploadArea.style.borderColor = 'rgba(255, 255, 255, 0.2)'; | |
| uploadArea.style.backgroundColor = 'var(--dark-surface)'; | |
| }); | |
| uploadArea.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| uploadArea.style.borderColor = 'rgba(255, 255, 255, 0.2)'; | |
| uploadArea.style.backgroundColor = 'var(--dark-surface)'; | |
| if (e.dataTransfer.files && e.dataTransfer.files[0]) { | |
| const file = e.dataTransfer.files[0]; | |
| if (file.type.match('image.*')) { | |
| displayImage(file); | |
| } | |
| } | |
| }); | |
| imageInput.addEventListener('change', (e) => { | |
| if (e.target.files && e.target.files[0]) { | |
| displayImage(e.target.files[0]); | |
| } | |
| }); | |
| function displayImage(file) { | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| inputImage.src = e.target.result; | |
| inputImage.style.display = 'block'; | |
| inputPreview.querySelector('.placeholder').style.display = 'none'; | |
| currentImage = inputImage; | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| // Example gallery handling | |
| document.querySelectorAll('.example-card').forEach(card => { | |
| card.addEventListener('click', () => { | |
| const exampleId = card.getAttribute('data-example'); | |
| loadExample(exampleId); | |
| // Switch to edit tab | |
| tabs.forEach(t => t.classList.remove('active')); | |
| document.querySelector('.tab[data-tab="edit"]').classList.add('active'); | |
| tabContents.forEach(content => content.classList.add('hidden')); | |
| document.getElementById('edit-tab').classList.remove('hidden'); | |
| }); | |
| }); | |
| function loadExample(exampleId) { | |
| showNotification(successNotification, `Example ${parseInt(exampleId)+1} loaded`); | |
| // Set example image | |
| const exampleImg = document.querySelector(`.example-card[data-example="${exampleId}"] .example-image`).src; | |
| inputImage.src = exampleImg; | |
| inputImage.style.display = 'block'; | |
| inputPreview.querySelector('.placeholder').style.display = 'none'; | |
| currentImage = inputImage; | |
| // Set sample prompts | |
| document.getElementById('prompt').value = 'Enhance this image with dramatic lighting'; | |
| document.getElementById('negativePrompt').value = 'blurry, distorted, low quality'; | |
| } | |
| // Notification functions | |
| function showNotification(notification, message) { | |
| if (message) { | |
| notification.querySelector('.notification-message').textContent = message; | |
| } | |
| notification.classList.add('show'); | |
| setTimeout(() => { | |
| notification.classList.remove('show'); | |
| }, 3000); | |
| } | |
| // API call for image editing | |
| async function generateEdit() { | |
| const prompt = document.getElementById('prompt').value; | |
| const negativePrompt = document.getElementById('negativePrompt').value; | |
| const guidance = parseFloat(guidanceScale.value); | |
| const stepsValue = parseInt(steps.value); | |
| if (!currentImage || currentImage.src.includes('data:') === false) { | |
| showNotification(errorNotification, 'Please upload an image first'); | |
| return; | |
| } | |
| if (!prompt) { | |
| showNotification(errorNotification, 'Please enter an edit prompt'); | |
| return; | |
| } | |
| // Show loading | |
| outputLoading.classList.add('active'); | |
| try { | |
| // Get base64 data from image | |
| const base64Data = currentImage.src.split(',')[1]; | |
| // Create payload | |
| const payload = { | |
| fn_index: 3, | |
| data: [ | |
| "data:image/png;base64," + base64Data, | |
| prompt, | |
| negativePrompt, | |
| guidance, | |
| stepsValue | |
| ] | |
| }; | |
| // Call API | |
| const response = await fetch(API_URL, { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify(payload) | |
| }); | |
| if (!response.ok) { | |
| throw new Error(`API error: ${response.status}`); | |
| } | |
| const data = await response.json(); | |
| if (data && data.data && data.data[0]) { | |
| // Set the result image | |
| resultImage.src = data.data[0]; | |
| resultImage.style.display = 'block'; | |
| document.querySelector('#outputPreview .placeholder').style.display = 'none'; | |
| editedImageData = data.data[0]; | |
| // Enable download button | |
| downloadBtn.disabled = false; | |
| showNotification(successNotification, 'Image edited successfully!'); | |
| } else { | |
| throw new Error('Invalid response from API'); | |
| } | |
| } catch (error) { | |
| console.error('Error:', error); | |
| showNotification(errorNotification, 'Failed to process image. Please try again.'); | |
| } finally { | |
| outputLoading.classList.remove('active'); | |
| } | |
| } | |
| // API call for text-to-image generation (using provided snippet) | |
| async function generateImage() { | |
| const prompt = document.getElementById('generatePrompt').value; | |
| const negativePrompt = document.getElementById('generateNegPrompt').value; | |
| const guidance = parseFloat(document.getElementById('genGuidanceScale').value); | |
| const stepsValue = parseInt(document.getElementById('genSteps').value); | |
| if (!prompt) { | |
| showNotification(errorNotification, 'Please enter a prompt'); | |
| return; | |
| } | |
| // Show loading | |
| generateLoading.classList.add('active'); | |
| try { | |
| // Create payload using provided snippet structure | |
| const payload = { | |
| fn_index: 4, | |
| data: [ | |
| prompt, | |
| negativePrompt || "blurry, bad anatomy", // Default if empty | |
| guidance, | |
| stepsValue | |
| ] | |
| }; | |
| // Call API | |
| const response = await fetch(API_URL, { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify(payload) | |
| }); | |
| if (!response.ok) { | |
| throw new Error(`API error: ${response.status}`); | |
| } | |
| const data = await response.json(); | |
| if (data && data.data && data.data[0]) { | |
| // Get image URL from response | |
| const imageUrl = data.data[0].url; | |
| // Set the generated image | |
| generatedImage.src = imageUrl; | |
| generatedImage.style.display = 'block'; | |
| document.querySelector('#generateOutputPreview .placeholder').style.display = 'none'; | |
| generatedImageData = imageUrl; | |
| // Enable download button | |
| downloadGeneratedBtn.disabled = false; | |
| showNotification(successNotification, 'Image generated successfully!'); | |
| } else { | |
| throw new Error('Invalid response from API'); | |
| } | |
| } catch (error) { | |
| console.error('Error:', error); | |
| showNotification(errorNotification, 'Failed to generate image. Please try again.'); | |
| } finally { | |
| generateLoading.classList.remove('active'); | |
| } | |
| } | |
| // Download functionality | |
| downloadBtn.addEventListener('click', () => { | |
| if (!editedImageData) return; | |
| const link = document.createElement('a'); | |
| link.href = editedImageData; | |
| link.download = 'cosxl-edited-image.jpg'; | |
| document.body.appendChild(link); | |
| link.click(); | |
| document.body.removeChild(link); | |
| }); | |
| downloadGeneratedBtn.addEventListener('click', () => { | |
| if (!generatedImageData) return; | |
| // Create temporary download link for generated image | |
| const link = document.createElement('a'); | |
| link.href = generatedImageData; | |
| link.download = 'cosxl-generated-image.jpg'; | |
| document.body.appendChild(link); | |
| link.click(); | |
| document.body.removeChild(link); | |
| }); | |
| // Reset functionality | |
| resetBtn.addEventListener('click', () => { | |
| resultImage.style.display = 'none'; | |
| document.querySelector('#outputPreview .placeholder').style.display = 'block'; | |
| downloadBtn.disabled = true; | |
| }); | |
| resetGenerateBtn.addEventListener('click', () => { | |
| generatedImage.style.display = 'none'; | |
| document.querySelector('#generateOutputPreview .placeholder').style.display = 'block'; | |
| downloadGeneratedBtn.disabled = true; | |
| }); | |
| // Initialize the app | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Set default values | |
| document.getElementById('prompt').value = 'Make the sky more dramatic with storm clouds'; | |
| document.getElementById('negativePrompt').value = 'blurry, distorted, low quality'; | |
| document.getElementById('generatePrompt').value = 'A beautiful landscape with mountains and a lake'; | |
| document.getElementById('generateNegPrompt').value = 'blurry, low quality'; | |
| // Initialize text-to-image sliders | |
| document.getElementById('genGuidanceValue').textContent = document.getElementById('genGuidanceScale').value; | |
| document.getElementById('genStepsValue').textContent = document.getElementById('genSteps').value; | |
| // Event listeners for text-to-image sliders | |
| document.getElementById('genGuidanceScale').addEventListener('input', function() { | |
| document.getElementById('genGuidanceValue').textContent = this.value; | |
| }); | |
| document.getElementById('genSteps').addEventListener('input', function() { | |
| document.getElementById('genStepsValue').textContent = this.value; | |
| }); | |
| // Show first tab | |
| document.getElementById('edit-tab').classList.remove('hidden'); | |
| // Attach event listeners | |
| generateImageBtn.addEventListener('click', generateImage); | |
| }); | |
| </script> | |
| </body> | |
| </html> |