Project Info
Zoom: Best Use of Zoom APIs ($250 Git Card + Herschel Duffle Bags [1st] & $100 Git Card + Hoodies [2nd] & $50 Git Card + Bottles [3rd])
ZoneOut
Inspiration
We've all been in classes or meetings where we ZoneOut, even if for a few seconds, and came back to see that the cure to cancer has been invented! Inspired by attending online lectures this Friday (we're dedicated students), we found out that this isn't as uncommon as you'd think. As a matter of fact, the average retention rate of a student after just 45 mins of online learning is just 61%, which is HIGHER than the average person. Moreover, the average drop in engagement is 87% (scaling exponentially!) on average, in meetings with larger sets of participants.
What it does
ZoneOut utilizes textual, visual & audio contexts from meetings, enabling our AI assistant to teach, revise & explain any concept, In-Depth & in Real-Time, to users to maintain higher levels of retention, productivity & engagement.
How we built it
We built ZoneOut with a complex, yet execution directed architecture, developed completely on Windsurf. We used the Zoom API to connect the client to a Real-Time Media Server (RTMS) via a Handshake protocol, and consequently sampled data at microintervals as well as based on when a sentence/section of an idea being discussed finished. We collected textual data from the chat, audio data via live transcripts and visual screensharing/camera data with help from Zoom's API. We then used OpenAI for embedding the text & images with Chain-Of-Thought (CoT) Reasoning to keep context well-fitted and connected, independent of context window sizes and to keep images & text associated with one another. We also used parallel computation to allow us to index this data using Chroma concurrently, associating images with concepts in both audio & textual formats in different timestamps. Finally, we used a similarity search RAG system with ChromaDB for the audio/transcript & textual data, and a vision-based RAG system on ColPali (VLM), which we accelerated using a caching system that we developed, allowing us to use it without reloading it into memory again & again. The outputs of both RAG systems are then passed through OpenAI's API to format it nicely. We also optimized sampling parameters to avoid hallucinations caused by excess external information or misunderstanding contextual information. We then send this data back to the client, who's now back in the loop of everything that's happening!
Challenges we ran into
Originally, the RTMS faced issues with streaming audio & video. After a lot of debugging & troubleshooting, we found & cured the error by handling edgecases through intensive vision programming back & forth, sending our sample code to the Zoom team so they can debug other teams. Then, our VLM workflow turned out to be too slow as the VLM was being loaded into memory repeatedly. So again, after coding a lot of reacharounds, we finally implemented our own caching system to supercharge our VLM, which now works with various forms of handwriting effectively. We also faced hallucinations wherein the model knew information it should not, and misinterpreted information it had. We cured this using indexing & CoT, to reach the product we have today!
Accomplishments we're proud of
This hackathon has been a proud technical moment for all 3 of us. Our achievements stem from our challenges. We very quickly figured out the edge case of professors writing on whiteboards, both virtual & real, instead of explaining things like equations. So we developed a multi-language model workflow to work around. Another proud accomplishment was improving the Zoom RTMS repo, as we were the first people that figured it out, turning our curiosity into open source contributions in Zoom's repos. Next was integrating a complex parallel workflow to interpret & contextualize images, text & audio data altogether, particularly because of how LLMs & VLMs can be very funky sometimes. After that, was when we implemented our own caching system to boost our VLM system, after having faced a barrage of vision problems. Finally, was our creative use of prompt engineering, context windows & frontend-backend structuring for Windsurf to swap between entirely different frontend frameworks (HTML/CSS & React) & even simple backend worflows without breaking the frontend or the backend, letting us build very quickly, despite initial samples & software not being completely compatible, causing issues in the webSockets & handshake protocol, amongst other incompatibility issues.
Installation & setup
This app requires FFmpeg and Node.js version 14 or higher.
The app can be run locally by cloning and installing packages with npm or on Docker.
npm To setup with npm, install dependencies and run the app:
cd rtms-mock-server-sample
# Install dependencies
npm install
# Start the server
npm start
Docker To setup with Docker, run the following:
cd rtms-mock-server-sample
# Option 1: Using docker-compose (recommended)
docker-compose up -d
# Option 2: Manual docker commands
# Build Docker image
docker build -t rtms-mock-server .
# Run the container
docker run -d \
-p 9092:9092 \
-p 8081:8081 \
-v $(pwd)/data:/app/data \
--name rtms-mock-server \
rtms-mock-server
# View logs
docker logs -f rtms-mock-server
To stop the container:
docker stop rtms-mock-server
To restart the container:
docker start rtms-mock-server
Using the sample client
Start the server (npm or Docker) and open the mock server at http://localhost:9092. The sample client at ./client can now be used to consume media from the mock server.
In a new terminal, run the sample client:
node client/server.js
This opens up a server at localhost:8000. For webhook validation, the client will need to be exposed to the internet with a tunnel, like ngrok.
ngrok http 8000
The ngrok URL will be used to validate the webhook endpoint. Copy your URL and paste it into the webhook URL field on the mock server (http://localhost:9092). Click validate. In the RTMS server and client you'll see confirmation of the validation.
You can now start a meeting and start streaming media to the client.
To run the backend
Delete the current index from the indexes folder
run
python3 reset_everything.py
comment out this line in the app.py:
RAG = model_manager.get_model(device="mps")
and uncomment these
RAG = RAGMultiModalModel.from_pretrained(pretrained_model_name_or_path="/Users/yahiasalman/Desktop/RetainAll/RetainBackend/app/models/colqwen2-v1.0", index_root="./index", device="mps")
RAG.index(input_path="./saved_frame.jpg", index_name="TreeIndex", store_collection_with_index=True, overwrite=True)
and run
python3 app.py
then you can run
./start.sh
and the server should start running on port 8010
Make sure that you have redis and celery installed!
Analysis
View
Metric
- 11
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
- ExpressIn code
- HTMLIn code
- JavaScriptIn code
- PythonIn code
- OpenAIClaimed
5 of 6 appear in the indexed code. 1 claimed on Devpost could not be matched to code, which may simply mean the tool leaves no trace in the repository.
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
162 KB
Source files
29
Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.
Repository
NxtGenLegend/TreeHacks-ZoneOut
287 files · 115.3 MB · @ 4be30f2
Structure
API & routing
9 files · 3%Request entry points: routes, handlers and controllers.
Application logic
40 files · 14%Domain rules, services and shared utilities.
+9 more
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
- JavaScript73%
- Python10%
- CSS8%
- HTML6%
- Markdown3%
- Shell0%
- Other (1)0%
Share of indexed source by file size. Binary and vendored files are excluded.
Dependencies
package.json
npm · 7- cors
- dotenv
- express
- fluent-ffmpeg
- multer
- node-fetch
- ws
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.