.gitignore

@@ -14,6 +14,8 @@ dist
 dist-ssr
 coverage
 *.local
+pnpm-lock.yaml
+yarn.lock
 
 /cypress/videos/
 /cypress/screenshots/

package.json

@@ -2,17 +2,20 @@
   "name": "vuejs-with-vite",
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host loc-inscode.csdn.net --port 443",
     "build": "vite build",
     "preview": "vite preview --port 4173"
   },
   "dependencies": {
+    "@microsoft/fetch-event-source": "^2.0.1",
+    "axios": "^1.4.0",
     "guess": "^1.0.2",
     "view-ui-plus": "^1.3.9",
     "vue": "3.2.37"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^3.0.1",
-    "vite": "^3.0.1"
+    "@vitejs/plugin-vue": "^5.0.3",
+    "vite": "^5.0.11",
+    "less": "^4.2.0"
   }
 }

src/App.vue

 <template>
-  <div class="ivu-p">
-    <Alert>
-      当前 Vue 版本为 {{ vueVersion }}，View UI Plus 版本为 {{ version }}
-    </Alert>
-    <Input v-model="msg" />
-    <Button class="ivu-mt" type="primary" @click="handleClick">Click Me!</Button>
-  </div>
+  <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" :src="image" />
+            </div>
+          </Content>
+      </Layout>
+  </Layout>
 </template>
-<script setup>
-import { ref, version as vueVersion } from 'vue' // 从 Vue 中导入 ref 和 vueVersion
-import { version, Message } from 'view-ui-plus' // 从 view-ui-plus 中导入 version 和 Message
-const msg = ref('Hello View Design!') // 创建一个响应式的变量 msg，并将其初始值设置为 'Hello View Design!'
+<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('')
+    const getSdData = (item)=> {
 
-function handleClick() { // 定义一个名为 handleClick 的函数
-  Message.info('Welcome to InsCode') // 在页面上显示一个提示消息
-}
+        request.gpt(item.prompt).then(res => {
+          return request.draw({}, item.prompt, item.negative_prompt).then(res => {
+            if (res) image.value = res;
+            return res;
+          })
+        }).catch((err)=>{
+          alert(err);
+          // console.error('gpt err:',err)
+        })
+
+    }
+    return {
+      getSdData,
+      image
+    }
+  }
+})
 </script>
 
-<style></style>
\ No newline at end of file
+<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;
+    }
+    .ai-generate-image-self {
+      max-width: 100%;
+      display: block;
+    }
+  }
+</style>

src/api/openai.js

+export const apiKey = process.env.INSCODE_API_KEY;
+
+export const apiUrl = 'https://inscode-api.csdn.net/api/v1/gpt/';

src/api/sd.js

+import axios from "axios";
+import { fetchEventSource } from '@microsoft/fetch-event-source';
+export const apiKey = process.env.INSCODE_API_KEY;
+
+export const apiUrl = 'https://inscode-api.csdn.net/api/v1/gpt/';
+export default {
+    draw (config, prompt, negative_prompt) {
+        return new Promise(function(resolve,rejcet){
+            const data = {
+                prompt: prompt,
+                steps: config?.steps??20,
+                negative_prompt: negative_prompt??'nsfw',
+                width: config?.width??512,
+                height: config?.height??512,
+                cfg_scale: config?.cfg_scale??6,
+                seed : config?.seed??-1,
+                sampler_name: config?.sampler_name??"DPM++ SDE Karras"
+            }
+            const headers = {
+                'content-type': 'application/json'
+            };
+            let api = 'https://gpu-pod659f8b38499a1c2067e69973-6006.node.inscode.run/sdapi/v1/txt2img'
+            axios.post(api, data, { headers }).then(response => {
+                if (response.status === 200 && response?.data?.images){
+                    const image = response?.data?.images[0]
+                    resolve('data:image/png;base64,' + image)
+                }
+            }).catch(err => {
+                rejcet(err)
+            });
+
+        })
+    },
+    gpt(prompt){
+        return new Promise(function(resolve,rejcet){
+            const data = {
+                'messages': [
+                    {
+                        'role': 'user',
+                        'content': prompt
+                    }],
+                'stream_token': false,
+                'apikey': apiKey
+            }
+            const headers = {
+                'content-type': 'application/json'
+            };
+            axios.post(apiUrl, data, { headers }).then(response => {
+                console.log('gpt:',response.data)
+                if(response.data.indexOf("免费对话次数已用完，请升级账号后继续使用")>-1){
+                    rejcet("免费对话次数已用完，请升级账号后继续使用")
+                }else if(response.data.indexOf("敏感")>-1){
+                    rejcet("抱歉，该问题含有敏感词信息，请换一个问题")
+                }else{
+                    resolve(response.data)
+                }
+            }).catch(err => {
+                rejcet(err)
+            });
+
+        })
+    },
+    gpt2(prompt){
+        return new Promise(function(resolve,rejcet){
+            const body = {
+                messages: [
+                    {
+                        role: 'user',
+                        content: prompt
+                    }
+                ],
+                apikey: apiKey
+            }
+            fetchEventSource(apiUrl, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(body),
+                onopen: (response) => {
+                    console.log('open',response)
+                },
+                onmessage: (msg) => {
+                    if (msg.data === '[DONE]') {
+                       // this.loading = false;
+                        return;
+                    };
+                    const data = JSON.parse(msg.data);
+                    const finish_reason = data.choices[0].finish_reason;
+                    const finish = finish_reason === 'stop' || finish_reason === 'length';
+                    const content = data.choices[0].delta.content;
+
+                    if (finish) {
+                       // this.loading = false;
+                    } else if (content) {
+                        console.log('gpt: response',content)
+                        resolve(content)
+                    }
+                },
+                onerror: (err) => {
+                    rejcet(err)
+                    console.log("error", err);
+                }
+            });
+        })
+    }
+}

src/assets/main.css

+body,html,#app {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
\ No newline at end of file

src/components/ai-header.vue

+<template>
+    <h1>AI绘图</h1>
+</template>
+<script>
+    import { defineComponent } from 'vue';
+    export default defineComponent({
+        name: 'aiHeader',
+    })
+</script>

src/components/ai-sider.vue

+<template>
+    <Form class="ai-sider-form" label-position="top">
+        <FormItem>
+            <template #label>
+                <strong>推荐:</strong>
+            </template>
+            <Row :gutter="12">
+                <Col
+                    class="ai-sider-image-item"
+                    :class="{'current': item.label === state.active}"
+                    :span="6"
+                    v-for="item in state.tagList"
+                    :key="item.image"
+                    @click="handleSelectTag(item)"
+                >
+                    <Image :src="item.image"></Image>
+                    <div class="ivu-mt-6 ivu-text-center" v-line-clamp="1">{{ item.label }}</div>
+                </Col>
+            </Row>
+        </FormItem>
+        <FormItem>
+            <template #label>
+                <strong>提示词:</strong>
+            </template>
+            <Input type="textarea" :rows="4" v-model="state.prompt" placeholder="请输入提示词,回车键开始绘画..." />
+        </FormItem>
+        <FormItem>
+            <template #label>
+                <strong>反向提示词:</strong>
+            </template>
+            <Input type="textarea" :rows="4" v-model="state.negative_prompt" placeholder="请输入反向提示词,回车键开始绘画..." />
+        </FormItem>
+        <FormItem>
+            <Button size="large" long :loading="state.loading" type="primary" class="ai-sider-form-button" @click="handleSubmit">生成图片</Button>
+        </FormItem>
+    </Form>
+</template>
+<script>
+    import { defineComponent, onMounted, reactive } from 'vue';
+    import image0 from '@/assets/label/00.png';
+    import image1 from '@/assets/label/01.png';
+    import image2 from '@/assets/label/02.jpeg';
+    import image3 from '@/assets/label/03.png';
+    import image4 from '@/assets/label/04.png';
+    import image5 from '@/assets/label/05.png';
+    export default defineComponent({
+        name: 'aiSider',
+        emits: ['submit', 'error'],
+        props: {
+            loadingData: {
+                type: Function,
+                default: ()=> {}
+            }
+        },
+        setup (props, context) {
+            const state = reactive({
+                loading: false,
+                description: '',
+                active: '重置',
+                prompt: '',
+                negative_prompt: '',
+                tagList : [
+                    {
+                        'label':'重置',
+                        'prompt':'',
+                        'negative_prompt':'',
+                        'image': image0
+                    },
+                    {
+                      'lebel':'星空',
+                      'prompt':'Surrealism in digital art, a collaboration between Beeple and Jeremias Ketner, featuring an exquisitely detailed digital illustration that captures the essence of both artists\' unique styles.',
+                      'negative_prompt':'EasyNegative',
+                      'image': image1
+                    },
+                    {
+                        'label':'雀斑女孩',
+                        'prompt':'beautiful lady, (freckles), big smile, ruby eyes, pigtails hair, dark makeup, hyperdetailed photography, soft light, head and shoulders portrait, cover',
+                        'negative_prompt':'(worst quality, low quality, normal quality, lowres, low details, oversaturated, undersaturated, overexposed, underexposed, grayscale, bw, bad photo, bad photography, bad art:1.4), (watermark, signature, text font, username, error, logo, words, letters, digits, autograph, trademark, name:1.2), (blur, blurry, grainy), morbid, ugly, asymmetrical, mutated malformed, mutilated, poorly lit, bad shadow, draft, cropped, out of frame, cut off, censored, jpeg artifacts, out of focus, glitch, duplicate, (airbrushed, cartoon, anime, semi-realistic, cgi, render, blender, digital art, manga, amateur:1.3), (3D ,3D Game, 3D Game Scene, 3D Character:1.1), (bad hands, bad anatomy, bad body, bad face, bad teeth, bad arms, bad legs, deformities:1.3)',
+                        'image': image2
+                    },
+                    {
+                        'label':'金属',
+                        'prompt':'Metal armor, metallic texture, solo, 1boy, science fiction, male focus, power armor, humanoid robot, robot, blurry, blurry background, city, helmet',
+                        'negative_prompt':'FastNegativeV2,(bad-artist:1),(worst quality, low quality:1.4),(bad_prompt_version2:0.8),bad-hands-5,lowres,bad anatomy,bad hands,((text)),(watermark),error,missing fingers,extra digit,fewer digits,cropped,worst quality,low quality,normal quality,((username)),blurry,(extra limbs),bad-artist-anime,badhandv4,EasyNegative,ng_deepnegative_v1_75t,verybadimagenegative_v1.3,BadDream,(three hands:1.6),(three legs:1.2),(more than two hands:1.4),(more than two legs,:1.2),1abel,',
+                        'image': image3
+                    },
+                    {
+                        'label':'古装女侠',
+                        'prompt':'1woman,handsome,high quality,long hair,dark hair,chinese clothes,photorealistic,realistic,photography,masterpiece,best quality,ultra-detailed,1man,looking at viewer,solo,handsome face,pony tail,hanfu,gufeng,black and white hanfu,bamboo,bamboo leaf on clothes,bamboo pattern hanfu,hanfu,(bamboo:1.2)',
+                        'negative_prompt':'(worst quality, low quality:1.4),(depth of field, blurry:1.2),(greyscale, monochrome:1.1),3D face,cropped,lowres,text,(nsfw:1.3),(worst quality:2),(low quality:2),(normal quality:2),normal quality,((grayscale)),skin spots,acnes,skin blemishes,age spot,(ugly:1.331),(duplicate:1.331),(morbid:1.21),(mutilated:1.21),(tranny:1.331),mutated hands,(poorly drawn hands:1.5),blurry,(bad anatomy:1.21),(bad proportions:1.331),extra limbs,(disfigured:1.331),(missing arms:1.331),(extra legs:1.331),(fused fingers:1.61051),(too many fingers:1.61051),(unclear eyes:1.331),lowers,bad hands,missing fingers,extra digit,bad hands,missing fingers,(((extra arms and legs))),bad-artist,bad-artist-anime,bad-hands-5,bad-image-v2-39000,bad-picture-chill-75v,bad_prompt,bad_prompt_version2,badhandv4,ng_deepnegative_v1_75t,EasyNegative,2girls,3girls,lowres,bad anatomy,bad hands,text,error,missing fingers,extra digit,fewer digits,cropped,worst quality,low quality,normal quality,signature,watermark,username,blurry,badfeet,ugly,pregnant,duplicate,hermaphrodite,scar,green clothes,bad eyes,bad pupils,green hair,(duplicates),skin spots,acnes,skin blemishes,age spot,bad anatomy,(ugly:1.331),(duplicate:1.331),(morbid:1.21),(mutilated:1.21),mutated hands,(poorly drawn hands:1.331),blurry,(bad anatomy:1.21),(bad proportions:1.331),extra limbs,(disfigured:1.331),(missing arms:1.331),(extra legs:1.331),(fused fingers:1.61051),(too many fingers:1.61051),(unclear eyes:1.331),bad hands,missing fingers,extra digit,bad body,pubic hair,glans,refraction,diffusion,bad body,bad proportions,gross proportions,text,missing fingers,missing arms,missing legs,(((simple background))),fused fingers,too many fingers,missing arms,missing legs,extra arms,extra legs',
+                        'image': image4
+                    },
+                    {
+                        'label':'国风',
+                        'prompt':'beautiful girl, chinese clothes',
+                        'negative_prompt':'(worst quality, low quality, normal quality, lowres, low details, oversaturated, undersaturated, overexposed, underexposed, grayscale, bw, bad photo, bad photography, bad art:1.4), (watermark, signature, text font, username, error, logo, words, letters, digits, autograph, trademark, name:1.2), (blur, blurry, grainy), morbid, ugly, asymmetrical, mutated malformed, mutilated, poorly lit, bad shadow, draft, cropped, out of frame, cut off, censored, jpeg artifacts, out of focus, glitch, duplicate, (airbrushed, cartoon, anime, semi-realistic, cgi, render, blender, digital art, manga, amateur:1.3), (3D ,3D Game, 3D Game Scene, 3D Character:1.1), (bad hands, bad anatomy, bad body, bad face, bad teeth, bad arms, bad legs, deformities:1.3)',
+                        'image': image5
+                    }
+                ]
+            })
+            const handleSelectTag = (item, isInit)=> {
+                const { label, prompt, negative_prompt } = item;
+                Object.assign(state, {
+                    active: label,
+                    prompt,
+                    negative_prompt
+                })
+            }
+            const handleSubmit = async ()=> {
+                const { prompt, active, negative_prompt } = state;
+                if (state.loading) return;
+                state.loading = true;
+                try {
+                    const params = { prompt, label: active, negative_prompt };
+                    await props.loadingData(params)
+                    context.emit('submit', params);
+                    state.loading = false;
+                } catch (error) {
+                    context.emit('error', { error });
+                    state.loading = false;
+                }
+            }
+            onMounted(()=> {
+                handleSelectTag(state.tagList[0], true);
+            })
+            return {
+                state,
+                handleSelectTag,
+                handleSubmit
+            }
+        }
+    })
+</script>
+<style lang="less">
+    .ai-sider-form {
+        padding: 16px;
+        overflow-y: scroll;
+        height: 100%;
+    }
+    .ai-sider-image-item {
+        margin-bottom: 12px;
+        font-size: 12px;
+        cursor: pointer;
+        position: relative;
+        &:hover,&.current {
+            .ivu-text-center {
+                color: #2d8cf0;
+            }
+        }
+        &-bg {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.5);
+            z-index: 1;
+        }
+    }
+</style>

vite.config.js

 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+const fs = require('fs')
 
 // https://vitejs.dev/config/
 export default defineConfig({
   server: {
-    host: true
+    host: true,
+    https:{
+      key: fs.readFileSync('./ssl/server.key'),
+      cert: fs.readFileSync('./ssl/server.crt')
+    }
   },
-  plugins: [vue()]
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': '/src'
+    },
+    dedupe: ['vue']
+  }
 })