|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>CygnisAI 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@300;400;500;600;700&display=swap" rel="stylesheet"> |
|
|
<script src="https://unpkg.com/lucide@latest"></script> |
|
|
<style> |
|
|
:root { |
|
|
--bg-dark: #030014; |
|
|
--panel-bg: #0a0a12; |
|
|
--primary: #8b5cf6; |
|
|
--primary-hover: #7c3aed; |
|
|
--text-main: #ffffff; |
|
|
--text-muted: #94a3b8; |
|
|
--border: rgba(255, 255, 255, 0.08); |
|
|
--card-bg: rgba(20, 20, 30, 0.6); |
|
|
} |
|
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; } |
|
|
|
|
|
body { |
|
|
background-color: var(--bg-dark); |
|
|
color: var(--text-main); |
|
|
font-family: 'Inter', sans-serif; |
|
|
height: 100vh; |
|
|
display: flex; |
|
|
overflow: hidden; |
|
|
background-image: |
|
|
radial-gradient(circle at 0% 0%, rgba(188, 19, 254, 0.15), transparent 40%), |
|
|
radial-gradient(circle at 100% 100%, rgba(0, 243, 255, 0.1), transparent 40%); |
|
|
} |
|
|
|
|
|
|
|
|
.sidebar { |
|
|
width: 260px; |
|
|
background: rgba(10, 10, 18, 0.8); |
|
|
backdrop-filter: blur(20px); |
|
|
border-right: 1px solid var(--border); |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
padding: 2rem; |
|
|
gap: 2rem; |
|
|
z-index: 10; |
|
|
} |
|
|
|
|
|
.logo { |
|
|
font-size: 1.5rem; |
|
|
font-weight: 700; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.8rem; |
|
|
color: white; |
|
|
letter-spacing: -0.5px; |
|
|
} |
|
|
.logo svg { color: var(--primary); filter: drop-shadow(0 0 10px var(--primary)); } |
|
|
|
|
|
.nav-btn { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 1rem; |
|
|
padding: 1rem; |
|
|
border-radius: 12px; |
|
|
color: var(--text-muted); |
|
|
text-decoration: none; |
|
|
font-size: 0.95rem; |
|
|
font-weight: 500; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s; |
|
|
border: 1px solid transparent; |
|
|
} |
|
|
.nav-btn:hover { |
|
|
background: rgba(255,255,255,0.03); |
|
|
color: white; |
|
|
border-color: rgba(255,255,255,0.05); |
|
|
} |
|
|
.nav-btn.active { |
|
|
background: linear-gradient(90deg, rgba(139, 92, 246, 0.1), transparent); |
|
|
color: var(--primary); |
|
|
border-left: 3px solid var(--primary); |
|
|
} |
|
|
|
|
|
|
|
|
.main { |
|
|
flex: 1; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.content-view { |
|
|
flex: 1; |
|
|
overflow-y: auto; |
|
|
padding: 2rem; |
|
|
display: none; |
|
|
flex-direction: column; |
|
|
gap: 2rem; |
|
|
align-items: center; |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
.content-view.active { display: flex; } |
|
|
|
|
|
.welcome-message { |
|
|
text-align: center; |
|
|
margin-top: 10vh; |
|
|
opacity: 1; |
|
|
transition: opacity 0.5s; |
|
|
} |
|
|
.welcome-message h1 { |
|
|
font-size: 2.5rem; |
|
|
font-weight: 700; |
|
|
background: linear-gradient(to right, #fff, #a5b4fc); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
.welcome-message p { color: var(--text-muted); font-size: 1.1rem; } |
|
|
|
|
|
|
|
|
.image-card { |
|
|
background: var(--card-bg); |
|
|
border: 1px solid var(--border); |
|
|
border-radius: 24px; |
|
|
padding: 1.5rem; |
|
|
width: 100%; |
|
|
max-width: 700px; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 1.5rem; |
|
|
animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1); |
|
|
box-shadow: 0 20px 50px rgba(0,0,0,0.3); |
|
|
backdrop-filter: blur(10px); |
|
|
transition: transform 0.3s; |
|
|
} |
|
|
|
|
|
.image-wrapper { |
|
|
width: 100%; |
|
|
border-radius: 16px; |
|
|
overflow: hidden; |
|
|
position: relative; |
|
|
background: #000; |
|
|
min-height: 400px; |
|
|
display: flex; align-items: center; justify-content: center; |
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.5); |
|
|
} |
|
|
|
|
|
.image-wrapper img { |
|
|
width: 100%; height: auto; display: block; |
|
|
transition: transform 0.5s; |
|
|
} |
|
|
|
|
|
.image-wrapper:hover img { transform: scale(1.02); } |
|
|
|
|
|
.card-footer { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: flex-start; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
.prompt-text { |
|
|
font-size: 1rem; |
|
|
color: #e0e0e0; |
|
|
font-weight: 400; |
|
|
line-height: 1.5; |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.card-actions { |
|
|
display: flex; |
|
|
gap: 0.8rem; |
|
|
} |
|
|
|
|
|
.icon-btn { |
|
|
background: rgba(255,255,255,0.05); |
|
|
border: 1px solid rgba(255,255,255,0.1); |
|
|
border-radius: 10px; |
|
|
width: 42px; height: 42px; |
|
|
display: flex; align-items: center; justify-content: center; |
|
|
color: var(--text-muted); |
|
|
cursor: pointer; |
|
|
transition: all 0.2s; |
|
|
} |
|
|
.icon-btn:hover { |
|
|
background: rgba(255,255,255,0.1); |
|
|
color: white; |
|
|
border-color: rgba(255,255,255,0.2); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
|
|
|
.gallery-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
|
|
gap: 1.5rem; |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.gallery-item { |
|
|
position: relative; |
|
|
border-radius: 16px; |
|
|
overflow: hidden; |
|
|
cursor: pointer; |
|
|
aspect-ratio: 1 / 1; |
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.3); |
|
|
} |
|
|
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; } |
|
|
.gallery-item:hover img { transform: scale(1.05); } |
|
|
|
|
|
|
|
|
.input-container { |
|
|
padding: 2rem; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
background: linear-gradient(to top, var(--bg-dark) 60%, transparent); |
|
|
position: relative; |
|
|
z-index: 20; |
|
|
} |
|
|
|
|
|
.input-box { |
|
|
width: 100%; |
|
|
max-width: 700px; |
|
|
background: rgba(20, 20, 30, 0.8); |
|
|
backdrop-filter: blur(20px); |
|
|
border: 1px solid var(--border); |
|
|
border-radius: 20px; |
|
|
padding: 0.8rem; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 1rem; |
|
|
box-shadow: 0 10px 40px rgba(0,0,0,0.5); |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.input-box:focus-within { |
|
|
border-color: var(--primary); |
|
|
box-shadow: 0 0 30px rgba(0, 243, 255, 0.15); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
input { |
|
|
flex: 1; |
|
|
background: transparent; |
|
|
border: none; |
|
|
color: white; |
|
|
font-size: 1.1rem; |
|
|
font-family: inherit; |
|
|
padding: 0.5rem 1rem; |
|
|
} |
|
|
input:focus { outline: none; } |
|
|
input::placeholder { color: rgba(255,255,255,0.3); } |
|
|
|
|
|
|
|
|
.generate-btn { |
|
|
background: linear-gradient(135deg, var(--primary), var(--secondary)); |
|
|
color: white; |
|
|
border: none; |
|
|
border-radius: 14px; |
|
|
padding: 0.8rem 1.5rem; |
|
|
font-weight: 700; |
|
|
font-size: 1rem; |
|
|
cursor: pointer; |
|
|
display: flex; align-items: center; gap: 0.6rem; |
|
|
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 5px 15px rgba(188, 19, 254, 0.3); |
|
|
} |
|
|
|
|
|
.generate-btn::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; left: -100%; width: 100%; height: 100%; |
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); |
|
|
transition: 0.5s; |
|
|
} |
|
|
|
|
|
.generate-btn:hover { |
|
|
transform: scale(1.05); |
|
|
box-shadow: 0 10px 25px rgba(0, 243, 255, 0.4); |
|
|
} |
|
|
|
|
|
.generate-btn:hover::before { left: 100%; } |
|
|
|
|
|
.generate-btn:disabled { |
|
|
background: #1e293b; |
|
|
color: #64748b; |
|
|
cursor: not-allowed; |
|
|
transform: none; |
|
|
box-shadow: none; |
|
|
} |
|
|
|
|
|
|
|
|
.shimmer { |
|
|
position: absolute; |
|
|
top: 0; left: 0; width: 100%; height: 100%; |
|
|
background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%); |
|
|
background-size: 200% 100%; |
|
|
animation: shimmer 1.5s infinite; |
|
|
} |
|
|
|
|
|
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } |
|
|
@keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } |
|
|
|
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<aside class="sidebar"> |
|
|
<div class="logo"> |
|
|
<svg class="w-12 h-12 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM12 19C8.13401 19 5 15.866 5 12C5 8.13401 8.13401 5 12 5C15.866 5 19 8.13401 19 12C19 15.866 15.866 19 12 19Z" fill="currentColor" fill-opacity="0.2"></path><path d="M16.5414 10.3541C15.8617 9.68729 14.974 9.24988 14 9.10241V12.1873L16.5414 10.3541Z" fill="currentColor"></path><path d="M12.0001 14.8129L9.45874 16.6461C10.1384 17.3129 11.0261 17.7503 12.0001 17.8978V14.8129Z" fill="currentColor"></path><path d="M12.0001 6.10254C12.974 6.24995 13.8617 6.68735 14.5414 7.35413L12.0001 9.18734V6.10254Z" fill="currentColor"></path><path d="M15.5 12C15.5 13.933 13.933 15.5 12 15.5C10.067 15.5 8.5 13.933 8.5 12C8.5 10.067 10.067 8.5 12 8.5C13.933 8.5 15.5 10.067 15.5 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg> |
|
|
CygnisAI |
|
|
</div> |
|
|
<nav style="flex:1; display:flex; flex-direction:column; gap:0.5rem;"> |
|
|
<div class="nav-btn active" onclick="showView('home')"><i data-lucide="sparkles"></i> Créer</div> |
|
|
<div class="nav-btn" onclick="showView('gallery')"><i data-lucide="grid"></i> Galerie</div> |
|
|
</nav> |
|
|
</aside> |
|
|
|
|
|
<main class="main"> |
|
|
<div id="view-home" class="content-view active"> |
|
|
<div class="gallery-container" id="gallery-home"> |
|
|
<div class="welcome-message" id="welcome"> |
|
|
<div style="width:80px; height:80px; background:linear-gradient(135deg, var(--primary), var(--secondary)); border-radius:24px; display:flex; align-items:center; justify-content:center; margin:0 auto 2rem; box-shadow:0 0 40px rgba(188,19,254,0.4);"> |
|
|
<i data-lucide="image" size="40" color="white"></i> |
|
|
</div> |
|
|
<h1 style="font-size:2.5rem; margin-bottom:1rem; font-weight:700;">Imaginez l'impossible</h1> |
|
|
<p style="color:var(--text-muted); font-size:1.1rem;">Tapez votre idée ci-dessous pour commencer la création.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="view-gallery" class="content-view"> |
|
|
<div class="gallery-grid" id="gallery-grid"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="input-container"> |
|
|
<div class="input-box"> |
|
|
<input type="text" id="prompt" placeholder="Un chat cybernétique dans une ville néon..." autocomplete="off"> |
|
|
<button id="generate-btn" class="generate-btn"> |
|
|
<i data-lucide="wand-2" size="18"></i> Générer |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<script> |
|
|
lucide.createIcons(); |
|
|
|
|
|
const btn = document.getElementById('generate-btn'); |
|
|
const promptInput = document.getElementById('prompt'); |
|
|
const galleryHome = document.getElementById('gallery-home'); |
|
|
const galleryGrid = document.getElementById('gallery-grid'); |
|
|
const welcome = document.getElementById('welcome'); |
|
|
|
|
|
|
|
|
window.showView = (view) => { |
|
|
document.querySelectorAll('.content-view').forEach(el => el.classList.remove('active')); |
|
|
document.querySelectorAll('.nav-btn').forEach(el => el.classList.remove('active')); |
|
|
|
|
|
if (view === 'home') { |
|
|
document.getElementById('view-home').classList.add('active'); |
|
|
document.querySelector('.nav-btn:nth-child(1)').classList.add('active'); |
|
|
} else if (view === 'gallery') { |
|
|
document.getElementById('view-gallery').classList.add('active'); |
|
|
document.querySelector('.nav-btn:nth-child(2)').classList.add('active'); |
|
|
renderGalleryGrid(); |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
let history = JSON.parse(localStorage.getItem('cygnis_img_history') || '[]'); |
|
|
if (history.length > 0) { |
|
|
welcome.style.display = 'none'; |
|
|
history.forEach(item => addImageToHome(item.url, item.prompt, false)); |
|
|
} |
|
|
|
|
|
function addImageToHome(url, promptText, prepend = true) { |
|
|
const card = document.createElement('div'); |
|
|
card.className = 'image-card'; |
|
|
card.innerHTML = ` |
|
|
<div class="image-wrapper"> |
|
|
<img src="${url}" alt="${promptText}" onload="this.style.opacity=1" style="opacity:0; transition:opacity 0.5s;"> |
|
|
</div> |
|
|
<div class="card-footer"> |
|
|
<div class="prompt-text">${promptText}</div> |
|
|
<div class="card-actions"> |
|
|
<button class="icon-btn" onclick="downloadImage('${url}')" title="Télécharger"><i data-lucide="download" size="18"></i></button> |
|
|
<button class="icon-btn" title="Copier le prompt"><i data-lucide="copy" size="18"></i></button> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
if (prepend) galleryHome.prepend(card); |
|
|
else galleryHome.appendChild(card); |
|
|
|
|
|
lucide.createIcons(); |
|
|
if (prepend) card.scrollIntoView({ behavior: 'smooth', block: 'center' }); |
|
|
} |
|
|
|
|
|
function renderGalleryGrid() { |
|
|
galleryGrid.innerHTML = history.map(item => ` |
|
|
<div class="gallery-item" onclick="showImageInHome('${item.url}', '${item.prompt}')"> |
|
|
<img src="${item.url}" alt="${item.prompt}"> |
|
|
</div> |
|
|
`).join(''); |
|
|
} |
|
|
|
|
|
window.showImageInHome = (url, prompt) => { |
|
|
showView('home'); |
|
|
|
|
|
if (welcome) welcome.style.display = 'none'; |
|
|
|
|
|
|
|
|
let existingCard = false; |
|
|
document.querySelectorAll('.image-card').forEach(card => { |
|
|
if (card.querySelector('img')?.src.includes(url)) { |
|
|
card.scrollIntoView({ behavior: 'smooth', block: 'center' }); |
|
|
existingCard = true; |
|
|
} |
|
|
}); |
|
|
|
|
|
if (!existingCard) { |
|
|
addImageToHome(url, prompt, true); |
|
|
} |
|
|
}; |
|
|
|
|
|
window.downloadImage = (url) => { |
|
|
const a = document.createElement('a'); |
|
|
a.href = url; |
|
|
a.download = 'cygnis-creation.png'; |
|
|
document.body.appendChild(a); |
|
|
a.click(); |
|
|
document.body.removeChild(a); |
|
|
}; |
|
|
|
|
|
btn.addEventListener('click', async () => { |
|
|
const text = promptInput.value; |
|
|
if (!text) return; |
|
|
|
|
|
welcome.style.display = 'none'; |
|
|
btn.disabled = true; |
|
|
btn.innerHTML = '<div style="width:20px;height:20px;border:3px solid white;border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite;"></div>'; |
|
|
|
|
|
const placeholder = document.createElement('div'); |
|
|
placeholder.className = 'image-card'; |
|
|
placeholder.innerHTML = ` |
|
|
<div class="image-wrapper"> |
|
|
<div class="shimmer"></div> |
|
|
</div> |
|
|
<div class="card-footer"> |
|
|
<div class="prompt-text">${text}</div> |
|
|
</div> |
|
|
`; |
|
|
galleryHome.prepend(placeholder); |
|
|
|
|
|
try { |
|
|
const res = await fetch('/generate', { |
|
|
method: 'POST', |
|
|
headers: { 'Content-Type': 'application/json' }, |
|
|
body: JSON.stringify({ prompt: text }) |
|
|
}); |
|
|
|
|
|
if (!res.ok) throw new Error("Erreur serveur"); |
|
|
const data = await res.json(); |
|
|
|
|
|
placeholder.innerHTML = ` |
|
|
<div class="image-wrapper"> |
|
|
<img src="${data.image_url}" alt="${text}"> |
|
|
</div> |
|
|
<div class="card-footer"> |
|
|
<div class="prompt-text">${text}</div> |
|
|
<div class="card-actions"> |
|
|
<button class="icon-btn" onclick="downloadImage('${data.image_url}')"><i data-lucide="download" size="18"></i></button> |
|
|
<button class="icon-btn"><i data-lucide="copy" size="18"></i></button> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
lucide.createIcons(); |
|
|
|
|
|
const newHistory = [{ url: data.image_url, prompt: text }, ...history].slice(0, 50); |
|
|
localStorage.setItem('cygnis_img_history', JSON.stringify(newHistory)); |
|
|
history = newHistory; |
|
|
|
|
|
} catch (e) { |
|
|
placeholder.innerHTML = `<p style="color:#ef4444; text-align:center; padding:2rem;">Erreur : ${e.message}</p>`; |
|
|
} finally { |
|
|
btn.disabled = false; |
|
|
btn.innerHTML = '<i data-lucide="wand-2" size="18"></i> Générer'; |
|
|
lucide.createIcons(); |
|
|
promptInput.value = ''; |
|
|
promptInput.focus(); |
|
|
} |
|
|
}); |
|
|
|
|
|
promptInput.addEventListener('keypress', (e) => { |
|
|
if (e.key === 'Enter') btn.click(); |
|
|
}); |
|
|
|
|
|
const style = document.createElement('style'); |
|
|
style.innerHTML = '@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }'; |
|
|
document.head.appendChild(style); |
|
|
|
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
