ssss

.gitignore

@@ -0,0 +1,14 @@
+.eggs/
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+.mypycache
+.ruff_cache
+node_modules
+backend/**/templates/
+
+.venv

.python-version

@@ -0,0 +1 @@
+3.13

README.md

@@ -1,12 +1,50 @@
----
-title: Teste Teste Teste
-emoji: 🏢
-colorFrom: pink
-colorTo: blue
-sdk: gradio
-sdk_version: 5.33.0
-app_file: app.py
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Real-Time Screen Assistant - Premium Edition
+
+This is a premium real-time screen assistant that integrates Google's Gemini 2.0 Live API with advanced screen recording capabilities.
+
+## Features
+
+- 🎙️ **Real-time Audio Streaming** - Voice activity detection with noise filtering
+- 🖥️ **Professional Screen Recording** - Native ScreenRecorder component with webcam overlay
+- 🤖 **AI Voice Responses** - Bidirectional audio communication with Gemini 2.0
+- 📝 **Text Response Display** - Real-time text responses with conversation history
+- 🔄 **Background Task Management** - Proper async handling and cleanup
+- 📊 **Performance Monitoring** - Real-time stats and adaptive quality
+
+## Setup
+
+1. Set your Google AI API key:
+   ```bash
+   export GEMINI_API_KEY="your-api-key-here"
+   ```
+
+2. Install dependencies (automatic on HuggingFace Spaces):
+   ```bash
+   pip install -r requirements.txt
+   ```
+
+3. Run the application:
+   ```bash
+   python app.py
+   ```
+
+## Components
+
+- **app.py** - Main application with premium real-time integration
+- **gradio_screenrecorder/** - Custom Gradio component for screen recording
+- **requirements.txt** - All necessary dependencies including custom components
+
+## Environment Variables
+
+- `GEMINI_API_KEY` - Required: Your Google AI API key for Gemini 2.0 Live API
+
+## Real-time Integration
+
+This application implements complete real-time frontend integration:
+
+1. **Continuous Audio Flow** (User → Model) - Voice activity detection
+2. **Model Audio Output** (Model → User) - AI voice responses 
+3. **Screen Recording Integration** - Professional screen capture
+4. **Text Response Delivery** (System → User) - Real-time text display
+
+All features are optimized for 300-second real-time sessions with adaptive quality and intelligent throttling.

app.py

@@ -16,10 +16,11 @@ Features:
 - Enhanced error handling and recovery
 - 300s timeout for real-time behavior
 """
-import gradio as gr
+
 import asyncio
 import os
 import time
+import sys
 from collections import deque
 
 import cv2
@@ -30,6 +31,9 @@ from fastrtc import AsyncAudioVideoStreamHandler, ReplyOnPause, Stream, get_clou
 from google import genai
 from google.genai import types
 
+# Import the ScreenRecorder component (installed via requirements.txt)
+from gradio_screenrecorder import ScreenRecorder
+
 # Environment variable for API key
 API_KEY = os.getenv("GEMINI_API_KEY", "")
 
@@ -404,7 +408,7 @@ def handle_connect():
     app_state["last_status"] = "Initiating connection..."
 
     # Start async connection
-    asyncio.run(handle_connect_async())
+    asyncio.create_task(handle_connect_async())
     return "🔄 Initiating connection to GenAI Live API..."
 
 async def handle_disconnect_async():
@@ -436,39 +440,6 @@ def get_connection_status():
     else:
         return f"🔴 Disconnected | Status: {app_state['last_status']}"
 
-
-
-
-
-# --- Async helpers for streaming handlers ---
-
-async def audio_stream_handler(audio):
-    if app_state.get("handler") and app_state.get("connected"):
-        return await app_state["handler"].receive(audio)
-    return None
-
-async def video_stream_handler(frame):
-    if app_state.get("handler") and app_state.get("connected"):
-        return await app_state["handler"].video_receive(frame)
-    return None
-
-async def ai_audio_output_handler():
-    if app_state.get("handler") and app_state.get("connected"):
-        return await app_state["handler"].emit()
-    return None
-
-# --- Backend logic for mic test and screen sharing ---
-
-def backend_mic_test():
-    if app_state.get("handler") and app_state.get("connected"):
-        return "🎙️ Microphone is active and streaming to backend."
-    return "⚠️ Please connect first to test microphone."
-
-def backend_screen_share():
-    if app_state.get("handler") and app_state.get("connected"):
-        return "🖥️ Screen sharing is active and streaming to backend."
-    return "⚠️ Please connect first to share your screen."
-
 def create_interface():
     """PREMIUM: Enhanced interface with complete real-time integration"""
     # Initialize premium stream
@@ -520,6 +491,20 @@ def create_interface():
             mic_test_btn = gr.Button("🎙️ Test Microphone", variant="secondary")
             screen_share_btn = gr.Button("🖥️ Share Screen", variant="secondary")
 
+        # --- Backend logic for mic test and screen sharing ---
+        def backend_mic_test():
+            # Simulate a backend mic test (could be extended to record/playback)
+            if app_state.get("handler") and app_state.get("connected"):
+                return "🎙️ Microphone is active and streaming to backend."
+            return "⚠️ Please connect first to test microphone."
+
+        def backend_screen_share():
+            # Simulate backend screen sharing trigger
+            if app_state.get("handler") and app_state.get("connected"):
+                # In a real implementation, you might set a flag or trigger a backend event
+                return "🖥️ Screen sharing is active and streaming to backend."
+            return "⚠️ Please connect first to share your screen."
+
         # PREMIUM: Real-time streaming interface
         gr.Markdown("### 📡 Premium Real-Time Stream")
 
@@ -533,29 +518,26 @@ def create_interface():
                 interactive=True
             )
 
-            video_stream = gr.Image(
-                streaming=True,
-                label="🖥️ Screen Capture (Adaptive Quality)",
+            # PREMIUM: Integrated ScreenRecorder component
+            screen_recorder = ScreenRecorder(
+                audio_enabled=True,
+                webcam_overlay=True,
+                webcam_position="bottom-right",
+                recording_format="webm",
+                max_duration=300,  # 5 minutes - real-time optimized
+                label="🖥️ Screen Recorder (Premium)",
                 interactive=True
             )
 
-            # PREMIUM: Connect streaming handlers with async functions
+            # PREMIUM: Connect streaming handlers
             audio_stream.stream(
-                fn=audio_stream_handler,
+                fn=lambda audio: app_state["handler"].receive(audio) if app_state["handler"] and app_state["connected"] else None,
                 inputs=[audio_stream],
                 outputs=[],
                 time_limit=300,  # Real-time optimized
                 concurrency_limit=5
             )
 
-            video_stream.stream(
-                fn=video_stream_handler,
-                inputs=[video_stream],
-                outputs=[],
-                time_limit=300,  # Real-time optimized
-                concurrency_limit=3
-            )
-
             # PREMIUM: AI response display
             ai_response_display = gr.Textbox(
                 label="🤖 AI Response Stream",
@@ -571,14 +553,47 @@ def create_interface():
                 streaming=True
             )
 
-            # Connect AI response handlers with async function
+            # Connect AI response handlers
             ai_audio_output.stream(
-                fn=ai_audio_output_handler,
+                fn=lambda: app_state["handler"].emit() if app_state["handler"] and app_state["connected"] else None,
                 inputs=[],
                 outputs=[ai_audio_output],
                 time_limit=300
             )
 
+            # Connect screen recorder to video handler
+            def handle_screen_recording(recording_data):
+                """Handle screen recording data and send to AI"""
+                if not recording_data or not app_state["handler"] or not app_state["connected"]:
+                    return "⚠️ Not connected to AI or no recording data"
+                
+                try:
+                    # If we have video data, process it for the AI
+                    if recording_data and recording_data.get('video'):
+                        # For real-time processing, we could extract frames
+                        # For now, just acknowledge the recording
+                        duration = recording_data.get('duration', 0)
+                        size = recording_data.get('size', 0)
+                        print(f"📹 Screen recording received: {duration}s, {size} bytes")
+                        
+                        # Update stats
+                        app_state["stats"]["frames_sent"] += 1
+                        
+                        return f"✅ Screen recording processed: {duration:.1f}s"
+                    else:
+                        return "⚠️ No video data in recording"
+                        
+                except Exception as e:
+                    print(f"❌ Error processing screen recording: {e}")
+                    return f"❌ Error: {e}"
+
+            screen_recorder.change(
+                fn=handle_screen_recording,
+                inputs=[screen_recorder],
+                outputs=[ai_response_display],
+                show_progress=False
+            )
+
         else:
             gr.HTML("<div>⚠️ Premium stream initialization failed - Check console for errors</div>")
 

backend/gradio_screenrecorder/__init__.py

@@ -0,0 +1,4 @@
+
+from .screenrecorder import ScreenRecorder
+
+__all__ = ['ScreenRecorder']

backend/gradio_screenrecorder/screenrecorder.py

@@ -0,0 +1,272 @@
+import gradio as gr
+from gradio.components.base import Component
+from gradio.data_classes import FileData, GradioModel
+from typing import Optional, Literal, Any
+import tempfile
+import os
+import json
+
+class ScreenRecorderData(GradioModel):
+    video: Optional[FileData] = None
+    duration: Optional[float] = None
+    audio_enabled: bool = True
+    status: Literal["recording", "stopped", "error"] = "stopped"
+
+    class Config:
+        json_encoders = {
+            FileData: lambda v: v.model_dump() if v else None
+        }
+
+
+class ScreenRecorder(Component):
+    """
+    Custom Gradio component for comprehensive screen recording functionality.
+    """
+    
+    data_model = ScreenRecorderData
+    
+    EVENTS = [
+        "record_start",
+        "record_stop", 
+        "stream_update",
+        "change"
+    ]
+    
+    def __init__(
+        self,
+        value=None,
+        audio_enabled: bool = True,
+        webcam_overlay: bool = False,
+        webcam_position: Literal["top-left", "top-right", "bottom-left", "bottom-right"] = "bottom-right",
+        recording_format: str = "webm",
+        max_duration: Optional[int] = None,
+        interactive: bool = True,
+        **kwargs
+    ):
+        self.audio_enabled = audio_enabled
+        self.webcam_overlay = webcam_overlay
+        self.webcam_position = webcam_position
+        self.recording_format = recording_format
+        self.max_duration = max_duration
+        self._status = "stopped"
+        
+        super().__init__(
+            value=value,
+            interactive=interactive,
+            **kwargs
+        )
+    
+    def example_payload(self) -> dict:
+        """
+        The example inputs for this component for API usage. Must be JSON-serializable.
+        """
+        return {
+            "video": {
+                "path": "https://sample-videos.com/zip/10/mp4/SampleVideo_360x240_1mb.mp4",
+                "orig_name": "example_recording.webm",
+                "size": 1024000
+            },
+            "duration": 30.5,
+            "audio_enabled": True,
+            "status": "stopped"
+        }
+    
+    def example_value(self) -> ScreenRecorderData:
+        """
+        An example value for this component for the default app.
+        """
+        return ScreenRecorderData(
+            video=FileData(
+                path="https://sample-videos.com/zip/10/mp4/SampleVideo_360x240_1mb.mp4",
+                orig_name="example_recording.webm", 
+                size=1024000
+            ),
+            duration=30.5,
+            audio_enabled=True,
+            status="stopped"
+        )
+    
+    def flag(self, x, flag_dir: str = "") -> str:
+        """
+        Write the component's value to a format for flagging (CSV storage).
+        """
+        if x is None:
+            return ""
+        
+        if isinstance(x, ScreenRecorderData) and x.video:
+            return f"Recording: {x.video.orig_name} ({x.duration}s) - Status: {x.status}"
+        
+        if isinstance(x, dict) and "video" in x:
+            duration = x.get("duration", "unknown")
+            status = x.get("status", "unknown")
+            video_name = x["video"].get("orig_name", "unknown") if x["video"] else "none"
+            return f"Recording: {video_name} ({duration}s) - Status: {status}"
+        
+        return str(x)
+    
+    def preprocess(self, payload) -> Optional[ScreenRecorderData]:
+        """Process incoming recording data from frontend."""
+        if payload is None:
+            return None
+
+        if isinstance(payload, dict):
+            if payload.get("status") == "error": # Early exit for errors from frontend
+                raise gr.Error(f"Recording failed on frontend: {payload.get('error', 'Unknown error')}")
+
+            # If 'video' field is a string, assume it's JSON and parse it.
+            if "video" in payload and isinstance(payload["video"], str):
+                try:
+                    video_json_string = payload["video"]
+                    if video_json_string.strip().startswith("{") and video_json_string.strip().endswith("}"):
+                        payload["video"] = json.loads(video_json_string)
+                    # If it's a string but not our expected JSON (e.g. 'null', or empty string, or simple path)
+                    # json.loads would fail or Pydantic validation later will catch it if structure is wrong.
+                    # For 'null' string, json.loads results in None for payload["video"].
+                    elif video_json_string.lower() == 'null':
+                        payload["video"] = None
+                    else:
+                        # This case implies a string that isn't a JSON object or 'null',
+                        # e.g. a direct file path string, which FileData might not directly accept
+                        # if it expects a dict. Pydantic will raise error later if type is incompatible.
+                        gr.Warning(f"Video data is a string but not a recognized JSON object or 'null': {video_json_string[:100]}")
+                        # To be safe, if it's not a JSON object string, we might want to error or handle specifically
+                        # For now, let Pydantic try to handle it or fail.
+
+                except json.JSONDecodeError:
+                    raise gr.Error(f"Invalid JSON for video data: {payload['video'][:100]}")
+
+            # --- Validations from here --- 
+            video_data = payload.get("video") # Use .get() for safety, as 'video' might be absent or None
+
+            if video_data is not None: # Only validate video_data if it exists
+                if not isinstance(video_data, dict):
+                    # This can happen if payload["video"] was a string like "some_path.webm" and not parsed to dict
+                    # Or if it was parsed to something unexpected.
+                    raise gr.Error(f"Video data is not a dictionary after processing: {type(video_data)}. Value: {str(video_data)[:100]}")
+                
+                if video_data.get("size", 0) == 0:
+                    gr.Warning("Received recording with zero size. This might be an empty recording or an issue with data capture.")
+                    # Depending on requirements, could raise gr.Error here.
+
+                max_size = 500 * 1024 * 1024  # 500MB
+                if video_data.get("size", 0) > max_size:
+                    raise gr.Error(f"Recording file too large ({video_data.get('size', 0)} bytes). Maximum allowed: {max_size} bytes.")
+            # If video_data is None (e.g. 'video': null was sent, or 'video' key missing), 
+            # ScreenRecorderData will have video=None, which is allowed by Optional[FileData].
+            
+            duration = payload.get("duration", 0)
+            if duration <= 0 and video_data is not None: # Only warn about duration if there's video data
+                gr.Warning("Recording duration is 0 or invalid. The recording might be corrupted.")
+            
+            try:
+                return ScreenRecorderData(**payload)
+            except Exception as e: # Catch Pydantic validation errors or other issues during model instantiation
+                # Log the payload for easier debugging if there's a Pydantic error
+                # Be careful with logging sensitive data in production.
+                # print(f"Error creating ScreenRecorderData. Payload: {payload}")
+                raise gr.Error(f"Error creating ScreenRecorderData from payload: {e}")
+
+        elif isinstance(payload, ScreenRecorderData): # If it's already the correct type
+            return payload
+        
+        gr.Warning(f"Unexpected payload format: {type(payload)}. Payload: {str(payload)[:200]}")
+        return None
+    
+    # def postprocess(self, value) -> Optional[dict]:
+    #     """Process outgoing data to frontend."""
+    #     if value is None:
+    #         return {"status": "stopped"}  # Ensure valid empty state
+
+    #     try:
+    #         if isinstance(value, ScreenRecorderData):
+    #             return value.model_dump()
+    #         elif isinstance(value, dict):
+    #             return value
+    #         return None
+    #     except Exception as e:
+    #         return {"status": "error", "error": str(e)}
+
+
+    def postprocess(self, value) -> Optional[dict]:
+        """Process outgoing data to frontend."""
+        print(f'value in postprocess: {value}')
+        if value is None:
+            return None
+            
+        try:
+            # If it's already a dict, return as is
+            if isinstance(value, dict):
+                return value
+                
+            # If it's a ScreenRecorderData object, convert to dict
+            if hasattr(value, 'model_dump'):
+                return value.model_dump()
+                
+            # Handle string values
+            if isinstance(value, str):
+                return {"video": {"path": value}}
+                
+            return None
+            
+        except Exception as e:
+            print(f'Error in postprocess: {e}')
+            return None
+
+
+        # try:
+        #     if isinstance(value, ScreenRecorderData):
+        #         # Ensure video data exists before sending
+        #         if not value.video:
+        #             return {"status": "error", "error": "No video recorded"}
+                
+        #         return {
+        #             "video": value.video,
+        #             "duration": value.duration,
+        #             "audio_enabled": value.audio_enabled,
+        #             "status": value.status
+        #         }
+            
+        #     # Handle raw dict format from frontend
+        #     if isinstance(value, dict):
+        #         return {
+        #             "video": FileData(**value.get("video", {})),
+        #             "duration": value.get("duration"),
+        #             "audio_enabled": value.get("audio_enabled", True),
+        #             "status": value.get("status", "stopped")
+        #         }
+        
+        # except Exception as e:
+        #     return {"status": "error", "error": str(e)}
+        
+        # return {"status": "stopped"}
+
+    def as_example(self, input_data):
+        """Handle example data display."""
+        if input_data is None:
+            return None
+        
+        if isinstance(input_data, (ScreenRecorderData, dict)):
+            return input_data
+        
+        # Convert simple video path to proper format
+        if isinstance(input_data, str):
+            return {
+                "video": {
+                    "path": input_data,
+                    "orig_name": os.path.basename(input_data),
+                    "size": 0
+                },
+                "duration": None,
+                "audio_enabled": self.audio_enabled,
+                "status": "stopped"
+            }
+        
+        return input_data
+
+    def update_status(self, status: Literal["recording", "stopped", "error"]):
+        """Update the internal status of the recorder."""
+        self._status = status
+        
+    def get_status(self) -> str:
+        """Get the current status of the recorder."""
+        return self._status

demo/app.py

@@ -0,0 +1,56 @@
+import gradio as gr
+from gradio_screenrecorder import ScreenRecorder
+
+def handle_recording(recording_data):
+    """Handle recorded video data"""
+    print(f'Received recording data: {recording_data}')
+    
+    if not recording_data or not recording_data.get('video'):
+        return None
+    
+    try:
+        video_info = recording_data['video']
+        # Return the video path that can be used by the Video component
+        return video_info.get('path')
+    except Exception as e:
+        print(f'Error processing recording: {e}')
+        return None
+
+
+css = """
+.screen-recorder-demo {
+    max-width: 800px;
+    margin: 0 auto;
+}
+"""
+
+with gr.Blocks(css=css, title="Screen Recorder Demo") as demo:
+    gr.HTML("""
+    <h1 style='text-align: center'>
+        Gradio Screen Recorder Component Demo
+    </h1>
+    """)
+    
+    with gr.Row():
+        with gr.Column():
+            recorder = ScreenRecorder(
+                audio_enabled=True,
+                webcam_overlay=True,  # Disabled for now
+                webcam_position="top-left",
+                recording_format="webm",
+                max_duration=60,
+                label="Screen Recorder"
+            )
+        
+        with gr.Column():
+            output_video = gr.Video(label="Recorded Video")
+    
+    # Event handler
+    recorder.change(
+        fn=handle_recording,
+        inputs=recorder,
+        outputs=output_video
+    )
+
+if __name__ == "__main__":
+    demo.launch()

demo/css.css

@@ -0,0 +1,157 @@
+html {
+	font-family: Inter;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	background: #fff;
+	color: #323232;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+:root {
+	--space: 1;
+	--vspace: calc(var(--space) * 1rem);
+	--vspace-0: calc(3 * var(--space) * 1rem);
+	--vspace-1: calc(2 * var(--space) * 1rem);
+	--vspace-2: calc(1.5 * var(--space) * 1rem);
+	--vspace-3: calc(0.5 * var(--space) * 1rem);
+}
+
+.app {
+	max-width: 748px !important;
+}
+
+.prose p {
+	margin: var(--vspace) 0;
+	line-height: var(--vspace * 2);
+	font-size: 1rem;
+}
+
+code {
+	font-family: "Inconsolata", sans-serif;
+	font-size: 16px;
+}
+
+h1,
+h1 code {
+	font-weight: 400;
+	line-height: calc(2.5 / var(--space) * var(--vspace));
+}
+
+h1 code {
+	background: none;
+	border: none;
+	letter-spacing: 0.05em;
+	padding-bottom: 5px;
+	position: relative;
+	padding: 0;
+}
+
+h2 {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h3,
+h3 code {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h4,
+h5,
+h6 {
+	margin: var(--vspace-3) 0 var(--vspace-3) 0;
+	line-height: var(--vspace);
+}
+
+.bigtitle,
+h1,
+h1 code {
+	font-size: calc(8px * 4.5);
+	word-break: break-word;
+}
+
+.title,
+h2,
+h2 code {
+	font-size: calc(8px * 3.375);
+	font-weight: lighter;
+	word-break: break-word;
+	border: none;
+	background: none;
+}
+
+.subheading1,
+h3,
+h3 code {
+	font-size: calc(8px * 1.8);
+	font-weight: 600;
+	border: none;
+	background: none;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+h2 code {
+	padding: 0;
+	position: relative;
+	letter-spacing: 0.05em;
+}
+
+blockquote {
+	font-size: calc(8px * 1.1667);
+	font-style: italic;
+	line-height: calc(1.1667 * var(--vspace));
+	margin: var(--vspace-2) var(--vspace-2);
+}
+
+.subheading2,
+h4 {
+	font-size: calc(8px * 1.4292);
+	text-transform: uppercase;
+	font-weight: 600;
+}
+
+.subheading3,
+h5 {
+	font-size: calc(8px * 1.2917);
+	line-height: calc(1.2917 * var(--vspace));
+
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+}
+
+h6 {
+	font-size: calc(8px * 1.1667);
+	font-size: 1.1667em;
+	font-weight: normal;
+	font-style: italic;
+	font-family: "le-monde-livre-classic-byol", serif !important;
+	letter-spacing: 0px !important;
+}
+
+#start .md > *:first-child {
+	margin-top: 0;
+}
+
+h2 + h3 {
+	margin-top: 0;
+}
+
+.md hr {
+	border: none;
+	border-top: 1px solid var(--block-border-color);
+	margin: var(--vspace-2) 0 var(--vspace-2) 0;
+}
+.prose ul {
+	margin: var(--vspace-2) 0 var(--vspace-1) 0;
+}
+
+.gap {
+	gap: 0;
+}

demo/requirements.txt

@@ -0,0 +1 @@
+gradio_screenrecorder

demo/space.py

@@ -0,0 +1,199 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'ScreenRecorder': {'description': 'Custom Gradio component for comprehensive screen recording functionality.', 'members': {'__init__': {'audio_enabled': {'type': 'bool', 'default': 'True', 'description': None}, 'webcam_overlay': {'type': 'bool', 'default': 'False', 'description': None}, 'webcam_position': {'type': '"top-left" | "top-right" | "bottom-left" | "bottom-right"', 'default': '"bottom-right"', 'description': None}, 'recording_format': {'type': 'str', 'default': '"webm"', 'description': None}, 'max_duration': {'type': 'typing.Optional[int][int, None]', 'default': 'None', 'description': None}, 'interactive': {'type': 'bool', 'default': 'True', 'description': None}}, 'postprocess': {}, 'preprocess': {'return': {'type': 'typing.Optional[\n    gradio_screenrecorder.screenrecorder.ScreenRecorderData\n][ScreenRecorderData, None]', 'description': None}, 'value': None}}, 'events': {'record_start': {'type': None, 'default': None, 'description': ''}, 'record_stop': {'type': None, 'default': None, 'description': ''}, 'stream_update': {'type': None, 'default': None, 'description': ''}, 'change': {'type': None, 'default': None, 'description': ''}}}, '__meta__': {'additional_interfaces': {'ScreenRecorderData': {'source': 'class ScreenRecorderData(GradioModel):\n    video: Optional[FileData] = None\n    duration: Optional[float] = None\n    audio_enabled: bool = True\n    status: Literal["recording", "stopped", "error"] = (\n        "stopped"\n    )\n\n    class Config:\n        json_encoders = {\n            FileData: lambda v: v.model_dump()\n            if v\n            else None\n        }'}}, 'user_fn_refs': {'ScreenRecorder': ['ScreenRecorderData']}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Default(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_screenrecorder`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+Screen Recorder Gradio Custom Component
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_screenrecorder
+```
+
+## Usage
+
+```python
+import gradio as gr
+from gradio_screenrecorder import ScreenRecorder
+
+def handle_recording(recording_data):
+    \"\"\"Handle recorded video data\"\"\"
+    print(f'Received recording data: {recording_data}')
+    
+    if not recording_data or not recording_data.get('video'):
+        return None
+    
+    try:
+        video_info = recording_data['video']
+        # Return the video path that can be used by the Video component
+        return video_info.get('path')
+    except Exception as e:
+        print(f'Error processing recording: {e}')
+        return None
+
+
+css = \"\"\"
+.screen-recorder-demo {
+    max-width: 800px;
+    margin: 0 auto;
+}
+\"\"\"
+
+with gr.Blocks(css=css, title="Screen Recorder Demo") as demo:
+    gr.HTML(\"\"\"
+    <h1 style='text-align: center'>
+        Gradio Screen Recorder Component Demo
+    </h1>
+    \"\"\")
+    
+    with gr.Row():
+        with gr.Column():
+            recorder = ScreenRecorder(
+                audio_enabled=True,
+                webcam_overlay=True,  # Disabled for now
+                webcam_position="top-left",
+                recording_format="webm",
+                max_duration=60,
+                label="Screen Recorder"
+            )
+        
+        with gr.Column():
+            output_video = gr.Video(label="Recorded Video")
+    
+    # Event handler
+    recorder.change(
+        fn=handle_recording,
+        inputs=recorder,
+        outputs=output_video
+    )
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `ScreenRecorder`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["ScreenRecorder"]["members"]["__init__"], linkify=['ScreenRecorderData'])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["ScreenRecorder"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+
+
+ ```python
+def predict(
+    value: typing.Optional[
+    gradio_screenrecorder.screenrecorder.ScreenRecorderData
+][ScreenRecorderData, None]
+) -> Unknown:
+    return value
+```
+""", elem_classes=["md-custom", "ScreenRecorder-user-fn"], header_links=True)
+
+
+
+
+    code_ScreenRecorderData = gr.Markdown("""
+## `ScreenRecorderData`
+```python
+class ScreenRecorderData(GradioModel):
+    video: Optional[FileData] = None
+    duration: Optional[float] = None
+    audio_enabled: bool = True
+    status: Literal["recording", "stopped", "error"] = (
+        "stopped"
+    )
+
+    class Config:
+        json_encoders = {
+            FileData: lambda v: v.model_dump()
+            if v
+            else None
+        }
+```""", elem_classes=["md-custom", "ScreenRecorderData"], header_links=True)
+
+    demo.load(None, js=r"""function() {
+    const refs = {
+            ScreenRecorderData: [], };
+    const user_fn_refs = {
+          ScreenRecorder: ['ScreenRecorderData'], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

frontend/Example.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+    export let value: any;
+    
+    function formatDuration(duration: number): string {
+        const minutes = Math.floor(duration / 60);
+        const seconds = Math.floor(duration % 60);
+        return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+    }
+</script>
+
+<div class="example-container">
+    {#if value && value.video}
+        <div class="video-thumbnail">
+            <video 
+                src={value.video.path} 
+                controls={false}
+                muted
+                style="width: 100%; height: 60px; object-fit: cover;"
+            >
+            </video>
+            <div class="overlay">
+                <span class="duration">
+                    {value.duration ? formatDuration(value.duration) : 'Recording'}
+                </span>
+                <span class="format">
+                    {value.video.orig_name?.split('.').pop()?.toUpperCase() || 'VIDEO'}
+                </span>
+            </div>
+        </div>
+    {:else}
+        <div class="placeholder">
+            📹 Screen Recording
+        </div>
+    {/if}
+</div>
+
+<style>
+    .example-container {
+        width: 100%;
+        height: 80px;
+        border-radius: 4px;
+        overflow: hidden;
+        position: relative;
+    }
+    
+    .video-thumbnail {
+        position: relative;
+        width: 100%;
+        height: 100%;
+    }
+    
+    .overlay {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: linear-gradient(transparent, rgba(0,0,0,0.7));
+        padding: 4px 8px;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+    }
+    
+    .duration, .format {
+        color: white;
+        font-size: 10px;
+        font-weight: bold;
+    }
+    
+    .placeholder {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        background: #f0f0f0;
+        color: #666;
+        font-size: 12px;
+    }
+</style>

frontend/Index.svelte

@@ -0,0 +1,727 @@
+<script lang="ts">
+    import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+    import { Block } from '@gradio/atoms';
+    import { StatusTracker } from '@gradio/statustracker';
+    import type { LoadingStatus } from "@gradio/statustracker";
+    import type { Gradio } from "@gradio/utils";
+    import fixWebmDuration from 'fix-webm-duration';
+    
+    // Type definitions
+    interface MediaRecorderOptions {
+        mimeType?: string;
+        audioBitsPerSecond?: number;
+        videoBitsPerSecond?: number;
+        bitsPerSecond?: number;
+    }
+    
+    interface MediaTrackConstraints {
+        displaySurface?: 'browser' | 'monitor' | 'window';
+        cursor?: 'always' | 'motion' | 'never';
+    }
+
+    // Type definitions
+    interface RecordingData {
+        video: string;
+        duration: number;
+        audio_enabled?: boolean;
+        status?: string;
+        orig_name?: string;
+        size?: number | null;
+        data?: string; // Base64 encoded data for Gradio
+        name?: string;  // Alias for orig_name for Gradio compatibility
+        is_file?: boolean;
+        type?: string;  // MIME type of the recording
+    }
+
+    interface Position {
+        x: number;
+        y: number;
+    }
+
+    // Event types for the component
+    type EventMap = {
+        'error': { message: string; error: string };
+        'recording-started': void;
+        'recording-stopped': RecordingData;
+        'record_stop': RecordingData;
+        'change': RecordingData;
+        'webcam-error': { message: string; error: string };
+    };
+
+    // Component props with proper types and defaults
+    export let gradio: Gradio<any>;
+    export let value: Partial<RecordingData> | null = null;
+    export const elem_id = ''; // Marked as const since it's not modified
+    export let elem_classes: string[] = [];
+    export let scale: number | null = null;
+    export let min_width: number | null = null;
+    export let visible = true;
+    export let interactive = true;
+    export let loading_status: LoadingStatus | null = null;
+    export let audio_enabled = false;
+    export let webcam_overlay = false;
+    export let webcam_position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' = 'bottom-right';
+    export let recording_format: 'webm' | 'mp4' | 'gif' = 'webm';
+    export let max_duration: number | null = null;
+    
+    // Computed styles for the container
+    let containerStyle = '';
+    
+    // Component methods interface
+    interface ComponentMethods {
+        startRecording: () => Promise<void>;
+        stopRecording: () => void;
+        togglePause: () => void;
+        cleanup: () => void;
+    }
+    
+    // Component state with explicit types and initial values
+    let isPaused = false;
+    let isRecording = false;
+    let recordingTime = 0;
+    let recordingTimer: number | null = null;
+    let recordedChunks: Blob[] = [];
+    
+    // Media streams and elements
+    let screenStream: MediaStream | null = null;
+    let webcamStream: MediaStream | null = null;
+    let combinedStream: MediaStream | null = null;
+    let canvas: HTMLCanvasElement | null = null;
+    let ctx: CanvasRenderingContext2D | null = null;
+    let animationFrameId: number | null = null;
+    let previewVideo: HTMLVideoElement | null = null;
+    let webcamVideo: HTMLVideoElement | null = null;
+    let recordingStartTime = 0;
+    let mediaRecorder: MediaRecorder | null = null;
+    
+    // Internal video elements
+    let webcamVideoInternal: HTMLVideoElement | null = null;
+    let screenVideoInternal: HTMLVideoElement | null = null;
+    
+    // Bind canvas element
+    function bindCanvas(node: HTMLCanvasElement) {
+        canvas = node;
+        if (canvas) {
+            const context = canvas.getContext('2d', { willReadFrequently: true });
+            if (context) {
+                ctx = context;
+                // Set canvas dimensions with null checks
+                const width = canvas.offsetWidth;
+                const height = canvas.offsetHeight;
+                if (width && height) {
+                    canvas.width = width;
+                    canvas.height = height;
+                }
+            }
+        }
+        return {
+            destroy() {
+                canvas = null;
+                ctx = null;
+            }
+        };
+    }
+    
+    // Canvas binding is now handled by the bindCanvas function
+    
+    // Configuration
+    const webcam_size = 200;
+    const webcam_border = 10;
+    const webcam_radius = '50%';
+    
+    // Ensure max_duration has a default value if null
+    $: effectiveMaxDuration = max_duration ?? 0;
+    
+    // Computed styles for the container
+    $: containerStyle = [
+        scale !== null ? `--scale: ${scale};` : '',
+        min_width !== null ? `min-width: ${min_width}px;` : ''
+    ].filter(Boolean).join(' ');
+    
+    onDestroy(() => {
+        if (isRecording) {
+            componentMethods.stopRecording();
+        }
+        componentMethods.cleanup();
+        if (animationFrameId) {
+            cancelAnimationFrame(animationFrameId);
+            animationFrameId = null;
+        }
+    });
+    
+    // Component state and props are already declared above
+    
+    // Event dispatcher with proper typing
+    const dispatch = createEventDispatcher<EventMap>();
+    
+    // Type guard for error handling
+    function isErrorWithMessage(error: unknown): error is Error {
+        return error instanceof Error;
+    }
+
+    // Component methods implementation
+    const componentMethods: ComponentMethods = {
+        startRecording: async (): Promise<void> => {
+            if (isRecording) return;
+            isRecording = true;
+            recordedChunks = [];
+            recordingTime = 0;
+            
+            try {
+                // Composite screen and optional webcam overlay via hidden canvas
+                const screenStreamCapture = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: false });
+                screenStream = screenStreamCapture;
+                // Assign to hidden video for composition
+                if (screenVideoInternal) {
+                    screenVideoInternal.srcObject = screenStreamCapture;
+                    await screenVideoInternal.play().catch(() => {});
+                }
+                let captureStream: MediaStream;
+                if (webcam_overlay && webcamVideoInternal && canvas && ctx) {
+                    try {
+                        webcamStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
+                        webcamVideoInternal.srcObject = webcamStream;
+                        await webcamVideoInternal.play().catch(() => {});
+                        // Resize canvas to match screen video
+                        canvas.width = screenVideoInternal!.videoWidth;
+                        canvas.height = screenVideoInternal!.videoHeight;
+                        const overlaySize = Math.min(canvas.width, canvas.height) / 4;
+                        const posMap: Record<string, [number, number]> = {
+                            'top-left': [10, 10],
+                            'top-right': [canvas.width - overlaySize - 10, 10],
+                            'bottom-left': [10, canvas.height - overlaySize - 10],
+                            'bottom-right': [canvas.width - overlaySize - 10, canvas.height - overlaySize - 10]
+                        };
+                        const [ox, oy] = posMap[webcam_position];
+                        function draw() {
+                            ctx!.drawImage(screenVideoInternal!, 0, 0, canvas.width, canvas.height);
+                            ctx!.drawImage(webcamVideoInternal!, ox, oy, overlaySize, overlaySize);
+                            animationFrameId = requestAnimationFrame(draw);
+                        }
+                        draw();
+                        const canvasStream = canvas.captureStream(30);
+                        const audioTracks = audio_enabled
+                            ? (await navigator.mediaDevices.getUserMedia({ audio: true })).getAudioTracks()
+                            : screenStreamCapture.getAudioTracks();
+                        combinedStream = new MediaStream([...canvasStream.getVideoTracks(), ...audioTracks]);
+                        captureStream = combinedStream;
+                    } catch (err) {
+                        console.warn('Webcam overlay failed, falling back to screen only', err);
+                        captureStream = screenStreamCapture;
+                    }
+                } else {
+                    // No overlay: combine audio if enabled with screen
+                    const audioTracks = audio_enabled
+                        ? (await navigator.mediaDevices.getUserMedia({ audio: true })).getAudioTracks()
+                        : screenStreamCapture.getAudioTracks();
+                    combinedStream = new MediaStream([...screenStreamCapture.getVideoTracks(), ...audioTracks]);
+                    captureStream = combinedStream;
+                }
+                
+                // Handle track ended event
+                screenStreamCapture.getVideoTracks()[0].onended = () => {
+                    if (isRecording) {
+                        componentMethods.stopRecording();
+                    }
+                };
+                
+                // Start recording
+                const options: MediaRecorderOptions = {
+                    mimeType: recording_format === 'webm' ? 'video/webm;codecs=vp9' : 'video/mp4'
+                };
+                
+                mediaRecorder = new MediaRecorder(captureStream, options);
+                mediaRecorder.ondataavailable = handleDataAvailable;
+                mediaRecorder.onstop = handleRecordingStop;
+                mediaRecorder.start();
+                
+                recordingStartTime = Date.now();
+                updateRecordingTime();
+                
+                dispatch('recording-started');
+            } catch (error) {
+                isRecording = false;
+                if (isErrorWithMessage(error)) {
+                    dispatch('error', { 
+                        message: 'Failed to start recording', 
+                        error: error.message
+                    });
+                }
+            }
+        },
+        
+        stopRecording: (): void => {
+            if (!isRecording || !mediaRecorder) return;
+            
+            try {
+                mediaRecorder.stop();
+                isRecording = false;
+                
+                // Stop all tracks
+                [screenStream, webcamStream, combinedStream].forEach(stream => {
+                    if (stream) {
+                        stream.getTracks().forEach(track => track.stop());
+                    }
+                });
+                
+                if (recordingTimer) {
+                    clearTimeout(recordingTimer);
+                    recordingTimer = null;
+                }
+                
+                const recordingData: RecordingData = {
+                    video: '',
+                    duration: recordingTime / 1000,
+                    audio_enabled: audio_enabled,
+                    status: 'completed'
+                };
+                
+                dispatch('recording-stopped', recordingData);
+                dispatch('record_stop', recordingData);
+                dispatch('change', recordingData);
+            } catch (error) {
+                isRecording = false;
+                if (isErrorWithMessage(error)) {
+                    dispatch('error', { 
+                        message: 'Error stopping recording', 
+                        error: error.message
+                    });
+                }
+            }
+        },
+        
+        togglePause: (): void => {
+            if (!mediaRecorder) return;
+            
+            isPaused = !isPaused;
+            
+            if (isPaused) {
+                mediaRecorder.pause();
+                if (recordingTimer) {
+                    clearTimeout(recordingTimer);
+                    recordingTimer = null;
+                }
+            } else {
+                mediaRecorder.resume();
+                updateRecordingTime();
+            }
+            if (isPaused) {
+                // Pause logic
+            } else {
+                // Resume logic
+            }
+        },
+        
+        cleanup: (): void => {
+            // Stop all media streams
+            [screenStream, webcamStream, combinedStream].forEach(stream => {
+                if (stream) {
+                    stream.getTracks().forEach(track => track.stop());
+                }
+            });
+            
+            // Clear media recorder
+            if (mediaRecorder) {
+                if (mediaRecorder.state !== 'inactive') {
+                    mediaRecorder.stop();
+                }
+                mediaRecorder = null;
+            }
+            
+            // Clear canvas
+            if (ctx) {
+                ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+            }
+            
+            // Reset state
+            isRecording = false;
+            isPaused = false;
+            recordingTime = 0;
+            recordedChunks = [];
+            
+            // Clear timers
+            if (recordingTimer) {
+                clearInterval(recordingTimer);
+                recordingTimer = null;
+            }
+            
+            if (animationFrameId) {
+                cancelAnimationFrame(animationFrameId);
+                animationFrameId = null;
+            }
+        }
+    };
+
+    // Handle data available event
+    function handleDataAvailable(event: BlobEvent): void {
+        if (event.data && event.data.size > 0) {
+            recordedChunks.push(event.data);
+        }
+    }
+    
+    // Handle recording stop
+    function handleRecordingStop(): void {
+        if (recordedChunks.length === 0) {
+            console.warn('No recording data available');
+            return;
+        }
+        
+        const mimeType = recording_format === 'webm' ? 'video/webm' : 'video/mp4';
+        const blob = new Blob(recordedChunks, { type: mimeType });
+        const url = URL.createObjectURL(blob);
+        
+        console.log('Recording stopped. Blob size:', blob.size, 'bytes');
+        
+        // Create a file reader to read the blob as base64
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const base64data = e.target?.result as string;
+            // Extract the base64 data (remove the data URL prefix)
+            const base64Content = base64data.split(',')[1];
+            const fileName = `recording_${Date.now()}.${recording_format}`;
+            
+            // Dispatch event with recording data
+            const recordingData: RecordingData = {
+                video: url,
+                duration: recordingTime,
+                audio_enabled: audio_enabled,
+                status: 'completed',
+                size: blob.size > 0 ? blob.size : undefined,
+                orig_name: fileName,
+                name: fileName,  // Alias for Gradio compatibility
+                is_file: true,
+                type: mimeType,
+                data: base64Content
+            };
+            
+            console.log('Dispatching recording-stopped event');
+            dispatch('recording-stopped', recordingData);
+            dispatch('record_stop', recordingData);
+            dispatch('change', recordingData);
+            
+            // Update the value prop to trigger re-render
+            value = { ...value, ...recordingData };
+        };
+        
+        reader.onerror = (error) => {
+            console.error('Error reading blob:', error);
+            dispatch('error', { 
+                message: 'Failed to process recording', 
+                error: 'Could not read recording data' 
+            });
+        };
+        
+        // Read the blob as data URL
+        reader.readAsDataURL(blob);
+    }
+    
+    // Update recording time
+    function updateRecordingTime(): void {
+        if (!isRecording) return;
+        
+        recordingTime = Math.floor((Date.now() - recordingStartTime) / 1000);
+        
+        // Check if max duration has been reached
+        if (max_duration !== null && max_duration > 0 && recordingTime >= max_duration) {
+            console.log('Max duration reached, stopping');
+            componentMethods.stopRecording();
+            return;
+        }
+        
+        // Schedule the next update
+        recordingTimer = window.setTimeout(updateRecordingTime, 1000);
+    }
+    
+    function stopTimer(): void {
+        if (recordingTimer) {
+            clearTimeout(recordingTimer);
+            recordingTimer = null;
+        }
+    }
+    
+    // Format time as MM:SS
+    function formatTime(seconds: number): string {
+        const mins = Math.floor(seconds / 60);
+        const secs = Math.floor(seconds % 60);
+        return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+    }
+    
+    // Format file size in human-readable format
+    function formatFileSize(bytes: number | string | null | undefined): string {
+        if (bytes === null || bytes === undefined) return '0 B';
+        const numBytes = Number(bytes);
+        if (isNaN(numBytes) || numBytes === 0) return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+        const i = Math.floor(Math.log(numBytes) / Math.log(k));
+        return parseFloat((numBytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    }
+</script>
+
+<div class="screen-recorder-container {!visible ? 'invisible' : ''} {elem_classes.join(' ')}" style="{containerStyle}">
+    {#if loading_status}
+        <StatusTracker
+            autoscroll={gradio.autoscroll}
+            i18n={gradio.i18n}
+            {...loading_status}
+        />
+    {/if}
+
+    <div class="screen-recorder">
+        <div class="controls">
+            {#if !isRecording}
+                <button 
+                    class="record-btn start" 
+                    on:click={componentMethods.startRecording}
+                    disabled={!interactive}
+                >
+                    <span class="recording-icon">●</span> Start Recording
+                </button>
+            {:else}
+                <button 
+                    class="record-btn stop" 
+                    on:click={componentMethods.stopRecording}
+                >
+                    <span class="stop-icon">■</span> Stop Recording
+                </button>
+                <span class="recording-time">
+                    {formatTime(recordingTime)}
+                </span>
+                {#if max_duration}
+                    <span class="max-duration">/ {formatTime(max_duration)}</span>
+                {/if}
+            {/if}
+        </div>
+        
+        <!-- Live Preview - Always show when recording -->
+        {#if isRecording}
+            <div class="preview-container">
+                <video 
+                    bind:this={previewVideo}
+                    class="preview-video"
+                    autoplay
+                    muted
+                    playsinline
+                    aria-label="Live preview"
+                    on:loadedmetadata={() => {
+                        if (previewVideo) {
+                            previewVideo.play().catch(console.warn);
+                        }
+                    }}
+                >
+                    <track kind="captions" />
+                </video>
+                {#if webcam_overlay}
+                    <video 
+                        bind:this={webcamVideo}
+                        class="webcam-overlay {webcam_position}"
+                        style="width: 200px; height: 200px;"
+                        autoplay
+                        muted
+                        playsinline
+                        aria-label="Webcam overlay"
+                    >
+                        <track kind="captions" />
+                    </video>
+                {/if}
+                <div class="recording-indicator">
+                    <span class="pulse">●</span> RECORDING
+                </div>
+            </div>
+        {/if}
+
+            {#if value?.video}
+                <div class="recording-preview" style="position: relative;">
+                    {#if audio_enabled}
+                        <div class="speaker-overlay">🔊</div>
+                    {/if}
+                    <video 
+                        src={value.video}
+                        controls
+                        class="preview-video"
+                        aria-label="Recording preview"
+                        on:loadedmetadata
+                        on:loadeddata
+                        on:error={(e) => console.error('Video error:', e)}
+                    >
+                        <track kind="captions" />
+                    </video>
+                    <div class="recording-info">
+                        <div>Duration: {value.duration ? value.duration.toFixed(1) : '0.0'}s</div>
+                        {#if value.size}
+                            <div>Size: {formatFileSize(value.size)}</div>
+                        {/if}
+                    </div>
+                </div>
+            {/if}
+
+        <!-- Configuration Display -->
+        <div class="config-info">
+            <span>Audio: {audio_enabled ? '🔊' : '🔇'}</span>
+            <span>Format: {recording_format.toUpperCase()}</span>
+            {#if max_duration}
+                <span>Max: {formatTime(max_duration)}</span>
+            {/if}
+        </div>
+        
+        <!-- Debug info -->
+        {#if value}
+            <div class="debug-info">
+                <small>Last recording: {value.orig_name} ({Math.round(value.size / 1024)}KB)</small>
+            </div>
+        {/if}
+    </div>
+    <video bind:this={screenVideoInternal} hidden muted playsinline style="display:none"></video>
+    {#if webcam_overlay}
+        <video bind:this={webcamVideoInternal} hidden muted playsinline style="display:none"></video>
+    {/if}
+    <canvas bind:this={canvas} use:bindCanvas hidden style="display:none"></canvas>
+</div>
+
+<style>
+    .screen-recorder-container {
+        display: block;
+        width: 100%;
+        box-sizing: border-box;
+    }
+    
+    .screen-recorder-container.invisible {
+        display: none;
+    }
+    
+    .screen-recorder {
+        border: 2px solid #e0e0e0;
+        border-radius: 8px;
+        padding: 16px;
+        background: #f9f9f9;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    }
+    
+    .controls {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 12px;
+        flex-wrap: wrap;
+    }
+    
+    .record-btn {
+        padding: 10px 20px;
+        border: none;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+    
+    .record-btn.start {
+        background: #4CAF50;
+        color: white;
+    }
+    
+    .record-btn.start:hover {
+        background: #45a049;
+    }
+    
+    .record-btn.stop {
+        background: #f44336;
+        color: white;
+    }
+    
+    .record-btn.stop:hover {
+        background: #da190b;
+    }
+    
+    .record-btn:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+    
+    .recording-time {
+        font-family: 'Courier New', monospace;
+        font-size: 18px;
+        font-weight: bold;
+        color: #f44336;
+    }
+    
+    .max-duration {
+        font-family: 'Courier New', monospace;
+        font-size: 14px;
+        color: #666;
+    }
+    
+
+    .preview-container {
+        position: relative;
+        margin: 12px 0;
+        border-radius: 6px;
+        overflow: hidden;
+        background: black;
+        min-height: 200px;
+    }
+    
+    .preview-video {
+        width: 100%;
+        max-height: 400px;
+        display: block;
+        object-fit: contain;
+    }
+
+    
+    .recording-indicator {
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        background: rgba(244, 67, 54, 0.9);
+        color: white;
+        padding: 6px 12px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: bold;
+        animation: pulse 1s infinite;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+    }
+    
+    @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.7; }
+    }
+    
+    .config-info {
+        display: flex;
+        gap: 8px;
+        font-size: 12px;
+        color: #666;
+        margin-top: 8px;
+        flex-wrap: wrap;
+    }
+    
+    .config-info span {
+        padding: 4px 8px;
+        background: #e8e8e8;
+        border-radius: 4px;
+        border: 1px solid #ddd;
+    }
+    
+    .debug-info {
+        margin-top: 8px;
+        padding: 8px;
+        background: #e8f5e8;
+        border-radius: 4px;
+        border: 1px solid #c8e6c8;
+    }
+    
+    .speaker-overlay {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        background: rgba(0,0,0,0.5);
+        color: white;
+        padding: 4px;
+        border-radius: 4px;
+        font-size: 14px;
+        pointer-events: none;
+    }
+</style>

frontend/gradio.config.js

@@ -0,0 +1,9 @@
+export default {
+  plugins: [],
+  svelte: {
+    preprocess: [],
+  },
+  build: {
+    target: "modules",
+  },
+};

frontend/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "gradio_screenrecorder",
+  "version": "0.3.21",
+  "description": "Gradio Screen Recorder Component",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "main_changeset": true,
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "preview": "vite preview"
+  },
+  "exports": {
+    ".": {
+      "gradio": "./Index.svelte",
+      "svelte": "./dist/Index.svelte",
+      "types": "./dist/Index.svelte.d.ts"
+    },
+    "./example": {
+      "gradio": "./Example.svelte",
+      "svelte": "./dist/Example.svelte",
+      "types": "./dist/Example.svelte.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@gradio/atoms": "0.16.1",
+    "@gradio/icons": "0.12.0",
+    "@gradio/statustracker": "0.10.11",
+    "@gradio/utils": "0.10.2",
+    "fix-webm-duration": "^1.0.6",
+    "svelte": "^4.2.7"
+  },
+  "devDependencies": {
+    "@gradio/preview": "0.13.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@tsconfig/svelte": "^5.0.4",
+    "svelte-preprocess": "^6.0.3",
+    "typescript": "^5.8.3",
+    "vite": "^5.0.0",
+    "vite-plugin-svelte": "^3.0.0"
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/your-username/your-repo.git",
+    "directory": "screenrecorder"
+  },
+  "files": [
+    "dist"
+  ]
+}

frontend/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "jsx": "preserve",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "types": ["svelte"],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["**/*.d.ts", "**/*.ts", "**/*.js", "**/*.svelte"],
+  "exclude": ["node_modules", "**/node_modules/*"]
+}

frontend/types.d.ts

@@ -0,0 +1,23 @@
+// Extend the Window interface
+declare global {
+    interface Window {
+        requestAnimationFrame(callback: FrameRequestCallback): number;
+        cancelAnimationFrame(handle: number): void;
+        MediaRecorder: typeof MediaRecorder;
+    }
+    
+    interface MediaRecorderOptions {
+        mimeType?: string;
+        audioBitsPerSecond?: number;
+        videoBitsPerSecond?: number;
+        bitsPerSecond?: number;
+    }
+    
+    interface MediaTrackConstraints {
+        displaySurface?: 'browser' | 'monitor' | 'window';
+        cursor?: 'always' | 'motion' | 'never';
+    }
+}
+
+// Export the types
+export {};

frontend/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+
+export default defineConfig({
+  plugins: [svelte()],
+});

manifest.json

@@ -0,0 +1,7 @@
+{
+    "name": "Screen Recorder Component",
+    "short_name": "ScreenRecorder",
+    "description": "Gradio Screen Recording Component",
+    "start_url": "/",
+    "display": "standalone"
+}

pyproject.toml

@@ -0,0 +1,51 @@
+[build-system]
+requires = [
+  "hatchling",
+  "hatch-requirements-txt",
+  "hatch-fancy-pypi-readme>=22.5.0",
+]
+build-backend = "hatchling.build"
+
+[project]
+name = "gradio_screenrecorder"
+version = "0.0.1"
+description = "Screen Recorder Gradio Custom Component"
+readme = "README.md"
+license = "apache-2.0"
+requires-python = ">=3.10"
+authors = [{ name = "YOUR NAME", email = "[email protected]" }]
+keywords = ["gradio-custom-component", "custom-component-track", "gradio", "screen-recorder"]
+# Add dependencies here
+dependencies = ["gradio>=4.0,<6.0"]
+classifiers = [
+  'Development Status :: 3 - Alpha',
+  'Operating System :: OS Independent',
+  'Programming Language :: Python :: 3',
+  'Programming Language :: Python :: 3 :: Only',
+  'Programming Language :: Python :: 3.8',
+  'Programming Language :: Python :: 3.9',
+  'Programming Language :: Python :: 3.10',
+  'Programming Language :: Python :: 3.11',
+  'Topic :: Scientific/Engineering',
+  'Topic :: Scientific/Engineering :: Artificial Intelligence',
+  'Topic :: Scientific/Engineering :: Visualization',
+]
+
+# The repository and space URLs are optional, but recommended.
+# Adding a repository URL will create a badge in the auto-generated README that links to the repository.
+# Adding a space URL will create a badge in the auto-generated README that links to the space.
+# This will make it easy for people to find your deployed demo or source code when they
+# encounter your project in the wild.
+
+# [project.urls]
+# repository = "your github repository"
+# space = "your space url"
+
+[project.optional-dependencies]
+dev = ["build", "twine"]
+
+[tool.hatch.build]
+artifacts = ["/backend/gradio_screenrecorder/templates", "*.pyi"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_screenrecorder"]

requirements.txt

@@ -1,8 +1,6 @@
-gradio>=5.0.0
-fastrtc[vad,tts]>=0.0.26
-google-genai>=1.19.0
-numpy>=1.24.0
-opencv-python>=4.8.0
-Pillow>=11.2.1
-websockets>=13.0
-uvloop
+gradio>=4,<6
+google-generativeai>=0.3.0
+fastrtc>=0.1.5
+opencv-python-headless>=4.10.0
+numpy>=1.24
+-e ./gradio_screenrecorder/src

src/.gitignore

@@ -0,0 +1,14 @@
+.eggs/
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+.mypycache
+.ruff_cache
+node_modules
+backend/**/templates/
+
+.venv

src/.python-version

@@ -0,0 +1 @@
+3.13

src/README.md

@@ -0,0 +1,227 @@
+---
+tags: [custom-component-track, gradio-custom-component, screen-recorder, PIP, picture-in-picture]
+title: gradio_screenrecorder
+short_description: Screen Recorder + Picture in Picture Gradio Custom Component
+colorFrom: blue
+colorTo: yellow
+sdk: gradio
+pinned: false
+app_file: space.py
+---
+
+# `gradio_screenrecorder`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+
+Screen Recorder Gradio Custom Component
+
+## Installation
+
+```bash
+pip install gradio_screenrecorder
+```
+
+## Usage
+
+```python
+import gradio as gr
+from gradio_screenrecorder import ScreenRecorder
+
+def handle_recording(recording_data):
+    """Handle recorded video data"""
+    print(f'Received recording data: {recording_data}')
+    
+    if not recording_data or not recording_data.get('video'):
+        return None
+    
+    try:
+        video_info = recording_data['video']
+        # Return the video path that can be used by the Video component
+        return video_info.get('path')
+    except Exception as e:
+        print(f'Error processing recording: {e}')
+        return None
+
+
+css = """
+.screen-recorder-demo {
+    max-width: 800px;
+    margin: 0 auto;
+}
+"""
+
+with gr.Blocks(css=css, title="Screen Recorder Demo") as demo:
+    gr.HTML("""
+    <h1 style='text-align: center'>
+        Gradio Screen Recorder Component Demo
+    </h1>
+    """)
+    
+    with gr.Row():
+        with gr.Column():
+            recorder = ScreenRecorder(
+                audio_enabled=True,
+                webcam_overlay=True,  # Disabled for now
+                webcam_position="top-left",
+                recording_format="webm",
+                max_duration=60,
+                label="Screen Recorder"
+            )
+        
+        with gr.Column():
+            output_video = gr.Video(label="Recorded Video")
+    
+    # Event handler
+    recorder.change(
+        fn=handle_recording,
+        inputs=recorder,
+        outputs=output_video
+    )
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+
+## `ScreenRecorder`
+
+### Initialization
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>audio_enabled</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>webcam_overlay</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>webcam_position</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+"top-left" | "top-right" | "bottom-left" | "bottom-right"
+```
+
+</td>
+<td align="left"><code>"bottom-right"</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>recording_format</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str
+```
+
+</td>
+<td align="left"><code>"webm"</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>max_duration</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[int][int, None]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>interactive</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `record_start` |  |
+| `record_stop` |  |
+| `stream_update` |  |
+| `change` |  |
+
+
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+
+
+ ```python
+ def predict(
+     value: typing.Optional[
+    gradio_screenrecorder.screenrecorder.ScreenRecorderData
+][ScreenRecorderData, None]
+ ) -> Unknown:
+     return value
+ ```
+ 
+
+## `ScreenRecorderData`
+```python
+class ScreenRecorderData(GradioModel):
+    video: Optional[FileData] = None
+    duration: Optional[float] = None
+    audio_enabled: bool = True
+    status: Literal["recording", "stopped", "error"] = (
+        "stopped"
+    )
+
+    class Config:
+        json_encoders = {
+            FileData: lambda v: v.model_dump()
+            if v
+            else None
+        }
+```

src/backend/gradio_screenrecorder/__init__.py

@@ -0,0 +1,4 @@
+
+from .screenrecorder import ScreenRecorder
+
+__all__ = ['ScreenRecorder']

src/backend/gradio_screenrecorder/screenrecorder.py

@@ -0,0 +1,272 @@
+import gradio as gr
+from gradio.components.base import Component
+from gradio.data_classes import FileData, GradioModel
+from typing import Optional, Literal, Any
+import tempfile
+import os
+import json
+
+class ScreenRecorderData(GradioModel):
+    video: Optional[FileData] = None
+    duration: Optional[float] = None
+    audio_enabled: bool = True
+    status: Literal["recording", "stopped", "error"] = "stopped"
+
+    class Config:
+        json_encoders = {
+            FileData: lambda v: v.model_dump() if v else None
+        }
+
+
+class ScreenRecorder(Component):
+    """
+    Custom Gradio component for comprehensive screen recording functionality.
+    """
+    
+    data_model = ScreenRecorderData
+    
+    EVENTS = [
+        "record_start",
+        "record_stop", 
+        "stream_update",
+        "change"
+    ]
+    
+    def __init__(
+        self,
+        value=None,
+        audio_enabled: bool = True,
+        webcam_overlay: bool = False,
+        webcam_position: Literal["top-left", "top-right", "bottom-left", "bottom-right"] = "bottom-right",
+        recording_format: str = "webm",
+        max_duration: Optional[int] = None,
+        interactive: bool = True,
+        **kwargs
+    ):
+        self.audio_enabled = audio_enabled
+        self.webcam_overlay = webcam_overlay
+        self.webcam_position = webcam_position
+        self.recording_format = recording_format
+        self.max_duration = max_duration
+        self._status = "stopped"
+        
+        super().__init__(
+            value=value,
+            interactive=interactive,
+            **kwargs
+        )
+    
+    def example_payload(self) -> dict:
+        """
+        The example inputs for this component for API usage. Must be JSON-serializable.
+        """
+        return {
+            "video": {
+                "path": "https://sample-videos.com/zip/10/mp4/SampleVideo_360x240_1mb.mp4",
+                "orig_name": "example_recording.webm",
+                "size": 1024000
+            },
+            "duration": 30.5,
+            "audio_enabled": True,
+            "status": "stopped"
+        }
+    
+    def example_value(self) -> ScreenRecorderData:
+        """
+        An example value for this component for the default app.
+        """
+        return ScreenRecorderData(
+            video=FileData(
+                path="https://sample-videos.com/zip/10/mp4/SampleVideo_360x240_1mb.mp4",
+                orig_name="example_recording.webm", 
+                size=1024000
+            ),
+            duration=30.5,
+            audio_enabled=True,
+            status="stopped"
+        )
+    
+    def flag(self, x, flag_dir: str = "") -> str:
+        """
+        Write the component's value to a format for flagging (CSV storage).
+        """
+        if x is None:
+            return ""
+        
+        if isinstance(x, ScreenRecorderData) and x.video:
+            return f"Recording: {x.video.orig_name} ({x.duration}s) - Status: {x.status}"
+        
+        if isinstance(x, dict) and "video" in x:
+            duration = x.get("duration", "unknown")
+            status = x.get("status", "unknown")
+            video_name = x["video"].get("orig_name", "unknown") if x["video"] else "none"
+            return f"Recording: {video_name} ({duration}s) - Status: {status}"
+        
+        return str(x)
+    
+    def preprocess(self, payload) -> Optional[ScreenRecorderData]:
+        """Process incoming recording data from frontend."""
+        if payload is None:
+            return None
+
+        if isinstance(payload, dict):
+            if payload.get("status") == "error": # Early exit for errors from frontend
+                raise gr.Error(f"Recording failed on frontend: {payload.get('error', 'Unknown error')}")
+
+            # If 'video' field is a string, assume it's JSON and parse it.
+            if "video" in payload and isinstance(payload["video"], str):
+                try:
+                    video_json_string = payload["video"]
+                    if video_json_string.strip().startswith("{") and video_json_string.strip().endswith("}"):
+                        payload["video"] = json.loads(video_json_string)
+                    # If it's a string but not our expected JSON (e.g. 'null', or empty string, or simple path)
+                    # json.loads would fail or Pydantic validation later will catch it if structure is wrong.
+                    # For 'null' string, json.loads results in None for payload["video"].
+                    elif video_json_string.lower() == 'null':
+                        payload["video"] = None
+                    else:
+                        # This case implies a string that isn't a JSON object or 'null',
+                        # e.g. a direct file path string, which FileData might not directly accept
+                        # if it expects a dict. Pydantic will raise error later if type is incompatible.
+                        gr.Warning(f"Video data is a string but not a recognized JSON object or 'null': {video_json_string[:100]}")
+                        # To be safe, if it's not a JSON object string, we might want to error or handle specifically
+                        # For now, let Pydantic try to handle it or fail.
+
+                except json.JSONDecodeError:
+                    raise gr.Error(f"Invalid JSON for video data: {payload['video'][:100]}")
+
+            # --- Validations from here --- 
+            video_data = payload.get("video") # Use .get() for safety, as 'video' might be absent or None
+
+            if video_data is not None: # Only validate video_data if it exists
+                if not isinstance(video_data, dict):
+                    # This can happen if payload["video"] was a string like "some_path.webm" and not parsed to dict
+                    # Or if it was parsed to something unexpected.
+                    raise gr.Error(f"Video data is not a dictionary after processing: {type(video_data)}. Value: {str(video_data)[:100]}")
+                
+                if video_data.get("size", 0) == 0:
+                    gr.Warning("Received recording with zero size. This might be an empty recording or an issue with data capture.")
+                    # Depending on requirements, could raise gr.Error here.
+
+                max_size = 500 * 1024 * 1024  # 500MB
+                if video_data.get("size", 0) > max_size:
+                    raise gr.Error(f"Recording file too large ({video_data.get('size', 0)} bytes). Maximum allowed: {max_size} bytes.")
+            # If video_data is None (e.g. 'video': null was sent, or 'video' key missing), 
+            # ScreenRecorderData will have video=None, which is allowed by Optional[FileData].
+            
+            duration = payload.get("duration", 0)
+            if duration <= 0 and video_data is not None: # Only warn about duration if there's video data
+                gr.Warning("Recording duration is 0 or invalid. The recording might be corrupted.")
+            
+            try:
+                return ScreenRecorderData(**payload)
+            except Exception as e: # Catch Pydantic validation errors or other issues during model instantiation
+                # Log the payload for easier debugging if there's a Pydantic error
+                # Be careful with logging sensitive data in production.
+                # print(f"Error creating ScreenRecorderData. Payload: {payload}")
+                raise gr.Error(f"Error creating ScreenRecorderData from payload: {e}")
+
+        elif isinstance(payload, ScreenRecorderData): # If it's already the correct type
+            return payload
+        
+        gr.Warning(f"Unexpected payload format: {type(payload)}. Payload: {str(payload)[:200]}")
+        return None
+    
+    # def postprocess(self, value) -> Optional[dict]:
+    #     """Process outgoing data to frontend."""
+    #     if value is None:
+    #         return {"status": "stopped"}  # Ensure valid empty state
+
+    #     try:
+    #         if isinstance(value, ScreenRecorderData):
+    #             return value.model_dump()
+    #         elif isinstance(value, dict):
+    #             return value
+    #         return None
+    #     except Exception as e:
+    #         return {"status": "error", "error": str(e)}
+
+
+    def postprocess(self, value) -> Optional[dict]:
+        """Process outgoing data to frontend."""
+        print(f'value in postprocess: {value}')
+        if value is None:
+            return None
+            
+        try:
+            # If it's already a dict, return as is
+            if isinstance(value, dict):
+                return value
+                
+            # If it's a ScreenRecorderData object, convert to dict
+            if hasattr(value, 'model_dump'):
+                return value.model_dump()
+                
+            # Handle string values
+            if isinstance(value, str):
+                return {"video": {"path": value}}
+                
+            return None
+            
+        except Exception as e:
+            print(f'Error in postprocess: {e}')
+            return None
+
+
+        # try:
+        #     if isinstance(value, ScreenRecorderData):
+        #         # Ensure video data exists before sending
+        #         if not value.video:
+        #             return {"status": "error", "error": "No video recorded"}
+                
+        #         return {
+        #             "video": value.video,
+        #             "duration": value.duration,
+        #             "audio_enabled": value.audio_enabled,
+        #             "status": value.status
+        #         }
+            
+        #     # Handle raw dict format from frontend
+        #     if isinstance(value, dict):
+        #         return {
+        #             "video": FileData(**value.get("video", {})),
+        #             "duration": value.get("duration"),
+        #             "audio_enabled": value.get("audio_enabled", True),
+        #             "status": value.get("status", "stopped")
+        #         }
+        
+        # except Exception as e:
+        #     return {"status": "error", "error": str(e)}
+        
+        # return {"status": "stopped"}
+
+    def as_example(self, input_data):
+        """Handle example data display."""
+        if input_data is None:
+            return None
+        
+        if isinstance(input_data, (ScreenRecorderData, dict)):
+            return input_data
+        
+        # Convert simple video path to proper format
+        if isinstance(input_data, str):
+            return {
+                "video": {
+                    "path": input_data,
+                    "orig_name": os.path.basename(input_data),
+                    "size": 0
+                },
+                "duration": None,
+                "audio_enabled": self.audio_enabled,
+                "status": "stopped"
+            }
+        
+        return input_data
+
+    def update_status(self, status: Literal["recording", "stopped", "error"]):
+        """Update the internal status of the recorder."""
+        self._status = status
+        
+    def get_status(self) -> str:
+        """Get the current status of the recorder."""
+        return self._status

src/demo/app.py

@@ -0,0 +1,56 @@
+import gradio as gr
+from gradio_screenrecorder import ScreenRecorder
+
+def handle_recording(recording_data):
+    """Handle recorded video data"""
+    print(f'Received recording data: {recording_data}')
+    
+    if not recording_data or not recording_data.get('video'):
+        return None
+    
+    try:
+        video_info = recording_data['video']
+        # Return the video path that can be used by the Video component
+        return video_info.get('path')
+    except Exception as e:
+        print(f'Error processing recording: {e}')
+        return None
+
+
+css = """
+.screen-recorder-demo {
+    max-width: 800px;
+    margin: 0 auto;
+}
+"""
+
+with gr.Blocks(css=css, title="Screen Recorder Demo") as demo:
+    gr.HTML("""
+    <h1 style='text-align: center'>
+        Gradio Screen Recorder Component Demo
+    </h1>
+    """)
+    
+    with gr.Row():
+        with gr.Column():
+            recorder = ScreenRecorder(
+                audio_enabled=True,
+                webcam_overlay=True,  # Disabled for now
+                webcam_position="top-left",
+                recording_format="webm",
+                max_duration=60,
+                label="Screen Recorder"
+            )
+        
+        with gr.Column():
+            output_video = gr.Video(label="Recorded Video")
+    
+    # Event handler
+    recorder.change(
+        fn=handle_recording,
+        inputs=recorder,
+        outputs=output_video
+    )
+
+if __name__ == "__main__":
+    demo.launch()

src/demo/css.css

@@ -0,0 +1,157 @@
+html {
+	font-family: Inter;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	background: #fff;
+	color: #323232;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+:root {
+	--space: 1;
+	--vspace: calc(var(--space) * 1rem);
+	--vspace-0: calc(3 * var(--space) * 1rem);
+	--vspace-1: calc(2 * var(--space) * 1rem);
+	--vspace-2: calc(1.5 * var(--space) * 1rem);
+	--vspace-3: calc(0.5 * var(--space) * 1rem);
+}
+
+.app {
+	max-width: 748px !important;
+}
+
+.prose p {
+	margin: var(--vspace) 0;
+	line-height: var(--vspace * 2);
+	font-size: 1rem;
+}
+
+code {
+	font-family: "Inconsolata", sans-serif;
+	font-size: 16px;
+}
+
+h1,
+h1 code {
+	font-weight: 400;
+	line-height: calc(2.5 / var(--space) * var(--vspace));
+}
+
+h1 code {
+	background: none;
+	border: none;
+	letter-spacing: 0.05em;
+	padding-bottom: 5px;
+	position: relative;
+	padding: 0;
+}
+
+h2 {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h3,
+h3 code {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h4,
+h5,
+h6 {
+	margin: var(--vspace-3) 0 var(--vspace-3) 0;
+	line-height: var(--vspace);
+}
+
+.bigtitle,
+h1,
+h1 code {
+	font-size: calc(8px * 4.5);
+	word-break: break-word;
+}
+
+.title,
+h2,
+h2 code {
+	font-size: calc(8px * 3.375);
+	font-weight: lighter;
+	word-break: break-word;
+	border: none;
+	background: none;
+}
+
+.subheading1,
+h3,
+h3 code {
+	font-size: calc(8px * 1.8);
+	font-weight: 600;
+	border: none;
+	background: none;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+h2 code {
+	padding: 0;
+	position: relative;
+	letter-spacing: 0.05em;
+}
+
+blockquote {
+	font-size: calc(8px * 1.1667);
+	font-style: italic;
+	line-height: calc(1.1667 * var(--vspace));
+	margin: var(--vspace-2) var(--vspace-2);
+}
+
+.subheading2,
+h4 {
+	font-size: calc(8px * 1.4292);
+	text-transform: uppercase;
+	font-weight: 600;
+}
+
+.subheading3,
+h5 {
+	font-size: calc(8px * 1.2917);
+	line-height: calc(1.2917 * var(--vspace));
+
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+}
+
+h6 {
+	font-size: calc(8px * 1.1667);
+	font-size: 1.1667em;
+	font-weight: normal;
+	font-style: italic;
+	font-family: "le-monde-livre-classic-byol", serif !important;
+	letter-spacing: 0px !important;
+}
+
+#start .md > *:first-child {
+	margin-top: 0;
+}
+
+h2 + h3 {
+	margin-top: 0;
+}
+
+.md hr {
+	border: none;
+	border-top: 1px solid var(--block-border-color);
+	margin: var(--vspace-2) 0 var(--vspace-2) 0;
+}
+.prose ul {
+	margin: var(--vspace-2) 0 var(--vspace-1) 0;
+}
+
+.gap {
+	gap: 0;
+}

src/demo/requirements.txt

@@ -0,0 +1 @@
+gradio_screenrecorder

src/demo/space.py

@@ -0,0 +1,199 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'ScreenRecorder': {'description': 'Custom Gradio component for comprehensive screen recording functionality.', 'members': {'__init__': {'audio_enabled': {'type': 'bool', 'default': 'True', 'description': None}, 'webcam_overlay': {'type': 'bool', 'default': 'False', 'description': None}, 'webcam_position': {'type': '"top-left" | "top-right" | "bottom-left" | "bottom-right"', 'default': '"bottom-right"', 'description': None}, 'recording_format': {'type': 'str', 'default': '"webm"', 'description': None}, 'max_duration': {'type': 'typing.Optional[int][int, None]', 'default': 'None', 'description': None}, 'interactive': {'type': 'bool', 'default': 'True', 'description': None}}, 'postprocess': {}, 'preprocess': {'return': {'type': 'typing.Optional[\n    gradio_screenrecorder.screenrecorder.ScreenRecorderData\n][ScreenRecorderData, None]', 'description': None}, 'value': None}}, 'events': {'record_start': {'type': None, 'default': None, 'description': ''}, 'record_stop': {'type': None, 'default': None, 'description': ''}, 'stream_update': {'type': None, 'default': None, 'description': ''}, 'change': {'type': None, 'default': None, 'description': ''}}}, '__meta__': {'additional_interfaces': {'ScreenRecorderData': {'source': 'class ScreenRecorderData(GradioModel):\n    video: Optional[FileData] = None\n    duration: Optional[float] = None\n    audio_enabled: bool = True\n    status: Literal["recording", "stopped", "error"] = (\n        "stopped"\n    )\n\n    class Config:\n        json_encoders = {\n            FileData: lambda v: v.model_dump()\n            if v\n            else None\n        }'}}, 'user_fn_refs': {'ScreenRecorder': ['ScreenRecorderData']}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Default(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_screenrecorder`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+Screen Recorder Gradio Custom Component
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_screenrecorder
+```
+
+## Usage
+
+```python
+import gradio as gr
+from gradio_screenrecorder import ScreenRecorder
+
+def handle_recording(recording_data):
+    \"\"\"Handle recorded video data\"\"\"
+    print(f'Received recording data: {recording_data}')
+    
+    if not recording_data or not recording_data.get('video'):
+        return None
+    
+    try:
+        video_info = recording_data['video']
+        # Return the video path that can be used by the Video component
+        return video_info.get('path')
+    except Exception as e:
+        print(f'Error processing recording: {e}')
+        return None
+
+
+css = \"\"\"
+.screen-recorder-demo {
+    max-width: 800px;
+    margin: 0 auto;
+}
+\"\"\"
+
+with gr.Blocks(css=css, title="Screen Recorder Demo") as demo:
+    gr.HTML(\"\"\"
+    <h1 style='text-align: center'>
+        Gradio Screen Recorder Component Demo
+    </h1>
+    \"\"\")
+    
+    with gr.Row():
+        with gr.Column():
+            recorder = ScreenRecorder(
+                audio_enabled=True,
+                webcam_overlay=True,  # Disabled for now
+                webcam_position="top-left",
+                recording_format="webm",
+                max_duration=60,
+                label="Screen Recorder"
+            )
+        
+        with gr.Column():
+            output_video = gr.Video(label="Recorded Video")
+    
+    # Event handler
+    recorder.change(
+        fn=handle_recording,
+        inputs=recorder,
+        outputs=output_video
+    )
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `ScreenRecorder`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["ScreenRecorder"]["members"]["__init__"], linkify=['ScreenRecorderData'])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["ScreenRecorder"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+
+
+ ```python
+def predict(
+    value: typing.Optional[
+    gradio_screenrecorder.screenrecorder.ScreenRecorderData
+][ScreenRecorderData, None]
+) -> Unknown:
+    return value
+```
+""", elem_classes=["md-custom", "ScreenRecorder-user-fn"], header_links=True)
+
+
+
+
+    code_ScreenRecorderData = gr.Markdown("""
+## `ScreenRecorderData`
+```python
+class ScreenRecorderData(GradioModel):
+    video: Optional[FileData] = None
+    duration: Optional[float] = None
+    audio_enabled: bool = True
+    status: Literal["recording", "stopped", "error"] = (
+        "stopped"
+    )
+
+    class Config:
+        json_encoders = {
+            FileData: lambda v: v.model_dump()
+            if v
+            else None
+        }
+```""", elem_classes=["md-custom", "ScreenRecorderData"], header_links=True)
+
+    demo.load(None, js=r"""function() {
+    const refs = {
+            ScreenRecorderData: [], };
+    const user_fn_refs = {
+          ScreenRecorder: ['ScreenRecorderData'], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/frontend/Example.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+    export let value: any;
+    
+    function formatDuration(duration: number): string {
+        const minutes = Math.floor(duration / 60);
+        const seconds = Math.floor(duration % 60);
+        return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+    }
+</script>
+
+<div class="example-container">
+    {#if value && value.video}
+        <div class="video-thumbnail">
+            <video 
+                src={value.video.path} 
+                controls={false}
+                muted
+                style="width: 100%; height: 60px; object-fit: cover;"
+            >
+            </video>
+            <div class="overlay">
+                <span class="duration">
+                    {value.duration ? formatDuration(value.duration) : 'Recording'}
+                </span>
+                <span class="format">
+                    {value.video.orig_name?.split('.').pop()?.toUpperCase() || 'VIDEO'}
+                </span>
+            </div>
+        </div>
+    {:else}
+        <div class="placeholder">
+            📹 Screen Recording
+        </div>
+    {/if}
+</div>
+
+<style>
+    .example-container {
+        width: 100%;
+        height: 80px;
+        border-radius: 4px;
+        overflow: hidden;
+        position: relative;
+    }
+    
+    .video-thumbnail {
+        position: relative;
+        width: 100%;
+        height: 100%;
+    }
+    
+    .overlay {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: linear-gradient(transparent, rgba(0,0,0,0.7));
+        padding: 4px 8px;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+    }
+    
+    .duration, .format {
+        color: white;
+        font-size: 10px;
+        font-weight: bold;
+    }
+    
+    .placeholder {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        background: #f0f0f0;
+        color: #666;
+        font-size: 12px;
+    }
+</style>

src/frontend/Index.svelte

@@ -0,0 +1,727 @@
+<script lang="ts">
+    import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+    import { Block } from '@gradio/atoms';
+    import { StatusTracker } from '@gradio/statustracker';
+    import type { LoadingStatus } from "@gradio/statustracker";
+    import type { Gradio } from "@gradio/utils";
+    import fixWebmDuration from 'fix-webm-duration';
+    
+    // Type definitions
+    interface MediaRecorderOptions {
+        mimeType?: string;
+        audioBitsPerSecond?: number;
+        videoBitsPerSecond?: number;
+        bitsPerSecond?: number;
+    }
+    
+    interface MediaTrackConstraints {
+        displaySurface?: 'browser' | 'monitor' | 'window';
+        cursor?: 'always' | 'motion' | 'never';
+    }
+
+    // Type definitions
+    interface RecordingData {
+        video: string;
+        duration: number;
+        audio_enabled?: boolean;
+        status?: string;
+        orig_name?: string;
+        size?: number | null;
+        data?: string; // Base64 encoded data for Gradio
+        name?: string;  // Alias for orig_name for Gradio compatibility
+        is_file?: boolean;
+        type?: string;  // MIME type of the recording
+    }
+
+    interface Position {
+        x: number;
+        y: number;
+    }
+
+    // Event types for the component
+    type EventMap = {
+        'error': { message: string; error: string };
+        'recording-started': void;
+        'recording-stopped': RecordingData;
+        'record_stop': RecordingData;
+        'change': RecordingData;
+        'webcam-error': { message: string; error: string };
+    };
+
+    // Component props with proper types and defaults
+    export let gradio: Gradio<any>;
+    export let value: Partial<RecordingData> | null = null;
+    export const elem_id = ''; // Marked as const since it's not modified
+    export let elem_classes: string[] = [];
+    export let scale: number | null = null;
+    export let min_width: number | null = null;
+    export let visible = true;
+    export let interactive = true;
+    export let loading_status: LoadingStatus | null = null;
+    export let audio_enabled = false;
+    export let webcam_overlay = false;
+    export let webcam_position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' = 'bottom-right';
+    export let recording_format: 'webm' | 'mp4' | 'gif' = 'webm';
+    export let max_duration: number | null = null;
+    
+    // Computed styles for the container
+    let containerStyle = '';
+    
+    // Component methods interface
+    interface ComponentMethods {
+        startRecording: () => Promise<void>;
+        stopRecording: () => void;
+        togglePause: () => void;
+        cleanup: () => void;
+    }
+    
+    // Component state with explicit types and initial values
+    let isPaused = false;
+    let isRecording = false;
+    let recordingTime = 0;
+    let recordingTimer: number | null = null;
+    let recordedChunks: Blob[] = [];
+    
+    // Media streams and elements
+    let screenStream: MediaStream | null = null;
+    let webcamStream: MediaStream | null = null;
+    let combinedStream: MediaStream | null = null;
+    let canvas: HTMLCanvasElement | null = null;
+    let ctx: CanvasRenderingContext2D | null = null;
+    let animationFrameId: number | null = null;
+    let previewVideo: HTMLVideoElement | null = null;
+    let webcamVideo: HTMLVideoElement | null = null;
+    let recordingStartTime = 0;
+    let mediaRecorder: MediaRecorder | null = null;
+    
+    // Internal video elements
+    let webcamVideoInternal: HTMLVideoElement | null = null;
+    let screenVideoInternal: HTMLVideoElement | null = null;
+    
+    // Bind canvas element
+    function bindCanvas(node: HTMLCanvasElement) {
+        canvas = node;
+        if (canvas) {
+            const context = canvas.getContext('2d', { willReadFrequently: true });
+            if (context) {
+                ctx = context;
+                // Set canvas dimensions with null checks
+                const width = canvas.offsetWidth;
+                const height = canvas.offsetHeight;
+                if (width && height) {
+                    canvas.width = width;
+                    canvas.height = height;
+                }
+            }
+        }
+        return {
+            destroy() {
+                canvas = null;
+                ctx = null;
+            }
+        };
+    }
+    
+    // Canvas binding is now handled by the bindCanvas function
+    
+    // Configuration
+    const webcam_size = 200;
+    const webcam_border = 10;
+    const webcam_radius = '50%';
+    
+    // Ensure max_duration has a default value if null
+    $: effectiveMaxDuration = max_duration ?? 0;
+    
+    // Computed styles for the container
+    $: containerStyle = [
+        scale !== null ? `--scale: ${scale};` : '',
+        min_width !== null ? `min-width: ${min_width}px;` : ''
+    ].filter(Boolean).join(' ');
+    
+    onDestroy(() => {
+        if (isRecording) {
+            componentMethods.stopRecording();
+        }
+        componentMethods.cleanup();
+        if (animationFrameId) {
+            cancelAnimationFrame(animationFrameId);
+            animationFrameId = null;
+        }
+    });
+    
+    // Component state and props are already declared above
+    
+    // Event dispatcher with proper typing
+    const dispatch = createEventDispatcher<EventMap>();
+    
+    // Type guard for error handling
+    function isErrorWithMessage(error: unknown): error is Error {
+        return error instanceof Error;
+    }
+
+    // Component methods implementation
+    const componentMethods: ComponentMethods = {
+        startRecording: async (): Promise<void> => {
+            if (isRecording) return;
+            isRecording = true;
+            recordedChunks = [];
+            recordingTime = 0;
+            
+            try {
+                // Composite screen and optional webcam overlay via hidden canvas
+                const screenStreamCapture = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: false });
+                screenStream = screenStreamCapture;
+                // Assign to hidden video for composition
+                if (screenVideoInternal) {
+                    screenVideoInternal.srcObject = screenStreamCapture;
+                    await screenVideoInternal.play().catch(() => {});
+                }
+                let captureStream: MediaStream;
+                if (webcam_overlay && webcamVideoInternal && canvas && ctx) {
+                    try {
+                        webcamStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
+                        webcamVideoInternal.srcObject = webcamStream;
+                        await webcamVideoInternal.play().catch(() => {});
+                        // Resize canvas to match screen video
+                        canvas.width = screenVideoInternal!.videoWidth;
+                        canvas.height = screenVideoInternal!.videoHeight;
+                        const overlaySize = Math.min(canvas.width, canvas.height) / 4;
+                        const posMap: Record<string, [number, number]> = {
+                            'top-left': [10, 10],
+                            'top-right': [canvas.width - overlaySize - 10, 10],
+                            'bottom-left': [10, canvas.height - overlaySize - 10],
+                            'bottom-right': [canvas.width - overlaySize - 10, canvas.height - overlaySize - 10]
+                        };
+                        const [ox, oy] = posMap[webcam_position];
+                        function draw() {
+                            ctx!.drawImage(screenVideoInternal!, 0, 0, canvas.width, canvas.height);
+                            ctx!.drawImage(webcamVideoInternal!, ox, oy, overlaySize, overlaySize);
+                            animationFrameId = requestAnimationFrame(draw);
+                        }
+                        draw();
+                        const canvasStream = canvas.captureStream(30);
+                        const audioTracks = audio_enabled
+                            ? (await navigator.mediaDevices.getUserMedia({ audio: true })).getAudioTracks()
+                            : screenStreamCapture.getAudioTracks();
+                        combinedStream = new MediaStream([...canvasStream.getVideoTracks(), ...audioTracks]);
+                        captureStream = combinedStream;
+                    } catch (err) {
+                        console.warn('Webcam overlay failed, falling back to screen only', err);
+                        captureStream = screenStreamCapture;
+                    }
+                } else {
+                    // No overlay: combine audio if enabled with screen
+                    const audioTracks = audio_enabled
+                        ? (await navigator.mediaDevices.getUserMedia({ audio: true })).getAudioTracks()
+                        : screenStreamCapture.getAudioTracks();
+                    combinedStream = new MediaStream([...screenStreamCapture.getVideoTracks(), ...audioTracks]);
+                    captureStream = combinedStream;
+                }
+                
+                // Handle track ended event
+                screenStreamCapture.getVideoTracks()[0].onended = () => {
+                    if (isRecording) {
+                        componentMethods.stopRecording();
+                    }
+                };
+                
+                // Start recording
+                const options: MediaRecorderOptions = {
+                    mimeType: recording_format === 'webm' ? 'video/webm;codecs=vp9' : 'video/mp4'
+                };
+                
+                mediaRecorder = new MediaRecorder(captureStream, options);
+                mediaRecorder.ondataavailable = handleDataAvailable;
+                mediaRecorder.onstop = handleRecordingStop;
+                mediaRecorder.start();
+                
+                recordingStartTime = Date.now();
+                updateRecordingTime();
+                
+                dispatch('recording-started');
+            } catch (error) {
+                isRecording = false;
+                if (isErrorWithMessage(error)) {
+                    dispatch('error', { 
+                        message: 'Failed to start recording', 
+                        error: error.message
+                    });
+                }
+            }
+        },
+        
+        stopRecording: (): void => {
+            if (!isRecording || !mediaRecorder) return;
+            
+            try {
+                mediaRecorder.stop();
+                isRecording = false;
+                
+                // Stop all tracks
+                [screenStream, webcamStream, combinedStream].forEach(stream => {
+                    if (stream) {
+                        stream.getTracks().forEach(track => track.stop());
+                    }
+                });
+                
+                if (recordingTimer) {
+                    clearTimeout(recordingTimer);
+                    recordingTimer = null;
+                }
+                
+                const recordingData: RecordingData = {
+                    video: '',
+                    duration: recordingTime / 1000,
+                    audio_enabled: audio_enabled,
+                    status: 'completed'
+                };
+                
+                dispatch('recording-stopped', recordingData);
+                dispatch('record_stop', recordingData);
+                dispatch('change', recordingData);
+            } catch (error) {
+                isRecording = false;
+                if (isErrorWithMessage(error)) {
+                    dispatch('error', { 
+                        message: 'Error stopping recording', 
+                        error: error.message
+                    });
+                }
+            }
+        },
+        
+        togglePause: (): void => {
+            if (!mediaRecorder) return;
+            
+            isPaused = !isPaused;
+            
+            if (isPaused) {
+                mediaRecorder.pause();
+                if (recordingTimer) {
+                    clearTimeout(recordingTimer);
+                    recordingTimer = null;
+                }
+            } else {
+                mediaRecorder.resume();
+                updateRecordingTime();
+            }
+            if (isPaused) {
+                // Pause logic
+            } else {
+                // Resume logic
+            }
+        },
+        
+        cleanup: (): void => {
+            // Stop all media streams
+            [screenStream, webcamStream, combinedStream].forEach(stream => {
+                if (stream) {
+                    stream.getTracks().forEach(track => track.stop());
+                }
+            });
+            
+            // Clear media recorder
+            if (mediaRecorder) {
+                if (mediaRecorder.state !== 'inactive') {
+                    mediaRecorder.stop();
+                }
+                mediaRecorder = null;
+            }
+            
+            // Clear canvas
+            if (ctx) {
+                ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+            }
+            
+            // Reset state
+            isRecording = false;
+            isPaused = false;
+            recordingTime = 0;
+            recordedChunks = [];
+            
+            // Clear timers
+            if (recordingTimer) {
+                clearInterval(recordingTimer);
+                recordingTimer = null;
+            }
+            
+            if (animationFrameId) {
+                cancelAnimationFrame(animationFrameId);
+                animationFrameId = null;
+            }
+        }
+    };
+
+    // Handle data available event
+    function handleDataAvailable(event: BlobEvent): void {
+        if (event.data && event.data.size > 0) {
+            recordedChunks.push(event.data);
+        }
+    }
+    
+    // Handle recording stop
+    function handleRecordingStop(): void {
+        if (recordedChunks.length === 0) {
+            console.warn('No recording data available');
+            return;
+        }
+        
+        const mimeType = recording_format === 'webm' ? 'video/webm' : 'video/mp4';
+        const blob = new Blob(recordedChunks, { type: mimeType });
+        const url = URL.createObjectURL(blob);
+        
+        console.log('Recording stopped. Blob size:', blob.size, 'bytes');
+        
+        // Create a file reader to read the blob as base64
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const base64data = e.target?.result as string;
+            // Extract the base64 data (remove the data URL prefix)
+            const base64Content = base64data.split(',')[1];
+            const fileName = `recording_${Date.now()}.${recording_format}`;
+            
+            // Dispatch event with recording data
+            const recordingData: RecordingData = {
+                video: url,
+                duration: recordingTime,
+                audio_enabled: audio_enabled,
+                status: 'completed',
+                size: blob.size > 0 ? blob.size : undefined,
+                orig_name: fileName,
+                name: fileName,  // Alias for Gradio compatibility
+                is_file: true,
+                type: mimeType,
+                data: base64Content
+            };
+            
+            console.log('Dispatching recording-stopped event');
+            dispatch('recording-stopped', recordingData);
+            dispatch('record_stop', recordingData);
+            dispatch('change', recordingData);
+            
+            // Update the value prop to trigger re-render
+            value = { ...value, ...recordingData };
+        };
+        
+        reader.onerror = (error) => {
+            console.error('Error reading blob:', error);
+            dispatch('error', { 
+                message: 'Failed to process recording', 
+                error: 'Could not read recording data' 
+            });
+        };
+        
+        // Read the blob as data URL
+        reader.readAsDataURL(blob);
+    }
+    
+    // Update recording time
+    function updateRecordingTime(): void {
+        if (!isRecording) return;
+        
+        recordingTime = Math.floor((Date.now() - recordingStartTime) / 1000);
+        
+        // Check if max duration has been reached
+        if (max_duration !== null && max_duration > 0 && recordingTime >= max_duration) {
+            console.log('Max duration reached, stopping');
+            componentMethods.stopRecording();
+            return;
+        }
+        
+        // Schedule the next update
+        recordingTimer = window.setTimeout(updateRecordingTime, 1000);
+    }
+    
+    function stopTimer(): void {
+        if (recordingTimer) {
+            clearTimeout(recordingTimer);
+            recordingTimer = null;
+        }
+    }
+    
+    // Format time as MM:SS
+    function formatTime(seconds: number): string {
+        const mins = Math.floor(seconds / 60);
+        const secs = Math.floor(seconds % 60);
+        return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+    }
+    
+    // Format file size in human-readable format
+    function formatFileSize(bytes: number | string | null | undefined): string {
+        if (bytes === null || bytes === undefined) return '0 B';
+        const numBytes = Number(bytes);
+        if (isNaN(numBytes) || numBytes === 0) return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+        const i = Math.floor(Math.log(numBytes) / Math.log(k));
+        return parseFloat((numBytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    }
+</script>
+
+<div class="screen-recorder-container {!visible ? 'invisible' : ''} {elem_classes.join(' ')}" style="{containerStyle}">
+    {#if loading_status}
+        <StatusTracker
+            autoscroll={gradio.autoscroll}
+            i18n={gradio.i18n}
+            {...loading_status}
+        />
+    {/if}
+
+    <div class="screen-recorder">
+        <div class="controls">
+            {#if !isRecording}
+                <button 
+                    class="record-btn start" 
+                    on:click={componentMethods.startRecording}
+                    disabled={!interactive}
+                >
+                    <span class="recording-icon">●</span> Start Recording
+                </button>
+            {:else}
+                <button 
+                    class="record-btn stop" 
+                    on:click={componentMethods.stopRecording}
+                >
+                    <span class="stop-icon">■</span> Stop Recording
+                </button>
+                <span class="recording-time">
+                    {formatTime(recordingTime)}
+                </span>
+                {#if max_duration}
+                    <span class="max-duration">/ {formatTime(max_duration)}</span>
+                {/if}
+            {/if}
+        </div>
+        
+        <!-- Live Preview - Always show when recording -->
+        {#if isRecording}
+            <div class="preview-container">
+                <video 
+                    bind:this={previewVideo}
+                    class="preview-video"
+                    autoplay
+                    muted
+                    playsinline
+                    aria-label="Live preview"
+                    on:loadedmetadata={() => {
+                        if (previewVideo) {
+                            previewVideo.play().catch(console.warn);
+                        }
+                    }}
+                >
+                    <track kind="captions" />
+                </video>
+                {#if webcam_overlay}
+                    <video 
+                        bind:this={webcamVideo}
+                        class="webcam-overlay {webcam_position}"
+                        style="width: 200px; height: 200px;"
+                        autoplay
+                        muted
+                        playsinline
+                        aria-label="Webcam overlay"
+                    >
+                        <track kind="captions" />
+                    </video>
+                {/if}
+                <div class="recording-indicator">
+                    <span class="pulse">●</span> RECORDING
+                </div>
+            </div>
+        {/if}
+
+            {#if value?.video}
+                <div class="recording-preview" style="position: relative;">
+                    {#if audio_enabled}
+                        <div class="speaker-overlay">🔊</div>
+                    {/if}
+                    <video 
+                        src={value.video}
+                        controls
+                        class="preview-video"
+                        aria-label="Recording preview"
+                        on:loadedmetadata
+                        on:loadeddata
+                        on:error={(e) => console.error('Video error:', e)}
+                    >
+                        <track kind="captions" />
+                    </video>
+                    <div class="recording-info">
+                        <div>Duration: {value.duration ? value.duration.toFixed(1) : '0.0'}s</div>
+                        {#if value.size}
+                            <div>Size: {formatFileSize(value.size)}</div>
+                        {/if}
+                    </div>
+                </div>
+            {/if}
+
+        <!-- Configuration Display -->
+        <div class="config-info">
+            <span>Audio: {audio_enabled ? '🔊' : '🔇'}</span>
+            <span>Format: {recording_format.toUpperCase()}</span>
+            {#if max_duration}
+                <span>Max: {formatTime(max_duration)}</span>
+            {/if}
+        </div>
+        
+        <!-- Debug info -->
+        {#if value}
+            <div class="debug-info">
+                <small>Last recording: {value.orig_name} ({Math.round(value.size / 1024)}KB)</small>
+            </div>
+        {/if}
+    </div>
+    <video bind:this={screenVideoInternal} hidden muted playsinline style="display:none"></video>
+    {#if webcam_overlay}
+        <video bind:this={webcamVideoInternal} hidden muted playsinline style="display:none"></video>
+    {/if}
+    <canvas bind:this={canvas} use:bindCanvas hidden style="display:none"></canvas>
+</div>
+
+<style>
+    .screen-recorder-container {
+        display: block;
+        width: 100%;
+        box-sizing: border-box;
+    }
+    
+    .screen-recorder-container.invisible {
+        display: none;
+    }
+    
+    .screen-recorder {
+        border: 2px solid #e0e0e0;
+        border-radius: 8px;
+        padding: 16px;
+        background: #f9f9f9;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    }
+    
+    .controls {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 12px;
+        flex-wrap: wrap;
+    }
+    
+    .record-btn {
+        padding: 10px 20px;
+        border: none;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+    
+    .record-btn.start {
+        background: #4CAF50;
+        color: white;
+    }
+    
+    .record-btn.start:hover {
+        background: #45a049;
+    }
+    
+    .record-btn.stop {
+        background: #f44336;
+        color: white;
+    }
+    
+    .record-btn.stop:hover {
+        background: #da190b;
+    }
+    
+    .record-btn:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+    
+    .recording-time {
+        font-family: 'Courier New', monospace;
+        font-size: 18px;
+        font-weight: bold;
+        color: #f44336;
+    }
+    
+    .max-duration {
+        font-family: 'Courier New', monospace;
+        font-size: 14px;
+        color: #666;
+    }
+    
+
+    .preview-container {
+        position: relative;
+        margin: 12px 0;
+        border-radius: 6px;
+        overflow: hidden;
+        background: black;
+        min-height: 200px;
+    }
+    
+    .preview-video {
+        width: 100%;
+        max-height: 400px;
+        display: block;
+        object-fit: contain;
+    }
+
+    
+    .recording-indicator {
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        background: rgba(244, 67, 54, 0.9);
+        color: white;
+        padding: 6px 12px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: bold;
+        animation: pulse 1s infinite;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+    }
+    
+    @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.7; }
+    }
+    
+    .config-info {
+        display: flex;
+        gap: 8px;
+        font-size: 12px;
+        color: #666;
+        margin-top: 8px;
+        flex-wrap: wrap;
+    }
+    
+    .config-info span {
+        padding: 4px 8px;
+        background: #e8e8e8;
+        border-radius: 4px;
+        border: 1px solid #ddd;
+    }
+    
+    .debug-info {
+        margin-top: 8px;
+        padding: 8px;
+        background: #e8f5e8;
+        border-radius: 4px;
+        border: 1px solid #c8e6c8;
+    }
+    
+    .speaker-overlay {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        background: rgba(0,0,0,0.5);
+        color: white;
+        padding: 4px;
+        border-radius: 4px;
+        font-size: 14px;
+        pointer-events: none;
+    }
+</style>

src/frontend/gradio.config.js

@@ -0,0 +1,9 @@
+export default {
+  plugins: [],
+  svelte: {
+    preprocess: [],
+  },
+  build: {
+    target: "modules",
+  },
+};

src/frontend/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "gradio_screenrecorder",
+  "version": "0.3.21",
+  "description": "Gradio Screen Recorder Component",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "main_changeset": true,
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "preview": "vite preview"
+  },
+  "exports": {
+    ".": {
+      "gradio": "./Index.svelte",
+      "svelte": "./dist/Index.svelte",
+      "types": "./dist/Index.svelte.d.ts"
+    },
+    "./example": {
+      "gradio": "./Example.svelte",
+      "svelte": "./dist/Example.svelte",
+      "types": "./dist/Example.svelte.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@gradio/atoms": "0.16.1",
+    "@gradio/icons": "0.12.0",
+    "@gradio/statustracker": "0.10.11",
+    "@gradio/utils": "0.10.2",
+    "fix-webm-duration": "^1.0.6",
+    "svelte": "^4.2.7"
+  },
+  "devDependencies": {
+    "@gradio/preview": "0.13.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@tsconfig/svelte": "^5.0.4",
+    "svelte-preprocess": "^6.0.3",
+    "typescript": "^5.8.3",
+    "vite": "^5.0.0",
+    "vite-plugin-svelte": "^3.0.0"
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/your-username/your-repo.git",
+    "directory": "screenrecorder"
+  },
+  "files": [
+    "dist"
+  ]
+}

src/frontend/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "jsx": "preserve",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "types": ["svelte"],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["**/*.d.ts", "**/*.ts", "**/*.js", "**/*.svelte"],
+  "exclude": ["node_modules", "**/node_modules/*"]
+}

src/frontend/types.d.ts

@@ -0,0 +1,23 @@
+// Extend the Window interface
+declare global {
+    interface Window {
+        requestAnimationFrame(callback: FrameRequestCallback): number;
+        cancelAnimationFrame(handle: number): void;
+        MediaRecorder: typeof MediaRecorder;
+    }
+    
+    interface MediaRecorderOptions {
+        mimeType?: string;
+        audioBitsPerSecond?: number;
+        videoBitsPerSecond?: number;
+        bitsPerSecond?: number;
+    }
+    
+    interface MediaTrackConstraints {
+        displaySurface?: 'browser' | 'monitor' | 'window';
+        cursor?: 'always' | 'motion' | 'never';
+    }
+}
+
+// Export the types
+export {};

src/frontend/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+
+export default defineConfig({
+  plugins: [svelte()],
+});

src/manifest.json

@@ -0,0 +1,7 @@
+{
+    "name": "Screen Recorder Component",
+    "short_name": "ScreenRecorder",
+    "description": "Gradio Screen Recording Component",
+    "start_url": "/",
+    "display": "standalone"
+}

src/pyproject.toml

@@ -0,0 +1,51 @@
+[build-system]
+requires = [
+  "hatchling",
+  "hatch-requirements-txt",
+  "hatch-fancy-pypi-readme>=22.5.0",
+]
+build-backend = "hatchling.build"
+
+[project]
+name = "gradio_screenrecorder"
+version = "0.0.1"
+description = "Screen Recorder Gradio Custom Component"
+readme = "README.md"
+license = "apache-2.0"
+requires-python = ">=3.10"
+authors = [{ name = "YOUR NAME", email = "[email protected]" }]
+keywords = ["gradio-custom-component", "custom-component-track", "gradio", "screen-recorder"]
+# Add dependencies here
+dependencies = ["gradio>=4.0,<6.0"]
+classifiers = [
+  'Development Status :: 3 - Alpha',
+  'Operating System :: OS Independent',
+  'Programming Language :: Python :: 3',
+  'Programming Language :: Python :: 3 :: Only',
+  'Programming Language :: Python :: 3.8',
+  'Programming Language :: Python :: 3.9',
+  'Programming Language :: Python :: 3.10',
+  'Programming Language :: Python :: 3.11',
+  'Topic :: Scientific/Engineering',
+  'Topic :: Scientific/Engineering :: Artificial Intelligence',
+  'Topic :: Scientific/Engineering :: Visualization',
+]
+
+# The repository and space URLs are optional, but recommended.
+# Adding a repository URL will create a badge in the auto-generated README that links to the repository.
+# Adding a space URL will create a badge in the auto-generated README that links to the space.
+# This will make it easy for people to find your deployed demo or source code when they
+# encounter your project in the wild.
+
+# [project.urls]
+# repository = "your github repository"
+# space = "your space url"
+
+[project.optional-dependencies]
+dev = ["build", "twine"]
+
+[tool.hatch.build]
+artifacts = ["/backend/gradio_screenrecorder/templates", "*.pyi"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_screenrecorder"]

src/requirements.txt

@@ -0,0 +1,2 @@
+
+gradio