Update app.py

app.py

@@ -4,19 +4,15 @@ from datetime import datetime
 import os
 import threading
 import time
-from PIL import Image
-from io import BytesIO
-import aiofiles
-import asyncio
 import base64
 
 # 🌟🔥 Initialize session state like a galactic DJ spinning tracks!
 if 'file_history' not in st.session_state:
     st.session_state['file_history'] = []
-if 'auto_capture_running' not_in st.session_state:
+if 'auto_capture_running' not in st.session_state:
     st.session_state['auto_capture_running'] = False
-if 'cam_file' not_in st.session_state:
-    st.session_state['cam_file'] = None
+if 'snapshot_data' not in st.session_state:
+    st.session_state['snapshot_data'] = None
 
 # 📜💾 Save to history like a time-traveling scribe! | 📅✨ save_to_history("🖼️ Image", "pic.jpg") - Stamps a pic in the history books like a boss!
 def save_to_history(file_type, file_path):
@@ -29,13 +25,12 @@ def save_to_history(file_type, file_path):
 
 # 📸⏰ Auto-capture every 10 secs like a sneaky shutterbug!
 def auto_capture():
-    if st.session_state['auto_capture_running'] and 'cam_img' in st.session_state:
-        cam_img = st.session_state['cam_img']
-        if cam_img:
-            filename = f"auto_snap_{datetime.now().strftime('%Y%m%d_%H%M%S')}.jpg"
-            with open(filename, "wb") as f:
-                f.write(cam_img.getvalue())
-            save_to_history("🖼️ Image", filename)
+    if st.session_state['auto_capture_running'] and st.session_state['snapshot_data']:
+        snapshot_data = st.session_state['snapshot_data']
+        filename = f"auto_snap_{datetime.now().strftime('%Y%m%d_%H%M%S')}.jpg"
+        with open(filename, "wb") as f:
+            f.write(base64.b64decode(snapshot_data.split(',')[1]))
+        save_to_history("🖼️ Image", filename)
         threading.Timer(10, auto_capture).start()
 
 # 🎛️ Sidebar config like a spaceship control panel!
@@ -59,31 +54,119 @@ with st.sidebar:
         st.write("🕳️ Empty Stash!")
 
 # 🌍🎨 Main UI kicks off like a cosmic art show!
-st.title("📸 Snap Craze")
+st.title("📸 WebRTC Snap Craze")
 
-# 📸📷 Camera snap zone!
+# 📸📷 WebRTC camera snap zone!
 st.header("📸🎥 Snap Zone")
-cam_img = st.camera_input("📷 Snap It!", key="cam")
-if cam_img:
-    filename = f"cam_snap_{datetime.now().strftime('%Y%m%d_%H%M%S')}.jpg"
-    if st.session_state['cam_file'] and os.path.exists(st.session_state['cam_file']):
-        os.remove(st.session_state['cam_file'])
-    with open(filename, "wb") as f:
-        f.write(cam_img.getvalue())
-    st.session_state['cam_file'] = filename
-    st.session_state['cam_img'] = cam_img  # Store for auto-capture
-    save_to_history("🖼️ Image", filename)
-    st.image(Image.open(filename), caption="Latest Snap", use_column_width=True)
-
-# 📂 Upload zone like a media drop party!
-st.header("📥🎉 Drop Zone")
-uploaded_files = st.file_uploader("📸 Toss Pics", accept_multiple_files=True, type=['jpg', 'png'])
-if uploaded_files:
-    for uploaded_file in uploaded_files:
-        file_path = f"uploaded_{uploaded_file.name}"
-        with open(file_path, "wb") as f:
-            f.write(uploaded_file.read())
-        save_to_history("🖼️ Image", file_path)
+webrtc_html = """
+<div>
+    <select id="cameraSelect"></select>
+    <button onclick="startStream()">📷 Start Stream</button>
+    <button onclick="takeSnapshot()">📸 Snap It!</button>
+    <button onclick="stopStream()">⏹️ Stop Stream</button>
+    <video id="video" autoplay playsinline></video>
+    <canvas id="canvas" style="display:none;"></canvas>
+    <img id="snapshot" style="display:none;">
+</div>
+<script>
+    let stream = null;
+    let peerConnection = null;
+    const config = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
+
+    // 📹🔍 Enumerate cameras like a tech detective!
+    async function enumerateCameras() {
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        const videoDevices = devices.filter(device => device.kind === 'videoinput');
+        const select = document.getElementById('cameraSelect');
+        select.innerHTML = '';
+        videoDevices.forEach((device, index) => {
+            const option = document.createElement('option');
+            option.value = device.deviceId;
+            option.text = device.label || `Camera ${index + 1}`;
+            select.appendChild(option);
+        });
+    }
+
+    // 📸🎥 Start streaming like a live broadcast pro!
+    async function startStream() {
+        if (stream) stopStream();
+        const cameraId = document.getElementById('cameraSelect').value;
+        const constraints = { video: { deviceId: cameraId ? { exact: cameraId } : undefined } };
+        stream = await navigator.mediaDevices.getUserMedia(constraints);
+        const video = document.getElementById('video');
+        video.srcObject = stream;
+
+        peerConnection = new RTCPeerConnection(config);
+        stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));
+        peerConnection.onicecandidate = event => {
+            if (event.candidate) console.log('ICE Candidate:', event.candidate);
+        };
+        const offer = await peerConnection.createOffer();
+        await peerConnection.setLocalDescription(offer);
+        // Simulate remote answer (self-loop for demo)
+        await peerConnection.setRemoteDescription(offer);
+    }
+
+    // 📸✂️ Snap a pic like a stealthy paparazzi!
+    function takeSnapshot() {
+        const video = document.getElementById('video');
+        const canvas = document.getElementById('canvas');
+        const snapshot = document.getElementById('snapshot');
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        canvas.getContext('2d').drawImage(video, 0, 0);
+        const dataUrl = canvas.toDataURL('image/jpeg');
+        snapshot.src = dataUrl;
+        snapshot.style.display = 'block';
+        // Send snapshot to Python via session state
+        window.parent.postMessage({ type: 'snapshot', data: dataUrl }, '*');
+    }
+
+    // ⏹️📴 Stop the stream like a broadcast kill switch!
+    function stopStream() {
+        if (stream) {
+            stream.getTracks().forEach(track => track.stop());
+            stream = null;
+        }
+        if (peerConnection) {
+            peerConnection.close();
+            peerConnection = null;
+        }
+        document.getElementById('video').srcObject = null;
+        document.getElementById('snapshot').style.display = 'none';
+    }
+
+    // 🎬 Kick off the camera party!
+    enumerateCameras();
+</script>
+"""
+st.markdown(webrtc_html, unsafe_allow_html=True)
+
+# 📸📥 Handle snapshots from JS
+def handle_snapshot():
+    if "snapshot" in st.session_state:
+        st.session_state['snapshot_data'] = st.session_state["snapshot"]
+        filename = f"snap_{datetime.now().strftime('%Y%m%d_%H%M%S')}.jpg"
+        with open(filename, "wb") as f:
+            f.write(base64.b64decode(st.session_state['snapshot_data'].split(',')[1]))
+        save_to_history("🖼️ Image", filename)
+        st.image(filename, caption="Latest Snap", use_column_width=True)
+        del st.session_state["snapshot"]  # Clear after saving
+
+# Listen for JS messages
+st.components.v1.html(
+    """
+    <script>
+    window.addEventListener('message', function(event) {
+        if (event.data.type === 'snapshot') {
+            window.streamlitAPI.setComponentValue({snapshot: event.data.data});
+        }
+    });
+    </script>
+    """,
+    height=0
+)
+handle_snapshot()
 
 # 🖼️ Gallery like a media circus!
 st.header("🎪 Snap Show")