[web_demo] magic_color api接口封装

.gitignore

@@ -0,0 +1,32 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.vscode
+.yalc
+yalc.lock
+

README.md

@@ -0,0 +1,8 @@
+# DocumentAI Web Demo
+
+> **快速开始**
+
+1. 在此路径打开cmd工具
+2. 运行指令 npm i
+3. 运行指令 npm run dev
+4. 使用游览器打开对应的ip地址

compomemts.d.ts

@@ -0,0 +1,10 @@
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "documentaiwebdemo",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.2.2",
+    "element-plus": "^2.2.28",
+    "less": "^4.1.3",
+    "pinia": "^2.0.29",
+    "vue": "^3.2.45",
+    "vue-router": "^4.1.6"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.18",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "typescript": "^4.9.3",
+    "unplugin-auto-import": "^0.12.1",
+    "unplugin-vue-components": "^0.22.12",
+    "vite": "^4.0.0",
+    "vue-tsc": "^1.0.11"
+  }
+}

src/App.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import HelloWorld from './components/HelloWorld.vue'
+import MainView from "@/MainView.vue";
+</script>
+
+<template>
+  <MainView></MainView>
+</template>
+
+<style scoped>
+
+</style>

src/MainView.vue

@@ -0,0 +1,25 @@
+<template>
+  <el-container>
+    <el-aside>
+      <MenuView></MenuView>
+    </el-aside>
+    <el-container>
+      <!-- <el-header>Header</el-header> -->
+      <el-main>
+        <RouterView></RouterView>
+      </el-main>
+      <!-- <el-footer>Footer</el-footer> -->
+    </el-container>
+  </el-container>
+</template>
+
+<script setup lang="ts">
+import MenuView from "@/MenuView.vue";
+</script>
+
+<style scoped lang="less">
+.el-container {
+  height: 100%;
+  width: 100%;
+}
+</style>

src/MenuView.vue

@@ -0,0 +1,64 @@
+<template>
+  <el-row class="tac">
+    <el-col :span="24">
+      <h5 class="mb-2">DocumentAI Web Demo</h5>
+      <el-menu
+        class="el-menu-vertical-demo"
+        default-active="1"
+        @open="handleOpen"
+        @close="handleClose"
+      >
+        <el-menu-item index="1" @click="routerJump('/')">
+          <template #title>
+            <el-icon><location /></el-icon>
+            <span>Home Page</span>
+          </template>
+        </el-menu-item>
+        <el-menu-item index="2" @click="routerJump('/magicColor')">
+          <el-col :span="3">🔥</el-col>
+          <span>Magic Color</span>
+        </el-menu-item>
+        <el-menu-item index="3">
+          <span></span>
+        </el-menu-item>
+        <el-menu-item index="4">
+          <span></span>
+        </el-menu-item>
+        <el-menu-item index="5">
+          <span ></span>
+        </el-menu-item>
+        <el-menu-item index="6">
+          <span></span>
+        </el-menu-item>
+        <el-menu-item index="7">
+          <span></span>
+        </el-menu-item>
+        <el-menu-item index="8">
+          <span></span>
+        </el-menu-item>
+        <el-menu-item index="9">
+          <span></span>
+        </el-menu-item>
+      </el-menu>
+    </el-col>
+  </el-row>
+</template>
+
+<style scoped lang="less">
+
+</style>
+
+<script lang="ts" setup>
+import {
+  Menu as IconMenu,
+  Location,
+} from '@element-plus/icons-vue'
+import { routerJump } from "@/pages/main/utils/routerJump";
+
+const handleOpen = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+const handleClose = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+</script>

src/api/api.ts

@@ -0,0 +1,14 @@
+import server from "./index";
+
+interface InputData {
+  image: File;
+}
+
+interface MagciColorRes {
+  code: number;
+  image: string;
+  costTime: number;
+}
+
+export const IMMagicColor = (data: InputData):Promise<MagciColorRes> =>
+  server.post("/IM/magicColor", data);

src/api/index.ts

@@ -0,0 +1,25 @@
+import axios from "axios";
+
+const server = axios.create({
+  baseURL: "192.168.10.10:80",
+});
+
+server.interceptors.request.use(
+  (config) => {
+    return config;
+  },
+  (err) => {
+    return Promise.reject(err);
+  }
+);
+
+server.interceptors.response.use(
+  (result) => {
+    return result.data;
+  },
+  (err) => {
+    return Promise.reject(err);
+  }
+);
+
+export default server;

src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

src/components.d.ts

@@ -0,0 +1,10 @@
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

src/components/HelloWorld.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Install
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+    in your IDE for a better DX
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

src/index.html

@@ -0,0 +1,13 @@
+<!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>DocumentAI Web Demo</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="main.ts"></script>
+  </body>
+</html>

src/main.ts

@@ -0,0 +1,13 @@
+import { createApp } from "vue";
+import ElementPlus from "element-plus";
+import "element-plus/dist/index.css";
+import App from "./App.vue";
+import router from "./pages/main/router";
+import { createPinia } from "pinia";
+
+const app = createApp(App);
+
+app.use(createPinia());
+app.use(ElementPlus);
+app.use(router);
+app.mount("#app");

src/pages/main/router/index.ts

@@ -0,0 +1,21 @@
+import { createRouter, createWebHashHistory } from "vue-router";
+import magicColor from "@/pages/main/views/ImageProcess/magicColor.vue";
+import DocumentAIIntroduction from "@/pages/main/views/homePage.vue";
+
+const router = createRouter({
+  history: createWebHashHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: "/",
+      name: "main",
+      component: DocumentAIIntroduction,
+    },
+    {
+      path: "/magicColor",
+      name: "magicColor",
+      component: magicColor,
+    }
+  ],
+});
+
+export default router;

src/pages/main/utils/routerJump.ts

@@ -0,0 +1,5 @@
+import router from "@/pages/main/router";
+
+export function routerJump(target: string) {
+  router.push(target);
+}

src/pages/main/views/ImageProcess/magicColor.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="demo-image__placeholder">
+    <div class="block">
+      <el-col :span="20">
+        <el-row>
+          <el-input type="file" v-model="fileName" @change="uploadImg"></el-input>
+        </el-row>
+        <el-row>
+          <!-- 用于展示图片 -->
+          <img id="show-img" class="show-area" />
+          <el-button type="primary" @click="predict" v-show="fileName">Predict</el-button>
+          <!-- 用于存放真实图片 -->
+          <img id="raw-img" style="display: none" />
+        </el-row>
+      </el-col>
+    </div>
+    <div class="block">
+      <el-col :span="20">
+        <el-row v-loading="loading" class="small-title">
+          <h2 v-if="loading">处理中</h2>
+        </el-row>
+        <el-row>
+          <section v-show="!loading"> 推理共耗时：{{ predictTime }} s</section>
+        </el-row>
+        <el-row v-show="!loading">
+          <img id="predict-img" class="show-area" />
+        </el-row>
+      </el-col>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+import { IMMagicColor } from '../../../../api/api'
+
+let loading = ref(false)
+const fileName = ref(null);
+
+let predictTime = ref(0)
+
+const canvas = ref(null as unknown as HTMLCanvasElement);
+
+onMounted(async () => {
+  canvas.value = document.getElementById("canvas") as HTMLCanvasElement;
+});
+
+const uploadImg = () => {
+  const reader = new FileReader();
+  const showImg = document.getElementById("show-img") as HTMLImageElement;
+  const rawImg = document.getElementById("raw-img") as HTMLImageElement;
+  const predictImg = document.getElementById("predict-img") as HTMLImageElement;
+  const inputElement = document
+    .getElementsByClassName("el-input")[0]
+    .getElementsByTagName("input")[0];
+
+  try {
+    const file = inputElement.files![0];
+    reader.onload = () => {
+      showImg.src = URL.createObjectURL(file);
+      rawImg.src = URL.createObjectURL(file);
+    };
+    reader.readAsDataURL(file);
+  } catch (err) {
+    console.error(err);
+  }
+};
+
+const predict = () => {
+  const showImg = document.getElementById("show-img") as HTMLImageElement;
+  const predictImg = document.getElementById("predict-img") as HTMLImageElement;
+  const inputElement = document
+    .getElementsByClassName("el-input")[0]
+    .getElementsByTagName("input")[0];
+  const file = inputElement.files![0];
+  console.log(file)
+
+  loading.value = !loading.value
+  setTimeout(() => {
+    loading.value = !loading.value
+    predictImg.src = "https://cdn.pixabay.com/photo/2021/03/14/18/03/cat-6095007_1280.jpg"
+    predictTime.value = Math.ceil(Math.random() * 10);
+  }, 2000);
+
+  // IMMagicColor({
+  //   image: file,
+  // }).then(res => {
+  //   console.log(res.code)
+  //   predictImg.src = res.image
+  //   predictTime.value = res.costTime
+
+  //   loading.value = !loading.value
+  // })
+}
+
+let src = ''
+</script>
+
+<style scoped>
+.demo-image__placeholder .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px var(--el-border-color);
+  display: inline-block;
+  width: 50%;
+  box-sizing: border-box;
+  vertical-align: top;
+}
+
+.demo-image__placeholder .demonstration {
+  display: block;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+
+.demo-image__placeholder .el-image {
+  padding: 0 5px;
+  max-width: 300px;
+  max-height: 200px;
+}
+
+.demo-image__placeholder.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: var(--el-fill-color-light);
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+}
+
+.demo-image__placeholder .dot {
+  animation: dot 2s infinite steps(3, start);
+  overflow: hidden;
+}
+
+.show-area {
+  width: 100%;
+}
+</style>

src/pages/main/views/homePage.vue

@@ -0,0 +1,23 @@
+<template>
+  <h1>DocumentAI</h1>
+</template>
+
+<script setup lang="ts">
+import { openWindow } from "@/utils/openWindow";
+</script>
+
+<style scoped lang="less">
+img {
+  width: 100%;
+  height: 200px;
+  background-position: center center;
+}
+
+.blue {
+  background-color: #479AC7;
+}
+
+.white_text {
+  color: white;
+}
+</style>

src/style.css

@@ -0,0 +1,81 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

src/utils/openWindow.ts

@@ -0,0 +1,8 @@
+const domain = window.document.location.href.slice(
+  0,
+  window.document.location.href.indexOf("main")
+);
+
+export function openWindow(path: string) {
+  window.open(domain + path, "_blank");
+}

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "env.d.ts", "src/**/*", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+import { fileURLToPath, URL } from "node:url";
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  root: "src/",
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+})