Mon Sep 30 14:36:00 CST 2024 inscode

70f9dcef · superyan · 79c5bd79 · 70f9dcef · 70f9dcef · 70f9dcef
隐藏空白更改
内联并排

Showing with 234 addition and 47 deletion

index.html index.html +7 -10

package.json package.json +3 -0

public/index.html public/index.html +10 -0

src/App.vue src/App.vue +208 -34

src/main.js src/main.js +6 -3

未找到文件。
--- a/index.html
+++ b/index.html
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
+<head>
+  <meta charset="UTF-8" />
+  <title>SuperScaler</title>
+</head>
+<body>
+  <div id="app"></div>
+</body>
 </html>
--- a/package.json
+++ b/package.json
@@ -7,6 +7,9 @@
    "preview": "vite preview --port 4173"
  },
  "dependencies": {
+    "aonweb": "^2.0.3",
+    "axios": "^1.7.7",
+    "element-plus": "^2.8.4",
    "guess": "^1.0.2",
    "vue": "^3.2.37"
  },

--- a/public/index.html
+++ b/public/index.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>SuperScaler</title>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>
--- a/src/App.vue
+++ b/src/App.vue
-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
+<!-- src/App.vue -->
+<template>
+  <el-container class="app-container">
+    <el-header>
+      <h1>SuperScaler</h1>
+    </el-header>
+    <el-main>
+      <el-upload
+        class="upload-demo"
+        action=""
+        :before-upload="beforeUpload"
+        :http-request="httpRequest"
+        :on-exceed="onOversize"
+        :show-file-list="false"
+        accept="image/*"
+      >
+        <el-button type="primary">点击上传图片</el-button>
+      </el-upload>
+      <el-row justify="center" v-if="loading">
+        <el-col :span="24" class="loading-col">
+          <el-progress :percentage="progress" type="circle"></el-progress>
+          <p>正在处理，请稍候...</p>
+        </el-col>
+      </el-row>
+      <el-row justify="center" v-if="error">
+        <el-col :span="24" class="error-col">
+          <el-alert :title="error" type="error" show-icon></el-alert>
+        </el-col>
+      </el-row>
+      <el-row justify="center" v-if="resultImage">
+        <el-col :span="24" class="result-col">
+          <h2>结果：</h2>
+          <img :src="resultImage" alt="Upscaled Image" class="result-image" />
+          <el-button type="primary" @click="downloadImage">下载图片</el-button>
+        </el-col>
+      </el-row>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import { AI, User } from 'aonweb'
+import axios from 'axios'
+
+export default {
+  name: 'App',
+  data() {
+    return {
+      imageFile: null,
+      resultImage: '',
+      loading: false,
+      error: '',
+      app_key: 'YOUR_APP_KEY', // 请替换为您的 app_key
+      progress: 0,
+    }
+  },
+  methods: {
+    beforeUpload(file) {
+      const isLt30M = file.size / 1024 / 1024 < 30
+      if (!isLt30M) {
+        this.$message.error('文件大小不能超过30MB!')
+        return false
+      }
+      this.imageFile = file
+      this.Generate()
+      return false
+    },
+    httpRequest() {
+      // 由于我们在 beforeUpload 中处理了上传，这里留空
+    },
+    onOversize(file) {
+      this.$message.error('文件大小不能超过30MB!')
+    },
+    async Generate() {
+      if (!this.imageFile) {
+        this.error = '请选择一张图像文件。'
+        return
+      }
+
+      this.loading = true
+      this.error = ''
+      this.progress = 0
+      const options = {
+        app_key: this.app_key,
+        is_async: true,
+      }
+      const aonet = new AI(options)
+      const user_ = new User()
+      let user = await user_.islogin()
+
+      if (!user) {
+        user = await user_.login()
+      }
+
+      // 上传图像并获取 URL
+      let imageUploadUrl = ''
+      try {
+        const formData = new FormData()
+        formData.append('file', this.imageFile)
+
+        const uploadResponse = await axios.post(
+          'https://tmp-file.aigic.ai/api/v1/upload?expires=1800&type=image/png',
+          formData,
+          {
+            headers: {
+              'Content-Type': 'multipart/form-data',
+            },
+          }
+        )
+        const uploadResult = uploadResponse.data
+        if (uploadResult.code == 200 && uploadResult.data && uploadResult.data.length) {
+          imageUploadUrl = uploadResult.data[0]
+        } else {
+          throw new Error('图像上传失败。')
+        }
+      } catch (err) {
+        this.error = err.message
+        this.loading = false
+        return
+      }
+
+      let params = {}
+      params['real-esrgan@nightmareai'] = {
+        image: imageUploadUrl,
+        scale: 2,
+        face_enhance: false,
+      }
+
+      let res = await aonet.prediction(['real-esrgan@nightmareai'], { ...params })
+      if (res.code === 200 && res.data) {
+        let taskId = res.data.task_id
+        let timing = setInterval(async () => {
+          try {
+            let res = await aonet.task(taskId)
+            if (res.code === 200 && res.data) {
+              res = res.data
+              if (res.status !== 0) {
+                this.progress = 100
+              }
+              if (res.status == 3 || res.status == 4) {
+                let msg = (res.error && res.error) || '操作超时'
+                throw new Error(msg)
+              }
+
+              if (res.status == 2) {
+                this.resultImage = res.result['real-esrgan@nightmareai'][0]
+                this.loading = false
+                clearInterval(timing)
+              }
+            }
+            if (res.code === 201) {
+              clearInterval(timing)
+              throw new Error(res.message)
+            }
+          } catch (error) {
+            this.error = error.message
+            this.loading = false
+            clearInterval(timing)
+          }
+        }, 1000)
+      } else {
+        this.error = res.message || '请求失败。'
+        this.loading = false
+      }
+    },
+    downloadImage() {
+      const link = document.createElement('a')
+      link.href = this.resultImage
+      link.download = 'upscaled-image.png'
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+    },
+  },
+}
 </script>

-<template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+<style>
+.app-container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}

-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
+.el-header {
+  background-color: #409eff;
+  color: white;
+  text-align: center;
+  padding: 20px;
+}

-  <main>
-    <TheWelcome />
-  </main>
-</template>
+.el-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}

-<style scoped>
-header {
-  line-height: 1.5;
+.upload-demo {
+  margin-top: 20px;
 }

-.logo {
-  display: block;
-  margin: 0 auto 2rem;
+.loading-col {
+  text-align: center;
 }

-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
+.error-col {
+  margin-top: 20px;
+}

-  .logo {
-    margin: 0 2rem 0 0;
-  }
+.result-col {
+  text-align: center;
+  margin-top: 20px;
+}

-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
+.result-image {
+  max-width: 80%;
+  height: auto;
+  margin-bottom: 20px;
 }
 </style>
--- a/src/main.js
+++ b/src/main.js
+// src/main.js
 import { createApp } from 'vue'
 import App from './App.vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'

-import './assets/main.css'
-
-createApp(App).mount('#app')
+const app = createApp(App)
+app.use(ElementPlus)
+app.mount('#app')