# Project export: Let It Out 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 10.0 - Tagline: To increase emotional intelligence and self-understanding, Let It Out was created to use the power of AI to help users reflect on their emotional states. - Devpost: https://devpost.com/software/let-it-out-b2xp8u - GitHub: https://github.com/apolyeti/calhacks10.0 - Demo: https://github.com/waylonwilliams/letitout_backend - Video: https://www.youtube.com/embed/d_M9d1bGJts?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent - Team: 1 GitHub contributor(s) — apolyeti (24 commits) ## Devpost submission (written by the team) ### Inspiration Understanding and expressing emotions can be a complex and challenging journey. Many people struggle to connect and identify with their feelings, which can be overwhelming and confusing. Let It Out was born from the desire to create a supportive space where users can explore and engage with their emotions, fostering self-awareness and personal growth. Whether Let It Out is used as a safe place to vent, to recount good memories, or to explore sources of anxiety, Let It Out is here to support users with any emotion they may be experiencing. ### What it does The user is first prompted to record a vocal burst, to attempt to express their emotions in a purely primitive and natural way. Even when the user isn’t sure what emotion lies at the source of this vocal expression, with the power of Hume AI, Let It Out analyzes the user’s expression, and identifies an emotion present in the user. The user is then routed to a personalized journal prompt and template, designed to guide the user through a short session of self discovery, compassion, and reflection. The user is able to view an analysis past entries in their journal from ChatGPT which provides insights about the user’s emotional experiences across the dates they have journaled. ### How we built it Let It Out is a full stack web app. The front end is built with Next.js, Typescript, Chakra UI, and TinyMCE API for the custom journaling templates and embedded text editor. The back end is built with Python and Flask, which connects to Hume AI’s Streaming API to analyze the user’s vocal burst, OpenAI’s ChatGPT API to analyze the user’s journals, and MongoDB to integrate user authentication and store the user’s journals for future reflection. ### Challenges we ran into The main challenges we ran into came in our first project idea, in which we faced API paywalls and a lack of ideas to go forward with. However after attending Hume’s workshop we made a quick transition into this project and adapted well. We also ran into issues with slow run times which we greatly lessened by integrating Hume’s Streaming API rather than Batch API, and optimizing other aspects of our application. Accomplishments we’re proud of We are proud of how full the project turned out, at first it felt vague and without much direction, but as we continued to develop this project, new ideas were formed and we managed to reach something fairly well-rounded. ### What we learned We learned how to integrate modern technologies into our projects to create a rich and complex application. We learned how to connect different parts of a complex program, like building the front and back end separately but in parallel. Our beginner hacker learned how fun it can be to create in a fast-paced environment like a hackathon ### What's next We want to improve the journal analysis ability of our application by incorporating some kind of emotionally intelligent model rather than just base ChatGPT, we think we can do this by creating a custom model with Hume that would provide the summarization and analysis tools of ChatGPT but also include the emotional intelligence of Hume’s models. ## README (from the GitHub repository) # Let It Out - FRONTEND Project for CalHacks 10.0 [![Let It Out](https://img.youtube.com/vi/d_M9d1bGJts/0.jpg)](https://www.youtube.com/watch?v=d_M9d1bGJts) ## Tech Stack ## Inspiration Understanding and expressing emotions can be a complex and challenging journey. Many people struggle to connect and identify with their feelings, which can be overwhelming and confusing. Let It Out was born from the desire to create a supportive space where users can explore and engage with their emotions, fostering self-awareness and personal growth. Whether Let It Out is used as a safe place to vent, to recount good memories, or to explore sources of anxiety, Let It Out is here to support users with any emotion they may be experiencing. ## What it does The user is first prompted to record a vocal burst, to attempt to express their emotions in a purely primitive and natural way. Even when the user isn’t sure what emotion lies at the source of this vocal expression, with the power of Hume AI, Let It Out analyzes the user’s expression, and identifies an emotion present in the user. The user is then routed to a personalized journal prompt and template, designed to guide the user through a short session of self discovery, compassion, and reflection. The user is able to view an analysis past entries in their journal from ChatGPT which provides insights about the user’s emotional experiences across the dates they have journaled. ## How we built it Let It Out is a full stack web app. The front end is built with Next.js, Typescript, Chakra UI, and TinyMCE API for the custom journaling templates and embedded text editor. The back end is built with Python and Flask, which connects to Hume AI’s Streaming API to analyze the user’s vocal burst, OpenAI’s ChatGPT API to analyze the user’s journals, and MongoDB to integrate user authentication and store the user’s journals for future reflection. ## Challenges we ran into The main challenges we ran into came in our first project idea, in which we faced API paywalls and a lack of ideas to go forward with. However after attending Hume’s workshop we made a quick transition into this project and adapted well. We also ran into issues with slow run times which we greatly lessened by integrating Hume’s Streaming API rather than Batch API, and optimizing other aspects of our application. ## Accomplishments we’re proud of We are proud of how full the project turned out, at first it felt vague and without much direction, but as we continued to develop this project, new ideas were formed and we managed to reach something fairly well-rounded. ## What we learned We learned how to integrate modern technologies into our projects to create a rich and complex application. Our beginner hacker learned how fun it can be to work in a team in a fast-paced environment like a hackathon. ## What’s next for Let It Out We want to improve the journal analysis ability of our application by incorporating some kind of emotionally intelligent model rather than just base ChatGPT, we think we can do this by creating a custom model with Hume that would provide the summarization and analysis tools of ChatGPT but also include the emotional intelligence of Hume’s models. ## BACKEND Here's the link for the [backend repo](https://github.com/waylonwilliams/letitout_backend) ## Detected evidence (automated analysis) Indexed codebase: 21 recognized source files, 36 KB. - CSS (language) — detected in the code - JavaScript (language) — detected in the code - Next.js (technology) — detected in the code - React (technology) — detected in the code - TypeScript (language) — detected in the code - Flask (technology) — claimed on Devpost, not found in the code - MongoDB (technology) — claimed on Devpost, not found in the code - Node.js (technology) — claimed on Devpost, not found in the code - OpenAI (technology) — claimed on Devpost, not found in the code - Python (language) — claimed on Devpost, not found in the code ## Codebase structure (from repository index) ### Files (25 of 25) ``` .eslintrc.json .gitignore next.config.js package.json README.md src/components/AudioRecord.tsx src/components/Hero.tsx src/components/JournalEntry.tsx src/components/List.tsx src/components/Loading.tsx src/config.ts src/pages/_app.tsx src/pages/_document.tsx src/pages/api/hello.ts src/pages/edit/[id].tsx src/pages/index.tsx src/pages/journals.tsx src/styles/styles.css src/styles/theme.tsx src/types.ts src/utils/api.ts src/views/LoginView.tsx src/views/ReflectView.tsx src/views/SpeakView.tsx tsconfig.json ``` ### Dependencies - package.json: @chakra-ui/icons@^2.1.1, @chakra-ui/react@^2.8.1, @emotion/react@^11.11.1, @emotion/styled@^11.11.0, @tinymce/tinymce-react@^4.3.0, @types/node@^20, @types/react@^18, @types/react-dom@^18, axios@^1.6.0, eslint@^8, eslint-config-next@14.0.0, framer-motion@^10.16.4, next@14.0.0, react@^18, react-audio-voice-recorder@^2.2.0, react-dom@^18, typescript@^5, waveform-audio-recorder@^1.0.6 ### Recent commits (newest first) - docs: tech stack icons - README - update readme - fix heading - fix fonts and fontsize on journals page - update journals - save journal? - style login page better - add openai journal analysis - Delete uninstall-node.sh - Update README - add sily icon - add toasts and navigation buttons - add pages - broken code :( - set types for Journal and User, and also set up login system to work with MongoDB - get login page working - prompt loads in response to audio being sent over - add loading screen and other features - send base64 data of blob to flask ## Key source files (fetched from GitHub, selected and truncated for size) ### package.json ``` { "name": "calhacks10", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@chakra-ui/icons": "^2.1.1", "@chakra-ui/react": "^2.8.1", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@tinymce/tinymce-react": "^4.3.0", "axios": "^1.6.0", "framer-motion": "^10.16.4", "next": "14.0.0", "react": "^18", "react-audio-voice-recorder": "^2.2.0", "react-dom": "^18", "waveform-audio-recorder": "^1.0.6" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", "eslint-config-next": "14.0.0", "typescript": "^5" } } ``` ### src/pages/index.tsx ```typescript import Hero from "@components/Hero" import { NextPage } from "next"; import { useRouter } from "next/router"; import { useToast } from "@chakra-ui/react"; import { useEffect } from "react"; export default function Home() : NextPage { const router = useRouter(); const toast = useToast(); useEffect(() => { if (router.query.login === 'false') { toast({ title: "Login failed", description: "Please try again", status: "error", duration: 9000, isClosable: true, }); const { pathname, query } = router; delete query.login; router.replace({ pathname, query }, undefined, { shallow: true }); } }, [router.query.login]); return ( <> ); } ``` ### next.config.js ```javascript /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, swcMinify: true, async rewrites() { return [ { source: "/api/v1/:path*", destination: "http://127.0.0.1:5000/api/v1/:path*", }, ]; }, }; module.exports = nextConfig; ``` ### src/types.ts ```typescript export type User = { id: string; user: string; pass: string; authkey: string; journals: Array; }; export type Journal = { id: string; name: string; content: string; prompt: string; user: User; }; ``` ### src/config.ts ```typescript const META = { title: "CalHacks 10.0", description: "App description", lang: "en", url: "https://example.com", image: "/logo.png", tags: [] } const IS_PRODUCTION = process.env.NODE_ENV === "production"; export { IS_PRODUCTION, META }; ``` ### src/components/Loading.tsx ```typescript export default function Loading() { return (
); } ``` ### src/pages/_document.tsx ```typescript import { Html, Head, Main, NextScript } from 'next/document' export default function Document() { return (
) } ``` ### src/styles/styles.css ```css .lds-dual-ring { display: inline-block; width: 80px; height: 80px; } .lds-dual-ring:after { content: " "; display: block; width: 64px; height: 64px; margin: 8px; border-radius: 50%; border: 6px solid #FFA695; border-color: #FFA695 transparent #FFA695 transparent; animation: lds-dual-ring 1.2s linear infinite; } @keyframes lds-dual-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .tox-notifications-container{ display: none; } ``` ### src/pages/_app.tsx ```typescript import type { AppProps } from 'next/app' import { ChakraProvider } from '@chakra-ui/react' import theme from "../styles/theme" import "@styles/styles.css" import Head from 'next/head' import { META } from 'config' import { NextPage } from 'next' function MyApp({ Component, pageProps }: AppProps) : NextPage { return ( <> {META.title} ) } export default MyApp ``` ### src/components/JournalEntry.tsx ```typescript import { Box, Text, Heading, HStack, BoxProps } from "@chakra-ui/react"; import NextLink from 'next/link'; import type { Journal } from "@types"; interface JournalEntryProps extends BoxProps { name: string; content: string; } export default function JournalEntry( {id, name, content }: JournalEntryProps) { return ( {name}... ); } ``` [11 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]