Spaces:

Aleksmorshen
/

Testreact

Running

App Files Files Community

Aleksmorshen commited on 18 days ago

Commit

acde818

verified ·

1 Parent(s): fea9ee3

Update index.html

Browse files

Files changed (1) hide show

index.html +303 -369

index.html CHANGED Viewed

@@ -1,444 +1,378 @@
 <!DOCTYPE html>
 <html lang="ru">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>LMArena Pro Wrapper</title>
     <style>
-        body, html {
-            margin: 0;
-            padding: 0;
-            height: 100%;
-            width: 100%;
-            overflow: hidden;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: #f0f0f0;
-        }
-        /* Контейнер для iframe */
-        .iframe-container {
-            width: 100%;
-            height: 100%;
-            position: absolute;
-            top: 0;
-            left: 0;
-            z-index: 1;
-        }
-        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: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            border-radius: 50%;
-            border: none;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
-            cursor: pointer;
-            z-index: 9999; /* Поверх iframe */
-            font-size: 28px;
             display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: transform 0.2s, box-shadow 0.2s;
-        }
-        .fab-btn:hover {
-            transform: translateY(-50%) scale(1.1);
-            box-shadow: 0 6px 20px rgba(0,0,0,0.4);
-        }
-        .fab-btn:active {
-            transform: translateY(-50%) scale(0.95);
-        }
-        /* Модальное окно */
-        .modal-overlay {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.6);
-            backdrop-filter: blur(3px);
-            z-index: 10000;
             justify-content: center;
             align-items: center;
         }
-        .modal-content {
-            background-color: #fff;
-            padding: 0;
             border-radius: 16px;
-            width: 90%;
-            max-width: 550px;
-            max-height: 90vh;
-            overflow-y: auto;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
-            display: flex;
-            flex-direction: column;
-            animation: fadeIn 0.3s ease-out;
         }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        .modal-header {
-            padding: 20px 25px;
-            background-color: #f8f9fa;
-            border-bottom: 1px solid #e9ecef;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            border-radius: 16px 16px 0 0;
-        }
-        .modal-header h2 {
-            margin: 0;
-            font-size: 1.25rem;
-            color: #333;
-        }
-        .close-btn {
-            background: none;
-            border: none;
-            font-size: 24px;
-            cursor: pointer;
-            color: #666;
-            transition: color 0.2s;
         }
-        .close-btn:hover {
-            color: #d32f2f;
         }
-        .modal-body {
-            padding: 25px;
         }
-        /* Элементы формы */
-        .form-row {
-            display: flex;
-            gap: 15px;
-            margin-bottom: 15px;
         }
         .form-group {
-            margin-bottom: 15px;
-            flex: 1;
         }
-        .form-group label {
-            display: block;
-            margin-bottom: 6px;
             font-weight: 600;
             font-size: 0.9rem;
-            color: #444;
         }
-        .form-group select, .form-group textarea, .form-group input {
-            width: 100%;
             padding: 10px 12px;
-            border: 1px solid #ddd;
             border-radius: 8px;
-            font-size: 0.95rem;
-            box-sizing: border-box;
             background-color: #fff;
-            transition: border-color 0.2s;
         }
-        .form-group select:focus, .form-group textarea:focus {
-            outline: none;
-            border-color: #667eea;
-            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
         }
-        .form-group textarea {
             resize: vertical;
             min-height: 80px;
             font-family: inherit;
         }
-        .submit-btn {
-            width: 100%;
-            padding: 14px;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             color: white;
             border: none;
-            border-radius: 8px;
             font-size: 1.1rem;
-            font-weight: 600;
             cursor: pointer;
-            transition: opacity 0.2s;
-            margin-top: 10px;
         }
-        .submit-btn:hover {
-            opacity: 0.9;
         }
-        /* Кастомный скроллбар */
-        .modal-content::-webkit-scrollbar {
-            width: 8px;
-        }
-        .modal-content::-webkit-scrollbar-track {
-            background: #f1f1f1;
         }
-        .modal-content::-webkit-scrollbar-thumb {
-            background: #ccc;
-            border-radius: 4px;
         }
     </style>
 </head>
 <body>
-    <div class="iframe-container">
-        <!--
-           Атрибуты sandbox и allow критически важны для работы авторизации и скриптов.
-           allow-popups-to-escape-sandbox позволяет открывать окна Google Auth.
-        -->
-        <iframe
-            src="https://lmarena.ai/ru?chat-modality=image&mode=direct"
-            sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-downloads allow-top-navigation-by-user-activation"
-            allow="clipboard-write; clipboard-read; camera; microphone; geolocation; display-capture; autoplay; fullscreen"
-            title="LMArena">
-        </iframe>
-    </div>
-    <!-- Кнопка вызова -->
-    <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>
-            <div class="modal-body">
-                <form id="promptForm">
-                    <div class="form-row">
-                        <div class="form-group">
-                            <label>Пол</label>
-                            <select id="gender">
-                                <option value="Male">Мужчина</option>
-                                <option value="Female">Женщина</option>
-                            </select>
-                        </div>
-                        <div class="form-group">
-                            <label>Возраст (0-70+)</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-12 years)">Ребенок (4-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>
-                    <div class="form-group">
-                        <label>Национальность</label>
-                        <select id="nationality">
-                            <option value="European">Европейская</option>
-                            <option value="Slavic">Славянская (Русская/Восточная Европа)</option>
-                            <option value="Asian">Азиатская (Китай/Япония/Корея)</option>
-                            <option value="African American">Афроамериканская</option>
-                            <option value="African">Африканская</option>
-                            <option value="Latino/Hispanic">Латиноамериканская</option>
-                            <option value="Indian">Индийская</option>
-                            <option value="Middle Eastern">Ближневосточная (Арабская/Персидская)</option>
-                            <option value="Nordic">Скандинавская</option>
-                            <option value="Native American">Коренной американец</option>
-                            <option value="Mixed Race">Смешанная</option>
-                        </select>
-                    </div>
-                    <div class="form-row">
-                        <div class="form-group">
-                            <label>Цвет волос</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="Platinum White">Платиновые</option>
-                                <option value="Dyed Pink">Розовые</option>
-                                <option value="Dyed Blue">Синие</option>
-                                <option value="Bald">Лысый</option>
-                            </select>
-                        </div>
-                        <div class="form-group">
-                            <label>Цвет глаз</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="Amber">Янтарные</option>
-                                <option value="Heterochromia">Гетерохромия (Разные)</option>
-                            </select>
-                        </div>
-                    </div>
-                    <div class="form-row">
-                        <div class="form-group">
-                            <label>Прическа</label>
-                            <select id="hairstyle">
-                                <option value="Long straight hair">Длинные прямые</option>
-                                <option value="Long wavy hair">Длинные волнистые</option>
-                                <option value="Short bob cut">Короткое каре</option>
-                                <option value="Pixie cut">Пикси (Очень короткие)</option>
-                                <option value="Messy bun">Небрежный пучок</option>
-                                <option value="Ponytail">Хвост</option>
-                                <option value="Crew cut">Ежик (Муж)</option>
-                                <option value="Undercut">Андеркат (Муж)</option>
-                                <option value="Slicked back">Зачесанные назад</option>
-                                <option value="Curly afro">Афро кудри</option>
-                                <option value="Dreadlocks">Дреды</option>
-                            </select>
-                        </div>
-                        <div class="form-group">
-                            <label>Фигура</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>
-                    <div class="form-group">
-                        <label>Стиль фотографии</label>
-                        <select id="style">
-                            <option value="Professional Studio Portrait">Студийный портрет (Проф)</option>
-                            <option value="Candid Street Photography">Уличное фото (Естественное)</option>
-                            <option value="Cinematic Lighting">Кинематографичный свет</option>
-                            <option value="Creative Artistic High Fashion">Творческий Арт / Фэшн</option>
-                            <option value="Cyberpunk Neon">Киберпанк / Неон</option>
-                            <option value="Vintage Film Grain 90s">Винтаж / Пленка 90-х</option>
-                            <option value="Black and White Noir">Чёрно-белый Нуар</option>
-                            <option value="Business Corporate Headshot">Деловой портрет</option>
-                            <option value="Fantasy Ethereal">Фэнтези / Сказочный</option>
-                            <option value="Polaroid Snapshot">Полароид</option>
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <label>Дополнительные пожелания</label>
-                        <textarea id="additional" placeholder="Одежда, место действия, эмоции (напр: в красном платье, улыбается, на фоне гор)"></textarea>
-                    </div>
-                    <button type="button" class="submit-btn" onclick="generateAndCopy()">СКОПИРОВАТЬ JSON</button>
-                </form>
             </div>
-        </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;
-            const additional = document.getElementById('additional').value;
-            // Формируем чистый промпт на основе JSON
-            const promptData = {
-                "character": {
-                    "gender": gender,
-                    "age_group": age,
-                    "ethnicity": nationality,
-                    "features": {
-                        "hair": `${hairColor}, ${hairstyle}`,
-                        "eyes": eyeColor,
-                        "body": bodyType
-                    }
-                },
-                "style": style,
-                "details": additional ? additional : "No specific details provided",
-                "quality": "8k, photorealistic, masterpiece, high details"
             };
-            const jsonString = JSON.stringify(promptData, null, 2);
             try {
                 if (navigator.clipboard && navigator.clipboard.writeText) {
                     await navigator.clipboard.writeText(jsonString);
                 } else {
-                    // Fallback для некоторых версий WebView
-                    const textarea = document.createElement("textarea");
-                    textarea.value = jsonString;
-                    textarea.style.position = "fixed";
-                    document.body.appendChild(textarea);
-                    textarea.focus();
-                    textarea.select();
-                    document.execCommand("copy");
-                    document.body.removeChild(textarea);
                 }
-                // Визуальное подтверждение на кнопке
-                const btn = document.querySelector('.submit-btn');
-                const originalText = btn.innerText;
-                btn.innerText = "СКОПИРОВАНО! ✅";
-                btn.style.background = "#4CAF50";
-                setTimeout(() => {
-                    closeModal();
-                    btn.innerText = originalText;
-                    btn.style.background = "";
-                }, 1000);
             } catch (err) {
-                console.error('Ошибка:', err);
-                alert("Не удалось скопировать. Проверьте разрешения браузера.");
             }
         }
     </script>

+Отличная идея. Это гораздо более надежный и удобный подход, так как он обходит все проблемы с безопасностью браузеров (iframe блокировки) и делает процесс создания промпта основным действием.
+Логика теперь такая:
+Вы открываете файл.
+Видите красивую форму на весь экран.
+Заполняете параметры.
+Нажимаете кнопку — код копируется в буфер, и сайт lmarena.ai сразу открывается в новой вкладке, где вам останется только нажать Ctrl+V.
+Вот полный код одним файлом:
+code
+Html
+play_circle
+download
+content_copy
+expand_less
 <!DOCTYPE html>
 <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>