├── .firebase └── hosting.YnVpbGQ.cache ├── .firebaserc ├── .gitignore ├── .vscode └── settings.json ├── Code For Training the Model └── SLR_MODEL_TRAINING.ipynb ├── README.md ├── Trained Model └── sign_language_recognizer_25-04-2023.task ├── firebase.json ├── package-lock.json ├── package.json ├── public ├── banner.png ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json ├── offline.html ├── screenshots │ ├── Bye.jpg │ ├── D.jpg │ ├── Deaf.jpg │ ├── Hello.jpg │ ├── Meet.jpg │ └── dasboard.jpeg └── serviceWorker.js ├── src ├── App.css ├── App.js ├── assests │ ├── 404.svg │ ├── No-data.svg │ ├── SignHand.png │ ├── SignImages │ │ ├── A.png │ │ ├── B.png │ │ ├── BYE.png │ │ ├── C.png │ │ ├── D.png │ │ ├── DEAF.png │ │ ├── E.png │ │ ├── F.png │ │ ├── G.png │ │ ├── H.png │ │ ├── HELLO.png │ │ ├── I.png │ │ ├── ILOVEYOU.png │ │ ├── J.png │ │ ├── K.png │ │ ├── L.png │ │ ├── LEARN.png │ │ ├── M.png │ │ ├── ME.png │ │ ├── MEET.png │ │ ├── N.png │ │ ├── NAME.png │ │ ├── NO.png │ │ ├── NOTOK.png │ │ ├── O.png │ │ ├── OK.png │ │ ├── P.png │ │ ├── PEN.png │ │ ├── PLEASE.png │ │ ├── Q.png │ │ ├── R.png │ │ ├── S.png │ │ ├── T.png │ │ ├── TELL.png │ │ ├── THANKYOU.png │ │ ├── U.png │ │ ├── V.png │ │ ├── W.png │ │ ├── X.png │ │ ├── Y.png │ │ └── YES.png │ ├── Spinner.svg │ ├── Working.png │ ├── bronze.png │ ├── displayGif.gif │ ├── dummy-user.png │ ├── gold.png │ ├── google.png │ ├── google_icon.png │ ├── left_quote.png │ ├── login.svg │ ├── logo.png │ ├── logo2.png │ ├── silver.png │ └── user-icon.png ├── components │ ├── Detect │ │ ├── Detect.css │ │ ├── Detect.jsx │ │ └── ProgressBar │ │ │ ├── ProgressBar.css │ │ │ └── ProgressBar.jsx │ ├── Features │ │ ├── Features.css │ │ ├── Features.jsx │ │ └── feature │ │ │ ├── Feature.css │ │ │ └── Feature.jsx │ ├── NotFound │ │ ├── NotFound.css │ │ └── NotFound.jsx │ ├── Spinner │ │ ├── Spinner.css │ │ └── Spinner.jsx │ ├── Testimonials │ │ ├── Card │ │ │ ├── Card.css │ │ │ └── Card.jsx │ │ ├── Testimonials.css │ │ └── Testimonials.jsx │ ├── WhatComp │ │ ├── WhatComp.css │ │ └── WhatComp.jsx │ ├── Working │ │ ├── Working.css │ │ └── Working.jsx │ ├── cta │ │ ├── CTA.css │ │ └── CTA.jsx │ ├── dashboard │ │ ├── Chart │ │ │ ├── Chart.css │ │ │ └── ChartComp.jsx │ │ ├── Dashboard.css │ │ └── Dashboard.jsx │ ├── footer │ │ ├── Footer.css │ │ └── Footer.jsx │ ├── header │ │ ├── Header.css │ │ └── Header.jsx │ ├── home │ │ └── Home.jsx │ ├── index.js │ └── navbar │ │ ├── Navbar.css │ │ └── Navbar.jsx ├── data │ ├── FeaturesData.js │ ├── FeedbackData.js │ ├── SignImageData.js │ └── quotes.js ├── firebase.js ├── index.css ├── index.js └── redux │ ├── action-types │ └── index.js │ ├── actions │ ├── authaction.js │ └── signdataaction.js │ ├── reducer │ ├── authReducer.js │ └── signReducer.js │ └── store.js └── storage.rules /.firebase/hosting.YnVpbGQ.cache: -------------------------------------------------------------------------------- 1 | banner.png,1683280853703,c457195f767cbf71d09ae0b94b066b29a9d045d02c331e4674e9d567a3d8099f 2 | favicon.ico,1679143148996,f14c153ae05ab0926a6b98a49e9c0a17b98112eb0f52ac1aa8e6347ac8071880 3 | logo192.png,1679143058855,bcc429540e2797f198dadb6ed3ee6f092617942738f3ab87e09b34cef48535ba 4 | logo512.png,1680187743761,fda64194fbc3d90e4a301880281fc4b30344ea839859ee73adb6818e3b754f8a 5 | manifest.json,1681138796977,3969271b1925e1683cd1ff976842d3685dec977eae87272e7f715806a795a3e5 6 | offline.html,1682950263772,76fedced0ea9288590bc0ab416f0b7e8657e84bcf713a45694e717805b0bc8bd 7 | serviceWorker.js,1681139456011,d9396a7d8e7cd01c2581843aa7ba224b0a099be3e105550ea99079f0f5dc286f 8 | screenshots/Bye.jpg,1683282500370,f60fe164c6c595d16245a41eda675b6e84263ee71c02d333a058f41a9b1879b1 9 | screenshots/D.jpg,1683282482078,9ca41f8abf9ee9a323d0f2b06dcd339764fa33905047656e83f47ded52a77591 10 | screenshots/dasboard.jpeg,1683282675851,9716d7c3ccdcd055e0a200cf26f2cffd509eec662215db0025618a950a60922b 11 | screenshots/Deaf.jpg,1683282443139,1e42dbfa4ef2829bf235a5acbb1f7b1728198c8f8b9024d127c95bdf2b56acc2 12 | screenshots/Hello.jpg,1683282372167,42c93bd3617ebf7246a16ce3b5f76a7847c00e58b103cc7748b7bf2a4ff9483f 13 | screenshots/Meet.jpg,1683282358730,16fea62dfca0a38e55bb9d0f60835027658243c4f08ba857b44ee0c5c469dba6 14 | asset-manifest.json,1694437044560,bf5ee22920f06f93ef0b87e9c6cda8feb1f5bb6a815bd1a64120d3e3ecd1996f 15 | index.html,1694437044520,96b6c2e24f713478316c6ac3e4c81eaee28d7e15e101aabf4b5b88bc2c7871e4 16 | static/css/main.ababadc1.css,1694437044521,48e86ec6ad9347ea25c2add60c81f87b64e82243f08fcae2cca494464e71ce79 17 | static/js/main.6de464ed.js.LICENSE.txt,1694437044522,c4674b2e7786b334ce9629c4b477f69e2f7d6e21ee540d320b966ac6072a887c 18 | static/media/404.9acb26fbdbb6fc1498e123a2cf4d4e95.svg,1694437044442,ab0bd58e2dc39262b15477df9a1cf1e6de451eb26ab4ae99793dd3f1db77dff7 19 | static/media/logo.a813e549a697221f45d1.png,1694437044521,de81a5f362709b7f61b14b62ad3a9a47ccf6cd14f3df7ff3e1b128629ead82a9 20 | static/media/Spinner.a715d45df69d2c076ce60a9f063d859d.svg,1694437044423,5de08928865fb90fc3287ec1416275d880a617d92ee32a69341a35a86ec7620b 21 | static/css/main.ababadc1.css.map,1694437044560,f38b0fd7b910fc56cc5bcf107b6134e5d17ca00d55a262277743d4e893fca594 22 | static/media/logo2.604a1631de1cd111390d.png,1694437044521,c66d9c0d63619630e0ef73ba2ed94f344dffdbc94c04f63213c75ca13a66ea67 23 | static/media/No-data.b66445315ab372f801c695d8b7ffad8a.svg,1694437044423,a0d48bcc3a3ee26eedf3cc8ab1e5bc36bf29dc322cc4dcb4f464462c6d844bd7 24 | static/media/DEAF.c288e81f1e49b7d00da3.png,1694437044442,a982dbcc8b2a43aff1f1e1018b60e96d5513d21cb853f8df60a22acfd4b01f08 25 | static/media/C.ae434ef49f5a626437d3.png,1694437044442,c73c26a53307ddf74ecfc6090cd4d914782ae80315f56535330605045241eff4 26 | static/media/E.0b627af1d6266db3777a.png,1694437044442,61f0885876fd4aca33af31b885aec215305223e23b05f896c62b1a22e55d4480 27 | static/media/H.5394a1cc4e2692a26003.png,1694437044442,12f1458fda65f6624695657d81e60f176b48f5c0c7a002709c0cd4ce73fc89cd 28 | static/media/F.345e39a5728ed31c206f.png,1694437044442,b815b6a6bb39afffb778939b547909f06cf8aaa430c4abdb97dc3917a887ec7c 29 | static/media/G.2571d695c9d6f7a70341.png,1694437044442,c762089a81fd22a75177b3cfe4834a9fc99159e52032b98902550dd39dece190 30 | static/media/K.546ab56f30a835fbfa26.png,1694437044449,27d596a7dfe801ffa9e5f44c3ae60f5678daa7e1fb1f7b9ca8420efec8546443 31 | static/media/BYE.97712e1201582daefe03.png,1694437044442,fe3ada0c3f0e9433b1c4218979deace6abd0ae0b1e45768400d9eea830e78662 32 | static/media/NO.191f742bd51ff7a80571.png,1694437044476,5a16ba9d75c1e692e36f017c9912c5d1a748547b792d6dcf1369e5ba4546fa87 33 | static/media/O.c2c4b0cd3c74a3fd7267.png,1694437044504,c05f7e02169d3114731607d2c527e1544d554fa4276a801fbde8ed3a2b442c43 34 | static/media/P.4416e27bbd3bf572681f.png,1694437044504,e1c0dfcfe5bc38d724185b0fbda273ac8d1a8e4f7e88e67682c99fcecb8dfe5c 35 | static/media/R.9e982f485cfa1a395ed6.png,1694437044504,be8067d7fbd136379c9d7a9c5e4c4d53e1b003ecb803a11362033e0f62d7893a 36 | static/media/S.010695924ff30960a5a9.png,1694437044504,9f6cc5e59bd4792c47b7ab079d82c4a5b2fd27d690fec81c2e74e63b4ab82c73 37 | static/media/T.ff99ad986d6191042d0b.png,1694437044504,389fbd3d792f58b2e271f94f2b4f6f2b029a363d7208607c7f8e338209f541e7 38 | static/media/TELL.cd27d3d24b19342d4406.png,1694437044504,e6d299adcb4ed2b54578e751b4c4723403b0785d16517bae19dfbf64c629b2e3 39 | static/media/D.3e1de803830e5ebfefe3.png,1694437044442,4c32ac758cace047015a2dd960ac96df6c7be266b08cdae47790ed584dcdb38a 40 | static/media/I.6ee923ebcc36bba04f4c.png,1694437044448,9662d1a30efb11c730ef5f3688c13e00af8dfabbd33cd2684f5aa746647ed65a 41 | static/media/J.977b2a8e6e34c81faba3.png,1694437044448,a8ae04af0cc8df214e941fcd67defa9325ee7ca406e2f52b65012ab8a4f5ced5 42 | static/media/ILOVEYOU.7cc05fdde26721f6d0f9.png,1694437044448,d537248765e16dd685243f175ff0a79e168307bedd40a4e9d2d1904ce11f3678 43 | static/media/N.276d9a17a41751512b5e.png,1694437044476,962f2def4a578435ca439a5ef5fd9aa9491662161b494529f44503e5c9e5b458 44 | static/media/M.b8f1109d155622eaac6d.png,1694437044476,3a75badd946618fe713b5ec13870ab6f7cc27b66e9f733dac3b791396bab8ef0 45 | static/media/HELLO.86ea26373fa5028a1c28.png,1694437044443,fe959bab57ebf892fd79954c30eac06bcb5ab5f575658ef8c2994b76b8eb491d 46 | static/media/ME.d06dd5795c545dcce826.png,1694437044476,75e367a40081de0351d769839ae9814601b00c2e5988d44e27f5a67efb1369f8 47 | static/media/LEARN.f7ab419ef07004bce103.png,1694437044476,a3b15ca0716171ed58de7d0cf8c6a79b54a143c2a78ac0d38e1090c491931435 48 | static/media/NAME.231db3ea5c0cbaab8869.png,1694437044492,7dddc7f90e5873b331f7561a142f01707e963a532dc1455ed6ea32d23f2842e3 49 | static/media/MEET.d253fc04762c8d039938.png,1694437044476,92475abd36b40fd5d712f76c866192e792f02dcddd00c8c57342c9e16bd4b2a9 50 | static/media/L.ffa8134cdf89c3eae93a.png,1694437044449,2659d9613367fc5ec4c0c741d771eecaed734193bad4dcfc06c9dab6bdc138b6 51 | static/media/OK.5e0a6d92b885ba37ec5d.png,1694437044504,8c7f1397db80a26755050d44ebf4de082ce19ebbee3be06b8cd2a08f71307cfb 52 | static/media/PLEASE.255f1cfbddacd6acf2ad.png,1694437044504,1b5dd167e4e2d6524561da319264d3632183f44641057e747eae305e5e5079dc 53 | static/media/NOTOK.9ecb6a43f3652270c542.png,1694437044503,8c6622bf244161575a711bcd964812ab88d0e3e09ad999bf7c7d10ad9a78050f 54 | static/media/Q.e2e6196cce78951ca5cb.png,1694437044504,45cffed91c58ed011702eacad70814fe358aa507058b2547b7bef99b5c7a0ef4 55 | static/media/PEN.207d12b15732bdd6a4d5.png,1694437044504,b86a21172535ae447fa215c09cc77eb9a5481052dea13e10c3f0b07031ea59ed 56 | static/media/U.d1b107ac47bebfa1576c.png,1694437044506,d600360ede5335a9bc4aa5f7d3846ebfef6066df87c3793609be908867c13d04 57 | static/media/B.acbdcfe1fd989df4a3a1.png,1694437044442,86fdefa2545b1550c240de00b1fd89f4891f51b18b259a11b83d0915de0df7cc 58 | static/media/X.af4616d37bf636653b63.png,1694437044521,9eaf27ccb15b9ebaa73eb25d42dd42707b72958d00260d148a8ca3624b0d4830 59 | static/media/A.023af9a2d760e1977555.png,1694437044423,576cc8129e780ede79ef8cd75f4a55116e65cd574bb4d26b3e56425b8445bfc1 60 | static/media/Y.0164d87e5e28c7c0de00.png,1694437044521,d2b9f7054de2894aa67408a5bab4cd803a3f653aeb36a46cba2dc27f8c34e8b4 61 | static/media/YES.bf7f605adf3579f2f1ec.png,1694437044521,b75d70dd8b43ef49f8f4ffe51197f114729d19342587680207b1c9ad0f4c00a6 62 | static/media/V.c7a07dab78ea41abaec4.png,1694437044518,38b3fe378a728c12a7fb6ef054a1e223af878a089b8d73f3099c772ff885758f 63 | static/media/THANKYOU.a3fcef9edd1884cd08a6.png,1694437044506,e200a3400148d3f128031a06a629baef9c75402f1080cb50800b3508b3e9fc37 64 | static/media/displayGif.2998e45fd4aac96337d0.gif,1694437044521,1de5e695a5d75c6ec32f929a6f2376a62744f1e6e0cb35298a3b191c05c86f65 65 | static/media/W.4ddb99ffc525c6fcf4e9.png,1694437044518,78b3d4cc9c4e52ec64cc3d09267544289dc0244621bac9211cedf8330ccf15b5 66 | static/media/Working.10bc077954ddcf486a6e.png,1694437044521,eb7278251faf1753fa47929b3dd2bc0b12ab30a2ddd9a65acdf0cdd0f7c1bf88 67 | static/js/main.6de464ed.js,1694437044542,86fde1627f08180daa60fc76ebd2ed65d9163ac73854da379f09916299b70c1e 68 | static/media/SignHand.e09e6c4aa7323fdccbc6.png,1694437044442,c702d973e2a31e94f694920fdf7b9d23b9c4216aa50c9af2ffd4cab94f8d287f 69 | static/js/main.6de464ed.js.map,1694437044562,fe51df5fd01b4a50c43fa227a276efbc53f306b7adcd068c0aa50dcf942d765c 70 | -------------------------------------------------------------------------------- /.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "default": "sign-language-ai" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /Code For Training the Model/SLR_MODEL_TRAINING.ipynb: -------------------------------------------------------------------------------- 1 | { 2 | "cells": [ 3 | { 4 | "cell_type": "markdown", 5 | "metadata": {}, 6 | "source": [ 7 | "# **Upload and Run the Below Code in Google Collab**" 8 | ] 9 | }, 10 | { 11 | "cell_type": "code", 12 | "execution_count": null, 13 | "metadata": { 14 | "id": "6ukkcrwtDy8j" 15 | }, 16 | "outputs": [], 17 | "source": [ 18 | "!pip install --upgrade pip\n", 19 | "!pip install mediapipe-model-maker" 20 | ] 21 | }, 22 | { 23 | "cell_type": "markdown", 24 | "metadata": { 25 | "id": "IccAL7pYQ7ow" 26 | }, 27 | "source": [ 28 | "# **Import the Required Models**" 29 | ] 30 | }, 31 | { 32 | "cell_type": "code", 33 | "execution_count": null, 34 | "metadata": { 35 | "id": "MSoCRT5fEIbg" 36 | }, 37 | "outputs": [], 38 | "source": [ 39 | "from google.colab import files\n", 40 | "import os\n", 41 | "import tensorflow as tf\n", 42 | "assert tf.__version__.startswith('2')\n", 43 | "\n", 44 | "from mediapipe_model_maker import gesture_recognizer\n", 45 | "\n", 46 | "import matplotlib.pyplot as plt" 47 | ] 48 | }, 49 | { 50 | "cell_type": "markdown", 51 | "metadata": { 52 | "id": "_YtW1ZJmRFwo" 53 | }, 54 | "source": [ 55 | "# **Add the Downloaded dataset to your google drives `My Drive` Section. Then use Below Code to connect it to this Project**" 56 | ] 57 | }, 58 | { 59 | "cell_type": "code", 60 | "execution_count": null, 61 | "metadata": { 62 | "id": "8k3lYqiiEX0J" 63 | }, 64 | "outputs": [], 65 | "source": [ 66 | "from google.colab import drive\n", 67 | "drive.mount('/content/drive')" 68 | ] 69 | }, 70 | { 71 | "cell_type": "code", 72 | "execution_count": null, 73 | "metadata": { 74 | "id": "Yy2oQmFTEdQQ" 75 | }, 76 | "outputs": [], 77 | "source": [ 78 | "my_folder_path = '/content/drive/MyDrive/sign_language_dataset'" 79 | ] 80 | }, 81 | { 82 | "cell_type": "code", 83 | "execution_count": null, 84 | "metadata": { 85 | "id": "nwOAO6cWEfG6" 86 | }, 87 | "outputs": [], 88 | "source": [ 89 | "print(my_folder_path)" 90 | ] 91 | }, 92 | { 93 | "cell_type": "code", 94 | "execution_count": null, 95 | "metadata": { 96 | "id": "gpknN9A7EgXa" 97 | }, 98 | "outputs": [], 99 | "source": [ 100 | "print(my_folder_path)\n", 101 | "labels = []\n", 102 | "for i in os.listdir(my_folder_path):\n", 103 | " if os.path.isdir(os.path.join(my_folder_path, i)):\n", 104 | " labels.append(i)\n", 105 | "for label in labels:\n", 106 | " print(label + \"\\n\")" 107 | ] 108 | }, 109 | { 110 | "cell_type": "code", 111 | "execution_count": null, 112 | "metadata": { 113 | "id": "R1-uWZezEiTC" 114 | }, 115 | "outputs": [], 116 | "source": [ 117 | "print(len(labels))" 118 | ] 119 | }, 120 | { 121 | "cell_type": "markdown", 122 | "metadata": { 123 | "id": "DVykJGpmRjC6" 124 | }, 125 | "source": [ 126 | "# **From Below Run All the Steps to Train and then Download the Trained Model**" 127 | ] 128 | }, 129 | { 130 | "cell_type": "code", 131 | "execution_count": null, 132 | "metadata": { 133 | "colab": { 134 | "base_uri": "https://localhost:8080/" 135 | }, 136 | "id": "0k8cJuBrEmKq", 137 | "outputId": "1ddb965e-d10b-4366-bac6-fc1be3f175af" 138 | }, 139 | "outputs": [ 140 | { 141 | "name": "stderr", 142 | "output_type": "stream", 143 | "text": [ 144 | ":6: RuntimeWarning: More than 20 figures have been opened. Figures created through the pyplot interface (`matplotlib.pyplot.figure`) are retained until explicitly closed and may consume too much memory. (To control this warning, see the rcParam `figure.max_open_warning`). Consider using `matplotlib.pyplot.close()`.\n", 145 | " fig, axs = plt.subplots(1, NUM_EXAMPLES, figsize=(10,2))\n" 146 | ] 147 | } 148 | ], 149 | "source": [ 150 | "NUM_EXAMPLES = 10\n", 151 | "\n", 152 | "for label in labels:\n", 153 | " label_dir = os.path.join(my_folder_path, label)\n", 154 | " example_filenames = os.listdir(label_dir)[:NUM_EXAMPLES]\n", 155 | " fig, axs = plt.subplots(1, NUM_EXAMPLES, figsize=(10,2))\n", 156 | " for i in range(NUM_EXAMPLES):\n", 157 | " axs[i].imshow(plt.imread(os.path.join(label_dir, example_filenames[i])))\n", 158 | " axs[i].get_xaxis().set_visible(False)\n", 159 | " axs[i].get_yaxis().set_visible(False)\n", 160 | " fig.suptitle(f'Showing {NUM_EXAMPLES} examples for {label}')\n", 161 | "\n", 162 | "plt.show()" 163 | ] 164 | }, 165 | { 166 | "cell_type": "code", 167 | "execution_count": null, 168 | "metadata": { 169 | "colab": { 170 | "base_uri": "https://localhost:8080/" 171 | }, 172 | "id": "B2U5smNZEojS", 173 | "outputId": "e036b550-e900-4fd2-cf17-18fe1b08c963" 174 | }, 175 | "outputs": [ 176 | { 177 | "name": "stdout", 178 | "output_type": "stream", 179 | "text": [ 180 | "Downloading https://storage.googleapis.com/mediapipe-assets/palm_detection_full.tflite to /tmp/model_maker/gesture_recognizer/palm_detection_full.tflite\n", 181 | "Downloading https://storage.googleapis.com/mediapipe-assets/hand_landmark_full.tflite to /tmp/model_maker/gesture_recognizer/hand_landmark_full.tflite\n", 182 | "Downloading https://storage.googleapis.com/mediapipe-assets/gesture_embedder.tar.gz to /tmp/model_maker/gesture_recognizer/gesture_embedder\n" 183 | ] 184 | } 185 | ], 186 | "source": [ 187 | "data = gesture_recognizer.Dataset.from_folder(\n", 188 | " dirname=my_folder_path,\n", 189 | " hparams=gesture_recognizer.HandDataPreprocessingParams()\n", 190 | ")\n", 191 | "train_data, rest_data = data.split(0.8)\n", 192 | "validation_data, test_data = rest_data.split(0.5)" 193 | ] 194 | }, 195 | { 196 | "cell_type": "code", 197 | "execution_count": null, 198 | "metadata": { 199 | "colab": { 200 | "base_uri": "https://localhost:8080/" 201 | }, 202 | "id": "7UWdONtUFzvn", 203 | "outputId": "2d3b3090-0a0f-4316-9da5-5d1af48644b3" 204 | }, 205 | "outputs": [ 206 | { 207 | "name": "stdout", 208 | "output_type": "stream", 209 | "text": [ 210 | "Model: \"model\"\n", 211 | "_________________________________________________________________\n", 212 | " Layer (type) Output Shape Param # \n", 213 | "=================================================================\n", 214 | " hand_embedding (InputLayer) [(None, 128)] 0 \n", 215 | " \n", 216 | " batch_normalization (BatchN (None, 128) 512 \n", 217 | " ormalization) \n", 218 | " \n", 219 | " re_lu (ReLU) (None, 128) 0 \n", 220 | " \n", 221 | " dropout (Dropout) (None, 128) 0 \n", 222 | " \n", 223 | " custom_gesture_recognizer_o (None, 42) 5418 \n", 224 | " ut (Dense) \n", 225 | " \n", 226 | "=================================================================\n", 227 | "Total params: 5,930\n", 228 | "Trainable params: 5,674\n", 229 | "Non-trainable params: 256\n", 230 | "_________________________________________________________________\n", 231 | "None\n", 232 | "Epoch 1/10\n", 233 | "743/743 [==============================] - 6s 6ms/step - loss: 2.6524 - categorical_accuracy: 0.2564 - val_loss: 0.9206 - val_categorical_accuracy: 0.6559 - lr: 0.0010\n", 234 | "Epoch 2/10\n", 235 | "743/743 [==============================] - 8s 11ms/step - loss: 1.5697 - categorical_accuracy: 0.4926 - val_loss: 0.5648 - val_categorical_accuracy: 0.7473 - lr: 9.9000e-04\n", 236 | "Epoch 3/10\n", 237 | "743/743 [==============================] - 4s 6ms/step - loss: 1.2409 - categorical_accuracy: 0.5841 - val_loss: 0.4541 - val_categorical_accuracy: 0.7742 - lr: 9.8010e-04\n", 238 | "Epoch 4/10\n", 239 | "743/743 [==============================] - 6s 8ms/step - loss: 1.0796 - categorical_accuracy: 0.6131 - val_loss: 0.3885 - val_categorical_accuracy: 0.7849 - lr: 9.7030e-04\n", 240 | "Epoch 5/10\n", 241 | "743/743 [==============================] - 4s 6ms/step - loss: 0.9601 - categorical_accuracy: 0.6575 - val_loss: 0.3614 - val_categorical_accuracy: 0.8011 - lr: 9.6060e-04\n", 242 | "Epoch 6/10\n", 243 | "743/743 [==============================] - 4s 6ms/step - loss: 0.8950 - categorical_accuracy: 0.6837 - val_loss: 0.3305 - val_categorical_accuracy: 0.8226 - lr: 9.5099e-04\n", 244 | "Epoch 7/10\n", 245 | "743/743 [==============================] - 8s 10ms/step - loss: 0.8465 - categorical_accuracy: 0.6891 - val_loss: 0.3290 - val_categorical_accuracy: 0.8226 - lr: 9.4148e-04\n", 246 | "Epoch 8/10\n", 247 | "743/743 [==============================] - 4s 5ms/step - loss: 0.8020 - categorical_accuracy: 0.7039 - val_loss: 0.3184 - val_categorical_accuracy: 0.8333 - lr: 9.3207e-04\n", 248 | "Epoch 9/10\n", 249 | "743/743 [==============================] - 4s 5ms/step - loss: 0.7534 - categorical_accuracy: 0.7281 - val_loss: 0.2951 - val_categorical_accuracy: 0.8387 - lr: 9.2274e-04\n", 250 | "Epoch 10/10\n", 251 | "743/743 [==============================] - 8s 10ms/step - loss: 0.7393 - categorical_accuracy: 0.7147 - val_loss: 0.3044 - val_categorical_accuracy: 0.8441 - lr: 9.1352e-04\n" 252 | ] 253 | } 254 | ], 255 | "source": [ 256 | "hparams = gesture_recognizer.HParams(export_dir=\"exported_model\")\n", 257 | "options = gesture_recognizer.GestureRecognizerOptions(hparams=hparams)\n", 258 | "model = gesture_recognizer.GestureRecognizer.create(\n", 259 | " train_data=train_data,\n", 260 | " validation_data=validation_data,\n", 261 | " options=options\n", 262 | ")" 263 | ] 264 | }, 265 | { 266 | "cell_type": "code", 267 | "execution_count": null, 268 | "metadata": { 269 | "colab": { 270 | "base_uri": "https://localhost:8080/" 271 | }, 272 | "id": "TrmP-4HXHdBm", 273 | "outputId": "c1ac4341-99b4-4c53-964e-d12b3ab29359" 274 | }, 275 | "outputs": [ 276 | { 277 | "name": "stdout", 278 | "output_type": "stream", 279 | "text": [ 280 | "186/186 [==============================] - 4s 4ms/step - loss: 0.3927 - categorical_accuracy: 0.8333\n", 281 | "Test loss:0.3927353620529175, Test accuracy:0.8333333134651184\n" 282 | ] 283 | } 284 | ], 285 | "source": [ 286 | "loss, acc = model.evaluate(test_data, batch_size=1)\n", 287 | "print(f\"Test loss:{loss}, Test accuracy:{acc}\")" 288 | ] 289 | }, 290 | { 291 | "cell_type": "code", 292 | "execution_count": null, 293 | "metadata": { 294 | "colab": { 295 | "base_uri": "https://localhost:8080/" 296 | }, 297 | "id": "Gbolt9PZH43d", 298 | "outputId": "7ce61174-bbd1-4d52-c8cb-e6abdb563b92" 299 | }, 300 | "outputs": [ 301 | { 302 | "name": "stdout", 303 | "output_type": "stream", 304 | "text": [ 305 | "Downloading https://storage.googleapis.com/mediapipe-assets/gesture_embedder.tflite to /tmp/model_maker/gesture_recognizer/gesture_embedder.tflite\n", 306 | "Downloading https://storage.googleapis.com/mediapipe-assets/canned_gesture_classifier.tflite to /tmp/model_maker/gesture_recognizer/canned_gesture_classifier.tflite\n", 307 | "best_model_weights.data-00000-of-00001\tepoch_models\t\t metadata.json\n", 308 | "best_model_weights.index\t\tgesture_recognizer.task\n", 309 | "checkpoint\t\t\t\tlogs\n" 310 | ] 311 | } 312 | ], 313 | "source": [ 314 | "model.export_model()\n", 315 | "!ls exported_model" 316 | ] 317 | }, 318 | { 319 | "cell_type": "code", 320 | "execution_count": null, 321 | "metadata": { 322 | "colab": { 323 | "base_uri": "https://localhost:8080/" 324 | }, 325 | "id": "GGtmcbUWH71M", 326 | "outputId": "2d41508a-32e5-45d8-f543-5992fbca3655" 327 | }, 328 | "outputs": [ 329 | { 330 | "data": { 331 | "application/javascript": "\n async function download(id, filename, size) {\n if (!google.colab.kernel.accessAllowed) {\n return;\n }\n const div = document.createElement('div');\n const label = document.createElement('label');\n label.textContent = `Downloading \"${filename}\": `;\n div.appendChild(label);\n const progress = document.createElement('progress');\n progress.max = size;\n div.appendChild(progress);\n document.body.appendChild(div);\n\n const buffers = [];\n let downloaded = 0;\n\n const channel = await google.colab.kernel.comms.open(id);\n // Send a message to notify the kernel that we're ready.\n channel.send({})\n\n for await (const message of channel.messages) {\n // Send a message to notify the kernel that we're ready.\n channel.send({})\n if (message.buffers) {\n for (const buffer of message.buffers) {\n buffers.push(buffer);\n downloaded += buffer.byteLength;\n progress.value = downloaded;\n }\n }\n }\n const blob = new Blob(buffers, {type: 'application/binary'});\n const a = document.createElement('a');\n a.href = window.URL.createObjectURL(blob);\n a.download = filename;\n div.appendChild(a);\n a.click();\n div.remove();\n }\n ", 332 | "text/plain": [ 333 | "" 334 | ] 335 | }, 336 | "metadata": {}, 337 | "output_type": "display_data" 338 | }, 339 | { 340 | "data": { 341 | "application/javascript": "download(\"download_ddbb167b-1c22-46bc-8f79-fb58d891d9d8\", \"gesture_recognizer.task\", 8480581)", 342 | "text/plain": [ 343 | "" 344 | ] 345 | }, 346 | "metadata": {}, 347 | "output_type": "display_data" 348 | } 349 | ], 350 | "source": [ 351 | "files.download('exported_model/gesture_recognizer.task')" 352 | ] 353 | } 354 | ], 355 | "metadata": { 356 | "colab": { 357 | "provenance": [] 358 | }, 359 | "kernelspec": { 360 | "display_name": "Python 3.9.7 64-bit", 361 | "language": "python", 362 | "name": "python3" 363 | }, 364 | "language_info": { 365 | "name": "python", 366 | "version": "3.9.7" 367 | }, 368 | "vscode": { 369 | "interpreter": { 370 | "hash": "8930996e9b4848f840558511426186bf858d74b70f37fea4e5b9b386643acfbc" 371 | } 372 | } 373 | }, 374 | "nbformat": 4, 375 | "nbformat_minor": 0 376 | } 377 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # **Sign Language Recognition for Deaf and Dumb** 2 | 3 | ![Banner](./public/banner.png) 4 | 5 | - Our sign language recognition project involved creating a custom dataset, preprocessing images, training a model, integrating with React, and hosting with Firebase. 6 | 7 | - The result is a real-time sign language recognition application that recognizes a variety of sign language gestures. 8 | 9 | - Our Model is trained for 26 alphabets and 16 words of ASL and which are commonly used in general communication. 10 | 11 | ## Features 12 | 13 | - Real-Time Recognition 14 | 15 | - Easy-to-Use Interface 16 | 17 | - Adaptive Learning 18 | 19 | - High Accuracy 20 | 21 | - Real Time User Progress Data 22 | 23 | ## Tech Stack 24 | 25 | **Front-end:** 26 | 27 | - React 28 | - Redux 29 | 30 | **Back-end:** 31 | 32 | - Firebase (for hosting, authentication, and storage) 33 | 34 | **Machine Learning Framework:** 35 | 36 | - MediaPipe 37 | 38 | **NPM Packages:** 39 | 40 | - @mediapipe/drawing_utils 41 | - @mediapipe/hands 42 | - @mediapipe/tasks-vision 43 | - @redux-devtools/extension 44 | - chart.js 45 | - firebase 46 | - js-cookie 47 | - react-chartjs-2 48 | - react-icons 49 | - react-redux 50 | - react-router-dom 51 | - react-toastify 52 | - react-webcam 53 | - redux 54 | - redux-thunk 55 | - uuid 56 | 57 | ## Team Members 58 | 59 | - So this project is a group project done in collaboration with the members mentioned below. 60 | 61 | | Name | Email-id | 62 | | :-------------- | :---------------------------- | 63 | | Shubham More | `shubhamp1251@gmail.com` | 64 | | Sameer Metkar | `sameermetkar@gmail.com` | 65 | | Omkar Mandavkar | `omkarmandavkar000@gmail.com` | 66 | | Durgesh Kolhe | `dkolhe985@gmail.com` | 67 | 68 | ## Project Details 69 | 70 | - **Our Project Report:** [Report.pdf](https://drive.google.com/file/d/1A_gBXKfEjNwHZbtnanu82jgLrbtblQ38/view?usp=sharing) 71 | 72 | - **Published Paper:** [Paper.pdf](https://drive.google.com/file/d/1KEP_kAessP08Zo8zHsG9IqlP4Yuj9SO0/view?usp=sharing) 73 | 74 | - **Dataset Link:** [Sign_Dataset](https://drive.google.com/drive/folders/1LUUknqqRNHAmIZYrcgo-4n2HrM37uFa3?usp=share_link) 75 | 76 | - **Gesture Recogition Documentation:** [Mediapipe](https://developers.google.com/mediapipe/solutions/vision/gesture_recognizer) 77 | 78 | - **The Model Training File is located in root folder** 79 | 80 | 81 | ## Steps to set up the project 82 | 83 | - **Check this document for project setup:** [SetUpDoc.docx](https://docs.google.com/document/d/1siwZjc0LJQgKTn__vtzs8tMfr9OElrsThmqmRJc9dHE/edit?usp=sharing) 84 | 85 | 86 | ## Authors 87 | 88 | - [@shubham-more](https://github.com/shubhammore1251/) 89 | - [@sameer-metkar](https://github.com/sameermetkar/) 90 | - [@omkar-mandavkar](https://github.com/omkarmandavkar/) 91 | - [@durgesh-kolhe](https://github.com/Durgesh240) 92 | 93 | ## Acknowledgements 94 | 95 | - [React](https://react.dev/) 96 | - [mediapipe](https://developers.google.com/mediapipe) 97 | - [Firebase](https://firebase.google.com/) 98 | - [NPM](https://www.npmjs.com/) 99 | 100 | ## Screenshots 101 | 102 | ![Hello Image](./public/screenshots/Hello.jpg) 103 | 104 | ![Meet Image](./public/screenshots/Meet.jpg) 105 | 106 | ![Deaf Image](./public/screenshots/Deaf.jpg) 107 | 108 | ![Bye Image](./public/screenshots/Bye.jpg) 109 | 110 | ![D Image](./public/screenshots/D.jpg) 111 | 112 | ![Dashboard Image](./public/screenshots/dasboard.jpeg) 113 | 114 | ## Support 115 | 116 | For support, contact 117 | 118 | - email: shubhamp1251@gmail.com 119 | - LinkedIn: [Shubham More](https://www.linkedin.com/in/shubham-more1251/) 120 | -------------------------------------------------------------------------------- /Trained Model/sign_language_recognizer_25-04-2023.task: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shubhammore1251/Sign-Language-Recognition-Using-Mediapipe-and-React/d8c94dc009c3ea529082aa65a3933124017cc7be/Trained Model/sign_language_recognizer_25-04-2023.task -------------------------------------------------------------------------------- /firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "hosting": { 3 | "public": "build", 4 | "ignore": [ 5 | "firebase.json", 6 | "**/.*", 7 | "**/node_modules/**" 8 | ], 9 | "rewrites": [ 10 | { 11 | "source": "**", 12 | "destination": "/index.html" 13 | } 14 | ] 15 | }, 16 | "storage": { 17 | "rules": "storage.rules" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sign-lang-recog", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@mediapipe/drawing_utils": "^0.3.1675466124", 7 | "@mediapipe/hands": "^0.4.1675469240", 8 | "@mediapipe/tasks-vision": "^0.1.0-alpha-8", 9 | "@redux-devtools/extension": "^3.2.5", 10 | "@testing-library/jest-dom": "^5.16.5", 11 | "@testing-library/react": "^13.4.0", 12 | "@testing-library/user-event": "^13.5.0", 13 | "chart.js": "^4.2.1", 14 | "firebase": "^9.19.1", 15 | "js-cookie": "^3.0.1", 16 | "react": "^18.2.0", 17 | "react-chartjs-2": "^5.2.0", 18 | "react-dom": "^18.2.0", 19 | "react-icons": "^4.8.0", 20 | "react-redux": "^8.0.5", 21 | "react-router-dom": "^6.10.0", 22 | "react-scripts": "5.0.1", 23 | "react-toastify": "^9.1.2", 24 | "react-webcam": "^7.0.1", 25 | "redux": "^4.2.1", 26 | "redux-thunk": "^2.4.2", 27 | "uuid": "^9.0.0", 28 | "web-vitals": "^2.1.4" 29 | }, 30 | "scripts": { 31 | "start": "react-scripts start", 32 | "build": "react-scripts build", 33 | "test": "react-scripts test", 34 | "eject": "react-scripts eject" 35 | }, 36 | "eslintConfig": { 37 | "extends": [ 38 | "react-app", 39 | "react-app/jest" 40 | ] 41 | }, 42 | "browserslist": { 43 | "production": [ 44 | ">0.2%", 45 | "not dead", 46 | "not op_mini all" 47 | ], 48 | "development": [ 49 | "last 1 chrome version", 50 | "last 1 firefox version", 51 | "last 1 safari version" 52 | ] 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /public/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shubhammore1251/Sign-Language-Recognition-Using-Mediapipe-and-React/d8c94dc009c3ea529082aa65a3933124017cc7be/public/banner.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shubhammore1251/Sign-Language-Recognition-Using-Mediapipe-and-React/d8c94dc009c3ea529082aa65a3933124017cc7be/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | 16 | Sign Language Recognition 17 | 18 | 19 | 20 |
21 | 22 | 23 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shubhammore1251/Sign-Language-Recognition-Using-Mediapipe-and-React/d8c94dc009c3ea529082aa65a3933124017cc7be/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shubhammore1251/Sign-Language-Recognition-Using-Mediapipe-and-React/d8c94dc009c3ea529082aa65a3933124017cc7be/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Sign Language Recognition AI", 3 | "name": "Sign Language Recognition AI App", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/offline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | No Internet / Lost Connection 8 | 9 | 10 |
11 |
12 |

😔 You are offline please connect to Network !

13 |
14 |
15 | 16 | -------------------------------------------------------------------------------- /public/screenshots/Bye.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shubhammore1251/Sign-Language-Recognition-Using-Mediapipe-and-React/d8c94dc009c3ea529082aa65a3933124017cc7be/public/screenshots/Bye.jpg -------------------------------------------------------------------------------- /public/screenshots/D.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shubhammore1251/Sign-Language-Recognition-Using-Mediapipe-and-React/d8c94dc009c3ea529082aa65a3933124017cc7be/public/screenshots/D.jpg -------------------------------------------------------------------------------- /public/screenshots/Deaf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shubhammore1251/Sign-Language-Recognition-Using-Mediapipe-and-React/d8c94dc009c3ea529082aa65a3933124017cc7be/public/screenshots/Deaf.jpg -------------------------------------------------------------------------------- /public/screenshots/Hello.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shubhammore1251/Sign-Language-Recognition-Using-Mediapipe-and-React/d8c94dc009c3ea529082aa65a3933124017cc7be/public/screenshots/Hello.jpg -------------------------------------------------------------------------------- /public/screenshots/Meet.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shubhammore1251/Sign-Language-Recognition-Using-Mediapipe-and-React/d8c94dc009c3ea529082aa65a3933124017cc7be/public/screenshots/Meet.jpg -------------------------------------------------------------------------------- /public/screenshots/dasboard.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shubhammore1251/Sign-Language-Recognition-Using-Mediapipe-and-React/d8c94dc009c3ea529082aa65a3933124017cc7be/public/screenshots/dasboard.jpeg -------------------------------------------------------------------------------- /public/serviceWorker.js: -------------------------------------------------------------------------------- 1 | //STORAGE OF BROWSER 2 | const CACHE_NAME = "version-2"; 3 | const urlsToCache = ["index.html", "offline.html"]; 4 | const self = this; 5 | 6 | //installation 7 | self.addEventListener("install", (event) => { 8 | event.waitUntil( 9 | caches.open(CACHE_NAME).then((cache) => { 10 | console.log("Opened cache"); 11 | 12 | return cache.addAll(urlsToCache); 13 | }) 14 | ); 15 | }); 16 | 17 | // listen for request 18 | self.addEventListener("fetch", (event) => { 19 | event.respondWith( 20 | caches.match(event.request).then((res) => { 21 | return fetch(event.request).catch(() => caches.match("offline.html")); 22 | }) 23 | ); 24 | }); 25 | 26 | // actitivate the service worker 27 | self.addEventListener("activate", (event) => { 28 | const cacheWhitelist = []; 29 | cacheWhitelist.push(CACHE_NAME); 30 | event.waitUntil( 31 | caches.keys().then((cacheNames) => 32 | Promise.all( 33 | cacheNames.map((cacheName) => { 34 | if (!cacheWhitelist.includes(cacheName)) { 35 | return caches.delete(cacheName); 36 | } 37 | return undefined; 38 | }) 39 | ) 40 | ) 41 | ); 42 | }); 43 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | scroll-behavior: smooth; 6 | } 7 | 8 | body { 9 | background: var(--color-bg); 10 | } 11 | 12 | html::-webkit-scrollbar { 13 | width: 0.6vw; 14 | } 15 | 16 | html::-webkit-scrollbar-thumb { 17 | background-color: var(--color-subtext); 18 | border-radius: 70vw; 19 | } 20 | 21 | html::-webkit-scrollbar-track { 22 | height: 20px; 23 | } 24 | 25 | 26 | a { 27 | color: unset; 28 | text-decoration: none; 29 | } 30 | 31 | 32 | .gradient__bg { 33 | background: -moz-radial-gradient( 34 | circle at 3% 25%, 35 | rgb(2, 66, 134) 0%, 36 | rgba(4, 12, 24, 1) 25% 37 | ); 38 | 39 | /* safari 5.1+,chrome 10+ */ 40 | background: -webkit-radial-gradient( 41 | circle at 3% 25%, 42 | rgba(0, 40, 83, 1) 0%, 43 | rgba(4, 12, 24, 1) 25% 44 | ); 45 | 46 | /* opera 11.10+ */ 47 | background: -o-radial-gradient( 48 | circle at 3% 25%, 49 | rgba(0, 40, 83, 1) 0%, 50 | rgba(4, 12, 24, 1) 25% 51 | ); 52 | 53 | /* ie 10+ */ 54 | background: -ms-radial-gradient( 55 | circle at 3% 25%, 56 | rgba(0, 40, 83, 1) 0%, 57 | rgba(4, 12, 24, 1) 25% 58 | ); 59 | 60 | /* global 92%+ browsers support */ 61 | background: radial-gradient( 62 | circle at 3% 25%, 63 | rgba(0, 40, 83, 1) 0%, 64 | rgba(4, 12, 24, 1) 25% 65 | ); 66 | } 67 | 68 | .gradient__text { 69 | background: var(--gradient-text); 70 | background-clip: text; 71 | -webkit-background-clip: text; 72 | -webkit-text-fill-color: transparent; 73 | } 74 | 75 | .section__padding { 76 | padding: 4rem 6rem; 77 | } 78 | 79 | .section__margin { 80 | margin: 4rem 6rem; 81 | } 82 | 83 | .scale-up-center { 84 | -webkit-animation: scale-up-center 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) 85 | both; 86 | animation: scale-up-center 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both; 87 | } 88 | 89 | @-webkit-keyframes scale-up-center { 90 | 0% { 91 | -webkit-transform: scale(0.5); 92 | transform: scale(0.5); 93 | } 94 | 100% { 95 | -webkit-transform: scale(1); 96 | transform: scale(1); 97 | } 98 | } 99 | 100 | @keyframes scale-up-center { 101 | 0% { 102 | -webkit-transform: scale(0.5); 103 | transform: scale(0.5); 104 | } 105 | 100% { 106 | -webkit-transform: scale(1); 107 | transform: scale(1); 108 | } 109 | } 110 | 111 | 112 | 113 | @media screen and (max-width: 700px) { 114 | .section__padding { 115 | padding: 4rem; 116 | } 117 | 118 | .section__margin { 119 | margin: 4rem; 120 | } 121 | } 122 | 123 | @media screen and (max-width: 550px) { 124 | .section__padding { 125 | padding: 4rem 2rem; 126 | } 127 | 128 | .section__margin { 129 | margin: 4rem 2rem; 130 | } 131 | } 132 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { Route, Routes } from "react-router-dom"; 2 | import "./App.css"; 3 | import { 4 | Navbar, 5 | Footer, 6 | Home, 7 | Detect, 8 | NotFound, 9 | Dashboard, 10 | } from "./components"; 11 | import { ToastContainer, toast } from "react-toastify"; 12 | import "react-toastify/dist/ReactToastify.css"; 13 | 14 | const notifyMsg = (type, msg) => { 15 | if (type === "success") { 16 | const notify = () => toast.success(msg); 17 | notify(); 18 | } else { 19 | const notify = () => toast.error(msg); 20 | notify(); 21 | } 22 | }; 23 | 24 | const Layout = ({ children }) => { 25 | return ( 26 | <> 27 | 28 | {children} 29 |