Skip to content

P
poster
Commit 83a755a8 authored by brent's avatar brent
Browse files
Options

add imamges

parent fbd74640
Pipeline #785 failed with stages
      Hide whitespace changes
      Inline Side-by-side
      Showing with 2797 additions and 54 deletions
      package.json
      View file @ 83a755a8
      ...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
      "axios": "^1.6.8", "axios": "^1.6.8",
      "element-plus": "^2.7.5", "element-plus": "^2.7.5",
      "pinia": "^2.1.7", "pinia": "^2.1.7",
      "uuid": "^10.0.0",
      "vant": "^4.9.1", "vant": "^4.9.1",
      "vue": "^3.4.21", "vue": "^3.4.21",
      "vue-router": "^4.3.0", "vue-router": "^4.3.0",
      ......
      public/templates/template.json
      View file @ 83a755a8
      [ [
      { {
      "id": "1", "id": "1",
      "image": "template1.png", "title":"Consensus",
      "prompt": "A figure engulfed in light, with intense glow radiating fiercely behind." "image": "template1.jpg",
      "prompt": "large conference hall, podium with speaker, blockchain logos, tech booths, audience with notebooks, high-energy atmosphere"
      }, },
      { {
      "id": "2", "id": "2",
      "image": "template2.png", "title":"ETHDenver",
      "prompt": "A person standing amidst a storm, lightning crackling in the background." "image": "template2.jpg",
      "prompt": "tech conference venue, Ethereum logos, coding workshops, networking areas, blockchain enthusiasts, creative vibe"
      }, },
      { {
      "id": "3", "id": "3",
      "image": "template3.png", "title":"Devcon",
      "prompt": "A silhouette surrounded by swirling mist, ethereal light illuminating the scene behind." "image": "template3.jpg",
      "prompt": "international conference center, keynote speakers, blockchain presentations, developer discussions, Ethereum branding, collaborative environment"
      }, },
      { {
      "id": "4", "id": "4",
      "image": "template4.png", "title":"Y Combinator",
      "prompt": "A figure emerging from a dense forest, with beams of sunlight creating a radiant backdrop." "image": "template4.jpg",
      "prompt": "modern office space, startup founders, mentorship sessions, whiteboards with ideas, funding pitches, innovation-driven atmosphere"
      },
      {
      "id": "5",
      "title":"Techstars",
      "image": "template5.jpg",
      "prompt": "dynamic workspace, startup teams collaborating, mentor interactions, pitch decks, brainstorming sessions, entrepreneurial spirit"
      },
      {
      "id": "6",
      "title":"500 Startups",
      "image": "template6.jpg",
      "prompt": "vibrant office, diverse startup teams, accelerator programs, investor meetings, creative discussions, high-energy environment"
      },
      {
      "id": "7",
      "title":"WeWork",
      "image": "template7.jpg",
      "prompt": "stylish co-working space, shared desks, communal lounge, coffee bar, collaborative meetings, modern decor"
      },
      {
      "id": "8",
      "title":"Spaces",
      "image": "template8.jpg",
      "prompt": "contemporary office design, open work areas, comfortable seating, networking events, shared amenities, inspiring workspace"
      },
      {
      "id": "9",
      "title":"Impact Hub",
      "image": "template9.jpg",
      "prompt": "eco-friendly co-working space, social entrepreneurs, collaborative projects, networking lounge, sustainable design, innovative community"
      },
      {
      "id": "10",
      "title":"Google HQ",
      "image": "template10.jpg",
      "prompt": "futuristic campus, Google logo, modern workspaces, employee lounges, advanced tech labs, innovative culture"
      },
      {
      "id": "11",
      "title":"Facebook HQ",
      "image": "template11.jpg",
      "prompt": "high-tech office complex, Facebook logo, collaborative work areas, social spaces, cutting-edge technology, creative environment"
      },
      {
      "id": "12",
      "title":"Amazon HQ",
      "image": "template12.jpg",
      "prompt": "sprawling tech campus, Amazon logo, bustling offices, research labs, employee amenities, innovation hub"
      },
      {
      "id": "13",
      "title":"MIT",
      "image": "template13.jpg",
      "prompt": "iconic campus buildings, research labs, students and professors, books and laptops, academic discussions, innovation-focused atmosphere"
      },
      {
      "id": "14",
      "title":"Stanford University",
      "image": "template14.jpg",
      "prompt": "picturesque campus, advanced research facilities, collaborative student projects, academic presentations, high-tech environment"
      },
      {
      "id": "15",
      "title":"Berkeley",
      "image": "template15.jpg",
      "prompt": "historic campus, cutting-edge research labs, scholarly discussions, diverse student body, innovative research environment"
      },
      {
      "id": "16",
      "title":"Silicon Valley",
      "image": "template16.jpg",
      "prompt": "high-tech office buildings, innovation labs, tech startups, collaborative workspaces, futuristic technology, entrepreneurial spirit"
      },
      {
      "id": "17",
      "title":"Shenzhen High-Tech Industrial Park",
      "image": "template17.jpg",
      "prompt": "modern tech park, advanced research facilities, startup incubators, tech exhibitions, innovative products, rapid development"
      },
      {
      "id": "18",
      "title":"Cambridge Science Park",
      "image": "template18.jpg",
      "prompt": "science-focused tech park, research institutions, collaborative projects, high-tech labs, academic-industry partnerships, innovative environment"
      },
      {
      "id": "19",
      "title":"Binance Office",
      "image": "template19.jpg",
      "prompt": "sleek modern office, Binance logo, trading screens, team discussions, crypto market data, high-security environment"
      },
      {
      "id": "20",
      "title":"Coinbase Office",
      "image": "template20.jpg",
      "prompt": "contemporary workspace, Coinbase logo, financial data screens, collaborative meetings, advanced tech equipment, professional atmosphere"
      },
      {
      "id": "21",
      "title":"Kraken Office",
      "image": "template21.jpg",
      "prompt": "high-tech office space, Kraken logo, trading terminals, team brainstorming sessions, crypto charts, secure environment"
      },
      {
      "id": "22",
      "title":"ETHGlobal Hackathons",
      "image": "template22.jpg",
      "prompt": "energetic hackathon venue, coding teams, laptops with code, Ethereum branding, coffee stations, creative problem-solving"
      },
      {
      "id": "23",
      "title":"HackMIT",
      "image": "template23.jpg",
      "prompt": "university hackathon setting, student coders, tech workshops, collaborative coding, innovative projects, academic energy"
      },
      {
      "id": "24",
      "title":"TechCrunch Disrupt Hackathon",
      "image": "template24.jpg",
      "prompt": "large event space, diverse coding teams, tech presentations, intense coding sessions, networking areas, innovative atmosphere"
      },
      {
      "id": "25",
      "title":"Meetup Events",
      "image": "template25.jpg",
      "prompt": "informal community gathering, blockchain enthusiasts, discussion groups, whiteboards with ideas, friendly networking, collaborative spirit"
      },
      {
      "id": "26",
      "title":"DAO Community Gatherings",
      "image": "template26.jpg",
      "prompt": "decentralized organization meeting, crypto discussions, project presentations, community voting, collaborative planning, innovative environment"
      },
      {
      "id": "27",
      "title":"Local Blockchain Meetups",
      "image": "template27.jpg",
      "prompt": "local event space, blockchain discussions, small groups, tech demos, community engagement, grassroots innovation"
      },
      {
      "id": "28",
      "title":"New York Times Square",
      "image": "template28.jpg",
      "prompt": "bustling city square, iconic billboards, tourists taking selfies, urban background, night lights, vibrant atmosphere"
      },
      {
      "id": "29",
      "title":"San Francisco Golden Gate Bridge",
      "image": "template29.jpg",
      "prompt": "landmark bridge, scenic view, tourists with cameras, city background, iconic structure, picturesque setting"
      },
      {
      "id": "30",
      "title":"London Tower Bridge",
      "image": "template30.jpg",
      "prompt": "historic bridge, Thames River, tourists photographing, cityscape, iconic landmark, cultural atmosphere"
      } }
      ] ]
      \ No newline at end of file
      src/components/Header.vue
      View file @ 83a755a8
      <template> <template>
      <div class="custom-navbar"> <div class="custom-navbar">
      <img src="../assets/logo_.png" class="logo" @click="goIndex"></img> <!-- <img src="../assets/logo_.png" class="logo" @click="goIndex"></img> -->
      <div class="title">AON 3D Clothing</div> <div class="title">海报生成</div>
      <div class="right"> <!-- <div class="right">
      <div class="right_count"> <div class="right_count">
      <img src="../assets/icons/money.png" class="moneyIcon"></img> <img src="../assets/icons/money.png" class="moneyIcon"></img>
      <span class="count">{{ balanceValue }}</span> <span class="count">{{ balanceValue }}</span>
      </div> </div>
      <img src="../assets/icons/user.png" v-if="!isUserPage" class="userIcon" @click="goUser"></img> <img src="../assets/icons/user.png" v-if="!isUserPage" class="userIcon" @click="goUser"></img>
      </div> </div> -->
      </div> </div>
      </template> </template>
      ......
      src/main.ts
      View file @ 83a755a8
      ...@@ -2,7 +2,8 @@ import './assets/main.css' ...@@ -2,7 +2,8 @@ import './assets/main.css'
      import { createApp } from 'vue' import { createApp } from 'vue'
      import { createPinia } from 'pinia'; import { createPinia } from 'pinia';
      import { Uploader, Toast } from 'vant'; import { Uploader, Toast,Field,RadioGroup, Radio,CellGroup,Cell} from 'vant';
      import App from './App.vue' import App from './App.vue'
      import router from './router' import router from './router'
      ...@@ -10,11 +11,18 @@ const pinia = createPinia(); ...@@ -10,11 +11,18 @@ const pinia = createPinia();
      const app = createApp(App) const app = createApp(App)
      app.use(router) app.use(router)
      app.use(CellGroup);
      app.use(Cell);
      app.use(Uploader) app.use(Uploader)
      app.use(Field)
      app.use(Toast) app.use(Toast)
      app.use(Radio);
      app.use(RadioGroup);
      app.use(pinia) app.use(pinia)
      app.mount('#app') app.mount('#app')
      src/views/Created.vue
      View file @ 83a755a8
      ...@@ -62,7 +62,7 @@ async function downloadImage() { ...@@ -62,7 +62,7 @@ async function downloadImage() {
      onMounted(() => { onMounted(() => {
      imageUrl.value = route.query.url; imageUrl.value = route.query.url;
      bus.emit('get_balance',"prediction"); // bus.emit('get_balance',"prediction");
      }) })
      </script> </script>
      ......
      src/views/Index.vue
      View file @ 83a755a8
      ...@@ -3,13 +3,33 @@ ...@@ -3,13 +3,33 @@
      <div> <div>
      <!-- 页面内容 --> <!-- 页面内容 -->
      <div class="container"> <div class="container">
      <div class="banner"> <!-- <div class="banner">
      <img src="../assets/images/banner.png" mode=""></img> <img src="../assets/images/banner.png" mode=""></img>
      <p>AON 3D Clothing</p> <p>海报生成</p>
      <p>Customize your clothing logo and generate a 3D avatar</p> <p>Customize your clothing logo and generate a 3D avatar</p>
      </div> </div> -->
      <div class="uni-form-item uni-column"> <div>
      <div class="title">Upload your photos</div> <van-cell-group title="信息">
      <van-field v-model="projectName" autosize label="项目名字" placeholder="请输入项目名称(背景展示项目文字)" />
      <van-cell title="角色">
      <van-radio-group v-model="checked" direction="horizontal" class="custom-radio-group">
      <van-radio name="1" class="custom-radio">英俊男子</van-radio>
      <van-radio name="2" class="custom-radio">漂亮女孩</van-radio>
      </van-radio-group>
      </van-cell>
      </van-cell-group>
      <!-- <van-cell-group title="角色">
      <van-cell>
      <van-radio-group v-model="checked" direction="horizontal">
      <van-radio name="1">英俊男子</van-radio>
      <van-radio name="2">漂亮女孩</van-radio>
      </van-radio-group>
      </van-cell>
      </van-cell-group> -->
      <!-- <div class="title">Upload your photos</div>
      <div class="content"> <div class="content">
      <div class="upload upload-done" v-if="imageStore.uploadedImageUrl"> <div class="upload upload-done" v-if="imageStore.uploadedImageUrl">
      ...@@ -26,7 +46,7 @@ ...@@ -26,7 +46,7 @@
      </van-uploader> </van-uploader>
      </div> </div> -->
      </div> </div>
      ...@@ -38,11 +58,11 @@ ...@@ -38,11 +58,11 @@
      </div> --> </div> -->
      <div class="uni-form-item uni-column"> <div class="uni-form-item uni-column">
      <div class="title">Choose your template</div> <div class="title">选择一个地点</div>
      <div class="templateCon" v-if="templateList.length > 0"> <div class="templateCon" v-if="templateList.length > 0">
      <div v-for="(item, index) in templateList" <div v-for="(item, index) in templateList"
      :class="`template_item ${Number(item.id) === templateId ? 'templateActive' : ''}`" :class="`template_item ${Number(item.id) === templateId ? 'templateActive' : ''}`"
      @click="selectTemplate(Number(item.id), item.image, item.prompt)" :key="index"> @click="selectTemplate(Number(item.id), item.image, item.prompt,item.title)" :key="index">
      <img :src="item.image" alt="" /> <img :src="item.image" alt="" />
      <div :class="`isActiveIcon ${Number(item.id) === templateId ? 'active' : ''}`"> <div :class="`isActiveIcon ${Number(item.id) === templateId ? 'active' : ''}`">
      <img src="../assets/icons/selectIcon.png" alt="" v-if="Number(item.id) === templateId"> <img src="../assets/icons/selectIcon.png" alt="" v-if="Number(item.id) === templateId">
      ...@@ -51,16 +71,16 @@ ...@@ -51,16 +71,16 @@
      </div> </div>
      </div> </div>
      <div class="uni-form-item error-text" v-if="showError"> <!-- <div class="uni-form-item error-text" v-if="showError">
      <div class="content">Please Upload your photos</div> <div class="content">Please Upload your photos</div>
      </div> </div> -->
      <div class="bottom_btn"> <div class="bottom_btn">
      <div class="spendCount"> <div class="spendCount">
      <img class="icon" src="../assets/icons/money.png" mode=""></img> <img class="icon" src="../assets/icons/money.png" mode=""></img>
      <text>-8</text> <text>-8</text>
      </div> </div>
      <button class="submitBtn" @click="formSubmit"> <button class="submitBtn" @click="formSubmit">
      <text>Generate img</text> <text>生成海报</text>
      </button> </button>
      </div> </div>
      ...@@ -81,13 +101,19 @@ import { useImageStore } from '@/store/imageStore'; ...@@ -81,13 +101,19 @@ import { useImageStore } from '@/store/imageStore';
      import 'vant/lib/index.css'; import 'vant/lib/index.css';
      import Loading from '../components/Loading.vue'; import Loading from '../components/Loading.vue';
      import bus from '../eventBus.js'; import bus from '../eventBus.js';
      import { v4 as uuidv4 } from 'uuid';
      const router = useRouter() const router = useRouter()
      const imageStore = useImageStore(); const imageStore = useImageStore();
      const projectName = ref('');
      const checked = ref('1');
      const image = ref('');
      const showLoading = ref(false); const showLoading = ref(false);
      const showError = ref(false); const showError = ref(false);
      const prompt = ref(''); const prompt = ref('');
      const location = ref('');
      const templateList = ref([]); const templateList = ref([]);
      const templateId = ref(1); const templateId = ref(1);
      ...@@ -152,46 +178,52 @@ function deleteImg() { ...@@ -152,46 +178,52 @@ function deleteImg() {
      const formSubmit = async () => { const formSubmit = async () => {
      console.log(imageStore.uploadedImageUrl) console.log(imageStore.uploadedImageUrl)
      if (!imageStore.uploadedImageUrl) { // if (!imageStore.uploadedImageUrl) {
      showError.value = true // showError.value = true
      setTimeout(() => { // setTimeout(() => {
      showError.value = false // showError.value = false
      }, 3000) // }, 3000)
      return // return
      } // }
      showLoading.value = true showLoading.value = true
      try { try {
      // AI 使用方法 // AI 使用方法
      const ai_options = new AIOptions({ const ai_options = new AIOptions({
      appId: 'k3ebyfaSz8b87xJb_VyEGXx_AJ0MM8ngqU7Ym3AKeW8A' appId: 'k3ebyfaSz8b87xJb_VyEGXx_AJ0MM8ngqU7Ym3AKeW8A',
      ai_server:"http://localhost:8088"
      }) })
      const aonet = new AI(ai_options) const aonet = new AI(ai_options)
      let person_text = checked.value == '1' ? "A handsome person" : "A beautiful girl"
      let prompt_temp = `At ${location.value}, ${prompt.value}, ${person_text} stand forward, one large screen in the background with ${projectName.value} displayed`
      let temp_input = {
      "cfg":3.5,
      "steps":28,
      "prompt":prompt_temp,
      "aspect_ratio":"9:16",
      "output_format":"png",
      "output_quality":90,
      "negative_prompt":"",
      "prompt_strength":0.85
      }
      if (image && image.length) {
      temp_input.image = image.value
      }
      const data = { const data = {
      input: { input: temp_input
      "prompt": "",
      "cfg_scale": 1.2,
      "num_steps": 4,
      "image_width": 768,
      "num_samples": 1,
      "image_height": 1024,
      "output_format": "webp",
      "identity_scale": 0.8,
      "mix_identities": false,
      "output_quality": 80,
      "generation_mode": "fidelity",
      "main_face_image": imageStore.uploadedImageUrl,
      "negative_prompt": ""
      }
      } }
      console.log("formSubmit data", data) console.log("formSubmit data", data)
      let price = 8 let price = 8
      let response = await aonet.prediction("/predictions/ai/pulid", data, price) let excuteId = uuidv4()
      let response = await aonet.prediction_with_server("/predictions/ai/stable-diffusion-3", data, excuteId)
      console.log("test", response) console.log("test", response)
      if (response && response.code == 200 && response.data) { if (response && response.code == 200 && response.data) {
      response = response.data response = response.data
      ...@@ -233,14 +265,25 @@ async function getTemplateList() { ...@@ -233,14 +265,25 @@ async function getTemplateList() {
      const list = await getTemplate() const list = await getTemplate()
      templateList.value = list templateList.value = list
      prompt.value = list[0].prompt prompt.value = list[0].prompt
      location.value = list[0].title
      console.log("getTemplateList",list[0])
      let imageUrl = list[0].image
      if (imageUrl.indexOf("localhost") < 0 || imageUrl.indexOf("127.0.0.1") < 0) {
      image.value = imageUrl
      }
      } catch (error) { } catch (error) {
      console.log(error) console.log(error)
      } }
      } }
      function selectTemplate(id, imageUrl, prompt_) { function selectTemplate(id, imageUrl, prompt_,title) {
      console.log("selectTemplate = ",id,imageUrl,prompt_)
      templateId.value = id templateId.value = id
      prompt.value = prompt_ prompt.value = prompt_
      location.value = title
      if (imageUrl.indexOf("localhost") < 0 || imageUrl.indexOf("127.0.0.1") < 0) {
      image.value = imageUrl
      }
      } }
      async function login_108() { async function login_108() {
      ...@@ -344,12 +387,29 @@ async function login_1012() { ...@@ -344,12 +387,29 @@ async function login_1012() {
      onMounted(() => { onMounted(() => {
      getTemplateList() getTemplateList()
      // login_108() // login_108()
      login_1012() // login_1012()
      }) })
      </script> </script>
      <style scoped> <style scoped>
      .custom-radio-group {
      display: flex;
      justify-content: flex-start; /* 确保 radio 组内项目从左对齐 */
      }
      .custom-radio {
      display: flex;
      align-items: center; /* 确保 radio 和文字在垂直方向居中 */
      justify-content: flex-start; /* 确保内容在水平方向左对齐 */
      margin-right: 16px; /* 添加间距 */
      flex: none; /* 防止 radio 项目拉伸 */
      }
      .van-radio__label {
      text-align: left; /* 强制标签文本左对齐 */
      }
      .banner { .banner {
      width: 100%; width: 100%;
      height: 27.73vw; height: 27.73vw;
      ......
      src/views/User.vue
      View file @ 83a755a8
      ...@@ -202,7 +202,7 @@ async function login() { ...@@ -202,7 +202,7 @@ async function login() {
      onMounted(() => { onMounted(() => {
      // getAccount() // getAccount()
      login() // login()
      }) })
      </script> </script>
      ......
      yarn.lock 0 → 100644
      View file @ 83a755a8
      This source diff could not be displayed because it is too large. You can view the blob instead.
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment