Initial commit

.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+out/
+dist/
+.next/
+
+# production
+build/**
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# turbo
+.turbo
+
+.vscode

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Emil Bektimirov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,97 @@
+# Randomface
+
+Randomface is JS/React package for generating vector face-like figures from SHA-256 hash.
+
+<p align="center">
+    <picture>
+        <source media="(prefers-color-scheme: dark)" srcset="assets/example-faces/randomface-2de32b9.svg">
+        <img src="assets/example-faces/randomface-2de32b9-dark.svg" width="13%">
+    </picture>
+    <picture>
+        <source media="(prefers-color-scheme: dark)" srcset="assets/example-faces/randomface-4ebf310.svg">
+        <img src="assets/example-faces/randomface-4ebf310-dark.svg" width="13%">
+    </picture>
+    <picture>
+        <source media="(prefers-color-scheme: dark)" srcset="assets/example-faces/randomface-4eabff7.svg">
+        <img src="assets/example-faces/randomface-4eabff7-dark.svg" width="13%">
+    </picture>
+    <picture>
+        <source media="(prefers-color-scheme: dark)" srcset="assets/example-faces/randomface-5041747.svg">
+        <img src="assets/example-faces/randomface-5041747-dark.svg" width="13%">
+    </picture>
+    <picture>
+        <source media="(prefers-color-scheme: dark)" srcset="assets/example-faces/randomface-9dbf383.svg">
+        <img src="assets/example-faces/randomface-9dbf383-dark.svg" width="13%">
+    </picture>
+    <picture>
+        <source media="(prefers-color-scheme: dark)" srcset="assets/example-faces/randomface-f9ceb52.svg">
+        <img src="assets/example-faces/randomface-f9ceb52-dark.svg" width="13%">
+    </picture>
+    <picture>
+        <source media="(prefers-color-scheme: dark)" srcset="assets/example-faces/randomface-ba97117.svg">
+        <img src="assets/example-faces/randomface-ba97117-dark.svg" width="13%">
+    </picture>
+</p>
+
+## About
+
+### Why?
+
+Although various random face/avatar [generators](https://github.com/drhus/awesome-identicons) have existed for a long time, none of them provide genuine randomness in face generation. Many rely on pre-defined images of facial features combined with repetitive patterns, which diminishes the uniqueness and individuality of generated faces.
+
+Randomface takes a different approach by keeping only the positions of facial features fixed while randomizing everything else. This results in a vast range of simple abstract facial expressions, making each face unique and easily distinguishable even in large groups.
+
+And it is lightweight - it doesn't have any external dependencies and outputs a plain SVG. The only requirement is a SHA-256 hash for a face input, which should not be a problem to obtain on any modern platform.
+
+### How it works?
+
+1. Randomface expects a SHA-256 hash on input (_hashing algorithm is not included in the package_).
+
+2. The hash in decimal form is split into pairs of two-digit numbers, representing coordinates:
+
+   ```
+   10298733624955409702... => [10, 29], [87, 33], [62, 49], [55, 40], [97, 2]...
+   ```
+
+3. 100x100 square is divided into four sectors to accommodate various facial features:
+
+   <picture>
+   <source media="(prefers-color-scheme: dark)" srcset="assets/algorithm/face-areas.svg">
+   <img src="assets/algorithm/face-areas-dark.svg" width="150px">
+   </picture>
+
+4. Pairs of two-digit numbers are plotted on the square, sorted and connected in each sector:
+
+   <picture>
+   <source media="(prefers-color-scheme: dark)" srcset="assets/algorithm/face-areas-with-dots-connected.svg">
+   <img src="assets/algorithm/face-areas-with-dots-connected-dark.svg" width="150px">
+   </picture>
+
+### How to use it?
+
+Refer to [JS/TS](packages/randomface/README.md) and [React](packages/randomface-react/README.md) packages documentation
+
+### Where to use it?
+
+Besides obvious use case of a generating random avatars, randomface was actually created as a variation of [Chernoff face](https://en.m.wikipedia.org/wiki/Chernoff_face) implementation for everyday uses.
+
+Our brains are exceptionally proficient in recognizing faces, yet the same aptitude does not apply when it comes to processing textual data.
+Verifying checksums, cryptographic keys, passwords, cryptocurrency addresses, UUIDs, bank accounts, etc., through visual inspection is cognitively demanding and prone to errors.
+
+By giving the data a face, we can leverage the innate and effective process of facial recognition (enchanced with emotion detection) to handle visual verification tasks.
+
+A real world example where Chernoff face can be useful - visual verification of payment details:
+
+> Entering a bank account number manually for a money transfer can be both stressful and error-prone, particularly when dealing with payment details received via post or within copy-protected PDFs. A simple typographical error could lead to funds being mistakenly transferred to an incorrect account.
+>
+> By incorporating a visual reference, such as a Chernoff face, we can ensure the accuracy of entered data by cross-referencing it with the automatically generated information in the payment form. This additional layer of verification enhances the reliability of the transfer process and minimizes the risk of errors.
+
+<p align="center">
+    <picture>
+        <img src="assets/example-usecases/bill.svg" height="280px">
+    </picture>
+    &nbsp; &nbsp; &nbsp; &nbsp;
+    <picture>
+        <img src="assets/example-usecases/form.svg" height="280px">
+    </picture>
+</p>

apps/web/.env.development

@@ -0,0 +1 @@
+NEXT_PUBLIC_HOST=http://localhost:3000

apps/web/.env.production

@@ -0,0 +1 @@
+NEXT_PUBLIC_HOST=https://randomface.lefelys.com

apps/web/.eslintrc.js

@@ -0,0 +1,5 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  extends: ['@repo/eslint-config/next.js'],
+  ignorePatterns: ['*.config.js'],
+};

apps/web/README.md

@@ -0,0 +1,19 @@
+Randomface website.
+
+Stack: Next.js, Tailwind CSS, shadcn/ui
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

apps/web/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "stone",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

apps/web/next.config.js

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'export',
+  // reactStrictMode: false
+};
+
+module.exports = nextConfig;

apps/web/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "randomface-web",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "npx serve@latest out",
+    "lint": "next lint --fix"
+  },
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "@heroicons/react": "^2.1.1",
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-collapsible": "^1.0.3",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-hover-card": "^1.0.7",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-progress": "^1.0.3",
+    "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toggle": "^1.0.3",
+    "@radix-ui/react-toggle-group": "^1.0.4",
+    "@types/crypto-js": "^4.2.2",
+    "@types/lodash": "^4.14.202",
+    "@types/svgdom": "^0.1.2",
+    "canvg": "^4.0.1",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "cmdk": "^0.2.0",
+    "crypto-js": "^4.2.0",
+    "next-themes": "^0.2.1",
+    "randomface-react": "workspace:^",
+    "react": "^18",
+    "react-dom": "^18",
+    "tailwind-merge": "^2.2.0",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@repo/eslint-config": "workspace:*",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.0.1",
+    "eslint": "^8.56.0",
+    "eslint-config-next": "14.0.4",
+    "eslint-plugin-unused-imports": "^3.0.0",
+    "next": "14.2.3",
+    "postcss": "^8",
+    "tailwindcss": "^3.3.0",
+    "typescript": "^5"
+  },
+  "license": "MIT"
+}

apps/web/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

apps/web/src/app/globals.css

@@ -0,0 +1,76 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 20 14.3% 4.1%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 20 14.3% 4.1%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 20 14.3% 4.1%;
+
+    --primary: 24 9.8% 10%;
+    --primary-foreground: 60 9.1% 97.8%;
+
+    --secondary: 60 4.8% 95.9%;
+    --secondary-foreground: 24 9.8% 10%;
+
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 60 9.1% 97.8%;
+
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 20 14.3% 4.1%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+
+    --primary: 60 9.1% 97.8%;
+    --primary-foreground: 24 9.8% 10%;
+
+    --secondary: 12 6.5% 15.1%;
+    --secondary-foreground: 60 9.1% 97.8%;
+
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 24 5.7% 82.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}