Skip to content

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

up loading

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