Wed Jan 31 10:50:00 CST 2024 inscode

src/App.vue

-<template>
-  <Layout>
-      <!-- <Header class="layout-header">
-        <ai-header></ai-header>
-      </Header> -->
-      <Layout>
-          <Sider class="layout-sider" hide-trigger :width="320">
-            <ai-sider :loading-data="getSdData"></ai-sider>
-          </Sider>
-          <Content class="layout-content">
-            <div class="ai-generate-image-inner">
-              <img class="ai-generate-image-self" v-if="image && !loading" :src="image" />
-              <div class="ai-generate-loading" v-if="loading && !image">
-                <div class="ai-generate-loading-inner">
-                  <Spin fix>
-                    <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
-                    <div>生成图片中</div>
-                  </Spin>
-                </div>
-              </div>
-            </div>
-          </Content>
-      </Layout>
-  </Layout>
-</template>
-<script>
-import { defineComponent, ref } from 'vue';
-import aiHeader from './components/ai-header.vue';
-import aiSider from './components/ai-sider.vue';
-import request from '@/api/sd';
-
-export default defineComponent({
-  name: 'App',
-  components: {
-    aiHeader,
-    aiSider
-  },
-  setup () {
-    const image = ref('/img/default.png')
-    const loading = ref(false);
-
-    const getSdData = (item)=> {
-      image.value = '';
-      loading.value = true;
-      console.log('request gpt data ...')
-        return request.gpt(item.prompt).then(res => {
-          console.log('request sd data...',item)
-          return request.draw(item).then(res => {
-            if (res) image.value = res;
-            loading.value = false;
-            return res;
-          })
-        }).catch((err)=>{
-          loading.value = false;
-          alert(err);
-          // console.error('gpt err:',err)
-        })
-    }
-    return {
-      getSdData,
-      image,
-      loading
-    }
-  }
-})
-</script>
-
-<style lang="less">
-  .ivu-layout {
-    width: 100%;
-    height: 100%;
-    .ivu-layout-header,
-    .layout-sider{
-      background: #FFF;
-    }
-    .layout-content {
-      overflow-y: scroll;
-      width: 100%!important;
-      padding: 16px;
-    }
-    .ai-generate-image-inner {
-      width: 100%;
-      display: flex;
-      margin-top:36px;
-      justify-content: center;
-      align-items: center;
-      height: 100%;
-    }
-    .ai-generate-image-self {
-      max-width: 100%;
-      display: block;
-    }
-    .ai-generate-loading {
-      position: relative;
-      width: 200px;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      &-inner {
-        height: 40px;
-        width: 200px;
-        position: relative;
-      }
-      .ivu-spin {
-        background: none;
-      }
-    }
-    .demo-spin-icon-load{
-      animation: ani-demo-spin 1s linear infinite;
-    }
-  }
-</style>