Start building you application

Step 1: Choose Your IDE

You can use any IDE of your choice, but VS Code is highly recommended for the best experience.

Step 2: Install Node.js

Ensure you have Node.js installed on your system. You can check by running:

node -v

If not installed, download it from Node.js Official Website.

Step 3: Create a Cloudflare Project

Run the following command to initialize a new Cloudflare project:

npm create cloudflare@latest

Step 4: Select Project Options

1. Choose Hello World as your template.
2. Select No when asked to use Git for version control.
3. Choose JavaScript as your runtime environment.
4. Select No when asked about TypeScript.
5. Confirm the project setup.

Step 5: Deploy Your Worker

Once the setup is complete, deploy your project by running:

npm run deploy

Step 6: Modify and Redeploy Your Worker

1. Open your project files and modify the Hello World message in index.js.
2. Change the response text to something else, such as:

   return new Response("Cloudflare is awesome!", { status: 200 });
3. Save the changes and redeploy using:

   npm run deploy
4. Visit your worker’s URL again to see the updated message.

Tip: You can check worker logs in the Cloudflare Dashboard:

• Navigate to Workers & Pages.
• Select your deployed worker.
• Click on Logs to see real-time output.

Step 7: Create an R2 Bucket (Public for Now)

1. Navigate to the Cloudflare Dashboard.
2. Go to R2 Storage in the sidebar.
3. Click Create Bucket.
4. Enter a unique name for your bucket and click Create.
5. Make the bucket public so the Worker can access it directly.
6. Use the Upload File button to upload an audio file (e.g., sample-audio.mp3).
7. After uploading, verify that the file is publicly accessible.

Step 8: Set Up AI Inference (Using Public R2 URL)

1. Configure AI Binding in wrangler.json

Open your wrangler.json file and add the following:

{
  "vars": {
    "AI_MODEL": "@cf/openai/whisper-large-v3-turbo"
  }
}

2. Modify Worker Code for Transcription

Edit your index.js file to fetch the audio file from the public R2 URL, send it to Cloudflare AI, and return the transcription.

Example Code for Transcription:

export default {
  async fetch(request, env) {
    const fileUrl = "https://pub-XXXXXXXX.r2.dev/sample-audio.mp3"; // Replace with actual R2 public URL

    // 1️⃣ Retrieve the file from public R2 URL
    const r2Response = await fetch(fileUrl);
    if (!r2Response.ok) return new Response(`Failed to fetch file`, { status: 404 });

    const blob = await r2Response.arrayBuffer();
    let binary = "";
    new Uint8Array(blob).forEach((byte) => (binary += String.fromCharCode(byte)));
    const base64Audio = btoa(binary);

    // 2️⃣ Transcribe the audio file with Whisper
    const aiResponse = await env.AI.run("@cf/openai/whisper-large-v3-turbo", { audio: base64Audio });

    return new Response(aiResponse.text || "No transcription found", { status: 200 });
  }
};

3. Deploy and Test

1. Run npm run deploy to redeploy your Worker.
2. Visit your Worker URL in a browser.
3. It should return the transcribed text from the uploaded audio file.

Step 9: Make the R2 Bucket Private & Add a Binding

1. Go back to your R2 bucket settings.
2. Change the bucket visibility from Public to Private.
3. In your wrangler.json, add the R2 binding:

{
  "bindings": {
    "MY_BUCKET": {
      "binding": "MY_BUCKET",
      "type": "r2_bucket",
      "bucket_name": "your-bucket-name"
    }
  }
}

4. Modify the Worker code to fetch the file from the private bucket:

export default {
  async fetch(request, env) {
    const fileKey = "sample-audio.mp3"; // Hardcoded audio file name

    // 1️⃣ Retrieve the file from private R2 bucket
    const r2Response = await env.MY_BUCKET.get(fileKey);
    if (!r2Response) return new Response(`File ${fileKey} not found in R2`, { status: 404 });

    const blob = await r2Response.arrayBuffer();
    let binary = "";
    new Uint8Array(blob).forEach((byte) => (binary += String.fromCharCode(byte)));
    const base64Audio = btoa(binary);

    // 2️⃣ Transcribe the audio file with Whisper
    const aiResponse = await env.AI.run("@cf/openai/whisper-large-v3-turbo", { audio: base64Audio });

    return new Response(aiResponse.text || "No transcription found", { status: 200 });
  }
};

5. Deploy the changes again.

Step 10: Create a Queue for Event Processing

1. Navigate to the Cloudflare Dashboard.
2. Go to Queues in the sidebar.
3. Click Create Queue.
4. Give it a name (e.g., audio-processing-queue).
5. Choose Standard for the type.
6. Click Create.

Binding the Queue to Your Worker

Update your wrangler.json:

{
  "queues": {
    "audioQueue": "audio-processing-queue"
  }
}

Step 11: Set Up R2 Event Notifications

1. Go to your R2 bucket settings.
2. Click on Events and select Create Event Notification.
3. Choose Object Created as the event type.
4. Select your queue (audio-processing-queue).
5. Save the configuration.

Architecture Summary:

• Public R2 Bucket First: Allows easy access to test AI transcription.
• Private R2 Bucket Later: Ensures secure storage of audio files.
• Workers: Handles fetching files, processing them, and running AI inference.
• Queues: Decouples event processing from file uploads, improving scalability.
• Event Notifications: Triggers queue messages automatically upon file upload.

Your Cloudflare Worker now efficiently processes audio uploads, transcribes them using AI, and ensures event-driven automation! 🚀