I have a FormData coming from the frontend as audio blob and want to send it into input `await ai.r

M

Is there a cold start impact to workers? I notice that with really simple workers (i.e., fetch JSON from a file in the repo from start, parse into JSON, perform simple task, respond with JSON) that are deployed with no special configuration, that the initial request might take 250-300ms but subsequent requests take about 30ms. If I wait maybe, 30 seconds, it bounces back up to 250-300ms and then, again, subsequent requests are about 30ms.

Hhaz I have a FormData coming from the frontend as audio blob and want to send it int...

H

Hello, I’m Allie!•3/19/24, 12:15 PM

What type does

input

input

need to be?

H

hazOP•3/19/24, 12:16 PM

its any

H

hazOP•3/19/24, 12:16 PM

Hhaz Click to see attachment

H

Hello, I’m Allie!•3/19/24, 12:17 PM

Well, that's not very helpful...

H

hazOP•3/19/24, 12:18 PM

Normally in Node I would do `formData.get("audio") and it would return the Blob which I can pass onto a fetch request

H

hazOP•3/19/24, 12:18 PM

I've added this compat flag

formdata_parser_supports_files

formdata_parser_supports_files

H

hazOP•3/19/24, 12:18 PM

But not sure how to make sure the flag is being used

H

hazOP•3/19/24, 12:19 PM

I've added it to the

wrangler.toml

wrangler.toml

file

Hhaz I have a FormData coming from the frontend as audio blob and want to send it int...

H

Hello, I’m Allie!•3/19/24, 12:19 PM

Try this:

await ai.run('@cf/openai/whisper', {
  audio: [...new Uint8Array(await formData.get("audio").arrayBuffer())],
});

await ai.run('@cf/openai/whisper', {
  audio: [...new Uint8Array(await formData.get("audio").arrayBuffer())],
});

await ai.run('@cf/openai/whisper', {
  audio: [...new Uint8Array(await formData.get("audio").arrayBuffer())],
});

await ai.run('@cf/openai/whisper', {
  audio: [...new Uint8Array(await formData.get("audio").arrayBuffer())],
});

W

Walshy•3/19/24, 12:20 PM

As long as your date is not super super old no need for the flag

W

Walshy•3/19/24, 12:20 PM

^ that should work

HHello, I’m Allie!Try this:```ts await ai.run('@cf/openai/whisper', { audio: [...new Uint8Array(...

H

hazOP•3/19/24, 12:23 PM

You legend!!!

Honestly you saved me a ton of time thank you

H

hazOP•3/19/24, 12:24 PM

This should be in the docs

H

hazOP•3/19/24, 1:00 PM

How do I disable CORS in CF workers

 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Hhaz How do I disable CORS in CF workers ` has been blocked by CORS policy: No 'Acces...

H

Hello, I’m Allie!•3/19/24, 1:01 PM

Serve an

Access-Control-Allow-Origin

Access-Control-Allow-Origin

header?

H

Hello, I’m Allie!•3/19/24, 1:01 PM

You can just set it to

if you don't care about CORS, and your app doesn't need anything else

H

hazOP•3/19/24, 1:01 PM

From the frontend? or backend?

Hhaz From the frontend? or backend?

I

Isaac McFadyen•3/19/24, 1:02 PM

From the Worker.

I

Isaac McFadyen•3/19/24, 1:02 PM

Wherever you're trying to send a request to which sounds like the Worker.

I

Isaac McFadyen•3/19/24, 1:03 PM

Your Worker or backend or whatever needs to:

Reply to all OPTIONS requests with status code 200, anything in the body, and that above header set to
```
*
```
```
*
```
Reply to the POST request, if that's what you're trying to do, with your usual response but just add the above header as well

H

hazOP•3/19/24, 1:04 PM

I see, so in my case I need to the above header to the ReactJS app I have running on the web calling the worker that is currently running (locally)

H

hazOP•3/19/24, 1:06 PM

I have this in my worker

const corsHeaders = {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': '*',
    'Access-Control-Max-Age': '86400', // optional
    'Access-Control-Allow-Headers': 'Content-Type',
};

const CustomResponse = (body: any, status: number = 200) => {
    return new Response(body, {
        headers: {
            ...corsHeaders,
            'Content-Type': 'application/json',
        },
        status,
    });
};

const corsHeaders = {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': '*',
    'Access-Control-Max-Age': '86400', // optional
    'Access-Control-Allow-Headers': 'Content-Type',
};

const CustomResponse = (body: any, status: number = 200) => {
    return new Response(body, {
        headers: {
            ...corsHeaders,
            'Content-Type': 'application/json',
        },
        status,
    });
};

const corsHeaders = {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': '*',
    'Access-Control-Max-Age': '86400', // optional
    'Access-Control-Allow-Headers': 'Content-Type',
};

const CustomResponse = (body: any, status: number = 200) => {
    return new Response(body, {
        headers: {
            ...corsHeaders,
            'Content-Type': 'application/json',
        },
        status,
    });
};

const corsHeaders = {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': '*',
    'Access-Control-Max-Age': '86400', // optional
    'Access-Control-Allow-Headers': 'Content-Type',
};

const CustomResponse = (body: any, status: number = 200) => {
    return new Response(body, {
        headers: {
            ...corsHeaders,
            'Content-Type': 'application/json',
        },
        status,
    });
};

H

hazOP•3/19/24, 1:07 PM

I use it like this

router.post("/add", async (res, req) => { return CustomResponse(myJSONPayload, 200) })

router.post("/add", async (res, req) => { return CustomResponse(myJSONPayload, 200) })

Hhaz I use it like this `router.post("/add", async (res, req) => { return CustomRespo...

I

Isaac McFadyen•3/19/24, 1:08 PM

Yeah. So that should work. The key is that the browser will send a "preflight" request before the regular one with a method of OPTIONS that you need to reply to as well as the POST. So:

Reply to the preflight OPTIONS with a 200 and those headers. Do this even if the user is unauthenticated or not allowed, because it allows the browser to read the response in any case.
Do your reply to the POST as normal with a normal body but add those headers as well.

Hhaz I use it like this `router.post("/add", async (res, req) => { return CustomRespo...

M

Murder Chicken•3/19/24, 1:11 PM

Are you using

itty-router

itty-router

?

H

hazOP•3/19/24, 1:11 PM

Yup

H

hazOP•3/19/24, 1:11 PM

I also just added

import { Router, createCors, error, json } from 'itty-router'

const { preflight, corsify } = createCors()

const router = Router()

router
  // embed preflight upstream to handle all OPTIONS requests
  .all('*', preflight)

import { Router, createCors, error, json } from 'itty-router'

const { preflight, corsify } = createCors()

const router = Router()

router
  // embed preflight upstream to handle all OPTIONS requests
  .all('*', preflight)

import { Router, createCors, error, json } from 'itty-router'

const { preflight, corsify } = createCors()

const router = Router()

router
  // embed preflight upstream to handle all OPTIONS requests
  .all('*', preflight)

import { Router, createCors, error, json } from 'itty-router'

const { preflight, corsify } = createCors()

const router = Router()

router
  // embed preflight upstream to handle all OPTIONS requests
  .all('*', preflight)

M

Murder Chicken•3/19/24, 1:12 PM

They have tooling for this:

export const router = Router();

const { preflight, corsify } = createCors({
  methods: ['GET', 'POST'],
  origins: [
    // Your origins that are okay here
  ]
});

router
  .all('*', preflight)
  .all('*', defaultRoutes.handle)
  .all('*', () => error(404));

export const router = Router();

const { preflight, corsify } = createCors({
  methods: ['GET', 'POST'],
  origins: [
    // Your origins that are okay here
  ]
});

router
  .all('*', preflight)
  .all('*', defaultRoutes.handle)
  .all('*', () => error(404));

export const router = Router();

const { preflight, corsify } = createCors({
  methods: ['GET', 'POST'],
  origins: [
    // Your origins that are okay here
  ]
});

router
  .all('*', preflight)
  .all('*', defaultRoutes.handle)
  .all('*', () => error(404));

export const router = Router();

const { preflight, corsify } = createCors({
  methods: ['GET', 'POST'],
  origins: [
    // Your origins that are okay here
  ]
});

router
  .all('*', preflight)
  .all('*', defaultRoutes.handle)
  .all('*', () => error(404));

H

hazOP•3/19/24, 1:13 PM

What if I want to allow all origins?

M

Murder Chicken•3/19/24, 1:13 PM

*

M

Murder Chicken•3/19/24, 1:14 PM

IIRC

H

hazOP•3/19/24, 1:14 PM

['*'] or just '*'

['*'] or just '*'

M

Murder Chicken•3/19/24, 1:15 PM

Yup. https://itty.dev/itty-router/cors

H

hazOP•3/19/24, 1:20 PM

[wrangler:err] Error: No fetch handler responded and no upstream to proxy to specified.

[wrangler:err] Error: No fetch handler responded and no upstream to proxy to specified.

V

vakno•3/19/24, 1:24 PM

hello. I need to change h2 titles to h3 on product category page.
The problem is all products are not loaded in the DOM at the start.
Each click on read more button loads additional products via ajax.
So my worker only changes title for page 1 products, next pages are not effected.
Looks like i would need to trigger on xhr requests.
Is this even possible?

Vvakno hello. I need to change h2 titles to h3 on product category page. The problem is...

I

Isaac McFadyen•3/19/24, 1:26 PM

This would likely need to be done in the browser itself, not in the Worker.

I

Isaac McFadyen•3/19/24, 1:26 PM

The Worker delivers the HTML but after that it has no control over the page, only the browser can change things at that point

IIsaac McFadyen This would likely need to be done in the browser itself, not in the Worker.

V

vakno•3/19/24, 1:28 PM

yeah thats what i thought. I cant solve this with a worker, thanks

A

Alisson Acioli•3/19/24, 2:57 PM

Guys, does anyone know if I put assets in Workers they are charged?

AAlisson Acioli Guys, does anyone know if I put assets in Workers they are charged?

I

Isaac McFadyen•3/19/24, 3:01 PM

If you embed them in Workers then no, but there's a max size limit of 25MB on the paid plan and 1MB on the free plan (for all assets + worker combined). If you upload them using the

[sites]

[sites]

attribute in wrangler.toml then yes, they're charged since that uploads them to Workers KV but there's no size limit that way except for the KV per-value limit.

H

hazOP•3/19/24, 3:23 PM

BTW guys, for the problems I was having

hono

hono

was amazing than

itty

itty

for the routing and cors issue

IIsaac McFadyen If you embed them in Workers then no, but there's a max size limit of 25MB on th...

A

Alisson Acioli•3/19/24, 5:16 PM

And is there any way I can put images to be loaded from the worker without using buckets or external links? I say this because I wanted, for example, to display an image directly in the worker (this image is currently in the same directory as my worker javascript file) or instead load javascript or css files without having to go to R2, for example. Would? Where would I find specific documentation for this?