The website was built with the following languages:
- HTML
- CSS
- JavaScript
- ML5
I did not use any special frameworks for my website. The only technical part in this website is the implemented ML5 library. The mathematical calculations for percentage illustration of the results are done using JavaScript. Instead of, for example, React.js, which I could use to craft a cool UI, I just have the traditional CSS scripts inside. Also the animations like the image enlargement (if you hover with the mouse) or the result bar consists only of simple CSS commands.
The website is clearly arranged by separating the individual components into boxes (upload, results, gallery, documentation). At the beginning, the user reads through the description text. This explains what the user can do with the website. The description also describes "where" the user can upload an image. With the "Below" tip, the user will see the upload field. Right underneath the field, the user will see a question mark, giving him the opportunity to inquire more details about the field. There he will see which image formats can be uploaded. If the user does not upload anything at the beginning, the field below says "Please upload an image first to see the results". This information is important in case the user is wondering what the bars at the bottom mean. Once the user uploads an image, the image will be displayed in the upload field with the label. This helps the user to see which image they really uploaded. The bars will adjust by percentage and the matching label will appear above every bar. So the user can see which image was recognized with which probability. The user will be also warned with an alert box, if here uploads a wrong file for example like .zip, .mov.
The description text also explains that the user can use the images from the gallery on the right side. He only has to click on these images to get the results again.
Cat: https://www.pinterest.de/pin/362187995007885654/
Catfalse: https://www.freepik.com/premium-vector/cute-orange-cat-cartoon_12310515.htm
bike: https://www.ebay.de/itm/363549658780?hash=item54a53f8e9c:g:mJMAAOSwCtlhSJO3&var=632773955814
bikefalse: https://coolsten.de/dutchfiets-fahrrad-aus-recyceltem-kunststoff/
flower: https://www.thecolvinco.com/de/c/orange-blumen/
flowerfalse: https://www.floraprima.de/en/blumenversand/1_47715_51757_flower-bouquet-mit-liebe.html
help icon: https://www.flaticon.com/de/premium-icon/fragezeichen_4467515?term=fragezeichen&page=1&position=34&page=1&position=34&related_id=4467515&origin=search
robotgif: https://tenor.com/view/asistente-robot-saludar-hola-chat-gif-15026828
CSS: w3schools.com