Testais

Sleeping

App Files Files Community

Kgshop commited on Aug 18, 2025

Commit

7a5cc8e

verified ·

1 Parent(s): 2a907a5

Update app.py

Browse files

Files changed (1) hide show

app.py +247 -498

app.py CHANGED Viewed

@@ -1,4 +1,3 @@
 import os
 import json
 import time
@@ -25,7 +24,6 @@ DOWNLOAD_DELAY = 5
 def upload_project_to_hf(local_path, project_name):
     if not HF_TOKEN_WRITE:
-        print("HF_TOKEN_WRITE is not set. Cannot upload.")
         return False
     try:
         api = HfApi()
@@ -39,13 +37,11 @@ def upload_project_to_hf(local_path, project_name):
         )
         return True
     except Exception as e:
-        print(f"Error uploading {project_name} to HF: {e}")
         return False
 def download_project_from_hf(project_name, retries=DOWNLOAD_RETRIES, delay=DOWNLOAD_DELAY):
     token_to_use = HF_TOKEN_READ if HF_TOKEN_READ else HF_TOKEN_WRITE
     if not token_to_use:
-        print("No Hugging Face token found for reading.")
         return None
     for attempt in range(retries + 1):
@@ -65,10 +61,8 @@ def download_project_from_hf(project_name, retries=DOWNLOAD_RETRIES, delay=DOWNL
                  os.remove(local_path)
             return data
         except (HfHubHTTPError, RepositoryNotFoundError) as e:
-            print(f"Project '{project_name}' not found on HF Hub on attempt {attempt + 1}: {e}")
             return None
         except Exception as e:
-            print(f"An unexpected error occurred during download attempt {attempt + 1}: {e}")
             if attempt < retries:
                 time.sleep(delay)
     return None
@@ -84,10 +78,8 @@ def list_projects_from_hf():
         project_files = [f.split('/')[-1].replace('.json', '') for f in repo_info if f.startswith('projects/') and f.endswith('.json')]
         return sorted(project_files)
     except RepositoryNotFoundError:
-        print("Repository not found, creating 'projects' directory might be needed on first save.")
         return []
     except Exception as e:
-        print(f"Error listing projects from HF: {e}")
         return []
 EDITOR_TEMPLATE = '''
@@ -95,80 +87,48 @@ EDITOR_TEMPLATE = '''
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>3D Level Designer</title>
     <style>
-        * {
-            box-sizing: border-box;
-            touch-action: manipulation;
-        }
-        body {
-            margin: 0;
-            overflow: hidden;
-            background-color: #111;
-            color: white;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        }
-        canvas {
-            display: block;
-            touch-action: none;
-        }
         #ui-panel {
             position: absolute;
             top: 10px;
             left: 10px;
-            background: rgba(0, 0, 0, 0.85);
             padding: 15px;
             border-radius: 8px;
             border: 1px solid #444;
             max-width: 300px;
-            z-index: 10;
-            backdrop-filter: blur(5px);
-            max-height: calc(100vh - 40px);
-            overflow-y: auto;
-        }
-        .ui-group {
-            margin-bottom: 15px;
-            padding-bottom: 15px;
-            border-bottom: 1px solid #333;
         }
-        .ui-group:last-child {
-            border-bottom: none;
-            margin-bottom: 0;
-            padding-bottom: 0;
-        }
-        h3 {
-            margin-top: 0;
-            font-size: 1.1em;
-            color: #00aaff;
-        }
-        label {
-            display: block;
-            margin-bottom: 5px;
-            font-size: 0.9em;
         }
-        input[type="number"], input[type="text"], select, input[type="range"] {
             width: 100%;
-            padding: 10px;
             box-sizing: border-box;
             background: #222;
             border: 1px solid #555;
             color: white;
             border-radius: 4px;
-            font-size: 16px;
         }
         button {
             width: 100%;
-            padding: 12px;
             background: #0077cc;
             border: none;
             color: white;
@@ -176,23 +136,11 @@ EDITOR_TEMPLATE = '''
             cursor: pointer;
             font-weight: bold;
             margin-top: 10px;
-            font-size: 16px;
-        }
-        button:hover {
-            background: #0099ff;
-        }
-        .slider-container {
-            margin-top: 10px;
         }
-        #brush-mode-container label {
-            display: inline-block;
-            margin-right: 15px;
-            cursor: pointer;
-        }
         #loading-spinner {
             position: absolute;
             top: 50%;
@@ -207,95 +155,19 @@ EDITOR_TEMPLATE = '''
             display: none;
             z-index: 100;
         }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        .material-selector {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 5px;
-        }
-        .material-option {
-            width: 40px;
-            height: 40px;
-            border: 2px solid #555;
-            border-radius: 4px;
-            cursor: pointer;
-        }
-        .material-option.selected {
-            border-color: #00aaff;
-            box-shadow: 0 0 5px #00aaff;
-        }
-        .grass-toggle {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        .grass-toggle input {
-            width: auto;
-        }
-        .mobile-controls {
-            position: absolute;
-            bottom: 20px;
-            left: 50%;
-            transform: translateX(-50%);
-            display: none;
-            gap: 15px;
-            z-index: 10;
-        }
-        .mobile-btn {
-            width: 60px;
-            height: 60px;
-            border-radius: 50%;
-            background: rgba(0, 119, 204, 0.7);
-            border: 2px solid white;
-            color: white;
-            font-size: 24px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            user-select: none;
-        }
-        @media (max-width: 768px) {
-            #ui-panel {
-                max-width: calc(100vw - 20px);
-                left: 10px;
-                right: 10px;
-                top: 10px;
-                max-height: 40vh;
-            }
-            .mobile-controls {
-                display: flex;
-            }
-        }
-        @media (max-width: 480px) {
-            #ui-panel {
-                padding: 10px;
-            }
-            .mobile-btn {
-                width: 50px;
-                height: 50px;
-                font-size: 20px;
-            }
-        }
     </style>
 </head>
 <body>
     <div id="ui-panel">
         <div class="ui-group">
             <h3>Ландшафт</h3>
             <label for="terrain-width">Ширина:</label>
@@ -320,12 +192,19 @@ EDITOR_TEMPLATE = '''
             <button id="save-project">Сохранить проект</button>
         </div>
-        <div class="ui-group">
             <h3>Кисть</h3>
             <div id="brush-mode-container">
                 <label><input type="radio" name="brush-mode" value="raise" checked> Поднять</label>
                 <label><input type="radio" name="brush-mode" value="lower"> Опустить</label>
-                <label><input type="radio" name="brush-mode" value="smooth"> Сгладить</label>
             </div>
             <div class="slider-container">
                 <label for="brush-size">Размер кисти: <span id="brush-size-value">10</span></label>
@@ -338,41 +217,10 @@ EDITOR_TEMPLATE = '''
         </div>
         <div class="ui-group">
-            <h3>Материалы</h3>
-            <div class="material-selector">
-                <div class="material-option selected" style="background-color: #55aa33;" data-material="grass"></div>
-                <div class="material-option" style="background-color: #8B4513;" data-material="dirt"></div>
-                <div class="material-option" style="background-color: #808080;" data-material="rock"></div>
-                <div class="material-option" style="background-color: #228B22;" data-material="forest"></div>
-                <div class="material-option" style="background-color: #A52A2A;" data-material="sand"></div>
-            </div>
-            <div class="slider-container">
-                <label for="material-brush-size">Размер кисти материалов: <span id="material-brush-size-value">20</span></label>
-                <input type="range" id="material-brush-size" min="5" max="100" value="20">
-            </div>
         </div>
-        <div class="ui-group">
-            <h3>Детализация</h3>
-            <div class="grass-toggle">
-                <label for="toggle-grass">Трава:</label>
-                <input type="checkbox" id="toggle-grass">
-            </div>
-            <div class="slider-container">
-                <label for="grass-density">Плотность травы: <span id="grass-density-value">0.3</span></label>
-                <input type="range" id="grass-density" min="0.1" max="1" step="0.1" value="0.3">
-            </div>
-            <div class="slider-container">
-                <label for="tree-density">Плотность деревьев: <span id="tree-density-value">0.1</span></label>
-                <input type="range" id="tree-density" min="0" max="0.5" step="0.05" value="0.1">
-            </div>
-        </div>
-    </div>
-    <div class="mobile-controls">
-        <div class="mobile-btn" id="mobile-raise">+</div>
-        <div class="mobile-btn" id="mobile-lower">-</div>
-        <div class="mobile-btn" id="mobile-smooth">~</div>
     </div>
     <div id="loading-spinner"></div>
@@ -380,8 +228,8 @@ EDITOR_TEMPLATE = '''
     <script type="importmap">
     {
         "imports": {
-            "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
-            "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
         }
     }
     </script>
@@ -389,26 +237,14 @@ EDITOR_TEMPLATE = '''
     <script type="module">
         import * as THREE from 'three';
         import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-        import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';
-        let scene, camera, renderer, controls, terrainMesh, brushHelper, grassInstances, treeInstances;
         let raycaster = new THREE.Raycaster();
         let mouse = new THREE.Vector2();
-        let isSculpting = false;
-        let currentBrushMode = 'raise';
-        let currentMaterial = 'grass';
-        let grassEnabled = true;
-        let noise = new ImprovedNoise();
         const terrainDimensions = { width: 100, height: 100, segmentsX: 100, segmentsY: 100 };
-        const materialData = []; // Хранит тип материала для каждой вершины
-        const materials = {
-            grass: { color: 0x55aa33, roughness: 0.8, metalness: 0.2 },
-            dirt: { color: 0x8B4513, roughness: 0.9, metalness: 0.1 },
-            rock: { color: 0x808080, roughness: 0.7, metalness: 0.3 },
-            forest: { color: 0x228B22, roughness: 0.85, metalness: 0.15 },
-            sand: { color: 0xA52A2A, roughness: 0.95, metalness: 0.05 }
-        };
         function init() {
             scene = new THREE.Scene();
@@ -461,11 +297,19 @@ EDITOR_TEMPLATE = '''
             renderer.domElement.addEventListener('pointerout', () => { brushHelper.visible = false; });
             setupUIListeners();
-            setupMobileControls();
             animate();
         }
         function setupUIListeners() {
             document.getElementById('create-terrain').addEventListener('click', () => {
                 const width = parseInt(document.getElementById('terrain-width').value);
                 const height = parseInt(document.getElementById('terrain-height').value);
@@ -474,70 +318,25 @@ EDITOR_TEMPLATE = '''
             document.getElementById('save-project').addEventListener('click', saveProject);
             document.getElementById('load-project').addEventListener('click', loadProject);
             document.getElementById('brush-size').addEventListener('input', (e) => {
                 document.getElementById('brush-size-value').textContent = e.target.value;
                 updateBrushHelper();
             });
             document.getElementById('brush-strength').addEventListener('input', (e) => {
                 document.getElementById('brush-strength-value').textContent = e.target.value;
             });
-            document.getElementById('material-brush-size').addEventListener('input', (e) => {
-                document.getElementById('material-brush-size-value').textContent = e.target.value;
-            });
-            document.getElementById('grass-density').addEventListener('input', (e) => {
-                document.getElementById('grass-density-value').textContent = e.target.value;
-                updateGrass();
-            });
-            document.getElementById('tree-density').addEventListener('input', (e) => {
-                document.getElementById('tree-density-value').textContent = e.target.value;
-                updateTrees();
-            });
-            document.getElementById('toggle-grass').addEventListener('change', (e) => {
-                grassEnabled = e.target.checked;
-                if (grassInstances) {
-                    grassInstances.visible = grassEnabled;
-                }
-            });
             document.getElementById('project-list').addEventListener('change', (e) => {
                 document.getElementById('project-name').value = e.target.value;
             });
-            document.querySelectorAll('input[name="brush-mode"]').forEach(radio => {
-                radio.addEventListener('change', (e) => {
-                    currentBrushMode = e.target.value;
-                });
             });
-            document.querySelectorAll('.material-option').forEach(option => {
-                option.addEventListener('click', (e) => {
-                    document.querySelectorAll('.material-option').forEach(o => o.classList.remove('selected'));
-                    e.target.classList.add('selected');
-                    currentMaterial = e.target.dataset.material;
-                });
-            });
-        }
-        function setupMobileControls() {
-            document.getElementById('mobile-raise').addEventListener('click', () => {
-                document.querySelector('input[value="raise"]').checked = true;
-                currentBrushMode = 'raise';
-            });
-            document.getElementById('mobile-lower').addEventListener('click', () => {
-                document.querySelector('input[value="lower"]').checked = true;
-                currentBrushMode = 'lower';
-            });
-            document.getElementById('mobile-smooth').addEventListener('click', () => {
-                document.querySelector('input[value="smooth"]').checked = true;
-                currentBrushMode = 'smooth';
             });
         }
@@ -545,7 +344,7 @@ EDITOR_TEMPLATE = '''
             document.getElementById('loading-spinner').style.display = show ? 'block' : 'none';
         }
-        function createTerrain(width, height, data = null, materialDataArray = null) {
             if (terrainMesh) {
                 scene.remove(terrainMesh);
                 terrainMesh.geometry.dispose();
@@ -570,47 +369,52 @@ EDITOR_TEMPLATE = '''
                 for (let i = 0; i < positions.count; i++) {
                     positions.setY(i, data[i]);
                 }
-            } else {
-                // Генерация случайного ландшафта
-                const positions = geometry.attributes.position;
-                for (let i = 0; i < positions.count; i++) {
-                    const x = positions.getX(i);
-                    const z = positions.getZ(i);
-                    const y = noise.noise(x * 0.02, z * 0.02, 0) * 10 +
-                              noise.noise(x * 0.05, z * 0.05, 0) * 5 +
-                              noise.noise(x * 0.1, z * 0.1, 0) * 2;
-                    positions.setY(i, y);
-                }
-            }
-            // Инициализация данных материалов
-            if (materialDataArray) {
-                materialData.length = 0;
-                materialData.push(...materialDataArray);
-            } else {
-                materialData.length = 0;
-                for (let i = 0; i < geometry.attributes.position.count; i++) {
-                    materialData.push('grass');
-                }
             }
             const material = new THREE.MeshStandardMaterial({
-                color: 0x55aa33,
-                flatShading: false,
                 roughness: 0.8,
                 metalness: 0.2
             });
             terrainMesh = new THREE.Mesh(geometry, material);
             terrainMesh.castShadow = true;
             terrainMesh.receiveShadow = true;
             scene.add(terrainMesh);
             geometry.computeVertexNormals();
-            // Создание травы и деревьев
-            createGrass();
-            createTrees();
         }
         function onWindowResize() {
@@ -635,12 +439,8 @@ EDITOR_TEMPLATE = '''
                 brushHelper.visible = true;
                 updateBrushHelper();
-                if (isSculpting) {
-                    if (event.shiftKey) {
-                        paintMaterial(intersectionPoint);
-                    } else {
-                        sculptTerrain(intersectionPoint);
-                    }
                 }
             } else {
                 brushHelper.visible = false;
@@ -653,218 +453,161 @@ EDITOR_TEMPLATE = '''
         }
         function onPointerDown(event) {
-            if (event.button === 0) {
-                isSculpting = true;
             }
         }
         function onPointerUp(event) {
             if (event.button === 0) {
-                isSculpting = false;
             }
         }
-        function sculptTerrain(center) {
             if (!terrainMesh) return;
-            const positions = terrainMesh.geometry.attributes.position;
-            const brushSize = parseFloat(document.getElementById('brush-size').value);
-            const brushStrength = parseFloat(document.getElementById('brush-strength').value);
-            const direction = (currentBrushMode === 'raise') ? 1 : (currentBrushMode === 'lower') ? -1 : 0;
-            const vertex = new THREE.Vector3();
-            for (let i = 0; i < positions.count; i++) {
-                vertex.fromBufferAttribute(positions, i);
-                const distance = vertex.distanceTo(center);
-                if (distance < brushSize) {
-                    const falloff = (1 - (distance / brushSize));
-                    const smoothedFalloff = falloff * falloff * (3 - 2 * falloff);
-                    let currentY = positions.getY(i);
-                    if (currentBrushMode === 'smooth') {
-                        // Простое сглаживание с соседями
-                        let sum = currentY;
-                        let count = 1;
-                        const x = i % (terrainDimensions.segmentsX + 1);
-                        const y = Math.floor(i / (terrainDimensions.segmentsX + 1));
-                        // Проверяем соседей
-                        for (let dx = -1; dx <= 1; dx++) {
-                            for (let dy = -1; dy <= 1; dy++) {
-                                const nx = x + dx;
-                                const ny = y + dy;
-                                if (nx >= 0 && nx <= terrainDimensions.segmentsX &&
-                                    ny >= 0 && ny <= terrainDimensions.segmentsY) {
-                                    const ni = ny * (terrainDimensions.segmentsX + 1) + nx;
-                                    if (ni !== i) {
-                                        sum += positions.getY(ni);
-                                        count++;
-                                    }
-                                }
-                            }
-                        }
-                        const avg = sum / count;
-                        let newY = currentY + (avg - currentY) * smoothedFalloff * brushStrength;
-                        positions.setY(i, newY);
-                    } else {
                         let newY = currentY + direction * smoothedFalloff * brushStrength;
                         positions.setY(i, newY);
                     }
                 }
-            }
-            positions.needsUpdate = true;
-            terrainMesh.geometry.computeVertexNormals();
-            updateGrass();
-            updateTrees();
-        }
-        function paintMaterial(center) {
-            if (!terrainMesh) return;
-            const positions = terrainMesh.geometry.attributes.position;
-            const materialBrushSize = parseFloat(document.getElementById('material-brush-size').value);
-            const vertex = new THREE.Vector3();
-            for (let i = 0; i < positions.count; i++) {
-                vertex.fromBufferAttribute(positions, i);
-                const distance = vertex.distanceTo(center);
-                if (distance < materialBrushSize) {
-                    materialData[i] = currentMaterial;
                 }
             }
-            // Обновление цвета ландшафта
-            updateTerrainMaterial();
-        }
-        function updateTerrainMaterial() {
-            if (!terrainMesh) return;
-            const geometry = terrainMesh.geometry;
-            const positions = geometry.attributes.position;
-            const colors = [];
-            for (let i = 0; i < positions.count; i++) {
-                const materialType = materialData[i];
-                const materialProps = materials[materialType];
-                const color = new THREE.Color(materialProps.color);
-                colors.push(color.r, color.g, color.b);
-            }
-            geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
-            terrainMesh.material.vertexColors = true;
-            terrainMesh.material.needsUpdate = true;
         }
-        function createGrass() {
-            if (grassInstances) {
-                scene.remove(grassInstances);
-                grassInstances.geometry.dispose();
-                grassInstances.material.dispose();
-            }
-            const grassGeometry = new THREE.ConeGeometry(0.3, 1, 4);
-            const grassMaterial = new THREE.MeshBasicMaterial({ color: 0x33aa33 });
-            const count = Math.floor(terrainDimensions.width * terrainDimensions.height *
-                                   parseFloat(document.getElementById('grass-density').value));
-            grassInstances = new THREE.InstancedMesh(grassGeometry, grassMaterial, count);
-            grassInstances.castShadow = true;
-            grassInstances.receiveShadow = true;
-            grassInstances.visible = grassEnabled;
-            const dummy = new THREE.Object3D();
             const positions = terrainMesh.geometry.attributes.position;
-            for (let i = 0; i < count; i++) {
-                const index = Math.floor(Math.random() * positions.count);
-                const x = positions.getX(index);
-                const y = positions.getY(index);
-                const z = positions.getZ(index);
-                dummy.position.set(x, y + 0.5, z);
-                dummy.rotation.y = Math.random() * Math.PI * 2;
-                dummy.scale.set(1, 0.5 + Math.random(), 1);
-                dummy.updateMatrix();
-                grassInstances.setMatrixAt(i, dummy.matrix);
-            }
-            scene.add(grassInstances);
-        }
-        function updateGrass() {
-            if (grassInstances) {
-                scene.remove(grassInstances);
-                grassInstances.geometry.dispose();
-                grassInstances.material.dispose();
-            }
-            if (terrainMesh) {
-                createGrass();
             }
         }
-        function createTrees() {
-            if (treeInstances) {
-                scene.remove(treeInstances);
-                treeInstances.geometry.dispose();
-                treeInstances.material.dispose();
-            }
-            // Создание простой геометрии дерева
-            const treeGroup = new THREE.Group();
-            // Ствол
-            const trunkGeometry = new THREE.CylinderGeometry(0.2, 0.3, 2, 8);
-            const trunkMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513 });
-            const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial);
-            trunk.position.y = 1;
-            trunk.castShadow = true;
-            trunk.receiveShadow = true;
-            treeGroup.add(trunk);
-            // Крона
-            const crownGeometry = new THREE.ConeGeometry(1.5, 3, 8);
-            const crownMaterial = new THREE.MeshStandardMaterial({ color: 0x228B22 });
-            const crown = new THREE.Mesh(crownGeometry, crownMaterial);
-            crown.position.y = 3.5;
-            crown.castShadow = true;
-            crown.receiveShadow = true;
-            treeGroup.add(crown);
-            const density = parseFloat(document.getElementById('tree-density').value);
-            const count = Math.floor(terrainDimensions.width * terrainDimensions.height * density);
-            treeInstances = new THREE.InstancedMesh(treeGroup, new THREE.MeshBasicMaterial(), count);
-            treeInstances.castShadow = true;
-            treeInstances.receiveShadow = true;
-            const dummy = new THREE.Object3D();
-            const positions = terrainMesh.geometry.attributes.position;
-            for (let i = 0; i < count; i++) {
-                const index = Math.floor(Math.random() * positions.count);
-                const x = positions.getX(index);
-                const y = positions.getY(index);
-                const z = positions.getZ(index);
-                dummy.position.set(x, y, z);
-                dummy.rotation.y = Math.random() * Math.PI * 2;
-                dummy.scale.set(0.5 + Math.random() * 0.5, 0.8 + Math.random() * 0.4, 0.5 + Math.random() * 0.5);
-                dummy.updateMatrix();
-                treeInstances.setMatrixAt(i, dummy.matrix);
             }
-            scene.add(treeInstances);
         }
-        function updateTrees() {
-            if (treeInstances) {
-                scene.remove(treeInstances);
-                treeInstances.geometry.dispose();
-                treeInstances.material.dispose();
-            }
-            if (terrainMesh) {
-                createTrees();
             }
         }
@@ -891,7 +634,9 @@ EDITOR_TEMPLATE = '''
                 width: terrainDimensions.width,
                 height: terrainDimensions.height,
                 data: heightData,
-                materialData: materialData
             };
             try {
@@ -916,7 +661,6 @@ EDITOR_TEMPLATE = '''
                 }
             } catch (error) {
-                console.error("Ошибка сохранения:", error);
                 alert(`Не удалось сохранить проект: ${error.message}`);
             } finally {
                 showSpinner(false);
@@ -939,12 +683,17 @@ EDITOR_TEMPLATE = '''
                     throw new Error(result.error || 'Ошибка при загрузке проекта.');
                 }
-                createTerrain(result.width, result.height, result.data, result.materialData);
                 document.getElementById('project-name').value = projectName;
                 document.getElementById('terrain-width').value = result.width;
                 document.getElementById('terrain-height').value = result.height;
             } catch (error) {
-                 console.error("Ошибка загрузки:", error);
                 alert(`Не удалось загрузить проект: ${error.message}`);
             } finally {
                 showSpinner(false);
@@ -1000,4 +749,4 @@ def load_project_api(project_name):
 if __name__ == '__main__':
     port = int(os.environ.get('PORT', 7860))
-    app.run(debug=False, host='0.0.0.0', port=port)

 import os
 import json
 import time
 def upload_project_to_hf(local_path, project_name):
     if not HF_TOKEN_WRITE:
         return False
     try:
         api = HfApi()
         )
         return True
     except Exception as e:
         return False
 def download_project_from_hf(project_name, retries=DOWNLOAD_RETRIES, delay=DOWNLOAD_DELAY):
     token_to_use = HF_TOKEN_READ if HF_TOKEN_READ else HF_TOKEN_WRITE
     if not token_to_use:
         return None
     for attempt in range(retries + 1):
                  os.remove(local_path)
             return data
         except (HfHubHTTPError, RepositoryNotFoundError) as e:
             return None
         except Exception as e:
             if attempt < retries:
                 time.sleep(delay)
     return None
         project_files = [f.split('/')[-1].replace('.json', '') for f in repo_info if f.startswith('projects/') and f.endswith('.json')]
         return sorted(project_files)
     except RepositoryNotFoundError:
         return []
     except Exception as e:
         return []
 EDITOR_TEMPLATE = '''
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>3D Level Designer</title>
     <style>
+        body { margin: 0; overflow: hidden; background-color: #111; color: white; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
+        canvas { display: block; }
         #ui-panel {
             position: absolute;
             top: 10px;
             left: 10px;
+            background: rgba(0, 0, 0, 0.7);
             padding: 15px;
             border-radius: 8px;
             border: 1px solid #444;
             max-width: 300px;
         }
+        @media (max-width: 768px) {
+            #ui-panel {
+                max-width: none;
+                width: calc(100% - 20px);
+                left: 10px;
+                top: auto;
+                bottom: 10px;
+                overflow-y: auto;
+                max-height: 40vh;
+            }
         }
+        .ui-group { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #333; }
+        .ui-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
+        h3 { margin-top: 0; font-size: 1.1em; color: #00aaff; }
+        label { display: block; margin-bottom: 5px; font-size: 0.9em; }
+        input[type="number"], input[type="text"], select {
             width: 100%;
+            padding: 8px;
             box-sizing: border-box;
             background: #222;
             border: 1px solid #555;
             color: white;
             border-radius: 4px;
         }
         button {
             width: 100%;
+            padding: 10px;
             background: #0077cc;
             border: none;
             color: white;
             cursor: pointer;
             font-weight: bold;
             margin-top: 10px;
         }
+        button:hover { background: #0099ff; }
+        .slider-container { margin-top: 10px; }
+        input[type="range"] { width: 100%; }
+        #brush-mode-container label, #mode-container label { display: inline-block; margin-right: 10px; }
         #loading-spinner {
             position: absolute;
             top: 50%;
             display: none;
             z-index: 100;
         }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
     </style>
 </head>
 <body>
     <div id="ui-panel">
+        <div class="ui-group">
+            <h3>Режим</h3>
+            <div id="mode-container">
+                <label><input type="radio" name="mode" value="camera" checked> Камера</label>
+                <label><input type="radio" name="mode" value="sculpt"> Скульптинг</label>
+                <label><input type="radio" name="mode" value="paint"> Рисование</label>
+            </div>
+        </div>
         <div class="ui-group">
             <h3>Ландшафт</h3>
             <label for="terrain-width">Ширина:</label>
             <button id="save-project">Сохранить проект</button>
         </div>
+        <div class="ui-group" id="brush-group">
             <h3>Кисть</h3>
             <div id="brush-mode-container">
                 <label><input type="radio" name="brush-mode" value="raise" checked> Поднять</label>
                 <label><input type="radio" name="brush-mode" value="lower"> Опустить</label>
+            </div>
+            <div id="paint-options" style="display:none;">
+                <label for="paint-texture">Текстура:</label>
+                <select id="paint-texture">
+                    <option value="0">Трава</option>
+                    <option value="1">Грунт</option>
+                    <option value="2">Скала</option>
+                </select>
             </div>
             <div class="slider-container">
                 <label for="brush-size">Размер кисти: <span id="brush-size-value">10</span></label>
         </div>
         <div class="ui-group">
+            <h3>Элементы</h3>
+            <label><input type="checkbox" id="show-water"> Показать воду</label>
+            <label><input type="checkbox" id="show-grass"> Показать траву</label>
         </div>
     </div>
     <div id="loading-spinner"></div>
     <script type="importmap">
     {
         "imports": {
+            "three": "https://unpkg.com/three@0.160.0/build/three.module.js ",
+            "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/ "
         }
     }
     </script>
     <script type="module">
         import * as THREE from 'three';
         import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+        let scene, camera, renderer, controls, terrainMesh, brushHelper, splatTexture, grassGroup, waterMesh;
         let raycaster = new THREE.Raycaster();
         let mouse = new THREE.Vector2();
+        let isModifying = false;
+        let mode = 'camera';
+        const splatRes = 128;
         const terrainDimensions = { width: 100, height: 100, segmentsX: 100, segmentsY: 100 };
         function init() {
             scene = new THREE.Scene();
             renderer.domElement.addEventListener('pointerout', () => { brushHelper.visible = false; });
             setupUIListeners();
             animate();
         }
         function setupUIListeners() {
+            document.querySelectorAll('input[name="mode"]').forEach(radio => {
+                radio.addEventListener('change', (e) => {
+                    mode = e.target.value;
+                    controls.enabled = mode === 'camera';
+                    document.getElementById('brush-mode-container').style.display = mode === 'sculpt' ? 'block' : 'none';
+                    document.getElementById('paint-options').style.display = mode === 'paint' ? 'block' : 'none';
+                });
+            });
             document.getElementById('create-terrain').addEventListener('click', () => {
                 const width = parseInt(document.getElementById('terrain-width').value);
                 const height = parseInt(document.getElementById('terrain-height').value);
             document.getElementById('save-project').addEventListener('click', saveProject);
             document.getElementById('load-project').addEventListener('click', loadProject);
             document.getElementById('brush-size').addEventListener('input', (e) => {
                 document.getElementById('brush-size-value').textContent = e.target.value;
                 updateBrushHelper();
             });
             document.getElementById('brush-strength').addEventListener('input', (e) => {
                 document.getElementById('brush-strength-value').textContent = e.target.value;
             });
             document.getElementById('project-list').addEventListener('change', (e) => {
                 document.getElementById('project-name').value = e.target.value;
             });
+            document.getElementById('show-water').addEventListener('change', (e) => {
+                toggleWater(e.target.checked);
             });
+            document.getElementById('show-grass').addEventListener('change', (e) => {
+                if (e.target.checked) {
+                    generateGrass();
+                } else {
+                    removeGrass();
+                }
             });
         }
             document.getElementById('loading-spinner').style.display = show ? 'block' : 'none';
         }
+        function createTerrain(width, height, data = null, splatData = null) {
             if (terrainMesh) {
                 scene.remove(terrainMesh);
                 terrainMesh.geometry.dispose();
                 for (let i = 0; i < positions.count; i++) {
                     positions.setY(i, data[i]);
                 }
             }
             const material = new THREE.MeshStandardMaterial({
                 roughness: 0.8,
                 metalness: 0.2
             });
+            material.onBeforeCompile = (shader) => {
+                shader.uniforms.splat = { value: splatTexture };
+                shader.vertexShader = shader.vertexShader.replace(
+                    '#include <common>',
+                    '#include <common>\nvarying vec2 vUv;'
+                );
+                shader.vertexShader = shader.vertexShader.replace(
+                    '#include <begin_vertex>',
+                    '#include <begin_vertex>\nvUv = uv;'
+                );
+                shader.fragmentShader = shader.fragmentShader.replace(
+                    '#include <common>',
+                    '#include <common>\nuniform sampler2D splat;'
+                );
+                shader.fragmentShader = shader.fragmentShader.replace(
+                    '#include <color_fragment>',
+                    '#include <color_fragment>\nvec4 splatCol = texture2D(splat, vUv);\ndiffuseColor.rgb = vec3(0.1, 0.6, 0.1) * splatCol.r + vec3(0.5, 0.3, 0.1) * splatCol.g + vec3(0.4, 0.4, 0.4) * splatCol.b;'
+                );
+            };
             terrainMesh = new THREE.Mesh(geometry, material);
             terrainMesh.castShadow = true;
             terrainMesh.receiveShadow = true;
             scene.add(terrainMesh);
             geometry.computeVertexNormals();
+            const splatArray = new Uint8Array(splatRes * splatRes * 4);
+            for (let k = 0; k < splatArray.length; k += 4) {
+                splatArray[k] = 255;
+                splatArray[k + 3] = 255;
+            }
+            splatTexture = new THREE.DataTexture(splatArray, splatRes, splatRes, THREE.RGBAFormat);
+            splatTexture.needsUpdate = true;
+            if (splatData) {
+                splatTexture.image.data = new Uint8Array(splatData);
+                splatTexture.needsUpdate = true;
+            }
         }
         function onWindowResize() {
                 brushHelper.visible = true;
                 updateBrushHelper();
+                if (isModifying && mode !== 'camera') {
+                    modifyTerrain(intersects[0]);
                 }
             } else {
                 brushHelper.visible = false;
         }
         function onPointerDown(event) {
+            if (event.button === 0 && mode !== 'camera') {
+                isModifying = true;
             }
         }
         function onPointerUp(event) {
             if (event.button === 0) {
+                isModifying = false;
             }
         }
+        function modifyTerrain(intersect) {
             if (!terrainMesh) return;
+            if (mode === 'sculpt') {
+                const positions = terrainMesh.geometry.attributes.position;
+                const brushSize = parseFloat(document.getElementById('brush-size').value);
+                const brushStrength = parseFloat(document.getElementById('brush-strength').value);
+                const brushMode = document.querySelector('input[name="brush-mode"]:checked').value;
+                const direction = (brushMode === 'raise') ? 1 : -1;
+                const center = intersect.point;
+                const vertex = new THREE.Vector3();
+                for (let i = 0; i < positions.count; i++) {
+                    vertex.fromBufferAttribute(positions, i);
+                    const distance = vertex.distanceTo(center);
+                    if (distance < brushSize) {
+                        const falloff = (1 - (distance / brushSize));
+                        const smoothedFalloff = falloff * falloff * (3 - 2 * falloff);
+                        let currentY = positions.getY(i);
                         let newY = currentY + direction * smoothedFalloff * brushStrength;
                         positions.setY(i, newY);
                     }
                 }
+                positions.needsUpdate = true;
+                terrainMesh.geometry.computeVertexNormals();
+            } else if (mode === 'paint') {
+                const uv = intersect.uv;
+                const brushSize = parseFloat(document.getElementById('brush-size').value);
+                const brushStrength = parseFloat(document.getElementById('brush-strength').value);
+                const selectedChannel = parseInt(document.getElementById('paint-texture').value);
+                const data = splatTexture.image.data;
+                for (let j = 0; j < splatRes; j++) {
+                    for (let i = 0; i < splatRes; i++) {
+                        const u = i / (splatRes - 1);
+                        const v = j / (splatRes - 1);
+                        const du = u - uv.x;
+                        const dv = v - uv.y;
+                        const distX = du * terrainDimensions.width;
+                        const distZ = dv * terrainDimensions.height;
+                        const dist = Math.sqrt(distX * distX + distZ * distZ);
+                        if (dist < brushSize) {
+                            const falloff = 1 - dist / brushSize;
+                            const smoothed = falloff * falloff * (3 - 2 * falloff);
+                            const amount = smoothed * brushStrength;
+                            const index = (j * splatRes + i) * 4;
+                            const targetR = selectedChannel === 0 ? 255 : 0;
+                            const targetG = selectedChannel === 1 ? 255 : 0;
+                            const targetB = selectedChannel === 2 ? 255 : 0;
+                            data[index] = data[index] * (1 - amount) + targetR * amount;
+                            data[index + 1] = data[index + 1] * (1 - amount) + targetG * amount;
+                            data[index + 2] = data[index + 2] * (1 - amount) + targetB * amount;
+                            data[index + 3] = 255;
+                        }
+                    }
                 }
+                splatTexture.needsUpdate = true;
             }
         }
+        function getHeightAt(x, z) {
+            if (Math.abs(x) > terrainDimensions.width / 2 || Math.abs(z) > terrainDimensions.height / 2) return null;
             const positions = terrainMesh.geometry.attributes.position;
+            const gridX = terrainDimensions.segmentsX + 1;
+            const gridZ = terrainDimensions.segmentsY + 1;
+            const cellSizeX = terrainDimensions.width / terrainDimensions.segmentsX;
+            const cellSizeZ = terrainDimensions.height / terrainDimensions.segmentsY;
+            const gridPosX = (x + terrainDimensions.width / 2) / cellSizeX;
+            const gridPosZ = (z + terrainDimensions.height / 2) / cellSizeZ;
+            const cellX = Math.floor(gridPosX);
+            const cellZ = Math.floor(gridPosZ);
+            if (cellX < 0 || cellX >= terrainDimensions.segmentsX || cellZ < 0 || cellZ >= terrainDimensions.segmentsY) return null;
+            const v00 = positions.getY(cellZ * gridX + cellX);
+            const v10 = positions.getY(cellZ * gridX + cellX + 1);
+            const v01 = positions.getY((cellZ + 1) * gridX + cellX);
+            const v11 = positions.getY((cellZ + 1) * gridX + cellX + 1);
+            const fracX = gridPosX - cellX;
+            const fracZ = gridPosZ - cellZ;
+            const y1 = v00 * (1 - fracX) + v10 * fracX;
+            const y2 = v01 * (1 - fracX) + v11 * fracX;
+            return y1 * (1 - fracZ) + y2 * fracZ;
+        }
+        function getSplatAt(u, v) {
+            const i = Math.floor(u * (splatRes - 1));
+            const j = Math.floor(v * (splatRes - 1));
+            const index = (j * splatRes + i) * 4;
+            const data = splatTexture.image.data;
+            return [data[index] / 255, data[index + 1] / 255, data[index + 2] / 255];
+        }
+        function generateGrass() {
+            removeGrass();
+            grassGroup = new THREE.Group();
+            const grassGeo = new THREE.PlaneGeometry(0.5, 1);
+            grassGeo.translate(0, 0.5, 0);
+            const grassMat = new THREE.MeshStandardMaterial({ color: 0x00ff00, side: THREE.DoubleSide });
+            const count = 5000;
+            const instancedGrass = new THREE.InstancedMesh(grassGeo, grassMat, count);
+            const dummy = new THREE.Object3D();
+            let idx = 0;
+            while (idx < count) {
+                const x = Math.random() * terrainDimensions.width - terrainDimensions.width / 2;
+                const z = Math.random() * terrainDimensions.height - terrainDimensions.height / 2;
+                const y = getHeightAt(x, z);
+                if (y === null) continue;
+                const uvx = (x + terrainDimensions.width / 2) / terrainDimensions.width;
+                const uvz = (z + terrainDimensions.height / 2) / terrainDimensions.height;
+                const splatVal = getSplatAt(uvx, uvz);
+                if (splatVal[0] > 0.5) {
+                    dummy.position.set(x, y, z);
+                    dummy.rotation.y = Math.random() * Math.PI * 2;
+                    dummy.scale.set(1, 1 + Math.random(), 1);
+                    dummy.updateMatrix();
+                    instancedGrass.setMatrixAt(idx, dummy.matrix);
+                    idx++;
+                }
             }
+            instancedGrass.instanceMatrix.needsUpdate = true;
+            grassGroup.add(instancedGrass);
+            scene.add(grassGroup);
         }
+        function removeGrass() {
+            if (grassGroup) {
+                scene.remove(grassGroup);
+                grassGroup = null;
             }
         }
+        function toggleWater(show) {
+            if (show) {
+                if (!waterMesh) {
+                    const waterGeo = new THREE.PlaneGeometry(terrainDimensions.width * 2, terrainDimensions.height * 2);
+                    waterGeo.rotateX(-Math.PI / 2);
+                    const waterMat = new THREE.MeshStandardMaterial({ color: 0x0066ff, transparent: true, opacity: 0.6, side: THREE.DoubleSide });
+                    waterMesh = new THREE.Mesh(waterGeo, waterMat);
+                    waterMesh.position.y = 0;
+                    scene.add(waterMesh);
+                }
+            } else if (waterMesh) {
+                scene.remove(waterMesh);
             }
         }
                 width: terrainDimensions.width,
                 height: terrainDimensions.height,
                 data: heightData,
+                splatData: Array.from(splatTexture.image.data),
+                showWater: document.getElementById('show-water').checked,
+                showGrass: document.getElementById('show-grass').checked
             };
             try {
                 }
             } catch (error) {
                 alert(`Не удалось сохранить проект: ${error.message}`);
             } finally {
                 showSpinner(false);
                     throw new Error(result.error || 'Ошибка при загрузке проекта.');
                 }
+                createTerrain(result.width, result.height, result.data, result.splatData);
                 document.getElementById('project-name').value = projectName;
                 document.getElementById('terrain-width').value = result.width;
                 document.getElementById('terrain-height').value = result.height;
+                document.getElementById('show-water').checked = result.showWater || false;
+                toggleWater(result.showWater || false);
+                document.getElementById('show-grass').checked = result.showGrass || false;
+                if (result.showGrass) {
+                    generateGrass();
+                }
             } catch (error) {
                 alert(`Не удалось загрузить проект: ${error.message}`);
             } finally {
                 showSpinner(false);
 if __name__ == '__main__':
     port = int(os.environ.get('PORT', 7860))
+    app.run(debug=False, host='0.0.0.0', port=port)