Spaces:

Rilaba
/

splitting-cake

Running

App Files Files Community

Rilaba commited on Jun 1, 2025

Commit

eb5f874

verified ·

1 Parent(s): 4afdb5a

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +464 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Splitting Cake
-emoji: 📉
-colorFrom: gray
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: splitting-cake
+emoji: 🐳
+colorFrom: yellow
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,464 @@
-<!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>Cake Split - Proportional Division</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .cake-piece {
+            transition: all 0.3s ease;
+        }
+        .cake-piece:hover {
+            transform: scale(1.05);
+            z-index: 10;
+        }
+        #cakeCanvas {
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+        }
+        #cameraView {
+            transform: scaleX(-1); /* Mirror effect for front camera */
+        }
+        .slice-control {
+            -webkit-appearance: none;
+            height: 8px;
+            border-radius: 4px;
+            background: linear-gradient(90deg, #f59e0b, #ef4444);
+        }
+        .slice-control::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: #3b82f6;
+            cursor: pointer;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+        }
+    </style>
+</head>
+<body class="bg-amber-50 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <header class="text-center mb-8">
+            <h1 class="text-4xl font-bold text-amber-800 mb-2">
+                <i class="fas fa-cake-candles mr-2"></i>Cake Split
+            </h1>
+            <p class="text-amber-600">Capture your cake and divide it proportionally</p>
+        </header>
+        <div class="flex flex-col lg:flex-row gap-8">
+            <!-- Camera Section -->
+            <div class="flex-1 bg-white rounded-xl shadow-lg p-6">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-xl font-semibold text-amber-800">
+                        <i class="fas fa-camera mr-2"></i>Capture Your Cake
+                    </h2>
+                    <div class="flex gap-2">
+                        <button id="switchCamera" class="bg-amber-100 text-amber-800 p-2 rounded-full">
+                            <i class="fas fa-camera-retro"></i>
+                        </button>
+                        <button id="flashToggle" class="bg-amber-100 text-amber-800 p-2 rounded-full">
+                            <i class="fas fa-bolt"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="relative aspect-square bg-gray-200 rounded-lg overflow-hidden mb-4">
+                    <video id="cameraView" autoplay playsinline class="w-full h-full object-cover"></video>
+                    <div id="cameraOverlay" class="absolute inset-0 flex items-center justify-center hidden">
+                        <div class="cake-overlay-circle w-64 h-64 rounded-full border-4 border-dashed border-white opacity-70"></div>
+                    </div>
+                </div>
+                <div class="flex justify-center gap-4">
+                    <button id="captureBtn" class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-full font-medium flex items-center">
+                        <i class="fas fa-camera mr-2"></i> Capture Cake
+                    </button>
+                    <button id="uploadBtn" class="bg-amber-100 hover:bg-amber-200 text-amber-800 px-6 py-3 rounded-full font-medium flex items-center">
+                        <i class="fas fa-upload mr-2"></i> Upload
+                    </button>
+                    <input type="file" id="fileInput" accept="image/*" class="hidden">
+                </div>
+            </div>
+            <!-- Division Section -->
+            <div class="flex-1 bg-white rounded-xl shadow-lg p-6">
+                <h2 class="text-xl font-semibold text-amber-800 mb-4">
+                    <i class="fas fa-divide mr-2"></i>Divide Proportionally
+                </h2>
+                <div class="mb-6">
+                    <label class="block text-amber-700 mb-2">Number of People</label>
+                    <div class="flex items-center gap-4">
+                        <button id="decrementPeople" class="bg-amber-100 text-amber-800 w-10 h-10 rounded-full flex items-center justify-center">
+                            <i class="fas fa-minus"></i>
+                        </button>
+                        <span id="peopleCount" class="text-2xl font-bold text-amber-800 min-w-[40px] text-center">4</span>
+                        <button id="incrementPeople" class="bg-amber-100 text-amber-800 w-10 h-10 rounded-full flex items-center justify-center">
+                            <i class="fas fa-plus"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="mb-6">
+                    <label class="block text-amber-700 mb-2">Slice Proportions</label>
+                    <div id="proportionControls" class="space-y-4">
+                        <!-- Dynamic controls will be added here -->
+                    </div>
+                </div>
+                <div class="flex justify-center mb-6">
+                    <button id="divideBtn" class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-full font-medium flex items-center">
+                        <i class="fas fa-cut mr-2"></i> Divide Cake
+                    </button>
+                </div>
+                <div class="aspect-square bg-gray-100 rounded-lg overflow-hidden flex items-center justify-center relative">
+                    <canvas id="cakeCanvas" class="max-w-full max-h-full"></canvas>
+                    <div id="noCakeMessage" class="absolute inset-0 flex items-center justify-center text-gray-400">
+                        <div class="text-center">
+                            <i class="fas fa-cake-candles text-4xl mb-2"></i>
+                            <p>Capture or upload a cake image</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Results Section (hidden by default) -->
+        <div id="resultsSection" class="mt-8 bg-white rounded-xl shadow-lg p-6 hidden">
+            <h2 class="text-xl font-semibold text-amber-800 mb-4">
+                <i class="fas fa-chart-pie mr-2"></i>Division Results
+            </h2>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+                <!-- Dynamic results will be added here -->
+            </div>
+            <div class="flex justify-center gap-4">
+                <button id="saveBtn" class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-full font-medium flex items-center">
+                    <i class="fas fa-save mr-2"></i> Save Division
+                </button>
+                <button id="shareBtn" class="bg-amber-100 hover:bg-amber-200 text-amber-800 px-6 py-3 rounded-full font-medium flex items-center">
+                    <i class="fas fa-share-alt mr-2"></i> Share
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // DOM Elements
+        const cameraView = document.getElementById('cameraView');
+        const cameraOverlay = document.getElementById('cameraOverlay');
+        const captureBtn = document.getElementById('captureBtn');
+        const uploadBtn = document.getElementById('uploadBtn');
+        const fileInput = document.getElementById('fileInput');
+        const cakeCanvas = document.getElementById('cakeCanvas');
+        const ctx = cakeCanvas.getContext('2d');
+        const noCakeMessage = document.getElementById('noCakeMessage');
+        const peopleCount = document.getElementById('peopleCount');
+        const incrementPeople = document.getElementById('incrementPeople');
+        const decrementPeople = document.getElementById('decrementPeople');
+        const proportionControls = document.getElementById('proportionControls');
+        const divideBtn = document.getElementById('divideBtn');
+        const resultsSection = document.getElementById('resultsSection');
+        const switchCamera = document.getElementById('switchCamera');
+        const flashToggle = document.getElementById('flashToggle');
+        // App State
+        let currentImage = null;
+        let people = 4;
+        let proportions = Array(people).fill(1);
+        let stream = null;
+        let facingMode = "user"; // front camera by default
+        let flashOn = false;
+        // Initialize
+        setupProportionControls();
+        setupCamera();
+        resizeCanvas();
+        // Event Listeners
+        window.addEventListener('resize', resizeCanvas);
+        captureBtn.addEventListener('click', captureCake);
+        uploadBtn.addEventListener('click', () => fileInput.click());
+        fileInput.addEventListener('change', handleFileUpload);
+        incrementPeople.addEventListener('click', () => updatePeopleCount(1));
+        decrementPeople.addEventListener('click', () => updatePeopleCount(-1));
+        divideBtn.addEventListener('click', divideCake);
+        switchCamera.addEventListener('click', toggleCamera);
+        flashToggle.addEventListener('click', toggleFlash);
+        // Functions
+        function setupCamera() {
+            const constraints = {
+                video: {
+                    facingMode: facingMode,
+                    width: { ideal: 1280 },
+                    height: { ideal: 1280 }
+                }
+            };
+            navigator.mediaDevices.getUserMedia(constraints)
+                .then(function(mediaStream) {
+                    stream = mediaStream;
+                    cameraView.srcObject = stream;
+                    cameraOverlay.classList.remove('hidden');
+                })
+                .catch(function(err) {
+                    console.error("Camera error: ", err);
+                    alert("Could not access the camera. Please check permissions.");
+                });
+        }
+        function toggleCamera() {
+            if (stream) {
+                stream.getTracks().forEach(track => track.stop());
+            }
+            facingMode = facingMode === "user" ? "environment" : "user";
+            setupCamera();
+        }
+        function toggleFlash() {
+            flashOn = !flashOn;
+            flashToggle.classList.toggle('bg-amber-600', flashOn);
+            flashToggle.classList.toggle('text-white', flashOn);
+            if (stream) {
+                const videoTrack = stream.getVideoTracks()[0];
+                if (videoTrack && videoTrack.getCapabilities().torch) {
+                    videoTrack.applyConstraints({
+                        advanced: [{torch: flashOn}]
+                    }).catch(err => console.error("Flash error:", err));
+                }
+            }
+        }
+        function captureCake() {
+            if (!stream) return;
+            // Temporarily hide overlay for capture
+            cameraOverlay.classList.add('hidden');
+            // Create temporary canvas to capture the video frame
+            const tempCanvas = document.createElement('canvas');
+            tempCanvas.width = cameraView.videoWidth;
+            tempCanvas.height = cameraView.videoHeight;
+            const tempCtx = tempCanvas.getContext('2d');
+            tempCtx.drawImage(cameraView, 0, 0, tempCanvas.width, tempCanvas.height);
+            // Restore overlay
+            cameraOverlay.classList.remove('hidden');
+            // Process the captured image
+            processImage(tempCanvas.toDataURL('image/jpeg'));
+        }
+        function handleFileUpload(e) {
+            const file = e.target.files[0];
+            if (!file) return;
+            const reader = new FileReader();
+            reader.onload = function(event) {
+                processImage(event.target.result);
+            };
+            reader.readAsDataURL(file);
+        }
+        function processImage(imageData) {
+            currentImage = new Image();
+            currentImage.onload = function() {
+                noCakeMessage.classList.add('hidden');
+                resizeCanvas();
+                drawCake();
+            };
+            currentImage.src = imageData;
+        }
+        function resizeCanvas() {
+            const container = cakeCanvas.parentElement;
+            const size = Math.min(container.clientWidth, container.clientHeight);
+            cakeCanvas.width = size;
+            cakeCanvas.height = size;
+            if (currentImage) {
+                drawCake();
+            }
+        }
+        function drawCake() {
+            if (!currentImage) return;
+            const size = cakeCanvas.width;
+            ctx.clearRect(0, 0, size, size);
+            // Draw cake image centered and square
+            const scale = Math.min(size / currentImage.width, size / currentImage.height);
+            const width = currentImage.width * scale;
+            const height = currentImage.height * scale;
+            const x = (size - width) / 2;
+            const y = (size - height) / 2;
+            ctx.drawImage(currentImage, x, y, width, height);
+        }
+        function updatePeopleCount(change) {
+            people = Math.max(1, Math.min(10, people + change));
+            peopleCount.textContent = people;
+            // Update proportions array
+            if (change > 0) {
+                proportions.push(1); // Add default proportion for new person
+            } else {
+                proportions.pop(); // Remove last proportion
+            }
+            setupProportionControls();
+        }
+        function setupProportionControls() {
+            proportionControls.innerHTML = '';
+            for (let i = 0; i < people; i++) {
+                const controlDiv = document.createElement('div');
+                controlDiv.className = 'flex items-center gap-4';
+                const label = document.createElement('span');
+                label.className = 'text-amber-700 w-8';
+                label.textContent = `P${i+1}:`;
+                const slider = document.createElement('input');
+                slider.type = 'range';
+                slider.min = '1';
+                slider.max = '10';
+                slider.value = proportions[i];
+                slider.className = 'slice-control flex-1';
+                slider.dataset.index = i;
+                const valueDisplay = document.createElement('span');
+                valueDisplay.className = 'text-amber-800 font-medium w-8 text-center';
+                valueDisplay.textContent = proportions[i];
+                slider.addEventListener('input', function() {
+                    proportions[this.dataset.index] = parseInt(this.value);
+                    valueDisplay.textContent = this.value;
+                });
+                controlDiv.appendChild(label);
+                controlDiv.appendChild(slider);
+                controlDiv.appendChild(valueDisplay);
+                proportionControls.appendChild(controlDiv);
+            }
+        }
+        function divideCake() {
+            if (!currentImage) {
+                alert("Please capture or upload a cake image first.");
+                return;
+            }
+            const size = cakeCanvas.width;
+            ctx.clearRect(0, 0, size, size);
+            // Draw cake image
+            const scale = Math.min(size / currentImage.width, size / currentImage.height);
+            const width = currentImage.width * scale;
+            const height = currentImage.height * scale;
+            const x = (size - width) / 2;
+            const y = (size - height) / 2;
+            // Calculate total proportions
+            const totalProportions = proportions.reduce((a, b) => a + b, 0);
+            // Draw divided cake
+            let startAngle = 0;
+            const centerX = size / 2;
+            const centerY = size / 2;
+            const radius = Math.min(width, height) / 2;
+            // Draw each slice
+            for (let i = 0; i < people; i++) {
+                const sliceAngle = (proportions[i] / totalProportions) * 2 * Math.PI;
+                const endAngle = startAngle + sliceAngle;
+                // Create slice path
+                ctx.beginPath();
+                ctx.moveTo(centerX, centerY);
+                ctx.arc(centerX, centerY, radius, startAngle, endAngle);
+                ctx.closePath();
+                // Clip and draw cake portion
+                ctx.save();
+                ctx.clip();
+                ctx.drawImage(currentImage, x, y, width, height);
+                ctx.restore();
+                // Draw slice border
+                ctx.beginPath();
+                ctx.moveTo(centerX, centerY);
+                ctx.arc(centerX, centerY, radius, startAngle, endAngle);
+                ctx.closePath();
+                ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)';
+                ctx.lineWidth = 4;
+                ctx.stroke();
+                // Draw proportion text
+                const midAngle = startAngle + sliceAngle / 2;
+                const textX = centerX + Math.cos(midAngle) * radius * 0.6;
+                const textY = centerY + Math.sin(midAngle) * radius * 0.6;
+                ctx.font = `bold ${Math.max(14, radius * 0.15)}px Arial`;
+                ctx.fillStyle = 'white';
+                ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)';
+                ctx.lineWidth = 3;
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                ctx.strokeText(`${proportions[i]}`, textX, textY);
+                ctx.fillText(`${proportions[i]}`, textX, textY);
+                startAngle = endAngle;
+            }
+            // Show results section
+            showResults();
+        }
+        function showResults() {
+            resultsSection.classList.remove('hidden');
+            const resultsContainer = resultsSection.querySelector('.grid');
+            resultsContainer.innerHTML = '';
+            // Calculate total proportions
+            const totalProportions = proportions.reduce((a, b) => a + b, 0);
+            for (let i = 0; i < people; i++) {
+                const percentage = ((proportions[i] / totalProportions) * 100).toFixed(1);
+                const resultCard = document.createElement('div');
+                resultCard.className = 'bg-amber-50 rounded-lg p-4 text-center';
+                const colorClass = [
+                    'bg-amber-200', 'bg-blue-200', 'bg-green-200', 'bg-red-200',
+                    'bg-purple-200', 'bg-pink-200', 'bg-indigo-200', 'bg-yellow-200',
+                    'bg-teal-200', 'bg-orange-200'
+                ][i % 10];
+                resultCard.innerHTML = `
+                    <div class="w-16 h-16 ${colorClass} rounded-full flex items-center justify-center mx-auto mb-2">
+                        <span class="text-xl font-bold">P${i+1}</span>
+                    </div>
+                    <h3 class="font-semibold text-amber-800">Person ${i+1}</h3>
+                    <p class="text-amber-600">${proportions[i]} part(s)</p>
+                    <p class="text-amber-800 font-bold">${percentage}%</p>
+                `;
+                resultsContainer.appendChild(resultCard);
+            }
+            // Scroll to results
+            resultsSection.scrollIntoView({ behavior: 'smooth' });
+        }
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Rilaba/splitting-cake" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ an app for split proportionally a cake by camera