# Project export: SafeSight

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: From site to safety—automated real-time shield for worker safety.
- Devpost: https://devpost.com/software/visiocare
- GitHub: https://github.com/akaashkolluri/safesight
- Demo: https://safesight.vercel.app/
- Team: 1 GitHub contributor(s) — Akaash Kolluri (5 commits)

## Devpost submission (written by the team)

### Inspiration

Annually, 2.78 million workers die due to work-related accidents and diseases, with 374 million more facing non-fatal incidents. That's 7,500 daily deaths, surpassing those from road accidents, war, and HIV/AIDS combined. (Source here) When workplace injuries do happen, many of them go unreported and workers are not compensated due to retributive fears as well as extensive time lost while filling worker comp claims.

### What it does

SafeSight's AI-based technology addresses workplace injury through a combination of real-time monitoring, timely incident detection, and automated generation of accurate injury reports, ethically protecting human safety and efficiency. Our product vertically integrates and automates all parts of worker compensation, which can be summarized in 3 S’s. STOP: Forget waiting for someone to notice the danger. SafeSight reviews security footage in real-time to instantly flag potential risks and threats to workplace environments. If spotted, SafeSight instantly alerts relevant personnel, ensuring prompt preventative action is taken. SIGHT: In the unfortunate circumstance that a workplace accident occurs, SafeSight is the first to know. Our computer vision solution not only detects the incident, but also ensures that workers involved get the necessary help and treatment from the right people, whether that be medical staff, security, or management, ASAP. SETTLE: Post-event, SafeSight helps you process and understand what happened. Our systems generate a detailed report based on footage, capturing essential data that aids in both addressing current incidents and preventing future ones.

### How we built it

Front-end: React (JavaScript, HTML/CSS) Back-end: Flask, Google Firebase, TensorFlow We use React.js to create the front-end of SafeSight. When user’s upload video footage, it is stored in firebase. We created a backend API using flask that then processes the video footage. We trained ML models using TensorFlow.

## README (from the GitHub repository)

# VisioComp

## Inspiration

Annually, 2.78 million workers die due to work-related accidents and diseases, with 374 million more facing non-fatal incidents. That's 7,500 daily deaths, surpassing those from road accidents, war, and HIV/AIDS combined. [(Source here)] (https://unglobalcompact.org/take-action/safety-andhealth)


When workplace injuries do happen, many of them go unreported and workers are not compensated due to workers fearing workplaces or issues with the administrative logistics of filling worker comp claims. 


## What it does

SafeSight's AI-based technology addresses workplace injury through a combination of real-time monitoring, timely incident detection, and automated generation of accurate injury reports, ethically protecting human safety and efficiency.

Our product vertically integrates and automates all parts of worker compensation, which can be summarized in 3 S’s. 


STOP: Forget waiting for someone to notice the danger. SafeSight reviews security footage in real-time to instantly flag potential risks and threats to workplace environments. If spotted, 
SafeSight instantly alerts relevant personnel, ensuring prompt preventative action is taken.

SIGHT: In the unfortunate circumstance that a workplace accident occurs, SafeSight is the first to know. Our computer vision solution not only detects the incident, but also ensures that workers involved get the necessary help and treatment from the right people, whether that be medical staff, security, or management, ASAP.

SETTLE: Post-event, SafeSight helps you process and understand what happened. Our systems generate a detailed report based on footage, capturing essential data that aids in both addressing current incidents and preventing future ones.


## How we built it

Front-end: React (JavaScript, HTML/CSS)

Back-end: Flask, Google Firebase, TensorFlow

We use React.js to create the front-end of SafeSight. When user’s upload video footage, it is stored in firebase. We created a backend API using flask that then processes the video footage. We trained ML models using TensorFlow.


## Detected evidence (automated analysis)

Indexed codebase: 26 recognized source files, 47 KB.
- CSS (language) — detected in the code
- Firebase (technology) — detected in the code
- Flask (technology) — 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
- React (technology) — detected in the code
- Python (language) — claimed on Devpost, not found in the code

## Codebase structure (from repository index)

### Files (32 of 32)

```
README.md
SafeSight - Backend/Flask API/requirements.txt
SafeSight - Backend/Flask API/vercel.json
SafeSight - Backend/ML Models/ModelTrain
SafeSight - Frontend/package.json
SafeSight - Frontend/public/index.html
SafeSight - Frontend/public/manifest.json
SafeSight - Frontend/public/robots.txt
SafeSight - Frontend/README.md
SafeSight - Frontend/src/App.css
SafeSight - Frontend/src/App.js
SafeSight - Frontend/src/App.test.js
SafeSight - Frontend/src/components/About.js
SafeSight - Frontend/src/components/Analyze.js
SafeSight - Frontend/src/components/FileDownload.js
SafeSight - Frontend/src/components/Footer.js
SafeSight - Frontend/src/components/Header.js
SafeSight - Frontend/src/components/History.js
SafeSight - Frontend/src/components/Home.js
SafeSight - Frontend/src/components/Identify.js
SafeSight - Frontend/src/components/InsightTable.js
SafeSight - Frontend/src/components/Report.js
SafeSight - Frontend/src/components/SinglePhoto.js
SafeSight - Frontend/src/components/UploadBox.js
SafeSight - Frontend/src/index.css
SafeSight - Frontend/src/index.js
SafeSight - Frontend/src/reportWebVitals.js
SafeSight - Frontend/src/setupTests.js
SafeSight - Frontend/src/styles/footer.module.css
SafeSight - Frontend/src/styles/header.module.css
SafeSight - Frontend/src/styles/home.module.css
SafeSight - Frontend/src/styles/identify.module.css
```

### Dependencies

- SafeSight - Backend/Flask API/requirements.txt: firebase-admin@==6.2.0, Flask@==3.0.0
- SafeSight - Frontend/package.json: @babel/runtime@^7.15.4, @testing-library/jest-dom@^5.17.0, @testing-library/react@^13.4.0, @testing-library/user-event@^13.5.0, antd@^5.10.2, aws-sdk@^2.1483.0, axios@^1.6.0, firebase@^10.5.2, html2canvas@^1.4.1, jspdf@^2.5.1, next@^14.0.0, openai@^3.3.0, react@^18.2.0, react-dom@^18.2.0, react-router-dom@^6.17.0, react-scripts@5.0.1, url@^0.11.3, web-vitals@^2.1.4

### Recent commits (newest first)

- Update README.md
- Update README.md
- Add files via upload
- Update README.md
- Initial commit

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

### SafeSight - Frontend/package.json

```
{
  "name": "visiocomp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/runtime": "^7.15.4",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "antd": "^5.10.2",
    "aws-sdk": "^2.1483.0",
    "axios": "^1.6.0",
    "firebase": "^10.5.2",
    "html2canvas": "^1.4.1",
    "jspdf": "^2.5.1",
    "next": "^14.0.0",
    "openai": "^3.3.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.17.0",
    "react-scripts": "5.0.1",
    "url": "^0.11.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

```

### SafeSight - Backend/Flask API/requirements.txt

```
Flask==3.0.0
firebase-admin==6.2.0
```

### SafeSight - Frontend/src/index.js

```javascript
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      {" "}
      <App />{" "}
    </BrowserRouter>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

```

### SafeSight - Frontend/src/App.js

```javascript
import logo from "./logo.svg";
import "./App.css";
import Home from "./components/Home";
import History from "./components/History";
import About from "./components/About";
import Identify from "./components/Identify";
import styles from "./styles/home.module.css";

import { BrowserRouter, Routes, Route, Router } from "react-router-dom";

function App() {
  return (
    <div className={styles.colorContainer}>
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/history" element={<History />}></Route>
        <Route path="/about" element={<About />}></Route>
        <Route path="/identify" element={<Identify />}></Route>
      </Routes>
    </div>
  );
}

export default App;

```

### SafeSight - Frontend/src/setupTests.js

```javascript
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';

```

### SafeSight - Frontend/src/App.test.js

```javascript
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

```

### SafeSight - Frontend/src/reportWebVitals.js

```javascript
const reportWebVitals = onPerfEntry => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
};

export default reportWebVitals;

```

### SafeSight - Frontend/src/index.css

```css
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

```

### SafeSight - Frontend/src/App.css

```css
body {
  font-family: "Courier New", monospace;
}
.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#form-file-upload {
  height: 16rem;
  width: 28rem;
  max-width: 100%;
  text-align: center;
  position: relative;
}

#input-file-upload {
  display: none;
}

#label-file-upload {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-width: 2px;
  border-radius: 1rem;
  border-style: dashed;
  border-color: #cbd5e1;
  background-color: #f8fafc;
}

#label-file-upload.drag-active {
  background-color: #ffffff;
}

.upload-button {
  cursor: pointer;
  padding: 0.25rem;
  font-size: 1rem;
  border: none;
  font-family: "Oswald", sans-serif;
  background-color: transparent;
}

.upload-button:hover {
  text-decoration-line: underline;
}

#drag-file-element {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

```

### SafeSight - Frontend/public/index.html

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

```

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