Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LMArena WebView + Prompt Generator</title> | |
| <style> | |
| body, html { | |
| margin: 0; | |
| padding: 0; | |
| height: 100%; | |
| width: 100%; | |
| overflow: hidden; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| /* Стиль для WebView (iframe) */ | |
| iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| display: block; | |
| } | |
| /* Плавающая кнопка справа */ | |
| .fab-btn { | |
| position: fixed; | |
| right: 20px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 60px; | |
| height: 60px; | |
| background-color: #4CAF50; | |
| color: white; | |
| border-radius: 50%; | |
| border: none; | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.3); | |
| cursor: pointer; | |
| z-index: 1000; | |
| font-size: 24px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: transform 0.2s, background-color 0.2s; | |
| } | |
| .fab-btn:hover { | |
| transform: translateY(-50%) scale(1.1); | |
| background-color: #45a049; | |
| } | |
| /* Модальное окно (фон) */ | |
| .modal-overlay { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.7); | |
| z-index: 2000; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| /* Контент модального окна */ | |
| .modal-content { | |
| background-color: white; | |
| padding: 25px; | |
| border-radius: 12px; | |
| width: 90%; | |
| max-width: 500px; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.3); | |
| position: relative; | |
| } | |
| .modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| border-bottom: 1px solid #eee; | |
| padding-bottom: 10px; | |
| } | |
| .modal-header h2 { | |
| margin: 0; | |
| font-size: 1.2rem; | |
| color: #333; | |
| } | |
| .close-btn { | |
| background: none; | |
| border: none; | |
| font-size: 28px; | |
| cursor: pointer; | |
| color: #aaa; | |
| } | |
| .close-btn:hover { | |
| color: #333; | |
| } | |
| /* Форма */ | |
| .form-group { | |
| margin-bottom: 15px; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 5px; | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| color: #555; | |
| } | |
| .form-group select, .form-group textarea { | |
| width: 100%; | |
| padding: 10px; | |
| border: 1px solid #ccc; | |
| border-radius: 6px; | |
| font-size: 1rem; | |
| box-sizing: border-box; /* Чтобы padding не ломал ширину */ | |
| } | |
| .form-group textarea { | |
| resize: vertical; | |
| min-height: 60px; | |
| } | |
| /* Кнопка "Готово" */ | |
| .submit-btn { | |
| width: 100%; | |
| padding: 12px; | |
| background-color: #2196F3; | |
| color: white; | |
| border: none; | |
| border-radius: 6px; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| margin-top: 10px; | |
| font-weight: bold; | |
| } | |
| .submit-btn:hover { | |
| background-color: #0b7dda; | |
| } | |
| /* Адаптив для маленьких экранов */ | |
| @media (max-width: 600px) { | |
| .modal-content { | |
| width: 95%; | |
| padding: 15px; | |
| } | |
| .fab-btn { | |
| width: 50px; | |
| height: 50px; | |
| font-size: 20px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Webview Сайта --> | |
| <iframe src="https://lmarena.ai/ru?chat-modality=image&mode=direct" allow="clipboard-write"></iframe> | |
| <!-- Кнопка вызова генератора --> | |
| <button class="fab-btn" onclick="openModal()" title="Генератор промптов"> | |
| 🎨 | |
| </button> | |
| <!-- Модальное окно --> | |
| <div class="modal-overlay" id="promptModal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h2>Параметры Модели</h2> | |
| <button class="close-btn" onclick="closeModal()">×</button> | |
| </div> | |
| <form id="promptForm"> | |
| <!-- Пол --> | |
| <div class="form-group"> | |
| <label>Пол</label> | |
| <select id="gender"> | |
| <option value="Male">Мужчина</option> | |
| <option value="Female">Женщина</option> | |
| </select> | |
| </div> | |
| <!-- Возраст --> | |
| <div class="form-group"> | |
| <label>Возраст</label> | |
| <select id="age"> | |
| <option value="Baby (0-2 years)">Младенец (0-2)</option> | |
| <option value="Child (3-12 years)">Ребенок (3-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="Senior (50-59 years)">Пожилой (50-59)</option> | |
| <option value="Elderly (60-69 years)">Старый (60-69)</option> | |
| <option value="Very Old (70+ years)">Глубокая старость (70+)</option> | |
| </select> | |
| </div> | |
| <!-- Национальность --> | |
| <div class="form-group"> | |
| <label>Национальность</label> | |
| <select id="nationality"> | |
| <option value="European/Caucasian">Европейская</option> | |
| <option value="African/Black">Африканская</option> | |
| <option value="Asian">Азиатская</option> | |
| <option value="Latino/Hispanic">Латиноамериканская</option> | |
| <option value="Indian">Индийская</option> | |
| <option value="Middle Eastern">Ближневосточная</option> | |
| <option value="Slavic">Славянская</option> | |
| <option value="Nordic">Скандинавская</option> | |
| <option value="Mixed race">Смешанная</option> | |
| </select> | |
| </div> | |
| <!-- Цвет волос --> | |
| <div class="form-group"> | |
| <label>Цвет волос</label> | |
| <select id="hairColor"> | |
| <option value="Blonde">Блонд</option> | |
| <option value="Brunette">Брюнет</option> | |
| <option value="Black">Черные</option> | |
| <option value="Red">Рыжие</option> | |
| <option value="Grey">Седые</option> | |
| <option value="White">Белые</option> | |
| <option value="Dyed Blue">Крашеные (Синий)</option> | |
| <option value="Dyed Pink">Крашеные (Розовый)</option> | |
| <option value="Bald">Лысый</option> | |
| </select> | |
| </div> | |
| <!-- Цвет глаз --> | |
| <div class="form-group"> | |
| <label>Цвет глаз</label> | |
| <select id="eyeColor"> | |
| <option value="Blue">Голубые</option> | |
| <option value="Green">Зеленые</option> | |
| <option value="Brown">Карие</option> | |
| <option value="Hazel">Ореховые</option> | |
| <option value="Grey">Серые</option> | |
| <option value="Heterochromia">Разные глаза (Гетерохромия)</option> | |
| </select> | |
| </div> | |
| <!-- Прическа --> | |
| <div class="form-group"> | |
| <label>Прическа</label> | |
| <select id="hairstyle"> | |
| <option value="Long straight">Длинные прямые</option> | |
| <option value="Short cut">Короткая стрижка</option> | |
| <option value="Bob cut">Каре</option> | |
| <option value="Curly">Кудрявые</option> | |
| <option value="Wavy">Волнистые</option> | |
| <option value="Ponytail">Хвост</option> | |
| <option value="Bun">Пучок</option> | |
| <option value="Buzz cut">Ежик (под машинку)</option> | |
| <option value="Dreadlocks">Дреды</option> | |
| <option value="Messy">Растрепанные</option> | |
| </select> | |
| </div> | |
| <!-- Фигура --> | |
| <div class="form-group"> | |
| <label>Фигура</label> | |
| <select id="bodyType"> | |
| <option value="Slim">Стройная/Худая</option> | |
| <option value="Athletic">Атлетичная/Спортивная</option> | |
| <option value="Muscular">Мускулистая</option> | |
| <option value="Curvy">С формами (Curvy)</option> | |
| <option value="Average">Обычная</option> | |
| <option value="Plus-size">Плюс-сайз</option> | |
| <option value="Skinny">Очень худая</option> | |
| </select> | |
| </div> | |
| <!-- Стиль фото --> | |
| <div class="form-group"> | |
| <label>Стиль фотографии</label> | |
| <select id="style"> | |
| <option value="Professional Studio Portrait, high key lighting">Студийный портрет (проф)</option> | |
| <option value="Creative Artistic, colorful lighting">Творческий/Арт</option> | |
| <option value="Cinematic, movie still, dramatic lighting">Кинематографичный</option> | |
| <option value="Street Photography, natural light">Уличная фотография</option> | |
| <option value="Cyberpunk, neon lights">Киберпанк (Неон)</option> | |
| <option value="Black and White, high contrast">Чёрно-белое</option> | |
| <option value="Fashion Editorial">Фэшн (Журнальный)</option> | |
| <option value="Vintage Polaroid">Винтаж (Полароид)</option> | |
| <option value="Fantasy, ethereal">Фэнтези</option> | |
| <option value="Corporate Headshot">Деловой портрет</option> | |
| </select> | |
| </div> | |
| <!-- Доп пожелания --> | |
| <div class="form-group"> | |
| <label>Дополнительные пожелания (напр. одежда, фон)</label> | |
| <textarea id="additional" placeholder="Например: в деловом костюме, на фоне ночного города..."></textarea> | |
| </div> | |
| <button type="button" class="submit-btn" onclick="generateAndCopy()">ГОТОВО</button> | |
| </form> | |
| </div> | |
| </div> | |
| <script> | |
| // Функции открытия и закрытия модального окна | |
| function openModal() { | |
| document.getElementById('promptModal').style.display = 'flex'; | |
| } | |
| function closeModal() { | |
| document.getElementById('promptModal').style.display = 'none'; | |
| } | |
| // Закрытие по клику вне окна | |
| window.onclick = function(event) { | |
| const modal = document.getElementById('promptModal'); | |
| if (event.target == modal) { | |
| closeModal(); | |
| } | |
| } | |
| // Основная логика генерации | |
| async function generateAndCopy() { | |
| // Сбор данных из формы | |
| const gender = document.getElementById('gender').value; | |
| const age = document.getElementById('age').value; | |
| const nationality = document.getElementById('nationality').value; | |
| const hairColor = document.getElementById('hairColor').value; | |
| const eyeColor = document.getElementById('eyeColor').value; | |
| const hairstyle = document.getElementById('hairstyle').value; | |
| const bodyType = document.getElementById('bodyType').value; | |
| const style = document.getElementById('style').value; | |
| // Перевод пользовательского ввода (упрощенный, так как ввод на русском, но промпт нужен на английском) | |
| // В идеале здесь нужен API переводчик, но мы просто добавим текст как есть, | |
| // так как современные модели понимают смешанный контекст или транслитерацию. | |
| // Но лучше всего пометить это как "custom_notes". | |
| const additional = document.getElementById('additional').value; | |
| // Формирование JSON объекта | |
| const promptObject = { | |
| "photo_request": { | |
| "subject": { | |
| "gender": gender, | |
| "age_category": age, | |
| "ethnicity": nationality, | |
| "appearance": { | |
| "hair_color": hairColor, | |
| "eye_color": eyeColor, | |
| "hairstyle": hairstyle, | |
| "body_type": bodyType | |
| } | |
| }, | |
| "photography_style": style, | |
| "technical_settings": "8k resolution, photorealistic, highly detailed, professional photography, depth of field", | |
| "additional_notes": additional ? additional : "None" | |
| } | |
| }; | |
| // Преобразование в строку | |
| const jsonString = JSON.stringify(promptObject, null, 2); | |
| // Копирование в буфер обмена | |
| try { | |
| await navigator.clipboard.writeText(jsonString); | |
| alert("JSON промпт скопирован в буфер обмена!"); | |
| closeModal(); | |
| } catch (err) { | |
| console.error('Ошибка копирования: ', err); | |
| // Фоллбэк для старых браузеров или если нет https | |
| const textArea = document.createElement("textarea"); | |
| textArea.value = jsonString; | |
| document.body.appendChild(textArea); | |
| textArea.select(); | |
| document.execCommand("Copy"); | |
| textArea.remove(); | |
| alert("JSON промпт скопирован в буфер обмена!"); | |
| closeModal(); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |