Merge pull request #173 from DigitalSlideArchive/vue-frontend

Vue frontend
DigitalSlideArchive · Mar 12, 2024 · add5404 · add5404
2 parents 28dad54 + 2cfcf10
commit add5404
Show file tree

Hide file tree

Showing 50 changed files with 3,659 additions and 716 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,12 @@
+# Build artifacts
+/imagedephi/web_static/
+
+# Developer tools
 .envrc
 .vscode/*
-# Redacted Images
+*/web_static/*
+
+# Sample Redacted Images
 */REDACTED_*
 */Redacted_*
 Redacted_*/

diff --git a/client/.env.development b/client/.env.development
@@ -0,0 +1,2 @@
+# This could leak to production. Should only be used in DEBUG mode for FastAPI
+VITE_APP_API_URL=http://127.0.0.1:8000
diff --git a/client/.eslintrc.cjs b/client/.eslintrc.cjs
@@ -0,0 +1,20 @@
+/* eslint-env node */
+
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:vue/vue3-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+  ],
+  parser: "vue-eslint-parser",
+  parserOptions: {
+    parser: "@typescript-eslint/parser",
+  },
+  plugins: ["@typescript-eslint"],
+
+};
diff --git a/client/.gitignore b/client/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules/*
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/client/README.md b/client/README.md
@@ -0,0 +1,21 @@
+## Development
+For efficient front end developement in the project root run:
+
+   ```bash
+   export DEBUG=True
+   hypercorn --reload imagedephi.gui.app:app
+   ```
+
+In a new terminal:
+
+```bash
+cd client/
+yarn dev
+```
+
+**Note**
+`imagedephi gui` will break and tests will fail in debug mode. Remember to reset variable when done with development.
+
+```bash
+export DEBUG=False
+```
diff --git a/client/index.html b/client/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ImageDePHI</title>
+  </head>
+  <body class="bg-base-300 min-h-screen">
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/client/package.json b/client/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "imagedephi",
+  "private": true,
+  "version": "0.0.0",
+  "license": "Apache-2.0",
+  "type": "module",
+  "scripts": {
+    "lint:tsc": "vue-tsc --noEmit",
+    "lint:check": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore --fix ",
+    "lint:format": "prettier src  --write",
+    "lint": "npm-run-all lint:*",
+    "dev": "NODE_ENV=development vite --port 8080",
+    "build:clean": "rimraf ../imagedephi/web_static",
+    "build:compile": "vite build --outDir ../imagedephi/web_static",
+    "build": "npm-run-all build:clean build:compile"
+  },
+  "dependencies": {
+    "eslint-config-prettier": "^9.1.0",
+    "remixicon": "^3.6.0",
+    "vue": "^3.3.4"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/parser": "^6.16.0",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "autoprefixer": "^10.4.16",
+    "daisyui": "^4.0.7",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.31",
+    "rimraf": "^5.0.5",
+    "eslint": "^8.56.0",
+    "eslint-plugin-vue": "^9.19.2",
+    "prettier": "^3.1.1",
+    "tailwindcss": "^3.3.5",
+    "typescript": "^5.3.3",
+    "vite": "^4.4.5",
+    "vue-tsc": "^1.8.5"
+  }
+}
diff --git a/client/postcss.config.js b/client/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/imagedephi/assets/logo.png → client/public/logo.png b/imagedephi/assets/logo.png → client/public/logo.png
diff --git a/client/src/App.vue b/client/src/App.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import HomePage from "./HomePage.vue";
+</script>
+
+<template>
+  <HomePage />
+</template>
diff --git a/client/src/HomePage.vue b/client/src/HomePage.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+import { redactImages } from "./api/rest";
+import { selectedDirectories } from "./store/directoryStore";
+
+import MenuSteps from "./components/MenuSteps.vue";
+import FileBrowser from "./components/FileBrowser.vue";
+
+const inputModal = ref(null);
+const outputModal = ref(null);
+const redacting = ref(false);
+const progress = ref({
+  count: 0,
+  max: 0,
+});
+
+const wsBase = import.meta.env.VITE_APP_API_URL
+  ? new URL(import.meta.env.VITE_APP_API_URL)
+  : new URL(import.meta.url);
+
+const ws = new WebSocket("ws:" + wsBase.host + "/ws");
+
+ws.onmessage = (event) => {
+  const data = JSON.parse(event.data);
+  progress.value = {
+    count: data.count,
+    max: data.max,
+  };
+};
+</script>
+
+<template>
+  <div class="flex">
+    <input id="side-drawer" type="checkbox" class="drawer-toggle" />
+    <div class="flex max-w-md">
+      <div :class="`pl-4 py-4 ${redacting ? 'opacity-50' : ''}`">
+        <div class="bg-base-100 drop-shadow-xl rounded flex flex-col">
+          <div class="flex justify-between content-center p-4 border-b">
+            <div class="max-h6 w-auto self-center">
+              <img src="/logo.png" />
+            </div>
+            <div class="flex items-center space-y-0.5">
+              <a class="btn btn-ghost btn-square btn-sm">
+                <i class="ri-side-bar-line text-lg text-neutral"></i>
+              </a>
+            </div>
+          </div>
+          <MenuSteps
+            :step-number="1"
+            step-title="Input Directory"
+            help-text="Location of the images you’d like to process."
+            :input-modal="inputModal"
+          />
+          <MenuSteps
+            :step-number="2"
+            step-title="Output Directory"
+            help-text="Location of the images after they are processed."
+            :output-modal="outputModal"
+          />
+          <FileBrowser
+            ref="inputModal"
+            :modal-id="'inputDirectory'"
+            :title="'Input Directory'"
+          />
+          <FileBrowser
+            ref="outputModal"
+            :modal-id="'outputDirectory'"
+            :title="'Output Directory'"
+          />
+          <button
+            type="submit"
+            class="btn btn-wide bg-accent m-auto"
+            :disabled="redacting"
+            @click="
+              redactImages(
+                selectedDirectories.inputDirectory,
+                selectedDirectories.outputDirectory,
+              ),
+                (redacting = true)
+            "
+          >
+            De-phi Images
+          </button>
+        </div>
+      </div>
+    </div>
+    <div v-if="redacting" class="card w-96 bg-base-100 m-auto">
+      <div class="card-body">
+        <h2 class="card-title">Redaction in progress:</h2>
+        <p>
+          Redacting image {{ progress.count }} of {{ progress.max }} images.
+        </p>
+        <progress
+          v-if="redacting"
+          class="progress progress-primary"
+          :value="progress.count"
+          :max="progress.max"
+        ></progress>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/client/src/api/rest.ts b/client/src/api/rest.ts
@@ -0,0 +1,33 @@
+const basePath = import.meta.env.VITE_APP_API_URL
+  ? import.meta.env.VITE_APP_API_URL
+  : "";
+
+export async function getDirectoryInfo(path?: string) {
+  const selectedPath = path ? path : "/";
+  const response = await fetch(
+    `${basePath}/directory/?directory=${selectedPath}`,
+    {
+      method: "GET",
+      mode: "cors",
+    },
+  );
+  return response.json().then((data) => {
+    return data[0].directory_data;
+  });
+}
+
+export async function redactImages(
+  inputDirectory: string,
+  outputDirectory: string,
+) {
+  const response = await fetch(
+    `${basePath}/redact/?input_directory=${inputDirectory}&output_directory=${outputDirectory}`,
+    {
+      method: "POST",
+      mode: "cors",
+    },
+  );
+  return response.json().then((data) => {
+    return data;
+  });
+}
diff --git a/client/src/assets/logo.png b/client/src/assets/logo.png
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# This could leak to production. Should only be used in DEBUG mode for FastAPI
		VITE_APP_API_URL=http://127.0.0.1:8000