Spaces:

nagasurendra
/

Image3

Sleeping

App Files Files Community

nagasurendra commited on May 10

Commit

b7b7d35

verified ·

1 Parent(s): 393dc68

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +35 -113

templates/index.html CHANGED Viewed

@@ -3,118 +3,40 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Camera Capture</title>
-    <style>
-        #videoElement {
-            width: 100%;
-            height: auto;
-        }
-        #camera-controls {
-            display: flex;
-            justify-content: space-between;
-            margin-top: 10px;
-        }
-        #capture-button {
-            margin-top: 10px;
-        }
-    </style>
 </head>
-<body>
-<h1>Camera Capture</h1>
-<!-- Camera Icon -->
-<button id="open-camera-btn" onclick="startCamera()">📷</button>
-<!-- Video Capture Element -->
-<video id="videoElement" autoplay></video>
-<!-- Camera Control Buttons -->
-<div id="camera-controls">
-    <button id="switch-camera-btn" onclick="switchCamera()">Switch Camera</button>
-    <button id="capture-button" onclick="captureImage()">Capture</button>
-</div>
-<!-- Image Display and Action Buttons -->
-<div id="captured-image-section" style="display:none;">
-    <img id="captured-image" src="" alt="Captured Image" width="100%">
-    <button onclick="retakeImage()">Retake</button>
-    <button onclick="submitImage()">Submit</button>
-</div>
-<script>
-    let videoStream;
-    let currentStream;
-    let videoElement = document.getElementById('videoElement');
-    let capturedImageSection = document.getElementById('captured-image-section');
-    let capturedImage = document.getElementById('captured-image');
-    function startCamera() {
-        navigator.mediaDevices.enumerateDevices()
-        .then(devices => {
-            devices.forEach(device => {
-                if (device.kind === 'videoinput') {
-                    currentStream = device.deviceId;
-                    startStream(currentStream);
-                }
-            });
-        })
-        .catch(err => console.error("Error accessing camera:", err));
-    }
-    function startStream(deviceId) {
-        navigator.mediaDevices.getUserMedia({
-            video: { deviceId: { exact: deviceId } }
-        })
-        .then(stream => {
-            videoElement.srcObject = stream;
-            videoStream = stream;
-        })
-        .catch(err => console.error("Error accessing stream:", err));
-    }
-    function switchCamera() {
-        if (videoStream) {
-            videoStream.getTracks().forEach(track => track.stop());
-        }
-        startCamera();
-    }
-    function captureImage() {
-        let canvas = document.createElement('canvas');
-        canvas.width = videoElement.videoWidth;
-        canvas.height = videoElement.videoHeight;
-        canvas.getContext('2d').drawImage(videoElement, 0, 0, canvas.width, canvas.height);
-        let imageData = canvas.toDataURL('image/jpeg');
-        capturedImage.src = imageData;
-        capturedImageSection.style.display = 'block';
-        // Sending the captured image to Flask server
-        fetch('/capture', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-            body: 'image=' + encodeURIComponent(imageData)
-        }).then(response => response.json())
-          .then(data => console.log(data.message));
-    }
-    function retakeImage() {
-        capturedImageSection.style.display = 'none';
-        startCamera();
-    }
-    function submitImage() {
-        fetch('/post_to_instagram', {
-            method: 'POST'
-        })
-        .then(response => response.json())
-        .then(data => {
-            alert(data.message);
-        });
-    }
-</script>
 </body>
-</html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Flask Camera App</title>
+    <link href="{{ url_for('static', filename='css/tailwind.css') }}" rel="stylesheet">
 </head>
+<body class="bg-gray-100 flex items-center justify-center min-h-screen">
+    <div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-lg">
+        <h1 class="text-2xl font-bold mb-4 text-center">Capture & Upload</h1>
+        <div class="relative">
+            <video id="video" class="w-full rounded" autoplay></video>
+            <canvas id="canvas" class="hidden"></canvas>
+            <img id="capturedImage" class="w-full rounded hidden" src="">
+        </div>
+        <div class="flex justify-center space-x-4 mt-4">
+            <button id="cameraBtn" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
+                <svg class="w-6 h-6 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h2l2-2h6l2 2h2a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
+                    <circle cx="12" cy="13" r="4"/>
+                </svg>
+                Open Camera
+            </button>
+        </div>
+        <div id="cameraControls" class="hidden mt-4">
+            <div class="flex justify-center space-x-4 mb-4">
+                <button id="frontCam" class="bg-gray-300 text-black px-4 py-2 rounded hover:bg-gray-400">Front Camera</button>
+                <button id="backCam" class="bg-gray-300 text-black px-4 py-2 rounded hover:bg-gray-400">Back Camera</button>
+            </div>
+            <button id="captureBtn" class="bg-green-500 text-white w-full py-2 rounded hover:bg-green-600">Capture</button>
+        </div>
+        <div id="postCapture" class="hidden mt-4">
+            <div class="flex justify-center space-x-4">
+                <button id="retakeBtn" class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">Retake</button>
+                <button id="uploadBtn" class="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600">Upload to Instagram</button>
+            </div>
+        </div>
+    </div>
+    <script src="{{ url_for('static', filename='js/camera.js') }}"></script>
 </body>
+</html>