From 6d98091c349493e3341ede9602eec4bcd7be3d4e Mon Sep 17 00:00:00 2001
From: Jun Lee <junlee@cloudflare.com>
Date: Fri, 7 Feb 2025 15:06:37 +0000
Subject: [PATCH 1/6] Renaming event context to request context Clarifying
 request context extends at least 60s after last client disconnect.

---
 .../docs/durable-objects/api/state.mdx        |    4 +-
 .../deploy-an-analog-site.mdx                 |    2 +-
 ...oice-notes-app-with-auto-transcription.mdx | 1216 +++++++++--------
 src/content/glossary/durable-objects.yaml     |    4 +-
 .../workers/durable_objects_pricing.mdx       |   45 +-
 5 files changed, 648 insertions(+), 623 deletions(-)

diff --git a/src/content/docs/durable-objects/api/state.mdx b/src/content/docs/durable-objects/api/state.mdx
index 2dfae8fd0eca3a..89b67e72a5d0d3 100644
--- a/src/content/docs/durable-objects/api/state.mdx
+++ b/src/content/docs/durable-objects/api/state.mdx
@@ -53,11 +53,11 @@ export class MyDurableObject extends DurableObject {
 
 ### `waitUntil`
 
-`waitUntil` waits until the promise which is passed as a parameter resolves and can extends an <GlossaryTooltip term= "event context">event context</GlossaryTooltip> up to 30 seconds after the last client disconnects.
+`waitUntil` waits until the promise which is passed as a parameter resolves and can extend a <GlossaryTooltip term= "request context">request context</GlossaryTooltip> up to 30 seconds after the last client disconnects.
 
 :::note[`waitUntil` is not necessary]
 
-The event context for a Durable Objects extends at least 60 seconds after the last client disconnects. So `waitUntil` is not necessary. It remains part of the `DurableObjectState` interface to remain compatible with [Workers Runtime APIs](/workers/runtime-apis/context/#waituntil).
+The request context for a Durable Objects extends at least 60 seconds after the last client disconnects. So `waitUntil` is not necessary. It remains part of the `DurableObjectState` interface to remain compatible with [Workers Runtime APIs](/workers/runtime-apis/context/#waituntil).
 
 :::
 
diff --git a/src/content/docs/pages/framework-guides/deploy-an-analog-site.mdx b/src/content/docs/pages/framework-guides/deploy-an-analog-site.mdx
index a87a9547ba4373..3336165a25f0d3 100644
--- a/src/content/docs/pages/framework-guides/deploy-an-analog-site.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-an-analog-site.mdx
@@ -79,7 +79,7 @@ export default defineConfig({
 });
 ```
 
-This module in turn loads a plugin which adds bindings to the event context in dev:
+This module in turn loads a plugin which adds bindings to the request context in dev:
 
 ```typescript
 import { NitroApp } from "nitropack";
diff --git a/src/content/docs/workers-ai/tutorials/build-a-voice-notes-app-with-auto-transcription.mdx b/src/content/docs/workers-ai/tutorials/build-a-voice-notes-app-with-auto-transcription.mdx
index 3b028a57979d24..b177397e102fb2 100644
--- a/src/content/docs/workers-ai/tutorials/build-a-voice-notes-app-with-auto-transcription.mdx
+++ b/src/content/docs/workers-ai/tutorials/build-a-voice-notes-app-with-auto-transcription.mdx
@@ -42,7 +42,11 @@ To continue, you will need:
 
 Create a new Worker project using the `c3` CLI with the `nuxt` framework preset.
 
-<PackageManagers type="create" pkg="cloudflare@latest" args={"voice-notes --framework=nuxt --experimental"} />
+<PackageManagers
+	type="create"
+	pkg="cloudflare@latest"
+	args={"voice-notes --framework=nuxt --experimental"}
+/>
 
 ### Install additional dependencies
 
@@ -60,12 +64,12 @@ Then add the `@nuxt/ui` module to the `nuxt.config.ts` file:
 
 ```ts title="nuxt.config.ts"
 export default defineNuxtConfig({
-  //..
+	//..
 
-  modules: ['nitro-cloudflare-dev', '@nuxt/ui'],
+	modules: ["nitro-cloudflare-dev", "@nuxt/ui"],
 
-  //..
-})
+	//..
+});
 ```
 
 ### [Optional] Move to Nuxt 4 compatibility mode
@@ -76,14 +80,14 @@ Create a new `app` folder in the project's root directory and move the `app.vue`
 
 ```ts title="nuxt.config.ts"
 export default defineNuxtConfig({
-  //..
+	//..
 
-  future: {
-    compatibilityVersion: 4,
-  },
+	future: {
+		compatibilityVersion: 4,
+	},
 
-  //..
-})
+	//..
+});
 ```
 
 :::note
@@ -111,7 +115,7 @@ Add the `AI` binding to the Wrangler file.
 binding = "AI"
 ```
 
-Once the `AI` binding has been configured, run the `cf-typegen` command to generate the necessary Cloudflare type definitions. This makes the types definitions available in the server event contexts.
+Once the `AI` binding has been configured, run the `cf-typegen` command to generate the necessary Cloudflare type definitions. This makes the types definitions available in the server request contexts.
 
 <PackageManagers type="run" args="cf-typegen" />
 
@@ -119,30 +123,30 @@ Create a transcribe `POST` endpoint by creating `transcribe.post.ts` file inside
 
 ```ts title="server/api/transcribe.post.ts"
 export default defineEventHandler(async (event) => {
-  const { cloudflare } = event.context;
-
-  const form = await readFormData(event);
-  const blob = form.get('audio') as Blob;
-  if (!blob) {
-    throw createError({
-      statusCode: 400,
-      message: 'Missing audio blob to transcribe',
-    });
-  }
-
-  try {
-    const response = await cloudflare.env.AI.run('@cf/openai/whisper', {
-      audio: [...new Uint8Array(await blob.arrayBuffer())],
-    });
-
-    return response.text;
-  } catch (err) {
-    console.error('Error transcribing audio:', err);
-    throw createError({
-      statusCode: 500,
-      message: 'Failed to transcribe audio. Please try again.',
-    });
-  }
+	const { cloudflare } = event.context;
+
+	const form = await readFormData(event);
+	const blob = form.get("audio") as Blob;
+	if (!blob) {
+		throw createError({
+			statusCode: 400,
+			message: "Missing audio blob to transcribe",
+		});
+	}
+
+	try {
+		const response = await cloudflare.env.AI.run("@cf/openai/whisper", {
+			audio: [...new Uint8Array(await blob.arrayBuffer())],
+		});
+
+		return response.text;
+	} catch (err) {
+		console.error("Error transcribing audio:", err);
+		throw createError({
+			statusCode: 500,
+			message: "Failed to transcribe audio. Please try again.",
+		});
+	}
 });
 ```
 
@@ -195,23 +199,23 @@ Now you are ready to create the upload endpoint. Create a new `upload.put.ts` fi
 
 ```ts title="server/api/upload.put.ts"
 export default defineEventHandler(async (event) => {
-  const { cloudflare } = event.context;
-
-  const form = await readFormData(event);
-  const files = form.getAll('files') as File[];
-  if (!files) {
-    throw createError({ statusCode: 400, message: 'Missing files' });
-  }
-
-  const uploadKeys: string[] = [];
-  for (const file of files) {
-    const obj = await cloudflare.env.R2.put(`recordings/${file.name}`, file);
-    if (obj) {
-      uploadKeys.push(obj.key);
-    }
-  }
-
-  return uploadKeys;
+	const { cloudflare } = event.context;
+
+	const form = await readFormData(event);
+	const files = form.getAll("files") as File[];
+	if (!files) {
+		throw createError({ statusCode: 400, message: "Missing files" });
+	}
+
+	const uploadKeys: string[] = [];
+	for (const file of files) {
+		const obj = await cloudflare.env.R2.put(`recordings/${file.name}`, file);
+		if (obj) {
+			uploadKeys.push(obj.key);
+		}
+	}
+
+	return uploadKeys;
 });
 ```
 
@@ -337,31 +341,31 @@ Now you can create the API endpoint. Create a new file `index.post.ts` in the `s
 
 ```ts title="server/api/notes/index.post.ts"
 export default defineEventHandler(async (event) => {
-  const { cloudflare } = event.context;
-
-  const { text, audioUrls } = await readBody(event);
-  if (!text) {
-    throw createError({
-      statusCode: 400,
-      message: 'Missing note text',
-    });
-  }
-
-  try {
-    await cloudflare.env.DB.prepare(
-      'INSERT INTO notes (text, audio_urls) VALUES (?1, ?2)'
-    )
-      .bind(text, audioUrls ? JSON.stringify(audioUrls) : null)
-      .run();
-
-    return setResponseStatus(event, 201);
-  } catch (err) {
-    console.error('Error creating note:', err);
-    throw createError({
-      statusCode: 500,
-      message: 'Failed to create note. Please try again.',
-    });
-  }
+	const { cloudflare } = event.context;
+
+	const { text, audioUrls } = await readBody(event);
+	if (!text) {
+		throw createError({
+			statusCode: 400,
+			message: "Missing note text",
+		});
+	}
+
+	try {
+		await cloudflare.env.DB.prepare(
+			"INSERT INTO notes (text, audio_urls) VALUES (?1, ?2)",
+		)
+			.bind(text, audioUrls ? JSON.stringify(audioUrls) : null)
+			.run();
+
+		return setResponseStatus(event, 201);
+	} catch (err) {
+		console.error("Error creating note:", err);
+		throw createError({
+			statusCode: 500,
+			message: "Failed to create note. Please try again.",
+		});
+	}
 });
 ```
 
@@ -382,110 +386,110 @@ Create a new file `useMediaRecorder.ts` in the `app/composables` folder, and add
 
 ```ts title="app/composables/useMediaRecorder.ts"
 interface MediaRecorderState {
-  isRecording: boolean;
-  recordingDuration: number;
-  audioData: Uint8Array | null;
-  updateTrigger: number;
+	isRecording: boolean;
+	recordingDuration: number;
+	audioData: Uint8Array | null;
+	updateTrigger: number;
 }
 
 export function useMediaRecorder() {
-  const state = ref<MediaRecorderState>({
-    isRecording: false,
-    recordingDuration: 0,
-    audioData: null,
-    updateTrigger: 0,
-  });
-
-  let mediaRecorder: MediaRecorder | null = null;
-  let audioContext: AudioContext | null = null;
-  let analyser: AnalyserNode | null = null;
-  let animationFrame: number | null = null;
-  let audioChunks: Blob[] | undefined = undefined;
-
-  const updateAudioData = () => {
-    if (!analyser || !state.value.isRecording || !state.value.audioData) {
-      if (animationFrame) {
-        cancelAnimationFrame(animationFrame);
-        animationFrame = null;
-      }
-
-      return;
-    }
-
-    analyser.getByteTimeDomainData(state.value.audioData);
-    state.value.updateTrigger += 1;
-    animationFrame = requestAnimationFrame(updateAudioData);
-  };
-
-  const startRecording = async () => {
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-
-      audioContext = new AudioContext();
-      analyser = audioContext.createAnalyser();
-
-      const source = audioContext.createMediaStreamSource(stream);
-      source.connect(analyser);
-
-      mediaRecorder = new MediaRecorder(stream);
-      audioChunks = [];
-
-      mediaRecorder.ondataavailable = (e: BlobEvent) => {
-        audioChunks?.push(e.data);
-        state.value.recordingDuration += 1;
-      };
-
-      state.value.audioData = new Uint8Array(analyser.frequencyBinCount);
-      state.value.isRecording = true;
-      state.value.recordingDuration = 0;
-      state.value.updateTrigger = 0;
-      mediaRecorder.start(1000);
-
-      updateAudioData();
-    } catch (err) {
-      console.error('Error accessing microphone:', err);
-      throw err;
-    }
-  };
-
-  const stopRecording = async () => {
-    return await new Promise<Blob>((resolve) => {
-      if (mediaRecorder && state.value.isRecording) {
-        mediaRecorder.onstop = () => {
-          const blob = new Blob(audioChunks, { type: 'audio/webm' });
-          audioChunks = undefined;
-
-          state.value.recordingDuration = 0;
-          state.value.updateTrigger = 0;
-          state.value.audioData = null;
-
-          resolve(blob);
-        };
-
-        state.value.isRecording = false;
-        mediaRecorder.stop();
-        mediaRecorder.stream.getTracks().forEach((track) => track.stop());
-
-        if (animationFrame) {
-          cancelAnimationFrame(animationFrame);
-          animationFrame = null;
-        }
-
-        audioContext?.close();
-        audioContext = null;
-      }
-    });
-  };
-
-  onUnmounted(() => {
-    stopRecording();
-  });
-
-  return {
-    state: readonly(state),
-    startRecording,
-    stopRecording,
-  };
+	const state = ref<MediaRecorderState>({
+		isRecording: false,
+		recordingDuration: 0,
+		audioData: null,
+		updateTrigger: 0,
+	});
+
+	let mediaRecorder: MediaRecorder | null = null;
+	let audioContext: AudioContext | null = null;
+	let analyser: AnalyserNode | null = null;
+	let animationFrame: number | null = null;
+	let audioChunks: Blob[] | undefined = undefined;
+
+	const updateAudioData = () => {
+		if (!analyser || !state.value.isRecording || !state.value.audioData) {
+			if (animationFrame) {
+				cancelAnimationFrame(animationFrame);
+				animationFrame = null;
+			}
+
+			return;
+		}
+
+		analyser.getByteTimeDomainData(state.value.audioData);
+		state.value.updateTrigger += 1;
+		animationFrame = requestAnimationFrame(updateAudioData);
+	};
+
+	const startRecording = async () => {
+		try {
+			const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+
+			audioContext = new AudioContext();
+			analyser = audioContext.createAnalyser();
+
+			const source = audioContext.createMediaStreamSource(stream);
+			source.connect(analyser);
+
+			mediaRecorder = new MediaRecorder(stream);
+			audioChunks = [];
+
+			mediaRecorder.ondataavailable = (e: BlobEvent) => {
+				audioChunks?.push(e.data);
+				state.value.recordingDuration += 1;
+			};
+
+			state.value.audioData = new Uint8Array(analyser.frequencyBinCount);
+			state.value.isRecording = true;
+			state.value.recordingDuration = 0;
+			state.value.updateTrigger = 0;
+			mediaRecorder.start(1000);
+
+			updateAudioData();
+		} catch (err) {
+			console.error("Error accessing microphone:", err);
+			throw err;
+		}
+	};
+
+	const stopRecording = async () => {
+		return await new Promise<Blob>((resolve) => {
+			if (mediaRecorder && state.value.isRecording) {
+				mediaRecorder.onstop = () => {
+					const blob = new Blob(audioChunks, { type: "audio/webm" });
+					audioChunks = undefined;
+
+					state.value.recordingDuration = 0;
+					state.value.updateTrigger = 0;
+					state.value.audioData = null;
+
+					resolve(blob);
+				};
+
+				state.value.isRecording = false;
+				mediaRecorder.stop();
+				mediaRecorder.stream.getTracks().forEach((track) => track.stop());
+
+				if (animationFrame) {
+					cancelAnimationFrame(animationFrame);
+					animationFrame = null;
+				}
+
+				audioContext?.close();
+				audioContext = null;
+			}
+		});
+	};
+
+	onUnmounted(() => {
+		stopRecording();
+	});
+
+	return {
+		state: readonly(state),
+		startRecording,
+		stopRecording,
+	};
 }
 ```
 
@@ -508,116 +512,116 @@ Create a new file named `CreateNote.vue` inside the `app/components` folder. Add
 
 ```vue title="app/components/CreateNote.vue"
 <template>
-  <div class="flex flex-col gap-y-5">
-    <div
-      class="flex flex-col h-full md:flex-row gap-y-4 md:gap-x-6 overflow-hidden p-px"
-    >
-      <UCard
-        :ui="{
-          base: 'h-full flex flex-col flex-1',
-          body: { base: 'flex-grow' },
-          header: { base: 'md:h-[72px]' },
-        }"
-      >
-        <template #header>
-          <h3
-            class="text-base md:text-lg font-medium text-gray-600 dark:text-gray-300"
-          >
-            Note transcript
-          </h3>
-        </template>
-        <UTextarea
-          v-model="note"
-          placeholder="Type your note or use voice recording..."
-          size="lg"
-          autofocus
-          :disabled="loading || isTranscribing || state.isRecording"
-          :rows="10"
-        />
-      </UCard>
-
-      <UCard
-        class="md:h-full md:flex md:flex-col md:w-96 shrink-0 order-first md:order-none"
-        :ui="{
-          body: { base: 'max-h-36 md:max-h-none md:flex-grow overflow-y-auto' },
-        }"
-      >
-        <template #header>
-          <h3
-            class="text-base md:text-lg font-medium text-gray-600 dark:text-gray-300"
-          >
-            Note recordings
-          </h3>
-
-          <UTooltip
-            :text="state.isRecording ? 'Stop Recording' : 'Start Recording'"
-          >
-            <UButton
-              :icon="
-                state.isRecording
-                  ? 'i-heroicons-stop-circle'
-                  : 'i-heroicons-microphone'
-              "
-              :color="state.isRecording ? 'red' : 'primary'"
-              :loading="isTranscribing"
-              @click="toggleRecording"
-            />
-          </UTooltip>
-        </template>
-
-        <AudioVisualizer
-          v-if="state.isRecording"
-          class="w-full h-14 p-2 bg-gray-50 dark:bg-gray-800 rounded-lg mb-2"
-          :audio-data="state.audioData"
-          :data-update-trigger="state.updateTrigger"
-        />
-
-        <div
-          v-else-if="isTranscribing"
-          class="flex items-center justify-center h-14 gap-x-3 p-2 bg-gray-50 dark:bg-gray-800 rounded-lg mb-2 text-gray-500 dark:text-gray-400"
-        >
-          <UIcon
-            name="i-heroicons-arrow-path-20-solid"
-            class="w-6 h-6 animate-spin"
-          />
-          Transcribing...
-        </div>
-
-        <RecordingsList :recordings="recordings" @delete="deleteRecording" />
-
-        <div
-          v-if="!recordings.length && !state.isRecording && !isTranscribing"
-          class="h-full flex items-center justify-center text-gray-500 dark:text-gray-400"
-        >
-          No recordings...
-        </div>
-      </UCard>
-    </div>
-
-    <UDivider />
-
-    <div class="flex justify-end gap-x-4">
-      <UButton
-        icon="i-heroicons-trash"
-        color="gray"
-        size="lg"
-        variant="ghost"
-        :disabled="loading"
-        @click="clearNote"
-      >
-        Clear
-      </UButton>
-      <UButton
-        icon="i-heroicons-cloud-arrow-up"
-        size="lg"
-        :loading="loading"
-        :disabled="!note.trim() && !state.isRecording"
-        @click="saveNote"
-      >
-        Save
-      </UButton>
-    </div>
-  </div>
+	<div class="flex flex-col gap-y-5">
+		<div
+			class="flex h-full flex-col gap-y-4 overflow-hidden p-px md:flex-row md:gap-x-6"
+		>
+			<UCard
+				:ui="{
+					base: 'h-full flex flex-col flex-1',
+					body: { base: 'flex-grow' },
+					header: { base: 'md:h-[72px]' },
+				}"
+			>
+				<template #header>
+					<h3
+						class="text-base font-medium text-gray-600 dark:text-gray-300 md:text-lg"
+					>
+						Note transcript
+					</h3>
+				</template>
+				<UTextarea
+					v-model="note"
+					placeholder="Type your note or use voice recording..."
+					size="lg"
+					autofocus
+					:disabled="loading || isTranscribing || state.isRecording"
+					:rows="10"
+				/>
+			</UCard>
+
+			<UCard
+				class="order-first shrink-0 md:order-none md:flex md:h-full md:w-96 md:flex-col"
+				:ui="{
+					body: { base: 'max-h-36 md:max-h-none md:flex-grow overflow-y-auto' },
+				}"
+			>
+				<template #header>
+					<h3
+						class="text-base font-medium text-gray-600 dark:text-gray-300 md:text-lg"
+					>
+						Note recordings
+					</h3>
+
+					<UTooltip
+						:text="state.isRecording ? 'Stop Recording' : 'Start Recording'"
+					>
+						<UButton
+							:icon="
+								state.isRecording
+									? 'i-heroicons-stop-circle'
+									: 'i-heroicons-microphone'
+							"
+							:color="state.isRecording ? 'red' : 'primary'"
+							:loading="isTranscribing"
+							@click="toggleRecording"
+						/>
+					</UTooltip>
+				</template>
+
+				<AudioVisualizer
+					v-if="state.isRecording"
+					class="mb-2 h-14 w-full rounded-lg bg-gray-50 p-2 dark:bg-gray-800"
+					:audio-data="state.audioData"
+					:data-update-trigger="state.updateTrigger"
+				/>
+
+				<div
+					v-else-if="isTranscribing"
+					class="mb-2 flex h-14 items-center justify-center gap-x-3 rounded-lg bg-gray-50 p-2 text-gray-500 dark:bg-gray-800 dark:text-gray-400"
+				>
+					<UIcon
+						name="i-heroicons-arrow-path-20-solid"
+						class="h-6 w-6 animate-spin"
+					/>
+					Transcribing...
+				</div>
+
+				<RecordingsList :recordings="recordings" @delete="deleteRecording" />
+
+				<div
+					v-if="!recordings.length && !state.isRecording && !isTranscribing"
+					class="flex h-full items-center justify-center text-gray-500 dark:text-gray-400"
+				>
+					No recordings...
+				</div>
+			</UCard>
+		</div>
+
+		<UDivider />
+
+		<div class="flex justify-end gap-x-4">
+			<UButton
+				icon="i-heroicons-trash"
+				color="gray"
+				size="lg"
+				variant="ghost"
+				:disabled="loading"
+				@click="clearNote"
+			>
+				Clear
+			</UButton>
+			<UButton
+				icon="i-heroicons-cloud-arrow-up"
+				size="lg"
+				:loading="loading"
+				:disabled="!note.trim() && !state.isRecording"
+				@click="saveNote"
+			>
+				Save
+			</UButton>
+		</div>
+	</div>
 </template>
 ```
 
@@ -631,155 +635,155 @@ Now, add the following code below the template code in the same file:
 
 ```vue title="app/components/CreateNote.vue"
 <script setup lang="ts">
-import type { Recording, Settings } from '~~/types';
+import type { Recording, Settings } from "~~/types";
 
 const emit = defineEmits<{
-  (e: 'created'): void;
+	(e: "created"): void;
 }>();
 
-const note = ref('');
+const note = ref("");
 const loading = ref(false);
 const isTranscribing = ref(false);
 const { state, startRecording, stopRecording } = useMediaRecorder();
 const recordings = ref<Recording[]>([]);
 
 const handleRecordingStart = async () => {
-  try {
-    await startRecording();
-  } catch (err) {
-    console.error('Error accessing microphone:', err);
-    useToast().add({
-      title: 'Error',
-      description: 'Could not access microphone. Please check permissions.',
-      color: 'red',
-    });
-  }
+	try {
+		await startRecording();
+	} catch (err) {
+		console.error("Error accessing microphone:", err);
+		useToast().add({
+			title: "Error",
+			description: "Could not access microphone. Please check permissions.",
+			color: "red",
+		});
+	}
 };
 
 const handleRecordingStop = async () => {
-  let blob: Blob | undefined;
-
-  try {
-    blob = await stopRecording();
-  } catch (err) {
-    console.error('Error stopping recording:', err);
-    useToast().add({
-      title: 'Error',
-      description: 'Failed to record audio. Please try again.',
-      color: 'red',
-    });
-  }
-
-  if (blob) {
-    try {
-      const transcription = await transcribeAudio(blob);
-
-      note.value += note.value ? '\n\n' : '';
-      note.value += transcription ?? '';
-
-      recordings.value.unshift({
-        url: URL.createObjectURL(blob),
-        blob,
-        id: `${Date.now()}`,
-      });
-    } catch (err) {
-      console.error('Error transcribing audio:', err);
-      useToast().add({
-        title: 'Error',
-        description: 'Failed to transcribe audio. Please try again.',
-        color: 'red',
-      });
-    }
-  }
+	let blob: Blob | undefined;
+
+	try {
+		blob = await stopRecording();
+	} catch (err) {
+		console.error("Error stopping recording:", err);
+		useToast().add({
+			title: "Error",
+			description: "Failed to record audio. Please try again.",
+			color: "red",
+		});
+	}
+
+	if (blob) {
+		try {
+			const transcription = await transcribeAudio(blob);
+
+			note.value += note.value ? "\n\n" : "";
+			note.value += transcription ?? "";
+
+			recordings.value.unshift({
+				url: URL.createObjectURL(blob),
+				blob,
+				id: `${Date.now()}`,
+			});
+		} catch (err) {
+			console.error("Error transcribing audio:", err);
+			useToast().add({
+				title: "Error",
+				description: "Failed to transcribe audio. Please try again.",
+				color: "red",
+			});
+		}
+	}
 };
 
 const toggleRecording = () => {
-  if (state.value.isRecording) {
-    handleRecordingStop();
-  } else {
-    handleRecordingStart();
-  }
+	if (state.value.isRecording) {
+		handleRecordingStop();
+	} else {
+		handleRecordingStart();
+	}
 };
 
 const transcribeAudio = async (blob: Blob) => {
-  try {
-    isTranscribing.value = true;
-    const formData = new FormData();
-    formData.append('audio', blob);
-
-    return await $fetch('/api/transcribe', {
-      method: 'POST',
-      body: formData,
-    });
-  } finally {
-    isTranscribing.value = false;
-  }
+	try {
+		isTranscribing.value = true;
+		const formData = new FormData();
+		formData.append("audio", blob);
+
+		return await $fetch("/api/transcribe", {
+			method: "POST",
+			body: formData,
+		});
+	} finally {
+		isTranscribing.value = false;
+	}
 };
 
 const clearNote = () => {
-  note.value = '';
-  recordings.value = [];
+	note.value = "";
+	recordings.value = [];
 };
 
 const saveNote = async () => {
-  if (!note.value.trim()) return;
-
-  loading.value = true;
-
-  const noteToSave: { text: string; audioUrls?: string[] } = {
-    text: note.value.trim(),
-  };
-
-  try {
-    if (recordings.value.length) {
-      noteToSave.audioUrls = await uploadRecordings();
-    }
-
-    await $fetch('/api/notes', {
-      method: 'POST',
-      body: noteToSave,
-    });
-
-    useToast().add({
-      title: 'Success',
-      description: 'Note saved successfully',
-      color: 'green',
-    });
-
-    note.value = '';
-    recordings.value = [];
-
-    emit('created');
-  } catch (err) {
-    console.error('Error saving note:', err);
-    useToast().add({
-      title: 'Error',
-      description: 'Failed to save note',
-      color: 'red',
-    });
-  } finally {
-    loading.value = false;
-  }
+	if (!note.value.trim()) return;
+
+	loading.value = true;
+
+	const noteToSave: { text: string; audioUrls?: string[] } = {
+		text: note.value.trim(),
+	};
+
+	try {
+		if (recordings.value.length) {
+			noteToSave.audioUrls = await uploadRecordings();
+		}
+
+		await $fetch("/api/notes", {
+			method: "POST",
+			body: noteToSave,
+		});
+
+		useToast().add({
+			title: "Success",
+			description: "Note saved successfully",
+			color: "green",
+		});
+
+		note.value = "";
+		recordings.value = [];
+
+		emit("created");
+	} catch (err) {
+		console.error("Error saving note:", err);
+		useToast().add({
+			title: "Error",
+			description: "Failed to save note",
+			color: "red",
+		});
+	} finally {
+		loading.value = false;
+	}
 };
 
 const deleteRecording = (recording: Recording) => {
-  recordings.value = recordings.value.filter((r) => r.id !== recording.id);
+	recordings.value = recordings.value.filter((r) => r.id !== recording.id);
 };
 
 const uploadRecordings = async () => {
-  if (!recordings.value.length) return;
+	if (!recordings.value.length) return;
 
-  const formData = new FormData();
-  recordings.value.forEach((recording) => {
-    formData.append('files', recording.blob, recording.id + '.webm');
-  });
+	const formData = new FormData();
+	recordings.value.forEach((recording) => {
+		formData.append("files", recording.blob, recording.id + ".webm");
+	});
 
-  const uploadKeys = await $fetch('/api/upload', {
-    method: 'PUT',
-    body: formData,
-  });
+	const uploadKeys = await $fetch("/api/upload", {
+		method: "PUT",
+		body: formData,
+	});
 
-  return uploadKeys;
+	return uploadKeys;
 };
 </script>
 ```
@@ -796,65 +800,65 @@ You can use this component in a Nuxt page to show it to the user. But before tha
 
 ```vue title="/app/app.vue"
 <template>
-  <NuxtRouteAnnouncer />
-  <NuxtLoadingIndicator />
-  <div class="h-screen flex flex-col md:flex-row">
-    <USlideover
-      v-model="isDrawerOpen"
-      class="md:hidden"
-      side="left"
-      :ui="{ width: 'max-w-xs' }"
-    >
-      <AppSidebar :links="links" @hide-drawer="isDrawerOpen = false" />
-    </USlideover>
-
-    <!-- The App Sidebar -->
-    <AppSidebar :links="links" class="hidden md:block md:w-64" />
-
-    <div class="flex-1 h-full min-w-0 bg-gray-50 dark:bg-gray-950">
-      <!-- The App Header -->
-      <AppHeader :title="title" @show-drawer="isDrawerOpen = true">
-        <template #actions v-if="route.path === '/'">
-          <UButton icon="i-heroicons-plus" @click="navigateTo('/new')">
-            New Note
-          </UButton>
-        </template>
-      </AppHeader>
-
-      <!-- Main Page Content -->
-      <main class="p-4 sm:p-6 h-[calc(100vh-3.5rem)] overflow-y-auto">
-        <NuxtPage />
-      </main>
-    </div>
-  </div>
-  <UNotifications />
+	<NuxtRouteAnnouncer />
+	<NuxtLoadingIndicator />
+	<div class="flex h-screen flex-col md:flex-row">
+		<USlideover
+			v-model="isDrawerOpen"
+			class="md:hidden"
+			side="left"
+			:ui="{ width: 'max-w-xs' }"
+		>
+			<AppSidebar :links="links" @hide-drawer="isDrawerOpen = false" />
+		</USlideover>
+
+		<!-- The App Sidebar -->
+		<AppSidebar :links="links" class="hidden md:block md:w-64" />
+
+		<div class="h-full min-w-0 flex-1 bg-gray-50 dark:bg-gray-950">
+			<!-- The App Header -->
+			<AppHeader :title="title" @show-drawer="isDrawerOpen = true">
+				<template #actions v-if="route.path === '/'">
+					<UButton icon="i-heroicons-plus" @click="navigateTo('/new')">
+						New Note
+					</UButton>
+				</template>
+			</AppHeader>
+
+			<!-- Main Page Content -->
+			<main class="h-[calc(100vh-3.5rem)] overflow-y-auto p-4 sm:p-6">
+				<NuxtPage />
+			</main>
+		</div>
+	</div>
+	<UNotifications />
 </template>
 
 <script setup lang="ts">
 const isDrawerOpen = ref(false);
 const links = [
-  {
-    label: 'Notes',
-    icon: 'i-heroicons-document-text',
-    to: '/',
-    click: () => (isDrawerOpen.value = false),
-  },
-  {
-    label: 'Settings',
-    icon: 'i-heroicons-cog',
-    to: '/settings',
-    click: () => (isDrawerOpen.value = false),
-  },
+	{
+		label: "Notes",
+		icon: "i-heroicons-document-text",
+		to: "/",
+		click: () => (isDrawerOpen.value = false),
+	},
+	{
+		label: "Settings",
+		icon: "i-heroicons-cog",
+		to: "/settings",
+		click: () => (isDrawerOpen.value = false),
+	},
 ];
 
 const route = useRoute();
 const title = computed(() => {
-  const activeLink = links.find((l) => l.to === route.path);
-  if (activeLink) {
-    return activeLink.label;
-  }
+	const activeLink = links.find((l) => l.to === route.path);
+	if (activeLink) {
+		return activeLink.label;
+	}
 
-  return '';
+	return "";
 });
 </script>
 ```
@@ -865,29 +869,29 @@ Next, add a new file named `new.vue` inside the `app/pages` folder, add the foll
 
 ```vue title="app/pages/new.vue"
 <template>
-  <UModal v-model="isOpen" fullscreen>
-    <UCard
-      :ui="{
-        base: 'h-full flex flex-col',
-        rounded: '',
-        body: {
-          base: 'flex-grow overflow-hidden',
-        },
-      }"
-    >
-      <template #header>
-        <h2 class="text-xl md:text-2xl font-semibold leading-6">Create note</h2>
-        <UButton
-          color="gray"
-          variant="ghost"
-          icon="i-heroicons-x-mark-20-solid"
-          @click="closeModal"
-        />
-      </template>
-
-      <CreateNote class="max-w-7xl mx-auto h-full" @created="closeModal" />
-    </UCard>
-  </UModal>
+	<UModal v-model="isOpen" fullscreen>
+		<UCard
+			:ui="{
+				base: 'h-full flex flex-col',
+				rounded: '',
+				body: {
+					base: 'flex-grow overflow-hidden',
+				},
+			}"
+		>
+			<template #header>
+				<h2 class="text-xl font-semibold leading-6 md:text-2xl">Create note</h2>
+				<UButton
+					color="gray"
+					variant="ghost"
+					icon="i-heroicons-x-mark-20-solid"
+					@click="closeModal"
+				/>
+			</template>
+
+			<CreateNote class="mx-auto h-full max-w-7xl" @created="closeModal" />
+		</UCard>
+	</UModal>
 </template>
 
 <script setup lang="ts">
@@ -895,16 +899,16 @@ const isOpen = ref(true);
 
 const router = useRouter();
 const closeModal = () => {
-  isOpen.value = false;
-
-  if (window.history.length > 2) {
-    router.back();
-  } else {
-    navigateTo({
-      path: '/',
-      replace: true,
-    });
-  }
+	isOpen.value = false;
+
+	if (window.history.length > 2) {
+		router.back();
+	} else {
+		navigateTo({
+			path: "/",
+			replace: true,
+		});
+	}
 };
 </script>
 ```
@@ -920,13 +924,13 @@ To show the notes from the database on the client side, create an API endpoint f
 Create a new file named `index.get.ts` inside the `server/api/notes` directory, and add the following code to it:
 
 ```ts title="server/api/index.get.ts"
-import type { Note } from '~~/types';
+import type { Note } from "~~/types";
 
 export default defineEventHandler(async (event) => {
-  const { cloudflare } = event.context;
+	const { cloudflare } = event.context;
 
-  const res = await cloudflare.env.DB.prepare(
-    `SELECT
+	const res = await cloudflare.env.DB.prepare(
+		`SELECT
       id,
       text,
       audio_urls AS audioUrls,
@@ -934,13 +938,13 @@ export default defineEventHandler(async (event) => {
       updated_at AS updatedAt
     FROM notes
     ORDER BY created_at DESC
-    LIMIT 50;`
-  ).all<Omit<Note, 'audioUrls'> & { audioUrls: string | null }>();
+    LIMIT 50;`,
+	).all<Omit<Note, "audioUrls"> & { audioUrls: string | null }>();
 
-  return res.results.map((note) => ({
-    ...note,
-    audioUrls: note.audioUrls ? JSON.parse(note.audioUrls) : undefined,
-  }));
+	return res.results.map((note) => ({
+		...note,
+		audioUrls: note.audioUrls ? JSON.parse(note.audioUrls) : undefined,
+	}));
 });
 ```
 
@@ -950,24 +954,24 @@ Next, create a page named `index.vue` inside the `app/pages` directory. This wil
 
 ```vue title="app/pages/index.vue"
 <template>
-  <div :class="{ 'flex h-full': !notes?.length }">
-    <div v-if="notes?.length" class="space-y-4 sm:space-y-6">
-      <NoteCard v-for="note in notes" :key="note.id" :note="note" />
-    </div>
-    <div
-      v-else
-      class="flex-1 self-center text-center text-gray-500 dark:text-gray-400 space-y-2"
-    >
-      <h2 class="text-2xl md:text-3xl">No notes created</h2>
-      <p>Get started by creating your first note</p>
-    </div>
-  </div>
+	<div :class="{ 'flex h-full': !notes?.length }">
+		<div v-if="notes?.length" class="space-y-4 sm:space-y-6">
+			<NoteCard v-for="note in notes" :key="note.id" :note="note" />
+		</div>
+		<div
+			v-else
+			class="flex-1 space-y-2 self-center text-center text-gray-500 dark:text-gray-400"
+		>
+			<h2 class="text-2xl md:text-3xl">No notes created</h2>
+			<p>Get started by creating your first note</p>
+		</div>
+	</div>
 </template>
 
 <script setup lang="ts">
-import type { Note } from '~~/types';
+import type { Note } from "~~/types";
 
-const { data: notes } = await useFetch<Note[]>('/api/notes');
+const { data: notes } = await useFetch<Note[]>("/api/notes");
 </script>
 ```
 
@@ -985,11 +989,11 @@ The `...` prefix in the file name makes it a catch all route. This allows it to
 
 ```ts title="server/routes/recordings/[...pathname].get.ts"
 export default defineEventHandler(async (event) => {
-  const { cloudflare, params } = event.context;
+	const { cloudflare, params } = event.context;
 
-  const { pathname } = params || {};
+	const { pathname } = params || {};
 
-  return cloudflare.env.R2.get(`recordings/${pathname}`);
+	return cloudflare.env.R2.get(`recordings/${pathname}`);
 });
 ```
 
@@ -1005,52 +1009,52 @@ Create a new file named `settings.vue` in the `app/pages` folder, and add the fo
 
 ```vue title="app/pages/settings.vue"
 <template>
-  <UCard>
-    <template #header>
-      <div>
-        <h2 class="text-base md:text-lg font-semibold leading-6">
-          Post Processing
-        </h2>
-        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-          Configure post-processing of recording transcriptions with AI models.
-        </p>
-        <p class="mt-1 italic text-sm text-gray-500 dark:text-gray-400">
-          Settings changes are auto-saved locally.
-        </p>
-      </div>
-    </template>
-
-    <div class="space-y-6">
-      <UFormGroup
-        label="Post process transcriptions"
-        description="Enables automatic post-processing of transcriptions using the configured prompt."
-        :ui="{ container: 'mt-2' }"
-      >
-        <template #hint>
-          <UToggle v-model="settings.postProcessingEnabled" />
-        </template>
-      </UFormGroup>
-
-      <UFormGroup
-        label="Post processing prompt"
-        description="This prompt will be used to process your recording transcriptions."
-        :ui="{ container: 'mt-2' }"
-      >
-        <UTextarea
-          v-model="settings.postProcessingPrompt"
-          :disabled="!settings.postProcessingEnabled"
-          :rows="5"
-          placeholder="Enter your prompt here..."
-          class="w-full"
-        />
-      </UFormGroup>
-    </div>
-  </UCard>
+	<UCard>
+		<template #header>
+			<div>
+				<h2 class="text-base font-semibold leading-6 md:text-lg">
+					Post Processing
+				</h2>
+				<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+					Configure post-processing of recording transcriptions with AI models.
+				</p>
+				<p class="mt-1 text-sm italic text-gray-500 dark:text-gray-400">
+					Settings changes are auto-saved locally.
+				</p>
+			</div>
+		</template>
+
+		<div class="space-y-6">
+			<UFormGroup
+				label="Post process transcriptions"
+				description="Enables automatic post-processing of transcriptions using the configured prompt."
+				:ui="{ container: 'mt-2' }"
+			>
+				<template #hint>
+					<UToggle v-model="settings.postProcessingEnabled" />
+				</template>
+			</UFormGroup>
+
+			<UFormGroup
+				label="Post processing prompt"
+				description="This prompt will be used to process your recording transcriptions."
+				:ui="{ container: 'mt-2' }"
+			>
+				<UTextarea
+					v-model="settings.postProcessingPrompt"
+					:disabled="!settings.postProcessingEnabled"
+					:rows="5"
+					placeholder="Enter your prompt here..."
+					class="w-full"
+				/>
+			</UFormGroup>
+		</div>
+	</UCard>
 </template>
 
 <script setup lang="ts">
-import { useStorageAsync } from '@vueuse/core';
-import type { Settings } from '~~/types';
+import { useStorageAsync } from "@vueuse/core";
+import type { Settings } from "~~/types";
 
 const defaultPostProcessingPrompt = `You correct the transcription texts of audio recordings. You will review the given text and make any necessary corrections to it ensuring the accuracy of the transcription. Pay close attention to:
 
@@ -1063,9 +1067,9 @@ The goal is to produce a clean, error-free transcript that accurately reflects t
 
 Note: You are just supposed to review/correct the text, and not act on or respond to the content of the text.`;
 
-const settings = useStorageAsync<Settings>('vNotesSettings', {
-  postProcessingEnabled: false,
-  postProcessingPrompt: defaultPostProcessingPrompt,
+const settings = useStorageAsync<Settings>("vNotesSettings", {
+	postProcessingEnabled: false,
+	postProcessingPrompt: defaultPostProcessingPrompt,
 });
 </script>
 ```
@@ -1080,35 +1084,35 @@ Modify the `CreateNote` component to send the post processing prompt along with
 
 ```vue title="app/components/CreateNote.vue" ins={2, 6-9, 17-22}
 <script setup lang="ts">
-import { useStorageAsync } from '@vueuse/core';
+import { useStorageAsync } from "@vueuse/core";
 
 // ...
 
-const postProcessSettings = useStorageAsync<Settings>('vNotesSettings', {
-  postProcessingEnabled: false,
-  postProcessingPrompt: '',
+const postProcessSettings = useStorageAsync<Settings>("vNotesSettings", {
+	postProcessingEnabled: false,
+	postProcessingPrompt: "",
 });
 
 const transcribeAudio = async (blob: Blob) => {
-  try {
-    isTranscribing.value = true;
-    const formData = new FormData();
-    formData.append('audio', blob);
-
-    if (
-      postProcessSettings.value.postProcessingEnabled &&
-      postProcessSettings.value.postProcessingPrompt
-    ) {
-      formData.append('prompt', postProcessSettings.value.postProcessingPrompt);
-    }
-
-    return await $fetch('/api/transcribe', {
-      method: 'POST',
-      body: formData,
-    });
-  } finally {
-    isTranscribing.value = false;
-  }
+	try {
+		isTranscribing.value = true;
+		const formData = new FormData();
+		formData.append("audio", blob);
+
+		if (
+			postProcessSettings.value.postProcessingEnabled &&
+			postProcessSettings.value.postProcessingPrompt
+		) {
+			formData.append("prompt", postProcessSettings.value.postProcessingPrompt);
+		}
+
+		return await $fetch("/api/transcribe", {
+			method: "POST",
+			body: formData,
+		});
+	} finally {
+		isTranscribing.value = false;
+	}
 };
 
 // ...
@@ -1123,30 +1127,30 @@ Modify the transcribe API endpoint, and update it to the following:
 
 ```ts title="server/api/transcribe.post.ts" ins={9-20, 22}
 export default defineEventHandler(async (event) => {
-  // ...
-
-  try {
-    const response = await cloudflare.env.AI.run('@cf/openai/whisper', {
-      audio: [...new Uint8Array(await blob.arrayBuffer())],
-    });
-
-    const postProcessingPrompt = form.get('prompt') as string;
-    if (postProcessingPrompt && response.text) {
-      const postProcessResult = await cloudflare.env.AI.run(
-        '@cf/meta/llama-3.1-8b-instruct',
-        {
-          temperature: 0.3,
-          prompt: `${postProcessingPrompt}.\n\nText:\n\n${response.text}\n\nResponse:`,
-        }
-      );
-
-      return (postProcessResult as { response?: string }).response;
-    } else {
-      return response.text;
-    }
-  } catch (err) {
-    // ...
-  }
+	// ...
+
+	try {
+		const response = await cloudflare.env.AI.run("@cf/openai/whisper", {
+			audio: [...new Uint8Array(await blob.arrayBuffer())],
+		});
+
+		const postProcessingPrompt = form.get("prompt") as string;
+		if (postProcessingPrompt && response.text) {
+			const postProcessResult = await cloudflare.env.AI.run(
+				"@cf/meta/llama-3.1-8b-instruct",
+				{
+					temperature: 0.3,
+					prompt: `${postProcessingPrompt}.\n\nText:\n\n${response.text}\n\nResponse:`,
+				},
+			);
+
+			return (postProcessResult as { response?: string }).response;
+		} else {
+			return response.text;
+		}
+	} catch (err) {
+		// ...
+	}
 });
 ```
 
diff --git a/src/content/glossary/durable-objects.yaml b/src/content/glossary/durable-objects.yaml
index 97872572aa145d..d279514db09477 100644
--- a/src/content/glossary/durable-objects.yaml
+++ b/src/content/glossary/durable-objects.yaml
@@ -60,9 +60,9 @@ entries:
     general_definition: |-
       A Durable Object alarm is a mechanism that allows you to schedule the Durable Object to be woken up at a time in the future.
 
-  - term: "event context"
+  - term: "request context"
     general_definition: |-
-      The duration of time that a Durable Object is processing an event, such as a remote procedure call. [Compute duration charges](/durable-objects/platform/pricing) are incurred for the duration of the event context.
+      The duration of time that a Durable Object is processing a request, such as a remote procedure call. [Compute duration charges](/durable-objects/platform/pricing) are incurred for the duration of the request context.
 
   - term: "input gate"
     general_definition: |-
diff --git a/src/content/partials/workers/durable_objects_pricing.mdx b/src/content/partials/workers/durable_objects_pricing.mdx
index 68a3dd80fc695a..a0ab17943d74fe 100644
--- a/src/content/partials/workers/durable_objects_pricing.mdx
+++ b/src/content/partials/workers/durable_objects_pricing.mdx
@@ -4,14 +4,18 @@
 
 import { Markdown, GlossaryTooltip } from "~/components";
 
-[Durable Objects](/durable-objects/) are only available on the [Workers Paid plan](/workers/platform/pricing/#workers), and are billed while the Durable Object is active (including the <GlossaryTooltip term="event context"> event context</GlossaryTooltip>).
+[Durable Objects](/durable-objects/) are only available on the [Workers Paid plan](/workers/platform/pricing/#workers), and are billed while the Durable Object is active (including the <GlossaryTooltip term="request context"> request context</GlossaryTooltip>). Note that the request context for a Durable Object extends at least 60 seconds after the last client disconnects.
 
 |                      | Paid plan                                                                                                                               |
 | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
 | Requests             | 1 million, + $0.15/million<br/> Includes HTTP requests, RPC sessions<sup>1</sup>, WebSocket messages<sup>2</sup>, and alarm invocations |
 | Duration<sup>3</sup> | 400,000 GB-s, + $12.50/million GB-s<sup>4,5</sup>                                                                                       |
 
-<sup>1</sup> Each [RPC session](/workers/runtime-apis/rpc/lifecycle/) is billed as one request to your Durable Object. Every [RPC method call](/durable-objects/best-practices/create-durable-object-stubs-and-send-requests/) on a [Durable Objects stub](/durable-objects/) is its own RPC session and therefore a single billed request.
+<sup>1</sup> Each [RPC session](/workers/runtime-apis/rpc/lifecycle/) is billed
+as one request to your Durable Object. Every [RPC method
+call](/durable-objects/best-practices/create-durable-object-stubs-and-send-requests/)
+on a [Durable Objects stub](/durable-objects/) is its own RPC session and
+therefore a single billed request.
 
 RPC method calls can return objects (stubs) extending [`RpcTarget`](/workers/runtime-apis/rpc/lifecycle/#lifetimes-memory-and-resource-management) and invoke calls on those stubs. Subsequent calls on the returned stub are part of the same RPC session and are not billed as separate requests. For example:
 
@@ -22,13 +26,30 @@ await foo.baz(); // treated as part of the same RPC session created by calling b
 await durableObjectStub.cat(); // billed as a request
 ```
 
-<sup>2</sup> A request is needed to create a WebSocket connection. There is no charge for outgoing WebSocket messages, nor for incoming [WebSocket protocol
-pings](https://www.rfc-editor.org/rfc/rfc6455#section-5.5.2). For compute requests billing-only, a 20:1 ratio is applied to incoming WebSocket messages to factor in smaller messages for real-time communication. For example, 100 WebSocket incoming messages would be charged as 5 requests for billing purposes. The 20:1 ratio does not affect Durable Object metrics and analytics, which reflect actual usage.
-
-<sup>3</sup> Application level auto-response messages handled by [`state.setWebSocketAutoResponse()`](/durable-objects/best-practices/websockets/) will not
-incur additional wall-clock time, and so they will not be charged.
-
-<sup>4</sup> Duration is billed in wall-clock time as long as the Object is active, but is shared across all requests active on an Object at once. Calling `accept()` on a WebSocket in an Object will incur duration charges for the entire time the WebSocket is connected. If you prefer, use the [WebSocket hibernation API](/durable-objects/best-practices/websockets/#websocket-hibernation-api) to avoid incurring duration charges once all event handlers finish running.
-
-<sup>5</sup> Duration billing charges for the 128 MB of memory your Durable Object is allocated, regardless of actual usage. If your account creates many instances of a single Durable Object class, Durable Objects may run in the same isolate on the same physical machine and share the 128 MB of memory. These
-Durable Objects are still billed as if they are allocated a full 128 MB of memory.
+<sup>2</sup> A request is needed to create a WebSocket connection. There is no
+charge for outgoing WebSocket messages, nor for incoming [WebSocket protocol
+pings](https://www.rfc-editor.org/rfc/rfc6455#section-5.5.2). For compute
+requests billing-only, a 20:1 ratio is applied to incoming WebSocket messages to
+factor in smaller messages for real-time communication. For example, 100
+WebSocket incoming messages would be charged as 5 requests for billing purposes.
+The 20:1 ratio does not affect Durable Object metrics and analytics, which
+reflect actual usage.
+
+<sup>3</sup> Application level auto-response messages handled by
+[`state.setWebSocketAutoResponse()`](/durable-objects/best-practices/websockets/)
+will not incur additional wall-clock time, and so they will not be charged.
+
+<sup>4</sup> Duration is billed in wall-clock time as long as the Object is
+active, but is shared across all requests active on an Object at once. Calling
+`accept()` on a WebSocket in an Object will incur duration charges for the
+entire time the WebSocket is connected. If you prefer, use the [WebSocket
+hibernation
+API](/durable-objects/best-practices/websockets/#websocket-hibernation-api) to
+avoid incurring duration charges once all event handlers finish running.
+
+<sup>5</sup> Duration billing charges for the 128 MB of memory your Durable
+Object is allocated, regardless of actual usage. If your account creates many
+instances of a single Durable Object class, Durable Objects may run in the same
+isolate on the same physical machine and share the 128 MB of memory. These
+Durable Objects are still billed as if they are allocated a full 128 MB of
+memory.

From 0274019e3c38b101b3fddeabe25046f3ac638fde Mon Sep 17 00:00:00 2001
From: Jun Lee <junlee@cloudflare.com>
Date: Fri, 7 Feb 2025 15:12:33 +0000
Subject: [PATCH 2/6] Undoing prettier automation part 1

---
 .../workers/durable_objects_pricing.mdx       | 44 +++++--------------
 1 file changed, 12 insertions(+), 32 deletions(-)

diff --git a/src/content/partials/workers/durable_objects_pricing.mdx b/src/content/partials/workers/durable_objects_pricing.mdx
index a0ab17943d74fe..22fecf9a99f8e5 100644
--- a/src/content/partials/workers/durable_objects_pricing.mdx
+++ b/src/content/partials/workers/durable_objects_pricing.mdx
@@ -11,11 +11,7 @@ import { Markdown, GlossaryTooltip } from "~/components";
 | Requests             | 1 million, + $0.15/million<br/> Includes HTTP requests, RPC sessions<sup>1</sup>, WebSocket messages<sup>2</sup>, and alarm invocations |
 | Duration<sup>3</sup> | 400,000 GB-s, + $12.50/million GB-s<sup>4,5</sup>                                                                                       |
 
-<sup>1</sup> Each [RPC session](/workers/runtime-apis/rpc/lifecycle/) is billed
-as one request to your Durable Object. Every [RPC method
-call](/durable-objects/best-practices/create-durable-object-stubs-and-send-requests/)
-on a [Durable Objects stub](/durable-objects/) is its own RPC session and
-therefore a single billed request.
+<sup>1</sup> Each [RPC session](/workers/runtime-apis/rpc/lifecycle/) is billed as one request to your Durable Object. Every [RPC method call](/durable-objects/best-practices/create-durable-object-stubs-and-send-requests/) on a [Durable Objects stub](/durable-objects/) is its own RPC session and therefore a single billed request.
 
 RPC method calls can return objects (stubs) extending [`RpcTarget`](/workers/runtime-apis/rpc/lifecycle/#lifetimes-memory-and-resource-management) and invoke calls on those stubs. Subsequent calls on the returned stub are part of the same RPC session and are not billed as separate requests. For example:
 
@@ -26,30 +22,14 @@ await foo.baz(); // treated as part of the same RPC session created by calling b
 await durableObjectStub.cat(); // billed as a request
 ```
 
-<sup>2</sup> A request is needed to create a WebSocket connection. There is no
-charge for outgoing WebSocket messages, nor for incoming [WebSocket protocol
-pings](https://www.rfc-editor.org/rfc/rfc6455#section-5.5.2). For compute
-requests billing-only, a 20:1 ratio is applied to incoming WebSocket messages to
-factor in smaller messages for real-time communication. For example, 100
-WebSocket incoming messages would be charged as 5 requests for billing purposes.
-The 20:1 ratio does not affect Durable Object metrics and analytics, which
-reflect actual usage.
-
-<sup>3</sup> Application level auto-response messages handled by
-[`state.setWebSocketAutoResponse()`](/durable-objects/best-practices/websockets/)
-will not incur additional wall-clock time, and so they will not be charged.
-
-<sup>4</sup> Duration is billed in wall-clock time as long as the Object is
-active, but is shared across all requests active on an Object at once. Calling
-`accept()` on a WebSocket in an Object will incur duration charges for the
-entire time the WebSocket is connected. If you prefer, use the [WebSocket
-hibernation
-API](/durable-objects/best-practices/websockets/#websocket-hibernation-api) to
-avoid incurring duration charges once all event handlers finish running.
-
-<sup>5</sup> Duration billing charges for the 128 MB of memory your Durable
-Object is allocated, regardless of actual usage. If your account creates many
-instances of a single Durable Object class, Durable Objects may run in the same
-isolate on the same physical machine and share the 128 MB of memory. These
-Durable Objects are still billed as if they are allocated a full 128 MB of
-memory.
+<sup>2</sup> A request is needed to create a WebSocket connection. There is no charge for outgoing WebSocket messages, nor for incoming [WebSocket protocol
+pings](https://www.rfc-editor.org/rfc/rfc6455#section-5.5.2). For compute requests billing-only, a 20:1 ratio is applied to incoming WebSocket messages to factor in smaller messages for real-time communication. For example, 100 WebSocket incoming messages would be charged as 5 requests for billing purposes. The 20:1 ratio does not affect Durable Object metrics and analytics, which reflect actual usage.
+
+<sup>3</sup> Application level auto-response messages handled by [`state.setWebSocketAutoResponse()`](/durable-objects/best-practices/websockets/) will not incur additional wall-clock time, and so they will not be charged.
+
+<sup>4</sup> Duration is billed in wall-clock time as long as the Object is active, but is shared across all requests active on an Object at once. Calling
+`accept()` on a WebSocket in an Object will incur duration charges for the entire time the WebSocket is connected. If you prefer, use the [WebSocket
+hibernation API](/durable-objects/best-practices/websockets/#websocket-hibernation-api) to avoid incurring duration charges once all event handlers finish running.
+
+<sup>5</sup> Duration billing charges for the 128 MB of memory your Durable Object is allocated, regardless of actual usage. If your account creates many
+instances of a single Durable Object class, Durable Objects may run in the same isolate on the same physical machine and share the 128 MB of memory. These Durable Objects are still billed as if they are allocated a full 128 MB of memory.

From 4301ed7ccac00362b7af339b4b9741a446d9153a Mon Sep 17 00:00:00 2001
From: Jun Lee <junlee@cloudflare.com>
Date: Fri, 7 Feb 2025 15:13:51 +0000
Subject: [PATCH 3/6] Fixing linebreaks

---
 src/content/partials/workers/durable_objects_pricing.mdx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/content/partials/workers/durable_objects_pricing.mdx b/src/content/partials/workers/durable_objects_pricing.mdx
index 22fecf9a99f8e5..2a0a21c9447f57 100644
--- a/src/content/partials/workers/durable_objects_pricing.mdx
+++ b/src/content/partials/workers/durable_objects_pricing.mdx
@@ -28,8 +28,6 @@ pings](https://www.rfc-editor.org/rfc/rfc6455#section-5.5.2). For compute reques
 <sup>3</sup> Application level auto-response messages handled by [`state.setWebSocketAutoResponse()`](/durable-objects/best-practices/websockets/) will not incur additional wall-clock time, and so they will not be charged.
 
 <sup>4</sup> Duration is billed in wall-clock time as long as the Object is active, but is shared across all requests active on an Object at once. Calling
-`accept()` on a WebSocket in an Object will incur duration charges for the entire time the WebSocket is connected. If you prefer, use the [WebSocket
-hibernation API](/durable-objects/best-practices/websockets/#websocket-hibernation-api) to avoid incurring duration charges once all event handlers finish running.
+`accept()` on a WebSocket in an Object will incur duration charges for the entire time the WebSocket is connected. If you prefer, use the [WebSocket hibernation API](/durable-objects/best-practices/websockets/#websocket-hibernation-api) to avoid incurring duration charges once all event handlers finish running.
 
-<sup>5</sup> Duration billing charges for the 128 MB of memory your Durable Object is allocated, regardless of actual usage. If your account creates many
-instances of a single Durable Object class, Durable Objects may run in the same isolate on the same physical machine and share the 128 MB of memory. These Durable Objects are still billed as if they are allocated a full 128 MB of memory.
+<sup>5</sup> Duration billing charges for the 128 MB of memory your Durable Object is allocated, regardless of actual usage. If your account creates many instances of a single Durable Object class, Durable Objects may run in the same isolate on the same physical machine and share the 128 MB of memory. These Durable Objects are still billed as if they are allocated a full 128 MB of memory.

From 780d22b6d838cc2cf147bce0a7abb0e92314afc0 Mon Sep 17 00:00:00 2001
From: Jun Lee <junlee@cloudflare.com>
Date: Fri, 7 Feb 2025 15:14:49 +0000
Subject: [PATCH 4/6] Fixing linebreak part 2

---
 src/content/partials/workers/durable_objects_pricing.mdx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/content/partials/workers/durable_objects_pricing.mdx b/src/content/partials/workers/durable_objects_pricing.mdx
index 2a0a21c9447f57..9c54adef13971d 100644
--- a/src/content/partials/workers/durable_objects_pricing.mdx
+++ b/src/content/partials/workers/durable_objects_pricing.mdx
@@ -22,12 +22,10 @@ await foo.baz(); // treated as part of the same RPC session created by calling b
 await durableObjectStub.cat(); // billed as a request
 ```
 
-<sup>2</sup> A request is needed to create a WebSocket connection. There is no charge for outgoing WebSocket messages, nor for incoming [WebSocket protocol
-pings](https://www.rfc-editor.org/rfc/rfc6455#section-5.5.2). For compute requests billing-only, a 20:1 ratio is applied to incoming WebSocket messages to factor in smaller messages for real-time communication. For example, 100 WebSocket incoming messages would be charged as 5 requests for billing purposes. The 20:1 ratio does not affect Durable Object metrics and analytics, which reflect actual usage.
+<sup>2</sup> A request is needed to create a WebSocket connection. There is no charge for outgoing WebSocket messages, nor for incoming [WebSocket protocol pings](https://www.rfc-editor.org/rfc/rfc6455#section-5.5.2). For compute requests billing-only, a 20:1 ratio is applied to incoming WebSocket messages to factor in smaller messages for real-time communication. For example, 100 WebSocket incoming messages would be charged as 5 requests for billing purposes. The 20:1 ratio does not affect Durable Object metrics and analytics, which reflect actual usage.
 
 <sup>3</sup> Application level auto-response messages handled by [`state.setWebSocketAutoResponse()`](/durable-objects/best-practices/websockets/) will not incur additional wall-clock time, and so they will not be charged.
 
-<sup>4</sup> Duration is billed in wall-clock time as long as the Object is active, but is shared across all requests active on an Object at once. Calling
-`accept()` on a WebSocket in an Object will incur duration charges for the entire time the WebSocket is connected. If you prefer, use the [WebSocket hibernation API](/durable-objects/best-practices/websockets/#websocket-hibernation-api) to avoid incurring duration charges once all event handlers finish running.
+<sup>4</sup> Duration is billed in wall-clock time as long as the Object is active, but is shared across all requests active on an Object at once. Calling `accept()` on a WebSocket in an Object will incur duration charges for the entire time the WebSocket is connected. If you prefer, use the [WebSocket hibernation API](/durable-objects/best-practices/websockets/#websocket-hibernation-api) to avoid incurring duration charges once all event handlers finish running.
 
 <sup>5</sup> Duration billing charges for the 128 MB of memory your Durable Object is allocated, regardless of actual usage. If your account creates many instances of a single Durable Object class, Durable Objects may run in the same isolate on the same physical machine and share the 128 MB of memory. These Durable Objects are still billed as if they are allocated a full 128 MB of memory.

From bc777792bb3a7b82c352997bfb9444edbc116eea Mon Sep 17 00:00:00 2001
From: Jun Lee <junlee@cloudflare.com>
Date: Fri, 7 Feb 2025 15:21:35 +0000
Subject: [PATCH 5/6] Reverting unwanted prettier change from Workers AI.

---
 ...oice-notes-app-with-auto-transcription.mdx | 1216 ++++++++---------
 1 file changed, 606 insertions(+), 610 deletions(-)

diff --git a/src/content/docs/workers-ai/tutorials/build-a-voice-notes-app-with-auto-transcription.mdx b/src/content/docs/workers-ai/tutorials/build-a-voice-notes-app-with-auto-transcription.mdx
index b177397e102fb2..3b028a57979d24 100644
--- a/src/content/docs/workers-ai/tutorials/build-a-voice-notes-app-with-auto-transcription.mdx
+++ b/src/content/docs/workers-ai/tutorials/build-a-voice-notes-app-with-auto-transcription.mdx
@@ -42,11 +42,7 @@ To continue, you will need:
 
 Create a new Worker project using the `c3` CLI with the `nuxt` framework preset.
 
-<PackageManagers
-	type="create"
-	pkg="cloudflare@latest"
-	args={"voice-notes --framework=nuxt --experimental"}
-/>
+<PackageManagers type="create" pkg="cloudflare@latest" args={"voice-notes --framework=nuxt --experimental"} />
 
 ### Install additional dependencies
 
@@ -64,12 +60,12 @@ Then add the `@nuxt/ui` module to the `nuxt.config.ts` file:
 
 ```ts title="nuxt.config.ts"
 export default defineNuxtConfig({
-	//..
+  //..
 
-	modules: ["nitro-cloudflare-dev", "@nuxt/ui"],
+  modules: ['nitro-cloudflare-dev', '@nuxt/ui'],
 
-	//..
-});
+  //..
+})
 ```
 
 ### [Optional] Move to Nuxt 4 compatibility mode
@@ -80,14 +76,14 @@ Create a new `app` folder in the project's root directory and move the `app.vue`
 
 ```ts title="nuxt.config.ts"
 export default defineNuxtConfig({
-	//..
+  //..
 
-	future: {
-		compatibilityVersion: 4,
-	},
+  future: {
+    compatibilityVersion: 4,
+  },
 
-	//..
-});
+  //..
+})
 ```
 
 :::note
@@ -115,7 +111,7 @@ Add the `AI` binding to the Wrangler file.
 binding = "AI"
 ```
 
-Once the `AI` binding has been configured, run the `cf-typegen` command to generate the necessary Cloudflare type definitions. This makes the types definitions available in the server request contexts.
+Once the `AI` binding has been configured, run the `cf-typegen` command to generate the necessary Cloudflare type definitions. This makes the types definitions available in the server event contexts.
 
 <PackageManagers type="run" args="cf-typegen" />
 
@@ -123,30 +119,30 @@ Create a transcribe `POST` endpoint by creating `transcribe.post.ts` file inside
 
 ```ts title="server/api/transcribe.post.ts"
 export default defineEventHandler(async (event) => {
-	const { cloudflare } = event.context;
-
-	const form = await readFormData(event);
-	const blob = form.get("audio") as Blob;
-	if (!blob) {
-		throw createError({
-			statusCode: 400,
-			message: "Missing audio blob to transcribe",
-		});
-	}
-
-	try {
-		const response = await cloudflare.env.AI.run("@cf/openai/whisper", {
-			audio: [...new Uint8Array(await blob.arrayBuffer())],
-		});
-
-		return response.text;
-	} catch (err) {
-		console.error("Error transcribing audio:", err);
-		throw createError({
-			statusCode: 500,
-			message: "Failed to transcribe audio. Please try again.",
-		});
-	}
+  const { cloudflare } = event.context;
+
+  const form = await readFormData(event);
+  const blob = form.get('audio') as Blob;
+  if (!blob) {
+    throw createError({
+      statusCode: 400,
+      message: 'Missing audio blob to transcribe',
+    });
+  }
+
+  try {
+    const response = await cloudflare.env.AI.run('@cf/openai/whisper', {
+      audio: [...new Uint8Array(await blob.arrayBuffer())],
+    });
+
+    return response.text;
+  } catch (err) {
+    console.error('Error transcribing audio:', err);
+    throw createError({
+      statusCode: 500,
+      message: 'Failed to transcribe audio. Please try again.',
+    });
+  }
 });
 ```
 
@@ -199,23 +195,23 @@ Now you are ready to create the upload endpoint. Create a new `upload.put.ts` fi
 
 ```ts title="server/api/upload.put.ts"
 export default defineEventHandler(async (event) => {
-	const { cloudflare } = event.context;
-
-	const form = await readFormData(event);
-	const files = form.getAll("files") as File[];
-	if (!files) {
-		throw createError({ statusCode: 400, message: "Missing files" });
-	}
-
-	const uploadKeys: string[] = [];
-	for (const file of files) {
-		const obj = await cloudflare.env.R2.put(`recordings/${file.name}`, file);
-		if (obj) {
-			uploadKeys.push(obj.key);
-		}
-	}
-
-	return uploadKeys;
+  const { cloudflare } = event.context;
+
+  const form = await readFormData(event);
+  const files = form.getAll('files') as File[];
+  if (!files) {
+    throw createError({ statusCode: 400, message: 'Missing files' });
+  }
+
+  const uploadKeys: string[] = [];
+  for (const file of files) {
+    const obj = await cloudflare.env.R2.put(`recordings/${file.name}`, file);
+    if (obj) {
+      uploadKeys.push(obj.key);
+    }
+  }
+
+  return uploadKeys;
 });
 ```
 
@@ -341,31 +337,31 @@ Now you can create the API endpoint. Create a new file `index.post.ts` in the `s
 
 ```ts title="server/api/notes/index.post.ts"
 export default defineEventHandler(async (event) => {
-	const { cloudflare } = event.context;
-
-	const { text, audioUrls } = await readBody(event);
-	if (!text) {
-		throw createError({
-			statusCode: 400,
-			message: "Missing note text",
-		});
-	}
-
-	try {
-		await cloudflare.env.DB.prepare(
-			"INSERT INTO notes (text, audio_urls) VALUES (?1, ?2)",
-		)
-			.bind(text, audioUrls ? JSON.stringify(audioUrls) : null)
-			.run();
-
-		return setResponseStatus(event, 201);
-	} catch (err) {
-		console.error("Error creating note:", err);
-		throw createError({
-			statusCode: 500,
-			message: "Failed to create note. Please try again.",
-		});
-	}
+  const { cloudflare } = event.context;
+
+  const { text, audioUrls } = await readBody(event);
+  if (!text) {
+    throw createError({
+      statusCode: 400,
+      message: 'Missing note text',
+    });
+  }
+
+  try {
+    await cloudflare.env.DB.prepare(
+      'INSERT INTO notes (text, audio_urls) VALUES (?1, ?2)'
+    )
+      .bind(text, audioUrls ? JSON.stringify(audioUrls) : null)
+      .run();
+
+    return setResponseStatus(event, 201);
+  } catch (err) {
+    console.error('Error creating note:', err);
+    throw createError({
+      statusCode: 500,
+      message: 'Failed to create note. Please try again.',
+    });
+  }
 });
 ```
 
@@ -386,110 +382,110 @@ Create a new file `useMediaRecorder.ts` in the `app/composables` folder, and add
 
 ```ts title="app/composables/useMediaRecorder.ts"
 interface MediaRecorderState {
-	isRecording: boolean;
-	recordingDuration: number;
-	audioData: Uint8Array | null;
-	updateTrigger: number;
+  isRecording: boolean;
+  recordingDuration: number;
+  audioData: Uint8Array | null;
+  updateTrigger: number;
 }
 
 export function useMediaRecorder() {
-	const state = ref<MediaRecorderState>({
-		isRecording: false,
-		recordingDuration: 0,
-		audioData: null,
-		updateTrigger: 0,
-	});
-
-	let mediaRecorder: MediaRecorder | null = null;
-	let audioContext: AudioContext | null = null;
-	let analyser: AnalyserNode | null = null;
-	let animationFrame: number | null = null;
-	let audioChunks: Blob[] | undefined = undefined;
-
-	const updateAudioData = () => {
-		if (!analyser || !state.value.isRecording || !state.value.audioData) {
-			if (animationFrame) {
-				cancelAnimationFrame(animationFrame);
-				animationFrame = null;
-			}
-
-			return;
-		}
-
-		analyser.getByteTimeDomainData(state.value.audioData);
-		state.value.updateTrigger += 1;
-		animationFrame = requestAnimationFrame(updateAudioData);
-	};
-
-	const startRecording = async () => {
-		try {
-			const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-
-			audioContext = new AudioContext();
-			analyser = audioContext.createAnalyser();
-
-			const source = audioContext.createMediaStreamSource(stream);
-			source.connect(analyser);
-
-			mediaRecorder = new MediaRecorder(stream);
-			audioChunks = [];
-
-			mediaRecorder.ondataavailable = (e: BlobEvent) => {
-				audioChunks?.push(e.data);
-				state.value.recordingDuration += 1;
-			};
-
-			state.value.audioData = new Uint8Array(analyser.frequencyBinCount);
-			state.value.isRecording = true;
-			state.value.recordingDuration = 0;
-			state.value.updateTrigger = 0;
-			mediaRecorder.start(1000);
-
-			updateAudioData();
-		} catch (err) {
-			console.error("Error accessing microphone:", err);
-			throw err;
-		}
-	};
-
-	const stopRecording = async () => {
-		return await new Promise<Blob>((resolve) => {
-			if (mediaRecorder && state.value.isRecording) {
-				mediaRecorder.onstop = () => {
-					const blob = new Blob(audioChunks, { type: "audio/webm" });
-					audioChunks = undefined;
-
-					state.value.recordingDuration = 0;
-					state.value.updateTrigger = 0;
-					state.value.audioData = null;
-
-					resolve(blob);
-				};
-
-				state.value.isRecording = false;
-				mediaRecorder.stop();
-				mediaRecorder.stream.getTracks().forEach((track) => track.stop());
-
-				if (animationFrame) {
-					cancelAnimationFrame(animationFrame);
-					animationFrame = null;
-				}
-
-				audioContext?.close();
-				audioContext = null;
-			}
-		});
-	};
-
-	onUnmounted(() => {
-		stopRecording();
-	});
-
-	return {
-		state: readonly(state),
-		startRecording,
-		stopRecording,
-	};
+  const state = ref<MediaRecorderState>({
+    isRecording: false,
+    recordingDuration: 0,
+    audioData: null,
+    updateTrigger: 0,
+  });
+
+  let mediaRecorder: MediaRecorder | null = null;
+  let audioContext: AudioContext | null = null;
+  let analyser: AnalyserNode | null = null;
+  let animationFrame: number | null = null;
+  let audioChunks: Blob[] | undefined = undefined;
+
+  const updateAudioData = () => {
+    if (!analyser || !state.value.isRecording || !state.value.audioData) {
+      if (animationFrame) {
+        cancelAnimationFrame(animationFrame);
+        animationFrame = null;
+      }
+
+      return;
+    }
+
+    analyser.getByteTimeDomainData(state.value.audioData);
+    state.value.updateTrigger += 1;
+    animationFrame = requestAnimationFrame(updateAudioData);
+  };
+
+  const startRecording = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+
+      audioContext = new AudioContext();
+      analyser = audioContext.createAnalyser();
+
+      const source = audioContext.createMediaStreamSource(stream);
+      source.connect(analyser);
+
+      mediaRecorder = new MediaRecorder(stream);
+      audioChunks = [];
+
+      mediaRecorder.ondataavailable = (e: BlobEvent) => {
+        audioChunks?.push(e.data);
+        state.value.recordingDuration += 1;
+      };
+
+      state.value.audioData = new Uint8Array(analyser.frequencyBinCount);
+      state.value.isRecording = true;
+      state.value.recordingDuration = 0;
+      state.value.updateTrigger = 0;
+      mediaRecorder.start(1000);
+
+      updateAudioData();
+    } catch (err) {
+      console.error('Error accessing microphone:', err);
+      throw err;
+    }
+  };
+
+  const stopRecording = async () => {
+    return await new Promise<Blob>((resolve) => {
+      if (mediaRecorder && state.value.isRecording) {
+        mediaRecorder.onstop = () => {
+          const blob = new Blob(audioChunks, { type: 'audio/webm' });
+          audioChunks = undefined;
+
+          state.value.recordingDuration = 0;
+          state.value.updateTrigger = 0;
+          state.value.audioData = null;
+
+          resolve(blob);
+        };
+
+        state.value.isRecording = false;
+        mediaRecorder.stop();
+        mediaRecorder.stream.getTracks().forEach((track) => track.stop());
+
+        if (animationFrame) {
+          cancelAnimationFrame(animationFrame);
+          animationFrame = null;
+        }
+
+        audioContext?.close();
+        audioContext = null;
+      }
+    });
+  };
+
+  onUnmounted(() => {
+    stopRecording();
+  });
+
+  return {
+    state: readonly(state),
+    startRecording,
+    stopRecording,
+  };
 }
 ```
 
@@ -512,116 +508,116 @@ Create a new file named `CreateNote.vue` inside the `app/components` folder. Add
 
 ```vue title="app/components/CreateNote.vue"
 <template>
-	<div class="flex flex-col gap-y-5">
-		<div
-			class="flex h-full flex-col gap-y-4 overflow-hidden p-px md:flex-row md:gap-x-6"
-		>
-			<UCard
-				:ui="{
-					base: 'h-full flex flex-col flex-1',
-					body: { base: 'flex-grow' },
-					header: { base: 'md:h-[72px]' },
-				}"
-			>
-				<template #header>
-					<h3
-						class="text-base font-medium text-gray-600 dark:text-gray-300 md:text-lg"
-					>
-						Note transcript
-					</h3>
-				</template>
-				<UTextarea
-					v-model="note"
-					placeholder="Type your note or use voice recording..."
-					size="lg"
-					autofocus
-					:disabled="loading || isTranscribing || state.isRecording"
-					:rows="10"
-				/>
-			</UCard>
-
-			<UCard
-				class="order-first shrink-0 md:order-none md:flex md:h-full md:w-96 md:flex-col"
-				:ui="{
-					body: { base: 'max-h-36 md:max-h-none md:flex-grow overflow-y-auto' },
-				}"
-			>
-				<template #header>
-					<h3
-						class="text-base font-medium text-gray-600 dark:text-gray-300 md:text-lg"
-					>
-						Note recordings
-					</h3>
-
-					<UTooltip
-						:text="state.isRecording ? 'Stop Recording' : 'Start Recording'"
-					>
-						<UButton
-							:icon="
-								state.isRecording
-									? 'i-heroicons-stop-circle'
-									: 'i-heroicons-microphone'
-							"
-							:color="state.isRecording ? 'red' : 'primary'"
-							:loading="isTranscribing"
-							@click="toggleRecording"
-						/>
-					</UTooltip>
-				</template>
-
-				<AudioVisualizer
-					v-if="state.isRecording"
-					class="mb-2 h-14 w-full rounded-lg bg-gray-50 p-2 dark:bg-gray-800"
-					:audio-data="state.audioData"
-					:data-update-trigger="state.updateTrigger"
-				/>
-
-				<div
-					v-else-if="isTranscribing"
-					class="mb-2 flex h-14 items-center justify-center gap-x-3 rounded-lg bg-gray-50 p-2 text-gray-500 dark:bg-gray-800 dark:text-gray-400"
-				>
-					<UIcon
-						name="i-heroicons-arrow-path-20-solid"
-						class="h-6 w-6 animate-spin"
-					/>
-					Transcribing...
-				</div>
-
-				<RecordingsList :recordings="recordings" @delete="deleteRecording" />
-
-				<div
-					v-if="!recordings.length && !state.isRecording && !isTranscribing"
-					class="flex h-full items-center justify-center text-gray-500 dark:text-gray-400"
-				>
-					No recordings...
-				</div>
-			</UCard>
-		</div>
-
-		<UDivider />
-
-		<div class="flex justify-end gap-x-4">
-			<UButton
-				icon="i-heroicons-trash"
-				color="gray"
-				size="lg"
-				variant="ghost"
-				:disabled="loading"
-				@click="clearNote"
-			>
-				Clear
-			</UButton>
-			<UButton
-				icon="i-heroicons-cloud-arrow-up"
-				size="lg"
-				:loading="loading"
-				:disabled="!note.trim() && !state.isRecording"
-				@click="saveNote"
-			>
-				Save
-			</UButton>
-		</div>
-	</div>
+  <div class="flex flex-col gap-y-5">
+    <div
+      class="flex flex-col h-full md:flex-row gap-y-4 md:gap-x-6 overflow-hidden p-px"
+    >
+      <UCard
+        :ui="{
+          base: 'h-full flex flex-col flex-1',
+          body: { base: 'flex-grow' },
+          header: { base: 'md:h-[72px]' },
+        }"
+      >
+        <template #header>
+          <h3
+            class="text-base md:text-lg font-medium text-gray-600 dark:text-gray-300"
+          >
+            Note transcript
+          </h3>
+        </template>
+        <UTextarea
+          v-model="note"
+          placeholder="Type your note or use voice recording..."
+          size="lg"
+          autofocus
+          :disabled="loading || isTranscribing || state.isRecording"
+          :rows="10"
+        />
+      </UCard>
+
+      <UCard
+        class="md:h-full md:flex md:flex-col md:w-96 shrink-0 order-first md:order-none"
+        :ui="{
+          body: { base: 'max-h-36 md:max-h-none md:flex-grow overflow-y-auto' },
+        }"
+      >
+        <template #header>
+          <h3
+            class="text-base md:text-lg font-medium text-gray-600 dark:text-gray-300"
+          >
+            Note recordings
+          </h3>
+
+          <UTooltip
+            :text="state.isRecording ? 'Stop Recording' : 'Start Recording'"
+          >
+            <UButton
+              :icon="
+                state.isRecording
+                  ? 'i-heroicons-stop-circle'
+                  : 'i-heroicons-microphone'
+              "
+              :color="state.isRecording ? 'red' : 'primary'"
+              :loading="isTranscribing"
+              @click="toggleRecording"
+            />
+          </UTooltip>
+        </template>
+
+        <AudioVisualizer
+          v-if="state.isRecording"
+          class="w-full h-14 p-2 bg-gray-50 dark:bg-gray-800 rounded-lg mb-2"
+          :audio-data="state.audioData"
+          :data-update-trigger="state.updateTrigger"
+        />
+
+        <div
+          v-else-if="isTranscribing"
+          class="flex items-center justify-center h-14 gap-x-3 p-2 bg-gray-50 dark:bg-gray-800 rounded-lg mb-2 text-gray-500 dark:text-gray-400"
+        >
+          <UIcon
+            name="i-heroicons-arrow-path-20-solid"
+            class="w-6 h-6 animate-spin"
+          />
+          Transcribing...
+        </div>
+
+        <RecordingsList :recordings="recordings" @delete="deleteRecording" />
+
+        <div
+          v-if="!recordings.length && !state.isRecording && !isTranscribing"
+          class="h-full flex items-center justify-center text-gray-500 dark:text-gray-400"
+        >
+          No recordings...
+        </div>
+      </UCard>
+    </div>
+
+    <UDivider />
+
+    <div class="flex justify-end gap-x-4">
+      <UButton
+        icon="i-heroicons-trash"
+        color="gray"
+        size="lg"
+        variant="ghost"
+        :disabled="loading"
+        @click="clearNote"
+      >
+        Clear
+      </UButton>
+      <UButton
+        icon="i-heroicons-cloud-arrow-up"
+        size="lg"
+        :loading="loading"
+        :disabled="!note.trim() && !state.isRecording"
+        @click="saveNote"
+      >
+        Save
+      </UButton>
+    </div>
+  </div>
 </template>
 ```
 
@@ -635,155 +631,155 @@ Now, add the following code below the template code in the same file:
 
 ```vue title="app/components/CreateNote.vue"
 <script setup lang="ts">
-import type { Recording, Settings } from "~~/types";
+import type { Recording, Settings } from '~~/types';
 
 const emit = defineEmits<{
-	(e: "created"): void;
+  (e: 'created'): void;
 }>();
 
-const note = ref("");
+const note = ref('');
 const loading = ref(false);
 const isTranscribing = ref(false);
 const { state, startRecording, stopRecording } = useMediaRecorder();
 const recordings = ref<Recording[]>([]);
 
 const handleRecordingStart = async () => {
-	try {
-		await startRecording();
-	} catch (err) {
-		console.error("Error accessing microphone:", err);
-		useToast().add({
-			title: "Error",
-			description: "Could not access microphone. Please check permissions.",
-			color: "red",
-		});
-	}
+  try {
+    await startRecording();
+  } catch (err) {
+    console.error('Error accessing microphone:', err);
+    useToast().add({
+      title: 'Error',
+      description: 'Could not access microphone. Please check permissions.',
+      color: 'red',
+    });
+  }
 };
 
 const handleRecordingStop = async () => {
-	let blob: Blob | undefined;
-
-	try {
-		blob = await stopRecording();
-	} catch (err) {
-		console.error("Error stopping recording:", err);
-		useToast().add({
-			title: "Error",
-			description: "Failed to record audio. Please try again.",
-			color: "red",
-		});
-	}
-
-	if (blob) {
-		try {
-			const transcription = await transcribeAudio(blob);
-
-			note.value += note.value ? "\n\n" : "";
-			note.value += transcription ?? "";
-
-			recordings.value.unshift({
-				url: URL.createObjectURL(blob),
-				blob,
-				id: `${Date.now()}`,
-			});
-		} catch (err) {
-			console.error("Error transcribing audio:", err);
-			useToast().add({
-				title: "Error",
-				description: "Failed to transcribe audio. Please try again.",
-				color: "red",
-			});
-		}
-	}
+  let blob: Blob | undefined;
+
+  try {
+    blob = await stopRecording();
+  } catch (err) {
+    console.error('Error stopping recording:', err);
+    useToast().add({
+      title: 'Error',
+      description: 'Failed to record audio. Please try again.',
+      color: 'red',
+    });
+  }
+
+  if (blob) {
+    try {
+      const transcription = await transcribeAudio(blob);
+
+      note.value += note.value ? '\n\n' : '';
+      note.value += transcription ?? '';
+
+      recordings.value.unshift({
+        url: URL.createObjectURL(blob),
+        blob,
+        id: `${Date.now()}`,
+      });
+    } catch (err) {
+      console.error('Error transcribing audio:', err);
+      useToast().add({
+        title: 'Error',
+        description: 'Failed to transcribe audio. Please try again.',
+        color: 'red',
+      });
+    }
+  }
 };
 
 const toggleRecording = () => {
-	if (state.value.isRecording) {
-		handleRecordingStop();
-	} else {
-		handleRecordingStart();
-	}
+  if (state.value.isRecording) {
+    handleRecordingStop();
+  } else {
+    handleRecordingStart();
+  }
 };
 
 const transcribeAudio = async (blob: Blob) => {
-	try {
-		isTranscribing.value = true;
-		const formData = new FormData();
-		formData.append("audio", blob);
-
-		return await $fetch("/api/transcribe", {
-			method: "POST",
-			body: formData,
-		});
-	} finally {
-		isTranscribing.value = false;
-	}
+  try {
+    isTranscribing.value = true;
+    const formData = new FormData();
+    formData.append('audio', blob);
+
+    return await $fetch('/api/transcribe', {
+      method: 'POST',
+      body: formData,
+    });
+  } finally {
+    isTranscribing.value = false;
+  }
 };
 
 const clearNote = () => {
-	note.value = "";
-	recordings.value = [];
+  note.value = '';
+  recordings.value = [];
 };
 
 const saveNote = async () => {
-	if (!note.value.trim()) return;
-
-	loading.value = true;
-
-	const noteToSave: { text: string; audioUrls?: string[] } = {
-		text: note.value.trim(),
-	};
-
-	try {
-		if (recordings.value.length) {
-			noteToSave.audioUrls = await uploadRecordings();
-		}
-
-		await $fetch("/api/notes", {
-			method: "POST",
-			body: noteToSave,
-		});
-
-		useToast().add({
-			title: "Success",
-			description: "Note saved successfully",
-			color: "green",
-		});
-
-		note.value = "";
-		recordings.value = [];
-
-		emit("created");
-	} catch (err) {
-		console.error("Error saving note:", err);
-		useToast().add({
-			title: "Error",
-			description: "Failed to save note",
-			color: "red",
-		});
-	} finally {
-		loading.value = false;
-	}
+  if (!note.value.trim()) return;
+
+  loading.value = true;
+
+  const noteToSave: { text: string; audioUrls?: string[] } = {
+    text: note.value.trim(),
+  };
+
+  try {
+    if (recordings.value.length) {
+      noteToSave.audioUrls = await uploadRecordings();
+    }
+
+    await $fetch('/api/notes', {
+      method: 'POST',
+      body: noteToSave,
+    });
+
+    useToast().add({
+      title: 'Success',
+      description: 'Note saved successfully',
+      color: 'green',
+    });
+
+    note.value = '';
+    recordings.value = [];
+
+    emit('created');
+  } catch (err) {
+    console.error('Error saving note:', err);
+    useToast().add({
+      title: 'Error',
+      description: 'Failed to save note',
+      color: 'red',
+    });
+  } finally {
+    loading.value = false;
+  }
 };
 
 const deleteRecording = (recording: Recording) => {
-	recordings.value = recordings.value.filter((r) => r.id !== recording.id);
+  recordings.value = recordings.value.filter((r) => r.id !== recording.id);
 };
 
 const uploadRecordings = async () => {
-	if (!recordings.value.length) return;
+  if (!recordings.value.length) return;
 
-	const formData = new FormData();
-	recordings.value.forEach((recording) => {
-		formData.append("files", recording.blob, recording.id + ".webm");
-	});
+  const formData = new FormData();
+  recordings.value.forEach((recording) => {
+    formData.append('files', recording.blob, recording.id + '.webm');
+  });
 
-	const uploadKeys = await $fetch("/api/upload", {
-		method: "PUT",
-		body: formData,
-	});
+  const uploadKeys = await $fetch('/api/upload', {
+    method: 'PUT',
+    body: formData,
+  });
 
-	return uploadKeys;
+  return uploadKeys;
 };
 </script>
 ```
@@ -800,65 +796,65 @@ You can use this component in a Nuxt page to show it to the user. But before tha
 
 ```vue title="/app/app.vue"
 <template>
-	<NuxtRouteAnnouncer />
-	<NuxtLoadingIndicator />
-	<div class="flex h-screen flex-col md:flex-row">
-		<USlideover
-			v-model="isDrawerOpen"
-			class="md:hidden"
-			side="left"
-			:ui="{ width: 'max-w-xs' }"
-		>
-			<AppSidebar :links="links" @hide-drawer="isDrawerOpen = false" />
-		</USlideover>
-
-		<!-- The App Sidebar -->
-		<AppSidebar :links="links" class="hidden md:block md:w-64" />
-
-		<div class="h-full min-w-0 flex-1 bg-gray-50 dark:bg-gray-950">
-			<!-- The App Header -->
-			<AppHeader :title="title" @show-drawer="isDrawerOpen = true">
-				<template #actions v-if="route.path === '/'">
-					<UButton icon="i-heroicons-plus" @click="navigateTo('/new')">
-						New Note
-					</UButton>
-				</template>
-			</AppHeader>
-
-			<!-- Main Page Content -->
-			<main class="h-[calc(100vh-3.5rem)] overflow-y-auto p-4 sm:p-6">
-				<NuxtPage />
-			</main>
-		</div>
-	</div>
-	<UNotifications />
+  <NuxtRouteAnnouncer />
+  <NuxtLoadingIndicator />
+  <div class="h-screen flex flex-col md:flex-row">
+    <USlideover
+      v-model="isDrawerOpen"
+      class="md:hidden"
+      side="left"
+      :ui="{ width: 'max-w-xs' }"
+    >
+      <AppSidebar :links="links" @hide-drawer="isDrawerOpen = false" />
+    </USlideover>
+
+    <!-- The App Sidebar -->
+    <AppSidebar :links="links" class="hidden md:block md:w-64" />
+
+    <div class="flex-1 h-full min-w-0 bg-gray-50 dark:bg-gray-950">
+      <!-- The App Header -->
+      <AppHeader :title="title" @show-drawer="isDrawerOpen = true">
+        <template #actions v-if="route.path === '/'">
+          <UButton icon="i-heroicons-plus" @click="navigateTo('/new')">
+            New Note
+          </UButton>
+        </template>
+      </AppHeader>
+
+      <!-- Main Page Content -->
+      <main class="p-4 sm:p-6 h-[calc(100vh-3.5rem)] overflow-y-auto">
+        <NuxtPage />
+      </main>
+    </div>
+  </div>
+  <UNotifications />
 </template>
 
 <script setup lang="ts">
 const isDrawerOpen = ref(false);
 const links = [
-	{
-		label: "Notes",
-		icon: "i-heroicons-document-text",
-		to: "/",
-		click: () => (isDrawerOpen.value = false),
-	},
-	{
-		label: "Settings",
-		icon: "i-heroicons-cog",
-		to: "/settings",
-		click: () => (isDrawerOpen.value = false),
-	},
+  {
+    label: 'Notes',
+    icon: 'i-heroicons-document-text',
+    to: '/',
+    click: () => (isDrawerOpen.value = false),
+  },
+  {
+    label: 'Settings',
+    icon: 'i-heroicons-cog',
+    to: '/settings',
+    click: () => (isDrawerOpen.value = false),
+  },
 ];
 
 const route = useRoute();
 const title = computed(() => {
-	const activeLink = links.find((l) => l.to === route.path);
-	if (activeLink) {
-		return activeLink.label;
-	}
+  const activeLink = links.find((l) => l.to === route.path);
+  if (activeLink) {
+    return activeLink.label;
+  }
 
-	return "";
+  return '';
 });
 </script>
 ```
@@ -869,29 +865,29 @@ Next, add a new file named `new.vue` inside the `app/pages` folder, add the foll
 
 ```vue title="app/pages/new.vue"
 <template>
-	<UModal v-model="isOpen" fullscreen>
-		<UCard
-			:ui="{
-				base: 'h-full flex flex-col',
-				rounded: '',
-				body: {
-					base: 'flex-grow overflow-hidden',
-				},
-			}"
-		>
-			<template #header>
-				<h2 class="text-xl font-semibold leading-6 md:text-2xl">Create note</h2>
-				<UButton
-					color="gray"
-					variant="ghost"
-					icon="i-heroicons-x-mark-20-solid"
-					@click="closeModal"
-				/>
-			</template>
-
-			<CreateNote class="mx-auto h-full max-w-7xl" @created="closeModal" />
-		</UCard>
-	</UModal>
+  <UModal v-model="isOpen" fullscreen>
+    <UCard
+      :ui="{
+        base: 'h-full flex flex-col',
+        rounded: '',
+        body: {
+          base: 'flex-grow overflow-hidden',
+        },
+      }"
+    >
+      <template #header>
+        <h2 class="text-xl md:text-2xl font-semibold leading-6">Create note</h2>
+        <UButton
+          color="gray"
+          variant="ghost"
+          icon="i-heroicons-x-mark-20-solid"
+          @click="closeModal"
+        />
+      </template>
+
+      <CreateNote class="max-w-7xl mx-auto h-full" @created="closeModal" />
+    </UCard>
+  </UModal>
 </template>
 
 <script setup lang="ts">
@@ -899,16 +895,16 @@ const isOpen = ref(true);
 
 const router = useRouter();
 const closeModal = () => {
-	isOpen.value = false;
-
-	if (window.history.length > 2) {
-		router.back();
-	} else {
-		navigateTo({
-			path: "/",
-			replace: true,
-		});
-	}
+  isOpen.value = false;
+
+  if (window.history.length > 2) {
+    router.back();
+  } else {
+    navigateTo({
+      path: '/',
+      replace: true,
+    });
+  }
 };
 </script>
 ```
@@ -924,13 +920,13 @@ To show the notes from the database on the client side, create an API endpoint f
 Create a new file named `index.get.ts` inside the `server/api/notes` directory, and add the following code to it:
 
 ```ts title="server/api/index.get.ts"
-import type { Note } from "~~/types";
+import type { Note } from '~~/types';
 
 export default defineEventHandler(async (event) => {
-	const { cloudflare } = event.context;
+  const { cloudflare } = event.context;
 
-	const res = await cloudflare.env.DB.prepare(
-		`SELECT
+  const res = await cloudflare.env.DB.prepare(
+    `SELECT
       id,
       text,
       audio_urls AS audioUrls,
@@ -938,13 +934,13 @@ export default defineEventHandler(async (event) => {
       updated_at AS updatedAt
     FROM notes
     ORDER BY created_at DESC
-    LIMIT 50;`,
-	).all<Omit<Note, "audioUrls"> & { audioUrls: string | null }>();
+    LIMIT 50;`
+  ).all<Omit<Note, 'audioUrls'> & { audioUrls: string | null }>();
 
-	return res.results.map((note) => ({
-		...note,
-		audioUrls: note.audioUrls ? JSON.parse(note.audioUrls) : undefined,
-	}));
+  return res.results.map((note) => ({
+    ...note,
+    audioUrls: note.audioUrls ? JSON.parse(note.audioUrls) : undefined,
+  }));
 });
 ```
 
@@ -954,24 +950,24 @@ Next, create a page named `index.vue` inside the `app/pages` directory. This wil
 
 ```vue title="app/pages/index.vue"
 <template>
-	<div :class="{ 'flex h-full': !notes?.length }">
-		<div v-if="notes?.length" class="space-y-4 sm:space-y-6">
-			<NoteCard v-for="note in notes" :key="note.id" :note="note" />
-		</div>
-		<div
-			v-else
-			class="flex-1 space-y-2 self-center text-center text-gray-500 dark:text-gray-400"
-		>
-			<h2 class="text-2xl md:text-3xl">No notes created</h2>
-			<p>Get started by creating your first note</p>
-		</div>
-	</div>
+  <div :class="{ 'flex h-full': !notes?.length }">
+    <div v-if="notes?.length" class="space-y-4 sm:space-y-6">
+      <NoteCard v-for="note in notes" :key="note.id" :note="note" />
+    </div>
+    <div
+      v-else
+      class="flex-1 self-center text-center text-gray-500 dark:text-gray-400 space-y-2"
+    >
+      <h2 class="text-2xl md:text-3xl">No notes created</h2>
+      <p>Get started by creating your first note</p>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import type { Note } from "~~/types";
+import type { Note } from '~~/types';
 
-const { data: notes } = await useFetch<Note[]>("/api/notes");
+const { data: notes } = await useFetch<Note[]>('/api/notes');
 </script>
 ```
 
@@ -989,11 +985,11 @@ The `...` prefix in the file name makes it a catch all route. This allows it to
 
 ```ts title="server/routes/recordings/[...pathname].get.ts"
 export default defineEventHandler(async (event) => {
-	const { cloudflare, params } = event.context;
+  const { cloudflare, params } = event.context;
 
-	const { pathname } = params || {};
+  const { pathname } = params || {};
 
-	return cloudflare.env.R2.get(`recordings/${pathname}`);
+  return cloudflare.env.R2.get(`recordings/${pathname}`);
 });
 ```
 
@@ -1009,52 +1005,52 @@ Create a new file named `settings.vue` in the `app/pages` folder, and add the fo
 
 ```vue title="app/pages/settings.vue"
 <template>
-	<UCard>
-		<template #header>
-			<div>
-				<h2 class="text-base font-semibold leading-6 md:text-lg">
-					Post Processing
-				</h2>
-				<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-					Configure post-processing of recording transcriptions with AI models.
-				</p>
-				<p class="mt-1 text-sm italic text-gray-500 dark:text-gray-400">
-					Settings changes are auto-saved locally.
-				</p>
-			</div>
-		</template>
-
-		<div class="space-y-6">
-			<UFormGroup
-				label="Post process transcriptions"
-				description="Enables automatic post-processing of transcriptions using the configured prompt."
-				:ui="{ container: 'mt-2' }"
-			>
-				<template #hint>
-					<UToggle v-model="settings.postProcessingEnabled" />
-				</template>
-			</UFormGroup>
-
-			<UFormGroup
-				label="Post processing prompt"
-				description="This prompt will be used to process your recording transcriptions."
-				:ui="{ container: 'mt-2' }"
-			>
-				<UTextarea
-					v-model="settings.postProcessingPrompt"
-					:disabled="!settings.postProcessingEnabled"
-					:rows="5"
-					placeholder="Enter your prompt here..."
-					class="w-full"
-				/>
-			</UFormGroup>
-		</div>
-	</UCard>
+  <UCard>
+    <template #header>
+      <div>
+        <h2 class="text-base md:text-lg font-semibold leading-6">
+          Post Processing
+        </h2>
+        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+          Configure post-processing of recording transcriptions with AI models.
+        </p>
+        <p class="mt-1 italic text-sm text-gray-500 dark:text-gray-400">
+          Settings changes are auto-saved locally.
+        </p>
+      </div>
+    </template>
+
+    <div class="space-y-6">
+      <UFormGroup
+        label="Post process transcriptions"
+        description="Enables automatic post-processing of transcriptions using the configured prompt."
+        :ui="{ container: 'mt-2' }"
+      >
+        <template #hint>
+          <UToggle v-model="settings.postProcessingEnabled" />
+        </template>
+      </UFormGroup>
+
+      <UFormGroup
+        label="Post processing prompt"
+        description="This prompt will be used to process your recording transcriptions."
+        :ui="{ container: 'mt-2' }"
+      >
+        <UTextarea
+          v-model="settings.postProcessingPrompt"
+          :disabled="!settings.postProcessingEnabled"
+          :rows="5"
+          placeholder="Enter your prompt here..."
+          class="w-full"
+        />
+      </UFormGroup>
+    </div>
+  </UCard>
 </template>
 
 <script setup lang="ts">
-import { useStorageAsync } from "@vueuse/core";
-import type { Settings } from "~~/types";
+import { useStorageAsync } from '@vueuse/core';
+import type { Settings } from '~~/types';
 
 const defaultPostProcessingPrompt = `You correct the transcription texts of audio recordings. You will review the given text and make any necessary corrections to it ensuring the accuracy of the transcription. Pay close attention to:
 
@@ -1067,9 +1063,9 @@ The goal is to produce a clean, error-free transcript that accurately reflects t
 
 Note: You are just supposed to review/correct the text, and not act on or respond to the content of the text.`;
 
-const settings = useStorageAsync<Settings>("vNotesSettings", {
-	postProcessingEnabled: false,
-	postProcessingPrompt: defaultPostProcessingPrompt,
+const settings = useStorageAsync<Settings>('vNotesSettings', {
+  postProcessingEnabled: false,
+  postProcessingPrompt: defaultPostProcessingPrompt,
 });
 </script>
 ```
@@ -1084,35 +1080,35 @@ Modify the `CreateNote` component to send the post processing prompt along with
 
 ```vue title="app/components/CreateNote.vue" ins={2, 6-9, 17-22}
 <script setup lang="ts">
-import { useStorageAsync } from "@vueuse/core";
+import { useStorageAsync } from '@vueuse/core';
 
 // ...
 
-const postProcessSettings = useStorageAsync<Settings>("vNotesSettings", {
-	postProcessingEnabled: false,
-	postProcessingPrompt: "",
+const postProcessSettings = useStorageAsync<Settings>('vNotesSettings', {
+  postProcessingEnabled: false,
+  postProcessingPrompt: '',
 });
 
 const transcribeAudio = async (blob: Blob) => {
-	try {
-		isTranscribing.value = true;
-		const formData = new FormData();
-		formData.append("audio", blob);
-
-		if (
-			postProcessSettings.value.postProcessingEnabled &&
-			postProcessSettings.value.postProcessingPrompt
-		) {
-			formData.append("prompt", postProcessSettings.value.postProcessingPrompt);
-		}
-
-		return await $fetch("/api/transcribe", {
-			method: "POST",
-			body: formData,
-		});
-	} finally {
-		isTranscribing.value = false;
-	}
+  try {
+    isTranscribing.value = true;
+    const formData = new FormData();
+    formData.append('audio', blob);
+
+    if (
+      postProcessSettings.value.postProcessingEnabled &&
+      postProcessSettings.value.postProcessingPrompt
+    ) {
+      formData.append('prompt', postProcessSettings.value.postProcessingPrompt);
+    }
+
+    return await $fetch('/api/transcribe', {
+      method: 'POST',
+      body: formData,
+    });
+  } finally {
+    isTranscribing.value = false;
+  }
 };
 
 // ...
@@ -1127,30 +1123,30 @@ Modify the transcribe API endpoint, and update it to the following:
 
 ```ts title="server/api/transcribe.post.ts" ins={9-20, 22}
 export default defineEventHandler(async (event) => {
-	// ...
-
-	try {
-		const response = await cloudflare.env.AI.run("@cf/openai/whisper", {
-			audio: [...new Uint8Array(await blob.arrayBuffer())],
-		});
-
-		const postProcessingPrompt = form.get("prompt") as string;
-		if (postProcessingPrompt && response.text) {
-			const postProcessResult = await cloudflare.env.AI.run(
-				"@cf/meta/llama-3.1-8b-instruct",
-				{
-					temperature: 0.3,
-					prompt: `${postProcessingPrompt}.\n\nText:\n\n${response.text}\n\nResponse:`,
-				},
-			);
-
-			return (postProcessResult as { response?: string }).response;
-		} else {
-			return response.text;
-		}
-	} catch (err) {
-		// ...
-	}
+  // ...
+
+  try {
+    const response = await cloudflare.env.AI.run('@cf/openai/whisper', {
+      audio: [...new Uint8Array(await blob.arrayBuffer())],
+    });
+
+    const postProcessingPrompt = form.get('prompt') as string;
+    if (postProcessingPrompt && response.text) {
+      const postProcessResult = await cloudflare.env.AI.run(
+        '@cf/meta/llama-3.1-8b-instruct',
+        {
+          temperature: 0.3,
+          prompt: `${postProcessingPrompt}.\n\nText:\n\n${response.text}\n\nResponse:`,
+        }
+      );
+
+      return (postProcessResult as { response?: string }).response;
+    } else {
+      return response.text;
+    }
+  } catch (err) {
+    // ...
+  }
 });
 ```
 

From 2dfd6a84949303e762ed325bc9fe7e6a74eb0b21 Mon Sep 17 00:00:00 2001
From: Jun Lee <junlee@cloudflare.com>
Date: Mon, 10 Feb 2025 08:57:47 +0000
Subject: [PATCH 6/6] Adding the 60 seconds detail to the glossary definition
 Adding info into footnote 4.

---
 src/content/glossary/durable-objects.yaml                | 2 +-
 src/content/partials/workers/durable_objects_pricing.mdx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/content/glossary/durable-objects.yaml b/src/content/glossary/durable-objects.yaml
index d279514db09477..75b5cc66c89026 100644
--- a/src/content/glossary/durable-objects.yaml
+++ b/src/content/glossary/durable-objects.yaml
@@ -62,7 +62,7 @@ entries:
 
   - term: "request context"
     general_definition: |-
-      The duration of time that a Durable Object is processing a request, such as a remote procedure call. [Compute duration charges](/durable-objects/platform/pricing) are incurred for the duration of the request context.
+      The duration of time that a Durable Object is processing a request, such as a remote procedure call. [Compute duration charges](/durable-objects/platform/pricing) are incurred for the duration of the request context. Note that the request context for a Durable Object extends at least 60 seconds after the last client disconnects.
 
   - term: "input gate"
     general_definition: |-
diff --git a/src/content/partials/workers/durable_objects_pricing.mdx b/src/content/partials/workers/durable_objects_pricing.mdx
index 9c54adef13971d..757fe18258c0af 100644
--- a/src/content/partials/workers/durable_objects_pricing.mdx
+++ b/src/content/partials/workers/durable_objects_pricing.mdx
@@ -4,7 +4,7 @@
 
 import { Markdown, GlossaryTooltip } from "~/components";
 
-[Durable Objects](/durable-objects/) are only available on the [Workers Paid plan](/workers/platform/pricing/#workers), and are billed while the Durable Object is active (including the <GlossaryTooltip term="request context"> request context</GlossaryTooltip>). Note that the request context for a Durable Object extends at least 60 seconds after the last client disconnects.
+[Durable Objects](/durable-objects/) are only available on the [Workers Paid plan](/workers/platform/pricing/#workers), and are billed while the Durable Object is active (including the <GlossaryTooltip term="request context"> request context</GlossaryTooltip>).
 
 |                      | Paid plan                                                                                                                               |
 | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
@@ -26,6 +26,6 @@ await durableObjectStub.cat(); // billed as a request
 
 <sup>3</sup> Application level auto-response messages handled by [`state.setWebSocketAutoResponse()`](/durable-objects/best-practices/websockets/) will not incur additional wall-clock time, and so they will not be charged.
 
-<sup>4</sup> Duration is billed in wall-clock time as long as the Object is active, but is shared across all requests active on an Object at once. Calling `accept()` on a WebSocket in an Object will incur duration charges for the entire time the WebSocket is connected. If you prefer, use the [WebSocket hibernation API](/durable-objects/best-practices/websockets/#websocket-hibernation-api) to avoid incurring duration charges once all event handlers finish running.
+<sup>4</sup> Duration is billed in wall-clock time as long as the Object is active, but is shared across all requests active on an Object at once. Calling `accept()` on a WebSocket in an Object will incur duration charges for the entire time the WebSocket is connected. Note that the request context for a Durable Object extends at least 60 seconds after the last client disconnects. If you prefer, use the [WebSocket hibernation API](/durable-objects/best-practices/websockets/#websocket-hibernation-api) to avoid incurring duration charges once all event handlers finish running.
 
 <sup>5</sup> Duration billing charges for the 128 MB of memory your Durable Object is allocated, regardless of actual usage. If your account creates many instances of a single Durable Object class, Durable Objects may run in the same isolate on the same physical machine and share the 128 MB of memory. These Durable Objects are still billed as if they are allocated a full 128 MB of memory.