Maple Arcade
Maple Arcade
  • 98
  • 126 423
Hands-Free Audio Control with Google AI Edge & Next.js
Welcome back to our series on building a gesture-controlled game using Google’s MediaPipe.js on Next.js! In this final video of the series, we will play with the audio using our hand gestures. Feel free to use this project as a template to bring your AI business ideas to life.
Download the full code for free: ko-fi.com/s/abe25c5e70
Give the game a try 👉 meteor-dash.vercel.app/
Github repo: github.com/KoushikJit/meteor-dash.git
Google AI Edge: ai.google.dev/edge
For audio control, we will use the Tone.js library. Here is the documentation in case you are interested: tonejs.github.io/
Here is the link to the complete tutorial 👉 czcams.com/play/PLhiuRfXhpqSbEApUrmq04ATAuwlxdWwSl.html
Don’t forget to like, and subscribe to stay updated with the latest videos on my channel.
Check out other cool Next.js + AI projects I have built 👉 czcams.com/play/PLhiuRfXhpqSbwM0rCuv7-mrCUSiIVyzAz.html&si=RinnIxuHdvQLnpzD
Rock smashing sound effect:
pixabay.com/sound-effects/punch-a-rock-161647/
Connect with Me:
- [LinkedIn](www.linkedin.com/in/koushik-sarkar-iimc/)
- [GitHub](github.com/KoushikJit)
Enjoy the video, and happy coding! 🎉
zhlédnutí: 127

Video

Computer Vision in Next.js, Tailwind CSS, Google AI Edge (info screen) | #5
zhlédnutí 329Před dnem
Download the full code for free: ko-fi.com/s/abe25c5e70 Give the game a try 👉 meteor-dash.vercel.app/ Github repo: github.com/KoushikJit/meteor-dash.git Google AI Edge: ai.google.dev/edge Welcome back to our series on building a gesture-controlled game using Google’s MediaPipe.js on Next.js! 🎮🖐️ In this fifth video, we first create a overlay screen to show game information like play/pause state...
Computer Vision in Next.js, Tailwind CSS, Google AI Edge | Collision Detection | #4
zhlédnutí 639Před 14 dny
Download the full code for free: ko-fi.com/s/abe25c5e70 Give the game a try 👉 meteor-dash.vercel.app/ Github repo: github.com/KoushikJit/meteor-dash.git Google AI Edge: ai.google.dev/edge Welcome back to our series on building a gesture-controlled game using Google’s MediaPipe.js on Next.js! 🎮🖐️ In this fourth video, we dive into collision detection to add an element of challenge in our game. N...
Computer Vision Game in NextJS, Tailwind CSS | obstacles | #3
zhlédnutí 191Před 21 dnem
Download the full code for free: ko-fi.com/s/abe25c5e70 Give the game a try 👉 meteor-dash.vercel.app/ Github repo: github.com/KoushikJit/meteor-dash.git Welcome back to our series on building a gesture-controlled game using Google’s MediaPipe.js library on Next.js! 🎮🖐️ In this third video, we introduce obstacles to our game by creating infinite falling meteors or boulders that players need to a...
Computer Vision in Next.js, Tailwind CSS, Google AI Edge | movenents | #2
zhlédnutí 284Před 21 dnem
Download the full code for free: ko-fi.com/s/abe25c5e70 Give the game a try 👉 meteor-dash.vercel.app/ Github repo: github.com/KoushikJit/meteor-dash.git Welcome back to our six-part series on building a gesture-controlled game using Google’s MediaPipe.js library on Next.js! 🎮🖐️ In this second video, we take the next step by adding interactive elements and controlling them with hand gestures. Ne...
Tired of Clicking? Try Waving! Redefine Web Interaction using Google AI Edge in Next.js | #1
zhlédnutí 1KPřed 21 dnem
Welcome to the first video of our six-part series where we build an exciting gesture-controlled game using Google’s MediaPipe.js library! 🎮🖐️ Download the full code for free: ko-fi.com/s/abe25c5e70 Give the game a try 👉 meteor-dash.vercel.app/ Github repo: github.com/KoushikJit/meteor-dash.git web-assembly link const wasm = await FilesetResolver.forVisionTasks("cdn.jsdelivr.net/npm/@mediapipe/t...
New Jailbreak Technique for LLMs (ArtPrompt)
zhlédnutí 1,5KPřed 3 měsíci
The resources shared are to be used for academic purposes only. Test LLMs free 👉 chat.lmsys.org/ Get Code 👉 github.com/KoushikJit/ascii-gen Art Prompt Research Paper 👉 arxiv.org/abs/2402.11753 ASCII Art Library 👉 pypi.org/project/art/ Website to generate your own ART Prompt (FREE) ko-fi.com/s/b629cadf54 Complete code of the nextjs website to generate your own ART Prompt (FREE) ko-fi.com/s/dcc06...
Build Your Own ChatGPT with LangChain & Ollama (No OpenAI API Key Needed!)
zhlédnutí 1,6KPřed 3 měsíci
Want to build your own ChatGPT-like chatbot without relying on OpenAI's API? This video shows you how to do just that using LangChain and Ollama! LangChain is a powerful framework for building AI-powered applications, and Ollama is the latest cutting-edge platform to run large language model that can generate human-quality text. Join us as we dive into the world of AI and build this chatbot usi...
Host a AI Server
zhlédnutí 180Před 4 měsíci
Learn how to transform your PC into a public AI server with ngrok and Ollama! Watch this video to install ngrok and start sharing your AI projects with the world. You can host large language models on your PC and share them publicly for free. We'll use ollama and ngrok for this. If you want a quick start guide to Ollama then check out this video: czcams.com/video/lfewnEWwxQE/video.htmlsi=PTVSA6...
Build a Next.js App with Streaming Large Language Responses (Gemini Pro API Tutorial)
zhlédnutí 3,4KPřed 4 měsíci
Build a Next.js App with Real-Time AI Responses! This tutorial leverages the powerful Gemini Pro API (free tier) to stream large language model responses directly into your web app. Take Your Web Development to the Next Level! Learn how to: Set Up a Next.js Application to integrate with Gemini Pro Craft a Functional Form for user input and response display Style Your Form with Tailwind CSS for ...
Next.Js Deployment
zhlédnutí 189Před 5 měsíci
Want to deploy your Next.js application in the cloud so that everybody can use it? Then this tutorial is for you! Learn how to deploy your NextJS app with ease using Vercel! This developers' guide covers everything from hosting options to industry-standard projects. The process is completely free. Take your NextJS app to the next level with Vercel deployment. Follow along as I guide you through...
Natural Language Processing Web app with Next.js, Hugging Face, & Tailwind CSS
zhlédnutí 2,7KPřed 5 měsíci
Want to build smart web applications that stand out? This tutorial is for you! In this tutorial I'll go through the fundamentals of Next.js, Tailwind CSS and Hugging Face's vast library of pre-trained models. We'll cover everything from building the front end of the application to creating a RESTful API using Next.js and seamlessly integrating Hugging Face's Inference endpoints to carry out spe...
Ollama.ai: A Developer's Quick Start Guide!
zhlédnutí 5KPřed 5 měsíci
Do you want to run open-source pre-trained models on your own computer? This walkthrough is for you! Ollama.ai, an open-source interface empowering users to install and run powerful models directly on their desktops. 🖥️ In this developer centric video you'll find a comparison between Ollama.ai, WebML, and the traditional REST API approach. We'll uncover the drawbacks of backend LLMs and how Oll...
Building an AI-Powered Next.js 14 Web App with People Detection & Recording | using ShadcnUI
zhlédnutí 26KPřed 6 měsíci
Learn how to build an AI-powered web app using ShadcnUI & Next.js 14. This tutorial will walk you through people detection & recording features, incorporating TailwindCSS and OpenAI technology TensorflowJS. Ready to elevate your web development skills along with Artificial Intelligence? Let's get started! Live Website: watchtower-ai.vercel.app/ Github repository: github.com/KoushikJit/watchtowe...
Build Next JS Full Stack AI app with Huggingface, Docker, AWS
zhlédnutí 4,4KPřed 7 měsíci
Build Next JS Full Stack AI app with Huggingface, Docker, AWS
Weird Sandstorms Keep Destroying My Buildings - What's Going On?
zhlédnutí 39Před rokem
Weird Sandstorms Keep Destroying My Buildings - What's Going On?
Episode 7 - FULL GAMEPLAY of LITTLE ORPHEUS on iOS! Looks Amazing!
zhlédnutí 34Před rokem
Episode 7 - FULL GAMEPLAY of LITTLE ORPHEUS on iOS! Looks Amazing!
Play Little Orpheus - Episode 6: Full Gameplay Walkthrough
zhlédnutí 54Před rokem
Play Little Orpheus - Episode 6: Full Gameplay Walkthrough
Play Little Orpheus - Episode 5: Full Gameplay Walkthrough
zhlédnutí 34Před rokem
Play Little Orpheus - Episode 5: Full Gameplay Walkthrough
Play Little Orpheus - Episode 4: Full Gameplay Walkthrough
zhlédnutí 45Před rokem
Play Little Orpheus - Episode 4: Full Gameplay Walkthrough
Play Little Orpheus - Episode 3: Full Gameplay Walkthrough
zhlédnutí 24Před rokem
Play Little Orpheus - Episode 3: Full Gameplay Walkthrough
How to CANCEL Apple Arcade in just 2minutes
zhlédnutí 2,9KPřed rokem
How to CANCEL Apple Arcade in just 2minutes
Play Little Orpheus - Episode 2: Full Gameplay Walkthrough
zhlédnutí 64Před rokem
Play Little Orpheus - Episode 2: Full Gameplay Walkthrough
Play Little Orpheus - Episode 1: Full Gameplay Walkthrough
zhlédnutí 116Před rokem
Play Little Orpheus - Episode 1: Full Gameplay Walkthrough
Crossy Road Castle - THE LOST TEMPLE | Gameplay - LIVESTREAM
zhlédnutí 328Před rokem
Crossy Road Castle - THE LOST TEMPLE | Gameplay - LIVESTREAM
Sayonara Wild Hearts | Begin Again [Gold Rank]
zhlédnutí 82Před rokem
Sayonara Wild Hearts | Begin Again [Gold Rank]
Japanese Traditional Sword Dance | Kenbu @ NUCB Business School
zhlédnutí 49KPřed 4 lety
Japanese Traditional Sword Dance | Kenbu @ NUCB Business School
Pottery Experience at Aichi Prefectural Ceramic Museum | Japan Travel Diaries
zhlédnutí 48Před 4 lety
Pottery Experience at Aichi Prefectural Ceramic Museum | Japan Travel Diaries
Seto Pottery Bargain Market | Japan Travel Diaries
zhlédnutí 176Před 4 lety
Seto Pottery Bargain Market | Japan Travel Diaries

Komentáře

  • @nachochiappero3747
    @nachochiappero3747 Před 2 dny

    I love so much your projects, i need a mouse hand free ❤

  • @ab_naved1362
    @ab_naved1362 Před 3 dny

    good video, i have a question, i make recipe finder ai bot so its only generate recipe related thinks not other promt so , what i can do for this to convert this app its olny for recipe ai bot ??

  • @SwenioMedia
    @SwenioMedia Před 7 dny

    can i deploy just by npm build?

    • @maplearcadecode
      @maplearcadecode Před 7 dny

      If you want to have a node or nextjs server running on localhost 3000 port, then you can spin that up using npm commands and then expose those ports publicly using ngrok http 3000. Hope this helps.

    • @SwenioMedia
      @SwenioMedia Před 6 dny

      @@maplearcadecode i use vercel to host it and I just change the domain and it works!

  • @Anonymous-12337
    @Anonymous-12337 Před 10 dny

    Amazing We Want More Content Like This

  • @shubhamumbarje
    @shubhamumbarje Před 10 dny

    ❤❤

  • @tobilobaabayomi5708
    @tobilobaabayomi5708 Před 13 dny

    Heyy man how about the github link?

    • @maplearcadecode
      @maplearcadecode Před 13 dny

      github.com/KoushikJit/meteor-dash.git Thank you for waiting 🙌

  • @ranakshah9167
    @ranakshah9167 Před 14 dny

    hey, quick question where can we get the wasm and model links that are at 10:00

    • @maplearcadecode
      @maplearcadecode Před 14 dny

      Hi, I have updated the video description with the links. Also you can get the complete code for free in case you are interested: 👉 ko-fi.com/s/abe25c5e70

  • @ash_b9875
    @ash_b9875 Před 14 dny

    Thank you very much

  • @user-bq3wc4me2j
    @user-bq3wc4me2j Před 18 dny

    hello , this video has been so helpful but I have a problem, at the GoogleGenerativeAIStream,, it has depreciated , please i will appreciate if you can help out

  • @fadify1997
    @fadify1997 Před 19 dny

    Amazing Sir💯

  • @tobilobaabayomi5708
    @tobilobaabayomi5708 Před 21 dnem

    Nice content man!. How do we get the source code I'm kinda stuck

  • @akshatanand6919
    @akshatanand6919 Před 22 dny

    also where are u getting the modelAssetPath .?

    • @maplearcadecode
      @maplearcadecode Před 22 dny

      here's the cdn location for the model: storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/1/hand_landmarker.task

  • @akshatanand6919
    @akshatanand6919 Před 22 dny

    been following this , have a question I have a nvidia GTX 1650Ti on my laptop, when i build this project, i did used the 'GPU' as delegate but the whole feed freezes, and the rocket model moved very slow, on further analysis, my CPU is getting used and its bottle necking, pls tell me a fix, does this involeve me downloding CUDA.?

    • @maplearcadecode
      @maplearcadecode Před 22 dny

      It seems like so. Although please give the game a try here, with your current set up on Chrome 👉 test-plane.vercel.app/ It's not the final game, but it has the basic building blocks.

  • @jesuspena1501
    @jesuspena1501 Před 23 dny

    you're amazing! thanks

  • @srirammurthy2739
    @srirammurthy2739 Před 23 dny

    superb buddy, great start point for me

  • @YASHRAJ-ex6wq
    @YASHRAJ-ex6wq Před 24 dny

    lets start buddy !

  • @hasanulhaquebanna
    @hasanulhaquebanna Před 25 dny

    How can we train this model or how can built our own ai model to work with our needs?

  • @briltsoftsupport483
    @briltsoftsupport483 Před měsícem

    Can this be shipped with a nextjs app

  • @pravinsingh7605
    @pravinsingh7605 Před měsícem

    Amazing! keep on adding such content!!!! on nextjs and tensorflow I will follow you along

  • @krishpanchani
    @krishpanchani Před měsícem

    Can you make video or help me for how to render React Components using this Google Gemini Model in the NextJs AI SDK

  • @tadannz3759
    @tadannz3759 Před 2 měsíci

    Thank you , Grade tech , I love it 😘

  • @rookie9114
    @rookie9114 Před 3 měsíci

    really useful content! please continue to make more ai contents :)

  • @theAIsearch
    @theAIsearch Před 3 měsíci

    great explanation. at 14:43 does this mean any model can access the internet?

  • @MANilyas
    @MANilyas Před 3 měsíci

    this stop working also in chat gpt 3.5 now do you have other solution

  • @Haccod-kg2ou
    @Haccod-kg2ou Před 3 měsíci

    share the link of ur website pls

  • @vanshavbhalla6210
    @vanshavbhalla6210 Před 3 měsíci

    this was crisp and informative with all the details needed. Great work man!

  • @shadytiger160
    @shadytiger160 Před 3 měsíci

    Informative🫡

  • @Aman_yadav1419
    @Aman_yadav1419 Před 3 měsíci

    Amazing keep uploading ❤

  • @arijit-og5zp
    @arijit-og5zp Před 3 měsíci

    Pls add a featurs that if a person does not look into the camera for a particular time, then a warning message and sound pops. This feature will be useful in online exams

  • @Mathster_live
    @Mathster_live Před 3 měsíci

    I can't seem to have the webcam work on mobile browsers, it doesn't ask for permission to use the camera and even when I always allow it, the webcam area is blank for some reason.

    • @haiffy
      @haiffy Před 2 měsíci

      Because you can't use webcam in mobile through webapp

  • @deepanshjha6353
    @deepanshjha6353 Před 3 měsíci

    Could you please provide guidance on creating an Advanced RAG model that incorporates Hugging Face LLM models and PDFs within Next.js using TypeScript?

  • @user-wr4yl7tx3w
    @user-wr4yl7tx3w Před 3 měsíci

    do you recommend learning next.js?

    • @maplearcadecode
      @maplearcadecode Před 3 měsíci

      It depends on your specific goals. Next.js simplifies the setup of complex features like routing, server-side rendering, and code splitting, which makes it easier to build React applications. Which is probably why Next.js skills are in demand in the job market too.

  • @haricharanvalleru4411
    @haricharanvalleru4411 Před 3 měsíci

    Best explanation

  • @MrRobots100
    @MrRobots100 Před 3 měsíci

    Few questions: 1) Will it work locally on the device on which it is installed on for example lets say react native or do you need to set up a flask API and get response 2) If I have a MongoDb or Firebase DB with data and I want to finetune the model to give me responses based on that, can I do it 3) Scalability costs, for lets say from 1000 users to 100,000 users, how can I keep it low

    • @maplearcadecode
      @maplearcadecode Před 3 měsíci

      1) No, you don't need to set up flask API for this. Installing Ollama will spin up a web api. Do check out my Ollama quick start guide and you'll have your question answered. 2) Of course, you can load fine tuned custom models on ollama. You can check out this tutorial here (czcams.com/video/3BnnsQCmgLo/video.htmlsi=P4yZYxFuGtyKmmU6) 3) If you are thinking about sharing the app then as a first step, check out ngrok and their pricing to make the locally hosted app public. Secondly, the shared app will be limited by the throughput of the LLM itself, which will be influenced by the local hardware you will be running it on. You might wanna consider running ollama in hosted environments within a docker.

  • @fadify1997
    @fadify1997 Před 4 měsíci

    great man keep growing

  • @shadytiger160
    @shadytiger160 Před 4 měsíci

    Knowledgeable 🫡

  • @youwang9156
    @youwang9156 Před 4 měsíci

    Thank you so much for your video !!!!! just have one question, if I make it a Local WebAPI, so I can directly call and use it in VS code to do the task but not be able to send the API to other people to use it somewhere else?

    • @maplearcadecode
      @maplearcadecode Před 4 měsíci

      Yes you can! You need a tunneling tool like ngrok for this. You may check out my latest video on this topic.

  • @ahmedahmedx9600
    @ahmedahmedx9600 Před 4 měsíci

    What theme is used in vscode in beginning of video ?

  • @RajaRahamathullah04
    @RajaRahamathullah04 Před 4 měsíci

    Excellent video, thank you!

  • @faisal-anqoudi
    @faisal-anqoudi Před 4 měsíci

    you are creative

  • @elmehdiben895
    @elmehdiben895 Před 4 měsíci

    Awesome, thanks a lot ❤

  • @shadytiger160
    @shadytiger160 Před 4 měsíci

    Awesome ❤

  • @arvindelayappan3266
    @arvindelayappan3266 Před 5 měsíci

    Can the live caption be recorded as transcripts

  • @packagenotfound
    @packagenotfound Před 5 měsíci

    need more project tutorial like this +1

    • @maplearcadecode
      @maplearcadecode Před 5 měsíci

      Thanks for the +1! I'll make more project tutorials like this one.

  • @shwetabhat9981
    @shwetabhat9981 Před 5 měsíci

    Absolutely amazing. Love the fact that you teach how to use AI ML with streamlined web development . Thank you so much. Looking forward to so much more 🎉

    • @maplearcadecode
      @maplearcadecode Před 5 měsíci

      Thank you for your kind words! I'll keep more content coming.

  • @shaileshwaniya2581
    @shaileshwaniya2581 Před 5 měsíci

    Hello, can you tell me that how much time it took to learn the coding that you are showing in this video? I'm newbie and wants to learn coding, specifically python

    • @maplearcadecode
      @maplearcadecode Před 5 měsíci

      As a starting point for coding, I would suggest the Head First series of books. Try their Head First Python and see if it's your thing. As with learning anything new, coding becomes easier really really fast. Happy coding!

  • @jim02377
    @jim02377 Před 5 měsíci

    Excellent video! Thanks for taking the time to make it!

  • @insensibility
    @insensibility Před 5 měsíci

    Great video! It just got supported on windows. Can I connect with you on LinkedIn? You're a great dude.

    • @maplearcadecode
      @maplearcadecode Před 5 měsíci

      Yes, of course. www.linkedin.com/in/koushik-sarkar-iimc/ Looking forward to it.

  • @thewildweb
    @thewildweb Před 5 měsíci

    Love to connect with you on twitter or linkedin

    • @maplearcadecode
      @maplearcadecode Před 5 měsíci

      Sure! www.linkedin.com/in/koushik-sarkar-iimc/ Looking forward to it 🙌

  • @tanmaypant8493
    @tanmaypant8493 Před 5 měsíci

    This is SOOOOOO COOOOOOOL!!!