# Project export: Vision Talks

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 be the comprehensive resource when it comes to introducing you to ASL; whether that be learning letters, words, or practicing yourself!
- Devpost: https://devpost.com/software/vision-talks
- GitHub: https://github.com/aghosh376/vision-talks
- Team: 3 GitHub contributor(s) — E.K. (33 commits), aghosh376 (19 commits), No767 (2 commits)

## Devpost submission (written by the team)

### What it does

What our project does is introduce ASL letters, words, and numbers to you in a flashcard manner.

### How we built it

We built our project with React, Vite, and TensorFlowJS.

### Challenges we ran into

Some challenges we ran into included issues with git commits and merging. Over the course of our project we made mistakes while resolving merge conflicts which resulted in a large part of our project being almost discarded. Luckily we were able to git revert back to the correct version but time was misused regardless. With our TensorFlow model we had trouble reading the input/output and getting webcam working.

### Accomplishments we're proud of

We are proud of the work we got done in the time frame of this hackathon with our skill level. Out of the workshops we attended I think we learned a lot and can't wait to implement them in future projects!

### What we learned

Over the course of this hackathon we learned that it is important to clearly define our project scope ahead of time. We spent a lot of our time on day 1 thinking about what we could do with the sponsor technologies and should have looked into them more in depth before the hackathon.

### What's next

We would like to train our own ASL image detection model so that people can practice at home in real time. Additionally we would like to transcribe their signs into plaintext and voice so that they can confirm what they are signing. Expanding our project scope beyond ASL to other languages is also something we wish to do.

## README (from the GitHub repository)

# vision-talks
CalHacks 11.0 project


Card image sources:

https://www.printablee.com/postpic/2013/07/basic-baby-sign-language-words-chart_392258.jpg

https://www.startasl.com/wp-content/uploads/sign-language-flashcards.pdf

https://lifeprint.com/

https://signily.com

https://www.slideshare.net/slideshow/numbers-in-asl/70722207#29


## Detected evidence (automated analysis)

Indexed codebase: 32 recognized source files, 31 KB.
- CSS (language) — detected in the code
- HTML (language) — detected in the code
- JavaScript (language) — detected in the code
- React (technology) — detected in the code
- TypeScript (language) — detected in the code

## Codebase structure (from repository index)

### Files (39 of 39)

```
README.md
vision-talks/.gitignore
vision-talks/eslint.config.js
vision-talks/index.html
vision-talks/lefthook.yml
vision-talks/package.json
vision-talks/README.md
vision-talks/src/App.css
vision-talks/src/App.jsx
vision-talks/src/index.css
vision-talks/src/main.jsx
vision-talks/src/pages/DictPage.jsx
vision-talks/src/pages/HomePage.jsx
vision-talks/vite.config.js
vision/.gitignore
vision/eslint.config.js
vision/index.html
vision/package.json
vision/README.md
vision/src/App.css
vision/src/App.tsx
vision/src/components/Button.tsx
vision/src/components/Card.css
vision/src/components/Card.tsx
vision/src/components/ObjDetect.css
vision/src/components/ObjectDetection.tsx
vision/src/index.css
vision/src/main.tsx
vision/src/pages/Detect.tsx
vision/src/pages/Dict.css
vision/src/pages/DictPage.tsx
vision/src/pages/HomePage.tsx
vision/src/pages/Word.css
vision/src/pages/WordPage.tsx
vision/src/vite-env.d.ts
vision/tsconfig.app.json
vision/tsconfig.json
vision/tsconfig.node.json
vision/vite.config.ts
```

### Dependencies

- vision-talks/package.json: @biomejs/biome@1.9.4, lefthook@^1.7.22, react-router-dom@^6.27.0
- vision/package.json: @eslint/js@^9.11.1, @tensorflow-models/coco-ssd@^2.2.3, @tensorflow-models/hand-pose-detection@^2.0.1, @tensorflow-models/handpose@^0.1.0, @tensorflow/tfjs@^4.21.0, @tensorflow/tfjs-backend-webgl@^4.21.0, @types/react@^18.3.10, @types/react-dom@^18.3.0, @vitejs/plugin-react-swc@^3.5.0, eslint@^9.11.1, eslint-plugin-react-hooks@^5.1.0-rc.0, eslint-plugin-react-refresh@^0.4.12, globals@^15.9.0, react@^18.3.1, react-dom@^18.3.1, react-router-dom@^6.27.0, typescript@^5.5.3, typescript-eslint@^8.7.0, vite@^5.4.9

### Recent commits (newest first)

- Merge remote-tracking branch 'refs/remotes/origin/main'
- Fixed Object Detection
- edited Eat
- Add Numbers
- Card size changes
- Update README.md
- Merge branch 'main' of https://github.com/aghosh376/vision-talks
- New word diagrams
- Merge remote-tracking branch 'refs/remotes/origin/main'
- Adjust Homepage Css
- words are now correct file type
- Added more words
- Update README.md
- Update README.md
- added link to readme.md
- Fixed card text size
- Added "tired" word
- Fix css home
- Merge branch 'main' of https://github.com/aghosh376/vision-talks
- updating link and adding to readme.md

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

### vision-talks/package.json

```
{
  "devDependencies": {
    "@biomejs/biome": "1.9.4",
    "lefthook": "^1.7.22"
  },
  "dependencies": {
    "react-router-dom": "^6.27.0"
  }
}

```

### vision/package.json

```
{
  "name": "vision",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@tensorflow-models/coco-ssd": "^2.2.3",
    "@tensorflow-models/hand-pose-detection": "^2.0.1",
    "@tensorflow-models/handpose": "^0.1.0",
    "@tensorflow/tfjs": "^4.21.0",
    "@tensorflow/tfjs-backend-webgl": "^4.21.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.27.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.11.1",
    "@types/react": "^18.3.10",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^9.11.1",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.12",
    "globals": "^15.9.0",
    "typescript": "^5.5.3",
    "typescript-eslint": "^8.7.0",
    "vite": "^5.4.9"
  }
}

```

### vision-talks/src/main.jsx

```javascript
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import './index.css'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

```

### vision/src/main.tsx

```typescript
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

```

### vision-talks/src/App.jsx

```javascript
import { useState } from 'react'
/*import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'*/
import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import HomePage from './pages/HomePage';
import DictPage from './pages/DictPage';


function App() {
  const [count, setCount] = useState(0)

  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/dict">Dict</Link>
            </li>
            
          </ul>
        </nav>

        {/* Define your routes here */}
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/dict" element={<DictPage />} />
          
        </Routes>
      </div>
    </Router>
  )
}

export default App

```

### vision/src/App.tsx

```typescript
//import { useState } from 'react'
//import React from 'react'
import { BrowserRouter as Router, Routes, Route, NavLink } from "react-router-dom";
import HomePage from './pages/HomePage';
import DictPage from './pages/DictPage';
import WordPage from './pages/WordPage';
import DetectionPage from './pages/Detect';

import './App.css'



function App() {

  return (
    <Router>
      <div>
        <nav>
          <ul className="nav-list">
            <li className="nav-item">
              <NavLink
                to="/"
                className={({ isActive }) => (isActive ? 'active-link' : 'nav-link')}
                end
              >
                Home
              </NavLink>
            </li>
            <li className="nav-item">
              <NavLink
                to="/dict"
                className={({ isActive }) => (isActive ? 'active-link' : 'nav-link')}
              >
                Spelling
              </NavLink>
            </li>
            <li className="nav-item">
              <NavLink
                to="/words"
                className={({ isActive }) => (isActive ? 'active-link' : 'nav-link')}
              >
                Words
              </NavLink>
            </li>
            <li className="nav-item">
              <NavLink
                to="/detection"
                className={({ isActive }) => (isActive ? 'active-link' : 'nav-link')}
              >
                Detect
              </NavLink>
            </li>
            {/* Add more NavLinks as needed */}
          </ul>
        </nav>
          <div className="page-content">
            {/* A <Routes> looks through its children <Route>s and
                renders the first one that matches the current URL. */}
            <Routes>
              <Route path="/" element={<HomePage />} />
              <Route path="/dict" element={<DictPage />} />
              <Route path="/words" element={<WordPage />} />
              <Route path="/detection" element={<DetectionPage />} />
              {/* ... other routes */}
            </Routes>
          </div>
      </div>
    </Router>  
  )
}

export default App

```

### vision-talks/vite.config.js

```javascript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

```

### vision/vite.config.ts

```typescript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

```

### vision-talks/index.html

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vision Talks</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

```

### vision/index.html

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

```

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