Image-classification-App App.
Software/ Language | Version |
---|---|
HTML | 5 |
CSS | 3 |
JavaScript | ES6 |
Visual Studio Code | 1.52 |
Microsft Azure | 1.0.0 |
Microsoft Azure Static Web App | 1.0.0 |
Microsoft Azure Bot Services | 1.0.0 |
Microsoft Azure Language Studio | 1.0.0 |
Software | Tested with |
---|---|
Google Chrome Browser | 87.0.4280.141 |
Microsoft Chromium Edge | 87.0.4280.141 |
Mozilla Firefox Browser | 84.0.2 |
The following app helps to classify an image using Azure services and uses Microsoft Azure
made with JS & HTML5
.
![image](https://private-user-images.githubusercontent.com/72687585/249460124-afaa900f-0ffd-4855-8aeb-3fc033b879ae.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkwNDQyNTQsIm5iZiI6MTcxOTA0Mzk1NCwicGF0aCI6Ii83MjY4NzU4NS8yNDk0NjAxMjQtYWZhYTkwMGYtMGZmZC00ODU1LThhZWItM2ZjMDMzYjg3OWFlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjIyVDA4MTIzNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTI5MGNhYTRmMjg5YTAyZWJiMjA0ZGQ2OTQ5MjBhZGEwZWE0OGY5YTdkZmNkNjE5ZTFlYTUyMDNiMTM1MWJlODAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.0hKqDcW6e86zG9CtUvcDNEQsdDbFdvc4g2Y2DkuU1Ig)
Using the Azure Static Web App
service I have deployed my app frontend HTML CSS JS and assets files and folder
.
![image](https://private-user-images.githubusercontent.com/72687585/249464092-4c2b75d5-57df-4f60-bc11-a04d83d2fe15.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkwNDQyNTQsIm5iZiI6MTcxOTA0Mzk1NCwicGF0aCI6Ii83MjY4NzU4NS8yNDk0NjQwOTItNGMyYjc1ZDUtNTdkZi00ZjYwLWJjMTEtYTA0ZDgzZDJmZTE1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjIyVDA4MTIzNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTE4MTlmNGZmMTJhMTcxOTRlNTEwYmYzY2U5YmIwMGFiOTgyOWUxYmUwNDBmNmIzM2I5Njc1YThjOWI5YmY2NmQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.U4IlhD4t48M-wdta4bmC4SbKt1Kd8qaRCquFEYh_qXA)
Using Azure Bot Services
I have deployed the chatbot and Q&A maker services.
![image](https://private-user-images.githubusercontent.com/72687585/249461386-d4d8b411-cc72-4371-bced-55ffbf2343c5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkwNDQyNTQsIm5iZiI6MTcxOTA0Mzk1NCwicGF0aCI6Ii83MjY4NzU4NS8yNDk0NjEzODYtZDRkOGI0MTEtY2M3Mi00MzcxLWJjZWQtNTVmZmJmMjM0M2M1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjIyVDA4MTIzNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWU0Y2MwY2QxNjZlNTg0ZjkwOTBkMmI0M2U4MWVjNThmMTQ5YjZkY2FjYTM4NDkyN2I1ZmJhMTllNzYxZGUxZGYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ER0SG2nYRChRmm8-yaf-lVupelzxWW_VpmNliC76oPc)
Using Azure Language Studio I have prepared the questions and answer for a chatbot.
![image](https://private-user-images.githubusercontent.com/72687585/249462431-1069f2de-810b-4b2c-baea-10ffe3bafba9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkwNDQyNTQsIm5iZiI6MTcxOTA0Mzk1NCwicGF0aCI6Ii83MjY4NzU4NS8yNDk0NjI0MzEtMTA2OWYyZGUtODEwYi00YjJjLWJhZWEtMTBmZmUzYmFmYmE5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjIyVDA4MTIzNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTFhZTQzYjU2OTRjZDNhYzk1YzZlNTMxMzQ0ZTZjNGI1NWRjMWFiNDJiMTg4MTI5YWU0MWE3ZDYzYzEwMmFiNjcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.sY9oxIhmey_jJ3DatLt6t5D56z0l4NZKVZ0zV8PReHM)
I have trained my model to classify the images using' Azure Custom Vision'.
![image](https://private-user-images.githubusercontent.com/72687585/249460383-1a2fe891-363f-44b3-bc79-797159bd7220.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkwNDQyNTQsIm5iZiI6MTcxOTA0Mzk1NCwicGF0aCI6Ii83MjY4NzU4NS8yNDk0NjAzODMtMWEyZmU4OTEtMzYzZi00NGIzLWJjNzktNzk3MTU5YmQ3MjIwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjIyVDA4MTIzNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWYzNGJkNzkxN2M1ZWNiZDYwMGViMTQxMzU1MGZmYzIyZGNmMGQ4N2Q4ZTFmOTBmNjNmYjU3ODY0MTE0N2IwMjUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.xglu68bEseTJG3qL03vmWUjSapqMAzDAMx2SlkEsX7I)
- Clone this repository to your local machine.
git clone https://github.com/RishiPratap/Image-classification-App.git
First, run the development server:
Run index.HTML file in browser
🌐Open INDEX.HTML FILE with your browser to see the result.
https://drive.google.com/drive/folders/1v6YIfLpuMqief3x9gnCJR2uwNn8iXWHx?usp=drive_link
Rishi Pratap |