Merge pull request #3 from gear-foundation/vt-digit-recognition-frontend

digit-recognition frontend
gear-foundation · Feb 6, 2025 · d4259ca · d4259ca
2 parents 90add8e + 8970124
commit d4259ca
Show file tree

Hide file tree

Showing 53 changed files with 7,225 additions and 4 deletions.
diff --git a/.github/workflows/CI-CD_digit-recognition-frontend.yaml b/.github/workflows/CI-CD_digit-recognition-frontend.yaml
@@ -75,10 +75,10 @@ jobs:
           push: true
           build-args: |
             NODE_ENV=${{ env.NODE_ENV }}
-            VITE_WALLET_CONNECT_PROJECT_ID=${{ env.VITE_WALLET_CONNECT_PROJECT_ID }}
-            VITE_GEAR_API_NODE=${{ env.VITE_GEAR_API_NODE }}
-            VITE_ETH_NODE_ADDRESS=${{ env.VITE_ETH_NODE_ADDRESS }}
-            VITE_CONTRACT_ADDRESS=${{ env.VITE_CONTRACT_ADDRESS }}
+            VITE_WALLET_CONNECT_PROJECT_ID=${{ secrets.VITE_WALLET_CONNECT_PROJECT_ID_DIGIT_RECOGNITION }}
+            VITE_GEAR_API_NODE=${{ secrets.VITE_GEAR_API_NODE }}
+            VITE_ETH_NODE_ADDRESS=${{ secrets.VITE_ETH_NODE_ADDRESS }}
+            VITE_CONTRACT_ADDRESS_DIGIT_RECOGNITION=${{ secrets.VITE_CONTRACT_ADDRESS_DIGIT_RECOGNITION }}
           tags: ${{ needs.prepair.outputs.image_name }}
 
   deploy-to-k8s:

diff --git a/digit-recognition/frontend/.env.example b/digit-recognition/frontend/.env.example
@@ -0,0 +1,4 @@
+VITE_WALLET_CONNECT_PROJECT_ID=
+VITE_GEAR_API_NODE=
+VITE_ETH_NODE_ADDRESS=
+VITE_CONTRACT_ADDRESS_DIGIT_RECOGNITION=
diff --git a/digit-recognition/frontend/.gitignore b/digit-recognition/frontend/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.env
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/digit-recognition/frontend/Dockerfile b/digit-recognition/frontend/Dockerfile
@@ -0,0 +1,30 @@
+FROM node:18-alpine
+
+WORKDIR /opt
+
+RUN apk add --no-cache xsel
+
+COPY package.json yarn.lock ./
+
+RUN yarn install --frozen-lockfile
+
+COPY . .
+
+ARG VITE_WALLET_CONNECT_PROJECT_ID \
+    VITE_GEAR_API_NODE \
+    VITE_ETH_NODE_ADDRESS \
+    VITE_CONTRACT_ADDRESS_DIGIT_RECOGNITION
+
+ENV VITE_WALLET_CONNECT_PROJECT_ID=${VITE_WALLET_CONNECT_PROJECT_ID} \
+    VITE_CONTRACT_ADDRESS_DIGIT_RECOGNITION=${VITE_CONTRACT_ADDRESS_DIGIT_RECOGNITION} \
+    VITE_GEAR_API_NODE=${VITE_GEAR_API_NODE} \
+    VITE_ETH_NODE_ADDRESS=${VITE_ETH_NODE_ADDRESS} \
+    DISABLE_ESLINT_PLUGIN=true
+
+RUN yarn build
+
+RUN npm install --global serve
+
+EXPOSE 4173
+
+CMD ["serve", "-s", "/opt/dist"]
diff --git a/digit-recognition/frontend/README.md b/digit-recognition/frontend/README.md
@@ -0,0 +1,23 @@
+# AI Image Recognition
+
+## Description
+
+React application of AI Image Recognition.
+
+## Getting started
+
+### Install packages:
+
+```sh
+yarn install
+```
+
+### Declare environment variables:
+
+Create `.env` file, `.env.example` will let you know what variables are expected.
+
+### Run the app:
+
+```sh
+yarn start
+```
diff --git a/digit-recognition/frontend/eslint.config.js b/digit-recognition/frontend/eslint.config.js
@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
diff --git a/digit-recognition/frontend/favicon.png b/digit-recognition/frontend/favicon.png
diff --git a/digit-recognition/frontend/index.html b/digit-recognition/frontend/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/favicon.png" sizes="any" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AI Image Recognition</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/digit-recognition/frontend/package.json b/digit-recognition/frontend/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "distributed-computation",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@polkadot/types": "14.3.1",
+    "@reown/appkit": "^1.6.0",
+    "@reown/appkit-adapter-wagmi": "^1.6.0",
+    "@tanstack/react-query": "^5.59.20",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "wagmi": "^2.12.29"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.13.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "globals": "^15.11.0",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.11.0",
+    "vite": "^5.4.10",
+    "vite-plugin-checker": "0.8.0",
+    "vite-plugin-svgr": "^4.3.0",
+    "sass": "1.62.0"
+  }
+}
diff --git a/digit-recognition/frontend/src/App.module.scss b/digit-recognition/frontend/src/App.module.scss
@@ -0,0 +1,9 @@
+.connectionWrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 48px;
+  padding-top: 0;
+  min-height: calc(100vh - 78px);
+}
diff --git a/digit-recognition/frontend/src/App.tsx b/digit-recognition/frontend/src/App.tsx
@@ -0,0 +1,30 @@
+import "./index.css";
+import { useAccount } from "wagmi";
+
+import { WalletButton, Header, Layout } from "@/components";
+import { Recognition } from "./components/recognition/Recognition";
+import { ETH_CHAIN_ID } from "./consts";
+import styles from "./App.module.scss";
+
+function App() {
+  const ethAccount = useAccount();
+  const isConnected = Boolean(
+    ethAccount.chain && ethAccount.chain.id === ETH_CHAIN_ID
+  );
+
+  return (
+    <>
+      <Header />
+      {!isConnected && (
+        <Layout className={styles.connectionWrapper}>
+          <h1>AI Image Recognition</h1>
+
+          <WalletButton />
+        </Layout>
+      )}
+      {isConnected && <Recognition />}
+    </>
+  );
+}
+
+export default App;
diff --git a/digit-recognition/frontend/src/assets/icons/burger-menu.svg b/digit-recognition/frontend/src/assets/icons/burger-menu.svg
diff --git a/digit-recognition/frontend/src/assets/icons/cross.svg b/digit-recognition/frontend/src/assets/icons/cross.svg
diff --git a/digit-recognition/frontend/src/assets/icons/document-copy.svg b/digit-recognition/frontend/src/assets/icons/document-copy.svg
diff --git a/digit-recognition/frontend/src/assets/icons/loading.svg b/digit-recognition/frontend/src/assets/icons/loading.svg
diff --git a/digit-recognition/frontend/src/assets/logo.png b/digit-recognition/frontend/src/assets/logo.png
diff --git a/digit-recognition/frontend/src/components/header/Header.module.scss b/digit-recognition/frontend/src/components/header/Header.module.scss
@@ -0,0 +1,14 @@
+.container {
+  width: 100vw;
+  max-width: 1440px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  height: 78px;
+}
+
+.logo {
+  width: 107px;
+}
diff --git a/digit-recognition/frontend/src/components/header/Header.tsx b/digit-recognition/frontend/src/components/header/Header.tsx
@@ -0,0 +1,13 @@
+import logo from "@/assets/logo.png";
+import { WalletButton } from "../wallet/WalletButton";
+import styles from "./Header.module.scss";
+
+export const Header = () => {
+  return (
+    <header className={styles.container}>
+      <img src={logo} className={styles.logo} alt="Gear logo" />
+
+      <WalletButton />
+    </header>
+  );
+};
diff --git a/digit-recognition/frontend/src/components/index.ts b/digit-recognition/frontend/src/components/index.ts
@@ -0,0 +1,5 @@
+export { Header } from "./header/Header";
+export { Layout } from "./layout/Layout";
+export { WalletButton } from "./wallet/WalletButton";
+export { Button } from "./ui/button/Button";
+export { Card } from "./ui/card/Card";
diff --git a/digit-recognition/frontend/src/components/layout/Layout.module.scss b/digit-recognition/frontend/src/components/layout/Layout.module.scss
@@ -0,0 +1,5 @@
+.container {
+  max-width: 946px;
+  margin: 0 auto;
+  padding: 97px 20px 20px;
+}
diff --git a/digit-recognition/frontend/src/components/layout/Layout.tsx b/digit-recognition/frontend/src/components/layout/Layout.tsx
@@ -0,0 +1,11 @@
+import { clsx } from "clsx";
+import { PropsWithChildren } from "react";
+import styles from "./Layout.module.scss";
+
+type Props = PropsWithChildren & {
+  className?: string;
+};
+
+export const Layout = ({ children, className }: Props) => {
+  return <div className={clsx(styles.container, className)}>{children}</div>;
+};
diff --git a/digit-recognition/frontend/src/components/recognition/Recognition.module.scss b/digit-recognition/frontend/src/components/recognition/Recognition.module.scss
@@ -0,0 +1,21 @@
+.title {
+  padding: 0 8px;
+}
+
+.description {
+  padding: 0 8px;
+  margin-top: 40px;
+  margin-bottom: 56px;
+}
+
+.list {
+  display: flex;
+  justify-content: space-between;
+  gap: 32px;
+}
+
+@media (max-width: 768px) {
+  .list {
+    flex-direction: column;
+  }
+}
diff --git a/digit-recognition/frontend/src/components/recognition/Recognition.tsx b/digit-recognition/frontend/src/components/recognition/Recognition.tsx
@@ -0,0 +1,24 @@
+import { DigitRecognizer, CatIdentifier } from "@/features";
+import { Layout } from "@/components";
+import styles from "./Recognition.module.scss";
+
+export const Recognition = () => {
+  return (
+    <Layout>
+      <h1 className={styles.title}>AI Image Recognition</h1>
+
+      <p className={styles.description}>
+        //_Draw a digit or upload an image to experience the power of AI.
+        Gear.EXE recognition model identifies handwritten numbers (0–9) or
+        determines if an image contains cats. Submit, see results instantly, and
+        start again.
+      </p>
+
+      <div className={styles.list}>
+        <DigitRecognizer />
+
+        <CatIdentifier />
+      </div>
+    </Layout>
+  );
+};