| <!DOCTYPE html> |
| <html lang="en"> |
|
|
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| |
| <title>GenImage</title> |
| <style> |
| |
| :root { |
| --primary: #667eea; |
| --secondary: #764ba2; |
| --bg-dark: #0f0f23; |
| --bg-medium: #1a1a2e; |
| --bg-light: #2a2a3a; |
| --text-primary: #ffffff; |
| --text-secondary: #aaaaaa; |
| --success: #48bb78; |
| --error: #f56565; |
| --border: rgba(255, 255, 255, 0.1); |
| } |
| |
| * { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
| |
| body { |
| font-family: 'Segoe UI', Arial, sans-serif; |
| background: var(--bg-dark); |
| color: var(--text-primary); |
| line-height: 1.6; |
| -webkit-font-smoothing: antialiased; |
| } |
| |
| |
| .app-layout { |
| display: flex; |
| flex-direction: column; |
| min-height: 100vh; |
| max-width: 1400px; |
| margin: 0 auto; |
| padding: 2rem; |
| } |
| |
| .header { |
| text-align: center; |
| margin-bottom: 2rem; |
| position: relative; |
| } |
| |
| h1 { |
| font-size: 2.5rem; |
| font-weight: 600; |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| margin-bottom: 0.5rem; |
| } |
| |
| .tagline { |
| color: var(--text-secondary); |
| font-size: 1.1rem; |
| } |
| |
| |
| .language-switcher { |
| position: absolute; |
| top: 0; |
| right: 0; |
| z-index: 100; |
| } |
| |
| .lang-switcher-toggle { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| background: var(--bg-medium); |
| border: 1px solid var(--border); |
| color: var(--text-primary); |
| font-weight: 600; |
| padding: 0.5rem 1rem; |
| border-radius: 12px; |
| cursor: pointer; |
| transition: all 0.2s; |
| } |
| |
| .lang-switcher-toggle:hover { |
| border-color: var(--primary); |
| } |
| |
| .lang-switcher-toggle .arrow { |
| font-size: 0.8em; |
| transition: transform 0.2s; |
| } |
| |
| .lang-switcher-toggle.open .arrow { |
| transform: rotate(180deg); |
| } |
| |
| .lang-switcher-menu { |
| position: absolute; |
| top: calc(100% + 5px); |
| right: 0; |
| background: var(--bg-light); |
| border: 1px solid var(--border); |
| border-radius: 12px; |
| padding: 0.5rem; |
| box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); |
| display: flex; |
| flex-direction: column; |
| gap: 0.25rem; |
| opacity: 0; |
| transform: translateY(-10px); |
| pointer-events: none; |
| transition: all 0.2s ease-out; |
| } |
| |
| .lang-switcher-menu.open { |
| opacity: 1; |
| transform: translateY(0); |
| pointer-events: all; |
| } |
| |
| .lang-switcher-option { |
| background: none; |
| border: none; |
| color: var(--text-secondary); |
| font-weight: 600; |
| padding: 0.5rem 1rem; |
| border-radius: 8px; |
| cursor: pointer; |
| transition: all 0.2s; |
| text-align: left; |
| } |
| |
| .lang-switcher-option:hover { |
| background: var(--primary); |
| color: var(--text-primary); |
| } |
| |
| .lang-switcher-option.active { |
| color: var(--primary); |
| } |
| |
| |
| .control-panel { |
| background: var(--bg-medium); |
| border: 1px solid var(--border); |
| border-radius: 16px; |
| padding: 1.5rem; |
| margin-bottom: 1.5rem; |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); |
| } |
| |
| .prompt-form { |
| display: flex; |
| flex-direction: column; |
| gap: 1rem; |
| } |
| |
| .input-group { |
| position: relative; |
| } |
| |
| .input-group input { |
| width: 100%; |
| background: var(--bg-light); |
| border: 2px solid var(--border); |
| border-radius: 12px; |
| padding: 1rem 1.5rem; |
| color: var(--text-primary); |
| font-size: 1rem; |
| transition: all 0.3s ease; |
| } |
| |
| .input-group input:focus { |
| outline: none; |
| border-color: var(--primary); |
| box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3); |
| } |
| |
| |
| .toolbox-bar { |
| display: flex; |
| align-items: center; |
| flex-wrap: wrap; |
| gap: 1.5rem; |
| padding-top: 0.5rem; |
| border-top: 1px solid var(--border); |
| } |
| |
| .toolbox-item { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
| |
| .toolbox-item label { |
| font-size: 0.9rem; |
| color: var(--text-secondary); |
| white-space: nowrap; |
| } |
| |
| .toolbox-item input { |
| width: 80px; |
| background: var(--bg-light); |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| padding: 0.5rem; |
| color: var(--text-primary); |
| text-align: center; |
| } |
| |
| .toolbox-item input:focus { |
| outline: none; |
| border-color: var(--primary); |
| } |
| |
| .toolbox-actions { |
| display: flex; |
| gap: 0.75rem; |
| margin-left: auto; |
| |
| } |
| |
| |
| .btn { |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
| color: white; |
| border: none; |
| padding: 0.75rem 1.5rem; |
| font-size: 1rem; |
| font-weight: 600; |
| border-radius: 10px; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 0.5rem; |
| } |
| |
| .btn:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); |
| } |
| |
| .btn-outline { |
| background: transparent; |
| border: 2px solid var(--primary); |
| color: var(--primary); |
| padding: 0.625rem 1.5rem; |
| |
| } |
| |
| .btn-outline:hover { |
| background: var(--primary); |
| color: white; |
| } |
| |
| .btn-danger { |
| background: transparent; |
| border: 1px solid var(--error); |
| color: var(--error); |
| padding: 0.5rem 1rem; |
| border-radius: 12px; |
| font-size: 0.9rem; |
| } |
| |
| .btn-danger:hover { |
| background: var(--error); |
| color: white; |
| transform: translateY(-2px); |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); |
| } |
| |
| |
| .btn-action { |
| background: transparent; |
| border: 1px solid #667EEA; |
| color: #667EEA; |
| padding: 0.5rem 1rem; |
| border-radius: 12px; |
| font-size: 0.9rem; |
| } |
| |
| .btn-action:hover { |
| background: #667EEA; |
| color: white; |
| transform: translateY(-2px); |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); |
| } |
| |
| |
| .gallery-toolbar { |
| |
| |
| } |
| |
| .banner { |
| flex-grow: 1; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); |
| padding: 0.75rem 1.5rem; |
| border-radius: 12px; |
| font-size: 0.95rem; |
| font-weight: 500; |
| } |
| |
| .banner-content { |
| display: flex; |
| align-items: center; |
| gap: 0.75rem; |
| } |
| |
| .banner-close { |
| background: none; |
| border: none; |
| color: rgba(255, 255, 255, 0.7); |
| font-size: 1.2rem; |
| cursor: pointer; |
| transition: color 0.2s; |
| padding: 0.25rem; |
| line-height: 1; |
| } |
| |
| .banner-close:hover { |
| color: white; |
| } |
| |
| .tabs { |
| display: flex; |
| gap: 0.5rem; |
| margin-bottom: 1.5rem; |
| border-bottom: 1px solid var(--border); |
| } |
| |
| .tab { |
| padding: 0.75rem 1.25rem; |
| border-radius: 8px 8px 0 0; |
| cursor: pointer; |
| border: none; |
| background: none; |
| color: var(--text-secondary); |
| transition: all 0.2s; |
| border-bottom: 2px solid transparent; |
| } |
| |
| .tab:hover { |
| background: var(--bg-light); |
| } |
| |
| .tab.active { |
| font-weight: 600; |
| color: var(--text-primary); |
| border-bottom-color: var(--primary); |
| } |
| |
| |
| .image-gallery { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
| gap: 1.5rem; |
| } |
| |
| .image-card { |
| background: var(--bg-medium); |
| border: 1px solid var(--border); |
| border-radius: 16px; |
| overflow: hidden; |
| transition: transform 0.3s, box-shadow 0.3s; |
| display: flex; |
| flex-direction: column; |
| position: relative; |
| } |
| |
| .image-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); |
| } |
| |
| .image-card.featured { |
| grid-column: span 2; |
| } |
| |
| .image-display { |
| aspect-ratio: 1/1; |
| position: relative; |
| background: var(--bg-light); |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .image-display img { |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| transition: opacity 0.3s; |
| } |
| |
| .image-info { |
| padding: 1rem; |
| flex-grow: 1; |
| display: flex; |
| flex-direction: column; |
| } |
| |
| .image-prompt { |
| font-size: 0.95rem; |
| margin-bottom: 0.75rem; |
| display: -webkit-box; |
| |
| -webkit-box-orient: vertical; |
| overflow: hidden; |
| flex-grow: 1; |
| } |
| |
| .image-meta { |
| display: flex; |
| justify-content: space-between; |
| font-size: 0.8rem; |
| color: var(--text-secondary); |
| } |
| |
| .image-actions { |
| position: absolute; |
| top: 10px; |
| right: 10px; |
| display: flex; |
| gap: 0.5rem; |
| z-index: 10; |
| } |
| |
| .action-btn { |
| width: 32px; |
| height: 32px; |
| border-radius: 50%; |
| background: rgba(0, 0, 0, 0.6); |
| color: white; |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| cursor: pointer; |
| transition: all 0.2s; |
| } |
| |
| .action-btn:hover { |
| transform: scale(1.1); |
| background: rgba(0, 0, 0, 0.8); |
| } |
| |
| .action-btn.delete:hover { |
| background: rgba(255, 0, 0, 0.8); |
| } |
| |
| .spinner { |
| width: 40px; |
| height: 40px; |
| border: 4px solid rgba(255, 255, 255, 0.1); |
| border-top: 4px solid var(--primary); |
| border-radius: 50%; |
| animation: spin 1s linear infinite; |
| position: relative; |
| |
| } |
| |
| .empty-state { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| text-align: center; |
| gap: 1rem; |
| padding: 3rem; |
| grid-column: 1 / -1; |
| color: var(--text-secondary); |
| border: 2px dashed var(--border); |
| border-radius: 16px; |
| } |
| |
| .empty-state-icon { |
| font-size: 3rem; |
| } |
| |
| |
| .toast-container { |
| position: fixed; |
| bottom: 20px; |
| right: 20px; |
| z-index: 1000; |
| display: flex; |
| flex-direction: column; |
| gap: 1rem; |
| } |
| |
| .toast { |
| display: flex; |
| align-items: center; |
| gap: 1rem; |
| padding: 1rem 1.5rem; |
| border-radius: 10px; |
| background: var(--bg-medium); |
| border-left: 4px solid var(--primary); |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); |
| transform: translateX(calc(100% + 20px)); |
| opacity: 0; |
| animation: toast-in 0.5s forwards cubic-bezier(0.25, 1, 0.5, 1); |
| } |
| |
| .toast.success { |
| border-left-color: var(--success); |
| } |
| |
| .toast.error { |
| border-left-color: var(--error); |
| } |
| |
| .lightbox { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: rgba(0, 0, 0, 0.9); |
| z-index: 2000; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| opacity: 0; |
| pointer-events: none; |
| transition: opacity 0.3s; |
| } |
| |
| .lightbox.active { |
| opacity: 1; |
| pointer-events: all; |
| } |
| |
| .lightbox-content { |
| position: relative; |
| max-width: 90%; |
| max-height: 90%; |
| } |
| |
| .lightbox-image { |
| max-width: 100%; |
| max-height: 90vh; |
| object-fit: contain; |
| } |
| |
| .lightbox-close { |
| position: absolute; |
| top: -10px; |
| right: -10px; |
| background: var(--bg-dark); |
| border: 1px solid var(--border); |
| color: white; |
| font-size: 1.2rem; |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| cursor: pointer; |
| transition: transform 0.2s; |
| } |
| |
| .lightbox-close:hover { |
| transform: scale(1.1); |
| } |
| |
| |
| @keyframes spin { |
| to { |
| transform: rotate(360deg); |
| } |
| } |
| |
| @keyframes toast-in { |
| to { |
| transform: translateX(0); |
| opacity: 1; |
| } |
| } |
| |
| @media (max-width: 860px) { |
| .language-switcher { |
| position: static; |
| justify-content: center; |
| margin-bottom: 1.5rem; |
| } |
| |
| .header { |
| padding-top: 0; |
| } |
| |
| |
| |
| .toolbox-actions { |
| margin-left: 0; |
| width: 100%; |
| } |
| |
| .toolbox-actions .btn { |
| flex-grow: 1; |
| } |
| } |
| |
| @media (max-width: 768px) { |
| .app-layout { |
| padding: 1rem; |
| } |
| |
| .image-gallery { |
| grid-template-columns: 1fr; |
| } |
| |
| |
| .image-card.featured { |
| grid-column: span 1; |
| } |
| } |
| |
| |
| </style> |
| </head> |
|
|
| <body> |
| <div id="app"></div> |
| <script src="https://unpkg.com/juris@0.88"></script> |
| <script> |
| |
| const translations = { |
| it: { |
| langName: "Italiano", |
| flag: "🇮🇹 ", |
| appTitle: "GenImage", |
| headerTitle: "GenImagini", |
| tagline: "Trasforma la tua immaginazione in immagini straordinarie", |
| bannerText: "⭐ Sblocca le funzionalità Pro per generazioni illimitate e modelli avanzati!", |
| promptLabel: "Prompt AI", |
| |
| selectModelLabel: "Seleziona Modello", |
| promptPlaceholder: "Descrivi cosa vuoi generare...", |
| widthLabel: "Larghezza", |
| heightLabel: "Altezza", |
| seedLabel: "Seme", |
| generateButton: "Genera ✨", |
| randomizeButton: "Casuale", |
| galleryTab: "La tua Galleria", |
| historyTab: "Cronologia Prompt", |
| emptyGalleryTitle: "La tua galleria è vuota", |
| emptyGalleryDesc: "Inserisci un prompt e fai clic su Genera per creare la tua prima immagine.", |
| metaSeed: "Seme: {seed}", |
| metaRandom: "Casuale", |
| failedToLoad: "⚠️ Caricamento fallito", |
| toastHistoryFail: "Impossibile caricare la cronologia", |
| toastImageSuccess: "Immagine generata con successo!", |
| toastImageFail: "Impossibile generare l'immagine", |
| toastEnterPrompt: "Per favore, inserisci un prompt", |
| toastImageRemoved: "Immagine rimossa", |
| toastSettingsLoaded: "Impostazioni del prompt caricate", |
| toastRestoring: "Ripristino di {count} immagini dalla cronologia...", |
| toastNewSeed: "Nuovo seme: {seed}", |
| deleteTooltip: "Elimina Immagine", |
| zoomTooltip: "Visualizza a Schermo Intero", |
| clearAllButton: "Cancella Tutto", |
| clearAllConfirm: "Sei sicuro di voler svuotare l'intera galleria e la cronologia? Questa azione non può essere annullata.", |
| toastGalleryCleared: "Galleria e cronologia svuotate.", |
| clearPrompt: "Cancella Prompt" |
| }, |
| en: { |
| langName: "English", |
| flag:"🇬🇧 ", |
| clearPrompt: "Clear Prompt", |
| appTitle: "GenImage", |
| headerTitle: "GenImages", |
| tagline: "Transform your imagination into stunning visuals", |
| bannerText: "⭐ Unlock Pro features for unlimited generations and advanced models!", |
| promptLabel: "AI Prompt", |
| |
| selectModelLabel: "Select Model", |
| promptPlaceholder: "Describe what you want to generate...", |
| widthLabel: "Width", |
| heightLabel: "Height", |
| seedLabel: "Seed", |
| generateButton: "Generate ✨", |
| randomizeButton: "Randomize", |
| galleryTab: "Your Gallery", |
| historyTab: "Prompt History", |
| emptyGalleryTitle: "Your gallery is empty", |
| emptyGalleryDesc: "Enter a prompt and click Generate to create your first image.", |
| metaSeed: "Seed: {seed}", |
| metaRandom: "Random", |
| failedToLoad: "⚠️ Failed to load", |
| toastHistoryFail: "Failed to load history", |
| toastImageSuccess: "Image generated successfully!", |
| toastImageFail: "Failed to generate image", |
| toastEnterPrompt: "Please enter a prompt", |
| toastImageRemoved: "Image removed", |
| toastSettingsLoaded: "Prompt settings loaded", |
| toastRestoring: "Restoring {count} images from history...", |
| toastNewSeed: "New seed: {seed}", |
| deleteTooltip: "Delete Image", |
| zoomTooltip: "View Fullscreen", |
| clearAllButton: "Clear All", |
| clearAllConfirm: "Are you sure you want to clear the entire gallery and history? This cannot be undone.", |
| toastGalleryCleared: "Gallery and history cleared.", |
| }, |
| fr: { |
| langName: "Français", |
| flag: '🇫🇷 ', |
| appTitle: "GenImage", |
| headerTitle: "GenImages", |
| tagline: "Mettez vos idées en images", |
| bannerText: "⭐ Débloquez les fonctionnalités Pro pour des générations illimitées et des modèles avancés !", |
| promptLabel: "Prompt IA", |
| |
| selectModelLabel: "Sélectionner un modèle", |
| promptPlaceholder: "Décrivez ce que vous voulez générer...", |
| widthLabel: "Largeur", |
| heightLabel: "Hauteur", |
| seedLabel: "Graine", |
| generateButton: "Générer ✨", |
| randomizeButton: "Aléatoire", |
| galleryTab: "Votre Galerie", |
| historyTab: "Historique des Prompts", |
| emptyGalleryTitle: "Votre galerie est vide", |
| emptyGalleryDesc: "Entrez un prompt et cliquez sur Générer pour créer votre première image.", |
| metaSeed: "Graine : {seed}", |
| metaRandom: "Aléatoire", |
| failedToLoad: "⚠️ Échec du chargement", |
| toastHistoryFail: "Échec du chargement de l'historique", |
| toastImageSuccess: "Image générée avec succès !", |
| toastImageFail: "Échec de la génération de l'image", |
| toastEnterPrompt: "Veuillez entrer un prompt", |
| toastImageRemoved: "Image supprimée", |
| toastSettingsLoaded: "Paramètres du prompt chargés", |
| toastRestoring: "Restauration de {count} images de l'historique...", |
| toastNewSeed: "Nouvelle graine : {seed}", |
| deleteTooltip: "Supprimer l'image", |
| zoomTooltip: "Voir en plein écran", |
| clearAllButton: "Tout Effacer", |
| clearAllConfirm: "Êtes-vous sûr de vouloir vider toute la galerie et l'historique ? Cette action est irréversible.", |
| toastGalleryCleared: "Galerie et historique vidés.", |
| clearPrompt: "Effacer le Prompt" |
| }, |
| }; |
| |
| const I18nManager = (props, { getState, setState, subscribe }) => { |
| const t = (key, params = {}) => { |
| const lang = getState('ui.lang', 'en'); |
| let str = translations[lang]?.[key] || translations['en'][key] || key; |
| for (const p in params) { |
| str = str.replace(`{${p}}`, params[p]); |
| } |
| return str; |
| }; |
| |
| return { |
| api: { t }, |
| hooks: { |
| onRegister: () => { |
| subscribe('ui.lang', (lang) => { |
| document.title = t('appTitle'); |
| }); |
| } |
| } |
| }; |
| }; |
| |
| |
| const uniqueId = () => `${Date.now()}-${Math.floor(Math.random() * 1e9)}`; |
| const debounce = (fn, delay) => { |
| let timeout; |
| return (...args) => { |
| clearTimeout(timeout); |
| timeout = setTimeout(() => fn(...args), delay); |
| }; |
| }; |
| |
| const sanitizeInput = (str) => { |
| const div = document.createElement('div'); |
| div.textContent = str; |
| return div.innerHTML.replace(/[/?#]/g, ' '); |
| }; |
| |
| |
| const ToastSystem = (props, { getState, setState }) => { |
| const showToast = (message, type = 'info', duration = 5000) => { |
| const id = uniqueId(); |
| const toast = { id, message, type }; |
| setState('toasts', [...getState('toasts', []), toast]); |
| |
| setTimeout(() => { |
| const toasts = getState('toasts', []).filter(t => t.id !== id); |
| setState('toasts', toasts); |
| }, duration); |
| }; |
| |
| return { |
| api: { showToast }, |
| hooks: { onRegister: () => setState('toasts', []) } |
| }; |
| }; |
| |
| |
| |
| |
| const PromptHistoryManager = (props, { getState, setState, headless }) => { |
| const { t } = headless.I18nManager; |
| const save = () => { |
| const history = getState('promptHistory', []).map(item => ({ |
| id: item.id, prompt: item.prompt, seed: item.seed, |
| width: item.width, height: item.height, createdAt: item.createdAt, |
| model: item.model |
| })); |
| localStorage.setItem('juris_history', JSON.stringify(history)); |
| }; |
| |
| const load = () => { |
| try { |
| const stored = localStorage.getItem('juris_history'); |
| if (stored) setState('promptHistory', JSON.parse(stored)); |
| } catch { |
| headless.ToastSystem.showToast(t('toastHistoryFail'), "error"); |
| setState('promptHistory', []); |
| } |
| }; |
| |
| const clearHistory = () => { |
| setState('promptHistory', []); |
| localStorage.removeItem('juris_history'); |
| }; |
| |
| return { |
| hooks: { onRegister: load }, |
| api: { |
| add: (item) => { |
| |
| let history = [item, ...getState('promptHistory', [])].slice(0, 50); |
| setState('promptHistory', history); |
| save(); |
| }, |
| remove: (id) => { |
| const newHistory = getState('promptHistory', []).filter(i => i.id !== id); |
| setState('promptHistory', newHistory); |
| save(); |
| }, |
| clearAll: () => { |
| if (confirm(t('clearAllConfirm'))) { |
| clearHistory(); |
| setState('ui.imagesList', []); |
| setState('ui.imagesById', {}); |
| headless.ToastSystem.showToast(t('toastGalleryCleared'), 'info'); |
| } |
| } |
| } |
| }; |
| }; |
| |
| |
| const ImageGenerator = (props, { getState, setState, headless }) => { |
| const { t } = headless.I18nManager; |
| |
| |
| |
| |
| const generateSingleImage = async (imageId, prompt, seed, width, height, modelUsed) => { |
| try { |
| const encodedPrompt = encodeURIComponent(sanitizeInput(prompt)); |
| |
| let url = `https://image.pollinations.ai/prompt/${encodedPrompt}?nologo=true&enhance=true&model=${modelUsed}&width=${width}&height=${height}`; |
| if (seed) url += `&seed=${seed}`; |
| |
| await new Promise((resolve, reject) => { |
| const img = new Image(); |
| img.onload = () => resolve(url); |
| img.onerror = () => reject(new Error("Image generation failed")); |
| img.src = url; |
| }); |
| |
| setState(`ui.imagesById.${imageId}`, { |
| ...getState(`ui.imagesById.${imageId}`), |
| status: "loaded", |
| imageUrl: url, |
| }); |
| |
| headless.ToastSystem.showToast(t('toastImageSuccess'), "success"); |
| } catch (error) { |
| console.error("Image generation error:", error); |
| setState(`ui.imagesById.${imageId}.status`, "error"); |
| headless.ToastSystem.showToast(t('toastImageFail'), "error"); |
| } |
| }; |
| |
| const generateQueued = debounce(async () => { |
| const queue = getState('ui.generationQueue', []); |
| if (queue.length === 0) return; |
| |
| const [task, ...remaining] = queue; |
| setState('ui.generationQueue', remaining); |
| await generateSingleImage(...task); |
| generateQueued(); |
| }, 300); |
| |
| return { |
| api: { |
| generate: async () => { |
| const prompt = sanitizeInput(getState("ui.prompt", "").trim()); |
| const seed = getState("ui.seed", ""); |
| const width = Math.min(2048, Math.max(64, getState("ui.width", "512"))); |
| const height = Math.min(2048, Math.max(64, getState("ui.height", "512"))); |
| const currentModel = getState("model", "flux"); |
| |
| if (!prompt) { |
| headless.ToastSystem.showToast(t('toastEnterPrompt'), "error"); |
| return; |
| } |
| |
| const imageId = uniqueId(); |
| const newImage = { |
| id: imageId, status: "loading", prompt, seed, width, height, imageUrl: null, |
| historyId: uniqueId(), createdAt: new Date().toISOString(), |
| model: currentModel |
| }; |
| |
| setState(`ui.imagesById.${imageId}`, newImage); |
| setState("ui.imagesList", [imageId, ...getState("ui.imagesList", [])]); |
| headless.PromptHistoryManager.add(newImage); |
| |
| |
| setState('ui.generationQueue', [...getState('ui.generationQueue', []), [imageId, prompt, seed, width, height, currentModel]]); |
| generateQueued(); |
| }, |
| |
| regenerateFromHistory: () => { |
| const history = getState('promptHistory', []); |
| if (!history || history.length === 0) return; |
| const count = Math.min(50, history.length); |
| |
| history.slice(0, count).forEach(item => { |
| const id = uniqueId(); |
| |
| const modelToUse = item.model || getState("model", "flux"); |
| |
| const newImage = { |
| id, status: "loading", prompt: item.prompt, seed: item.seed, width: item.width, |
| height: item.height, imageUrl: null, historyId: item.id, |
| createdAt: item.createdAt || new Date().toISOString(), |
| model: modelToUse |
| }; |
| |
| setState(`ui.imagesById.${id}`, newImage); |
| setState("ui.imagesList", [...getState("ui.imagesList", []), id]); |
| |
| setState('ui.generationQueue', [...getState('ui.generationQueue', []), [id, item.prompt, item.seed, item.width, item.height, modelToUse]]); |
| }); |
| |
| generateQueued(); |
| headless.ToastSystem.showToast(t('toastRestoring', { count }), "info"); |
| } |
| } |
| }; |
| }; |
| |
| |
| const ImageDisplay = (props, { getState, setState, headless }) => ({ |
| render: () => { |
| const { t } = headless.I18nManager; |
| const img = getState(`ui.imagesById.${props.id}`); |
| if (!img) return "ignore"; |
| |
| return { |
| div: { |
| className: { "image-card": true, "featured": props.featured }, |
| children: [ |
| { |
| div: { |
| className: "image-display", |
| children: [ |
| { |
| div: { |
| className: "image-actions", |
| children: [ |
| { |
| button: { |
| className: "action-btn delete", text: "✕", title: () => t('deleteTooltip'), |
| onclick: () => { |
| headless.PromptHistoryManager.remove(img.historyId); |
| const ids = getState("ui.imagesList", []); |
| setState("ui.imagesList", ids.filter((id) => id !== props.id)); |
| const newMap = { ...getState("ui.imagesById") }; |
| delete newMap[props.id]; |
| setState("ui.imagesById", newMap); |
| headless.ToastSystem.showToast(t('toastImageRemoved'), "info"); |
| } |
| } |
| }, |
| |
| ] |
| } |
| }, |
| { |
| div: { |
| style: { width: '100%', height: '100%' }, |
| onclick: () => { |
| setState("ui.prompt", img.prompt); |
| setState("ui.seed", img.seed); |
| setState("ui.width", img.width); |
| setState("ui.height", img.height); |
| setState("model", img.model || "flux"); |
| headless.ToastSystem.showToast(t('toastSettingsLoaded'), "info"); |
| }, |
| children: () => { |
| if (img.status === "loading") return [ |
| { |
| div: |
| { |
| style: { display: 'grid', height: '100%', placeItems: 'center' }, |
| children: [{ div: { className: "spinner" } }] |
| } |
| } |
| ]; |
| if (img.status === "error") return [{ div: { text: t('failedToLoad') } }]; |
| return [{ img: { src: img.imageUrl, alt: img.prompt, loading: "lazy" } }]; |
| } |
| } |
| } |
| ] |
| } |
| }, |
| { |
| div: { |
| className: "image-info", |
| children: [ |
| { div: { className: "image-prompt", text: img.prompt } }, |
| { |
| div: { |
| className: "image-meta", |
| children: [ |
| { span: { text: `${img.width}x${img.height}` } }, |
| { span: { text: () => img.seed ? t('metaSeed', { seed: img.seed }) : t('metaRandom') } }, |
| { span: { text: `Model: ${img.model || "N/A"}` } } |
| ] |
| } |
| } |
| ] |
| } |
| } |
| ] |
| } |
| }; |
| } |
| }); |
| |
| |
| const ToastDisplay = (props, { getState }) => ({ |
| render: () => ({ |
| div: { |
| className: "toast-container", |
| children: () => getState('toasts', []).map(toast => ({ |
| div: { |
| key: toast.id, className: `toast ${toast.type}`, |
| children: [ |
| { div: { text: toast.type === 'success' ? '✓' : '⚠' } }, |
| { div: { text: toast.message } } |
| ] |
| } |
| })) |
| } |
| }) |
| }); |
| |
| |
| |
| const GalleryControls = (props, { getState, setState, headless }) => ({ |
| render: () => { |
| const { t } = headless.I18nManager; |
| return { |
| div: { |
| style: {display: "none"}, |
| className: "tabs", |
| children: [ |
| { |
| button: { |
| className: { "tab": true, "active": getState('ui.activeTab', 'images') === 'images' }, |
| text: () => t('galleryTab'), |
| onclick: () => setState('ui.activeTab', 'images') |
| } |
| }, |
| { |
| button: { |
| className: { "tab": true, "active": getState('ui.activeTab') === 'history' }, |
| text: () => t('historyTab'), |
| onclick: () => setState('ui.activeTab', 'history') |
| } |
| } |
| ] |
| } |
| } |
| } |
| }); |
| |
| |
| const SelectModels = (props, { getState, setState, headless }) => { |
| const { t } = headless.I18nManager; |
| |
| return { |
| div: { |
| className: "input-group", |
| children: [ |
| { |
| label: { |
| style: { |
| color: "var(--primary)", |
| display: "block", |
| marginBottom: "0.5rem", |
| }, |
| text: () => t('selectModelLabel') |
| } |
| }, |
| { |
| select: { |
| |
| style: { |
| background: "#1A1A2E", |
| color: "var(--text-primary)", |
| fontSize: "1rem", |
| border: "1px solid rgba(255,255,255,0.5)", |
| borderRadius: "5px", |
| padding: "0.5rem 1rem", |
| appearance: "none", |
| cursor: "pointer", |
| outline: "none", |
| backgroundImage: 'url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%20197.4l-14.3-14.3c-2.1-2.1-4.7-3.3-7.7-3.3s-5.6%201.2-7.7%203.3L146.2%20275.9%2034.7%20164.4c-2.1-2.1-4.7-3.3-7.7-3.3s-5.6%201.2-7.7%203.3L5%20178.7c-2.1%202.1-3.3%204.7-3.3%207.7s1.2%205.6%203.3%207.7l136.2%20136.2c2.1%202.1%204.7%203.3%207.7%203.3s5.6-1.2%207.7-3.3L287%20212.8c2.1-2.1%203.3-4.7%203.3-7.7s-1.2-5.6-3.3-7.7z%22%2F%3E%3C%2Fsvg%3E")', |
| backgroundRepeat: 'no-repeat', |
| backgroundPosition: 'right 0.7em top 50%', |
| backgroundSize: '0.65em auto', |
| paddingRight: '2.5em', |
| minWidth: '100px', |
| width: '100%' |
| }, |
| onchange: (e) => setState("model", e.target.value), |
| value: () => getState("model", "flux"), |
| children: [ |
| |
| { |
| option: { |
| text: "Flux", |
| value: "flux" |
| } |
| }, |
| { |
| option: { |
| text: "Turbo", |
| value: "turbo" |
| } |
| }, |
| ] |
| } |
| } |
| ] |
| } |
| } |
| } |
| |
| |
| const PromptInput = (props, { getState, setState, headless }) => { |
| const { t } = headless.I18nManager; |
| return { |
| div: { |
| className: "input-group", |
| children: [ |
| |
| { |
| div: { |
| style: { display: "flex", gap: "2rem", flexDirection: "column"}, |
| } |
| }, |
| { SelectModels: {} }, |
| { |
| div: { |
| style: { |
| position: "relative", |
| top: "0.5rem", |
| color: "var(--primary)", |
| }, |
| text: t("promptLabel") |
| } |
| }, |
| { |
| textarea: { |
| style: { width: "100%", |
| maxWidth: '100%', |
| minWidth: '100%', |
| display: "flex", |
| "flex-direction": "column", |
| "background": "#1A1A2E", |
| "color": "var(--text-primary)", |
| "font-size": "1rem", |
| "border": "1px solid rgba(255,255,255,0.5)", |
| "border-radius": "5px", |
| "padding": "1rem", |
| spellcheck: "false" , |
| autocorrect:"off", |
| marginTop: "1rem" |
| }, |
| rows: "5", |
| value: () => getState("ui.prompt", ""), |
| oninput: e => setState("ui.prompt", e.target.value) |
| } |
| } |
| ] |
| } |
| } |
| }; |
| |
| const Toolbox = (props, { getState, setState, headless }) => { |
| |
| const { t } = headless.I18nManager; |
| return { |
| div: { |
| className: "toolbox-bar", |
| children: [ |
| { div: { |
| className: "toolbox-item", |
| style: () => ({ display: 'flex', 'flex-direction': getState("ui.isMobile") ? 'column' : 'row' }), |
| children: [ |
| { label: { text: () => t('widthLabel') } }, |
| { input: { |
| type: "number", min: "64", max: "2048", step: "16", |
| value: () => getState("ui.width", "512"), |
| oninput: e => setState("ui.width", e.target.value) } }] } |
| }, |
| { div: { |
| className: "toolbox-item", |
| style: () => ({ display: 'flex', 'flex-direction': getState("ui.isMobile") ? 'column' : 'row' }), |
| children: [ |
| { label: { text: () => t('heightLabel') } }, |
| { input: { |
| type: "number", min: "64", max: "2048", step: "16", |
| value: () => getState("ui.height", "512"), |
| oninput: e => setState("ui.height", e.target.value) } }] } }, |
| { div: { |
| className: "toolbox-item", |
| style: () => ({ display: 'flex', 'flex-direction': getState("ui.isMobile") ? 'column' : 'row' }), |
| children: [ |
| { label: { text: () => t('seedLabel') } }, |
| { input: { |
| type: "number", |
| value: () => getState("ui.seed", ""), |
| oninput: e => setState("ui.seed", e.target.value) } }] |
| } }, |
| { |
| div: { |
| className: 'toolbox-actions', |
| children: [ |
| { button: { |
| type: "button", |
| className: "btn btn-outline", |
| text: () => t('randomizeButton'), |
| onclick: () => { |
| const newSeed = Math.floor(Math.random() * 1000000); |
| setState("ui.seed", newSeed); |
| headless.ToastSystem.showToast(t('toastNewSeed', { seed: newSeed }), "info"); } |
| } }, |
| { button: { type: "submit", className: "btn", text: () => t('generateButton') } } |
| ] |
| } |
| } |
| ] |
| } |
| } |
| }; |
| |
| |
| const ControlPanel = (props, { headless }) => { |
| return { |
| div: { |
| className: "control-panel", |
| children: [{ |
| form: { |
| className: "prompt-form", |
| onsubmit: (e) => { e.preventDefault(); headless.ImageGenerator?.generate(); }, |
| children: [ |
| { PromptInput: {} }, |
| { Toolbox: {} } |
| ] |
| } |
| }] |
| } |
| } |
| }; |
| |
| |
| const Gallery = (props, { getState, headless }) => ({ |
| render: () => { |
| const { t } = headless.I18nManager; |
| const images = getState("ui.imagesList", []); |
| if (images.length === 0) { |
| return { |
| div: { |
| className: "empty-state", |
| children: [ |
| { div: { className: "empty-state-icon", text: "🖼️" } }, |
| { h3: { text: () => t('emptyGalleryTitle') } }, |
| { p: { text: () => t('emptyGalleryDesc') } } |
| ] |
| } |
| }; |
| } |
| return { |
| div: { |
| className: "image-gallery", |
| children: images.map((id, index) => ({ ImageDisplay: { key: id, id, featured: index === 0 } })) |
| } |
| }; |
| } |
| }); |
| |
| |
| const LanguageSwitcher = (props, { getState, setState }) => { |
| const currentLang = getState('ui.lang', 'en'); |
| return { |
| div: { |
| children: [ |
| { |
| div: { |
| style: { |
| display: "flex", |
| gap: "1rem", |
| justifyContent: "center", |
| position: "absolute", |
| right: 0, |
| top: "-0.5rem" |
| }, |
| children: Object.keys(translations).map(langCode => ({ |
| button: { |
| style: { |
| border:"none", |
| cursor: "pointer", |
| |
| background: "rgba(255,255,255,0.121)", |
| border: "1px solid rgba(255, 255, 255, 0.4)", |
| fontSize: "2rem", |
| width: "3rem" |
| }, |
| key: langCode, |
| text: translations[langCode].flag , |
| onclick: () => { |
| setState('ui.lang', langCode); |
| |
| } |
| } |
| })) |
| } |
| } |
| ] |
| } |
| } |
| }; |
| |
| |
| const Banner = (props, { getState, setState, headless }) => ({ |
| render: () => { |
| const { t } = headless.I18nManager; |
| if (!getState('ui.isBannerVisible', true)) return "ignore"; |
| |
| return { |
| div: { |
| className: 'banner', |
| children: [ |
| { |
| div: { |
| className: 'banner-content', |
| children: [{ span: { text: () => t('bannerText') } }] |
| } |
| }, |
| { |
| button: { |
| className: 'banner-close', |
| text: '✕', |
| onclick: () => setState('ui.isBannerVisible', false) |
| } |
| } |
| ] |
| } |
| } |
| } |
| }); |
| |
| |
| const Toolbar = (props, { setState, headless }) => ({ |
| render: () => { |
| const { t } = headless.I18nManager; |
| return { |
| div: { |
| className: 'gallery-toolbar', |
| style: { |
| display: "flex", |
| gap: "1rem", |
| "justify-content": "center", |
| "align-items": "center", padding: "0 0.5rem", |
| "margin-bottom": "1.5rem" |
| }, |
| children: [ |
| { |
| button: { |
| className: 'btn btn-action', |
| text: t("clearPrompt"), |
| onclick: () => setState("ui.prompt", "") |
| } |
| }, |
| { |
| button: { |
| className: 'btn btn-danger', |
| text: () => t('clearAllButton'), |
| onclick: () => headless.PromptHistoryManager?.clearAll() |
| } |
| } |
| ] |
| } |
| } |
| } |
| }); |
| |
| |
| const App = (props, { headless }) => ({ |
| render: () => { |
| const { t } = headless.I18nManager; |
| return { |
| div: { |
| className: "app-layout", |
| children: [ |
| { |
| div: { |
| className: "header", |
| children: [ |
| { LanguageSwitcher: {} }, |
| { h1: |
| { |
| style: { 'margin-top': '2rem'}, |
| text: () => t('headerTitle') |
| } }, |
| { p: { className: "tagline", text: () => t('tagline') } } |
| ] |
| } |
| }, |
| { ControlPanel: {} }, |
| { Toolbar: {} }, |
| |
| { Gallery: {} }, |
| |
| |
| ] |
| } |
| } |
| } |
| }); |
| |
| |
| const app = new Juris({ |
| states: { |
| ui: { |
| lang: 'fr', |
| isMobile: 'false', |
| langSwitcherOpen: false, |
| isBannerVisible: true, |
| prompt: "Oil thick past paint of Paris in winter", |
| seed: "57811", |
| width: "1024", |
| height: "1024", |
| imagesList: [], |
| imagesById: {}, |
| generationQueue: [], |
| activeTab: "images", |
| lightbox: { activeImage: null }, |
| }, |
| model: "flux", |
| promptHistory: [], |
| toasts: [], |
| }, |
| components: { |
| App, ControlPanel, PromptInput, Toolbox, |
| GalleryControls, Gallery, ImageDisplay, ToastDisplay, |
| LanguageSwitcher, Toolbar, Banner, SelectModels |
| }, |
| headlessComponents: { |
| I18nManager: { fn: I18nManager, options: { autoInit: true } }, |
| ImageGenerator: { fn: ImageGenerator, options: { autoInit: true } }, |
| PromptHistoryManager: { fn: PromptHistoryManager, options: { autoInit: true } }, |
| ToastSystem: { fn: ToastSystem, options: { autoInit: true } }, |
| }, |
| layout: { App: {} }, |
| }); |
| |
| app.render(); |
| |
| |
| setTimeout(() => { |
| if (app.headlessAPIs.ImageGenerator) { |
| app.headlessAPIs.ImageGenerator.regenerateFromHistory(); |
| } |
| }, 500); |
| |
| |
| document.addEventListener('keydown', (e) => { |
| if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return; |
| if (e.key === 'Escape') app.setState('ui.lightbox.activeImage', null); |
| if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) { |
| e.preventDefault(); |
| app.headlessAPIs.ImageGenerator?.generate(); |
| } |
| }); |
| |
| |
| if (window.matchMedia("(max-width: 640px)").matches) { |
| app.setState("ui.isMobile", true); |
| } |
| else { |
| app.setState("ui.isMobile", false); |
| } |
| |
| |
| |
| </script> |
| </body> |
|
|
| </html> |
|
|
