๐Ÿ“ฆ google-gemini / angular-rock-paper-scissors-sample

โ˜… 42 stars โ‘‚ 25 forks ๐Ÿ‘ 42 watching โš–๏ธ Apache License 2.0
๐Ÿ“ฅ Clone https://github.com/google-gemini/angular-rock-paper-scissors-sample.git
HTTPS git clone https://github.com/google-gemini/angular-rock-paper-scissors-sample.git
SSH git clone git@github.com:google-gemini/angular-rock-paper-scissors-sample.git
CLI gh repo clone google-gemini/angular-rock-paper-scissors-sample
Emma Twersky Emma Twersky Merge pull request #11 from davideast/main d7a6d26 1 years ago ๐Ÿ“ History
๐Ÿ“‚ main View all commits โ†’
๐Ÿ“ .idx
๐Ÿ“ functions
๐Ÿ“ src
๐Ÿ“„ .editorconfig
๐Ÿ“„ .eslintrc.json
๐Ÿ“„ .firebaserc
๐Ÿ“„ .gitignore
๐Ÿ“„ .prettierrc
๐Ÿ“„ angular.json
๐Ÿ“„ CONTRIBUTING.md
๐Ÿ“„ demo.mov
๐Ÿ“„ firebase.json
๐Ÿ“„ idx-gemini-key.png
๐Ÿ“„ LICENSE.md
๐Ÿ“„ package-lock.json
๐Ÿ“„ package.json
๐Ÿ“„ README.md
๐Ÿ“„ tsconfig.app.json
๐Ÿ“„ tsconfig.json
๐Ÿ“„ tsconfig.spec.json
๐Ÿ“„ README.md

Angular Rock Paper Scissors Sample

Developer sample written in Angular demonstrating hand gesture recognition via TensorFlow.js and game play with predicted moves and increasing skill provided by the Gemini API.

This project was generated with Angular CLI version 17.0.5 and uses tensorflow.js, a library for machine learning in Javascript. Video from the webcam is passed to a pre1.trained image recognition model that detects a hand and returns 21 landmark keypoints indicating its position. We then use fingerpose, a finger gesture classifier, to define and recognize the hand gestures for Rock, Paper, and Scissors based on the position of each finger.

For more information on Angular, visit angular.dev.

Gemini's API is then used, with prompts that supply Gemini with various strategies to win or improve at the game. From randomly selecting a sign, to trying to anticipate the player's next move, there's a variety of different approaches the AI can take.

Can you beat AI at the game?

https://github.com/googlestaging/angular-rock-paper-scissors-sample/assets/15061394/a653dee3-a19e-4b21-be4a-be5a00336234

Open the Demo in IDX

Try in IDX

  • Open this project using the button above.
  • Open the IDX integration panel to get an Gemini API key.
  • Update the API_KEY="โ€ฆ" line in the functions/.env file
IDX Integration

Get the demo running locally!

  • Create a personal fork of the project on Github, then clone the fork on your local machine.
  • Run npm run i to install the dependencies required to run the server.
  • [IMPORTANT!!] This demo needs a Gemini API to run. Go to Google AI Studio to get an API key then add it to the Firebase Function in angular-rock-paper-scissors-sample/functions/.env. This demo simulates how you might store and protect a private Gemini API key in a real world app.
  • Run ng run s to run the server. Since we're using Firebase Functions, you'll need to run our functions and the app in a Firebase Emulator, this command does this automatically!
  • Open a browser tab to http://localhost:4200. The app will automatically reload if you change any of the source files.