Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Perfume Composer</title> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> | |
| </head> | |
| <body> | |
| <header class="page-header"> | |
| <h1>AI Perfume Composer</h1> | |
| <p> | |
| Upload an image that inspires you. Our AI will analyze it and compose a unique perfume concept, | |
| complete with a name, slogan, and base aroma blend. Then, watch the virtual dispenser create it! | |
| </p> | |
| </header> | |
| <div class="main-content-wrapper"> | |
| <aside class="aroma-info-panel"> | |
| <div class="perfume-details"> | |
| <h2 id="perfumeNameDisplay">{{ initial_data.perfume_name }}</h2> | |
| <p id="perfumeSloganDisplay"><em>{{ initial_data.slogan }}</em></p> | |
| </div> | |
| <div class="aroma-legend"> | |
| <h3>Base Aromas & Doses</h3> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>#</th> | |
| <th>Color</th> | |
| <th>Name</th> | |
| <th>Dose</th> | |
| </tr> | |
| </thead> | |
| <tbody id="aromaLegendBody"> | |
| <!-- Populated by JS --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </aside> | |
| <main class="app-area"> | |
| <div class="image-upload-section"> | |
| <label for="imageUploadInput" class="image-upload-label"> | |
| <img id="imagePreview" src="{{ url_for('static', filename='img/placeholder.png') }}" alt="Upload Image Preview"> | |
| <span>Click to Upload Image</span> | |
| </label> | |
| <input type="file" id="imageUploadInput" accept="image/*" style="display: none;"> | |
| <button id="analyzeImageBtn" disabled>Analyze Image & Compose</button> | |
| <div id="loadingIndicator" style="display: none;">Analyzing Image... Please Wait...</div> | |
| <div id="apiErrorDisplay" class="error-message" style="display: none;"></div> | |
| </div> | |
| <div class="dispenser-area" id="dispenserArea"> | |
| <div class="motor-base"></div> | |
| <div class="drum" id="drumElement"></div> | |
| <div class="perfume-flask" id="perfumeFlask"> | |
| <div class="perfume-liquid" id="perfumeLiquid"></div> | |
| </div> | |
| <div class="dispensing-stream" id="dispensingStream"></div> | |
| </div> | |
| <div class="controls" style="display: none;"> <!-- Hidden initially, shown during animation --> | |
| <div class="display" id="controlsDisplay">Preparing...</div> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| </script> | |
| <script src="{{ url_for('static', filename='js/script.js') }}"></script> | |
| </body> | |
| </html> |