How much do you look like a celebrity?

There was a few issues with the web scraping not working and then the adding your face. The api was returning HTML images, not JSON which really messed with the program. Also the worker kept timing out so i moved it to a backround thread so that the request returns immediately. There were some issues with the api key being blocked due to too many requests, so i decreased the amount of tries and increased the sleep delays (for faster performance as it should be fine with two calls in a shorter time). Another issue was that the images kep getting rejected as the program kept thinking there were no faces when there was, so the detection threshold got lowered from 0.6-0.5, it should still be detecting faces but no longer with such strict requirements. Also i increased the images from 5 - 10 for duck duck go search to have a better chance of finding a proper image.

I finished hosting the project using a railway free hosting (this took AGESS). Then i decided to add animations for the transition because its taking longer than expected for the program to take the photo and analyse it on railway . I was first having lots of trouble getting the photos uploaded properly to the website, i thought that i couldn’t just upload the images so every time the website restarted it had to re scrape the web for photos and the api key kept getting rate limited but i just uploaded all the photos to a folder in the respiratory and the program encoded all of them into the data at the start of when i build the website. Also i added a feature in which you can better see your data, so you can see how similar each of your individual features are. Also i ran out of railway free hosting credits so i had to make a new GitHub account and host it from there.

Ive almost finished the whole project, im just working on properly hosting it now and i fixed the issue when the script on the website dosent properly load, the issue now is i cannot get it to host on any website. Initially i tried to host it with github pages, but due to the fact that i dont just want a static page, i want it to have functionality i cannot just host it there. If i were to use my original streamilt code i could just host it on streamlit cloud, so i tried to make a version of the UI with streamilt but not only did i run into the previous problem of it being very slow and not really working it also looks no where near as good in terms of the UI. Currently ive tried using Render, Fly.io, Koyeb and Cloudfare, but im running into a lot of trouble. (i dont think its the platforms fault im just not very good at hosting things). At the moment i am using huggingface spaces as people online have said its the easiest way to do this, i am running into a job timeout error, i think its because its trying to install way to many packages but im not too sure. The screenshot attatched is my current progress with huggingface spaces, i think im very close and i want to try to ship this project by the end of this week.

Using figma make, i converted my rough sketches and plans into a template for the website, then i adapted that into html and css for my website. I used a python flask backend to add functionality, whilst the frontend was made with html and css.
At the moment the main part of the program works, when you press the take photo button it will successfully return your celebrity match, however at the moment im not too sure with the ability to add new celebrities on the website using the web scraping program i made previously. Additionally, i will work on implementing the share button to work by either sending it to slack or to other social media like whatsapp.

Im quite happy at the moment with the aesthetics of my program, however i will be more than happy to get feedback, i went with a retro movie style but i am considering making a version when you can just match with fellow hack club members.

Instead of using streamlit to create the website, i decided to change over into using HTML, the reasoning for this was because with streamlit not only was i heavily limited in terms of the UI design, also the camera feed was very glitchy with high latency and low resolution. I decided to use HTML instead, creating a basic template for what the website should look like after drawing out a rough design on paper. However i was having trouble making it look good and in the end, i decided that it woiuld be easier to recreate the website in figma (with the UI that i designed on paper) and add in the functionality from there.

Ive been working on turning my program into a website, using streamlit i made a basic website template. ‘st.camera_input’ (a built in streamlit function), rather than complex webrtc code to create a simple button that takes a photo. Then the program processes the image and returns the celebrity face that looks the most like you. The reason i didn’t opt for a live camera feed was because i was having troubles with the feed glitching and not working properly on the website, i will try to fix this for the next devlog! :)

I decided that i wanted to increase the amount of celebrities listed, but im lazy. ;(
I built a web scraping program that uses a variety of free apis, all you have to do is give it a list of celebrities and it will find the photos and leave them in the folder. This process was very fustrating, originally, i planned on using duck duck go api, however i kept getting ratelimited and i fear my ip adress is now blocked. I moved towards using wikipedia api, however not all the people had wikipedia pictures that were easy to find (they need to have a thumbnail property image designated). to improve with the quality of wikipedia, the program can now ask for search suggestions, this means if a direct match fails, the program can ask for the next best match.
FInally, to make the scraper ensure that it works, i added functionality for TMDB, the movie database, it is a professional database for actors and singers, is significantly faster than scraping and almost never blocks you.

The program first goes through TMDB, then wikipedia, finally duck duck go.

Also, for faster opening times, the program will do through the .pickle file, detect if there are any new photos int here, and automatically decode it into the .pickle file before startup. This process only needs to be done once per photo so it makes the whole process a lot faster.

Uhhhh. so basically i forgot to post a devlog previously and i just worked on this new bit without posting my first devlog so this times wrong. I spent around 5 hours on this bit and the rest was on the first devlog.

Using the face-recognition library - built on dilb, the program finds 128 unique points on a face, making a ‘face print’, which is a signature unique to each person. Then, the averaging logic takes multiple photos of celebrities, takes the ‘face prints’ of all of those and calculates the average, for better accuracy. (this was implemented later on).
One of the issues i faced initially was that it took a long time to calculate the math for these faces initially, to fix this the first time the program encounters new files in the library, it saves the finished math into a .pickle file, so next time you open up the app it ‘reads’ the math, instead of re-calculating each time.
Then, for the real time comparison (the cool visuals), it turns your face into a ‘face print’, then using media pipe to map points on your face. It calculates the Euclidean distance between your face and all the celebrities in my database, using media pipes pipe mesh, it turns redder or greener according to how similar (or not) you are to the celebrity.