# Project export: Vocis This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small. ## Project metadata - Hackathon: Cal Hacks 11.0 - Tagline: We aim to improve presentation skills through simulating difficult scenarios presenters and public-speakers usually have to face like Closing testimonials, hecklers and QnA sessions. - Devpost: https://devpost.com/software/vocis - GitHub: https://github.com/dev-alto/calhacks-v11-proj - Team: 2 GitHub contributor(s) — loofsan (4 commits), devalto (2 commits) ## Devpost submission (written by the team) ### Inspiration The inspiration behind our project stems from the personal challenges we’ve faced in the past with public speaking and presentations. Like many others, we often found ourselves feeling overwhelmed by nerves, shaky voices, and the pressure of presenting in front of peers. This anxiety would sometimes make it difficult to communicate ideas effectively, and the fear of judgment made the experience even more daunting. Recognizing that we weren’t alone in these feelings, we wanted to create a solution that could help others overcome similar hurdles. That’s where Vocis comes in. Its aim is to give people the freedom and the ability to practice their presentation skills at their own pace, in a safe, supportive environment. Whether it’s practicing for a school project, a work presentation, or simply building the confidence to speak in front of others, the platform allows users to refine their delivery. What It Does Our project aims to simulate real-life challenges that presenters might face. For example, handling difficult situations like Q&A sessions, dealing with hecklers, or responding to aggressive viewers. By creating these simulated scenarios, our software prepares users for the unpredictability of live presentations. We hope that by giving people the tools and the settings to practice on their own terms, they can gradually build the skills and self-assurance needed to present with ease in any setting. Tech Stack - How Vocis is built ReactJs Shadcn NextJs TailwindCSS Hume.Ai OpenAI Challenges We Faced During our hackathon, one of the key challenges we faced was the need to dive into extensive documentation while working on API implementation as we had never worked with Hume before. Not only that, as all of us don’t have much experience with the backend of an app, it was really taxing to learn and implement at the same time. This task, which is already time-consuming, became more difficult due to unstable internet connectivity. This led to unexpected delays in accessing resources and troubleshooting problems in real time, which put additional pressure on our timeline. Despite these setbacks, our team worked hard to adapt and maintain momentum. Accomplishments Despite the challenges we faced, we were able to make a functional prototype at the very least that displays the core of our program which is simulating real-life difficult scenarios for presenters and public-speakers. At least, the very bare bones and we’re very proud of ourselves for being able to do that and create a wonderful project. What We Learned We learned to create a viable project in limited time allowing us to overcome our shortcomings in our ability to create a project Through multiple workshops and gaining insightful help from mentors, we learned more about APIs, implementing APIs, and making sure they cooperate with each other and streamlining the process. We also learned a lot of new, cool and amazing technologies created by a lot of amazing people that allowed us to achieve the aim of our project What’s Next For Vocis We allow multiple users to present at the same time and the AI can create situations for multiple “panelists” We allow many more situations that panelists and presenters may face like many different types of aggressive people, journalists that are a little too overbearing. We add reactions of the audience that is listening to our presentation so that it creates a more realistic experience for the user (“presenter”) More security measure Authentication ## README (from the GitHub repository) This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). ## Getting Started First, run the development server: ```bash npm run dev # or yarn dev # or pnpm dev # or bun dev ``` Open [http://localhost:3000](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`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. ## Learn More To learn more about Next.js, take a look at the following resources: - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! ## Deploy on Vercel The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. ## Detected evidence (automated analysis) Indexed codebase: 30 recognized source files, 89 KB. - CSS (language) — detected in the code - Google Gemini (technology) — detected in the code - JavaScript (language) — detected in the code - Next.js (technology) — detected in the code - OpenAI (technology) — detected in the code - React (technology) — detected in the code - Tailwind CSS (technology) — detected in the code - TypeScript (language) — detected in the code - Node.js (technology) — claimed on Devpost, not found in the code ## Codebase structure (from repository index) ### Files (38 of 38) ``` .env.local .eslintrc.json .gitignore components.json next.config.mjs package.json postcss.config.mjs README.md src/app/about/page.tsx src/app/api/analysis/route.js src/app/contact/page.tsx src/app/get-started/page.tsx src/app/globals.css src/app/layout.tsx src/app/main-copy/page.tsx src/app/main/page.tsx src/app/mode1/page.tsx src/app/page.tsx src/components/ClientComponent.tsx src/components/Controls.tsx src/components/Messages.tsx src/components/ui/BoxReveal.tsx src/components/ui/Button.tsx src/components/ui/button2.tsx src/components/ui/Card.tsx src/components/ui/card2.tsx src/components/ui/Container.tsx src/components/ui/Footer.tsx src/components/ui/input.tsx src/components/ui/label.tsx src/components/ui/Navbar.tsx src/components/ui/scroll-area.tsx src/components/ui/switch.tsx src/lib/expressionColors.ts src/lib/expressionLabels.ts src/lib/utils.ts tailwind.config.ts tsconfig.json ``` ### Dependencies - package.json: @google/generative-ai@^0.21.0, @humeai/voice-react@^0.1.16, @radix-ui/react-icons@^1.3.0, @radix-ui/react-label@^2.1.0, @radix-ui/react-scroll-area@^1.2.0, @radix-ui/react-slot@^1.1.0, @radix-ui/react-switch@^1.1.1, @types/next@^8.0.7, @types/node@^20, @types/react@^18, @types/react-dom@^18, axios@^1.7.7, class-variance-authority@^0.7.0, clsx@^2.1.1, dotenv@^16.4.5, eslint@^8, eslint-config-next@14.2.15, framer-motion@^11.11.9, fs@^0.0.1-security, hume@^0.9.1, lucide-react@^0.453.0, next@14.2.15, openai@^4.68.1, postcss@^8, react@^18, react-dom@^18, react-toastify@^10.0.6, react-use-measure@^2.1.1, styled-components@^6.1.13, tailwind-merge@^2.5.4, tailwindcss@^3.4.1, tailwindcss-animate@^1.0.7, typescript@^5 ### Recent commits (newest first) - Foo - Removed secret api - New - NICE - New UI and Stuff - Small - WORKING HUMEEEEEEEE - UIPDATEREEEE - the beginning ## Key source files (fetched from GitHub, selected and truncated for size) ### package.json ``` { "name": "calhacks-v11-proj", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@google/generative-ai": "^0.21.0", "@humeai/voice-react": "^0.1.16", "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-scroll-area": "^1.2.0", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-switch": "^1.1.1", "axios": "^1.7.7", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "dotenv": "^16.4.5", "framer-motion": "^11.11.9", "fs": "^0.0.1-security", "hume": "^0.9.1", "lucide-react": "^0.453.0", "next": "14.2.15", "openai": "^4.68.1", "react": "^18", "react-dom": "^18", "react-toastify": "^10.0.6", "react-use-measure": "^2.1.1", "styled-components": "^6.1.13", "tailwind-merge": "^2.5.4", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@types/next": "^8.0.7", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", "eslint-config-next": "14.2.15", "postcss": "^8", "tailwindcss": "^3.4.1", "typescript": "^5" } } ``` ### src/app/layout.tsx ```typescript import type { Metadata } from "next"; import localFont from "next/font/local"; import "./globals.css"; import 'dotenv/config' const geistSans = localFont({ src: "./fonts/GeistVF.woff", variable: "--font-geist-sans", weight: "100 900", }); const geistMono = localFont({ src: "./fonts/GeistMonoVF.woff", variable: "--font-geist-mono", weight: "100 900", }); export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } ``` ### src/app/page.tsx ```typescript "use client"; // pages/index.tsx import { motion } from "framer-motion"; import React from "react"; import Head from "next/head"; import Link from "next/link"; import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/Card"; import { Container } from "@/components/ui/Container"; import { Navbar } from "@/components/ui/Navbar"; import { Footer } from "@/components/ui/Footer"; import { Button } from "@/components/ui/Button"; import Image from "next/image"; // import styled from 'styled-components'; interface Feature { title: string; description: string; icon: string; } const features: Feature[] = [ { title: "Interactive Q&A Sessions", description: "Engage with AI-driven questions based on your presentation content to prepare for any audience.", icon: "🗣️", }, { title: "Heckling and De-escalation Training", description: "Learn effective strategies to handle aggressive viewers and maintain composure during presentations.", icon: "🛡️", }, { title: "Real-Time Feedback", description: "Receive instant tips and guidance to improve your delivery and performance on the fly.", icon: "⏱️", }, { title: "Presentation Timer", description: "Manage your presentation time efficiently with a built-in countdown and warnings.", icon: "⏰", }, { title: "Extended Communication Skills", description: "Enhance your ability to hold longer conversations, initiate dialogues, and resolve conflicts.", icon: "💬", }, { title: "Voice and Video Recording", description: "Record your presentations to review and analyze your performance for continuous improvement.", icon: "🎥", }, ]; const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.2, }, }, }; // const Marquee = styled.div` // position: absolute; // width: 100%; // bottom: -58.5em; // margin: 0 auto; // white-space: nowrap; // overflow: hidden; // z-index: 3; // display: flex; // span { // text-transform: uppercase; // font-weight: 350; // color: ##cfcbc4; // font-size: 4em; // text-transform: uppercase; // padding-left: -10%; // animation: marquee-animation 75s linear infinite; // @media (max-width: 900px) { // font-size: 2.4em; // } // @media (max-width: 468px) { // font-size: 1.3em; // } // } // @keyframes marquee-animation { // 0% { // transform: translate(0, 0); // } // 100% { // transform: translate(-100%, 0); // } // } // ` const itemVariants = { hidden: { opacity: 0, y: 50 }, visible: { opacity: 1, y: 0 }, }; const Home: React.FC = () => { return ( <> Vocis - Master Your Presentation Skills
{/* Hero Section */}
Elevate Your Presentation Skills with Vocis Overcome public speaking anxiety, master interactive Q&A sessions, handle hecklers, and receive real-time feedback to deliver impactful presentations every time. {" "}
{/* Features Section */}
Key Features Vocis offers a comprehensive suite of tools designed to enhance every aspect of your presentation skills. ); } ``` ### src/app/main-copy/page.tsx ```typescript 'use client' import { Button } from '@/components/ui/Button' import { useEffect, useState, useCallback, useRef } from 'react' import Image from "next/image" function secondsToDhms(seconds: number): string { const h = Math.floor(seconds / 3600) const m = Math.floor((seconds % 3600) / 60) const s = Math.floor(seconds % 60) return [h, m, s].map(v => v.toString().padStart(2, '0')).join(':') } export default function Main() { const [timer, setTimer] = useState(0) const [isMicOn, setIsMicOn] = useState(true) const [isCameraOn, setIsCameraOn] = useState(true) const intervalRef = useRef(null) const startTimer = useCallback(() => { if (intervalRef.current !== null) return intervalRef.current = setInterval(() => { setTimer(prev => prev + 1) }, 1000) }, []) const stopTimer = useCallback(() => { if (intervalRef.current === null) return clearInterval(intervalRef.current) intervalRef.current = null }, []) useEffect(() => { startTimer() return () => stopTimer() }, [startTimer, stopTimer]) const toggleMic = () => setIsMicOn(prev => !prev) const toggleCamera = () => setIsCameraOn(prev => !prev) const endSession = () => { stopTimer() alert("Session ended!") } return (
{/* Main content goes here */}

Team meeting

{secondsToDhms(timer)}
) } ``` ### src/app/get-started/page.tsx ```typescript "use client"; import { useState } from "react"; import { useRouter } from "next/navigation"; import { Card, CardContent } from "@/components/ui/card2"; import { Switch } from "@/components/ui/switch"; import { Button } from "@/components/ui/button2"; import { CheckSquare } from "lucide-react"; import { Navbar } from "@/components/ui/Navbar"; export default function PresentationModeSelector() { const [isLivePresentation, setIsLivePresentation] = useState(false); const [selectedScenarios, setSelectedScenarios] = useState([]); const router = useRouter(); const scenarios = [ "Introduction", "Product Demo", "Q&A Session", "Technical Deep Dive", "Customer Testimonial", "De-escalation", "Closing Remarks", ]; const handleScenarioToggle = (scenario: string) => { setSelectedScenarios((prev) => prev.includes(scenario) ? prev.filter((s) => s !== scenario) : [...prev, scenario] ); }; const handleSubmit = () => { // Ensure live presentation is selected and "Q&A Session" is part of selected scenarios if (isLivePresentation && selectedScenarios.includes("Q&A Session")) { const query = selectedScenarios.length > 0 ? `?scenarios=${selectedScenarios.join(",")}` : ""; // Navigate to main.tsx with the query router.push(`/main${query}`); } }; return ( <>

Presentation Mode Selector

Live-Presentation
{scenarios.map((scenario) => (
handleScenarioToggle(scenario)} className="cursor-pointer" > {scenario} {selectedScenarios.includes(scenario) && ( )}
))}
); } ``` ### src/app/contact/page.tsx ```typescript 'use client' import React from 'react'; import { Navbar } from '@/components/ui/Navbar'; import { Footer } from '@/components/ui/Footer'; import {BoxReveal} from "@/components/ui/BoxReveal"; export default function ContactUs() { const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Handle form submission here console.log('Form submitted') } return ( <>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Contact Us

Our Team

Lance

Full Stack Developer

Lynn

Full Stack Developer

Assem

{ return ( <> About -

{/* Hero Section */}

About

is dedicated to empowering individuals to deliver impactful presentations through AI-driven feedback and interactive training tools.

{/* Features Section */}

Our Features

{/* Feature 1 */} Feedback Icon AI-Driven Feedback

Receive instant, personalized feedback on your presentation skills to continuously improve.

{/* Feature 2 */} Transcript Icon Real-Time Transcription

Access accurate transcriptions of your presentations to review and analyze your performance.

{/* Feature 3 */} Slides Icon Interactive Slide Viewer

Seamlessly integrate your slides to enhance your presentation experience and visual storytelling.

{/* Feature 4 */} Analytics Icon Performance Analytics

Gain insights into your presentation patterns and track your improvement over time with detailed analytics.

{/* Feature 5 */} Team Icon Collaborative Tools

Work together with peers and mentors to refine your presentation skills through collaborative sessions.

{/* Feature 6 */} Support Icon 24/7 Support

Our dedicated support team is always here to help you with any questions or technical issues.

{/* Mission Statement */}

Our Mission

At , our mission is to democratize effective communication by providing accessible and intelligent tools that help individuals excel in their presentations, whether in professional settings, academic environments, or personal endeavors.

{/* Team Section */}

Meet Our CEOs

(null); const [error, setError] = useState(null); const [availableCameras, setAvailableCameras] = useState( [] ); const [selectedCameraId, setSelectedCameraId] = useState(""); // Refs for video element const videoRef = useRef(null); // Effect to handle timer countdown useEffect(() => { let interval: NodeJS.Timeout; if (isTimerRunning && timer > 0) { interval = setInterval(() => { setTimer((prevTimer) => prevTimer - 1); }, 1000); } else if (timer === 0) { setIsTimerRunning(false); } return () => clearInterval(interval); }, [isTimerRunning, timer]); // Effect to fetch AI-generated text (simulated) useEffect(() => { const fetchGeneratedText = async () => { const response = await new Promise((resolve) => setTimeout(() => { resolve( "This is the AI-generated text.\n\nHere is another paragraph.\nAnd a new line here." ); }, 1000) ); setGeneratedText(response); }; fetchGeneratedText(); }, []); // Effect to enumerate available cameras useEffect(() => { const getCameras = async () => { try { const devices = await navigator.mediaDevices.enumerateDevices(); const videoDevices = devices.filter( (device) => device.kind === "videoinput" ); setAvailableCameras(videoDevices); if (videoDevices.length > 0) { setSelectedCameraId(videoDevices[0].deviceId); } } catch (err) { console.error("Error enumerating devices.", err); setError("Unable to access media devices."); } }; getCameras(); }, []); // Effect to access webcam and microphone based on selected camera useEffect(() => { const getMedia = async () => { if (!selectedCameraId) return; // Stop any existing media tracks before starting new ones if (mediaStream) { mediaStream.getTracks().forEach((track) => track.stop()); } try { const stream = await navigator.mediaDevices.getUserMedia({ video: { deviceId: { exact: selectedCameraId } }, audio: true, }); setMediaStream(stream); if (videoRef.current) { videoRef.current.srcObject = stream; } } catch (err) { console.error("Error accessing media devices.", err); setError("Unable to access webcam and/or microphone."); } }; getMedia(); // Cleanup on component unmount return () => { if (mediaStream) { mediaStream.getTracks().forEach((track) => track.stop()); } }; }, [selectedCameraId]); // Handlers const handleSpeakToggle = () => { setIsSpeaking(!isSpeaking); // Implement actual speech functionality here }; const handleRestart = () => { // Implement restart functionality here }; const handleTimerStart = () => { if (timer > 0) { setIsTimerRunning(true); } }; const handleCameraChange = (event: React.ChangeEvent) => { setSelectedCameraId(event.target.value); }; const firstCardRef = useRef(null); return ( <>
{/* Sidebar Section */}
{/* Top Grid of Cards */}
{[...Array(9)].map((_, i) => ( {i === 0 ? ( // Embed the webcam video in the first card <> {error ? (

{error}

) : ( )} ) : ( // Other cards can have their own content or remain empty
)} ))}
{/* Bottom Controls */}
{/* Speak, Restart, Timer Controls */}