Project Info
Inspiration
Everyone's been there -- on the phone with a grandparent, trying for hours to help them sign up for that new service they need, figure out social media, scroll their camera roll, etc. It's not their fault -- they didn't grow up with this stuff like we did -- but it's still a serious challenge for both them and whoever's trying to help them. But what if that didn't need to be the case? The four of us all care deeply for the seniors in our lives, and we realized the potential for an easy yet surprisingly universal fix to internet usage woes: a browser plugin that converts forms and navigation into something as simple as having a conversation.
What it does
Fudu enables seniors and others with accessibility challenges the freedom to navigate forms on the internet through a more streamlined verbal interface. It takes advantage of state-of-the-art large language models to decipher spoken inputs into the exact fields needed for forms, and has been built with the utmost care to ensure that mistakes aren't made in the communication.
How we built it
To build Fudu, we developed a frontend with React and Next.js, calling the WebSpeech API for speech recognition and generation. The GPT-3.5 LLM is used to parse spoken inputs into the form fields.
Challenges we ran into
We struggled to narrow down the scope of our project after ambitious initial plans. We had hoped at first to build off of Terra API nutrition data and use fetch.ai agents to plan out further health tasks for seniors from the vocal interface. However, we ultimately realized these ideas were incoherent with our vision and decided to focus on our most important goal: making the internet more accessible for our loved ones.
Accomplishments we're proud of
And we are proud to say that we handily accomplished our goal! We believe the app has a great feel and is the starting point for a product that could be implemented on devices across the world. Some of our members also hadn’t hacked at an event like this before, so we were really proud of being able to put something together at all, especially something so eminently usable. We learned a lot and are really glad we came all this way to Stanford!
What we learned
Our frontend-focused teammates learned a great deal about UI design through React and Next.js, as they iteratively built a product which looked and felt as great as possible. But the lion’s share of our learning came from the AI in the backend. Besides the WebSpeech API and LLM ultimately in use, we explored many other sponsor possibilities such as fetch.ai agents, Terra API webhooks, Intel PredictionGuard models, and more. The vestiges of these explorations can be seen in our repository – we learned and experimented a lot, experiences which will stick with us long after this hackathon.
What's next
We feel that Fudu has a ton of potential to help the health and wellbeing of seniors across the world! More testing with real seniors must be done to ensure that it is ready for public use, and additional frontend work must be integrated to ensure that it actually “plugs in” to forms across the internet, but we’ve made great first steps here! We can’t wait to build Fudu out further and see where it goes.
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
- 4
- 2
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
- OpenAIIn code
- PythonIn code
- ReactIn code
- Tailwind CSSIn code
- TypeScriptIn code
8 of 8 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
72 KB
Source files
47
Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.
Repository
wikiPika/treehacks-2024
111 files · 60.2 MB · @ 6c92668
Structure
Interface
27 files · 24%Screens, components and styles rendered to the user.
API & routing
2 files · 2%Request entry points: routes, handlers and controllers.
Application logic
46 files · 41%Domain rules, services and shared utilities.
Data & schema
6 files · 5%Schema definitions, migrations and data access.
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
- TypeScript68%
- Python20%
- Markdown9%
- CSS3%
- JavaScript0%
Share of indexed source by file size. Binary and vendored files are excluded.
Dependencies
package.json
npm · 35- @clerk/nextjs
- @hookform/resolvers
- @radix-ui/react-checkbox
- @radix-ui/react-label
- @radix-ui/react-popover
- @radix-ui/react-slot
- @tryterra/terra-ui
- @types/react-speech-recognition
- axios
- class-variance-authority
- clsx
- date-fns
- framer-motion
- lucide-react
- next
- openai
- react
- react-day-picker
- +17 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.