Refactor into JS execution

app.py

@@ -1,299 +1,22 @@
 from contextlib import asynccontextmanager
-
-import flet as ft
 import flet.fastapi as flet_fastapi
-import sys
 import logging
-import os
-from fastapi import FastAPI, File, UploadFile, HTTPException, Form, Request
-from fastapi.responses import FileResponse, HTMLResponse, JSONResponse
-from collections import OrderedDict
-import base64
-from starlette.responses import Response
-import asyncio
-import time
+from fastapi import FastAPI
+
+from flet_app import main
+from js_execution import mount_flet_app
 
 # Set up basic logging configuration
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
 logger = logging.getLogger(__name__)
 
-async def main(page: ft.Page):
-    page.title = "Simple Audio Recorder"
-
-    # Log the operating system platform
-    logger.info(f"Operating System: {sys.platform}")
-
-    audio_recorder = ft.AudioRecorder(
-        audio_encoder=ft.AudioEncoder.OPUS,
-        on_state_changed=lambda e: update_recording_status(e.data)
-    )
-    recording_status = ft.Text()
-    loading_animation = ft.ProgressRing(visible=False)
-    audio_player = None  # Initialize audio_player as None
-
-    page.overlay.append(audio_recorder)  # Only add audio_recorder to overlay initially
-
-    page.update()
-
-    def start_recording(e):
-        record_button.disabled = True
-        stop_button.disabled = True
-        play_button.disabled = True
-        loading_animation.visible = True
-        recording_status.value = "Preparing to record..."
-        page.update()
-
-        logger.info("Starting recording")
-        audio_recorder.start_recording("")
-        
-        # The actual recording start will be handled in update_recording_status
-
-    async def stop_recording_flet(e):
-        record_button.disabled = False
-        stop_button.disabled = True
-
-        page.update()
-        nonlocal audio_player
-        result_uri = await audio_recorder.stop_recording_async()
-        logger.info("Result URI: %s", result_uri)
-
-        logger.info("="*100)
-        logger.info(f"Session ID: {page.session_id}")
-
-        # Use launch_url to load the upload page in the hidden iframe
-        page.launch_url(f"/upload-blob/?blob_uri={result_uri}&session_id={page.session_id}", web_window_name="hidden-iframe")
-
-        # Wait for the audio data to be stored
-        start_time = time.time()
-        await wait_for_audio_data(page.session_id)
-        end_time = time.time()
-        elapsed_time = end_time - start_time
-        logger.info(f"Time taken to wait for audio data: {elapsed_time:.2f} seconds")
-
-        # Create audio_player using the base64 string from audio_storage
-        if page.session_id in audio_storage:
-            base64_audio = audio_storage.pop(page.session_id)
-            audio_player = ft.Audio(src=f"data:audio/wav;base64,{base64_audio}")
-            page.overlay.append(audio_player)
-        else:
-            logger.error(f"Audio data not found for session {page.session_id}")
-
-        play_button.disabled = False
-        page.update()
-        logger.info(page.controls)
-
-    def play_recording(e):
-        if audio_player:
-            audio_player.play()
-
-    def update_recording_status(status):
-        if status == "recording":
-            stop_button.disabled = False
-            loading_animation.visible = False
-            recording_status.value = "Recording in progress..."
-        else:
-            recording_status.value = f"Recording status: {status}"
-        page.update()
-
-    record_button = ft.ElevatedButton("Start Recording", on_click=start_recording)
-    stop_button = ft.ElevatedButton("Stop Recording", on_click=stop_recording_flet, disabled=True)
-    play_button = ft.ElevatedButton("Play Recording", on_click=play_recording, disabled=True)
-
-    def handle_list_devices(e):
-        devices = audio_recorder.get_input_devices()
-        logger.info("Input devices: %s", devices)
-
-    def handle_has_permission(e):
-        try:
-            logger.info("HasPermission: %s", audio_recorder.has_permission())
-        except Exception as e:
-            logger.error("Error checking permission: %s", str(e))
-
-    def handle_audio_encoding_test(e):
-        for i in list(ft.AudioEncoder):
-            logger.info("%s: %s", i, audio_recorder.is_supported_encoder(i))
-
-    page.add(
-        ft.Text("Simple Audio Recorder", size=24),
-        ft.Row([record_button, stop_button, play_button, loading_animation]),
-        recording_status,
-        ft.ElevatedButton("List Devices", on_click=handle_list_devices),
-        ft.ElevatedButton("Test AudioEncodings", on_click=handle_audio_encoding_test),
-        ft.ElevatedButton("Has Permission", on_click=handle_has_permission),
-    )
-
-    page.update()
-
-
 @asynccontextmanager
 async def lifespan(app: FastAPI):
     await flet_fastapi.app_manager.start()
     yield
     await flet_fastapi.app_manager.shutdown()
 
-
 app = FastAPI(lifespan=lifespan)
 
-# Make sure this line is correct and the path matches what you're using in the iframe src
-app.mount("/flet-app", flet_fastapi.app(main))
-
-
-# Directory where files will be saved (current working directory)
-UPLOAD_DIRECTORY = os.path.join(os.getcwd(), "uploaded_files")
-
-@app.get("/", response_class=HTMLResponse)
-async def serve_main_page(request: Request):
-    html_content = """
-    <!DOCTYPE html>
-    <html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Audio Recorder App</title>
-        <style>
-            body, html {
-                margin: 0;
-                padding: 0;
-                height: 100%;
-                overflow: hidden;
-            }
-            #flet-app-frame {
-                width: 100%;
-                height: 100%;
-                border: none;
-                position: absolute;
-                top: 0;
-                left: 0;
-            }
-        </style>
-    </head>
-    <body>
-        <iframe id="flet-app-frame"></iframe>
-        <iframe name="hidden-iframe" style="display:none;"></iframe>
-        <script>
-            window.onload = function() {
-                var iframe = document.getElementById('flet-app-frame');
-                var currentProtocol = window.location.protocol;
-                var currentHost = window.location.host;
-                var src = currentProtocol + '//' + currentHost + '/flet-app/';
-
-                iframe.src = src;
-                console.log('Iframe src set to:', src);
-
-                // Set Content-Security-Policy based on the current protocol
-                var meta = document.createElement('meta');
-                meta.httpEquiv = "Content-Security-Policy";
-                meta.content = currentProtocol === 'https:' ? "upgrade-insecure-requests" : "";
-                document.head.appendChild(meta);
-            };
-        </script>
-    </body>
-    </html>
-    """
-    return HTMLResponse(content=html_content)
-
-@app.get("/upload-blob/", response_class=HTMLResponse)
-async def serve_upload_page(blob_uri: str, session_id: str):
-    logger.info(f"Blob URI: {blob_uri}")
-    logger.info(f"Session ID: {session_id}")
-    html_content = f"""
-    <!DOCTYPE html>
-    <html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Upload Blob</title>
-    </head>
-    <body>
-        <script>
-            async function sendBlobToServer(blobUri, sessionId) {{
-                try {{
-                    const blob = await fetch(blobUri).then(r => r.blob());
-                    const base64data = await new Promise((resolve) => {{
-                        const reader = new FileReader();
-                        reader.onloadend = () => resolve(reader.result.split(',')[1]);
-                        reader.readAsDataURL(blob);
-                    }});
-
-                    const response = await fetch('/store-audio/', {{
-                        method: 'POST',
-                        headers: {{
-                            'Content-Type': 'application/json',
-                        }},
-                        body: JSON.stringify({{
-                            session_id: sessionId,
-                            audio_data: base64data
-                        }})
-                    }});
-
-                    const result = await response.json();
-                    console.log(result);
-                }} catch (error) {{
-                    console.error("Error uploading blob:", error);
-                }}
-            }}
-
-            sendBlobToServer("{blob_uri}", "{session_id}");
-        </script>
-    </body>
-    </html>
-    """
-    return HTMLResponse(content=html_content)
-
-@app.post("/upload-blob/")
-async def upload_blob(file: UploadFile = File(...), session_id: str = Form(...)):
-    logger.info(f"Uploading file: {file.filename}")
-    logger.info(f"Session ID: {session_id}")
-    
-    # Create a directory for the session if it doesn't exist
-    session_directory = os.path.join(UPLOAD_DIRECTORY, session_id)
-    os.makedirs(session_directory, exist_ok=True)
-    
-    # Save the file in the session directory
-    file_location = os.path.join(session_directory, file.filename)
-    with open(file_location, "wb") as f:
-        f.write(await file.read())
-    
-    return JSONResponse(content={"info": f"file '{file.filename}' saved at '{file_location}'"})
-
-# Use OrderedDict instead of a regular dictionary
-audio_storage = OrderedDict()
-
-@app.post("/store-audio/")
-async def store_audio(data: dict):
-    session_id = data.get('session_id')
-    audio_data = data.get('audio_data')
-
-    if not session_id or not audio_data:
-        raise HTTPException(status_code=400, detail="Missing session_id or audio_data")
-
-    # Store the base64 audio data in memory
-    audio_storage[session_id] = audio_data
-
-    print(f"Audio data stored for session {session_id}")
-
-    return JSONResponse(content={"info": f"Audio data stored for session {session_id}: {audio_data[:100]}"})
-
-@app.get("/get-audio/{session_id}")
-async def get_audio(session_id: str):
-    if session_id not in audio_storage:
-        raise HTTPException(status_code=404, detail="Audio not found")
-    
-    # Pop the audio data from the storage
-    audio_data = audio_storage.pop(session_id)
-    
-    return JSONResponse(content={"audio_data": audio_data})
-# Add this helper function to wait for the audio data
-async def wait_for_audio_data(session_id, max_wait_time=5, initial_interval=0.01):
-    start_time = time.time()
-    interval = initial_interval
-    while time.time() - start_time < max_wait_time:
-        if session_id in audio_storage:
-            return
-        await asyncio.sleep(interval)
-        # Exponential backoff with a maximum interval of 0.5 seconds
-        interval = min(interval * 1.5, 0.5)
-    
-    # If we've reached this point, we've timed out
-    logger.error(f"Timeout waiting for audio data for session {session_id}")
-
+# Use the new mount_flet_app function with the same arguments
+mount_flet_app(app, "/", flet_fastapi.app(main))

audio_utils.py

@@ -0,0 +1,33 @@
+import asyncio
+import logging
+import flet as ft
+
+logger = logging.getLogger(__name__)
+
+async def get_base64_audio(page: ft.Page, audio_blob_uri: str) -> str | None:
+    start_time = asyncio.get_event_loop().time()
+    result = None
+    
+    try:
+        logger.info("Result URI: %s", audio_blob_uri)
+        logger.info("="*100)
+        
+        # Use the eval_js method to execute JavaScript and get the result directly
+        result = await page.eval_js(f"""
+        const blob = await fetch('{audio_blob_uri}').then(r => r.blob());
+        const base64data = await new Promise((resolve) => {{
+            const reader = new FileReader();
+            reader.onloadend = () => resolve(reader.result.split(',')[1]);
+            reader.readAsDataURL(blob);
+        }});
+        return base64data;
+        """)
+
+    except Exception as e:
+        logger.error(f"Error in get_base64_audio: {str(e)}")
+    finally:
+        end_time = asyncio.get_event_loop().time()
+        elapsed_time = end_time - start_time
+        logger.info(f"Time taken to get base64 audio: {elapsed_time:.2f} seconds")
+
+    return result

flet_app.py

@@ -0,0 +1,98 @@
+import sys
+import logging
+import flet as ft
+from audio_utils import get_base64_audio
+
+logger = logging.getLogger(__name__)
+
+async def main(page: ft.Page):
+    page.title = "Simple Audio Recorder"
+
+    # Log the operating system platform
+    logger.info(f"Operating System: {sys.platform}")
+
+    audio_recorder = ft.AudioRecorder(
+        audio_encoder=ft.AudioEncoder.OPUS,
+        on_state_changed=lambda e: update_recording_status(e.data)
+    )
+    recording_status = ft.Text()
+    loading_animation = ft.ProgressRing(visible=False)
+    audio_player = None  # Initialize audio_player as None
+
+    page.overlay.append(audio_recorder)  # Only add audio_recorder to overlay initially
+
+    page.update()
+
+    def start_recording(e):
+        record_button.disabled = True
+        stop_button.disabled = True
+        play_button.disabled = True
+        loading_animation.visible = True
+        recording_status.value = "Preparing to record..."
+        page.update()
+
+        logger.info("Starting recording")
+        audio_recorder.start_recording("")
+        
+        # The actual recording start will be handled in update_recording_status
+
+    async def stop_recording_flet(e):
+        record_button.disabled = False
+        stop_button.disabled = True
+        page.update()
+        nonlocal audio_player
+        result_uri = await audio_recorder.stop_recording_async()
+
+        base64_audio = await get_base64_audio(page, result_uri)
+
+        if base64_audio:
+            audio_player = ft.Audio(src=f"data:audio/wav;base64,{base64_audio}")
+            page.overlay.append(audio_player)
+            play_button.disabled = False
+        else:
+            logger.error(f"Failed to retrieve audio data for session {page.session_id}")
+
+        page.update()
+        logger.info(page.controls)
+
+    def play_recording(e):
+        if audio_player:
+            audio_player.play()
+
+    def update_recording_status(status):
+        if status == "recording":
+            stop_button.disabled = False
+            loading_animation.visible = False
+            recording_status.value = "Recording in progress..."
+        else:
+            recording_status.value = f"Recording status: {status}"
+        page.update()
+
+    record_button = ft.ElevatedButton("Start Recording", on_click=start_recording)
+    stop_button = ft.ElevatedButton("Stop Recording", on_click=stop_recording_flet, disabled=True)
+    play_button = ft.ElevatedButton("Play Recording", on_click=play_recording, disabled=True)
+
+    def handle_list_devices(e):
+        devices = audio_recorder.get_input_devices()
+        logger.info("Input devices: %s", devices)
+
+    def handle_has_permission(e):
+        try:
+            logger.info("HasPermission: %s", audio_recorder.has_permission())
+        except Exception as e:
+            logger.error("Error checking permission: %s", str(e))
+
+    def handle_audio_encoding_test(e):
+        for i in list(ft.AudioEncoder):
+            logger.info("%s: %s", i, audio_recorder.is_supported_encoder(i))
+
+    page.add(
+        ft.Text("Simple Audio Recorder", size=24),
+        ft.Row([record_button, stop_button, play_button, loading_animation]),
+        recording_status,
+        ft.ElevatedButton("List Devices", on_click=handle_list_devices),
+        ft.ElevatedButton("Test AudioEncodings", on_click=handle_audio_encoding_test),
+        ft.ElevatedButton("Has Permission", on_click=handle_has_permission),
+    )
+
+    page.update()

js_execution.py

@@ -0,0 +1,141 @@
+import flet as ft
+import asyncio
+import logging
+from fastapi import FastAPI, Request
+from fastapi.responses import HTMLResponse
+import uuid
+
+logger = logging.getLogger(__name__)
+
+class JSExecutionRouter:
+    def __init__(self):
+        self.app = None
+
+    def init_app(self, app: FastAPI):
+        self.app = app
+
+    def get_eval_js_html(self, js_code: str, result_id: str):
+        escaped_js = js_code.replace('"', '"')
+        return f"""
+        <!DOCTYPE html>
+        <html lang="en">
+        <head>
+            <meta charset="UTF-8">
+            <title>Execute JavaScript</title>
+        </head>
+        <body>
+            <script>
+            async function executeAndReturn() {{
+                try {{
+                    const result = await (async () => {{ {escaped_js} }})();
+                    fetch('/js-result/{result_id}', {{
+                        method: 'POST',
+                        headers: {{ 'Content-Type': 'application/json' }},
+                        body: JSON.stringify({{ result }})
+                    }});
+                }} catch (error) {{
+                    console.error('Error:', error);
+                    fetch('/js-result/{result_id}', {{
+                        method: 'POST',
+                        headers: {{ 'Content-Type': 'application/json' }},
+                        body: JSON.stringify({{ error: error.toString() }})
+                    }});
+                }}
+            }}
+            executeAndReturn();
+            </script>
+        </body>
+        </html>
+        """
+
+    def create_dynamic_endpoint(self, js_code: str):
+        if not self.app:
+            raise RuntimeError("DynamicRouter not initialized with FastAPI app")
+
+        result_id = str(uuid.uuid4())
+        result_future = asyncio.Future()
+        
+        @self.app.get(f"/eval-js/{result_id}", response_class=HTMLResponse)
+        async def serve_eval_js_page():
+            return HTMLResponse(content=self.get_eval_js_html(js_code, result_id))
+        
+        @self.app.post(f"/js-result/{result_id}")
+        async def receive_js_result(data: dict):
+            if 'error' in data:
+                result_future.set_exception(Exception(data['error']))
+            else:
+                result_future.set_result(data['result'])
+            return {"status": "received"}
+
+        return f"/eval-js/{result_id}", result_future
+
+js_execution_router = JSExecutionRouter()
+
+# Monkey patch the Page class to add eval_js method
+async def eval_js(self: ft.Page, js_code: str) -> str:
+    endpoint, result_future = js_execution_router.create_dynamic_endpoint(js_code)
+    self.launch_url(endpoint, web_window_name="hidden-iframe")
+    return await result_future
+
+ft.Page.eval_js = eval_js  # type: ignore
+
+def add_js_execution_routes(app: FastAPI):
+    js_execution_router.init_app(app)
+
+def mount_flet_app(app: FastAPI, route: str, flet_app):
+    # Mount the Flet app
+    app.mount("/flet-app-internal", flet_app)
+
+    @app.get(route, response_class=HTMLResponse)
+    async def serve_main_page(request: Request):
+        html_content = f"""
+        <!DOCTYPE html>
+        <html lang="en">
+        <head>
+            <meta charset="UTF-8">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <title>Audio Recorder App</title>
+            <style>
+                body, html {{
+                    margin: 0;
+                    padding: 0;
+                    height: 100%;
+                    overflow: hidden;
+                }}
+                #flet-app-frame {{
+                    width: 100%;
+                    height: 100%;
+                    border: none;
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                }}
+            </style>
+        </head>
+        <body>
+            <iframe id="flet-app-frame"></iframe>
+            <iframe name="hidden-iframe" style="display:none;"></iframe>
+            <script>
+                window.onload = function() {{
+                    var iframe = document.getElementById('flet-app-frame');
+                    var currentProtocol = window.location.protocol;
+                    var currentHost = window.location.host;
+                    var src = currentProtocol + '//' + currentHost + '/flet-app-internal/';
+
+                    iframe.src = src;
+                    console.log('Iframe src set to:', src);
+
+                    // Set Content-Security-Policy based on the current protocol
+                    var meta = document.createElement('meta');
+                    meta.httpEquiv = "Content-Security-Policy";
+                    meta.content = currentProtocol === 'https:' ? "upgrade-insecure-requests" : "";
+                    document.head.appendChild(meta);
+                }};
+            </script>
+        </body>
+        </html>
+        """
+        return HTMLResponse(content=html_content)
+
+    # Add the JS execution routes
+    add_js_execution_routes(app)