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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTgxODQ4ODAsIm5iZiI6MTcxODE4NDU4MCwicGF0aCI6Ii83MjY4NzU4NS8yNDk0NjAxMjQtYWZhYTkwMGYtMGZmZC00ODU1LThhZWItM2ZjMDMzYjg3OWFlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjEyVDA5Mjk0MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWFiZDYwMWZiMGI0ZDJhNGMyZmQyZWZiYmVjM2YzMmY3ZmYxYzgzNmRlNmMzNmRkZWE1ZmZhY2QzYWFlOWNiZTYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.lcd7OsyrEjWWGTvILe196kJ8IzSo8qF2FpYMBUBgEJE)
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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTgxODQ4ODAsIm5iZiI6MTcxODE4NDU4MCwicGF0aCI6Ii83MjY4NzU4NS8yNDk0NjQwOTItNGMyYjc1ZDUtNTdkZi00ZjYwLWJjMTEtYTA0ZDgzZDJmZTE1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjEyVDA5Mjk0MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWJiYzUyNzA0ODE1YWUxMDdjMjNkZWQzOTViY2FkYzc1OTQyYmY4YmUzOTY3YWRlY2I5MTRkYTEyZTJiMmVkYTEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ZaQa8vHjQNctRXSme9uXtAEPubzPqjr8NGuhybBCAmM)
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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTgxODQ4ODAsIm5iZiI6MTcxODE4NDU4MCwicGF0aCI6Ii83MjY4NzU4NS8yNDk0NjEzODYtZDRkOGI0MTEtY2M3Mi00MzcxLWJjZWQtNTVmZmJmMjM0M2M1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjEyVDA5Mjk0MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWY1YTEwNWEyZDA4NWEyZTU4N2RjMTU3ZjdmZDBjZWNmZTE5MDM5ZjVlMWM3OGI0MzAxZGFhMzkwMWVhOGJmNDkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.6JhFWxLspOgP5myF-N93CEehYe0VgyFZtIOYd93bKHA)
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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTgxODQ4ODAsIm5iZiI6MTcxODE4NDU4MCwicGF0aCI6Ii83MjY4NzU4NS8yNDk0NjI0MzEtMTA2OWYyZGUtODEwYi00YjJjLWJhZWEtMTBmZmUzYmFmYmE5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjEyVDA5Mjk0MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTJjYjM0MmZlZTBiYjMyYWRkYmE2NjJjYzljNzAzY2I4ZDYwZTdhNDdiYjJhZWU5NzViNmJkNjdkMTJmMTlkZGMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.2_LQPtxzkrsvly1BNrBnS_joLQe3l0CqMGLpln1p7Fs)
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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTgxODQ4ODAsIm5iZiI6MTcxODE4NDU4MCwicGF0aCI6Ii83MjY4NzU4NS8yNDk0NjAzODMtMWEyZmU4OTEtMzYzZi00NGIzLWJjNzktNzk3MTU5YmQ3MjIwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjEyVDA5Mjk0MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWUwZTMwNTg2ODk5OTM5NmE5Y2YxM2Y0MjY5ZDYyYWRjODQ3YjZkM2RjZjI0NDc4NTk1NmYxZGY3Mjc5MWVjNjEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.kiV7jUXVkbc5NMZo7k4kJEUzEQAkmECuG_wFvgLdYho)
- 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 |