Project Info
Inspiration
Me and Collin share a passion for dining out, but we're also committed to maintaining healthy, active lifestyles. We realized that there was a gap in the market for a tool that would allow individuals like us to make informed decisions about their food choices seamlessly. This realization was the spark that ignited our journey to create this project.
What it does
By simply snapping a photo of your meal, the app utilizes advanced AI to identify the food items and instantly provides a detailed nutritional breakdown. Built with a cloud-based backend, 'Calfax' ensures fast, accurate, and seamless access to the nutritional information you need, making informed dining choices easier than ever. How We Built It We employed NextJS for the frontend and fullstack development. For the backend, we utilized Convex, leveraging their backend-as-a-service software solution. To access hosted open-source multimodal models, we integrated with the Replicate API. Furthermore, we collaborated with together.ai's API to finetune the LLaMa model. This ensured that our application provided consistent and accurate outputs regarding nutritional values.
Challenges we ran into
Every project comes with its set of hurdles, and ours was no exception. Grappling with Convex was a novel experience. We had to familiarize ourselves with various tools like mutations, actions, stores, and more. Understanding the concept of backend-as-a-service was a challenge in itself. Extracting the food contents from an image was another significant hurdle. We experimented with various methods of extracting data from images before landing on one that perfectly suited our needs. Another major challenge was sourcing a reliable dataset for our nutritional facts. Before we stumbled upon the ideal dataset, we explored the possibility of requesting popular food databases.
Accomplishments we're proud of
Successfully integrating multiple AI models and backend services was a significant milestone for us. We managed to combine the Replicate API and together.ai's API, which was a challenging yet rewarding experience. The fact that 'Calfax' can identify food items from images and provide a basic nutritional breakdown is an accomplishment we're genuinely proud of, given the technical challenges we faced.
What we learned
Throughout the development of 'Calfax', we gained hands-on experience in finetuning AI models and working with cloud-based backends. We learned the nuances of multimodal models, especially in the context of image data extraction and conversion. The introduction to Convex's backend-as-a-service was a new learning curve, teaching us about modern backend solutions. The process of sourcing and integrating a dataset for nutritional facts also provided insights into the importance of data in such applications.
What's next
We're keen on refining 'Calfax' based on user feedback and real-world usage. Potential future steps include exploring collaborations with local eateries to integrate specific menu items, adding features to cater to specific dietary needs, and possibly integrating with other health-focused platforms. Our primary goal is to ensure 'Calfax' serves its users effectively and becomes a reliable tool for nutritional insights.
This is a Next.js project bootstrapped with create-next-app.
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
Analysis
View
Metric
- 14
- 9
Figures cover GitHub contributors during the hackathon window. A co-authored commit counts in full for each author, so per-member totals add up to more than the whole-team figures.
Technology
- CSSIn code
- JavaScriptIn code
- Next.jsIn code
- ReactIn code
- TypeScriptIn code
5 of 5 appear in the indexed code.
AI coding agents
No AI coding agent signals were found in this repository.
Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.
Codebase size
Source size
31 KB
Source files
24
Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.
Repository
rasooly-dev/calhacks-2023
40 files · 6.8 MB · @ 5736bf1
Structure
Interface
11 files · 28%Screens, components and styles rendered to the user.
Application logic
14 files · 35%Domain rules, services and shared utilities.
Supporting
Layers are inferred from where files sit in the tree, not from reading the code. A project that names its directories unconventionally will read oddly here — open the file browser to check anything the diagram implies.
Languages
- TypeScript65%
- JavaScript13%
- Markdown12%
- CSS10%
Share of indexed source by file size. Binary and vendored files are excluded.
Dependencies
package.json
npm · 11- axios
- convex
- multer
- next
- react
- react-dom
- replicate
- +4 more
Declared in the repository’s manifests at the indexed commit. A declared package is not proof it is used, and runtime dependencies are listed first.
This project’s features have not been analysed yet.
Export this project's context (description, README, evidence, key source files) to chat with an AI agent elsewhere.