Backend for Supplyit! (Your AI-Powered Supply Cabinet for School Supply Management!)
Bigggggg idea ☁️
Hey... YOU there. Have you ever wandering into the forbidden cabinet of yours and saw the MOUNTAIN HEAP of RANDOMLY PLACED school supplies???? (ik some people will answer no). I have. This is why I wanted something to HELP ME sort + keep track of stuff with the TAP of a button... quite literarly.
⭐Basically: This app allows people to index their supplies in the real word with the tap of a button! (instead of counting manually...)⭐
What I wanted to achieve or was prototyping was a system where many different clients would connect to one server (like in a school setting. Think high school).
These clients would respectively contain different supplies and have their own hardware + software (like a barcode scanner + touch screen + raspberry pi) and manage their own borrows and returns.
The admin side would basically have the ability to monitor all the logs, supplies, and have the ability to montior the client's location (which is why in the app there is a gps feature)
Features
Entire app
- Firebase integration! ✅
- FCM Messaging (Basically meaning push notifications work)✅
- Local notifications✅
- Camera + Barcode + Summarizing (yes, I use AI to categorize items) = AI integration ✅
- IT HAS DARKKK MODEEEE✅
- don't forget light mode too✅
- it also has a sick logo (trust)✅
- Portrait AND landscape mode for the app (except for camera part 🥲)✅
Overview
| Admin side | Client Side |
|---|---|
| Monitor GPS location + be able to get overview in gps mode (so you won't loose any of your supply clients) | List of supplies in the client |
| Overview of Storage Clients | Ability to add supplies to the client through camera or barcode on just a device! |
| Color indicators | Filtering ability (invovles AI... (mystically)woooooo) |
| Search for supplies based on categories | Shopping list generation + copy to clip board |
| Search results autodirect to map of gps locations | Borrowing and returning items (emphasis on the UI ⭐) |
| Explore to find out more! | Notifications delivered when supplies are running low |
| Cute icons that list the supplies based on category | |
| Explore to find out more! |
Small side note: many of the implemented scripts are not hard coded so to boast a little more it can support as many supplies and supply clients as firebase can hold 😉
Backend
- One yolov8 model finetuned with custom dataset images (dataset has ~2k images)
- One chatgpt 4.0 model to do image inferencing WITH the finetuned model (its actually slightly better lol but much slower than the
yolo) - One chatgpt 3.5 model to do category inferencing based on product names (customize your own categories)
- Flask server (highly customizable!)
Future features
- Integrate hardware. This may include theft detection (basically pass a current through the supply client's cabinet's locks and see when it disconnects) + card id systems or facial recognition systems. This also includes a barcode scanner and raspberry pi (im broke ☹️)
- More sophisticated Borrow/Return system which includes the end user
- Actually buy a good barcode-to-item api (because the api im using has a kinda-bad-+-lacking database)
Backend Setup
All setup is done with the main directory (directory which contains main.ipynb) as root.
Initial
git clone https://github.com/hackathonprojects4eded/reccesshacks4-backend.git
cd reccesshacks4-backend
Python Enviornment
python -m venv .venv
# WINDOWS: .venv\scripts\activate
# MAC: . .venv/bin/activate ( not verified)
.venv\scripts\activate
pip install -r requirements.txt
Server Enviornment
- Set up a firebase project
- Go to settings and download a firebase sdk json file
- Move the firebase sdk file to the main directory, rename it to
firebasesdk.json - Open the folder
server - Create a file
.env - In
.envputOPENAI_API_KEY=COPYPASTEYOUROPENAIKEYHERE - Create a folder named
images - Exit the folder
server, back to main directory.
Running
cd server
python app.py
Customization
Note: you can change the port exposed - in this case I'm running on my local IP/network so my phone can communicate w/ the windows pc
If you do, remember to change the url in constants.dart in the frontend`
Supplyit! Frontend
For the project overview + features please find our backend folder for reference
This tutorial is for ios only and commands are for unix system (I'm writing this from a macbook pro 🤣)
Setup
Folder
git clone https://github.com/hackathonprojects4eded/reccesshacks4-frontend.git
cd reccesshacks4-frontend
Coding Enviornment
- Preferrably you should have vscode flutter extension downloaded and you should be sort of familiar with the flutter development process
- Once you open the folder, flutter should automatically detect your packages and run
flutter pub get
Set up Firebase
- Add
Realtime databaseto your firebase project in your console. - Also add
Authentication - Email&passwordto your firebase project via the console. - After you have your firebase project (check backend instructions for more details), please follow this tutorial to learn how to configure your flutter project with firebase
Note: You should see a file named
firebase_options.dartafter you ranfireflutter configure(you might also see afirebase.jsonI forgot what step that appeared)
Set up FCM (Push notifications)
This step is a bit tricky since you actually need to have an apple developer account:
You would need to follow these instructions to upload a .p12 file/certificate in the settings-cloud messaging tab:
Upload your APNs authentication key
Before you use FCM, upload your APNs certificate to Firebase. If you don't already have an APNs certificate, create one in the Apple Developer Member Center.
Inside your project in the Firebase console, select the gear icon, select Project Settings, and then select the Cloud Messaging tab. Select the Upload Certificate button for your development certificate, your production certificate, or both. At least one is required. For each certificate, select the .p12 file, and provide the password, if any. Make sure the bundle ID for this certificate matches the bundle ID of your app. Select Save.
Other:
None! (Hopefully... please contact me if there are other instructions I missed)
Running
You can run this on your own iphone by running flutter run --profile. This will make the app presistent. To debug, run flutter run in the terminal.
Customization:
So I actually added a noise factor to mapscreen.dart when displaying all the locations because its a hackathon project and I didn't want to dox myself (If I did that would have been bad 🙁). To remove this, simply do this:
//before (lines 21, 22 of screens/mapscreen.dart)
final randomLatDis = Random().nextDouble() / 100.0;
final randomLongDis = Random().nextDouble() / 100.0;
//after
final randomLatDis = 0;
final randomLongDis = 0;
You can also customize the app name/constants and where you are connecting to the api by modifying contents in constants.dart.
Devpost Reflections
Challenges we ran into
- I had to reset my entire firebase (meaning re-configuring and basically redownloading all setup files) because I accidently deleted the entire google cloud project because I was messing around with google map's api 😞
Nulloperator issues (dart people will understand)- YolovX models not compatible with the library I am using from ultralytics.... so I had to retrain my models three SEPERATE times. The one in the github repository is the latest one!
- FCM for some reason extremely slow + inconsistent???? (I tested this and originally it works but for some reason its not now...)
- Integrating maps + map markers into the app (surprisingly difficult but sort of worked!)
Accomplishments
I'm afraid that my project does not have a lot to offer since I'm not really rushing when I'm writing this (in all my previous hackathons I had like 30 minutes to write and record something for the submission 💀). Basically, I'm surprsied that I managed to 'finish' my project goal with 6 hours to spare.
Built With
- chatgpt
- comptuer-vision
- flask
- flutter
- machine-learning
- openstreetmap
- python
- yolov8
Log in or sign up for Devpost to join the conversation.