[Error] Generate Podcast / Generate Thumbnails

[idle goblet]

Hey everyone, quick question! I’ve been working on generating a podcast and a thumbnail, but I ran into an issue with the OpenAI API because I’ve exceeded my quota.

I’m using Convex for the project and was wondering if any of you know of any free APIs I could use for podcast generation and thumbnail creation? Also, would it be as simple as copying the free API keys to the .env locals, or is there more work I’d need to do to get things up and running again?

Any help would be appreciated, thanks in advance!

[meager hinge]

Hi, yes, unfortunately, OpenAI no longer offers free credits for text-to-speech. I tried another alternative that provides free credits, like Eleven Labs https://elevenlabs.io/. I implemented it to generate audio, and here is the code:

https://github.com/billy93/podcastr/tree/elevenlabsai

See the API code here:

https://github.com/billy93/podcastr/blob/elevenlabsai/app/api/elevenlabs/route.ts

And the component code here:

https://github.com/billy93/podcastr/blob/elevenlabsai/components/GeneratePodcast.tsx

[idle goblet]

thanks. i will try to fix it these days.

[dusky fulcrum]

Use hugging face website and search for text to img ai api

[idle goblet]

thanks buddy! I will check it out.

Maybe I send DM if I need help, is OK?

[dusky fulcrum]

feel free to send me a message

[idle goblet]

Hi!

1. Ive tested replacing my generatepodcast.tsx for the one suggested by billy
2. creating a route.ts file and writing that code
3. replacing in .env.local the openai for elevenlabs api
4. its not working ill share two screenshots where the audio is generated but it has 0 seconds and I can not play it.
   It is important to know that I can select Alloy, Shimmer, etc voices. I suspect this is wrong because it has to do with openai but not with elevenlabs where the voice option was adam.
5. i still dont know how to generate the image thumbnail. can you share the code and where should i get the api.
   Thanks!

[idle goblet]

Billy do you want to see the github repo?

[rich timber]

I have the same kind of error.

[rich timber]

For this error, trace your audiourl. It should pass correctly, if it doesn't pass correctly this error comes.

[rich timber]

After solving my problem the audio comes when I put a prompt in the text field, but because of the voice issue, the audio does not work.

[meager hinge]

yes you can share your github repo

[idle goblet]

Here Billly! I got the gh repo
https://github.com/horacioparisotto/PodcastTest

[idle goblet]

HEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEELP

[meager hinge]

okay let me check your code

[meager hinge]

hi @idle goblet When using Eleven Labs, the voices you can use is "Drew" or "Rachel" or "Sarah". I've attached examples of other voices in a JSON file also

example audio list

In your code, you only need to update the default voice list, as the previous list contains voices from OpenAI.

[idle goblet]

Hi. I corrected the voices. But when I did npm run dev it automatically added a tsconfig.json. That broke my code. When I copied the tsconfig.json from adrian repo, still broke my build.

1. Replaced voices in the const, instead of refering to openai, now it refers to elevenlabvoices.
2. Added elevenlabs voices files in models folder
3. I havent done the json for the voices. That I dont understand.
4. When I did npm run dev it automatically added a tsconfig.json that broke my code.

[rich timber]

I am trying to this now, lets see what happens with mine.

[idle goblet]

OK let me now

I want to know what happens when you do npm run dev with your tsconfig.json

[rich timber]

Do I need to add the api-response.json file in the projects root directory?

[idle goblet]

I dont know. Lets see what Billy says, he is the master.

Lets hope we can both finish the build. It was an intense ride.

[rich timber]

My Audio generates successsfully, but...... unfortunately because of the schema it does not upload 😂

[idle goblet]

Did you do this?

[rich timber]

I changed voicePrompt to audioPrompt, but I didn't change the convex databases schema table

[rich timber]

no

[idle goblet]

ok

can you share me your

tsconfig.json

i dont understand why it broke my code

wait

ill try with adrians tsconfig file

then npm install

ill seee what happens

[rich timber]

Okay, let me know, in the mean time I am going to update the schema and migrate it.

I will share.

[idle goblet]

sure buddy

thanks

[rich timber]

https://github.com/roamerloner/podspot

Here you go.

[idle goblet]

hey

so which files did you modify

[rich timber]

1. create-podcast/page.tsx
2. GeneratePodcast Component

[rich timber]

I changed audioPrompt to voicePrompt manually, didn't do anything with the schema

[idle goblet]

and know all your build works?

did you use an api for generatethumbnail?

[rich timber]

No, I am going to do it later on.

Have you used any api for generatethumbnail?

[meager hinge]

hi @idle goblet this your working code

[idle goblet]

Thanks buddy I will test it!

[idle goblet]

Hey! I download and extracted the file.

1. I did npm install
2. I did npm run dev

Thats the error thats throwing.
PD: If I do npm install am I also installing clerk, shadcn, etc... Or do I have to manually install clerk with a command?
I did this previously in the build but Im not sure in this instance...

[idle goblet]

You fixed my build Billy thanks!

Im very close to finishing it. I doubled checked the generatepodcast file and the route.ts file.

They are OK but Im getting an error when generating the podcast. It generates with 0 seconds so I cant play it. It says there is a problem with elevenlabs undefined api.

Also, when I select the voice Sarah instead of saying Hi Im Sarah from elevenlabs, it sas Hi im RACHEL from Elevenlabs

404 ERROR of Elevenlabs

[idle goblet]

Hey. How did you do your folder structure of route.ts I think that might be my problem. It is throwing me this issue look.

POST /undefined/api/elevenlabs 404 in 511ms

[rich timber]

"app/api/elevenlabs/route.ts"

[idle goblet]

Yes I got the same

How did you solve error 404?

[rich timber]

I didn't solve it, I'm not quite sure how it worked.

[idle goblet]

damn that code is clean as a whistle broda

Did you have this error before:

I think it has to do with the progress.ts file

"use client"

import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"

import { cn } from "@/lib/utils"

const Progress = React.forwardRef<
React.ElementRef<typeof ProgressPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>

(({ className, value, ...props }, ref) => (
<ProgressPrimitive.Root
ref={ref}
className={cn(
"relative h-4 w-full overflow-hidden rounded-full bg-black-5",
className
)}
{...props}

<ProgressPrimitive.Indicator
  className="size-full flex-1 bg-white-1 transition-all"
  style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
/>

</ProgressPrimitive.Root>
))
Progress.displayName = ProgressPrimitive.Root.displayName

export { Progress }

[rich timber]

Yes

[idle goblet]

How did u solve it?

[rich timber]

I haven't solved it.

[idle goblet]

Damn

I wonder if my api key is wrong or something

I tried 3

Do I have to select it at a special section or something

Is weird i dont know

[rich timber]

The error message we are seeing suggests that somewhere in our project, likely in a Progress component, an invalid value of 0 is being passed to the max prop. This prop typically represents the maximum value for a progress bar, and it needs to be a number greater than 0 to be valid.

[idle goblet]

Here there is the value 0.

[rich timber]

Check inbox

[idle goblet]

okk

[idle goblet]

Error persists of Api

[meager hinge]

add this to your env

NEXT_PUBLIC_SERVER_URL=http://localhost:3000

looks like you dont set that env variable

[idle goblet]

Ill try now

it worked! thanks a lot! Could you do the same but with an IMAGE API. For the thumbnail.

We are almost there buddy. Id love to solve the AI generate thumbnail.

[reef lance]

does anyone implemented increase view count functionality?

[idle goblet]

vishal can i see your code for the image api?

[idle goblet]

if someone can help im trying to fix the image ai generation

[idle goblet]

heeeeeeeeelp

[half olive]

RightSidebar is not getting displayed on my website even though I have added it in my layout file. Please help me sought this problem out

I have console.log it and it is showing that is rendering in browser console but I can't see it on my website

[idle goblet]

Im trying to do thumbnail with freepik AI. Does anyone know how to fix that problem.

[idle goblet]

I solved that

I am getting this problem now when trying to generate image AI

[rich timber]

Sorry haven't started it yet brother.

[rich timber]

This might be because of the unmatched query between the convex data table column name and your actual codes column name

[idle goblet]

hmmm

[idle goblet]

That is in generatethumbnail.tsx and freepik.ts

?

[idle goblet]

heeeeeeeeeeelp

[rich timber]

Yes

[half olive]

The audio is generated but it is of 00:00 seconds. I have used Eleven Labs for generating audio

[idle goblet]

add this to your env

NEXT_PUBLIC_SERVER_URL=http://localhost:3000

[half olive]

Yes it is added

[idle goblet]

GenerateThumbnail.tsx
https://pastebin.com/LBkehhcp

freepik.ts
https://pastebin.com/Rw0rvwiQ

Error while generating thumbnail with AI (freepik API): View Image.

Can anyone help me please? If you need to see another file, please tell me.

[idle goblet]

HEEEEEEEEEEEEEEEEEEEEEEEELP!

[idle goblet]

guyyyys

anyone?

[idle goblet]

daaaaaaamn

[idle goblet]

UUUP

[meager hinge]

hi, i just create text to image (generate thumbnail) implementation using hugging face api

check this code for api code

https://github.com/billy93/podcastr/blob/elevenlabsai/app/api/huggingface/route.ts

and this code for frontend

https://github.com/billy93/podcastr/blob/elevenlabsai/components/GenerateThumbnail.tsx

you need to create account on huggingface, and then create access token

after that, put token into .env file HUGGINGFACE_API_KEY

btw i use this model

https://huggingface.co/stabilityai/stable-diffusion-xl-base-1.0

[autumn axle]

I just tried it, this tool is very good. I think this is a very friendly tool for those who are just learning to use text to image without paying extra. The same text will produce the same image at a similar time, but the quality it produces is not as good as open ai, but it is enough!

I just made multiple API calls within the free quota ($100.00), with no additional charges.

[sharp dirge]

Invalid prop max of value 0 supplied to Progress. Only numbers greater than 0 are valid max values. Defaulting to 100.

hELP ME

[opaque stream]

Help ! i am using huggingface api for image generation, and when i use ai to generate thumbnail, it does generate but i can't see that image, instead i get alt text as "thumbnail".

please help

[opaque stream]

Hey did you solve this thumbnail generation

[opaque stream]

HELP Someone

[opaque stream]

Please Help !!

[opaque stream]

No worries, guys i figure it out, & fixed it.

[autumn axle]

what do you mean？

[north hound]

hey, after cloning this repository what changes should i make to use it as my own project (say for using my own convex, clerk and api)

[north hound]

Can anyone help

[north hound]

Everything works except when i sumbit and publixh podcast it says error

Another error when i click profile,

[meager hinge]

Hi, it seems the issue is related to Convex. Have you set up Convex? The Podcastr data will be stored in Convex, so check if the function is already deployed in your Convex setup. If not, try running npx convex dev to deploy the functions to your Convex instance.

And check user data in your convex also

[north hound]

Hey i did npx convex dev and i can see all the function in my convex but the user table is empty

I've logged in using my google account in podcastr

[meager hinge]

If the user is not present in your Convex database, there may indeed be a configuration issue with your Clerk webhook. This webhook is essential for ensuring that when a new user signs up via Clerk, it triggers the function createUser in your Convex backend.

To address this:

1. Set up Clerk Webhook: Ensure that the Clerk webhook is properly configured in the Clerk dashboard. The webhook should call your backend whenever a new user signs up.

2. Verify the Webhook URL: The URL you provide in Clerk for the webhook should point to the correct endpoint in your Convex backend where createUser is implemented.

3. Check Convex HTTP Handler: In the file convex/http.ts, you should have a handler for the webhook, which triggers the createUser function. This function will create a new user record in your Convex database when Clerk sends a successful signup event.

[rich timber]

how did you do it?
Can you share please?

[rich timber]

Facing Same problem.

[frank turret]

Can anyone solve this

Please

[north hound]

do you mind sharing the entire files ? and please explain step by step how should connect it to my convex and clerk db.
and please do share an example of .env.local.
i find convex complicated.

[meager hinge]

Have you watched this video?

https://www.youtube.com/watch?v=zfAb95tJvZQ&t=5182s

It explains the use of convex, try to follow the video above and let me know where you get stuck

[north hound]

hey now everything is working. Elevenlabs is working too.
but when i try to generate thumbnail with huggiface api it saws thumbnail not generated, can you help me w it.
i'll be done with the project after thumbnail generation

Showing like this only

[north hound]

Did this

[north hound]

Bro same, please help

One more error when i click on user profile

[rich timber]

Thumbnail not generating after integrating Hugging Face. I am trying to fix this for several days, but it's still not working.

I copied the imageURL and pasted it on another tab to check if the image loads correctly or not, it seems like it doesn't load correctly.

In the bash terminal it is also showing 404 error.

[north hound]

same issue, can anyone help

[opaque stream]

you should check your api folder, it should be containing two separate folders within it as elevenlabs and huggingface.
I think you could have placed the huggingface folder within the elevenlabs folder.
else check the spellings of both the folders !

[rich timber]

My api folder does have two seperate folders, which is elevenlabs and huggingface.

[inland oriole]

is your project working

[rich timber]

Only Hugging face is not working. Elevenlabs works.

[inland oriole]

ok bro

[inland oriole]

check your dm

[spring summit]

Hey guys can u help me .For me both eleven labs and thumbnail generation is not working

I only get continous generating message without the actual voice and image being loaded

please help

[inland oriole]

hello guys and billy i am facing this issue can anyone please solve this issue?

[inland oriole]

ok guys i have resolve the error

1. make changes in hugging face route.js file in this line -
   const response = await fetch(
   "https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-3.5-large",
   // Make chnage in above line
   {
   headers: {
   Authorization: Bearer ${token},
   "Content-Type": "application/json",
   },
   method: "POST",
   body: JSON.stringify({"inputs": input}),
   }
   );

2. Then go to next.config add this line - {
   protocol: 'https',
   hostname: 'efficient-elephant-639.convex.cloud'
   },

done you are good to go

just make sure to in hugging web site - Repositories permissions
add model

[inland oriole]

now only error i am facing is when i click on this test podcast i getting this error -

Error: [CONVEX Q(podcasts:getPodcastById)] [Request ID: e5a4828bee6ac712] Server Error
ArgumentValidationError: Value does not match validator.
Path: .podcastId
Value: "1"
Validator: v.id("podcasts")

Called by client

can anyone solve?

[inland oriole]

Please check your DM !!!

Can you add a one more function in this app, let the user post custom audio so it is not necessary to generate audio everytime

[hoary summit]

i implemented the code but after that the image is generating but it is showing 'thumbnail' instaed of the image

can anyone pls help me to fix it

i implemented the huggingface api updated the route.js file also