Spaces:

Simonc-44
/

IA_API

Runtime error

App Files Files Community

Simonc-44 commited on Jan 17

Commit

3ad6837

verified ·

1 Parent(s): ea96bdc

Update index.html

Browse files

Files changed (1) hide show

index.html +340 -17

index.html CHANGED Viewed

@@ -3,28 +3,338 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Cygnis Image Gen</title>
     <style>
-        body { font-family: sans-serif; background: #111; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; }
-        input { padding: 10px; width: 300px; border-radius: 5px; border: none; }
-        button { padding: 10px 20px; background: #8b5cf6; color: white; border: none; border-radius: 5px; cursor: pointer; margin-left: 10px; }
-        button:disabled { background: #555; }
-        #result { margin-top: 20px; max-width: 512px; }
-        img { width: 100%; border-radius: 10px; }
     </style>
 </head>
 <body>
-    <h1>Cygnis Image Generator (DALL-E Mini)</h1>
-    <div>
-        <input type="text" id="prompt" placeholder="Un chat dans l'espace...">
-        <button id="btn">Générer</button>
     </div>
-    <div id="result"></div>
     <script>
-        const btn = document.getElementById('btn');
         const prompt = document.getElementById('prompt');
-        const result = document.getElementById('result');
         btn.addEventListener('click', async () => {
             const text = prompt.value;
@@ -32,7 +342,9 @@
             btn.disabled = true;
             btn.textContent = "Génération...";
-            result.innerHTML = '<p>Calcul en cours (peut prendre 1-2 min sur CPU)...</p>';
             try {
                 const res = await fetch('/generate', {
@@ -44,9 +356,20 @@
                 if (!res.ok) throw new Error("Erreur serveur");
                 const data = await res.json();
-                result.innerHTML = `<img src="${data.image_url}" alt="Image générée">`;
             } catch (e) {
-                result.innerHTML = `<p style="color:red">Erreur: ${e.message}</p>`;
             } finally {
                 btn.disabled = false;
                 btn.textContent = "Générer";

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cygnis Image Studio</title>
+    <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=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+    <script src="https://unpkg.com/lucide@latest"></script>
     <style>
+        :root {
+            --bg-app: #1e1e1e;
+            --bg-panel: #252526;
+            --bg-canvas: #111111;
+            --border: #3e3e42;
+            --accent: #0f64d2;
+            --text: #cccccc;
+            --text-light: #ffffff;
+            --toolbar-width: 50px;
+            --panel-width: 300px;
+        }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            background-color: var(--bg-app);
+            color: var(--text);
+            font-family: 'Inter', sans-serif;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            font-size: 12px;
+            user-select: none;
+        }
+        /* --- MENU BAR --- */
+        .menubar {
+            height: 30px;
+            background-color: #2d2d2d;
+            display: flex;
+            align-items: center;
+            padding: 0 10px;
+            border-bottom: 1px solid #000;
+        }
+        .menu-item { padding: 0 10px; cursor: pointer; }
+        .menu-item:hover { background: #3e3e42; color: white; }
+        /* --- MAIN LAYOUT --- */
+        .workspace {
+            display: flex;
+            flex: 1;
+            overflow: hidden;
+        }
+        /* --- TOOLBAR (LEFT) --- */
+        .toolbar {
+            width: var(--toolbar-width);
+            background-color: var(--bg-panel);
+            border-right: 1px solid #000;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding-top: 10px;
+            gap: 5px;
+        }
+        .tool-btn {
+            width: 36px; height: 36px;
+            display: flex; align-items: center; justify-content: center;
+            border-radius: 3px;
+            cursor: pointer;
+            color: #a0a0a0;
+            transition: all 0.1s;
+        }
+        .tool-btn:hover { background: #3e3e42; color: white; }
+        .tool-btn.active { background: #3e3e42; color: var(--accent); border-left: 2px solid var(--accent); }
+        /* --- CENTER AREA (CANVAS + GALLERY) --- */
+        .center-area {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            background-color: var(--bg-canvas);
+        }
+        .canvas-area {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            overflow: hidden;
+            border-bottom: 1px solid #000;
+        }
+        .canvas-wrapper {
+            width: 512px; height: 512px;
+            background-color: white;
+            box-shadow: 0 0 20px rgba(0,0,0,0.5);
+            background-image:
+                linear-gradient(45deg, #ccc 25%, transparent 25%),
+                linear-gradient(-45deg, #ccc 25%, transparent 25%),
+                linear-gradient(45deg, transparent 75%, #ccc 75%),
+                linear-gradient(-45deg, transparent 75%, #ccc 75%);
+            background-size: 20px 20px;
+            background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+            display: flex; align-items: center; justify-content: center;
+        }
+        .generated-image {
+            width: 100%; height: 100%;
+            object-fit: contain;
+            display: none;
+        }
+        /* --- GALLERY PANEL (BOTTOM) --- */
+        .gallery-panel {
+            height: 150px;
+            background-color: var(--bg-panel);
+            display: flex;
+            flex-direction: column;
+        }
+        .gallery-content {
+            flex: 1;
+            padding: 10px;
+            display: flex;
+            gap: 10px;
+            overflow-x: auto;
+        }
+        .gallery-item {
+            width: 100px; height: 100px;
+            background: #333;
+            border: 1px solid #444;
+            cursor: pointer;
+            position: relative;
+        }
+        .gallery-item:hover { border-color: var(--accent); }
+        .gallery-item img { width: 100%; height: 100%; object-fit: cover; }
+        /* --- PROPERTIES PANEL (RIGHT) --- */
+        .properties {
+            width: var(--panel-width);
+            background-color: var(--bg-panel);
+            border-left: 1px solid #000;
+            display: flex;
+            flex-direction: column;
+        }
+        .panel-header {
+            padding: 8px 12px;
+            background: #333;
+            font-weight: 600;
+            border-bottom: 1px solid #000;
+            border-top: 1px solid #444;
+            color: #eee;
+            font-size: 11px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        .panel-content {
+            padding: 15px;
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+        }
+        .control-group {
+            display: flex; flex-direction: column; gap: 6px;
+        }
+        label { color: #ccc; font-size: 11px; font-weight: 600; }
+        textarea {
+            background: #181818;
+            border: 1px solid #444;
+            color: white;
+            padding: 8px;
+            border-radius: 2px;
+            resize: none;
+            height: 100px;
+            font-family: inherit;
+            font-size: 12px;
+        }
+        textarea:focus { border-color: var(--accent); outline: none; }
+        .btn-primary {
+            background: var(--accent);
+            color: white;
+            border: none;
+            padding: 8px;
+            border-radius: 2px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: background 0.2s;
+        }
+        .btn-primary:hover { background: #1473e6; }
+        .btn-primary:disabled { background: #444; color: #888; cursor: not-allowed; }
+        /* --- LOADER --- */
+        .loader {
+            width: 40px; height: 40px;
+            border: 3px solid rgba(255,255,255,0.1);
+            border-top-color: var(--accent);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            display: none;
+        }
+        @keyframes spin { to { transform: rotate(360deg); } }
+        .status-bar {
+            height: 24px;
+            background: #2d2d2d;
+            border-top: 1px solid #000;
+            display: flex; align-items: center;
+            padding: 0 10px;
+            font-size: 11px;
+            color: #aaa;
+            justify-content: space-between;
+        }
     </style>
 </head>
 <body>
+    <!-- MENU BAR -->
+    <div class="menubar">
+        <div class="menu-item" style="font-weight:700; color:#0f64d2;">Ps</div>
+        <div class="menu-item">Fichier</div>
+        <div class="menu-item">Édition</div>
+        <div class="menu-item">Image</div>
+        <div class="menu-item">Calque</div>
+        <div class="menu-item">Sélection</div>
+        <div class="menu-item">Filtre</div>
+        <div class="menu-item">Affichage</div>
+        <div class="menu-item">Fenêtre</div>
+        <div class="menu-item">Aide</div>
+    </div>
+    <div class="workspace">
+        <!-- TOOLBAR -->
+        <div class="toolbar">
+            <div class="tool-btn active"><i data-lucide="move"></i></div>
+            <div class="tool-btn"><i data-lucide="crop"></i></div>
+            <div class="tool-btn"><i data-lucide="lasso"></i></div>
+            <div class="tool-btn"><i data-lucide="brush"></i></div>
+            <div class="tool-btn"><i data-lucide="eraser"></i></div>
+            <div class="tool-btn"><i data-lucide="type"></i></div>
+            <div class="tool-btn"><i data-lucide="paint-bucket"></i></div>
+            <div class="tool-btn"><i data-lucide="zoom-in"></i></div>
+            <div style="flex:1"></div>
+            <div class="tool-btn"><i data-lucide="palette"></i></div>
+        </div>
+        <!-- CENTER AREA -->
+        <div class="center-area">
+            <div class="canvas-area">
+                <div class="canvas-wrapper">
+                    <div class="loader" id="loader"></div>
+                    <img id="result-img" class="generated-image" alt="Résultat">
+                </div>
+            </div>
+            <div class="gallery-panel">
+                <div class="panel-header">Bibliothèque / Historique</div>
+                <div class="gallery-content" id="gallery">
+                    <!-- Images will be added here -->
+                </div>
+            </div>
+        </div>
+        <!-- PROPERTIES -->
+        <div class="properties">
+            <div class="panel-header">Propriétés</div>
+            <div class="panel-content">
+                <div class="control-group">
+                    <label>PROMPT (DESCRIPTION)</label>
+                    <textarea id="prompt" placeholder="Décrivez l'image à générer..."></textarea>
+                </div>
+                <div class="control-group">
+                    <label>MODÈLE</label>
+                    <select style="background:#181818; border:1px solid #444; color:white; padding:5px;">
+                        <option>Stable Diffusion XL (Cloud)</option>
+                    </select>
+                </div>
+                <button id="generate-btn" class="btn-primary">Générer</button>
+            </div>
+            <div class="panel-header" style="margin-top:auto;">Calques</div>
+            <div class="layers-panel" style="flex:1; padding:10px;">
+                <div style="display:flex; align-items:center; gap:10px; padding:5px; background:#3e3e42;">
+                    <div style="width:30px; height:30px; background:white; border:1px solid #000;"></div>
+                    <div style="color:white; font-weight:500;">Arrière-plan</div>
+                    <i data-lucide="eye" size="14" style="margin-left:auto; color:#ccc;"></i>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="status-bar">
+        <span id="status-text">Prêt</span>
+        <span>100%</span>
     </div>
     <script>
+        lucide.createIcons();
+        const btn = document.getElementById('generate-btn');
         const prompt = document.getElementById('prompt');
+        const img = document.getElementById('result-img');
+        const loader = document.getElementById('loader');
+        const status = document.getElementById('status-text');
+        const gallery = document.getElementById('gallery');
+        // Load gallery from local storage
+        const savedImages = JSON.parse(localStorage.getItem('cygnis_images') || '[]');
+        savedImages.forEach(url => addToGallery(url));
+        function addToGallery(url) {
+            const div = document.createElement('div');
+            div.className = 'gallery-item';
+            div.innerHTML = `<img src="${url}" onclick="showImage('${url}')">`;
+            gallery.prepend(div);
+        }
+        window.showImage = (url) => {
+            img.src = url;
+            img.style.display = 'block';
+        };
         btn.addEventListener('click', async () => {
             const text = prompt.value;
             btn.disabled = true;
             btn.textContent = "Génération...";
+            loader.style.display = 'block';
+            img.style.display = 'none';
+            status.textContent = "Calcul en cours (SDXL)...";
             try {
                 const res = await fetch('/generate', {
                 if (!res.ok) throw new Error("Erreur serveur");
                 const data = await res.json();
+                img.src = data.image_url;
+                img.onload = () => {
+                    loader.style.display = 'none';
+                    img.style.display = 'block';
+                    status.textContent = "Terminé.";
+                    // Save to gallery
+                    addToGallery(data.image_url);
+                    savedImages.unshift(data.image_url);
+                    localStorage.setItem('cygnis_images', JSON.stringify(savedImages));
+                };
             } catch (e) {
+                status.textContent = "Erreur : " + e.message;
+                loader.style.display = 'none';
             } finally {
                 btn.disabled = false;
                 btn.textContent = "Générer";