mj-laf

Running

App Files Files Community

hujike commited on Jun 4, 2023

Commit

8f010e5

•

1 Parent(s): e4486f4

Update index.html

Browse files

Files changed (1) hide show

index.html +160 -156

index.html CHANGED Viewed

@@ -1,172 +1,176 @@
 <html>
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-  <!-- import vue -->
-  <script src="https://unpkg.com/vue@next"></script>
-  <!-- import Elm CSS -->
-  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
-  <!-- import Elm JavaScript -->
-  <script src="https://unpkg.com/element-plus"></script>
-  <!-- import axios -->
-  <script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
-  <title>mj</title>
-  <style>
-    body {
-      display: flex;
-      justify-content: center;
-      background-color: #f5f5f5;
-    }
-    #app {
-      width: 1000px;
-    }
-    .task {
-      border: 1px solid #ddd;
-      background-color: #fff;
-      border-radius: 10px;
-      margin-bottom: 20px;
-      padding: 20px;
-    }
-    image {
-      border-radius: 10px;
-    }
-  </style>
-</head>
-<body>
-  <div id="app">
-    <el-form label-position="top">
-      <el-form-item label="请输入要生成的图片内容，尽量使用英文">
-        <el-input type="textarea" v-model="question" placeholder="例如：A golden Labrador dog"></el-input>
-        <el-button style="margin-top: 10px;" type="primary" @click="submit" :loading="loading">提交</el-button>
-      </el-form-item>
-    </el-form>
-    <div class="result" style="margin-top: 10px;">
-      <h1>我的作品</h1>
-      <div v-for="(item, index) in tasks" class="task" :key="item.msg_Id">
-        <p>任务id： <el-button link type="primary">{{item.msg_Id}}</el-button> </p>
-        <p>{{item.question}}</p>
-        <p>
-          <el-button type="primary" @click="getResult(item.msg_Id)">刷新</el-button>
-        </p>
-        <template v-if="item.result">
-          <el-image fit="scale-down" lazy :src="item.result.url" :alt="item.question"></el-image>
           <p>
-            <el-button type="primary" plain @click="variation(item, 1)">V1</el-button>
-            <el-button type="primary" plain @click="variation(item, 2)">V2</el-button>
-            <el-button type="primary" plain @click="variation(item, 3)">V3</el-button>
-            <el-button type="primary" plain @click="variation(item, 4)">V4</el-button>
           </p>
-          <p>
-            <el-button type="primary" plain @click="upscale(item, 1)">U1</el-button>
-            <el-button type="primary" plain @click="upscale(item, 2)">U2</el-button>
-            <el-button type="primary" plain @click="upscale(item, 3)">U3</el-button>
-            <el-button type="primary" plain @click="upscale(item, 4)">U4</el-button>
-          </p>
-          <template v-if="item.result.upscaleUrl">
-            <h5>大图</h5>
-            <el-image fit="scale-down" lazy :src="item.result.upscaleUrl" :alt="item.question"></el-image>
           </template>
-        </template>
-      </div>
-      <h2>其他人的作品(最近10个)</h2>
-      <div v-for="item in otherCase" :key="item.id" class="task">
-        <h3>prompt：{{ formatPrompt(item.content) }}</h3>
-        <h3>time：{{ formatDate(item.timestamp) }}</h3>
-        <div v-for="attachment in item.attachments" :key="attachment.id">
-          <el-image fit="scale-down" lazy :src="attachment.url" :alt="formatPrompt(item.content)"></el-image>
         </div>
       </div>
     </div>
-  </div>
-  <script>
-    const App = {
-      data() {
-        return {
-          question: "",
-          msg_Id: "",
-          loading: false,
-          tasks: [],
-          otherCase: []
-        };
-      },
-      mounted() {
-        this.initTask()
-        this.getOtherCase()
-      },
-      methods: {
-        initTask() {
-          this.tasks = JSON.parse(window.localStorage.getItem('task') || JSON.stringify([]))
         },
-        submit() {
-          if (!this.question) {
-            this.$message.error("请输入图片内容")
-            return
-          }
-          this.msg_Id = grs()
-          this.loading = true
-          axios({
-            method: 'post',
-            url: 'https://gghfpp.laf.dev/mj-func',
-            data: {
-              type: 'imagine',
-              param: {
-                msg_Id: this.msg_Id,
-                question: this.question
-              }
-            }
-          }).then(res => {
-            console.log('[ res ] >', res)
-            this.$message.success("上传成功，正在画图，请稍后...")
-            window.localStorage.setItem('task', JSON.stringify([
-              { msg_Id: this.msg_Id, question: this.question, result: null },
-              ...this.tasks
-            ]))
-            this.initTask()
-            this.getResult(this.msg_Id)
-          }).catch(err => {
-            console.log('[ err ] >', err)
-          }).finally(() => {
-            this.loading = false
-          })
         },
-        function getResult(msg_Id) {
-  axios({
-    method: 'post',
-    url: 'https://gghfpp.laf.dev/mj-func',
-    data: {
-      type: 'retrieveMessages'
-    }
-  }).then(res => {
-    console.log('[ res ] >', res)
-    const { data } = res
-    const resIndex = data.findIndex(item => item.content.includes(msg_Id))
-    if (resIndex < 0) {
-      this.$message.success('正在努力生成，请耐心等待')
-      return
-    }
-    const { id, attachments } = data[resIndex]
-    if (!attachments.length) {
-      this.$message.success('正在努力生成，请耐心等待')
-      return
-    }
-    const { pic } = attachments[0]
-    if (pic) {
-      const myIndex = this.tasks.findIndex(item => item.msg_Id == msg_Id)
-      this.tasks[myIndex].result = { id, url: pic }
-      window.localStorage.setItem('task', JSON.stringify(this.tasks))
-    } else {
-      this.$message.success('正在努力生成，请耐心等待')
-      return
-    }
-  }).catch(err => {
-    console.log('[ err ] >', err)
-  })
-},
         variation({ result, question, msg_Id }, index) {
           console.log(result, question, index);
           // this.$message.warning('正在努力开发中...')

 <html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- import vue -->
+    <script src="https://unpkg.com/vue@next"></script>
+    <!-- import Elm CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
+    <!-- import Elm JavaScript -->
+    <script src="https://unpkg.com/element-plus"></script>
+    <!-- import axios -->
+    <script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
+    <title>mj</title>
+    <style>
+      body {
+        display: flex;
+        justify-content: center;
+        background-color: #f5f5f5;
+      }
+      #app {
+        width: 1000px;
+      }
+      .task {
+        border: 1px solid #ddd;
+        background-color: #fff;
+        border-radius: 10px;
+        margin-bottom: 20px;
+        padding: 20px;
+      }
+      image {
+        border-radius: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app">
+      <el-form label-position="top">
+        <el-form-item label="请输入要生成的图片内容，尽量使用英文">
+          <el-input type="textarea" v-model="question" placeholder="例如：A golden Labrador dog"></el-input>
+          <el-button style="margin-top: 10px;" type="primary" @click="submit" :loading="loading">提交</el-button>
+        </el-form-item>
+      </el-form>
+      <div class="result" style="margin-top: 10px;">
+        <h1>我的作品</h1>
+        <div v-for="(item, index) in tasks" class="task" :key="item.msg_Id">
+          <p>任务id：<el-button link type="primary">{{item.msg_Id}}</el-button> </p>
+          <p>{{item.question}}</p>
           <p>
+            <el-button type="primary" @click="getResult(item.msg_Id)">刷新</el-button>
           </p>
+          <template v-if="item.result">
+            <el-image fit="scale-down" lazy :src="item.result.url" :alt="item.question"></el-image>
+            <p>
+              <el-button type="primary" plain @click="variation(item, 1)">V1</el-button>
+              <el-button type="primary" plain @click="variation(item, 2)">V2</el-button>
+              <el-button type="primary" plain @click="variation(item, 3)">V3</el-button>
+              <el-button type="primary" plain @click="variation(item, 4)">V4</el-button>
+            </p>
+            <p>
+              <el-button type="primary" plain @click="upscale(item, 1)">U1</el-button>
+              <el-button type="primary" plain @click="upscale(item, 2)">U2</el-button>
+              <el-button type="primary" plain @click="upscale(item, 3)">U3</el-button>
+              <el-button type="primary" plain @click="upscale(item, 4)">U4</el-button>
+            </p>
+            <template v-if="item.result.upscaleUrl">
+              <h5>大图</h5>
+              <el-image fit="scale-down" lazy :src="item.result.upscaleUrl" :alt="item.question"></el-image>
+            </template>
           </template>
+        </div>
+        <h2>其他人的作品(最近10个)</h2>
+        <div v-for="item in otherCase" :key="item.id" class="task">
+          <h3>prompt：{{ formatPrompt(item.content) }}</h3>
+          <h3>time：{{ formatDate(item.timestamp) }}</h3>
+          <div v-for="attachment in item.attachments" :key="attachment.id">
+            <el-image fit="scale-down" lazy :src="attachment.url" :alt="formatPrompt(item.content)"></el-image>
+          </div>
         </div>
       </div>
     </div>
+    <script>
+      const App = {
+        data() {
+          return {
+            question: "",
+            msg_Id: "",
+            loading: false,
+            tasks: [],
+            otherCase: [],
+          };
         },
+        mounted() {
+          this.initTask();
+          this.getOtherCase();
         },
+        methods: {
+          initTask() {
+            this.tasks = JSON.parse(window.localStorage.getItem("task") || JSON.stringify([]));
+          },
+          submit() {
+            if (!this.question) {
+              this.$message.error("请输入图片内容");
+              return;
+            }
+            this.msg_Id = grs();
+            this.loading = true;
+            axios({
+              method: "post",
+              url: "https://gghfpp.laf.dev/mj-func",
+              data: {
+                type: "imagine",
+                param: {
+                  msg_Id: this.msg_Id,
+                  question: this.question,
+                },
+              },
+            })
+              .then((res) => {
+                console.log("[ res ] >", res);
+                this.$message.success("上传成功，正在画图，请稍后...");
+                window.localStorage.setItem(
+                  "task",
+                  JSON.stringify([{ msg_Id: this.msg_Id, question: this.question, result: null }, ...this.tasks])
+                );
+                this.initTask();
+                this.getResult(this.msg_Id);
+              })
+              .catch((err) => {
+                console.log("[ err ] >", err);
+              })
+              .finally(() => {
+                this.loading = false;
+              });
+          },
+          getResult(msg_Id) {
+            axios({
+              method: "post",
+              url: "https://gghfpp.laf.dev/mj-func",
+              data: {
+                type: "retrieveMessages",
+              },
+            })
+              .then((res) => {
+                console.log("[ res ] >", res);
+                const { data } = res;
+                const resIndex = data.findIndex((item) => item.content.includes(msg_Id));
+                if (resIndex < 0) {
+                  this.$message.success("正在努力生成，请耐心等待");
+                  return;
+                }
+                const { id, attachments } = data[resIndex];
+                if (!attachments.length) {
+                  this.$message.success("正在努力生成，请耐心等待");
+                  return;
+                }
+                const { pic } = attachments[0];
+                if (pic) {
+                  const myIndex = this.tasks.findIndex((item) => item.msg_Id == msg_Id);
+                  this.tasks[myIndex].result = { id, url: pic };
+                  window.localStorage.setItem("task", JSON.stringify(this.tasks));
+                } else {
+                  this.$message.success("正在努力生成，请耐心等待");
+                  return;
+                }
+              })
+              .catch((err) => {
+                console.log("[ err ] >", err);
+              });
+          },
         variation({ result, question, msg_Id }, index) {
           console.log(result, question, index);
           // this.$message.warning('正在努力开发中...')