Scribe • Audio Recorder

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_166":167,"_168":169},"routes/_app.x.$handle.$name",{"_95":94,"_32":45,"_103":85,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":49,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":49,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",36,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","9390231c-2792-11f0-9d52-569c3dd06744","name","fileType","http","content","import { Hono } from \"https://deno.land/x/hono@v3.11.7/mod.ts\";\n// Inlined content from ./middleware.ts\nimport \"jsr:@std/dotenv/load\"\nimport { Groq } from \"npm:groq-sdk\";\nconst groq = new Groq();\nimport { HfInference } from \"npm:@huggingface/inference\";\nconst hf = new HfInference(Deno.env.get(\"HUGGINGFACE_API_KEY\"));\n\nconst MAX_CHUNK_SIZE_BYTES = 25 * 1024 * 1024; // 25 MB in bytes\nconst DEFAULT_WHISPER_MODEL = 'whisper-large-v3-turbo';\nconst MAX_TRANSCRIPT_CONTEXT = 3000; // Characters to keep from transcript history\n\ntype WhisperModel = 'whisper-large-v3-turbo' | 'distil-whisper-large-v3-en' | 'whisper-large-v3';\ntype WhisperResponseFormat = 'json' | 'verbose_json' | 'text';\n\ninterface TranscriptionParams {\n model?: WhisperModel;\n prompt?: string;\n response_format?: WhisperResponseFormat;\n language?: string;\n temperature?: number;\n}\n\ninterface Transcription {\n text: string;\n segments?: Array<{\n start: number;\n end: number;\n text: string;\n }>;\n duration?: number;\n}\n\n// Helper function to normalize transcription response\nfunction normalizeTranscription(response: string | Transcription): Transcription {\n if (typeof response === 'string') {\n return { text: response };\n }\n return response;\n}\n\n// Fetch the size of the file using HTTP HEAD request\nexport async function fetchFileSize(url: string): Promise {\n const response = await fetch(url, { method: 'HEAD' });\n const contentLength = response.headers.get('content-length');\n return contentLength ? parseInt(contentLength, 10) : 0;\n}\n\n// Transcribe a single chunk of audio data using Deno's ReadableStream\nasync function transcribeChunk(buffer: Uint8Array, params: TranscriptionParams): Promise {\n console.log('Transcribing chunk with params:', {\n model: params.model,\n language: params.language,\n response_format: params.response_format\n });\n \n const blob = new Blob([buffer], { type: 'audio/wav' });\n const file = new File([blob], 'audio.wav', { type: 'audio/wav' });\n\n const transcription = await groq.audio.transcriptions.create({\n file,\n model: params?.model || DEFAULT_WHISPER_MODEL,\n prompt: params?.prompt,\n response_format: params?.response_format || 'text',\n language: params?.language || 'en',\n temperature: 0 // Set to 0 for consistency\n });\n\n return normalizeTranscription(transcription);\n}\n\n// Add this interface\ninterface AudioInput {\n type: 'url' | 'file';\n content: string | File;\n}\n\nexport async function transcribeAudio(input: AudioInput, params: TranscriptionParams): Promise {\n console.log('Transcribing audio with params:', params);\n \n let fileSize: number;\n let getBuffer: (start: number, end: number) => Promise;\n\n if (input.type === 'file') {\n const file = input.content as File;\n fileSize = file.size;\n \n // For files, create buffer getter that slices the file\n getBuffer = async (start: number, end: number) => {\n const slice = file.slice(start, end + 1);\n const arrayBuffer = await slice.arrayBuffer();\n return new Uint8Array(arrayBuffer);\n };\n } else {\n const url = input.content as string;\n fileSize = await fetchFileSize(url);\n \n // For URLs, create buffer getter that fetches ranges\n getBuffer = async (start: number, end: number) => {\n const response = await fetch(url, {\n headers: { Range: `bytes=${start}-${end}` },\n });\n if (!response.ok && response.status !== 206) {\n throw new Error(`Failed to fetch range ${start}-${end}: ${response.statusText}`);\n }\n const arrayBuffer = await response.arrayBuffer();\n return new Uint8Array(arrayBuffer);\n };\n }\n\n if (fileSize === 0) {\n throw new Error('Unable to determine the file size.');\n }\n\n if (fileSize <= MAX_CHUNK_SIZE_BYTES) {\n // Handle small files directly\n if (input.type === 'file') {\n const file = input.content as File;\n const transcription = await groq.audio.transcriptions.create({\n file,\n model: params?.model || DEFAULT_WHISPER_MODEL,\n prompt: params?.prompt,\n response_format: params?.response_format || 'verbose_json',\n language: params?.language || 'en',\n temperature: params?.temperature,\n });\n return normalizeTranscription(transcription);\n } else {\n const url = input.content as string;\n const transcription = await groq.audio.transcriptions.create({\n url,\n model: params?.model || DEFAULT_WHISPER_MODEL,\n prompt: params?.prompt,\n response_format: params?.response_format || 'text',\n language: params?.language || 'en',\n temperature: params?.temperature,\n });\n return normalizeTranscription(transcription);\n }\n }\n\n // Handle large files by splitting into equal-sized chunks\n const numChunks = Math.ceil(fileSize / MAX_CHUNK_SIZE_BYTES);\n const chunkSize = Math.ceil(fileSize / numChunks);\n const transcriptions: (string | Transcription)[] = [];\n\n for (let i = 0; i < numChunks; i++) {\n const start = i * chunkSize;\n const end = Math.min((i + 1) * chunkSize - 1, fileSize - 1);\n\n console.log(`Processing chunk ${i + 1}/${numChunks} (bytes ${start}-${end})`);\n const buffer = await getBuffer(start, end);\n\n try {\n const transcription = await transcribeChunk(buffer, {\n ...params,\n model: params.model || DEFAULT_WHISPER_MODEL,\n language: params.language || 'en'\n });\n transcriptions.push(transcription);\n } catch (error: any) {\n console.error(`Error transcribing chunk ${i + 1}:`, error);\n throw new Error(`Transcription failed for chunk ${i + 1}: ${error.message}`);\n }\n }\n\n // Handle joining based on response format\n if (params.response_format === 'text' || !params.response_format) {\n const combinedText = transcriptions.map(t => {\n const normalized = normalizeTranscription(t);\n return normalized.text;\n }).join(' ');\n return { text: combinedText };\n } else {\n // For JSON responses, combine segments and adjust timestamps\n const firstChunk = normalizeTranscription(transcriptions[0]);\n const combinedResponse: Transcription = {\n text: firstChunk.text,\n segments: firstChunk.segments || [],\n duration: firstChunk.duration || 0\n };\n\n let timeOffset = combinedResponse.duration || 0;\n\n for (let i = 1; i < transcriptions.length; i++) {\n const currentChunk = normalizeTranscription(transcriptions[i]);\n\n if (currentChunk.segments && combinedResponse.segments) {\n const adjustedSegments = currentChunk.segments.map(segment => ({\n ...segment,\n start: segment.start + timeOffset,\n end: segment.end + timeOffset\n }));\n combinedResponse.segments.push(...adjustedSegments);\n }\n\n combinedResponse.duration = (combinedResponse.duration || 0) + (currentChunk.duration || 0);\n combinedResponse.text += ' ' + currentChunk.text;\n\n timeOffset += currentChunk.duration || 0;\n }\n\n return combinedResponse;\n }\n}\n\nasync function getTranscript(data) {\n try {\n console.log(\"Starting transcription...\");\n\n let input;\n let fileToTranscribe;\n \n // Extract parameters from FormData\n const language = data.get('language') || 'en';\n const model = data.get('model') || DEFAULT_WHISPER_MODEL;\n \n console.log(\"Transcript params:\", { language, model });\n\n // Check if formData is a JSON object with a URL\n if (data.url) {\n console.log(\"Processing URL input:\", data.url);\n input = {\n type: 'url' as const,\n content: data.url\n };\n } else {\n // Handle file upload\n const file = data.get('file');\n if (!file) {\n throw new Error('No file found in form data');\n }\n\n console.log(\"Input file:\", {\n name: file.name,\n size: file.size,\n type: file.type\n });\n\n fileToTranscribe = file instanceof File ? file :\n new File([file], 'audio.wav', { type: file.type || 'audio/wav' });\n\n input = {\n type: 'file' as const,\n content: fileToTranscribe\n };\n }\n\n const params: TranscriptionParams = {\n model,\n response_format: 'text',\n language,\n temperature: 0\n };\n\n console.log(\"Using transcription params:\", params);\n\n const transcription = await transcribeAudio(input, params);\n const transcriptText = typeof transcription === 'string' ?\n transcription : transcription.text;\n\n console.log(\"Transcription completed:\", transcriptText);\n return transcriptText.trim() || null;\n\n } catch (error) {\n console.error(\"Transcription failed:\", error);\n return null;\n }\n}\n\n// Add this interface for JSON responses\ninterface TranscriptionResponse {\n transcript: string | {\n text: string;\n segments?: Array<{\n start: number;\n end: number;\n text: string;\n }>;\n };\n}\n\n// Keep existing transcriptHandler for SSE responses during recording\nexport const transcriptHandler = async (c) => {\n c.header('Content-Type', 'text/event-stream');\n\n console.log('Starting transcript handler');\n\n return new Response(\n new ReadableStream({\n async start(controller) {\n const encoder = new TextEncoder();\n try {\n const formData = await c.req.formData();\n const transcript = await getTranscript(formData);\n \n if (!transcript) {\n throw new Error('Invalid audio or transcription failed');\n }\n\n const messageWithTimestamp = {\n timestamp: new Date().toLocaleString(),\n content: transcript\n };\n\n controller.enqueue(encoder.encode(`data: ${JSON.stringify({ \n type: 'transcript', \n message: messageWithTimestamp \n })}\\n\\n`));\n\n } catch (error) {\n controller.enqueue(encoder.encode(`data: ${JSON.stringify({ \n type: 'error', \n content: error.message, \n timestamp: new Date().toLocaleString() \n })}\\n\\n`));\n }\n controller.close();\n }\n })\n );\n};\n\n// Add new transcribeHandler for file/URL uploads\nexport const uploadTranscribeHandler = async (c) => {\n try {\n let file: File | null = null;\n let url: string | null = null;\n let params: TranscriptionParams = {\n model: DEFAULT_WHISPER_MODEL,\n response_format: 'text',\n language: 'en'\n };\n\n const contentType = c.req.header('content-type');\n \n if (contentType?.includes('multipart/form-data')) {\n const formData = await c.req.formData();\n file = formData.get('file') as File | null;\n url = formData.get('url') as string | null;\n \n console.log('Received language:', formData.get('language'));\n \n params = {\n model: (formData.get('model') as WhisperModel) || DEFAULT_WHISPER_MODEL,\n response_format: (formData.get('response_format') as WhisperResponseFormat) || 'text',\n language: formData.get('language')?.toString() || 'en',\n prompt: formData.get('prompt')?.toString(),\n temperature: formData.get('temperature') ? parseFloat(formData.get('temperature').toString()) : undefined,\n };\n }\n\n console.log('Using transcription params:', params);\n\n const input: AudioInput = file \n ? { type: 'file', content: file }\n : { type: 'url', content: url! };\n \n const transcription = await transcribeAudio(input, params);\n \n return c.json({\n transcript: params.response_format === 'text' ? \n transcription.text :\n {\n text: transcription.text,\n ...(transcription.segments && { segments: transcription.segments })\n }\n });\n } catch (error: any) {\n console.error(\"Transcription failed:\", error);\n return c.json({ error: `Transcription failed: ${error.message}` }, 500);\n }\n};\n\n\nexport const classifySpeechHandler = async (c) => {\n try {\n let file;\n const contentType = c.req.header('content-type');\n\n if (contentType?.includes('multipart/form-data')) {\n const formData = await c.req.formData();\n file = formData.get('file');\n } else if (contentType?.includes('application/json')) {\n const body = await c.req.json();\n if (body.url) {\n const response = await fetch(body.url);\n const blob = await response.blob();\n file = new File([blob], 'audio.wav', { type: response.headers.get('content-type') || 'audio/wav' });\n }\n }\n\n if (!file) {\n return c.json({ error: 'No audio file or URL provided' }, 400);\n }\n\n try {\n const result = await hf.audioClassification({\n model: 'MIT/ast-finetuned-audioset-10-10-0.4593',\n data: file,\n });\n\n console.log('HF classification result:', result);\n\n const speechResult = result.find(pred => pred.label === 'Speech');\n const speechScore = speechResult?.score || 0;\n const SPEECH_THRESHOLD = 0.45;\n const isHumanSpeech = speechScore > SPEECH_THRESHOLD;\n\n return c.json({\n isHumanSpeech,\n confidence: speechScore,\n details: result,\n shouldProcess: isHumanSpeech\n });\n } catch (classificationError) {\n // console.warn('Classification failed, defaulting to yes [rate limit]', classificationError);\n console.warn('Classification failed, defaulting to yes [rate limit]',);\n // Default to \"yes\" for any classification errors (including rate limits)\n return c.json({\n isHumanSpeech: true,\n confidence: 1,\n details: [],\n shouldProcess: true\n });\n }\n } catch (error) {\n console.error('Speech classification failed:', error);\n return c.json({ error: error.message }, 500);\n }\n};\n\n// Add new handler\nexport const validateTranscriptHandler = async (c) => {\n try {\n const formData = await c.req.formData();\n const messages = JSON.parse(formData.get('messages'));\n const model = formData.get('model') || 'mixtral-8x7b-32768';\n const temperature = parseFloat(formData.get('temperature')) || 0.1;\n const maxTokens = parseInt(formData.get('max_tokens')) || 256;\n\n const completion = await groq.chat.completions.create({\n messages,\n model,\n temperature,\n max_tokens: maxTokens,\n response_format: { type: \"json_object\" } // Enable JSON mode\n });\n\n return c.json(completion);\n } catch (error) {\n console.error('Transcript validation failed:', error);\n return c.json({ error: error.message }, 500);\n }\n};\n\n// Add new chat completion handler\nexport const chatCompletionHandler = async (c) => {\n try {\n const formData = await c.req.formData();\n const messages = JSON.parse(formData.get('messages'));\n const transcriptContext = formData.get('transcriptContext')?.toString() || '';\n const temperature = parseFloat(formData.get('temperature')?.toString() || '0.2');\n const model = formData.get('model')?.toString() || 'llama-3.1-8b-instant';\n const systemPrompt = formData.get('systemPrompt')?.toString();\n const isAutoChat = formData.get('isAutoChat') === 'true';\n\n // Add different system prompt for auto-chat\n const autoChatPrompt = `You are a helpful AI assistant analyzing real-time transcripts.\nYour role is to:\n1. Monitor for technical terms or jargon\n2. Provide very brief, clear explanations when needed\n3. Stay quiet (respond with \"...\") if no explanation is needed\n4. Keep responses under 2 sentences\n5. Focus only on technical terminology, ignore conversation context\n\nExample:\nTranscript: \"We need to implement a REST API with proper CRUD operations\"\nResponse: \"REST API: Style of web API using HTTP methods. CRUD: Create, Read, Update, Delete - basic data operations.\"\n\nTranscript: \"Let's grab coffee later\"\nResponse: \"...\"`;\n\n const finalSystemPrompt = isAutoChat ? autoChatPrompt : systemPrompt;\n \n // Trim transcript context to max length from the end\n const trimmedContext = transcriptContext.slice(-MAX_TRANSCRIPT_CONTEXT);\n \n // Add system message with transcript context and custom prompt\n const systemMessage = {\n role: \"system\",\n content: `${finalSystemPrompt || ''}\\n\\nTranscript context:\\n\\n${trimmedContext}`\n };\n \n const completion = await groq.chat.completions.create({\n messages: [systemMessage, ...messages],\n model,\n temperature,\n max_tokens: 1024,\n top_p: 1,\n stream: true\n });\n\n // Set up SSE response\n c.header('Content-Type', 'text/event-stream');\n\n return new Response(\n new ReadableStream({\n async start(controller) {\n const encoder = new TextEncoder();\n \n for await (const chunk of completion) {\n const content = chunk.choices[0]?.delta?.content || '';\n if (content) {\n controller.enqueue(encoder.encode(`data: ${JSON.stringify({\n type: 'chat',\n content\n })}\\n\\n`));\n }\n }\n controller.close();\n }\n })\n );\n } catch (error: any) {\n console.error(\"Chat completion failed:\", error);\n return c.json({ error: `Chat failed: ${error.message}` }, 500);\n }\n};\n\n// Inlined content from ./styles.js\nexport const getTailwindConfig = () => ({\n theme: {\n extend: {\n colors: {\n 'primary': '#004699',\n 'accent': '#FFFBEB',\n 'background': '#F5F4F4',\n 'page-bg': '#EBF4FF',\n 'app-bg': '#FFFFFF',\n 'app-bg-alt': '#FFFFFF',\n 'app-black': '#004699',\n 'app-accent': '#FFF2C2',\n 'secondary': '#D9D5D4',\n 'text': '#100C04',\n 'button': '#004699',\n 'button-hover': '#0063CC',\n 'button-secondary': '#D6EAFF',\n 'button-secondary-hover': '#99CAFF',\n 'button-secondary-accent': '#161413',\n 'grad-start': '#FFF2C2',\n 'grad-end': '#D1F0DE',\n }\n }\n }\n})\n\nexport const getStyles = () => `\n\n @tailwind base;\n @tailwind components;\n @tailwind utilities;\n\n body {\n @apply bg-gradient-to-b from-grad-start to-grad-end bg-grad-end min-h-screen;\n }\n .AppBody {\n @apply text-text py-4 min-h-screen;\n }\n .AppContainer {\n @apply container mx-auto max-w-2xl;\n }\n .App {\n @apply mx-2 md:mx-auto p-4 bg-app-bg border border-app-accent rounded-md shadow-lg;\n }\n .AppLogo {\n @apply mb-2;\n }\n h1 {\n @apply text-3xl font-semibold mb-4 text-primary;\n }\n textarea {\n @apply w-full mb-4 py-2 px-4 bg-app-bg-alt border border-app-accent rounded-md focus:outline-none focus:ring-1 focus:ring-secondary;\n }\n\n button.cta {\n @apply bg-button text-white px-2 py-2 rounded-md hover:bg-button-hover transition duration-300;\n }\n button:disabled {\n @apply opacity-50 cursor-not-allowed;\n }\n #textOutput {\n @apply text-sm my-0 w-full bg-accent border-0 rounded-md whitespace-pre-wrap;\n }\n .AppFooter {\n @apply mt-4 text-center text-sm;\n }\n .AppFooter a {\n @apply text-primary hover:text-button-hover underline;\n }\n select {\n @apply w-full py-2 px-4 pr-8 bg-app-bg-alt border border-app-accent rounded-md appearance-none focus:outline-none focus:ring-1 focus:ring-secondary;\n }\n .form-checkbox {\n @apply rounded border-gray-300 text-button focus:ring-button;\n }\n details summary {\n @apply mb-2;\n }\n \n textarea {\n @apply block text-primary w-full mt-2 p-2 bg-app-bg-alt border border-app-accent rounded-md focus:outline-none focus:ring-1 focus:ring-secondary;\n }\n \n /* Add history styles */\n .history-item {\n @apply p-2 bg-accent hover:bg-app-bg-alt border border-app-accent rounded-md cursor-pointer transition-colors;\n }\n .delete-button {\n @apply self-end bg-button-secondary text-white px-2 py-1 rounded text-sm hover:bg-button-secondary-hover transition-colors;\n }\n button.text-sm {\n @apply text-xs bg-button-secondary border border-button-secondary-accent text-button-secondary-accent px-2 py-1 rounded-md hover:bg-button-secondary-hover transition duration-300;\n }\n .TextOutput {\n @apply mt-4;\n }\n .TextOutput-content {\n @apply p-4 bg-app-bg-alt border border-primary rounded-md;\n }\n .TextOutput-header {\n @apply mb-2 text-xs text-gray-600 flex justify-between items-center;\n }\n #textOutput {\n @apply resize-none focus:outline-none focus:ring-0;\n }\n .monaco-editor {\n @apply w-full border border-app-accent rounded-md;\n }\n .monaco-editor .monaco-scrollable-element > .scrollbar > .slider {\n background: rgba(100, 100, 100, 0.4) !important;\n }\n\n`;\n\n// Inlined content from ./plugins/useRecorder.js\nfunction useRecorder(Alpine) {\n const DEFAULT_CONFIG = {\n CHUNK_DURATION: 10, // increased to 10 seconds for main chunks\n VAD_WINDOW: 0.75, \n MAX_CHUNKS: 100,\n SAMPLE_RATE: 16000, \n VAD_OPTIONS: {\n positiveSpeechThreshold: 0.75,\n minSpeechFrames: 6,\n negativeSpeechThreshold: 0.6,\n preSpeechPadFrames: 3,\n redemptionFrames: 8\n }\n };\n \n const SUPPORTED_LANGUAGES = [\n { code: 'en', name: 'English', flag: '🇺🇸' },\n { code: 'es', name: 'Spanish', flag: '🇪🇸' },\n { code: 'fr', name: 'French', flag: '🇫🇷' },\n { code: 'de', name: 'German', flag: '🇩🇪' },\n { code: 'it', name: 'Italian', flag: '🇮🇹' },\n { code: 'pt', name: 'Portuguese', flag: '🇵🇹' },\n { code: 'nl', name: 'Dutch', flag: '🇳🇱' },\n { code: 'ru', name: 'Russian', flag: '🇷🇺' },\n { code: 'zh', name: 'Chinese', flag: '🇨🇳' },\n { code: 'ja', name: 'Japanese', flag: '🇯🇵' },\n { code: 'ko', name: 'Korean', flag: '🇰🇷' },\n ];\n\n const MAX_VAD_DURATION = 30000; // 30 seconds in milliseconds\n const MIN_SPEECH_DURATION = 5000; // 5 seconds in milliseconds\n\n const DEFAULT_WHISPER_MODEL = 'whisper-large-v3-turbo';\n\n function createRecorderStore(config = DEFAULT_CONFIG) {\n\n // Private variables\n let vadInstance = null;\n let micVad = null;\n let audioContext = null;\n let mediaStream = null;\n let scriptProcessor = null;\n let recordingStartTime = null;\n \n // Buffer for collecting 10s chunks\n let currentBuffer = [];\n const CHUNK_SIZE = config.SAMPLE_RATE * config.CHUNK_DURATION; // 10 seconds of audio\n\n // Natural speech detection variables\n let naturalSpeechBuffer = [];\n let isCurrentlySpeaking = false;\n\n // HF classification debounce\n let lastHFCall = 0;\n const HF_CALL_MINIMUM_INTERVAL = 2000; // 2 seconds between HF calls\n\n // Add new state for transcript validation\n let vadTimeoutId = null;\n\n let dbInstance = null;\n\n async function initializeDB() {\n if (!dbInstance) {\n dbInstance = new Dexie('ScribeDB');\n \n // Update schema to explicitly handle transcript data\n dbInstance.version(4).stores({ // Increment version number\n sessions: '++id, name, created, updated, transcripts'\n });\n\n try {\n await dbInstance.open();\n console.log('Database initialized with updated schema');\n } catch (error) {\n console.error('Failed to initialize database:', error);\n await Dexie.delete('ScribeDB');\n dbInstance = new Dexie('ScribeDB');\n dbInstance.version(4).stores({\n sessions: '++id, name, created, updated, transcripts'\n });\n await dbInstance.open();\n }\n }\n return dbInstance;\n }\n\n\n // Add to createRecorderStore state\n return {\n db: null,\n history: [],\n isServerSynced: false,\n sessionId: '',\n\n // Public state\n isRecording: false,\n status: 'Initializing...',\n vadStatus: 'passive', // 'passive', 'active', or 'processing'\n vadStatusText: 'Listening...',\n vadScale: 1,\n vadOpacity: 0.5,\n currentChunks: [],\n naturalSpeechChunks: [], \n transcribedChunks: [],\n elapsedTime: '00:00',\n timer: null,\n isProcessing: false,\n isPlaying: null,\n audioContext: null,\n currentSource: null,\n isTranscribing: false,\n transcription: null,\n audioUrl: '',\n transcriptionModel: DEFAULT_WHISPER_MODEL,\n responseFormat: 'text',\n language: 'en',\n transcriptionResult: null,\n uploadedFile: null,\n selectedLanguage: 'en',\n supportedLanguages: SUPPORTED_LANGUAGES,\n chatMessages: [],\n currentMessage: '',\n isChatting: false,\n autoChat: false,\n chatSettings: {\n temperature: 0.2,\n model: 'llama-3.1-70b-versatile',\n // model: 'llama-3.1-8b-instant',\n systemPrompt: `You are a helpful assistant.`\n },\n\n\n // Initialize the recorder\n async init() {\n await this.initializeVAD();\n this.db = await initializeDB();\n await this.loadSessions();\n },\n \n\n // VAD initialization\n async initializeVAD() {\n this.status = 'Initializing VAD...';\n try {\n // Initialize both VAD instances\n vadInstance = await vad.NonRealTimeVAD.new(config.VAD_OPTIONS);\n micVad = await vad.MicVAD.new({\n onSpeechStart: () => {\n console.log('[Natural Speech VAD] Speech started');\n isCurrentlySpeaking = true;\n naturalSpeechBuffer = [];\n this.vadStatus = 'active';\n this.vadStatusText = 'Speech detected';\n \n vadTimeoutId = setTimeout(async () => {\n if (isCurrentlySpeaking) {\n console.log('[Natural Speech VAD] Max duration reached, forcing processing');\n // Force stop and restart VAD\n await micVad.pause();\n isCurrentlySpeaking = false;\n this.vadStatus = 'processing';\n this.vadStatusText = 'Processing...';\n \n if (naturalSpeechBuffer.length > 0) {\n await this.processNaturalSpeechChunk(naturalSpeechBuffer, [{\n start: 0,\n end: naturalSpeechBuffer.length / config.SAMPLE_RATE * 1000,\n audio: naturalSpeechBuffer\n }]);\n }\n \n // Reset buffers\n naturalSpeechBuffer = [];\n \n // Reset status and restart VAD\n this.vadStatus = 'passive';\n this.vadStatusText = 'Listening...';\n await micVad.start();\n }\n }, MAX_VAD_DURATION);\n },\n onSpeechEnd: async (audio) => {\n console.log('[Natural Speech VAD] Speech ended, processing segment');\n isCurrentlySpeaking = false;\n this.vadStatus = 'processing';\n this.vadStatusText = 'Processing...';\n \n // Clear the timeout since speech ended naturally\n if (vadTimeoutId) {\n clearTimeout(vadTimeoutId);\n vadTimeoutId = null;\n }\n \n if (audio && audio.length > 0) {\n const duration = audio.length / config.SAMPLE_RATE * 1000; // Duration in ms\n \n if (duration < MIN_SPEECH_DURATION) {\n console.log('[Natural Speech VAD] Short segment detected, running classification');\n // Create WAV for classification\n const wavBuffer = vad.utils.encodeWAV(audio);\n const audioBlob = new Blob([wavBuffer], { type: 'audio/wav' });\n \n try {\n const formData = new FormData();\n formData.append('file', audioBlob, 'audio.wav');\n \n const classification = await fetch('/classify-speech', {\n method: 'POST',\n body: formData\n }).then(res => res.json());\n\n if (!classification.isHumanSpeech || classification.confidence < 0.35) {\n console.log('[Natural Speech VAD] Short segment classified as non-speech, skipping');\n this.vadStatus = 'passive';\n this.vadStatusText = 'Listening...';\n return;\n }\n } catch (error) {\n console.error('[Natural Speech VAD] Classification failed:', error);\n // Continue processing if classification fails\n }\n }\n\n await this.processNaturalSpeechChunk(audio, [{\n start: 0,\n end: audio.length / config.SAMPLE_RATE * 1000,\n audio: audio\n }]);\n }\n \n // Reset status after processing\n this.vadStatus = 'passive';\n this.vadStatusText = 'Listening...';\n },\n onVADMisfire: () => {\n console.log('[Natural Speech VAD] VAD misfire');\n isCurrentlySpeaking = false;\n naturalSpeechBuffer = [];\n this.vadStatus = 'passive';\n this.vadStatusText = 'Listening...';\n \n // Clear the timeout on misfire\n if (vadTimeoutId) {\n clearTimeout(vadTimeoutId);\n vadTimeoutId = null;\n }\n }\n });\n\n console.log('[' + this.getTimestamp() + '] VAD initialized successfully');\n this.status = 'Ready. Click \"Start Recording\" to begin...';\n } catch (error) {\n console.error('[' + this.getTimestamp() + '] Failed to initialize VAD:', error);\n this.status = 'Failed to initialize speech detection. Please refresh the page.';\n }\n },\n\n // Recording controls\n async toggleRecording() {\n if (this.isRecording) {\n await this.stopRecording();\n } else {\n // Only create new session when starting recording if no current session\n if (!this.currentSession) {\n await this.newSession();\n }\n await this.startRecording();\n }\n },\n\n async startRecording() {\n // Create session if none exists\n if (!this.currentSession) {\n await this.newSession();\n }\n \n // Update session state\n this.currentSession.updated = new Date().toISOString();\n await this.saveSessions();\n \n try {\n mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });\n audioContext = new AudioContext({\n sampleRate: config.SAMPLE_RATE\n });\n\n const source = audioContext.createMediaStreamSource(mediaStream);\n scriptProcessor = audioContext.createScriptProcessor(4096, 1, 1);\n\n // Reset buffers\n currentBuffer = [];\n naturalSpeechBuffer = [];\n\n // Start both VAD processes\n await micVad.start();\n \n scriptProcessor.onaudioprocess = async (e) => {\n if (this.isRecording) {\n const inputData = e.inputBuffer.getChannelData(0);\n await this.processAudioChunk(inputData);\n }\n };\n\n source.connect(scriptProcessor);\n scriptProcessor.connect(audioContext.destination);\n\n recordingStartTime = new Date();\n this.timer = setInterval(() => this.updateTimer(), 10);\n\n this.isRecording = true;\n this.status = 'Recording started...';\n this.vadStatus = 'passive';\n this.vadStatusText = 'Listening...';\n } catch (error) {\n console.error('[' + this.getTimestamp() + '] Failed to start recording:', error);\n this.status = 'Failed to start recording. Please check microphone permissions.';\n }\n },\n\n async stopRecording() {\n this.isRecording = false;\n\n // Clear VAD timeout if exists\n if (vadTimeoutId) {\n clearTimeout(vadTimeoutId);\n vadTimeoutId = null;\n }\n\n if (micVad) {\n await micVad.pause();\n }\n\n if (scriptProcessor) {\n scriptProcessor.disconnect();\n scriptProcessor = null;\n }\n\n if (mediaStream) {\n mediaStream.getTracks().forEach(track => track.stop());\n }\n\n if (audioContext) {\n await audioContext.close();\n audioContext = null;\n }\n\n // Clear all buffers\n currentBuffer = [];\n naturalSpeechBuffer = [];\n\n this.status = 'Recording stopped';\n clearInterval(this.timer);\n this.timer = null;\n recordingStartTime = null;\n this.vadStatus = 'passive';\n this.vadStatusText = 'Stopped';\n },\n\n initAudioContext() {\n if (!this.audioContext) {\n this.audioContext = new (window.AudioContext || window.webkitAudioContext)({\n sampleRate: config.SAMPLE_RATE\n });\n }\n return this.audioContext;\n },\n\n updateTimer() {\n if (!recordingStartTime) return;\n const elapsed = Date.now() - recordingStartTime;\n const minutes = Math.floor(elapsed / 60000).toString().padStart(2, '0');\n const seconds = Math.floor((elapsed % 60000) / 1000).toString().padStart(2, '0');\n const milliseconds = Math.floor((elapsed % 1000) / 10).toString().padStart(2, '0');\n this.elapsedTime = minutes + ':' + seconds + ':' + milliseconds;\n },\n\n getTimestamp() {\n return new Date().toLocaleString();\n },\n\n async playSegment(chunkIndex, segmentIndex) {\n try {\n if (this.isPlaying !== null) {\n await this.stopPlayback();\n }\n\n const chunk = this.currentChunks[chunkIndex];\n const segment = chunk.speechSegments[segmentIndex];\n const audioData = chunk.audio;\n\n if (!audioData || !segment) {\n console.log('[' + this.getTimestamp() + '] No audio or segment available', {\n hasAudio: !!audioData,\n hasSegment: !!segment,\n audioLength: audioData?.length,\n segment: segment\n });\n return;\n }\n\n const startSample = Math.floor((segment.start / 1000) * config.SAMPLE_RATE);\n const endSample = Math.floor((segment.end / 1000) * config.SAMPLE_RATE);\n const segmentAudio = segment.audio || audioData.slice(startSample, endSample);\n\n const ctx = this.initAudioContext();\n const audioBuffer = ctx.createBuffer(1, segmentAudio.length, config.SAMPLE_RATE);\n const channelData = audioBuffer.getChannelData(0);\n channelData.set(segmentAudio);\n\n const source = ctx.createBufferSource();\n source.buffer = audioBuffer;\n source.connect(ctx.destination);\n this.isPlaying = chunkIndex + '-' + segmentIndex;\n this.currentSource = source;\n\n source.onended = () => {\n this.isPlaying = null;\n this.currentSource = null;\n };\n\n await ctx.resume();\n source.start(0);\n console.log('[' + this.getTimestamp() + '] Playing chunk', chunkIndex, 'segment', segmentIndex);\n } catch (error) {\n console.error('[' + this.getTimestamp() + '] Error playing chunk:', error);\n this.isPlaying = null;\n this.currentSource = null;\n }\n },\n\n async stopPlayback() {\n if (this.currentSource) {\n try {\n this.currentSource.stop();\n console.log('[' + this.getTimestamp() + '] Stopped playback');\n } catch (error) {\n console.error('[' + this.getTimestamp() + '] Error stopping playback:', error);\n }\n this.currentSource = null;\n }\n this.isPlaying = null;\n },\n\n async classifyAudioWithHF(audioData) {\n try {\n // Check if enough time has passed since last HF call\n const now = Date.now();\n if (now - lastHFCall < HF_CALL_MINIMUM_INTERVAL) {\n console.log('[HF Classification] Skipping - too soon since last call:', \n (now - lastHFCall) + 'ms');\n return {\n shouldProcess: true,\n confidence: 1,\n isHumanSpeech: true\n };\n }\n\n lastHFCall = now;\n const wavBuffer = vad.utils.encodeWAV(audioData);\n const audioBlob = new Blob([wavBuffer], { type: 'audio/wav' });\n\n const formData = new FormData();\n formData.append('file', audioBlob, 'audio.wav');\n\n console.log('[' + this.getTimestamp() + '] Classifying audio with HF. vadStatus:', this.vadStatus);\n\n if (this.vadStatus !== 'active') {\n console.log('[' + this.getTimestamp() + '] Skipping classification - VAD not active');\n return {\n reason: 'vad-not-active',\n shouldProcess: false,\n confidence: 1,\n isHumanSpeech: false\n };\n }\n\n const response = await fetch('/classify-speech', {\n method: 'POST',\n body: formData\n });\n\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const result = await response.json();\n\n console.log('[' + this.getTimestamp() + '] HF classification result:', result);\n if (result.error) {\n throw new Error(result.error);\n }\n\n return result;\n } catch (error) {\n console.error('[' + this.getTimestamp() + '] Speech classification error:', error);\n // Return a default positive response on error to allow processing to continue\n return {\n reason: 'hf-rate-limit',\n shouldProcess: true,\n confidence: 1,\n isHumanSpeech: true\n };\n }\n },\n\n async transcribeRecording() {\n if (this.isTranscribing || this.currentChunks.length === 0) return;\n\n this.isTranscribing = true;\n\n try {\n // Combine all audio chunks into a single blob\n const chunks = this.currentChunks.reduce((acc, chunk) => [...acc, ...chunk.audioData], []);\n const audioBlob = new Blob(chunks, { type: 'audio/wav' });\n\n // Create form data\n const formData = new FormData();\n formData.append('file', audioBlob, 'recording.wav');\n formData.append('model', 'whisper-large-v3-turbo');\n\n // Send to transcription endpoint\n const response = await fetch('/transcript', {\n method: 'POST',\n body: formData\n });\n\n const reader = response.body.getReader();\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n const text = new TextDecoder().decode(value);\n const messages = text.split('\\n\\n');\n\n for (const message of messages) {\n if (message.startsWith('data: ')) {\n const data = JSON.parse(message.slice(6));\n\n if (data.type === 'transcript') {\n this.transcription = data.message.content;\n } else if (data.type === 'error') {\n console.error('Transcription error:', data.content);\n throw new Error(data.content);\n }\n }\n }\n }\n } catch (error) {\n console.error('Transcription failed:', error);\n alert('Transcription failed: ' + error.message);\n } finally {\n this.isTranscribing = false;\n }\n },\n\n getModelDescription() {\n const modelDescriptions = {\n [DEFAULT_WHISPER_MODEL]: 'A fast, multilingual model optimized for speed.',\n 'distil-whisper-large-v3-en': 'English-only model optimized for speed and cost.',\n 'whisper-large-v3': 'High-accuracy multilingual model for transcription and translation.'\n };\n return modelDescriptions[this.transcriptionModel] || '';\n },\n\n handleFileUpload(event) {\n this.uploadedFile = event.target.files[0];\n const file = event.target.files[0];\n if (file) {\n this.audioUrl = ''; // Clear URL when file is selected\n }\n },\n\n async transcribeAudio() {\n if (!this.audioUrl && !document.querySelector('input[type=\"file\"]').files[0]) {\n alert('Please provide either an audio URL or file');\n return;\n }\n\n this.isTranscribing = true;\n this.transcriptionResult = null;\n\n try {\n // Create new session only if transcribing and no current session\n if (!this.currentSession) {\n await this.newSession();\n }\n\n const formData = new FormData();\n const source = this.audioUrl || document.querySelector('input[type=\"file\"]').files[0];\n \n if (this.audioUrl) {\n formData.append('url', this.audioUrl);\n } else {\n formData.append('file', document.querySelector('input[type=\"file\"]').files[0]);\n }\n \n formData.append('model', this.transcriptionModel);\n formData.append('response_format', this.responseFormat);\n formData.append('language', this.selectedLanguage);\n\n const response = await fetch('/transcribe', {\n method: 'POST',\n body: formData\n });\n\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const data = await response.json();\n if (data.error) {\n throw new Error(data.error);\n }\n\n // Create a new chunk with serializable data\n const newChunk = {\n startTime: new Date().toISOString(),\n endTime: new Date().toISOString(),\n transcript: data.transcript?.text || data.transcript,\n type: 'upload',\n source: this.uploadedFile?.name || this.audioUrl,\n segments: data.transcript?.segments ? \n data.transcript.segments.map(segment => ({\n ...segment,\n start: Number(segment.start),\n end: Number(segment.end),\n text: String(segment.text)\n })) : []\n };\n\n console.log('[building newChunk]:', newChunk, data)\n\n // Add to transcribedChunks\n this.transcribedChunks = [\n ...this.transcribedChunks,\n {\n startTime: new Date(newChunk.startTime),\n endTime: new Date(newChunk.endTime),\n transcript: newChunk.transcript,\n type: 'upload',\n source: newChunk.source,\n segments: newChunk.segments\n }\n ];\n\n // Update current session\n if (!this.currentSession) {\n await this.newSession();\n }\n\n if (this.currentSession) {\n this.currentSession.transcripts = [\n ...(this.currentSession.transcripts || []),\n newChunk\n ];\n await this.saveSessions();\n }\n\n // Send to chat if auto-chat is enabled\n await this.sendTranscriptToChat(newChunk.transcript);\n\n // Clear the inputs\n this.audioUrl = '';\n this.uploadedFile = null;\n document.querySelector('input[type=\"file\"]').value = '';\n\n } catch (error) {\n console.error('Transcription failed:', error);\n alert('Transcription failed: ' + error.message);\n } finally {\n this.isTranscribing = false;\n }\n },\n\n async processNaturalSpeechChunk(audioData, speechSegments) {\n if (!audioData || audioData.length < 1024) return;\n\n try {\n console.log('[Natural Speech] Processing chunk of length:', audioData.length);\n \n const wavBuffer = vad.utils.encodeWAV(audioData);\n const audioBlob = new Blob([wavBuffer], { type: 'audio/wav' });\n\n const formData = new FormData();\n formData.append('file', audioBlob, 'audio.wav');\n formData.append('model', DEFAULT_WHISPER_MODEL);\n formData.append('response_format', 'verbose_json');\n formData.append('language', this.selectedLanguage);\n formData.append('temperature', '0');\n\n console.log('[Natural Speech] Sending chunk for transcription with params:', {\n model: DEFAULT_WHISPER_MODEL,\n language: this.selectedLanguage\n });\n \n const response = await fetch('/transcript', {\n method: 'POST',\n body: formData\n });\n\n if (!response.ok) {\n throw new Error('HTTP error! status: ' + response.status);\n }\n\n // Process the SSE response\n const reader = response.body.getReader();\n const decoder = new TextDecoder();\n let buffer = '';\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n buffer += decoder.decode(value, { stream: true });\n const lines = buffer.split('\\n\\n');\n buffer = lines.pop() || '';\n\n for (const line of lines) {\n if (line.startsWith('data: ')) {\n const data = JSON.parse(line.slice(6));\n if (data.type === 'transcript') {\n const transcript = data.message.content;\n if (transcript && transcript !== '.') {\n const newChunk = {\n // Remove audio data from storage\n // audio: audioData, // Don't store audio\n speechSegments,\n duration: audioData.length / config.SAMPLE_RATE,\n startTime: new Date(Date.now() - (audioData.length / config.SAMPLE_RATE * 1000)),\n endTime: new Date(),\n transcript,\n type: 'natural'\n };\n\n this.naturalSpeechChunks = [...this.naturalSpeechChunks, newChunk];\n \n // Immediately update session with new transcript\n if (this.currentSession) {\n this.currentSession.transcripts.push({\n text: transcript,\n timestamp: newChunk.startTime.toISOString(),\n type: 'natural'\n });\n await this.saveSessions();\n }\n\n await this.sendTranscriptToChat(transcript);\n }\n }\n }\n }\n }\n } catch (error) {\n console.error('[Natural Speech] Error processing chunk:', error);\n }\n },\n\n async validateTranscriptWithGroq(transcript, previousTranscripts = []) {\n try {\n const formData = new FormData();\n formData.append('messages', JSON.stringify([\n {\n role: \"system\",\n content: `You are a speech-to-text correction assistant that validates transcripts.\n Analyze the transcript and return a JSON object with this structure:\n {\n \"needsCorrection\": boolean,\n \"original\": string,\n \"suggested\": string | null,\n \"confidence\": number (0-1)\n }\n \n Rules:\n - Only fix obvious speech-to-text errors\n - Ignore grammar/style/clarity issues\n - Set needsCorrection to false if no changes needed\n - Set suggested to null if no changes needed\n - Confidence should reflect certainty of correction`\n },\n {\n role: \"user\",\n content: `Previous lines:\n ${previousTranscripts.slice(-3).join('\\n')}\n \n Check this line:\n \"${transcript}\"`\n }\n ]));\n formData.append('model', 'mixtral-8x7b-32768');\n formData.append('temperature', '0.1');\n formData.append('max_tokens', '256');\n\n const response = await fetch('/validate-transcript', {\n method: 'POST',\n body: formData\n });\n\n if (!response.ok) {\n throw new Error('Validation request failed');\n }\n\n const result = await response.json();\n const validation = JSON.parse(result.choices[0].message.content);\n return validation;\n } catch (error) {\n console.error('[Transcript Validation] Error:', error);\n return {\n needsCorrection: false,\n original: transcript,\n suggested: null,\n confidence: 1\n };\n }\n },\n\n // Update the transcript processing to use the new validation format\n async processTranscript(transcript) {\n if (!transcript || transcript === '.') return;\n\n const previousTranscripts = this.currentChunks\n .slice(-3)\n .map(chunk => chunk.transcript)\n .filter(Boolean);\n\n const validation = await this.validateTranscriptWithGroq(\n transcript, \n previousTranscripts\n );\n\n // Store validation result\n this.lastValidatedTranscript = validation.original;\n this.suggestedCorrections = validation.suggested;\n\n return {\n text: validation.original,\n suggested: validation.suggested,\n confidence: validation.confidence,\n needsCorrection: validation.needsCorrection\n };\n },\n\n // Modify the chunk processing to use the new validation\n async processAudioChunk(audioData) {\n if (audioData.length < 1024) return;\n\n try {\n\n // Add new audio data to current buffer\n currentBuffer.push(...Array.from(audioData));\n\n // Process 10s chunks as before\n if (currentBuffer.length >= CHUNK_SIZE) {\n // Extract exactly 10s of audio\n // Run VAD on the chunk\n const speechSegments = [];\n vadInstance.run = function(){}\n {}\n speechSegments.push({ audio, start, end });\n }\n\n }\n\n // Natural speech is now handled by MicVAD events\n } catch (error) {\n console.error('[Audio Processing] Error:', error);\n }\n },\n\n\n\n };\n }\n \n Alpine.store('recorder', createRecorderStore());\n}\n\n// Export the function properly\nexport const useRecorderExport = `\n const useRecorder = ${useRecorder.toString()};\n \n document.addEventListener('alpine:init', () => {\n useRecorder(Alpine);\n });\n`;\n\n// Inlined content from ./auth.ts\nconst AUTH_SERVICE_URL = \"https://auth.labspace.ai\";\n\n// Auth middleware\nexport const checkAuth = async (c, next) => {\n const cookies = c.req.header('Cookie');\n const sessionMatch = cookies?.match(/auth_session=([^;]+)/);\n const sessionToken = sessionMatch?.[1];\n\n if (sessionToken) {\n try {\n const response = await fetch(`${AUTH_SERVICE_URL}/api/auth/user`, {\n headers: {\n 'Cookie': cookies,\n 'Accept': 'application/json'\n },\n mode: 'cors',\n credentials: 'include'\n });\n\n if (response.ok) {\n const result = await response.json();\n result.sessionId = sessionToken;\n c.set('user', result);\n }\n } catch (error) {\n console.error('[checkAuth] error:', error);\n }\n }\n\n await next();\n};\n\n// OAuth callback handler\nexport const handleOAuthCallback = async (c) => {\n const searchParams = new URL(c.req.url).searchParams;\n const sessionToken = searchParams.get(\"session_token\");\n const error = searchParams.get(\"error\");\n\n if (error) {\n return c.html(`\n \n `);\n }\n\n if (!sessionToken) {\n return c.html(`\n \n `);\n }\n\n c.header(\"Set-Cookie\", `auth_session=${sessionToken}; Path=/; SameSite=Lax`);\n\n return c.html(`\n \n `);\n}; \n// Inlined content from ./plugins/useAuth.js\n// Based on threadg1rl's auth system\nfunction useAuth(Alpine) {\n Alpine.data('authApp', () => ({\n user: {},\n isLoggingIn: false,\n\n init() {\n console.log('[initAuth] init');\n if (window.initialUserData) {\n console.log('[initAuth] user:', window.initialUserData);\n this.user = window.initialUserData;\n // Set the session ID if available\n if (this.user.sessionId) {\n Alpine.store('recorder').sessionId = this.user.sessionId;\n }\n }\n },\n\n loginWithGithub() {\n console.log('Logging in with GitHub');\n this.isLoggingIn = true;\n window.location.href = \"https://auth.labspace.ai/auth/github?redirect_uri=\" + encodeURIComponent(window.location.origin + \"/callback\");\n },\n\n loginWithGoogle() {\n console.log('Logging in with Google');\n this.isLoggingIn = true;\n window.location.href = \"https://auth.labspace.ai/auth/google?redirect_uri=\" + encodeURIComponent(window.location.origin + \"/callback\");\n },\n\n async handleLogout(e) {\n e.preventDefault();\n\n try {\n await fetch(\"https://auth.labspace.ai/logout\", {\n method: 'POST',\n credentials: 'include',\n mode: 'cors'\n });\n\n // Clear cookie\n document.cookie = 'auth_session=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';\n\n // Reset user state and session ID\n this.user = {};\n Alpine.store('recorder').sessionId = '';\n\n // Reload page\n window.location.reload();\n } catch (error) {\n console.error('[handleLogout] error:', error);\n }\n }\n }));\n}\n\n// Export the function properly\nexport const useAuthExport = `\n const useAuth = ${useAuth.toString()};\n \n document.addEventListener('alpine:init', () => {\n useAuth(Alpine);\n });\n`;\n\n\n\n\n// SVG icons for auth buttons\nconst githubSvg = ``.replace(/\"/g, '"');\nconst googleSvg = ``.replace(/\"/g, '"');\n\n// Auth UI template\nexport const authTemplate = `\n

\n \n \n \n

\n`; \n\nconst app = new Hono();\napp.post(\"/transcript\", transcriptHandler);\napp.post(\"/transcribe\", uploadTranscribeHandler);\napp.post(\"/classify-speech\", classifySpeechHandler);\n// app.post(\"/validate-transcript\", validateTranscriptHandler);\napp.post(\"/chat\", chatCompletionHandler);\napp.use('/*', checkAuth);\napp.get(\"/callback\", handleOAuthCallback);\nconst getHtml = () => `\n\n\n\n \n \n \n Scribe • Audio Recorder\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n

\n ${authTemplate}\n

\n \n

\n \n \n \n \n \n \n\n \n

\n \n

\n\n \n

\n \n \n \n \n \n Upload\n \n \n \n

\n \n \n

\n \n

\n\n \n \n

\n\n \n \n\n \n \n

\n \n

\n\n \n

\n \n Auto-chat with transcripts\n

\n\n \n

\n \n \n \n \n \n \n

\n \n

\n \n Temperature: \n \n \n

\n\n \n

\n Model\n

\n \n

\n Selected model affects response quality and speed\n

\n\n \n

\n System Instructions\n \n

\n\n \n

Sessions

\n \n

\n\n \n

\n\n

\n\n \n

\n A labspace.ai experiment\n

\n \n \n\n`;\n\napp.get(\"/\", async (c) => {\n let html = getHtml();\n const userData = c.get('user');\n if (userData) {\n const initScript = `\n \n `;\n return c.html(html.replace('', initScript + ''));\n }\n return c.html(html);\n});\n\n// Export app.fetch for Val Town, otherwise export app\nexport default (typeof Deno !== \"undefined\" && Deno.env.get(\"valtown\")) ? app.fetch : app;\n// export default app;","import { Hono } from \"https://deno.land/x/hono@v3.11.7/mod.ts\";\n// Inlined content from ./middleware.ts\nimport \"jsr:@std/dotenv/load\"\nimport { Groq } from \"npm:groq-sdk\";\nconst groq = new Groq();\nimport { HfInference } from \"npm:@huggingface/inference\";\nconst hf = new HfInference(Deno.env.get(\"HUGGINGFACE_API_KEY\"));\n\nconst MAX_CHUNK_SIZE_BYTES = 25 * 1024 * 1024; // 25 MB in bytes\nconst DEFAULT_WHISPER_MODEL = 'whisper-large-v3-turbo';\nconst MAX_TRANSCRIPT_CONTEXT = 3000; // Characters to keep from transcript history\n\ntype WhisperModel = 'whisper-large-v3-turbo' | 'distil-whisper-large-v3-en' | 'whisper-large-v3';\ntype WhisperResponseFormat = 'json' | 'verbose_json' | 'text';\n\ninterface TranscriptionParams {\n model?: WhisperModel;\n prompt?: string;\n response_format?: WhisperResponseFormat;\n language?: string;\n temperature?: number;\n}\n\ninterface Transcription {\n text: string;\n segments?: Array<{\n start: number;\n end: number;\n text: string;\n }>;\n duration?: number;\n}\n\n// Helper function to normalize transcription response\nfunction normalizeTranscription(response: string | Transcription): Transcription {\n if (typeof response === 'string') {\n return { text: response };\n }\n return response;\n}\n\n// Fetch the size of the file using HTTP HEAD request\nexport async function fetchFileSize(url: string): Promise {\n const response = await fetch(url, { method: 'HEAD' });\n const contentLength = response.headers.get('content-length');\n return contentLength ? parseInt(contentLength, 10) : 0;\n}\n\n// Transcribe a single chunk of audio data using Deno's ReadableStream\nasync function transcribeChunk(buffer: Uint8Array, params: TranscriptionParams): Promise {\n console.log('Transcribing chunk with params:', {\n model: params.model,\n language: params.language,\n response_format: params.response_format\n });\n \n const blob = new Blob([buffer], { type: 'audio/wav' });\n const file = new File([blob], 'audio.wav', { type: 'audio/wav' });\n\n const transcription = await groq.audio.transcriptions.create({\n file,\n model: params?.model || DEFAULT_WHISPER_MODEL,\n prompt: params?.prompt,\n response_format: params?.response_format || 'text',\n language: params?.language || 'en',\n temperature: 0 // Set to 0 for consistency\n });\n\n return normalizeTranscription(transcription);\n}\n\n// Add this interface\ninterface AudioInput {\n type: 'url' | 'file';\n content: string | File;\n}\n\nexport async function transcribeAudio(input: AudioInput, params: TranscriptionParams): Promise {\n console.log('Transcribing audio with params:', params);\n \n let fileSize: number;\n let getBuffer: (start: number, end: number) => Promise;\n\n if (input.type === 'file') {\n const file = input.content as File;\n fileSize = file.size;\n \n // For files, create buffer getter that slices the file\n getBuffer = async (start: number, end: number) => {\n const slice = file.slice(start, end + 1);\n const arrayBuffer = await slice.arrayBuffer();\n return new Uint8Array(arrayBuffer);\n };\n } else {\n const url = input.content as string;\n fileSize = await fetchFileSize(url);\n \n // For URLs, create buffer getter that fetches ranges\n getBuffer = async (start: number, end: number) => {\n const response = await fetch(url, {\n headers: { Range: `bytes=${start}-${end}` },\n });\n if (!response.ok && response.status !== 206) {\n throw new Error(`Failed to fetch range ${start}-${end}: ${response.statusText}`);\n }\n const arrayBuffer = await response.arrayBuffer();\n return new Uint8Array(arrayBuffer);\n };\n }\n\n if (fileSize === 0) {\n throw new Error('Unable to determine the file size.');\n }\n\n if (fileSize <= MAX_CHUNK_SIZE_BYTES) {\n // Handle small files directly\n if (input.type === 'file') {\n const file = input.content as File;\n const transcription = await groq.audio.transcriptions.create({\n file,\n model: params?.model || DEFAULT_WHISPER_MODEL,\n prompt: params?.prompt,\n response_format: params?.response_format || 'verbose_json',\n language: params?.language || 'en',\n temperature: params?.temperature,\n });\n return normalizeTranscription(transcription);\n } else {\n const url = input.content as string;\n const transcription = await groq.audio.transcriptions.create({\n url,\n model: params?.model || DEFAULT_WHISPER_MODEL,\n prompt: params?.prompt,\n response_format: params?.response_format || 'text',\n language: params?.language || 'en',\n temperature: params?.temperature,\n });\n return normalizeTranscription(transcription);\n }\n }\n\n // Handle large files by splitting into equal-sized chunks\n const numChunks = Math.ceil(fileSize / MAX_CHUNK_SIZE_BYTES);\n const chunkSize = Math.ceil(fileSize / numChunks);\n const transcriptions: (string | Transcription)[] = [];\n\n for (let i = 0; i < numChunks; i++) {\n const start = i * chunkSize;\n const end = Math.min((i + 1) * chunkSize - 1, fileSize - 1);\n\n console.log(`Processing chunk ${i + 1}/${numChunks} (bytes ${start}-${end})`);\n const buffer = await getBuffer(start, end);\n\n try {\n const transcription = await transcribeChunk(buffer, {\n ...params,\n model: params.model || DEFAULT_WHISPER_MODEL,\n language: params.language || 'en'\n });\n transcriptions.push(transcription);\n } catch (error: any) {\n console.error(`Error transcribing chunk ${i + 1}:`, error);\n throw new Error(`Transcription failed for chunk ${i + 1}: ${error.message}`);\n }\n }\n\n // Handle joining based on response format\n if (params.response_format === 'text' || !params.response_format) {\n const combinedText = transcriptions.map(t => {\n const normalized = normalizeTranscription(t);\n return normalized.text;\n }).join(' ');\n return { text: combinedText };\n } else {\n // For JSON responses, combine segments and adjust timestamps\n const firstChunk = normalizeTranscription(transcriptions[0]);\n const combinedResponse: Transcription = {\n text: firstChunk.text,\n segments: firstChunk.segments || [],\n duration: firstChunk.duration || 0\n };\n\n let timeOffset = combinedResponse.duration || 0;\n\n for (let i = 1; i < transcriptions.length; i++) {\n const currentChunk = normalizeTranscription(transcriptions[i]);\n\n if (currentChunk.segments && combinedResponse.segments) {\n const adjustedSegments = currentChunk.segments.map(segment => ({\n ...segment,\n start: segment.start + timeOffset,\n end: segment.end + timeOffset\n }));\n combinedResponse.segments.push(...adjustedSegments);\n }\n\n combinedResponse.duration = (combinedResponse.duration || 0) + (currentChunk.duration || 0);\n combinedResponse.text += ' ' + currentChunk.text;\n\n timeOffset += currentChunk.duration || 0;\n }\n\n return combinedResponse;\n }\n}\n\nasync function getTranscript(data) {\n try {\n console.log(\"Starting transcription...\");\n\n let input;\n let fileToTranscribe;\n \n // Extract parameters from FormData\n const language = data.get('language') || 'en';\n const model = data.get('model') || DEFAULT_WHISPER_MODEL;\n \n console.log(\"Transcript params:\", { language, model });\n\n // Check if formData is a JSON object with a URL\n if (data.url) {\n console.log(\"Processing URL input:\", data.url);\n input = {\n type: 'url' as const,\n content: data.url\n };\n } else {\n // Handle file upload\n const file = data.get('file');\n if (!file) {\n throw new Error('No file found in form data');\n }\n\n console.log(\"Input file:\", {\n name: file.name,\n size: file.size,\n type: file.type\n });\n\n fileToTranscribe = file instanceof File ? file :\n new File([file], 'audio.wav', { type: file.type || 'audio/wav' });\n\n input = {\n type: 'file' as const,\n content: fileToTranscribe\n };\n }\n\n const params: TranscriptionParams = {\n model,\n response_format: 'text',\n language,\n temperature: 0\n };\n\n console.log(\"Using transcription params:\", params);\n\n const transcription = await transcribeAudio(input, params);\n const transcriptText = typeof transcription === 'string' ?\n transcription : transcription.text;\n\n console.log(\"Transcription completed:\", transcriptText);\n return transcriptText.trim() || null;\n\n } catch (error) {\n console.error(\"Transcription failed:\", error);\n return null;\n }\n}\n\n// Add this interface for JSON responses\ninterface TranscriptionResponse {\n transcript: string | {\n text: string;\n segments?: Array<{\n start: number;\n end: number;\n text: string;\n }>;\n };\n}\n\n// Keep existing transcriptHandler for SSE responses during recording\nexport const transcriptHandler = async (c) => {\n c.header('Content-Type', 'text/event-stream');\n\n console.log('Starting transcript handler');\n\n return new Response(\n new ReadableStream({\n async start(controller) {\n const encoder = new TextEncoder();\n try {\n const formData = await c.req.formData();\n const transcript = await getTranscript(formData);\n \n if (!transcript) {\n throw new Error('Invalid audio or transcription failed');\n }\n\n const messageWithTimestamp = {\n timestamp: new Date().toLocaleString(),\n content: transcript\n };\n\n controller.enqueue(encoder.encode(`data: ${JSON.stringify({ \n type: 'transcript', \n message: messageWithTimestamp \n })}\\n\\n`));\n\n } catch (error) {\n controller.enqueue(encoder.encode(`data: ${JSON.stringify({ \n type: 'error', \n content: error.message, \n timestamp: new Date().toLocaleString() \n })}\\n\\n`));\n }\n controller.close();\n }\n })\n );\n};\n\n// Add new transcribeHandler for file/URL uploads\nexport const uploadTranscribeHandler = async (c) => {\n try {\n let file: File | null = null;\n let url: string | null = null;\n let params: TranscriptionParams = {\n model: DEFAULT_WHISPER_MODEL,\n response_format: 'text',\n language: 'en'\n };\n\n const contentType = c.req.header('content-type');\n \n if (contentType?.includes('multipart/form-data')) {\n const formData = await c.req.formData();\n file = formData.get('file') as File | null;\n url = formData.get('url') as string | null;\n \n console.log('Received language:', formData.get('language'));\n \n params = {\n model: (formData.get('model') as WhisperModel) || DEFAULT_WHISPER_MODEL,\n response_format: (formData.get('response_format') as WhisperResponseFormat) || 'text',\n language: formData.get('language')?.toString() || 'en',\n prompt: formData.get('prompt')?.toString(),\n temperature: formData.get('temperature') ? parseFloat(formData.get('temperature').toString()) : undefined,\n };\n }\n\n console.log('Using transcription params:', params);\n\n const input: AudioInput = file \n ? { type: 'file', content: file }\n : { type: 'url', content: url! };\n \n const transcription = await transcribeAudio(input, params);\n \n return c.json({\n transcript: params.response_format === 'text' ? \n transcription.text :\n {\n text: transcription.text,\n ...(transcription.segments && { segments: transcription.segments })\n }\n });\n } catch (error: any) {\n console.error(\"Transcription failed:\", error);\n return c.json({ error: `Transcription failed: ${error.message}` }, 500);\n }\n};\n\n\nexport const classifySpeechHandler = async (c) => {\n try {\n let file;\n const contentType = c.req.header('content-type');\n\n if (contentType?.includes('multipart/form-data')) {\n const formData = await c.req.formData();\n file = formData.get('file');\n } else if (contentType?.includes('application/json')) {\n const body = await c.req.json();\n if (body.url) {\n const response = await fetch(body.url);\n const blob = await response.blob();\n file = new File([blob], 'audio.wav', { type: response.headers.get('content-type') || 'audio/wav' });\n }\n }\n\n if (!file) {\n return c.json({ error: 'No audio file or URL provided' }, 400);\n }\n\n try {\n const result = await hf.audioClassification({\n model: 'MIT/ast-finetuned-audioset-10-10-0.4593',\n data: file,\n });\n\n console.log('HF classification result:', result);\n\n const speechResult = result.find(pred => pred.label === 'Speech');\n const speechScore = speechResult?.score || 0;\n const SPEECH_THRESHOLD = 0.45;\n const isHumanSpeech = speechScore > SPEECH_THRESHOLD;\n\n return c.json({\n isHumanSpeech,\n confidence: speechScore,\n details: result,\n shouldProcess: isHumanSpeech\n });\n } catch (classificationError) {\n // console.warn('Classification failed, defaulting to yes [rate limit]', classificationError);\n console.warn('Classification failed, defaulting to yes [rate limit]',);\n // Default to \"yes\" for any classification errors (including rate limits)\n return c.json({\n isHumanSpeech: true,\n confidence: 1,\n details: [],\n shouldProcess: true\n });\n }\n } catch (error) {\n console.error('Speech classification failed:', error);\n return c.json({ error: error.message }, 500);\n }\n};\n\n// Add new handler\nexport const validateTranscriptHandler = async (c) => {\n try {\n const formData = await c.req.formData();\n const messages = JSON.parse(formData.get('messages'));\n const model = formData.get('model') || 'mixtral-8x7b-32768';\n const temperature = parseFloat(formData.get('temperature')) || 0.1;\n const maxTokens = parseInt(formData.get('max_tokens')) || 256;\n\n const completion = await groq.chat.completions.create({\n messages,\n model,\n temperature,\n max_tokens: maxTokens,\n response_format: { type: \"json_object\" } // Enable JSON mode\n });\n\n return c.json(completion);\n } catch (error) {\n console.error('Transcript validation failed:', error);\n return c.json({ error: error.message }, 500);\n }\n};\n\n// Add new chat completion handler\nexport const chatCompletionHandler = async (c) => {\n try {\n const formData = await c.req.formData();\n const messages = JSON.parse(formData.get('messages'));\n const transcriptContext = formData.get('transcriptContext')?.toString() || '';\n const temperature = parseFloat(formData.get('temperature')?.toString() || '0.2');\n const model = formData.get('model')?.toString() || 'llama-3.1-8b-instant';\n const systemPrompt = formData.get('systemPrompt')?.toString();\n const isAutoChat = formData.get('isAutoChat') === 'true';\n\n // Add different system prompt for auto-chat\n const autoChatPrompt = `You are a helpful AI assistant analyzing real-time transcripts.\nYour role is to:\n1. Monitor for technical terms or jargon\n2. Provide very brief, clear explanations when needed\n3. Stay quiet (respond with \"...\") if no explanation is needed\n4. Keep responses under 2 sentences\n5. Focus only on technical terminology, ignore conversation context\n\nExample:\nTranscript: \"We need to implement a REST API with proper CRUD operations\"\nResponse: \"REST API: Style of web API using HTTP methods. CRUD: Create, Read, Update, Delete - basic data operations.\"\n\nTranscript: \"Let's grab coffee later\"\nResponse: \"...\"`;\n\n const finalSystemPrompt = isAutoChat ? autoChatPrompt : systemPrompt;\n \n // Trim transcript context to max length from the end\n const trimmedContext = transcriptContext.slice(-MAX_TRANSCRIPT_CONTEXT);\n \n // Add system message with transcript context and custom prompt\n const systemMessage = {\n role: \"system\",\n content: `${finalSystemPrompt || ''}\\n\\nTranscript context:\\n\\n${trimmedContext}`\n };\n \n const completion = await groq.chat.completions.create({\n messages: [systemMessage, ...messages],\n model,\n temperature,\n max_tokens: 1024,\n top_p: 1,\n stream: true\n });\n\n // Set up SSE response\n c.header('Content-Type', 'text/event-stream');\n\n return new Response(\n new ReadableStream({\n async start(controller) {\n const encoder = new TextEncoder();\n \n for await (const chunk of completion) {\n const content = chunk.choices[0]?.delta?.content || '';\n if (content) {\n controller.enqueue(encoder.encode(`data: ${JSON.stringify({\n type: 'chat',\n content\n })}\\n\\n`));\n }\n }\n controller.close();\n }\n })\n );\n } catch (error: any) {\n console.error(\"Chat completion failed:\", error);\n return c.json({ error: `Chat failed: ${error.message}` }, 500);\n }\n};\n\n// Inlined content from ./styles.js\nexport const getTailwindConfig = () => ({\n theme: {\n extend: {\n colors: {\n 'primary': '#004699',\n 'accent': '#FFFBEB',\n 'background': '#F5F4F4',\n 'page-bg': '#EBF4FF',\n 'app-bg': '#FFFFFF',\n 'app-bg-alt': '#FFFFFF',\n 'app-black': '#004699',\n 'app-accent': '#FFF2C2',\n 'secondary': '#D9D5D4',\n 'text': '#100C04',\n 'button': '#004699',\n 'button-hover': '#0063CC',\n 'button-secondary': '#D6EAFF',\n 'button-secondary-hover': '#99CAFF',\n 'button-secondary-accent': '#161413',\n 'grad-start': '#FFF2C2',\n 'grad-end': '#D1F0DE',\n }\n }\n }\n})\n\nexport const getStyles = () => `\n\n @tailwind base;\n @tailwind components;\n @tailwind utilities;\n\n body {\n @apply bg-gradient-to-b from-grad-start to-grad-end bg-grad-end min-h-screen;\n }\n .AppBody {\n @apply text-text py-4 min-h-screen;\n }\n .AppContainer {\n @apply container mx-auto max-w-2xl;\n }\n .App {\n @apply mx-2 md:mx-auto p-4 bg-app-bg border border-app-accent rounded-md shadow-lg;\n }\n .AppLogo {\n @apply mb-2;\n }\n h1 {\n @apply text-3xl font-semibold mb-4 text-primary;\n }\n textarea {\n @apply w-full mb-4 py-2 px-4 bg-app-bg-alt border border-app-accent rounded-md focus:outline-none focus:ring-1 focus:ring-secondary;\n }\n\n button.cta {\n @apply bg-button text-white px-2 py-2 rounded-md hover:bg-button-hover transition duration-300;\n }\n button:disabled {\n @apply opacity-50 cursor-not-allowed;\n }\n #textOutput {\n @apply text-sm my-0 w-full bg-accent border-0 rounded-md whitespace-pre-wrap;\n }\n .AppFooter {\n @apply mt-4 text-center text-sm;\n }\n .AppFooter a {\n @apply text-primary hover:text-button-hover underline;\n }\n select {\n @apply w-full py-2 px-4 pr-8 bg-app-bg-alt border border-app-accent rounded-md appearance-none focus:outline-none focus:ring-1 focus:ring-secondary;\n }\n .form-checkbox {\n @apply rounded border-gray-300 text-button focus:ring-button;\n }\n details summary {\n @apply mb-2;\n }\n \n textarea {\n @apply block text-primary w-full mt-2 p-2 bg-app-bg-alt border border-app-accent rounded-md focus:outline-none focus:ring-1 focus:ring-secondary;\n }\n \n /* Add history styles */\n .history-item {\n @apply p-2 bg-accent hover:bg-app-bg-alt border border-app-accent rounded-md cursor-pointer transition-colors;\n }\n .delete-button {\n @apply self-end bg-button-secondary text-white px-2 py-1 rounded text-sm hover:bg-button-secondary-hover transition-colors;\n }\n button.text-sm {\n @apply text-xs bg-button-secondary border border-button-secondary-accent text-button-secondary-accent px-2 py-1 rounded-md hover:bg-button-secondary-hover transition duration-300;\n }\n .TextOutput {\n @apply mt-4;\n }\n .TextOutput-content {\n @apply p-4 bg-app-bg-alt border border-primary rounded-md;\n }\n .TextOutput-header {\n @apply mb-2 text-xs text-gray-600 flex justify-between items-center;\n }\n #textOutput {\n @apply resize-none focus:outline-none focus:ring-0;\n }\n .monaco-editor {\n @apply w-full border border-app-accent rounded-md;\n }\n .monaco-editor .monaco-scrollable-element > .scrollbar > .slider {\n background: rgba(100, 100, 100, 0.4) !important;\n }\n\n`;\n\n// Inlined content from ./plugins/useRecorder.js\nfunction useRecorder(Alpine) {\n const DEFAULT_CONFIG = {\n CHUNK_DURATION: 10, // increased to 10 seconds for main chunks\n VAD_WINDOW: 0.75, \n MAX_CHUNKS: 100,\n SAMPLE_RATE: 16000, \n VAD_OPTIONS: {\n positiveSpeechThreshold: 0.75,\n minSpeechFrames: 6,\n negativeSpeechThreshold: 0.6,\n preSpeechPadFrames: 3,\n redemptionFrames: 8\n }\n };\n \n const SUPPORTED_LANGUAGES = [\n { code: 'en', name: 'English', flag: '🇺🇸' },\n { code: 'es', name: 'Spanish', flag: '🇪🇸' },\n { code: 'fr', name: 'French', flag: '🇫🇷' },\n { code: 'de', name: 'German', flag: '🇩🇪' },\n { code: 'it', name: 'Italian', flag: '🇮🇹' },\n { code: 'pt', name: 'Portuguese', flag: '🇵🇹' },\n { code: 'nl', name: 'Dutch', flag: '🇳🇱' },\n { code: 'ru', name: 'Russian', flag: '🇷🇺' },\n { code: 'zh', name: 'Chinese', flag: '🇨🇳' },\n { code: 'ja', name: 'Japanese', flag: '🇯🇵' },\n { code: 'ko', name: 'Korean', flag: '🇰🇷' },\n ];\n\n const MAX_VAD_DURATION = 30000; // 30 seconds in milliseconds\n const MIN_SPEECH_DURATION = 5000; // 5 seconds in milliseconds\n\n const DEFAULT_WHISPER_MODEL = 'whisper-large-v3-turbo';\n\n function createRecorderStore(config = DEFAULT_CONFIG) {\n\n // Private variables\n let vadInstance = null;\n let micVad = null;\n let audioContext = null;\n let mediaStream = null;\n let scriptProcessor = null;\n let recordingStartTime = null;\n \n // Buffer for collecting 10s chunks\n let currentBuffer = [];\n const CHUNK_SIZE = config.SAMPLE_RATE * config.CHUNK_DURATION; // 10 seconds of audio\n\n // Natural speech detection variables\n let naturalSpeechBuffer = [];\n let isCurrentlySpeaking = false;\n\n // HF classification debounce\n let lastHFCall = 0;\n const HF_CALL_MINIMUM_INTERVAL = 2000; // 2 seconds between HF calls\n\n // Add new state for transcript validation\n let vadTimeoutId = null;\n\n let dbInstance = null;\n\n async function initializeDB() {\n if (!dbInstance) {\n dbInstance = new Dexie('ScribeDB');\n \n // Update schema to explicitly handle transcript data\n dbInstance.version(4).stores({ // Increment version number\n sessions: '++id, name, created, updated, transcripts'\n });\n\n try {\n await dbInstance.open();\n console.log('Database initialized with updated schema');\n } catch (error) {\n console.error('Failed to initialize database:', error);\n await Dexie.delete('ScribeDB');\n dbInstance = new Dexie('ScribeDB');\n dbInstance.version(4).stores({\n sessions: '++id, name, created, updated, transcripts'\n });\n await dbInstance.open();\n }\n }\n return dbInstance;\n }\n\n\n // Add to createRecorderStore state\n return {\n db: null,\n history: [],\n isServerSynced: false,\n sessionId: '',\n\n // Public state\n isRecording: false,\n status: 'Initializing...',\n vadStatus: 'passive', // 'passive', 'active', or 'processing'\n vadStatusText: 'Listening...',\n vadScale: 1,\n vadOpacity: 0.5,\n currentChunks: [],\n naturalSpeechChunks: [], \n transcribedChunks: [],\n elapsedTime: '00:00',\n timer: null,\n isProcessing: false,\n isPlaying: null,\n audioContext: null,\n currentSource: null,\n isTranscribing: false,\n transcription: null,\n audioUrl: '',\n transcriptionModel: DEFAULT_WHISPER_MODEL,\n responseFormat: 'text',\n language: 'en',\n transcriptionResult: null,\n uploadedFile: null,\n selectedLanguage: 'en',\n supportedLanguages: SUPPORTED_LANGUAGES,\n chatMessages: [],\n currentMessage: '',\n isChatting: false,\n autoChat: false,\n chatSettings: {\n temperature: 0.2,\n model: 'llama-3.1-70b-versatile',\n // model: 'llama-3.1-8b-instant',\n systemPrompt: `You are a helpful assistant.`\n },\n\n\n // Initialize the recorder\n async init() {\n await this.initializeVAD();\n this.db = await initializeDB();\n await this.loadSessions();\n },\n \n\n // VAD initialization\n async initializeVAD() {\n this.status = 'Initializing VAD...';\n try {\n // Initialize both VAD instances\n vadInstance = await vad.NonRealTimeVAD.new(config.VAD_OPTIONS);\n micVad = await vad.MicVAD.new({\n onSpeechStart: () => {\n console.log('[Natural Speech VAD] Speech started');\n isCurrentlySpeaking = true;\n naturalSpeechBuffer = [];\n this.vadStatus = 'active';\n this.vadStatusText = 'Speech detected';\n \n vadTimeoutId = setTimeout(async () => {\n if (isCurrentlySpeaking) {\n console.log('[Natural Speech VAD] Max duration reached, forcing processing');\n // Force stop and restart VAD\n await micVad.pause();\n isCurrentlySpeaking = false;\n this.vadStatus = 'processing';\n this.vadStatusText = 'Processing...';\n \n if (naturalSpeechBuffer.length > 0) {\n await this.processNaturalSpeechChunk(naturalSpeechBuffer, [{\n start: 0,\n end: naturalSpeechBuffer.length / config.SAMPLE_RATE * 1000,\n audio: naturalSpeechBuffer\n }]);\n }\n \n // Reset buffers\n naturalSpeechBuffer = [];\n \n // Reset status and restart VAD\n this.vadStatus = 'passive';\n this.vadStatusText = 'Listening...';\n await micVad.start();\n }\n }, MAX_VAD_DURATION);\n },\n onSpeechEnd: async (audio) => {\n console.log('[Natural Speech VAD] Speech ended, processing segment');\n isCurrentlySpeaking = false;\n this.vadStatus = 'processing';\n this.vadStatusText = 'Processing...';\n \n // Clear the timeout since speech ended naturally\n if (vadTimeoutId) {\n clearTimeout(vadTimeoutId);\n vadTimeoutId = null;\n }\n \n if (audio && audio.length > 0) {\n const duration = audio.length / config.SAMPLE_RATE * 1000; // Duration in ms\n \n if (duration < MIN_SPEECH_DURATION) {\n console.log('[Natural Speech VAD] Short segment detected, running classification');\n // Create WAV for classification\n const wavBuffer = vad.utils.encodeWAV(audio);\n const audioBlob = new Blob([wavBuffer], { type: 'audio/wav' });\n \n try {\n const formData = new FormData();\n formData.append('file', audioBlob, 'audio.wav');\n \n const classification = await fetch('/classify-speech', {\n method: 'POST',\n body: formData\n }).then(res => res.json());\n\n if (!classification.isHumanSpeech || classification.confidence < 0.35) {\n console.log('[Natural Speech VAD] Short segment classified as non-speech, skipping');\n this.vadStatus = 'passive';\n this.vadStatusText = 'Listening...';\n return;\n }\n } catch (error) {\n console.error('[Natural Speech VAD] Classification failed:', error);\n // Continue processing if classification fails\n }\n }\n\n await this.processNaturalSpeechChunk(audio, [{\n start: 0,\n end: audio.length / config.SAMPLE_RATE * 1000,\n audio: audio\n }]);\n }\n \n // Reset status after processing\n this.vadStatus = 'passive';\n this.vadStatusText = 'Listening...';\n },\n onVADMisfire: () => {\n console.log('[Natural Speech VAD] VAD misfire');\n isCurrentlySpeaking = false;\n naturalSpeechBuffer = [];\n this.vadStatus = 'passive';\n this.vadStatusText = 'Listening...';\n \n // Clear the timeout on misfire\n if (vadTimeoutId) {\n clearTimeout(vadTimeoutId);\n vadTimeoutId = null;\n }\n }\n });\n\n console.log('[' + this.getTimestamp() + '] VAD initialized successfully');\n this.status = 'Ready. Click \"Start Recording\" to begin...';\n } catch (error) {\n console.error('[' + this.getTimestamp() + '] Failed to initialize VAD:', error);\n this.status = 'Failed to initialize speech detection. Please refresh the page.';\n }\n },\n\n // Recording controls\n async toggleRecording() {\n if (this.isRecording) {\n await this.stopRecording();\n } else {\n // Only create new session when starting recording if no current session\n if (!this.currentSession) {\n await this.newSession();\n }\n await this.startRecording();\n }\n },\n\n async startRecording() {\n // Create session if none exists\n if (!this.currentSession) {\n await this.newSession();\n }\n \n // Update session state\n this.currentSession.updated = new Date().toISOString();\n await this.saveSessions();\n \n try {\n mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });\n audioContext = new AudioContext({\n sampleRate: config.SAMPLE_RATE\n });\n\n const source = audioContext.createMediaStreamSource(mediaStream);\n scriptProcessor = audioContext.createScriptProcessor(4096, 1, 1);\n\n // Reset buffers\n currentBuffer = [];\n naturalSpeechBuffer = [];\n\n // Start both VAD processes\n await micVad.start();\n \n scriptProcessor.onaudioprocess = async (e) => {\n if (this.isRecording) {\n const inputData = e.inputBuffer.getChannelData(0);\n await this.processAudioChunk(inputData);\n }\n };\n\n source.connect(scriptProcessor);\n scriptProcessor.connect(audioContext.destination);\n\n recordingStartTime = new Date();\n this.timer = setInterval(() => this.updateTimer(), 10);\n\n this.isRecording = true;\n this.status = 'Recording started...';\n this.vadStatus = 'passive';\n this.vadStatusText = 'Listening...';\n } catch (error) {\n console.error('[' + this.getTimestamp() + '] Failed to start recording:', error);\n this.status = 'Failed to start recording. Please check microphone permissions.';\n }\n },\n\n async stopRecording() {\n this.isRecording = false;\n\n // Clear VAD timeout if exists\n if (vadTimeoutId) {\n clearTimeout(vadTimeoutId);\n vadTimeoutId = null;\n }\n\n if (micVad) {\n await micVad.pause();\n }\n\n if (scriptProcessor) {\n scriptProcessor.disconnect();\n scriptProcessor = null;\n }\n\n if (mediaStream) {\n mediaStream.getTracks().forEach(track => track.stop());\n }\n\n if (audioContext) {\n await audioContext.close();\n audioContext = null;\n }\n\n // Clear all buffers\n currentBuffer = [];\n naturalSpeechBuffer = [];\n\n this.status = 'Recording stopped';\n clearInterval(this.timer);\n this.timer = null;\n recordingStartTime = null;\n this.vadStatus = 'passive';\n this.vadStatusText = 'Stopped';\n },\n\n initAudioContext() {\n if (!this.audioContext) {\n this.audioContext = new (window.AudioContext || window.webkitAudioContext)({\n sampleRate: config.SAMPLE_RATE\n });\n }\n return this.audioContext;\n },\n\n updateTimer() {\n if (!recordingStartTime) return;\n const elapsed = Date.now() - recordingStartTime;\n const minutes = Math.floor(elapsed / 60000).toString().padStart(2, '0');\n const seconds = Math.floor((elapsed % 60000) / 1000).toString().padStart(2, '0');\n const milliseconds = Math.floor((elapsed % 1000) / 10).toString().padStart(2, '0');\n this.elapsedTime = minutes + ':' + seconds + ':' + milliseconds;\n },\n\n getTimestamp() {\n return new Date().toLocaleString();\n },\n\n async playSegment(chunkIndex, segmentIndex) {\n try {\n if (this.isPlaying !== null) {\n await this.stopPlayback();\n }\n\n const chunk = this.currentChunks[chunkIndex];\n const segment = chunk.speechSegments[segmentIndex];\n const audioData = chunk.audio;\n\n if (!audioData || !segment) {\n console.log('[' + this.getTimestamp() + '] No audio or segment available', {\n hasAudio: !!audioData,\n hasSegment: !!segment,\n audioLength: audioData?.length,\n segment: segment\n });\n return;\n }\n\n const startSample = Math.floor((segment.start / 1000) * config.SAMPLE_RATE);\n const endSample = Math.floor((segment.end / 1000) * config.SAMPLE_RATE);\n const segmentAudio = segment.audio || audioData.slice(startSample, endSample);\n\n const ctx = this.initAudioContext();\n const audioBuffer = ctx.createBuffer(1, segmentAudio.length, config.SAMPLE_RATE);\n const channelData = audioBuffer.getChannelData(0);\n channelData.set(segmentAudio);\n\n const source = ctx.createBufferSource();\n source.buffer = audioBuffer;\n source.connect(ctx.destination);\n this.isPlaying = chunkIndex + '-' + segmentIndex;\n this.currentSource = source;\n\n source.onended = () => {\n this.isPlaying = null;\n this.currentSource = null;\n };\n\n await ctx.resume();\n source.start(0);\n console.log('[' + this.getTimestamp() + '] Playing chunk', chunkIndex, 'segment', segmentIndex);\n } catch (error) {\n console.error('[' + this.getTimestamp() + '] Error playing chunk:', error);\n this.isPlaying = null;\n this.currentSource = null;\n }\n },\n\n async stopPlayback() {\n if (this.currentSource) {\n try {\n this.currentSource.stop();\n console.log('[' + this.getTimestamp() + '] Stopped playback');\n } catch (error) {\n console.error('[' + this.getTimestamp() + '] Error stopping playback:', error);\n }\n this.currentSource = null;\n }\n this.isPlaying = null;\n },\n\n async classifyAudioWithHF(audioData) {\n try {\n // Check if enough time has passed since last HF call\n const now = Date.now();\n if (now - lastHFCall < HF_CALL_MINIMUM_INTERVAL) {\n console.log('[HF Classification] Skipping - too soon since last call:', \n (now - lastHFCall) + 'ms');\n return {\n shouldProcess: true,\n confidence: 1,\n isHumanSpeech: true\n };\n }\n\n lastHFCall = now;\n const wavBuffer = vad.utils.encodeWAV(audioData);\n const audioBlob = new Blob([wavBuffer], { type: 'audio/wav' });\n\n const formData = new FormData();\n formData.append('file', audioBlob, 'audio.wav');\n\n console.log('[' + this.getTimestamp() + '] Classifying audio with HF. vadStatus:', this.vadStatus);\n\n if (this.vadStatus !== 'active') {\n console.log('[' + this.getTimestamp() + '] Skipping classification - VAD not active');\n return {\n reason: 'vad-not-active',\n shouldProcess: false,\n confidence: 1,\n isHumanSpeech: false\n };\n }\n\n const response = await fetch('/classify-speech', {\n method: 'POST',\n body: formData\n });\n\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const result = await response.json();\n\n console.log('[' + this.getTimestamp() + '] HF classification result:', result);\n if (result.error) {\n throw new Error(result.error);\n }\n\n return result;\n } catch (error) {\n console.error('[' + this.getTimestamp() + '] Speech classification error:', error);\n // Return a default positive response on error to allow processing to continue\n return {\n reason: 'hf-rate-limit',\n shouldProcess: true,\n confidence: 1,\n isHumanSpeech: true\n };\n }\n },\n\n async transcribeRecording() {\n if (this.isTranscribing || this.currentChunks.length === 0) return;\n\n this.isTranscribing = true;\n\n try {\n // Combine all audio chunks into a single blob\n const chunks = this.currentChunks.reduce((acc, chunk) => [...acc, ...chunk.audioData], []);\n const audioBlob = new Blob(chunks, { type: 'audio/wav' });\n\n // Create form data\n const formData = new FormData();\n formData.append('file', audioBlob, 'recording.wav');\n formData.append('model', 'whisper-large-v3-turbo');\n\n // Send to transcription endpoint\n const response = await fetch('/transcript', {\n method: 'POST',\n body: formData\n });\n\n const reader = response.body.getReader();\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n const text = new TextDecoder().decode(value);\n const messages = text.split('\\n\\n');\n\n for (const message of messages) {\n if (message.startsWith('data: ')) {\n const data = JSON.parse(message.slice(6));\n\n if (data.type === 'transcript') {\n this.transcription = data.message.content;\n } else if (data.type === 'error') {\n console.error('Transcription error:', data.content);\n throw new Error(data.content);\n }\n }\n }\n }\n } catch (error) {\n console.error('Transcription failed:', error);\n alert('Transcription failed: ' + error.message);\n } finally {\n this.isTranscribing = false;\n }\n },\n\n getModelDescription() {\n const modelDescriptions = {\n [DEFAULT_WHISPER_MODEL]: 'A fast, multilingual model optimized for speed.',\n 'distil-whisper-large-v3-en': 'English-only model optimized for speed and cost.',\n 'whisper-large-v3': 'High-accuracy multilingual model for transcription and translation.'\n };\n return modelDescriptions[this.transcriptionModel] || '';\n },\n\n handleFileUpload(event) {\n this.uploadedFile = event.target.files[0];\n const file = event.target.files[0];\n if (file) {\n this.audioUrl = ''; // Clear URL when file is selected\n }\n },\n\n async transcribeAudio() {\n if (!this.audioUrl && !document.querySelector('input[type=\"file\"]').files[0]) {\n alert('Please provide either an audio URL or file');\n return;\n }\n\n this.isTranscribing = true;\n this.transcriptionResult = null;\n\n try {\n // Create new session only if transcribing and no current session\n if (!this.currentSession) {\n await this.newSession();\n }\n\n const formData = new FormData();\n const source = this.audioUrl || document.querySelector('input[type=\"file\"]').files[0];\n \n if (this.audioUrl) {\n formData.append('url', this.audioUrl);\n } else {\n formData.append('file', document.querySelector('input[type=\"file\"]').files[0]);\n }\n \n formData.append('model', this.transcriptionModel);\n formData.append('response_format', this.responseFormat);\n formData.append('language', this.selectedLanguage);\n\n const response = await fetch('/transcribe', {\n method: 'POST',\n body: formData\n });\n\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const data = await response.json();\n if (data.error) {\n throw new Error(data.error);\n }\n\n // Create a new chunk with serializable data\n const newChunk = {\n startTime: new Date().toISOString(),\n endTime: new Date().toISOString(),\n transcript: data.transcript?.text || data.transcript,\n type: 'upload',\n source: this.uploadedFile?.name || this.audioUrl,\n segments: data.transcript?.segments ? \n data.transcript.segments.map(segment => ({\n ...segment,\n start: Number(segment.start),\n end: Number(segment.end),\n text: String(segment.text)\n })) : []\n };\n\n console.log('[building newChunk]:', newChunk, data)\n\n // Add to transcribedChunks\n this.transcribedChunks = [\n ...this.transcribedChunks,\n {\n startTime: new Date(newChunk.startTime),\n endTime: new Date(newChunk.endTime),\n transcript: newChunk.transcript,\n type: 'upload',\n source: newChunk.source,\n segments: newChunk.segments\n }\n ];\n\n // Update current session\n if (!this.currentSession) {\n await this.newSession();\n }\n\n if (this.currentSession) {\n this.currentSession.transcripts = [\n ...(this.currentSession.transcripts || []),\n newChunk\n ];\n await this.saveSessions();\n }\n\n // Send to chat if auto-chat is enabled\n await this.sendTranscriptToChat(newChunk.transcript);\n\n // Clear the inputs\n this.audioUrl = '';\n this.uploadedFile = null;\n document.querySelector('input[type=\"file\"]').value = '';\n\n } catch (error) {\n console.error('Transcription failed:', error);\n alert('Transcription failed: ' + error.message);\n } finally {\n this.isTranscribing = false;\n }\n },\n\n async processNaturalSpeechChunk(audioData, speechSegments) {\n if (!audioData || audioData.length < 1024) return;\n\n try {\n console.log('[Natural Speech] Processing chunk of length:', audioData.length);\n \n const wavBuffer = vad.utils.encodeWAV(audioData);\n const audioBlob = new Blob([wavBuffer], { type: 'audio/wav' });\n\n const formData = new FormData();\n formData.append('file', audioBlob, 'audio.wav');\n formData.append('model', DEFAULT_WHISPER_MODEL);\n formData.append('response_format', 'verbose_json');\n formData.append('language', this.selectedLanguage);\n formData.append('temperature', '0');\n\n console.log('[Natural Speech] Sending chunk for transcription with params:', {\n model: DEFAULT_WHISPER_MODEL,\n language: this.selectedLanguage\n });\n \n const response = await fetch('/transcript', {\n method: 'POST',\n body: formData\n });\n\n if (!response.ok) {\n throw new Error('HTTP error! status: ' + response.status);\n }\n\n // Process the SSE response\n const reader = response.body.getReader();\n const decoder = new TextDecoder();\n let buffer = '';\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n buffer += decoder.decode(value, { stream: true });\n const lines = buffer.split('\\n\\n');\n buffer = lines.pop() || '';\n\n for (const line of lines) {\n if (line.startsWith('data: ')) {\n const data = JSON.parse(line.slice(6));\n if (data.type === 'transcript') {\n const transcript = data.message.content;\n if (transcript && transcript !== '.') {\n const newChunk = {\n // Remove audio data from storage\n // audio: audioData, // Don't store audio\n speechSegments,\n duration: audioData.length / config.SAMPLE_RATE,\n startTime: new Date(Date.now() - (audioData.length / config.SAMPLE_RATE * 1000)),\n endTime: new Date(),\n transcript,\n type: 'natural'\n };\n\n this.naturalSpeechChunks = [...this.naturalSpeechChunks, newChunk];\n \n // Immediately update session with new transcript\n if (this.currentSession) {\n this.currentSession.transcripts.push({\n text: transcript,\n timestamp: newChunk.startTime.toISOString(),\n type: 'natural'\n });\n await this.saveSessions();\n }\n\n await this.sendTranscriptToChat(transcript);\n }\n }\n }\n }\n }\n } catch (error) {\n console.error('[Natural Speech] Error processing chunk:', error);\n }\n },\n\n async validateTranscriptWithGroq(transcript, previousTranscripts = []) {\n try {\n const formData = new FormData();\n formData.append('messages', JSON.stringify([\n {\n role: \"system\",\n content: `You are a speech-to-text correction assistant that validates transcripts.\n Analyze the transcript and return a JSON object with this structure:\n {\n \"needsCorrection\": boolean,\n \"original\": string,\n \"suggested\": string | null,\n \"confidence\": number (0-1)\n }\n \n Rules:\n - Only fix obvious speech-to-text errors\n - Ignore grammar/style/clarity issues\n - Set needsCorrection to false if no changes needed\n - Set suggested to null if no changes needed\n - Confidence should reflect certainty of correction`\n },\n {\n role: \"user\",\n content: `Previous lines:\n ${previousTranscripts.slice(-3).join('\\n')}\n \n Check this line:\n \"${transcript}\"`\n }\n ]));\n formData.append('model', 'mixtral-8x7b-32768');\n formData.append('temperature', '0.1');\n formData.append('max_tokens', '256');\n\n const response = await fetch('/validate-transcript', {\n method: 'POST',\n body: formData\n });\n\n if (!response.ok) {\n throw new Error('Validation request failed');\n }\n\n const result = await response.json();\n const validation = JSON.parse(result.choices[0].message.content);\n return validation;\n } catch (error) {\n console.error('[Transcript Validation] Error:', error);\n return {\n needsCorrection: false,\n original: transcript,\n suggested: null,\n confidence: 1\n };\n }\n },\n\n // Update the transcript processing to use the new validation format\n async processTranscript(transcript) {\n if (!transcript || transcript === '.') return;\n\n const previousTranscripts = this.currentChunks\n .slice(-3)\n .map(chunk => chunk.transcript)\n .filter(Boolean);\n\n const validation = await this.validateTranscriptWithGroq(\n transcript, \n previousTranscripts\n );\n\n // Store validation result\n this.lastValidatedTranscript = validation.original;\n this.suggestedCorrections = validation.suggested;\n\n return {\n text: validation.original,\n suggested: validation.suggested,\n confidence: validation.confidence,\n needsCorrection: validation.needsCorrection\n };\n },\n\n // Modify the chunk processing to use the new validation\n async processAudioChunk(audioData) {\n if (audioData.length < 1024) return;\n\n try {\n\n // Add new audio data to current buffer\n currentBuffer.push(...Array.from(audioData));\n\n // Process 10s chunks as before\n if (currentBuffer.length >= CHUNK_SIZE) {\n // Extract exactly 10s of audio\n // Run VAD on the chunk\n const speechSegments = [];\n vadInstance.run = function(){}\n for (\n speechSegments.push({ audio, start, end });\n }\n\n }\n\n // Natural speech is now handled by MicVAD events\n } catch (error) {\n console.error('[Audio Processing] Error:', error);\n }\n },\n\n\n\n };\n }\n \n Alpine.store('recorder', createRecorderStore());\n}\n\n// Export the function properly\nexport const useRecorderExport = `\n const useRecorder = ${useRecorder.toString()};\n \n document.addEventListener('alpine:init', () => {\n useRecorder(Alpine);\n });\n`;\n\n// Inlined content from ./auth.ts\nconst AUTH_SERVICE_URL = \"https://auth.labspace.ai\";\n\n// Auth middleware\nexport const checkAuth = async (c, next) => {\n const cookies = c.req.header('Cookie');\n const sessionMatch = cookies?.match(/auth_session=([^;]+)/);\n const sessionToken = sessionMatch?.[1];\n\n if (sessionToken) {\n try {\n const response = await fetch(`${AUTH_SERVICE_URL}/api/auth/user`, {\n headers: {\n 'Cookie': cookies,\n 'Accept': 'application/json'\n },\n mode: 'cors',\n credentials: 'include'\n });\n\n if (response.ok) {\n const result = await response.json();\n result.sessionId = sessionToken;\n c.set('user', result);\n }\n } catch (error) {\n console.error('[checkAuth] error:', error);\n }\n }\n\n await next();\n};\n\n// OAuth callback handler\nexport const handleOAuthCallback = async (c) => {\n const searchParams = new URL(c.req.url).searchParams;\n const sessionToken = searchParams.get(\"session_token\");\n const error = searchParams.get(\"error\");\n\n if (error) {\n return c.html(`\n \n `);\n }\n\n if (!sessionToken) {\n return c.html(`\n \n `);\n }\n\n c.header(\"Set-Cookie\", `auth_session=${sessionToken}; Path=/; SameSite=Lax`);\n\n return c.html(`\n \n `);\n}; \n// Inlined content from ./plugins/useAuth.js\n// Based on threadg1rl's auth system\nfunction useAuth(Alpine) {\n Alpine.data('authApp', () => ({\n user: {},\n isLoggingIn: false,\n\n init() {\n console.log('[initAuth] init');\n if (window.initialUserData) {\n console.log('[initAuth] user:', window.initialUserData);\n this.user = window.initialUserData;\n // Set the session ID if available\n if (this.user.sessionId) {\n Alpine.store('recorder').sessionId = this.user.sessionId;\n }\n }\n },\n\n loginWithGithub() {\n console.log('Logging in with GitHub');\n this.isLoggingIn = true;\n window.location.href = \"https://auth.labspace.ai/auth/github?redirect_uri=\" + encodeURIComponent(window.location.origin + \"/callback\");\n },\n\n loginWithGoogle() {\n console.log('Logging in with Google');\n this.isLoggingIn = true;\n window.location.href = \"https://auth.labspace.ai/auth/google?redirect_uri=\" + encodeURIComponent(window.location.origin + \"/callback\");\n },\n\n async handleLogout(e) {\n e.preventDefault();\n\n try {\n await fetch(\"https://auth.labspace.ai/logout\", {\n method: 'POST',\n credentials: 'include',\n mode: 'cors'\n });\n\n // Clear cookie\n document.cookie = 'auth_session=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';\n\n // Reset user state and session ID\n this.user = {};\n Alpine.store('recorder').sessionId = '';\n\n // Reload page\n window.location.reload();\n } catch (error) {\n console.error('[handleLogout] error:', error);\n }\n }\n }));\n}\n\n// Export the function properly\nexport const useAuthExport = `\n const useAuth = ${useAuth.toString()};\n \n document.addEventListener('alpine:init', () => {\n useAuth(Alpine);\n });\n`;\n\n\n\n\n// SVG icons for auth buttons\nconst githubSvg = ``.replace(/\"/g, '"');\nconst googleSvg = ``.replace(/\"/g, '"');\n\n// Auth UI template\nexport const authTemplate = `\n

\n \n \n \n

\n ${authTemplate}\n

\n \n

\n \n \n \n \n \n \n\n \n

\n \n

\n\n \n

\n \n \n \n \n \n Upload\n \n \n \n

\n \n \n

\n \n

\n\n \n \n

\n\n \n \n\n \n \n

\n \n

\n\n \n

\n \n Auto-chat with transcripts\n

\n\n \n

\n \n \n \n \n \n \n

\n \n

\n \n Temperature: \n \n \n

\n\n \n

\n Model\n

\n \n

\n Selected model affects response quality and speed\n

\n\n \n

\n System Instructions\n \n

\n\n \n

Sessions

\n \n

\n\n \n

\n\n

\n\n \n

\n A labspace.ai experiment\n

Diff · v36