Skip to content

M
meme_image
Commit 57862a23 authored by web's avatar web
Browse files
Options

up loading

parent b7e243a0
Hide whitespace changes
Inline Side-by-side
Showing with 209 additions and 60 deletions
package-lock.json
View file @ 57862a23
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
"aos": "^2.3.4", "aos": "^2.3.4",
"axios": "^1.6.8", "axios": "^1.6.8",
"element-plus": "^2.7.5", "element-plus": "^2.7.5",
"pinia": "^2.1.7",
"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",
...@@ -3328,6 +3329,56 @@ ...@@ -3328,6 +3329,56 @@
"node": ">=0.10" "node": ">=0.10"
} }
}, },
"node_modules/pinia": {
"version": "2.1.7",
"resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz",
"integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
"dependencies": {
"@vue/devtools-api": "^6.5.0",
"vue-demi": ">=0.14.5"
},
"funding": {
"url": "https://github.com/sponsors/posva"
},
"peerDependencies": {
"@vue/composition-api": "^1.4.0",
"typescript": ">=4.4.4",
"vue": "^2.6.14 || ^3.3.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
},
"typescript": {
"optional": true
}
}
},
"node_modules/pinia/node_modules/vue-demi": {
"version": "0.14.8",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
"integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/possible-typed-array-names": { "node_modules/possible-typed-array-names": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz", "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
...@@ -6638,6 +6689,23 @@ ...@@ -6638,6 +6689,23 @@
"integrity": "sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==", "integrity": "sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==",
"dev": true "dev": true
}, },
"pinia": {
"version": "2.1.7",
"resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz",
"integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
"requires": {
"@vue/devtools-api": "^6.5.0",
"vue-demi": ">=0.14.5"
},
"dependencies": {
"vue-demi": {
"version": "0.14.8",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
"integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
"requires": {}
}
}
},
"possible-typed-array-names": { "possible-typed-array-names": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz", "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
......
package.json
View file @ 57862a23
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
"aos": "^2.3.4", "aos": "^2.3.4",
"axios": "^1.6.8", "axios": "^1.6.8",
"element-plus": "^2.7.5", "element-plus": "^2.7.5",
"pinia": "^2.1.7",
"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",
......
src/components/Loading.vue
View file @ 57862a23
...@@ -3,25 +3,61 @@ ...@@ -3,25 +3,61 @@
<div class="running-con"> <div class="running-con">
<img src="../assets/images/running.gif" mode=""></img> <img src="../assets/images/running.gif" mode=""></img>
<p>RUNNING...</p> <p>RUNNING...</p>
<p>ETA: {{ formatTime(timeLeft) }}</p>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { import { ref, onMounted, onUnmounted } from 'vue';
defineProps,
defineEmits const props = defineProps({
} from 'vue'; showLoading: {
const props = defineProps({ type: Boolean,
showLoading: { default: false
type: Boolean, }
default: false });
const timeLeft = ref(30);
let timer;
const startCountdown = () => {
timer = setInterval(() => {
if (timeLeft.value > 0) {
timeLeft.value--;
} else {
clearInterval(timer);
} }
}); }, 1000);
};
const formatTime = (seconds) => {
const hours = Math.floor(seconds / 3600);
const minutes = Math.floor((seconds % 3600) / 60);
const secs = seconds % 60;
return `${padZero(hours)}:${padZero(minutes)}:${padZero(secs)}`;
};
const padZero = (num) => {
return num.toString().padStart(2, '0');
};
onMounted(() => {
startCountdown()
})
onUnmounted(() => {
clearInterval(timer);
})
</script> </script>
<style> <style>
.loading{ .loading {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
...@@ -35,21 +71,22 @@ ...@@ -35,21 +71,22 @@
align-items: center; align-items: center;
} }
.running-con{ .running-con {
width: 56vw; width: 56vw;
height: 25.07vw; height: 25.07vw;
background: #000000; background: #000000;
border-radius: 4.27vw; border-radius: 4.27vw;
border: .13vw solid #707070; border: .13vw solid #707070;
display: flex; display: flex;
justify-content: center; flex-direction: column;
align-items: flex-end; justify-content: flex-end;
align-items: center;
position: relative; position: relative;
padding: 5.6vw 0; padding: 5.6vw 0;
box-sizing: border-box; box-sizing: border-box;
} }
.running-con img{ .running-con img {
width: 22.4vw; width: 22.4vw;
height: 38.4vw; height: 38.4vw;
position: absolute; position: absolute;
...@@ -58,7 +95,7 @@ ...@@ -58,7 +95,7 @@
top: -28vw; top: -28vw;
} }
.running-con p{ .running-con p {
font-family: Roboto-Bold; font-family: Roboto-Bold;
font-weight: bold; font-weight: bold;
font-size: 3.73vw; font-size: 3.73vw;
...@@ -66,6 +103,7 @@ ...@@ -66,6 +103,7 @@
text-align: center; text-align: center;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
display: flex;
/* margin-top: 32rpx; */ /* margin-top: 32rpx; */
} }
</style> </style>
\ No newline at end of file
src/main.ts
View file @ 57862a23
import './assets/main.css' import './assets/main.css'
import { createApp } from 'vue' import { createApp } from 'vue'
import { Uploader } from 'vant'; import { createPinia } from 'pinia';
import { Uploader, Toast } from 'vant';
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
const pinia = createPinia();
...@@ -12,5 +14,7 @@ const app = createApp(App) ...@@ -12,5 +14,7 @@ const app = createApp(App)
app.use(router) app.use(router)
app.use(Uploader) app.use(Uploader)
app.use(Toast)
app.use(pinia)
app.mount('#app') app.mount('#app')
src/store/imageStore.ts 0 → 100644
View file @ 57862a23
import { defineStore } from 'pinia';
import { ref } from 'vue';
export const useImageStore = defineStore('imageStore', () => {
const uploadedImageUrl = ref<string>('');
const addImage = (image: string) => {
uploadedImageUrl.value = image
};
const removeImage = () => {
uploadedImageUrl.value = '';
};
return { uploadedImageUrl, addImage, removeImage };
});
\ No newline at end of file
src/views/Index.vue
View file @ 57862a23
<template> <template>
<Loading :showLoading="showLoading" /> <Loading v-if="showLoading" :showLoading="showLoading" />
<div> <div>
<!-- 页面内容 --> <!-- 页面内容 -->
<div class="container"> <div class="container">
...@@ -12,8 +12,8 @@ ...@@ -12,8 +12,8 @@
<div class="title">Upload your photos</div> <div class="title">Upload your photos</div>
<div class="content"> <div class="content">
<div class="upload upload-done" v-if="imgUrl"> <div class="upload upload-done" v-if="imageStore.uploadedImageUrl">
<img class="upload-res" :src="imgUrl" mode=""></img> <img class="upload-res" :src="imageStore.uploadedImageUrl" mode=""></img>
<img class="deleteIcon" @click="deleteImg" src="../assets/icons/delete.png" mode=""></img> <img class="deleteIcon" @click="deleteImg" src="../assets/icons/delete.png" mode=""></img>
</div> </div>
<van-uploader v-else style="width: 100%" :max-size="maxSize" @oversize="onOversize" <van-uploader v-else style="width: 100%" :max-size="maxSize" @oversize="onOversize"
...@@ -71,27 +71,29 @@ ...@@ -71,27 +71,29 @@
<script setup> <script setup>
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import { showToast } from 'vant'; import { showToast, showLoadingToast, closeToast } from 'vant';
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { AI,AIOptions,User} from 'aonweb' import { AI, AIOptions, User } from 'aonweb'
import { getTemplate } from '../lib/getTemplate' import { getTemplate } from '../lib/getTemplate'
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';
const router = useRouter() const router = useRouter()
const imageStore = useImageStore();
const showLoading = ref(false); const showLoading = ref(false);
const showError = ref(false); const showError = ref(false);
const prompt = ref(''); const prompt = ref('');
const imgUrl = ref('');
const submitImgUrl = ref('');
const templateList = ref([]); const templateList = ref([]);
const templateId = ref(1); const templateId = ref(1);
const maxSize = 30 * 1024 * 1024; const maxSize = 30 * 1024 * 1024;
function goToComplete(url) { function goToComplete(url) {
const query = { url: url } const query = { url: url }
router.push({ router.push({
...@@ -111,16 +113,12 @@ function afterRead(file) { ...@@ -111,16 +113,12 @@ function afterRead(file) {
// 调用上传接口 // 调用上传接口
uploadFile(formData).then(res => { uploadFile(formData).then(res => {
if (res.code == 200 && res.data && res.data.length) { if (res.code == 200 && res.data && res.data.length) {
submitImgUrl.value = res.data imageStore.addImage(res.data);
} }
}).catch(err => { }).catch(err => {
showToast('image upload failed'); showToast('image upload failed');
console.log(err); console.log(err);
}); });
imgUrl.value = URL.createObjectURL(file.file);
} }
// 上传接口 // 上传接口
const uploadFile = async (formData) => { const uploadFile = async (formData) => {
...@@ -134,14 +132,14 @@ const uploadFile = async (formData) => { ...@@ -134,14 +132,14 @@ const uploadFile = async (formData) => {
}; };
function deleteImg() { function deleteImg() {
if (imgUrl.value) { if (imageStore.uploadedImageUrl) {
const formData = new FormData(); const formData = new FormData();
formData.append('file', imgUrl.value); formData.append('file', imageStore.uploadedImageUrl);
// 删除文件 // 删除文件
formData.delete('file'); formData.delete('file');
imgUrl.value = null;
submitImgUrl.value = null imageStore.removeImage();
console.log('File deleted:', formData.get('file')); console.log('File deleted:', formData.get('file'));
} else { } else {
...@@ -150,9 +148,14 @@ function deleteImg() { ...@@ -150,9 +148,14 @@ function deleteImg() {
} }
const formSubmit = async () => { const formSubmit = async () => {
console.log(prompt.value, submitImgUrl.value) console.log(imageStore.uploadedImageUrl)
if (!imgUrl.value || !submitImgUrl.value) { if (!imageStore.uploadedImageUrl) {
showError.value = true showError.value = true
setTimeout(() => { setTimeout(() => {
...@@ -164,13 +167,13 @@ const formSubmit = async () => { ...@@ -164,13 +167,13 @@ const formSubmit = async () => {
try { try {
// AI 使用方法 // AI 使用方法
const ai_options = new AIOptions({ const ai_options = new AIOptions({
appId :'k3ebyfaSz8b87xJb_VyEGXx_AJ0MM8ngqU7Ym3AKeW8A' appId: 'k3ebyfaSz8b87xJb_VyEGXx_AJ0MM8ngqU7Ym3AKeW8A'
}) })
const aonet = new AI(ai_options) const aonet = new AI(ai_options)
const data = { const data = {
input:{ input: {
"prompt": "", "prompt": "",
"cfg_scale": 1.2, "cfg_scale": 1.2,
"num_steps": 4, "num_steps": 4,
...@@ -182,13 +185,13 @@ const formSubmit = async () => { ...@@ -182,13 +185,13 @@ const formSubmit = async () => {
"mix_identities": false, "mix_identities": false,
"output_quality": 80, "output_quality": 80,
"generation_mode": "fidelity", "generation_mode": "fidelity",
"main_face_image": submitImgUrl.value, "main_face_image": imageStore.uploadedImageUrl,
"negative_prompt": "" "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 response = await aonet.prediction("/predictions/ai/pulid", data, price)
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
...@@ -232,21 +235,32 @@ function selectTemplate(id, imageUrl, prompt_) { ...@@ -232,21 +235,32 @@ function selectTemplate(id, imageUrl, prompt_) {
} }
async function login() { async function login() {
console.log('index login') try {
let user = new User() showLoadingToast({
let temp = await user.islogin() duration: 0,
if (!temp) { forbidClick: true,
console.log('index islogin') message: 'Loading...',
user.login((acc,userId,error) => { });
console.log("getWeb3 account",acc) let user = new User()
console.log("getWeb3 userId",userId) let temp = await user.islogin()
console.log("getWeb3 error",error) if (!temp) {
bus.emit('get_balance',"login"); console.log('index islogin')
}) user.login((acc, userId, error) => {
return console.log("getWeb3 account", acc)
console.log("getWeb3 userId", userId)
console.log("getWeb3 error", error)
bus.emit('get_balance', "login");
})
return
}
bus.emit('get_balance', "login");
console.log('index islogin sssss', temp)
} catch (error) {
} finally {
closeToast();
} }
bus.emit('get_balance',"login");
console.log('index islogin sssss',temp)
} }
onMounted(() => { onMounted(() => {
...@@ -324,12 +338,14 @@ onMounted(() => { ...@@ -324,12 +338,14 @@ onMounted(() => {
box-sizing: border-box; box-sizing: border-box;
} }
.error-text{
.error-text {
width: 86.67vw; width: 86.67vw;
position: fixed; position: fixed;
bottom: 21.6vw; bottom: 21.6vw;
} }
.error-text .content { .error-text .content {
background-color: #F3A32B; background-color: #F3A32B;
font-size: 3.2vw; font-size: 3.2vw;
...@@ -461,12 +477,12 @@ onMounted(() => { ...@@ -461,12 +477,12 @@ onMounted(() => {
align-items: center; align-items: center;
} }
.isActiveIcon img{ .isActiveIcon img {
height: 2.13vw; height: 2.13vw;
width: 2.13vw; width: 2.13vw;
} }
.active{ .active {
background: #EBCC2F; background: #EBCC2F;
} }
</style> </style>
src/views/User.vue
View file @ 57862a23
...@@ -37,8 +37,8 @@ import { ...@@ -37,8 +37,8 @@ import {
onMounted onMounted
} from 'vue'; } from 'vue';
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { Options, User ,detectEthereumProvider} from 'aonweb' import { Options, User, detectEthereumProvider } from 'aonweb'
import { showToast } from 'vant'; import { showToast, showLoadingToast, closeToast } from 'vant';
import bus from '../eventBus.js'; import bus from '../eventBus.js';
const router = useRouter() const router = useRouter()
...@@ -68,8 +68,12 @@ function goToComplete() { ...@@ -68,8 +68,12 @@ function goToComplete() {
// https://app.aonet.ai/api // https://app.aonet.ai/api
// https://app.aonet.ai/kvapi // https://app.aonet.ai/kvapi
async function getAccount() { async function getAccount() {
try { try {
showLoadingToast({
duration: 0,
forbidClick: true,
message: 'Loading...',
});
//User 的使用方法 //User 的使用方法
let user = new User() let user = new User()
const isLogin_status = await user.islogin() const isLogin_status = await user.islogin()
...@@ -92,6 +96,8 @@ async function getAccount() { ...@@ -92,6 +96,8 @@ async function getAccount() {
} }
} catch (error) { } catch (error) {
console.log(error, "getAccount error") console.log(error, "getAccount error")
} finally {
closeToast()
} }
// console.log("getWeb3 account", addr) // console.log("getWeb3 account", addr)
......
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