| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>FormaAI TRELLIS 3D Generator</title> |
| |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| |
| <link rel="stylesheet" href="/static/css/style.css"> |
| |
| <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script> |
| </head> |
| <body> |
| |
| <div class="glow-sphere sphere-1"></div> |
| <div class="glow-sphere sphere-2"></div> |
| <div class="glow-sphere sphere-3"></div> |
|
|
| <div class="app-container"> |
| |
| <header class="app-header"> |
| <div class="logo"> |
| <i class="fa-solid fa-cube logo-icon animate-float"></i> |
| <div class="logo-text"> |
| <h1>Forma<span>AI</span></h1> |
| <p>TRELLIS 3D Generation Suite</p> |
| </div> |
| </div> |
| <div class="header-status"> |
| <span class="status-badge"><i class="fa-solid fa-circle status-dot online"></i> GPU Активен</span> |
| </div> |
| </header> |
|
|
| |
| <main class="app-workspace"> |
| |
| <section class="workspace-panel panel-left glass"> |
| <div class="panel-header"> |
| <h2><i class="fa-solid fa-cloud-arrow-up"></i> Загрузка изображения</h2> |
| </div> |
| |
| |
| <div class="upload-zone" id="uploadZone"> |
| <input type="file" id="fileInput" accept="image/*" style="display: none;"> |
| <div class="upload-content" id="uploadContent"> |
| <i class="fa-solid fa-images upload-icon"></i> |
| <p class="upload-title">Перетащите изображение сюда</p> |
| <p class="upload-subtitle">или нажмите для выбора файла</p> |
| <span class="upload-limit">Поддержка PNG, JPG (будет автоматически удален фон)</span> |
| </div> |
| |
| <div class="preview-container" id="previewContainer" style="display: none;"> |
| <img id="imagePreview" src="" alt="Preview"> |
| <div class="preview-overlay"> |
| <button type="button" class="btn btn-secondary btn-sm" id="btnResetImage"> |
| <i class="fa-solid fa-rotate-left"></i> Сбросить |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="parameters-section"> |
| <div class="section-title"> |
| <h3><i class="fa-solid fa-sliders"></i> Параметры генерации</h3> |
| </div> |
| |
| <form id="generationForm"> |
| <input type="hidden" id="sessionId" name="id"> |
| |
| <div class="form-group"> |
| <label for="seed">Seed (Случайное зерно)</label> |
| <div class="input-with-checkbox"> |
| <input type="number" id="seed" name="seed" value="0" class="form-control" disabled> |
| <label class="checkbox-container"> |
| <input type="checkbox" id="randomizeSeed" name="randomize_seed" checked> |
| <span class="checkmark"></span> Случайно |
| </label> |
| </div> |
| </div> |
|
|
| <div class="accordion-item open"> |
| <div class="accordion-title"> |
| <span>Этап 1: Разреженное облако</span> |
| <i class="fa-solid fa-chevron-down"></i> |
| </div> |
| <div class="accordion-content"> |
| <div class="form-group"> |
| <div class="slider-header"> |
| <label>Сила подсказки (CFG)</label> |
| <span class="slider-val" id="ssGuidanceVal">7.5</span> |
| </div> |
| <input type="range" name="ss_guidance_strength" min="1.0" max="15.0" step="0.5" value="7.5" class="slider" oninput="document.getElementById('ssGuidanceVal').innerText=this.value"> |
| </div> |
| <div class="form-group"> |
| <div class="slider-header"> |
| <label>Шаги сэмплирования</label> |
| <span class="slider-val" id="ssStepsVal">12</span> |
| </div> |
| <input type="range" name="ss_sampling_steps" min="1" max="50" step="1" value="12" class="slider" oninput="document.getElementById('ssStepsVal').innerText=this.value"> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="accordion-item open"> |
| <div class="accordion-title"> |
| <span>Этап 2: Структурированный латент</span> |
| <i class="fa-solid fa-chevron-down"></i> |
| </div> |
| <div class="accordion-content"> |
| <div class="form-group"> |
| <div class="slider-header"> |
| <label>Сила подсказки (CFG)</label> |
| <span class="slider-val" id="slatGuidanceVal">3.0</span> |
| </div> |
| <input type="range" name="slat_guidance_strength" min="1.0" max="15.0" step="0.5" value="3.0" class="slider" oninput="document.getElementById('slatGuidanceVal').innerText=this.value"> |
| </div> |
| <div class="form-group"> |
| <div class="slider-header"> |
| <label>Шаги сэмплирования</label> |
| <span class="slider-val" id="slatStepsVal">12</span> |
| </div> |
| <input type="range" name="slat_sampling_steps" min="1" max="50" step="1" value="12" class="slider" oninput="document.getElementById('slatStepsVal').innerText=this.value"> |
| </div> |
| </div> |
| </div> |
|
|
| <button type="submit" class="btn btn-primary btn-block btn-lg" id="btnGenerate" disabled> |
| <span class="btn-text"><i class="fa-solid fa-wand-magic-sparkles"></i> Сгенерировать 3D</span> |
| <span class="spinner" style="display: none;"><i class="fa-solid fa-circle-notch fa-spin"></i> Генерация...</span> |
| </button> |
| </form> |
| </div> |
| </section> |
|
|
| |
| <section class="workspace-panel panel-right glass"> |
| <div class="panel-header tabs-header"> |
| <button class="panel-tab active" id="tabPreview"> |
| <i class="fa-solid fa-play"></i> Видео Превью |
| </button> |
| <button class="panel-tab" id="tab3dViewer" disabled> |
| <i class="fa-solid fa-cube"></i> Интерактивный 3D |
| </button> |
| </div> |
|
|
| |
| <div class="tab-content" id="contentPreview"> |
| <div class="video-placeholder" id="videoPlaceholder"> |
| <div class="placeholder-icon-wrap"> |
| <i class="fa-solid fa-film placeholder-icon animate-pulse"></i> |
| </div> |
| <h3>Ожидание генерации</h3> |
| <p>Загрузите изображение и нажмите кнопку генерации для создания 3D модели</p> |
| </div> |
| <div class="video-container" id="videoContainer" style="display: none;"> |
| <video id="previewVideo" autoplay loop muted playsinline controls></video> |
| </div> |
| </div> |
|
|
| |
| <div class="tab-content" id="content3dViewer" style="display: none;"> |
| <div class="viewer-container"> |
| <model-viewer id="glbViewer" |
| alt="3D сгенерированная модель" |
| auto-rotate |
| camera-controls |
| shadow-intensity="1.5" |
| shadow-softness="0.8" |
| exposure="1.0" |
| environment-image="legacy" |
| interaction-prompt="auto"> |
| <div class="viewer-loading" slot="poster"> |
| <i class="fa-solid fa-circle-notch fa-spin"></i> Загрузка 3D модели... |
| </div> |
| </model-viewer> |
| </div> |
| </div> |
|
|
| |
| <div class="export-controls glass-dark" id="exportControls" style="display: none;"> |
| <div class="export-header"> |
| <h4><i class="fa-solid fa-file-export"></i> Экспорт и Скачивание</h4> |
| </div> |
| <div class="export-options" id="exportOptions"> |
| <div class="glb-baking-config"> |
| <div class="config-row"> |
| <div class="form-group-inline"> |
| <label for="meshSimplify">Упрощение сетки</label> |
| <select id="meshSimplify" class="form-control-inline"> |
| <option value="0.90">90% (Детализированная)</option> |
| <option value="0.95" selected>95% (Оптимальная)</option> |
| <option value="0.98">98% (Легкая)</option> |
| </select> |
| </div> |
| <div class="form-group-inline"> |
| <label for="textureSize">Размер текстуры</label> |
| <select id="textureSize" class="form-control-inline"> |
| <option value="512">512 px</option> |
| <option value="1024" selected>1024 px (HD)</option> |
| <option value="2048">2048 px (UHD)</option> |
| </select> |
| </div> |
| </div> |
| <button class="btn btn-secondary btn-block" id="btnExtractGlb"> |
| <span class="btn-text"><i class="fa-solid fa-arrows-to-eye"></i> Извлечь GLB сетку</span> |
| <span class="spinner" style="display: none;"><i class="fa-solid fa-circle-notch fa-spin"></i> Запекание текстур...</span> |
| </button> |
| </div> |
|
|
| <div class="download-buttons"> |
| <a id="linkDownloadGlb" href="#" download class="btn btn-success btn-download disabled" target="_blank"> |
| <i class="fa-solid fa-cube"></i> Скачать GLB |
| </a> |
| <a id="linkDownloadPly" href="#" download class="btn btn-info btn-download" target="_blank"> |
| <i class="fa-solid fa-cloud"></i> Скачать PLY (Гауссианы) |
| </a> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <section class="history-section glass"> |
| <div class="section-header"> |
| <h2><i class="fa-solid fa-clock-rotate-left"></i> История генераций</h2> |
| <button class="btn btn-secondary btn-sm" id="btnRefreshHistory"> |
| <i class="fa-solid fa-arrows-rotate"></i> Обновить |
| </button> |
| </div> |
| |
| <div class="history-gallery" id="historyGallery"> |
| |
| <div class="gallery-empty" id="galleryEmpty"> |
| <i class="fa-regular fa-folder-open"></i> |
| <p>История пуста. Создайте свою первую 3D-модель!</p> |
| </div> |
| </div> |
| </section> |
| </div> |
|
|
| |
| <div class="toast-container" id="toastContainer"></div> |
|
|
| |
| <script src="/static/js/main.js"></script> |
| </body> |
| </html> |
|
|
