Spaces:

Aleksmorshen
/

Testreact

Running

File size: 16,649 Bytes

<!DOCTYPE html>
<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()">&times;</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>