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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk0NzM5MjgsIm5iZiI6MTcxOTQ3MzYyOCwicGF0aCI6Ii83MjY4NzU4NS8yNDk0NjAxMjQtYWZhYTkwMGYtMGZmZC00ODU1LThhZWItM2ZjMDMzYjg3OWFlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjI3VDA3MzM0OFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTdlNzVhYzMyYTRjNjJmNTBjZWZhMzI5NmJmNmJlZjg3OGM0NDI3ODVlNDNiZDZhYjU4YzNiMDhhNjRmZjJhYzImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0._r1ykA08jxY3bZ86SUrv7KU20XZzjvVgas46zD5_P7A)
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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk0NzM5MjgsIm5iZiI6MTcxOTQ3MzYyOCwicGF0aCI6Ii83MjY4NzU4NS8yNDk0NjQwOTItNGMyYjc1ZDUtNTdkZi00ZjYwLWJjMTEtYTA0ZDgzZDJmZTE1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjI3VDA3MzM0OFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPThkMTgwZTRmYjhiZWFlOTQ5M2M3NGM4YmIzMGI2YWY3ZmE4ZDgxYzUyMmExMGZiMmFkZmVmMjVmOWMzYWM1YzYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Y6QYztgoYT7h5_PVZURkMJ19KzJhTKAB3amUsqt9qLM)
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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk0NzM5MjgsIm5iZiI6MTcxOTQ3MzYyOCwicGF0aCI6Ii83MjY4NzU4NS8yNDk0NjEzODYtZDRkOGI0MTEtY2M3Mi00MzcxLWJjZWQtNTVmZmJmMjM0M2M1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjI3VDA3MzM0OFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWVkOGI5NDYyNGMwYmEzYTA0NTdiOWU0MmIxNjcwNDE5ZjJlMmM4ZmMyYTZiOGUyMDkwNTU4N2MxZmMxZTA4NjQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.6ZQ1ylGZOEbUYswEXSsmaDmDKVZp7hCWTxf1vLTI_R8)
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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk0NzM5MjgsIm5iZiI6MTcxOTQ3MzYyOCwicGF0aCI6Ii83MjY4NzU4NS8yNDk0NjI0MzEtMTA2OWYyZGUtODEwYi00YjJjLWJhZWEtMTBmZmUzYmFmYmE5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjI3VDA3MzM0OFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWJiZWIyMDJjMjAzZTNjY2Y0OTBjMzRmMTY5YTAzNjVjY2NkNmFlMDk2YTRkMjUxNjBhNGM5MzM4NzQ4YWQyNjImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.WqF_YYtyeYKKxza86Vd8HfjRlcZoRCoTtAZU4p9hxMQ)
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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk0NzM5MjgsIm5iZiI6MTcxOTQ3MzYyOCwicGF0aCI6Ii83MjY4NzU4NS8yNDk0NjAzODMtMWEyZmU4OTEtMzYzZi00NGIzLWJjNzktNzk3MTU5YmQ3MjIwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjI3VDA3MzM0OFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTkwNmVhNmQxOWRiMDAxYTFlNDI0NmE0MDJlNzQzNzRjOWIzNGZlODc0M2RiZTExYTk1MmVkOGFhNzMwYWY1Y2UmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.NlN3Yffj9-Z4etwqpexeivaqH33Ma3mDYvOeBAy2OoE)
- 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 |