# Project export: AIFred

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: The goal of AIFred is to create a jarvis like companion, a chatbot that you can interact with via speech and receiving a response through text to speech.
- Devpost: https://devpost.com/software/aifred-9kwvch
- GitHub: https://github.com/SilveerDusk/calhacks
- Team: 2 GitHub contributor(s) — Jason (29 commits), ljbarker (13 commits)

## Devpost submission (written by the team)

### Inspiration

The inspiration for our project was to create a Jarvis like chatbot experience. We decided to name the project AIFred as a nod to batman's assistant Alfred.

### What it does

AIFred was envisioned to be text free with users interacting with AIFred using their voice only. However we ran into several hiccups with the api's that prevented us from getting to a complete point. At this point AIFred has standard chatbot features and UI, and the text to speech exists as a stand alone aspect of our project and is not yet implemented into the AIFred experience.

### How we built it

We developed a basic html page that we could easily host on github pages and were beginning to make a react app, however, we quickly realized if we wanted to start utilizing the api's we would most likely be writing in python. We realized if we were already going to be writing in python we would be better off using reflex for seamless integration between the api code and the front end.

### Challenges we ran into

Our biggest challenges was working with the api's and dealing with the slow hackathon wifi as we had to download the models and their necessary libraries. Every download taking around 10 minutes definitely slowed down our progress especially with our smaller team. Furthermore, the scipy library that seemed to be the go-to for writing .wav files would not work on our devices. We tried several different models and tested almost every edge case, changing the sample rate, reformatting the input to the other accepted formats, changing the size of the input, and trying out the other solutions provided on Hugging Face. Lucky, we ended up finding a solution that worked but a lot of time was burnt on this issue.

### Accomplishments we're proud of

We are pretty proud of the work that we did. We had never worked with API's before and it was one of our goals to work with them, so we are happy with what we learned and it was fun to figure out how to hide our API keys and get the models working in our code.

### What we learned

We learned how to set up projects on GitHub pages, build websites in Reflex, and how to work with and integrate AI into our project with the help of API's.

### What's next

Next up we want to finish implementing the text to speech as that was almost finished but not complete and then get the speech recognition and transcription up and running.

## README (from the GitHub repository)

# calhacks

## Detected evidence (automated analysis)

Indexed codebase: 29 recognized source files, 38 KB.
- CSS (language) — detected in the code
- HTML (language) — detected in the code
- JavaScript (language) — detected in the code
- Next.js (technology) — detected in the code
- OpenAI (technology) — detected in the code
- Python (language) — detected in the code
- React (technology) — detected in the code
- Tailwind CSS (technology) — detected in the code
- TypeScript (language) — detected in the code

## Codebase structure (from repository index)

### Files (43 of 43)

```
.DS_Store
frontend/calhacksproject/.eslintrc.json
frontend/calhacksproject/.gitignore
frontend/calhacksproject/next.config.js
frontend/calhacksproject/package.json
frontend/calhacksproject/postcss.config.js
frontend/calhacksproject/README.md
frontend/calhacksproject/src/app/globals.css
frontend/calhacksproject/src/app/layout.tsx
frontend/calhacksproject/src/app/page.tsx
frontend/calhacksproject/tailwind.config.ts
frontend/calhacksproject/tsconfig.json
html/.gitignore
html/aboutUs.html
html/contact.html
html/index.html
html/package.json
html/scripts/teammembers.js
html/scripts/teammembers.ts
html/styles.css
html/tsconfig.json
README.md
reflex/.DS_Store
reflex/reflex-chat-main/.gitignore
reflex/reflex-chat-main/README.md
reflex/reflex-chat-main/textToSpeech/.gitignore
reflex/reflex-chat-main/textToSpeech/MetaMMS.py
reflex/reflex-chat-main/textToSpeech/mms.py
reflex/reflex-chat-main/webui/.gitignore
reflex/reflex-chat-main/webui/requirements.txt
reflex/reflex-chat-main/webui/rxconfig.py
reflex/reflex-chat-main/webui/transcription.txt
reflex/reflex-chat-main/webui/webui/__init__.py
reflex/reflex-chat-main/webui/webui/components/__init__.py
reflex/reflex-chat-main/webui/webui/components/chat.py
reflex/reflex-chat-main/webui/webui/components/img.py
reflex/reflex-chat-main/webui/webui/components/loading_icon.py
reflex/reflex-chat-main/webui/webui/components/modal.py
reflex/reflex-chat-main/webui/webui/components/navbar.py
reflex/reflex-chat-main/webui/webui/components/sidebar.py
reflex/reflex-chat-main/webui/webui/state.py
reflex/reflex-chat-main/webui/webui/styles.py
reflex/reflex-chat-main/webui/webui/webui.py
```

### Dependencies

- frontend/calhacksproject/package.json: @types/node@^20, @types/react@^18, @types/react-dom@^18, autoprefixer@^10, eslint@^8, eslint-config-next@14.0.0, next@14.0.0, postcss@^8, react@^18, react-dom@^18, tailwindcss@^3, typescript@^5
- html/package.json: typescript@^5.2.2
- reflex/reflex-chat-main/webui/requirements.txt: openai, reflex@>=0.2.0

### Recent commits (newest first)

- deleted unnecessary
- Added STT and TTS functionality
- updated read.me
- feat: adds copy of photo after the og was moved to the reflex side
- Merge branch 'main' of https://github.com/SilveerDusk/calhacks
- feat: adds sudo/bark functionality for instant transcribing and playing
- added team photo page and made AIFred separate
- fix: small changes for styles.css
- fix: small changes for index.html
- cleans up styles.css for github pages
- Merge branch 'main' of https://github.com/SilveerDusk/calhacks
- feat: adds text-to-speech files and updates github pages home page
- added some speech to text imports
- added AIfred styles
- working version with global environment openai api key
- fix: font color changes
- fresh reflex push
- removing stuff part 2
- Merge branch 'main' of https://github.com/SilveerDusk/calhacks
- :removed existing reflex stuff

## Key source files (fetched from GitHub, selected and truncated for size)

### html/package.json

```
{
  "name": "silveerdusk.github.io",
  "version": "1.0.0",
  "description": "Jason Jelincic's Personal Website This is a personal website build using the Hack4Impact Starter Pack! This website was made using a mix of html and css. [Visit it Here!](https://SilveerDusk.github.io)",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/SilveerDusk/SilveerDusk.github.io.git"
  },
  "author": "Jason Jelincic",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/SilveerDusk/SilveerDusk.github.io/issues"
  },
  "homepage": "https://github.com/SilveerDusk/SilveerDusk.github.io#readme",
  "devDependencies": {
    "typescript": "^5.2.2"
  }
}

```

### frontend/calhacksproject/package.json

```
{
  "name": "calhacksproject",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.0.0"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10",
    "postcss": "^8",
    "tailwindcss": "^3",
    "eslint": "^8",
    "eslint-config-next": "14.0.0"
  }
}

```

### reflex/reflex-chat-main/webui/requirements.txt

```
reflex>=0.2.0
openai
```

### frontend/calhacksproject/src/app/layout.tsx

```typescript
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Cal Hacks Project',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

```

### frontend/calhacksproject/src/app/page.tsx

```typescript
import Image from 'next/image'

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
          Get started by editing&nbsp;
          <code className="font-mono font-bold">src/app/page.tsx</code>
        </p>
        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
          <a
            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
            target="_blank"
            rel="noopener noreferrer"
          >
            By{' '}
            <Image
              src="/vercel.svg"
              alt="Vercel Logo"
              className="dark:invert"
              width={100}
              height={24}
              priority
            />
          </a>
        </div>
      </div>

      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
        <Image
          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
          src="/next.svg"
          alt="Next.js Logo"
          width={180}
          height={37}
          priority
        />
      </div>

      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
        <a
          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
          target="_blank"
          rel="noopener noreferrer"
        >
          <h2 className={`mb-3 text-2xl font-semibold`}>
            Docs{' '}
            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
              -&gt;
            </span>
          </h2>
          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
            Find in-depth information about Next.js features and API.
          </p>
        </a>

        <a
          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
          target="_blank"
          rel="noopener noreferrer"
        >
          <h2 className={`mb-3 text-2xl font-semibold`}>
            Learn{' '}
            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
              -&gt;
            </span>
          </h2>
          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
            Learn about Next.js in an interactive course with&nbsp;quizzes!
          </p>
        </a>

        <a
          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
          target="_blank"
          rel="noopener noreferrer"
        >
          <h2 className={`mb-3 text-2xl font-semibold`}>
            Templates{' '}
            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
              -&gt;
            </span>
          </h2>
          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
            Explore the Next.js 13 playground.
          </p>
        </a>

        <a
          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
          target="_blank"
          rel="noopener noreferrer"
        >
          <h2 className={`mb-3 text-2xl font-semibold`}>
            Deploy{' '}
            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
              -&gt;
            </span>
          </h2>
          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
            Instantly deploy your Next.js site to a shareable URL with Vercel.
          </p>
        </a>
      </div>
    </main>
  )
}

```

### html/aboutUs.html

```html
<!DOCTYPE html>
<html>
  <head>
    <title>
      Learn More
    </title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <nav class="navbar">
      <h1 class="logo"><a href="index.html">Cal Hacks 2023</a></h1>
      <ul class="nav-list">
        <li><a href="index.html">Home</a></li>
        <li><a href="aboutUs.html">About Us</a></li>
        <li><a href="contact.html">Connect With Us</a></li>
      </ul>
    </nav>
    <main>
      <div class="centered">
        <h1 class="page-title">Learn More</h1>
        <div id="container">
          <ul id="member-list"></ul>
        </div>
      </div>
    </main>
    <footer class="footer">© 2023 Team CSAI | All Rights Reserved</footer>
    <script src="./scripts/teammembers.js"></script>
  </body>
</html>
```

### html/contact.html

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Connect With Me</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <nav class="navbar">
      <h1 class="logo"><a href="index.html">Cal Hacks 2023</a></h1>
      <ul class="nav-list">
        <li><a href="index.html">Home</a></li>
        <li><a href="aboutUs.html">About Us</a></li>
        <li><a href="contact.html">Connect With Us</a></li>
      </ul>
    </nav>
    <main>
      <div class="centered">
        <h1 class="page-title">Connect With Us</h1>
        <form>
          <div>
            <section>
              <label for="name">Name</label>
              <label for="primary">Preferred Form of Contact</label>
              <label for="email">Email</label>
              <label for="linkedin">LinkedIn</label>
              <label for="message">Message</label>
            </section>
            <section>
              <input type="text" name="name" id="name" placeholder="Name" required>
              <input type="text" name="primary" id="primary" placeholder="Preferred Form of Contact" required>
              <input type="text" name="email" id="email" placeholder="Email">
              <input type="text" name="linkedin" id="linkedin" placeholder="LinkedIn URL">
              <input type="text" name="message" id="message" placeholder="Message" required>
            </section>
          </div>
          <section>
            <input type="submit" name="submit" id="submit">
          </section>
        </form>
      </div>
    </main>
    <footer class="footer">© 2023 Team CSAI | All Rights Reserved</footer>
  </body>
</html>
```

### html/index.html

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Cal Hacks 2023</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <nav class="navbar">
      <h1 class="logo"><a href="index.html">Cal Hacks 2023</a></h1>
      <ul class="nav-list">
        <li><a href="index.html">Home</a></li>
        <li><a href="aboutUs.html">About Us</a></li>
        <li><a href="contact.html">Connect With Us</a></li>
      </ul>
    </nav>
    <main>
      <div class="centered">
        <h1 class="page-title">Welcome to Our Project!</h1>
        <div class="about">
          <div class="about-image">
            <img src="teamphoto.jpeg" alt="A Photo of Us" width="600px">
          </div>
          <div class="about-text">
            <p>Welcome to our project page. Introducing AIFred, "pronounced alfred", your friendly AI friend.
              The goal of AIFred was to create a jarvis like companion, a chat bot that you would interact with via speech
              and it would respond using text to speech. Our originial vision had three parts; Open-AI's whisper for speech recongnition and transcription,
              then from there the text would be sent to Chat-GBT and the response would be then sent to meta's mmms (Massively Multilingual Speech) model for text to speech purposes.
              However we ran into critical issues when fetching responeses from the text to speech api's.
            </p> 
            <p>If you want to learn a bit more about our team, make sure to check out the About Us page!</p>
          </div>
        </div>
      </div>
    </main>
    <footer class="footer">© 2023 Team CSAI | All Rights Reserved</footer>
  </body>
</html>
```

### html/styles.css

```css
/* Body */
body{
  background: linear-gradient(135deg, rgb(93, 90, 90), black);
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100%;
  padding: 0px;
  margin: 0px;
  font-family: 'Times New Roman', Times, serif;
}
main{
  padding: 20px;
}
/* NavBar */
.navbar{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background-color: black;
}
.logo a{
  display: block;
  font-size: 1em;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 20px;
  margin-inline-end: 0px;
  font-weight: bold;
  color: seashell;
  text-decoration: none;
}
.navbar li{
  display: inline;
}
.navbar li a{
  padding-right: 25px;
  font-size: 20px;
  color: seashell;
}
/*  Titles */
.centered{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
  padding: 5px;
  background: linear-gradient(45deg, black, rgb(93, 90, 90));
  background-repeat: no-repeat;
  background-attachment: fixed;
  border-radius: 20px;
  color: seashell;
}
/* Home Page */
.about {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.about img {
  border: 2px solid black;
  border-radius: 10%;
  max-width: 350px;
  flex-basis: 50px;
  flex-grow: 1;
  margin: 20px;
}
.about p{
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  text-overflow: wrap;
  height: 100px;
  flex-basis: 50px;
  flex-grow: 1;
  padding: 20px;
  margin-right: 20px;
  margin-left: 20px;
  line-height: 1.5;
  overflow: hidden;
}
/* About Us */
a{
  color: seashell;
}
.post{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
  padding: 5px;
  background: linear-gradient(115deg, black, rgb(93, 90, 90));
  background-repeat: no-repeat;
  background-attachment: fixed;
  border-radius: 20px;
  color: seashell;
}
.top{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 500px;
}
.top h2{
  margin: 10px;
  margin-left: 20px;
  font-size: 1.75em;
}
.top h3{
  margin: 10px;
}
.post a{
  margin: 5px;
}
.post p{
  text-align: center;
  margin-left: 10%;
  margin-right: 10%;
}
/* Contact */
form{
  align-items: center;
}
form div{
  display: flex;
  flex-direction: row;
  align-items: center;
}
div section {
  display: flex;
  flex-direction: column;
  align-items: center;
}
input{
  border-radius: 50px;
  border: 2px solid black;
  width: 400px;
  margin: 10px;
  padding: 10px;
}
#submit{
  width: 200px;
}
label{
  margin: 10px;
  padding: 10px;
}
/* Footer */
footer{
  display: flex;
  font-size: 1em;
  justify-content: center;
  color: seashell;
}


```

### frontend/calhacksproject/postcss.config.js

```javascript
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

```

[18 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]