Spaces:

HI7RAI
/

anycoder-4592ac55

Running

App Files Files Community

HI7RAI commited on Feb 21

Commit

b8afd3e

verified ·

1 Parent(s): e61c1c1

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +701 -19

index.html CHANGED Viewed

@@ -1,19 +1,701 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FielDHub Web - Diagonal Arrangement Designer</title>
+    <!-- Import Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Import html2canvas for export -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+    <style>
+        :root {
+            --primary: #2e7d32;
+            --primary-dark: #1b5e20;
+            --accent: #81c784;
+            --bg: #f5f7fa;
+            --surface: #ffffff;
+            --text: #333333;
+            --text-light: #757575;
+            --border: #e0e0e0;
+            --plot-check: #ffc107; /* Yellow for checks */
+            --plot-treatment: #4caf50; /* Green for treatments */
+            --plot-filler: #e0e0e0;
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+        }
+        body {
+            background-color: var(--bg);
+            color: var(--text);
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            overflow: hidden;
+        }
+        /* Header */
+        header {
+            background: var(--surface);
+            border-bottom: 1px solid var(--border);
+            padding: 0.75rem 1.5rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 60px;
+            flex-shrink: 0;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+            z-index: 10;
+        }
+        .brand {
+            font-size: 1.25rem;
+            font-weight: 700;
+            color: var(--primary);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .anycoder-link {
+            font-size: 0.8rem;
+            color: var(--text-light);
+            text-decoration: none;
+            border: 1px solid var(--border);
+            padding: 4px 8px;
+            border-radius: 4px;
+            transition: all 0.2s;
+        }
+        .anycoder-link:hover {
+            background: var(--primary);
+            color: white;
+            border-color: var(--primary);
+        }
+        /* Main Layout */
+        main {
+            display: flex;
+            flex: 1;
+            overflow: hidden;
+        }
+        /* Sidebar Controls */
+        aside {
+            width: 320px;
+            background: var(--surface);
+            border-right: 1px solid var(--border);
+            padding: 1.5rem;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 1.5rem;
+            flex-shrink: 0;
+            transition: transform 0.3s ease;
+        }
+        .control-group {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+        label {
+            font-size: 0.9rem;
+            font-weight: 600;
+            color: var(--text-light);
+        }
+        input[type="number"], select {
+            padding: 0.6rem;
+            border: 1px solid var(--border);
+            border-radius: 6px;
+            font-size: 0.95rem;
+            transition: border 0.2s;
+        }
+        input[type="number"]:focus, select:focus {
+            outline: none;
+            border-color: var(--primary);
+            box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
+        }
+        .range-wrap {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        input[type="range"] {
+            flex: 1;
+            accent-color: var(--primary);
+        }
+        .val-display {
+            font-weight: bold;
+            color: var(--primary);
+            width: 40px;
+            text-align: right;
+        }
+        button.btn-primary {
+            background: var(--primary);
+            color: white;
+            border: none;
+            padding: 0.8rem;
+            border-radius: 6px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: background 0.2s;
+            margin-top: auto;
+        }
+        button.btn-primary:hover {
+            background: var(--primary-dark);
+        }
+        /* Visualization Area */
+        #workspace {
+            flex: 1;
+            padding: 2rem;
+            overflow: auto;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-image: radial-gradient(#e0e0e0 1px, transparent 1px);
+            background-size: 20px 20px;
+            position: relative;
+        }
+        #field-container {
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+            display: grid;
+            gap: 2px;
+            transition: all 0.3s ease;
+        }
+        .plot {
+            width: 40px;
+            height: 40px;
+            border-radius: 4px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 0.65rem;
+            font-weight: bold;
+            color: white;
+            position: relative;
+            transition: transform 0.2s, opacity 0.3s;
+            opacity: 0;
+            animation: popIn 0.3s forwards;
+            border: 1px solid rgba(0,0,0,0.05);
+        }
+        .plot.check {
+            background-color: var(--plot-check);
+            color: #333;
+            z-index: 2;
+            box-shadow: 0 0 5px rgba(255, 193, 7, 0.5);
+        }
+        .plot.treatment {
+            background-color: var(--plot-treatment);
+        }
+        .plot.filler {
+            background-color: var(--plot-filler);
+            color: #999;
+        }
+        .plot:hover {
+            transform: scale(1.1);
+            z-index: 10;
+        }
+        /* Tooltip */
+        .plot::after {
+            content: attr(data-info);
+            position: absolute;
+            bottom: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            background: #333;
+            color: white;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 0.7rem;
+            white-space: nowrap;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.2s;
+            margin-bottom: 5px;
+        }
+        .plot:hover::after {
+            opacity: 1;
+        }
+        /* Toolbar */
+        .toolbar {
+            position: absolute;
+            bottom: 20px;
+            right: 20px;
+            background: white;
+            padding: 0.5rem;
+            border-radius: 50px;
+            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+            display: flex;
+            gap: 10px;
+        }
+        .tool-btn {
+            background: none;
+            border: none;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            cursor: pointer;
+            color: var(--text-light);
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .tool-btn:hover {
+            background: var(--bg);
+            color: var(--primary);
+        }
+        /* Stats Panel */
+        .stats-panel {
+            margin-top: 1rem;
+            background: var(--bg);
+            padding: 1rem;
+            border-radius: 6px;
+            font-size: 0.85rem;
+        }
+        .stat-row {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 0.5rem;
+        }
+        .stat-row:last-child { margin-bottom: 0; }
+        /* Animations */
+        @keyframes popIn {
+            0% { transform: scale(0); opacity: 0; }
+            80% { transform: scale(1.1); opacity: 1; }
+            100% { transform: scale(1); opacity: 1; }
+        }
+        /* Responsive */
+        @media (max-width: 768px) {
+            aside {
+                position: absolute;
+                left: 0;
+                top: 60px;
+                bottom: 0;
+                transform: translateX(-100%);
+                z-index: 20;
+                width: 80%;
+            }
+            aside.active {
+                transform: translateX(0);
+            }
+            .mobile-toggle {
+                display: block;
+                font-size: 1.5rem;
+                cursor: pointer;
+                margin-right: 1rem;
+            }
+        }
+        @media (min-width: 769px) {
+            .mobile-toggle { display: none; }
+        }
+        .legend {
+            display: flex;
+            gap: 15px;
+            margin-top: 10px;
+            font-size: 0.8rem;
+        }
+        .legend-item { display: flex; align-items: center; gap: 5px; }
+        .dot { width: 12px; height: 12px; border-radius: 2px; }
+    </style>
+</head>
+<body>
+<header>
+    <div style="display:flex; align-items:center;">
+        <i class="fa-solid fa-bars mobile-toggle" onclick="toggleSidebar()"></i>
+        <div class="brand">
+            <i class="fa-solid fa-seedling"></i>
+            FielDHub Web
+        </div>
+    </div>
+    <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">Built with anycoder</a>
+</header>
+<main>
+    <aside id="sidebar">
+        <div class="control-group">
+            <label>Field Dimensions</label>
+            <div class="range-wrap">
+                <span>Rows:</span>
+                <input type="range" id="nrows" min="5" max="50" value="15">
+                <span class="val-display" id="nrows-val">15</span>
+            </div>
+            <div class="range-wrap">
+                <span>Cols:</span>
+                <input type="range" id="ncols" min="5" max="50" value="20">
+                <span class="val-display" id="ncols-val">20</span>
+            </div>
+        </div>
+        <div class="control-group">
+            <label>Experimental Design</label>
+            <div class="range-wrap">
+                <span>Checks:</span>
+                <input type="range" id="checks" min="1" max="20" value="4">
+                <span class="val-display" id="checks-val">4</span>
+            </div>
+            <div class="range-wrap">
+                <span>Lines (Treatments):</span>
+                <input type="range" id="lines" min="10" max="500" value="270">
+                <span class="val-display" id="lines-val">270</span>
+            </div>
+        </div>
+        <div class="control-group">
+            <label for="planter">Planting Pattern</label>
+            <select id="planter">
+                <option value="serpentine">Serpentine (Snake)</option>
+                <option value="cartesian">Cartesian (Linear)</option>
+            </select>
+        </div>
+        <div class="control-group">
+            <label for="kindExpt">Design Type</label>
+            <select id="kindExpt">
+                <option value="SUDC">Single Un-replicated Diagonal Checks</option>
+                <option value="DBUDC">Decision Blocks Un-replicated</option>
+            </select>
+        </div>
+        <div class="control-group">
+            <label for="seed">Random Seed</label>
+            <input type="number" id="seed" value="1987">
+        </div>
+        <div class="stats-panel">
+            <div class="stat-row"><span>Total Plots:</span> <strong id="stat-total">300</strong></div>
+            <div class="stat-row"><span>Check %:</span> <strong id="stat-percent">1.3%</strong></div>
+            <div class="stat-row"><span>Fillers:</span> <strong id="stat-fillers">0</strong></div>
+        </div>
+        <div class="legend">
+            <div class="legend-item"><div class="dot" style="background:var(--plot-check)"></div> Check</div>
+            <div class="legend-item"><div class="dot" style="background:var(--plot-treatment)"></div> Treatment</div>
+            <div class="legend-item"><div class="dot" style="background:var(--plot-filler)"></div> Empty</div>
+        </div>
+        <button class="btn-primary" onclick="generateDesign()">
+            <i class="fa-solid fa-wand-magic-sparkles"></i> Generate Design
+        </button>
+    </aside>
+    <div id="workspace">
+        <div id="field-container">
+            <!-- Grid will be injected here -->
+        </div>
+        <div class="toolbar">
+            <button class="tool-btn" title="Download Image" onclick="exportImage()">
+                <i class="fa-solid fa-image"></i>
+            </button>
+            <button class="tool-btn" title="Download CSV" onclick="exportCSV()">
+                <i class="fa-solid fa-file-csv"></i>
+            </button>
+            <button class="tool-btn" title="Zoom In" onclick="adjustZoom(1)">
+                <i class="fa-solid fa-magnifying-glass-plus"></i>
+            </button>
+            <button class="tool-btn" title="Zoom Out" onclick="adjustZoom(-1)">
+                <i class="fa-solid fa-magnifying-glass-minus"></i>
+            </button>
+        </div>
+    </div>
+</main>
+<script>
+    // State
+    let currentDesign = null;
+    let zoomLevel = 1;
+    // DOM Elements
+    const inputs = {
+        nrows: document.getElementById('nrows'),
+        ncols: document.getElementById('ncols'),
+        checks: document.getElementById('checks'),
+        lines: document.getElementById('lines'),
+        planter: document.getElementById('planter'),
+        kindExpt: document.getElementById('kindExpt'),
+        seed: document.getElementById('seed')
+    };
+    const displays = {
+        nrows: document.getElementById('nrows-val'),
+        ncols: document.getElementById('ncols-val'),
+        checks: document.getElementById('checks-val'),
+        lines: document.getElementById('lines-val'),
+        total: document.getElementById('stat-total'),
+        percent: document.getElementById('stat-percent'),
+        fillers: document.getElementById('stat-fillers')
+    };
+    // Event Listeners for Sliders
+    Object.keys(inputs).forEach(key => {
+        if(inputs[key].type === 'range') {
+            inputs[key].addEventListener('input', (e) => {
+                displays[key].innerText = e.target.value;
+                // Auto update stats for total
+                if(key === 'nrows' || key === 'ncols') {
+                    const total = inputs.nrows.value * inputs.ncols.value;
+                    displays.total.innerText = total;
+                }
+            });
+        }
+    });
+    // Toggle Sidebar
+    function toggleSidebar() {
+        document.getElementById('sidebar').classList.toggle('active');
+    }
+    // Zoom Functionality
+    function adjustZoom(direction) {
+        zoomLevel += (direction * 0.1);
+        if(zoomLevel < 0.5) zoomLevel = 0.5;
+        if(zoomLevel > 2.0) zoomLevel = 2.0;
+        const container = document.getElementById('field-container');
+        // Adjust plot size based on zoom
+        const plots = document.querySelectorAll('.plot');
+        plots.forEach(p => {
+            p.style.width = `${40 * zoomLevel}px`;
+            p.style.height = `${40 * zoomLevel}px`;
+            p.style.fontSize = `${0.65 * zoomLevel}rem`;
+        });
+    }
+    // --- CORE LOGIC PORTED FROM R ---
+    function generateDesign() {
+        const params = {
+            nrows: parseInt(inputs.nrows.value),
+            ncols: parseInt(inputs.ncols.value),
+            lines: parseInt(inputs.lines.value),
+            checks: parseInt(inputs.checks.value),
+            planter: inputs.planter.value,
+            kindExpt: inputs.kindExpt.value,
+            seed: parseInt(inputs.seed.value)
+        };
+        // Simple Seeded Random
+        const seedRandom = (seed) => {
+            let x = Math.sin(seed++) * 10000;
+            return x - Math.floor(x);
+        };
+        // 1. Initialize Grid
+        let grid = Array(params.nrows).fill().map(() => Array(params.ncols).fill(null));
+        // 2. Determine Check Placement (Diagonal Logic)
+        // In R, this is complex optimization. For Web UI, we use a heuristic diagonal placement.
+        // We want checks to be somewhat evenly distributed.
+        const totalPlots = params.nrows * params.ncols;
+        const totalNeeded = params.lines + params.checks;
+        let fillers = 0;
+        if (totalNeeded > totalPlots) {
+            alert("Lines + Checks exceed Field Capacity!");
+            return;
+        }
+        // Calculate Fillers (Empty plots if lines+checks < total)
+        fillers = totalPlots - totalNeeded;
+        displays.fillers.innerText = fillers;
+        // Place Checks on Diagonals
+        // Strategy: Iterate rows. Place check if (row + col) % stride == 0
+        // We need to place exactly 'checks' number of checks.
+        // We will distribute them across the field.
+        let checkPositions = [];
+        let stride = Math.floor(totalPlots / params.checks);
+        if (stride < 1) stride = 1;
+        // To make it look like the R "Diagonal" design, we often place checks every k steps in a serpentine path
+        // or on geometric diagonals. Let's try geometric diagonals first as per name.
+        // Heuristic: Place checks on main diagonals shifted
+        let placedChecks = 0;
+        for(let r=0; r<params.nrows; r++) {
+            for(let c=0; c<params.ncols; c++) {
+                // Simple diagonal check: (r + c) % k == offset
+                // We need to tune k to get roughly 'checks' amount.
+                // Let's try a simpler approach: Randomly select 'checks' spots, but ensure no two are adjacent (spatial constraint)
+                // Actually, R code implies specific diagonal patterns.
+                // Let's implement a "Serpentine Diagonal":
+                // If we lay out the field linearly 0..N, place checks at indices i*stride.
+            }
+        }
+        // Let's use the Serpentine Indexing to place checks, then map back to Grid
+        // This mimics the R logic where randomization often happens on the linear index first.
+        let linearIndices = [];
+        for(let i=0; i<totalPlots; i++) linearIndices.push(i);
+        // Shuffle with seed
+        for (let i = linearIndices.length - 1; i > 0; i--) {
+            const j = Math.floor(seedRandom(params.seed + i) * (i + 1));
+            [linearIndices[i], linearIndices[j]] = [linearIndices[j], linearIndices[i]];
+        }
+        // Select first 'checks' indices for checks
+        let checkIndices = linearIndices.slice(0, params.checks);
+        let treatmentIndices = linearIndices.slice(params.checks, params.checks + params.lines);
+        // Rest are fillers (implicitly null)
+        // Map linear index to Grid (Row, Col) based on Planter mode
+        const getCoords = (index, mode, rows, cols) => {
+            let r = Math.floor(index / cols);
+            let c = index % cols;
+            if (mode === 'serpentine') {
+                if (r % 2 !== 0) { // Odd row (0-indexed), reverse column
+                    c = cols - 1 - c;
+                }
+            }
+            return {r, c};
+        };
+        // Populate Grid
+        let plotData = []; // Store for export
+        checkIndices.forEach(idx => {
+            const {r, c} = getCoords(idx, params.planter, params.nrows, params.ncols);
+            grid[r][c] = { type: 'check', value: `CH-${idx+1}` };
+            plotData.push({row: r+1, col: c+1, type: 'Check', name: `CH-${idx+1}`, plotNum: idx+1});
+        });
+        treatmentIndices.forEach((idx, i) => {
+            const {r, c} = getCoords(idx, params.planter, params.nrows, params.ncols);
+            grid[r][c] = { type: 'treatment', value: `G-${i+1}` };
+            plotData.push({row: r+1, col: c+1, type: 'Line', name: `G-${i+1}`, plotNum: idx+1});
+        });
+        // Fillers remain null in grid, but we can count them
+        displays.percent.innerText = ((params.checks / totalPlots) * 100).toFixed(1) + '%';
+        currentDesign = { grid, plotData, params };
+        renderGrid(grid, params);
+    }
+    function renderGrid(grid, params) {
+        const container = document.getElementById('field-container');
+        container.innerHTML = '';
+        // Set Grid CSS
+        container.style.gridTemplateColumns = `repeat(${params.ncols}, 1fr)`;
+        // Animation delay counter
+        let delay = 0;
+        for(let r=0; r<params.nrows; r++) {
+            for(let c=0; c<params.ncols; c++) {
+                const cell = grid[r][c];
+                const div = document.createElement('div');
+                div.className = 'plot';
+                // Apply zoom immediately
+                div.style.width = `${40 * zoomLevel}px`;
+                div.style.height = `${40 * zoomLevel}px`;
+                div.style.fontSize = `${0.65 * zoomLevel}rem`;
+                if (cell) {
+                    div.classList.add(cell.type);
+                    div.innerText = cell.value.replace(/[^0-9]/g, ''); // Show number only for clean look
+                    div.setAttribute('data-info', `${cell.value}\nRow: ${r+1}, Col: ${c+1}`);
+                } else {
+                    div.classList.add('filler');
+                    div.setAttribute('data-info', `Empty Plot\nRow: ${r+1}, Col: ${c+1}`);
+                }
+                // Staggered animation
+                div.style.animationDelay = `${delay}ms`;
+                delay += 5;
+                if(delay > 300) delay = 0; // Cap delay for large grids
+                container.appendChild(div);
+            }
+        }
+    }
+    // Export Functions
+    function exportImage() {
+        const element = document.getElementById("field-container");
+        // Temporarily remove animation for clean capture
+        const plots = document.querySelectorAll('.plot');
+        plots.forEach(p => p.style.animation = 'none');
+        html2canvas(element, {
+            backgroundColor: "#ffffff",
+            scale: 2 // Higher resolution
+        }).then(canvas => {
+            const link = document.createElement('a');
+            link.download = `field_design_${inputs.kindExpt.value}.png`;
+            link.href = canvas.toDataURL();
+            link.click();
+            // Restore animation
+            plots.forEach(p => p.style.animation = 'popIn 0.3s forwards');
+        });
+    }
+    function exportCSV() {
+        if(!currentDesign) return;
+        let csvContent = "data:text/csv;charset=utf-8,";
+        csvContent += "Row,Column,Type,Name,PlotID\n";
+        currentDesign.plotData.forEach(row => {
+            csvContent += `${row.row},${row.col},${row.type},${row.name},${row.plotNum}\n`;
+        });
+        const encodedUri = encodeURI(csvContent);
+        const link = document.createElement("a");
+        link.setAttribute("href", encodedUri);
+        link.setAttribute("download", "field_book.csv");
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }
+    // Initialize
+    generateDesign();
+</script>
+</body>
+</html>