![Mitter - Your Tech Mate](/img/default-banner.jpg)
- 79
- 51 359
Mitter - Your Tech Mate
New Zealand
Registrace 11. 06. 2021
How to change image format using JavaScript | Node JS | PNG TO JPG
Guys, In this video, I have explained how to change image format from PNG to jpg or PNG to WEBP using JavaScript and Node JS
Feel free to leave your queries in the comments.
🔗 Related Videos:
1. Resize Images Using Sharp | JavaScript | Node Js
czcams.com/video/GCkQRMMbLn8/video.html
2. How to Resize Images in Canva 2024
czcams.com/video/NB1rlfO5A-Y/video.html
3. How to read Excel File in Node Js | JavaScript
czcams.com/video/KaAqvNXICxo/video.html
If you are looking to learn web development with JavaScript, React JS and Node JS , Feel free to reach out to me.
www.fiverr.com/shankeyraheja
Reach out to me for a Project
shankeyraheja.com/
Feel free to leave your queries in the comments.
🔗 Related Videos:
1. Resize Images Using Sharp | JavaScript | Node Js
czcams.com/video/GCkQRMMbLn8/video.html
2. How to Resize Images in Canva 2024
czcams.com/video/NB1rlfO5A-Y/video.html
3. How to read Excel File in Node Js | JavaScript
czcams.com/video/KaAqvNXICxo/video.html
If you are looking to learn web development with JavaScript, React JS and Node JS , Feel free to reach out to me.
www.fiverr.com/shankeyraheja
Reach out to me for a Project
shankeyraheja.com/
zhlédnutí: 13
Video
Best Image Format for Your Website
zhlédnutí 11Před 12 hodinami
Guys, In this video, I have explained which image format is best to use on a website to optimize for both performance and quality. Feel free to leave your queries in the comments. If you are looking to learn web development with JavaScript, React JS and Node JS , Feel free to reach out to me. www.fiverr.com/shankeyraheja Reach out to me for a Project shankeyraheja.com/
How to create tabs in React JS using Material UI Tabs Component
zhlédnutí 48Před 19 hodinami
In this video, I have explained how to create tabs in React JS using Material UI Tabs Component. Feel free to leave your queries in the comments. 🔗 Related Videos: 1. How to create sidebar in React JS using Material UI (Part 1) czcams.com/video/VDEl1j1sJgk/video.html 2. How to use Material UI Snackbar Component in React Js czcams.com/video/O52L5w3NGJ0/video.html 3. Load More Button React Js Mat...
Framer motion scroll animation in React JS | useScroll Hook
zhlédnutí 63Před dnem
In this video, I have explained how to build simple framer motion scroll animation in React JS using useScroll Hook from Framer Motion. Feel free to leave your queries in the comments. 🔗 Related Videos: 1. How to build Framer Motion React useInview Animation czcams.com/video/jQaU9BQUXvk/video.html 2. Framer Motion React Js Animation for Hero Section czcams.com/video/5K6SIWqp5g0/video.html 3. Ho...
How to generate OpenAI API Key
zhlédnutí 44Před 14 dny
In this video, I have explained step by step, How to Generate OpenAI API Keys. Please leave your queries in the comments. 🔗 Related Videos: 1. OpenAI Text to Speech API | React Js | Node Js | Material UI Project czcams.com/video/fUBmj_VPGdo/video.html 2. AI Image Generator OpenAI API dall e 3 React Js Material UI Project czcams.com/video/4WzI2Pf7r-4/video.html 3. How to create sidebar in React ...
Address Autocomplete | google maps api reactjs
zhlédnutí 121Před 14 dny
In this video, I have covered How to use google maps api in reactjs application and build a textfield to autofill address. If you are looking to learn web development with JavaScript, React Js and Node JS , Feel free to reach out to me. www.fiverr.com/shankeyraheja 🔗 Related Playlist: czcams.com/play/PLvVoyBLoD6xUH_cMHq3ekCN1MJSM-8aXv.html Reach out to me: shankeyraheja.com/
How to use environment variables in Node JS | dotenv Node JS
zhlédnutí 36Před 21 dnem
In this tutorial, I'll walk you through how to use environment variables in Node.js. I'll show step by step how to set up a .env file to load environment variables, and access them in your Node.js code. I'll use 2 methods to access environment variables, one of them is dotenv package and other is making a change in package.json file directly. If you are looking to learn web development with Jav...
How to use google translate API in React JS
zhlédnutí 145Před 21 dnem
Hi Guys, In this video, I have explained step by step how to use google translate api in react JS. 0:00 - Project Demo 01:17 - How to generate google translate api key 05:25 - Integrating Google translate api in Node JS Backend 12:34 - Building Translator App in React JS using google translate API 21:08 - Final Testing If you are looking to learn web development with JavaScript, React Js and No...
How to get query params in React JS
zhlédnutí 73Před měsícem
In this video, I have explained how to get query params in React Js. We will be building a search filters using query parameters and understand about useLocation and useNavigate Hooks. Feel free to leave your queries in the comments.
Build AI Talking Bot using OpenAI Api | Chatgpt model | React JS | Node Js
zhlédnutí 548Před měsícem
In this video, we will be building AI Talking Bot using OpenAI API, Chatgpt model. It's a Full Stack project using React JS on the frontend and Node JS on the backend Feel Free to leave your queries in the comments. 🚀 Timestamps: 0:00 - Project Demo 01:30 - Installing Required NPM packages in React App 02:56 - Implementing React Router DOM 04:29 - Building Basic Layout for Search Bar and Studen...
How to use Props in React JS | Reusable Components
zhlédnutí 44Před měsícem
In this video, I have explained How to use Props in React JS and create reusable components using Props. Feel Free to leave your Queries in the comments. If you are looking to learn web development with JavaScript, React JS and Node JS , Feel free to reach out to me. www.fiverr.com/shankeyraheja To appreciate the work: www.buymeacoffee.com/mitter.your.tech.mate 🔗 Related Videos: 1. Navigation B...
Barchart in React Js using Material UI
zhlédnutí 93Před měsícem
In this video, I have explained How to create Bar charts in React JS using Material UI Chart Components. Feel Free to leave your Queries in the comments. 🚀 Timestamps: 0:00 - Introduction 01:08 - Creating React App & Installing required packages 02:45 - Building Basic Bar Chart from Material UI 05:06 - Customize default Material UI Bar Chart If you are looking to learn web development with Java...
Navigation Bar with Submenu in React Js
zhlédnutí 77Před měsícem
In this video, I have explained how to build a responsive navigation bar with Sub Menu in React Js, using HTML, CSS & JavaScript. Feel Free to leave your queries in the comments. 🚀 Timestamps: 0:00 - Introduction 00:56 - Building Navbar Layout 03:30 - Building Sub Menu for Navigation bar 13:35 - Making Navbar responsive on mobile view 15:26 - Adding Zoom effect to Navbar buttons If you are look...
Google Gemini AI API - JavaScript & Node JS Tutorial
zhlédnutí 602Před měsícem
In this video, I have covered step by step how to get access to Google Gemini AI API and integrate it using JavaScript & Node JS. 🔗 Related Videos: 1. How to read Excel File in Node Js | JavaScript czcams.com/video/KaAqvNXICxo/video.html 2. How to use OpenAI ChatGPT API in JavaScript and Node Js czcams.com/video/GtgqPSRQO3c/video.html 3. Resize Images Using Sharp | JavaScript | Node Js czcams.c...
How to use Middleware in node JS
zhlédnutí 25Před měsícem
In this video, I have covered step by step how to create middleware in node Js express server applications. 🚀 Timestamps: 0:00 - What is middleware function in Node Js 04:03- Setting up basic node Js Express App 06:13 - Creating Middleware function 🔗 Related Videos: 1. How to read Excel File in Node Js | JavaScript czcams.com/video/KaAqvNXICxo/video.html 2. How to use OpenAI ChatGPT API in Java...
Framer Motion React Js Animation for Hero Section
zhlédnutí 128Před měsícem
Framer Motion React Js Animation for Hero Section
How to Print React Component on Click | React Js | Save as PDF
zhlédnutí 344Před měsícem
How to Print React Component on Click | React Js | Save as PDF
How to use Material UI Snackbar Component in React Js
zhlédnutí 434Před 2 měsíci
How to use Material UI Snackbar Component in React Js
How to use Material UI Icons in React Js
zhlédnutí 123Před 2 měsíci
How to use Material UI Icons in React Js
OpenAI Text to Speech API | React Js | Node Js | Material UI Project
zhlédnutí 676Před 2 měsíci
OpenAI Text to Speech API | React Js | Node Js | Material UI Project
How to build Framer Motion React useInview Animation
zhlédnutí 329Před 2 měsíci
How to build Framer Motion React useInview Animation
Load More Button React Js Material UI Project
zhlédnutí 162Před 2 měsíci
Load More Button React Js Material UI Project
How to use setInterval and setTimeout in javascript
zhlédnutí 55Před 2 měsíci
How to use setInterval and setTimeout in javascript
AI Image Generator OpenAI API dall e 3 React Js Material UI Project
zhlédnutí 301Před 2 měsíci
AI Image Generator OpenAI API dall e 3 React Js Material UI Project
How to use Circular Progress Material UI React Js
zhlédnutí 112Před 2 měsíci
How to use Circular Progress Material UI React Js
How to read Excel File in Node Js | JavaScript
zhlédnutí 662Před 3 měsíci
How to read Excel File in Node Js | JavaScript
How to use ngrok to run your localhost React Js app on https
zhlédnutí 964Před 3 měsíci
How to use ngrok to run your localhost React Js app on https
Devin AI Software Engineer | Future of Coding Jobs
zhlédnutí 42Před 3 měsíci
Devin AI Software Engineer | Future of Coding Jobs
How to Use Material UI Date Picker in React Js
zhlédnutí 932Před 3 měsíci
How to Use Material UI Date Picker in React Js
Your video helped me simply because I hadn't put the motion.div wrapper on the container. Thanks!
Glad it helped 👍
very cool video....much needed!..... i have a question please..... if mt front end is Nextjs, i dont need to change anything to the backend.. is that correct?
Hi, Thanks for reaching out, yes no changes will be required on backend, you can use same backend for Next JS 👍
man!! thanks, a great help
Glad you liked it 👍
Is this a fully paid api or have some free quota?
Hi, Thanks for reaching out. This API is paid. It charges around 2.8$ for 1000 requests, but if you create a new account on google cloud console, it usually gives 300$ credit on free trial to try google services, So you can try this API for free initially.
but what if it's not just one file but 2 files that needs .env? what should i add in the script?
Hello, you will be able to use env variables in any of your .js files, after making changes to package.json. No additional changes needed to access it in multiple files. Thanks
Very great
Thanks, It's good to know video is helpful :)
Deployment failed. Error?
Hi, Thanks for reaching out. There are two ways you can check build errors in deployment. One is in vercel deployment logs. Another way is, before you deploy project to vercel, you can try to build it on local "npm run build". If build is running successful locally, then there should not be any problems in deployment on vercel.
ths
Glad you liked it !
Same audio file not opening in front end
Hello, Thanks for reaching out Try to pull the code from this repo, to compare if you have made any error on the frontend. github.com/MitterYourTechMate/texttoaudioreact you can also check other video where I created better version of this project, which might also help. czcams.com/video/djqi9PTuIGQ/video.html
Bros coming to my country 🤙❤️❤️❤️❤️
😎👍
Bro the pdf that it downloaded is not selectable for me
Hi bro, Can you please share screenshot or explain more, what it means "not selectable". One thing you can try is right click on file that's downloaded, and open with, some PDF reader that is installed on your PC.
Thanks for posting this! I was exactly looking for this - a simple and to the point usage tutorial of OpenAi Api. Please Keep Posting. Subscribed!
Glad you Liked it. Thanks !
how does the payment work how much is the limit a i need more details on the subscription part
Hi, I am using 2 API's in this video, One is Text to Speech which will charge you $15.00 / 1Million characters. Another is gpt-3.5-turbo model, which will charge you based on number of tokens used. 2$/ 1M Tokens. When you make an API call, in response it tells you how many tokens have been used for this call. Overall, It's not very costly to use it. You can also check more details here: openai.com/api/pricing/
@@mitter-yourtechmate4376thank you so much
that's great tutorial! would it be nice if generated audio playback directly from the browser. Could that be possible? thx
Hello, Thanks for reaching out. Yes It is possible. I have made some minor changes on Frontend code to play the audio in the browser when audio is generated. Check this out on GitHub. github.com/MitterYourTechMate/texttoaudioreact Hope this will help !
thanks bro
Glad you liked it 👍
is it posible to read a PDF or image located in a cell?
Hello, Thanks for reaching out. If you are looking to read pdf file in node Js, "pdfreader" is useful. www.npmjs.com/package/pdfreader For reading and manipulating images, "sharp" is helpful www.npmjs.com/package/sharp I'll try to cover this in upcoming videos.
How can i make the load more button disappear when there is no more items or no more data to show?
Hello, Thanks for reaching out. I have made some changes in the code, on GitHub, to hide load more button when all images are loaded. Please check the code on this link: github.com/MitterYourTechMate/infinite_scroll_live/ Hope this will help.
Great... How to show and print from local server url a pdf
Thanks for liking the video. I'll cover in another video, on how to work with PDF files in react 👍
very good way for understanding thanks a lot for this guidance
Glad you liked it. Thanks 👍
Hello, I am working on a project where I am trying to integrate this OpenAI API into my application. I followed this and got an error that 'OpenAIError: The OPENAI_API_KEY environment variable is missing or empty; either provide it, or instantiate the OpenAI client with an apiKey option, like new OpenAI({ apiKey: 'My API Key' }).'. I have created my API key from their website. I am still getting this error. Below is my code for this. Please help me with this. (This is my controller's folder) export const speechToText= catchAsyncError(async (req,res,next)=>{ const {text}=req.body; const buffer=await convert(text); res.json({buffer}); }) (This is my utils folder) import fs from "fs"; import path from "path"; import OpenAI from "openai"; import dotenv from 'dotenv'; dotenv.config(); const openai = new OpenAI({apikey:process.env.OPENAI_API_KEY}); const speechFile = path.resolve("./speech.mp3"); export const convert=async (text)=>{ const mp3 = await openai.audio.speech.create({ model: "tts-1", voice: "alloy", input: text, }); // console.log(speechFile); const buffer = Buffer.from(await mp3.arrayBuffer()); await fs.promises.writeFile(speechFile, buffer); return buffer; }
Hello, Thanks for reaching out. Most probable error in your code is that, you are passing API key as "apikey", try passing it with K in caps, "apiKey". I hope this helps. Also, please make sure env variables are reading properly, you can check it by console.log(process.env.OPENAI_API_KEY)
@@mitter-yourtechmate4376 Yes, I figured that out. Thanks! Also, it would be helpful if you could make a video on how to stream the audio to the frontend.
Nice explaination
Glad you liked it 👍
It is very useful cotents
Glad to hear that! Thanks
Thank you❤
Glad you liked it 👍
But now it's throwing version conflict in react of material ui 😢
Hello, Are you using older version of react or npm by any chance. Have a look at this documentation for versions of react & node js that material ui supports. mui.com/material-ui/getting-started/supported-platforms/
Same Issue
@@paramkaushik4888 Hello, Can you please share react version, npm & node js version you are using. Also, Please make sure you are installing material ui v5 using this command npm install @mui/material @emotion/react @emotion/styled
Thanks, is there any way to stream the audio to the front-end so it will be more real-time?
Hello, yes, It's definitely possible, try returning buffer in JSON format from backend res.json(buffer) and on the front end, you can try to stream it using audio tag. I'll try to cover it in another video.
Thanks for sharing your knowledge 👍
Glad you liked it 👍
Why dont i see the same UI? I cant find these settings in "2 step verification"
Hello, No worries, If you don't see option there, go directly to myaccount.google.com/apppasswords Make sure you are logged in with your google account in your browser and then directly open this link. Also, make sure 2 step verification is on, for your google account, for this to work.
how can i get api key free or buy fee available api key in that site
Hello, Open AI API is currently paid, free version is not available, but you can put small amount in your wallet on OPENAI settings page, to test API. Charges are based on usage. openai.com/api/pricing You can generate around 25 images for 1$.
@@mitter-yourtechmate4376 ok thank you for update
Nice
Thanks, Glad you liked it 👍
Hello sir, At 4:15 my errors are different & I'm not able to figure it out. Can you suggest me alternate solution?
Hello, Thanks for reaching out. Try and Checkout this GitHub repo to compare your code. github.com/MitterYourTechMate/signin Hope this will help you fix errors.
Thank you so much bro , now I can send email using nodemailer.😁 btw would you like to share me your LinkedIn account?
very helpful video
Glad it was helpful 👍
can i do it in normal js file
Hello, I am using a file with .mjs extension. If you wish to use same code in .js file, you can add "type":"module" in package.json
Thank you
great! helped so much!
Glad to hear!
Toggle drawer is not a option
Hello, Thanks for reaching out. Checkout this GitHub repo, to pull the code and compare. github.com/MitterYourTechMate/sidebar Hope this might help !
thanks
Glad you liked it 👍
Content is good! but I suggest go for some more complex things then this.. I can gpt this my own.. doing a more complex things likee how to generate utterances using open ai? or may be intent matching using open ai.. Otherwise good going!! keep it up man!!
Thanks for Suggestions and ideas 💡
Thanks Bro, its very useful for me, god bless you
Glad to hear that !
thanks you man!
Glad it helped!
works perfect and very helpful
Glad it helped
Broo the github link u have provided has only the code for create react app. plz update the repo it'll be heplful
Hi Yogesh, Thanks for Letting me know. I have updated the repo.
Great work... Can you make series on mui in react... So when applied background color it's like hover color changed in theme
Hi Haider, yes I will make a series at some point. I will update the repo with additional code for hover color change soon
Great work... Are you going to make series of tutorials on Mui with react
Glad you liked it. Yes I will. I have some more interesting videos on material UI, which you can check out, in the meantime.
Thanks ❤
Glad you liked it !
Hey man I loved your video. THAT WAS AWESOME!
Glad you like it. Thanks!
Thank you sir
Glad it helped !
Thanks a bunch! More tutorials please.
Sure, more tutorials coming soon 👍
Code from ChatGPT
This was very nicely explained and simple example! Thanks!
Glad it was helpful!
Thank you for sharing your knowledge. Can you please upload the video with forms having labels, textfield, grid etc.
Hi Jassi, Glad you liked the video. I'll definitely upload a video on this soon. Meanwhile, I think you might also be interested in this video, which is on similar topic. czcams.com/video/KF33cHaa3bg/video.html
@@mitter-yourtechmate4376 Thank you very much. The URL you shared is very helpful. Please show me how to connect to the Oracle database. When can i expect to see this video as i can't find any useful information on this topic online. i need to connect my oracle database asap so will be eagerly waiting. Once again Thanks!!!