Fetch failed from openai Speech-To-Text Whisper in my Next.js project

Question

I am using t3-app with Next.js app router.

I am going to upload an audio file to opanai speech-to-text model using server-action form. Everytime I uplaod my .mp3 file, I failed to fetch the transcription.

That's my code:

import { api } from "~/trpc/server";

export default function CreateTranscription() {
  async function create(formData: FormData) {
    "use server";

    const audioFile = formData.get("audioFile");

    // mutate data
    if (audioFile !== null && typeof audioFile !== "string") {
      const submit = await api.openai.speechToText.mutate({
        audioFile: audioFile,
      });
    }

    // revalidate cache
  }

  return (
    <>
      <form action={create}>
        <input type="file" name="audioFile" id="audioFile" required />
        <button type="submit">Upload</button>
      </form>
    </>
  );
}

The router:

import { z } from "zod";
import {
  createTRPCRouter,
  publicProcedure,
} from "~/server/api/trpc";
import OpenAI from "openai";
import type { Uploadable } from "openai/uploads";

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

export const openAIRouter = createTRPCRouter({
  speechToText: publicProcedure
    .input(
      z.object({
        audioFile: z.custom<Uploadable>(),
      }),
    )
    .mutation(async ({ input }) => {
      const transcriptions = await openai.audio.transcriptions.create({
        file: input.audioFile,
        model: "whisper-1",
      });

      return transcriptions;
    }),
});

And that's the error:

input: {
    audioFile: File {
      size: 379924,
      type: 'audio/mpeg',
      name: 'Vaundysong.mp3',
      lastModified: 1700993541098
    }
  },
  result: TRPCClientError: fetch failed
      at TRPCClientError.from (webpack-internal:///(rsc)/./node_modules/@trpc/client/dist/TRPCClientError-0de4d231.mjs:41:16)
      at eval (webpack-internal:///(rsc)/./node_modules/@trpc/client/dist/httpBatchLink-204206a5.mjs:207:101) {
    meta: undefined,
    shape: undefined,
    data: undefined,
    [cause]: TypeError: fetch failed
        at Object.fetch (node:internal/deps/undici/undici:11576:11) {
      cause: [RequestContentLengthMismatchError]
    }
  },
  elapsedMs: 8
}
 ⨯ node_modules/@trpc/client/dist/TRPCClientError-0de4d231.mjs (37:15) @ TRPCClientError.from
 ⨯ Internal error: TRPCClientError: fetch failed
    at TRPCClientError.from (./node_modules/@trpc/client/dist/TRPCClientError-0de4d231.mjs:41:16)
    at eval (./node_modules/@trpc/client/dist/httpBatchLink-204206a5.mjs:207:101)
Cause: TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11) {
  cause: RequestContentLengthMismatchError: Request body length does not match content-length header
      at AsyncWriter.end (/Users/hurraychak/Side Projects/muspic/node_modules/next/dist/compiled/undici/index.js:1:82741)
      at writeIterable (/Users/hurraychak/Side Projects/muspic/node_modules/next/dist/compiled/undici/index.js:1:81411) {
    code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH'
  }

I think my .mp3 file matches the format but the error message seems like talking about my request is not match the requirement. I have no idea where the problem come from because I am very new to fullstack development.

Maybe my openai_api_key is not working? Or is there any possible way to know whether my file matches the api?

Answer 1

try downgrading node versions with nvm.