Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Prompt Generator & Launcher</title> | |
| <style> | |
| :root { | |
| --primary: #4F46E5; | |
| --primary-hover: #4338ca; | |
| --bg: #F3F4F6; | |
| --card-bg: #ffffff; | |
| --text: #1F2937; | |
| --border: #D1D5DB; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; | |
| background-color: var(--bg); | |
| color: var(--text); | |
| margin: 0; | |
| padding: 20px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| } | |
| .container { | |
| background-color: var(--card-bg); | |
| width: 100%; | |
| max-width: 600px; | |
| padding: 30px; | |
| border-radius: 16px; | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| h1 { | |
| text-align: center; | |
| color: var(--primary); | |
| margin-top: 0; | |
| margin-bottom: 5px; | |
| font-size: 1.8rem; | |
| } | |
| p.subtitle { | |
| text-align: center; | |
| color: #6B7280; | |
| margin-bottom: 25px; | |
| font-size: 0.95rem; | |
| } | |
| .form-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 15px; | |
| } | |
| .full-width { | |
| grid-column: span 2; | |
| } | |
| .form-group { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| label { | |
| font-weight: 600; | |
| margin-bottom: 6px; | |
| font-size: 0.9rem; | |
| color: #374151; | |
| } | |
| select, textarea, input { | |
| padding: 10px 12px; | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| background-color: #fff; | |
| transition: border-color 0.2s, box-shadow 0.2s; | |
| outline: none; | |
| } | |
| select:focus, textarea:focus { | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); | |
| } | |
| textarea { | |
| resize: vertical; | |
| min-height: 80px; | |
| font-family: inherit; | |
| } | |
| .btn-container { | |
| margin-top: 25px; | |
| text-align: center; | |
| } | |
| .action-btn { | |
| background-color: var(--primary); | |
| color: white; | |
| border: none; | |
| padding: 14px 28px; | |
| font-size: 1.1rem; | |
| font-weight: bold; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| width: 100%; | |
| transition: background-color 0.2s, transform 0.1s; | |
| box-shadow: 0 4px 6px rgba(79, 70, 229, 0.2); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .action-btn:hover { | |
| background-color: var(--primary-hover); | |
| transform: translateY(-1px); | |
| } | |
| .action-btn:active { | |
| transform: translateY(1px); | |
| } | |
| /* Адаптивность для мобильных */ | |
| @media (max-width: 500px) { | |
| .form-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .full-width { | |
| grid-column: span 1; | |
| } | |
| .container { | |
| padding: 20px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Генератор Персонажа</h1> | |
| <p class="subtitle">Настройте параметры, скопируйте JSON и перейдите в редактор</p> | |
| <form id="promptForm"> | |
| <div class="form-grid"> | |
| <!-- Пол --> | |
| <div class="form-group"> | |
| <label for="gender">Пол</label> | |
| <select id="gender"> | |
| <option value="Female">Женщина</option> | |
| <option value="Male">Мужчина</option> | |
| </select> | |
| </div> | |
| <!-- Возраст --> | |
| <div class="form-group"> | |
| <label for="age">Возраст</label> | |
| <select id="age"> | |
| <option value="Newborn (0-1 year)">Младенец (0-1)</option> | |
| <option value="Toddler (1-3 years)">Малыш (1-3)</option> | |
| <option value="Child (4-9 years)">Ребенок (4-9)</option> | |
| <option value="Preteen (10-12 years)">Ребенок (10-12)</option> | |
| <option value="Teenager (13-19 years)">Подросток (13-19)</option> | |
| <option value="Young Adult (20-29 years)">20-29 лет</option> | |
| <option value="Adult (30-39 years)">30-39 лет</option> | |
| <option value="Middle-aged (40-49 years)">40-49 лет</option> | |
| <option value="Mature (50-59 years)">50-59 лет</option> | |
| <option value="Elderly (60-69 years)">60-69 лет</option> | |
| <option value="Senior (70+ years)">70+ лет</option> | |
| </select> | |
| </div> | |
| <!-- Национальность --> | |
| <div class="form-group"> | |
| <label for="nationality">Национальность</label> | |
| <select id="nationality"> | |
| <option value="European">Европейская</option> | |
| <option value="Slavic">Славянская</option> | |
| <option value="Asian">Азиатская</option> | |
| <option value="African">Африканская</option> | |
| <option value="African American">Афроамериканская</option> | |
| <option value="Latino">Латиноамериканская</option> | |
| <option value="Indian">Индийская</option> | |
| <option value="Middle Eastern">Ближневосточная</option> | |
| <option value="Nordic">Скандинавская</option> | |
| <option value="Mixed Race">Смешанная</option> | |
| </select> | |
| </div> | |
| <!-- Фигура --> | |
| <div class="form-group"> | |
| <label for="bodyType">Фигура</label> | |
| <select id="bodyType"> | |
| <option value="Slim">Стройная</option> | |
| <option value="Athletic">Спортивная</option> | |
| <option value="Average">Обычная</option> | |
| <option value="Muscular">Мускулистая</option> | |
| <option value="Curvy">Пышная (Curvy)</option> | |
| <option value="Plus Size">Полная (Plus Size)</option> | |
| <option value="Skinny">Очень худая</option> | |
| </select> | |
| </div> | |
| <!-- Волосы --> | |
| <div class="form-group"> | |
| <label for="hairColor">Цвет волос</label> | |
| <select id="hairColor"> | |
| <option value="Brown">Каштановые</option> | |
| <option value="Blonde">Блонд</option> | |
| <option value="Black">Черные</option> | |
| <option value="Red">Рыжие</option> | |
| <option value="Grey">Седые</option> | |
| <option value="White">Белые</option> | |
| <option value="Dyed Pink">Розовые</option> | |
| <option value="Dyed Blue">Синие</option> | |
| <option value="Bald">Лысый</option> | |
| </select> | |
| </div> | |
| <!-- Прическа --> | |
| <div class="form-group"> | |
| <label for="hairstyle">Прическа</label> | |
| <select id="hairstyle"> | |
| <option value="Long straight">Длинные прямые</option> | |
| <option value="Wavy">Волнистые</option> | |
| <option value="Curly">Кудрявые</option> | |
| <option value="Bob cut">Каре</option> | |
| <option value="Short cut">Короткая стрижка</option> | |
| <option value="Ponytail">Хвост</option> | |
| <option value="Bun">Пучок</option> | |
| <option value="Braids">Косички</option> | |
| <option value="Dreadlocks">Дреды</option> | |
| <option value="Bald">Налысо</option> | |
| </select> | |
| </div> | |
| <!-- Глаза --> | |
| <div class="form-group"> | |
| <label for="eyeColor">Цвет глаз</label> | |
| <select id="eyeColor"> | |
| <option value="Brown">Карие</option> | |
| <option value="Blue">Голубые</option> | |
| <option value="Green">Зеленые</option> | |
| <option value="Grey">Серые</option> | |
| <option value="Hazel">Ореховые</option> | |
| <option value="Heterochromia">Разные (Гетерохромия)</option> | |
| </select> | |
| </div> | |
| <!-- Стиль --> | |
| <div class="form-group"> | |
| <label for="style">Стиль фото</label> | |
| <select id="style"> | |
| <option value="Professional Studio Portrait">Студийный портрет</option> | |
| <option value="Cinematic Lighting">Кинематографичный</option> | |
| <option value="Candid Street Photography">Уличное фото</option> | |
| <option value="Artistic Creative">Творческий / Арт</option> | |
| <option value="Cyberpunk Neon">Киберпанк / Неон</option> | |
| <option value="Black and White">Чёрно-белое</option> | |
| <option value="Vintage Polaroid">Винтаж / Полароид</option> | |
| <option value="Fashion Editorial">Фэшн (Журнальный)</option> | |
| <option value="Corporate Headshot">Бизнес портрет</option> | |
| <option value="Fantasy">Фэнтези</option> | |
| <option value="Anime Style">Аниме стиль</option> | |
| </select> | |
| </div> | |
| <!-- Доп инфо --> | |
| <div class="form-group full-width"> | |
| <label for="additional">Дополнительные пожелания</label> | |
| <textarea id="additional" placeholder="Опишите одежду, локацию, освещение или эмоции (например: в красном костюме, смеется, на фоне Эйфелевой башни)"></textarea> | |
| </div> | |
| </div> | |
| <div class="btn-container"> | |
| <button type="button" class="action-btn" onclick="processAndOpen()"> | |
| <span>СКОПИРОВАТЬ И ОТКРЫТЬ САЙТ</span> | |
| <span style="font-size: 1.2em">🚀</span> | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <script> | |
| async function processAndOpen() { | |
| const btn = document.querySelector('.action-btn'); | |
| const originalText = btn.innerHTML; | |
| // 1. Сбор данных | |
| const data = { | |
| prompt_settings: { | |
| subject: { | |
| gender: document.getElementById('gender').value, | |
| age: document.getElementById('age').value, | |
| ethnicity: document.getElementById('nationality').value, | |
| appearance: { | |
| body: document.getElementById('bodyType').value, | |
| hair: `${document.getElementById('hairColor').value}, ${document.getElementById('hairstyle').value}`, | |
| eyes: document.getElementById('eyeColor').value | |
| } | |
| }, | |
| style: document.getElementById('style').value, | |
| details: document.getElementById('additional').value || "High quality, sharp focus", | |
| technical: "8k resolution, photorealistic, masterpiece" | |
| } | |
| }; | |
| const jsonString = JSON.stringify(data, null, 2); | |
| // 2. Копирование | |
| let copied = false; | |
| try { | |
| if (navigator.clipboard && navigator.clipboard.writeText) { | |
| await navigator.clipboard.writeText(jsonString); | |
| copied = true; | |
| } else { | |
| throw new Error("Clipboard API unavailable"); | |
| } | |
| } catch (err) { | |
| // Fallback для старых браузеров | |
| const textArea = document.createElement("textarea"); | |
| textArea.value = jsonString; | |
| textArea.style.position = "fixed"; | |
| document.body.appendChild(textArea); | |
| textArea.focus(); | |
| textArea.select(); | |
| try { | |
| document.execCommand('copy'); | |
| copied = true; | |
| } catch (e) { | |
| console.error("Copy failed", e); | |
| alert("Не удалось скопировать автоматически. Пожалуйста, скопируйте текст вручную."); | |
| } | |
| document.body.removeChild(textArea); | |
| } | |
| // 3. Визуальная индикация и открытие ссылки | |
| if (copied) { | |
| btn.style.backgroundColor = "#10B981"; // Зеленый цвет | |
| btn.innerHTML = "СКОПИРОВАНО! ОТКРЫВАЮ... ✅"; | |
| setTimeout(() => { | |
| // Открытие ссылки в новой вкладке | |
| window.open('https://lmarena.ai/ru?chat-modality=image&mode=direct', '_blank'); | |
| // Возврат кнопки в исходное состояние | |
| setTimeout(() => { | |
| btn.style.backgroundColor = ""; | |
| btn.innerHTML = originalText; | |
| }, 1000); | |
| }, 800); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |