Upload 9 files

Dockerfile

@@ -0,0 +1,45 @@
+# Base image with Python
+FROM python:3.12
+
+# Set environment variables to prevent Python from buffering stdout and stderr
+ENV PYTHONUNBUFFERED=1
+# Set environment variable for Gradio Client to allow Hugging Face Hub downloads
+ENV GRADIO_DOWNLOAD_REQUEST_TIMEOUT=180
+# (Optional) For Gradio/HF specific caching, though usually handled by Spaces.
+# ENV HF_HOME="/app/.cache/huggingface"
+# ENV GRADIO_TEMP_DIR="/app/.cache/gradio"
+
+# Create a non-root user and group
+RUN groupadd -r appgroup && useradd --no-log-init -r -g appgroup -u 1000 appuser
+
+# Create app directory and necessary subdirectories, and set permissions
+RUN mkdir -p /app/uploads /app/static /app/templates \
+    && chown -R appuser:appgroup /app
+
+# Set working directory
+WORKDIR /app
+
+# Switch to the non-root user
+USER appuser
+
+# Copy requirements first to leverage Docker cache
+COPY --chown=appuser:appgroup ./requirements.txt requirements.txt
+
+# Install dependencies for the non-root user
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+# (Optional) If you use a .env file for API_TOKEN_HF
+# COPY --chown=appuser:appgroup .env .env
+
+# Copy the rest of the application code
+COPY --chown=appuser:appgroup . /app
+
+# Expose the port the app runs on (matches CMD)
+EXPOSE 7860
+
+# Command to run the application using Gunicorn
+# Gunicorn is a WSGI HTTP Server for UNIX, commonly used for deploying Flask apps.
+# app:app refers to the 'app' Flask instance within your 'app.py' file.
+# We bind to 0.0.0.0 so it's accessible from outside the container.
+# The port 7860 is standard for Gradio apps on Hugging Face Spaces.
+CMD ["gunicorn", "--workers", "1", "--bind", "0.0.0.0:7860", "app:app"]

requirements.txt

@@ -0,0 +1,4 @@
+python-dotenv
+gradio_client
+flask
+gunicorn

static/css/style.css

@@ -0,0 +1,466 @@
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-height: 100vh;
+    background-color: #f0f2f5;
+    margin: 0;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.page-header {
+    text-align: center;
+    margin-bottom: 25px;
+    color: #333;
+    width: 100%;
+    max-width: 860px; /* Match main content max-width */
+}
+
+.page-header h1 {
+    font-size: 2.2em;
+    margin-bottom: 8px;
+    color: #2c3e50;
+}
+
+.page-header p {
+    font-size: 1.1em;
+    color: #555;
+    line-height: 1.6;
+}
+
+.main-content-wrapper {
+    display: flex;
+    flex-direction: row;
+    gap: 25px;
+    width: 100%;
+    max-width: 860px; /* Adjusted max-width */
+    align-items: flex-start;
+}
+
+.aroma-info-panel {
+    flex-basis: 280px; /* Increased width for perfume details */
+    flex-shrink: 0;
+    background-color: #ffffff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+}
+
+.perfume-details {
+    text-align: center;
+    margin-bottom: 20px;
+    padding-bottom: 15px;
+    border-bottom: 1px solid #e0e0e0;
+}
+.perfume-details h2 {
+    font-size: 1.6em;
+    color: #34495e;
+    margin-top: 0;
+    margin-bottom: 5px;
+}
+.perfume-details p {
+    font-size: 1em;
+    color: #666;
+    font-style: italic;
+    margin-top: 0;
+}
+
+
+.aroma-legend h3 { /* Changed from h2 */
+    font-size: 1.2em; /* Adjusted size */
+    color: #34495e;
+    margin-top: 0;
+    margin-bottom: 15px;
+    text-align: center;
+}
+
+.aroma-legend table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.aroma-legend th, .aroma-legend td {
+    text-align: left;
+    padding: 8px 5px;
+    font-size: 0.9em; /* Slightly smaller for compactness */
+    border-bottom: 1px solid #f0f0f0;
+    vertical-align: middle;
+}
+.aroma-legend th {
+    color: #555;
+    font-weight: 600;
+}
+.aroma-legend tr:last-child td {
+    border-bottom: none;
+}
+.aroma-legend td:nth-child(1), .aroma-legend th:nth-child(1) { /* # column */
+    text-align: center;
+    width: 20px;
+}
+.aroma-legend td:nth-child(4), .aroma-legend th:nth-child(4) { /* Dose column */
+    text-align: right;
+    width: 40px;
+    font-weight: bold;
+}
+
+
+.color-swatch {
+    display: inline-block;
+    width: 16px; /* Adjusted size */
+    height: 16px;
+    border-radius: 3px;
+    border: 1px solid #ccc;
+    margin-right: 6px;
+    vertical-align: middle;
+}
+
+.app-area {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 0; /* Important for flex item to shrink properly */
+}
+
+/* Image Upload Section */
+.image-upload-section {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+    text-align: center;
+    margin-bottom: 20px;
+    width: 100%;
+    max-width: 400px; /* Match dispenser width */
+}
+
+.image-upload-label {
+    display: block;
+    width: 100%;
+    height: 200px; /* Adjust as needed */
+    border: 2px dashed #ccc;
+    border-radius: 6px;
+    cursor: pointer;
+    margin-bottom: 15px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: #f9f9f9;
+    overflow: hidden; /* To contain the image */
+}
+.image-upload-label:hover {
+    border-color: #999;
+}
+.image-upload-label img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain; /* Changed from cover to contain for placeholder */
+}
+.image-upload-label span {
+    margin-top: 10px;
+    color: #777;
+    font-size: 0.9em;
+}
+.image-upload-section button {
+    padding: 10px 20px;
+    font-size: 1em;
+    background-color: #5cb85c;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+.image-upload-section button:hover {
+    background-color: #4cae4c;
+}
+.image-upload-section button:disabled {
+    background-color: #ccc;
+    cursor: not-allowed;
+}
+#loadingIndicator {
+    margin-top: 10px;
+    color: #337ab7;
+}
+.error-message {
+    color: red;
+    font-size: 0.9em;
+    margin-top: 10px;
+}
+
+
+.dispenser-area {
+    position: relative;
+    width: 100%; /* Make it responsive within its container */
+    max-width: 400px; /* Max size of the dispenser visuals */
+    aspect-ratio: 400 / 450; /* Maintain aspect ratio */
+    height: auto; /* Let aspect-ratio define height */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start; /* Aligns drum to top */
+    margin-bottom: 20px;
+    border: 2px solid #b0b0b0;
+    padding: 5%; /* Use percentage padding */
+    background-color: #fdfdfd;
+    border-radius: 10px;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+    box-sizing: border-box;
+}
+
+.motor-base {
+    width: 15%; /* Relative width */
+    height: 7.5%; /* Relative height */
+    background-color: #6c757d;
+    border-radius: 5px;
+    position: absolute;
+    /* Position relative to drum */
+    top: calc(7.5% + 31.25% - 3.75%); /* drum.marginTop + drum.height/2 - motor.height/2 */
+    left: 50%;
+    transform: translateX(-50%);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+.drum {
+    width: 62.5%; /* 250px / 400px */
+    height: 62.5%; /* 250px / 400px */
+    background-image: radial-gradient(circle, #e0e0e0, #c0c0c0 60%, #a0a0a0);
+    border-radius: 50%;
+    position: relative;
+    margin-top: 7.5%; /* 30px / 400px */
+    border: 1%; /* 4px / 400px */
+    border-style: solid;
+    border-color: #555;
+    box-shadow: 0 1% 3% rgba(0,0,0,0.25), inset 0 0 4.5% rgba(0,0,0,0.1);
+    transition: transform 0.7s ease-in-out;
+    transform-style: preserve-3d;
+    z-index: 2;
+    box-sizing: border-box;
+}
+
+.drum::before {
+    content: '';
+    position: absolute;
+    width: 14%; /* 35px / 250px drum width */
+    height: 14%;
+    background-color: #4a4a4a;
+    border-radius: 50%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border: 1.2%; /* 3px / 250px */
+    border-style: solid;
+    border-color: #333;
+    box-shadow: inset 0 0 3.2% rgba(0,0,0,0.6);
+    z-index: 3;
+}
+
+.bottle-slot {
+    position: absolute;
+    width: 9.6%; /* 24px / 250px drum width */
+    height: 50%; /* Drum radius */
+    left: calc(50% - 4.8%); /* 50% - (width/2) */
+    top: 50%;
+    transform-origin: center top;
+    z-index: 4;
+}
+
+.base-aroma-bottle {
+    width: 100%; /* Full width of slot */
+    height: 36%; /* 45px / 125px slot height */
+    border: 0.8%; /* 1px / 125px slot height */
+    border-style: solid;
+    border-color: #4a2d0a;
+    border-radius: 5px 5px 3px 3px; /* Keep somewhat fixed for shape */
+    position: absolute;
+    bottom: -4%; /* -5px / 125px */
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.7em; /* Make font responsive */
+    font-weight: bold;
+    color: white;
+    text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
+    box-shadow: 1px 2px 5px rgba(0,0,0,0.3);
+    cursor: default;
+    box-sizing: border-box;
+}
+
+.base-aroma-bottle::before {
+    content: '';
+    position: absolute;
+    top: -15.5%; /* -7px / 45px bottle height */
+    left: 50%;
+    transform: translateX(-50%);
+    width: 66.6%; /* 16px / 24px bottle width */
+    height: 15.5%; /* 7px / 45px bottle height */
+    background-color: #282828;
+    border-radius: 3px 3px 0 0;
+    border: 0.4%; /* 1px / 250px drum width (approx for small elements) */
+    border-style: solid;
+    border-color: #111;
+}
+
+.perfume-flask {
+    width: 13.75%; /* 55px / 400px */
+    height: 20%;    /* 90px / 450px */
+    background-color: rgba(200, 225, 255, 0.75);
+    border: 0.5%; /* 2px / 400px */
+    border-style: solid;
+    border-color: #adcdea;
+    border-radius: 6px 6px 25px 25px;
+    position: absolute;
+    bottom: 5.5%; /* 25px / 450px */
+    left: 50%;
+    transform: translateX(-50%);
+    box-shadow: 0 0.8% 1.6% rgba(0,0,0,0.1);
+    z-index: 3;
+    box-sizing: border-box;
+}
+.perfume-flask::before {
+    content: '';
+    position: absolute;
+    top: -20%; /* -18px / 90px flask height */
+    left: 50%;
+    transform: translateX(-50%);
+    width: 40%; /* 22px / 55px flask width */
+    height: 20%; /* 18px / 90px flask height */
+    background-color: rgba(200, 225, 255, 0.75);
+    border: 0.5%; /* 2px / 400px */
+    border-style: solid;
+    border-color: #adcdea;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    border-bottom: none;
+}
+.perfume-liquid {
+    width: 100%;
+    height: 0%;
+    position: absolute;
+    bottom: 0;
+    border-radius: 0 0 23px 23px;
+    transition: height 0.5s ease-out, background-color 0.5s ease;
+}
+
+.dispensing-stream {
+    position: absolute;
+    width: 0.75%; /* 3px / 400px */
+    height: 0px;
+    left: 50%;
+    transform: translateX(-50%);
+    transition: height 0.25s ease-out;
+    z-index: 1; /* Behind drum */
+    border-radius: 2px;
+}
+
+.controls {
+    display: flex; /* Will be shown by JS */
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    padding: 20px;
+    background-color: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+    width: 100%;
+    max-width: 400px; /* Match dispenser max width */
+    margin-top: 10px; /* Space from dispenser if it's visible */
+}
+.control-group {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    justify-content: space-between;
+}
+ .control-group label, .control-group > span:not(#aromaNumberDisplay):not(#doseDisplay) {
+    flex-shrink: 0;
+}
+#doseSlider {
+    flex-grow: 1;
+}
+
+.controls button {
+    padding: 10px 18px;
+    font-size: 1em;
+    font-weight: 500;
+    cursor: pointer;
+    border: 1px solid #ced4da;
+    background-color: #f8f9fa;
+    color: #343a40;
+    border-radius: 5px;
+    transition: background-color 0.2s, box-shadow 0.2s;
+}
+.controls button:hover {
+    background-color: #e9ecef;
+    border-color: #adb5bd;
+}
+.controls button:active {
+    background-color: #dee2e6;
+    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
+}
+.controls button:disabled {
+    background-color: #e9ecef;
+    color: #6c757d;
+    cursor: not-allowed;
+}
+.display { /* This is for the animation controls display */
+    padding: 10px 15px;
+    background-color: #343a40;
+    color: #90ee90;
+    border-radius: 4px;
+    width: calc(100% - 30px); /* Full width minus padding */
+    text-align: center;
+    font-family: 'Consolas', 'Courier New', monospace;
+    font-size: 1em;
+    border: 1px solid #495057;
+    margin-bottom: 5px;
+}
+
+/* Adaptive Design */
+@media (max-width: 880px) { /* Slightly wider than main content for smoother transition */
+    .main-content-wrapper {
+        flex-direction: column;
+        align-items: center; /* Center items when stacked */
+        gap: 20px;
+    }
+    .aroma-info-panel {
+        flex-basis: auto; /* Allow it to take full width */
+        width: 100%;
+        max-width: 450px; /* Limit width when stacked */
+    }
+    .app-area {
+        width: 100%;
+        align-items: center; /* Ensure app area children are centered */
+    }
+    .image-upload-section, .dispenser-area, .controls {
+        max-width: 450px; /* Allow them to be a bit wider if info panel is full width */
+    }
+}
+
+@media (max-width: 480px) {
+    .page-header h1 {
+        font-size: 1.8em;
+    }
+    .page-header p {
+        font-size: 1em;
+    }
+    .aroma-info-panel, .image-upload-section, .dispenser-area, .controls {
+        padding: 15px;
+    }
+    .controls button, .display, .image-upload-section button {
+        font-size: 0.9em;
+    }
+    .aroma-legend th, .aroma-legend td {
+        font-size: 0.85em;
+        padding: 6px 3px;
+    }
+    .base-aroma-bottle {
+        font-size: 0.6em; /* Further reduce for very small screens */
+    }
+}

static/js/script.js

@@ -0,0 +1,278 @@
+// static/js/script.js
+
+document.addEventListener('DOMContentLoaded', function () {
+    const drumElement = document.getElementById('drumElement');
+    const controlsDisplay = document.getElementById('controlsDisplay'); // For animation messages
+    const perfumeLiquid = document.getElementById('perfumeLiquid');
+    const perfumeFlask = document.getElementById('perfumeFlask');
+    const dispensingStream = document.getElementById('dispensingStream');
+    const dispenserArea = document.getElementById('dispenserArea'); // Parent of stream
+    const aromaLegendBody = document.getElementById('aromaLegendBody');
+    const controlsElement = document.querySelector('.controls'); // The whole controls div for animation
+
+    // Image Upload Elements
+    const imageUploadInput = document.getElementById('imageUploadInput');
+    const imagePreview = document.getElementById('imagePreview');
+    const analyzeImageBtn = document.getElementById('analyzeImageBtn');
+    const imageUploadLabelSpan = document.querySelector('.image-upload-label span');
+    const placeholderSrc = imagePreview.src; // Store initial placeholder
+    const loadingIndicator = document.getElementById('loadingIndicator');
+    const apiErrorDisplay = document.getElementById('apiErrorDisplay');
+
+    // Perfume Info Display Elements
+    const perfumeNameDisplay = document.getElementById('perfumeNameDisplay');
+    const perfumeSloganDisplay = document.getElementById('perfumeSloganDisplay');
+
+    const NUM_AROMAS = BASE_AROMAS_ORDERED.length;
+    const AROMA_COLORS_MAP = {
+        "Rose": '#FF69B4', "Ocean Breeze": '#1E90FF', "Fresh Cut Grass": '#32CD32',
+        "Lemon Zest": '#FFD700', "Lavender": '#BA55D3', "Sweet Orange": '#FF7F50',
+        "Cool Mint": '#00CED1', "Vanilla Bean": '#F4A460', "Wild Berry": '#DA70D6',
+        "Spring Rain": '#87CEEB'
+    };
+
+    // --- CORRECTED ---
+    const MAX_FLASK_CAPACITY_ML = 10.0; // The API aims for a total dose of 10.0 for 100% full
+    // --- END CORRECTED ---
+
+    let totalLiquidInFlask = 0;
+
+    function populateAromaLegend(apiAromasData = []) { // Ensure it's an array
+        aromaLegendBody.innerHTML = '';
+        const apiAromas = Array.isArray(apiAromasData) ? apiAromasData : [];
+        const apiAromasMap = new Map(apiAromas.map(a => [a.name, parseFloat(a.dose) || 0]));
+
+
+        BASE_AROMAS_ORDERED.forEach((aromaName, index) => {
+            const row = aromaLegendBody.insertRow();
+            const cellNum = row.insertCell();
+            const cellColor = row.insertCell();
+            const cellName = row.insertCell();
+            const cellDose = row.insertCell();
+
+            cellNum.textContent = index + 1;
+            const color = AROMA_COLORS_MAP[aromaName] || '#ccc';
+            cellColor.innerHTML = `<span class="color-swatch" style="background-color: ${color};"></span>`;
+            cellName.textContent = aromaName;
+
+            const doseValue = apiAromasMap.get(aromaName) || 0.0;
+            // Display dose with 1 or 2 decimal places, or "—" if 0
+            cellDose.textContent = doseValue > 0 ? doseValue.toFixed(doseValue % 1 === 0 ? 1 : 2) : "—";
+        });
+    }
+
+    function createBottles() {
+        drumElement.innerHTML = '';
+        const angleStep = 360 / NUM_AROMAS;
+        BASE_AROMAS_ORDERED.forEach((aromaName, i) => {
+            const angle = i * angleStep;
+            const slot = document.createElement('div');
+            slot.classList.add('bottle-slot');
+            slot.style.transform = `rotate(${angle}deg)`;
+
+            const bottle = document.createElement('div');
+            bottle.classList.add('base-aroma-bottle');
+            bottle.textContent = i + 1;
+            bottle.style.backgroundColor = AROMA_COLORS_MAP[aromaName] || '#ccc';
+            bottle.title = aromaName;
+
+            slot.appendChild(bottle);
+            drumElement.appendChild(slot);
+        });
+    }
+
+    function rotateDrum(aromaIndex) {
+        const angleStep = 360 / NUM_AROMAS;
+        let drumRotation = -(aromaIndex * angleStep);
+        drumElement.style.transform = `rotate(${drumRotation}deg)`;
+    }
+
+    function delay(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+
+    async function simulateDispensing(aromaName, dose) { // dose is now the absolute amount e.g. 0.4, 1.5 etc.
+        const aromaIndex = BASE_AROMAS_ORDERED.indexOf(aromaName);
+        if (aromaIndex === -1) {
+            console.warn(`Aroma "${aromaName}" not found in base list for simulation.`);
+            return;
+        }
+
+        controlsDisplay.textContent = `Selecting ${aromaName}...`;
+        rotateDrum(aromaIndex);
+        await delay(1000);
+
+        // --- CORRECTED ---
+        // Display the actual dose amount being dispensed.
+        // The API returns dose like 0.4, which means 0.4 units out of 10.0 total for the flask.
+        controlsDisplay.textContent = `Dispensing ${dose.toFixed(2)} units of ${aromaName}...`;
+        // --- END CORRECTED ---
+
+        const streamStartY_relative = drumElement.offsetTop;
+        const flaskRect = perfumeFlask.getBoundingClientRect();
+        const dispenserAreaRect = dispenserArea.getBoundingClientRect();
+        const flaskNeckTopY_relative = (flaskRect.top - dispenserAreaRect.top) - 18;
+
+        let streamHeight = flaskNeckTopY_relative - streamStartY_relative;
+        streamHeight = Math.max(10, streamHeight);
+
+        dispensingStream.style.top = `${streamStartY_relative}px`;
+        dispensingStream.style.backgroundColor = AROMA_COLORS_MAP[aromaName] || '#ccc';
+        dispensingStream.style.height = `${streamHeight}px`;
+        await delay(250);
+
+        // --- CORRECTED ---
+        totalLiquidInFlask += dose; // Add the absolute dose amount
+        // Calculate fill percentage based on MAX_FLASK_CAPACITY_ML which is 10.0
+        const fillPercentage = Math.min(100, (totalLiquidInFlask / MAX_FLASK_CAPACITY_ML) * 100);
+        // --- END CORRECTED ---
+
+        perfumeLiquid.style.backgroundColor = AROMA_COLORS_MAP[aromaName] || '#ccc';
+        perfumeLiquid.style.height = `${fillPercentage}%`;
+        await delay(600);
+
+        dispensingStream.style.height = '0px';
+        await delay(300);
+    }
+
+    async function runDispensingSequence(aromasToDispense) {
+        controlsElement.style.display = 'flex';
+        totalLiquidInFlask = 0;
+        perfumeLiquid.style.height = '0%';
+        perfumeLiquid.style.backgroundColor = 'transparent';
+
+        // Ensure aromasToDispense is an array
+        const aromas = Array.isArray(aromasToDispense) ? aromasToDispense : [];
+
+        for (const aroma of aromas) {
+            // Ensure dose is a number before using it
+            const doseValue = parseFloat(aroma.dose);
+            if (aroma.name && !isNaN(doseValue) && doseValue > 0) {
+                await simulateDispensing(aroma.name, doseValue);
+            } else {
+                console.warn("Skipping aroma with invalid name or dose:", aroma);
+            }
+        }
+
+        controlsDisplay.textContent = "Perfume Composition Complete!";
+        await delay(2000);
+        // controlsElement.style.display = 'none';
+    }
+
+    imageUploadInput.addEventListener('change', function(event) {
+        const file = event.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                imagePreview.src = e.target.result;
+                imageUploadLabelSpan.style.display = 'none';
+            }
+            reader.readAsDataURL(file);
+            analyzeImageBtn.disabled = false;
+            apiErrorDisplay.style.display = 'none';
+        }
+    });
+
+    analyzeImageBtn.addEventListener('click', async function() {
+        const file = imageUploadInput.files[0];
+        if (!file) {
+            apiErrorDisplay.textContent = "Please select an image first.";
+            apiErrorDisplay.style.display = 'block';
+            return;
+        }
+
+        analyzeImageBtn.disabled = true;
+        loadingIndicator.style.display = 'block';
+        apiErrorDisplay.style.display = 'none';
+        controlsElement.style.display = 'none'; // Hide animation controls during analysis
+
+        const formData = new FormData();
+        formData.append('imageFile', file);
+
+        try {
+            const response = await fetch('/analyze_image', {
+                method: 'POST',
+                body: formData
+            });
+
+            const responseText = await response.text(); // Get raw text first
+            loadingIndicator.style.display = 'none';
+            analyzeImageBtn.disabled = false;
+
+            let data;
+            if (!response.ok) {
+                 // Try to parse error if backend sends JSON error
+                try {
+                    data = JSON.parse(responseText);
+                    apiErrorDisplay.textContent = `Error: ${data.error || response.statusText}`;
+                } catch (e) {
+                    apiErrorDisplay.textContent = `Error: ${response.statusText} (Could not parse error response)`;
+                }
+                apiErrorDisplay.style.display = 'block';
+                updateUiWithPerfumeData(initialPerfumeData);
+                return;
+            }
+
+            // If response.ok, try to parse the expected JSON from the backend
+            try {
+                // Clean the response string if it's wrapped in markdown code blocks
+                let cleanedResponseText = responseText;
+                if (cleanedResponseText.startsWith("```json")) {
+                    cleanedResponseText = cleanedResponseText.substring(7); // Remove ```json\n
+                    if (cleanedResponseText.endsWith("```")) {
+                        cleanedResponseText = cleanedResponseText.substring(0, cleanedResponseText.length - 3);
+                    }
+                }
+                cleanedResponseText = cleanedResponseText.trim();
+                data = JSON.parse(cleanedResponseText);
+            } catch (e) {
+                console.error("Error parsing JSON from API:", e, "Raw text:", responseText);
+                apiErrorDisplay.textContent = "Error: Could not parse perfume data from AI. Please try a different image or prompt.";
+                apiErrorDisplay.style.display = 'block';
+                updateUiWithPerfumeData(initialPerfumeData);
+                return;
+            }
+
+            if (data.api_error || data.api_warning) { // Check for errors/warnings from backend logic
+                apiErrorDisplay.textContent = data.api_error || data.api_warning;
+                apiErrorDisplay.style.display = 'block';
+            }
+
+            updateUiWithPerfumeData(data);
+            if (data.aromas && data.aromas.length > 0) {
+                runDispensingSequence(data.aromas);
+            }
+
+
+        } catch (error) {
+            console.error('Error sending image or processing response:', error);
+            loadingIndicator.style.display = 'none';
+            analyzeImageBtn.disabled = false;
+            apiErrorDisplay.textContent = "An unexpected error occurred. Please try again.";
+            apiErrorDisplay.style.display = 'block';
+            updateUiWithPerfumeData(initialPerfumeData);
+        }
+    });
+
+    function updateUiWithPerfumeData(data) {
+        perfumeNameDisplay.textContent = data.perfume_name || "Untitled Creation";
+        perfumeSloganDisplay.innerHTML = `<em>${data.slogan || "An enigmatic essence."}</em>`;
+        populateAromaLegend(data.aromas || []); // Pass the aromas array
+    }
+
+    function initializeApp() {
+        updateUiWithPerfumeData(initialPerfumeData);
+        createBottles();
+
+        const initialAromaName = (initialPerfumeData.aromas && initialPerfumeData.aromas.length > 0)
+                                ? initialPerfumeData.aromas[0].name
+                                : BASE_AROMAS_ORDERED[0];
+
+        let initialAromaIndex = BASE_AROMAS_ORDERED.indexOf(initialAromaName);
+        if(initialAromaIndex === -1) initialAromaIndex = 0;
+
+        rotateDrum(initialAromaIndex);
+    }
+
+    initializeApp();
+});

templates/index.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<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>
+        // Pass initial data from Flask to JavaScript
+        const initialPerfumeData = {{ initial_data | tojson }};
+        const BASE_AROMAS_ORDERED = {{ base_aromas_ordered | tojson }};
+    </script>
+    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
+</body>
+</html>

upload/readme.md

@@ -0,0 +1,4 @@
+python-dotenv
+requests
+gradio_client
+flask

uploads/readme.md

@@ -0,0 +1,4 @@
+python-dotenv
+requests
+gradio_client
+flask

vk-tunnel-config.json

@@ -0,0 +1,14 @@
+{
+    "endpoints": [
+        "analyze_image",
+        "static",
+        "css",
+        "js",
+        "templates",
+        "upload",
+        "uploads"
+    ],
+    "port": "5001",
+    "http-protocol": "http",
+    "insecure": "1"
+}