Skip to content

P
poster
Commit 5ff86e01 authored by BigBigC's avatar BigBigC Committed by GitHub
Browse files
Options

init

parent 4a77dfde
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1871 additions and 2 deletions
README.md
View file @ 5ff86e01
# decentralized-ai-app-demo # AON 3D Clothing
It is a decentralized AI application demo using the AON SDK.
This template should help get you started developing with Vue 3 in Vite.
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
## Type Support for `.vue` Imports in TS
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Type-Check, Compile and Minify for Production
```sh
npm run build
```
env.d.ts 0 → 100644
View file @ 5ff86e01
/// <reference types="vite/client" />
index.html 0 → 100644
View file @ 5ff86e01
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
<title>AON 3D Clothing</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
package.json 0 → 100644
View file @ 5ff86e01
{
"name": "AONET",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --build --force"
},
"dependencies": {
"aonweb": "^0.0.0",
"aos": "^2.3.4",
"axios": "^1.6.8",
"element-plus": "^2.7.5",
"vant": "^4.9.1",
"vue": "^3.4.21",
"vue-router": "^4.3.0",
"web-vitals": "^2.1.0",
"web3": "^4.9.0",
"web3-eth-accounts": "^4.1.2"
},
"devDependencies": {
"@tsconfig/node20": "^20.1.4",
"@types/aos": "^3.0.7",
"@types/node": "^20.12.5",
"@vitejs/plugin-vue": "^5.0.4",
"@vitejs/plugin-vue-jsx": "^3.1.0",
"@vue/tsconfig": "^0.5.1",
"npm-run-all2": "^6.1.2",
"typescript": "~5.4.0",
"vite": "^5.2.8",
"vite-plugin-commonjs": "^0.10.1",
"vite-plugin-vue-devtools": "^7.0.25",
"vue-tsc": "^2.0.11"
}
}
src/App.vue 0 → 100644
View file @ 5ff86e01
<script setup lang="ts">
import { RouterView } from 'vue-router'
</script>
<template>
<RouterView />
</template>
<style>
.container {
padding: 0 6.4vw 18.4vw;
margin: 0;
}
.bottom_btn {
width: 100%;
position: fixed;
bottom: 4.27vw;
left: 0;
padding: 0 6.4vw;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.bottom_btn uni-button {
margin: 0;
}
button {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
border: none;
}
.uni-form-item .van-uploader__wrapper,
.uni-form-item .van-uploader__input-wrapper {
width: 100%;
}
</style>
src/assets/base.css 0 → 100644
View file @ 5ff86e01
/* color palette from <https://github.com/vuejs/theme> */
:root {
--vt-c-white: #ffffff;
--vt-c-white-soft: #f8f8f8;
--vt-c-white-mute: #f2f2f2;
--vt-c-black: #000000;
--vt-c-black-soft: #222222;
--vt-c-black-mute: #282828;
--vt-c-indigo: #2c3e50;
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
--vt-c-text-light-1: var(--vt-c-indigo);
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
--vt-c-text-dark-1: var(--vt-c-white);
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}
/* semantic color variables for this project */
:root {
--color-background: var(--vt-c-black);
--color-background-soft: var(--vt-c-white-soft);
--color-background-mute: var(--vt-c-white-mute);
--color-border: var(--vt-c-divider-light-2);
--color-border-hover: var(--vt-c-divider-light-1);
--color-heading: var(--vt-c-text-light-1);
--color-text: var(--vt-c-text-light-1);
--section-gap: 160px;
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: var(--vt-c-black);
--color-background-soft: var(--vt-c-black-soft);
--color-background-mute: var(--vt-c-black-mute);
--color-border: var(--vt-c-divider-dark-2);
--color-border-hover: var(--vt-c-divider-dark-1);
--color-heading: var(--vt-c-text-dark-1);
--color-text: var(--vt-c-text-dark-2);
}
}
@font-face {
font-family: 'Roboto-Black';
src: url('./fonts/Roboto-Black.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Roboto-Bold';
src: url('./fonts/Roboto-Bold.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Roboto-Regular';
src: url('./fonts/Roboto-Regular.ttf');
font-weight: normal;
font-style: normal;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
font-weight: normal;
}
body {
min-height: 100vh;
color: #000;
background: #fff;
transition:
color 0.5s,
background-color 0.5s;
line-height: 1.6;
font-family:
Adobe Heiti Std R,
sans-serif;
font-size: 16px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
\ No newline at end of file
src/assets/images/ava.png 0 → 100644
View file @ 5ff86e01
This diff is collapsed.
src/assets/main.css 0 → 100644
View file @ 5ff86e01
@import './base.css';
*{
scrollbar-width: none;
}
#app {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: rgba(255, 255, 255, 0.5);
transition: 0.4s;
padding: 3px;
}
input{
outline: none;
}
ul, li{
list-style: none;
padding: 0;
margin: 0;
}
@media (hover: hover) {
a:hover {
color: rgba(255, 255, 255, 1);
}
}
.fp-watermark{
display: none;
}
.fp-overflow{
height: 100vh;
}
\ No newline at end of file
src/components/Header.vue 0 → 100644
View file @ 5ff86e01
<template>
<div class="custom-navbar">
<img src="../assets/logo_.png" class="logo" @click="goIndex"></img>
<div class="title">AON 3D Clothing</div>
<div class="right">
<div class="right_count">
<img src="../assets/icons/money.png" class="moneyIcon"></img>
<span class="count">120</span>
</div>
<img src="../assets/icons/user.png" v-if="!isUserPage" class="userIcon" @click="goUser"></img>
</div>
</div>
</template>
<script setup>
import {
defineProps,
ref,
onMounted,
computed
} from 'vue';
import { useRouter,useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const isUserPage = ref(false);
const props = defineProps({
title: {
type: String,
default: ''
},
showBackIcon: {
type: Boolean,
default: true
}
});
const goIndex = () => {
router.push('/')
};
const goUser = () => {
router.push('/user')
};
const checkIfUserPage = () => {
isUserPage.value = route.path === '/user'
};
onMounted(() => {
checkIfUserPage();
});
</script>
<style scoped>
.custom-navbar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 13.33vw;
padding: 0 6.4vw;
background-color: #fff;
}
.logo {
width: 10.67vw;
height: 4.8vw;
}
.title {
flex: 1;
font-family: Roboto-Black;
font-weight: 900;
font-size: 4.8vw;
color: #000000;
text-align: left;
font-style: normal;
text-transform: none;
margin-left: 2.13vw;
}
.right {
min-width: 16.8vw;
height: 6.4vw;
padding: 0 1.07vw;
background: #000000;
border-radius: 10.67vw;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.right_count {
display: flex;
flex-direction: row;
align-items: center;
}
.right .right_count .moneyIcon,
.right .userIcon {
height: 4.27vw;
width: 4.27vw;
margin-right: 1.07vw;
}
.right .userIcon {
border-radius: 100%;
margin-right: 0;
margin-left: 1.07vw;
}
.right .count {
font-family: Roboto, Roboto;
font-weight: bold;
font-size: 2.67vw;
color: #FFFFFF;
text-align: left;
font-style: normal;
text-transform: none;
}
</style>
src/components/Loading.vue 0 → 100644
View file @ 5ff86e01
<template>
<div class="loading" v-if="showLoading">
<div class="running-con">
<img src="../assets/images/running.gif" mode=""></img>
<p>RUNNING...</p>
</div>
</div>
</template>
<script setup>
import {
defineProps,
defineEmits
} from 'vue';
const props = defineProps({
showLoading: {
type: Boolean,
default: false
}
});
</script>
<style>
.loading{
position: fixed;
top: 0;
left: 0;
z-index: 100;
height: 100%;
width: 100%;
background: #FFFFFF;
opacity: 0.93;
display: flex;
justify-content: center;
align-items: center;
}
.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;
position: relative;
padding: 5.6vw 0;
box-sizing: border-box;
}
.running-con img{
width: 22.4vw;
height: 38.4vw;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -28vw;
}
.running-con p{
font-family: Roboto-Bold;
font-weight: bold;
font-size: 3.73vw;
color: #FFFFFF;
text-align: center;
font-style: normal;
text-transform: none;
/* margin-top: 32rpx; */
}
</style>
\ No newline at end of file
src/lib/aonweb/aon-web.cjs.js 0 → 100644
View file @ 5ff86e01
This diff is collapsed.
src/lib/aonweb/aon-web.es.js 0 → 100644
View file @ 5ff86e01
This diff is collapsed.
src/lib/aonweb/aon-web.iife.js 0 → 100644
View file @ 5ff86e01
This diff is collapsed.
src/lib/aonweb/aon-web.umd.js 0 → 100644
View file @ 5ff86e01
This diff is collapsed.
src/main.ts 0 → 100644
View file @ 5ff86e01
import './assets/main.css'
import { createApp } from 'vue'
import { Uploader } from 'vant';
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.use(Uploader)
app.mount('#app')
src/router/index.ts 0 → 100644
View file @ 5ff86e01
import { createRouter, createWebHistory } from 'vue-router'
import Index from '../views/Index.vue'
import User from '../views/User.vue'
import Created from '../views/Created.vue'
import Complete from '../views/Complete.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: Index
},
{
path: '/user',
name: 'user',
component: User
},
{
path: '/created',
name: 'created',
component: Created
},
{
path: '/complete',
name: 'complete',
component: Complete
}
]
})
export default router
src/shims-vue.d.ts 0 → 100644
View file @ 5ff86e01
// shims-vue.d.ts
declare module '*.vue' {
import { DefineComponent } from 'vue';
const component: DefineComponent<{}, {}, any>;
export default component;
}
src/types/fullpage.d.ts 0 → 100644
View file @ 5ff86e01
declare module 'fullpage.js';
src/views/Complete.vue 0 → 100644
View file @ 5ff86e01
<template>
<Header></Header>
<div class="user">
<div class="container complete">
<div>
<text class="back" @click="goBack">{{ '<' }}BACK</text>
</div>
<img class="completeIcon" src="../assets/images/complete.png" mode=""></img>
<text class="p1">
Complete the task to obtain AON Points
</text>
<text class="p2">
Your current points are insufficient. Please complete the task to obtain more AON Points.
</text>
<button>Share</button>
</div>
</div>
</template>
<script setup>
import {
ref,
} from 'vue';
import { useRoute,useRouter } from 'vue-router'
import Header from '../components/Header.vue';
const router = useRouter()
const goBack = () => {
router.back();
}
</script>
<style scoped>
.complete {
padding-top: 4.27vw;
display: flex;
flex-direction: column;
justify-content: center;
}
.back {
font-family: Roboto-Bold;
font-weight: bold;
font-size: 3.2vw;
color: #000000;
text-align: left;
font-style: normal;
text-decoration-line: underline;
text-transform: none;
}
.completeIcon {
width: 67.2vw;
height: 49.6vw;
margin: 0 auto;
margin-top: 16.53vw;
margin-bottom: 18.13vw;
}
.p1 {
font-family: Roboto-Black;
font-weight: 900;
font-size: 6.4vw;
color: #000000;
line-height: 9.07vw;
text-align: left;
font-style: normal;
text-transform: none;
margin-bottom: 4.27vw;
}
.p2 {
font-family: Roboto-Regular;
font-weight: 400;
font-size: 3.2vw;
color: #000000;
line-height: 4.8vw;
text-align: left;
font-style: normal;
text-transform: none;
}
button {
width: 65.07vw;
height: 9.07vw;
line-height: 9.07vw;
background: #2F54EB;
box-shadow: 1.07vw 1.07vw 2.13vw .13vw rgba(47, 84, 235, 0.32);
border-radius: 1.07vw;
font-family: Roboto-Black;
font-weight: 900;
font-size: 3.73vw;
color: #FFFFFF;
text-align: center;
font-style: normal;
text-transform: none;
margin: 0 auto;
margin-top: 14.4vw;
border: none;
}
</style>
src/views/Created.vue 0 → 100644
View file @ 5ff86e01
<template>
<div class="">
<Header></Header>
<div class="container created">
<div class="resCon">
<img class="res_img" :src="imageUrl" mode=""></img>
</div>
<div class="download">
<img src="../assets/icons/download.png" @click="downloadImage" mode=""></img>
</div>
<div class="bottom_btn">
<button class="createMore" @click="goToCreate">Generate More</button>
<button class="shareBtn">Share</button>
</div>
</div>
</div>
</template>
<script setup>
import {
ref,
onMounted
} from 'vue';
import { useRoute, useRouter } from 'vue-router'
import Header from '../components/Header.vue';
const router = useRouter()
const route = useRoute()
const imageUrl = ref('')
function goToCreate() {
router.push({
path: '/'
})
}
async function downloadImage() {
if (!imageUrl.value) return;
try {
// Fetch the image as a blob
const response = await fetch(imageUrl.value);
const blob = await response.blob();
// Create a link element and set the URL using the blob
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'downloaded-image.jpg'; // 设置下载的文件名
// Append the link to the body and click it to trigger the download
document.body.appendChild(link);
link.click();
// Clean up by removing the link element
document.body.removeChild(link);
} catch (error) {
console.error('Error downloading the image:', error);
}
}
onMounted(() => {
imageUrl.value = route.query.url;
})
</script>
<style scoped>
.created {
padding-top: 8.53vw;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.resCon{
display: flex;
justify-content: center;
align-items: center;
height: 116.27vw;
width: 100%;
}
.res_img {
width: 100%;
height: auto;
max-height: 116.27vw;
}
.download {
position: fixed;
bottom: 23.73vw;
left: 50%;
transform: translateX(-50%);
width: 10.67vw;
height: 10.67vw;
border-radius: 100%;
background: #F1F1F1;
display: flex;
justify-content: center;
align-items: center;
}
.download img {
height: 4.27vw;
width: 4.27vw;
}
button {
font-family: Roboto-Black;
font-weight: 900;
font-size: 3.73vw;
color: #FFFFFF;
text-align: center;
font-style: normal;
text-transform: none;
}
.createMore {
width: 50.67vw;
height: 9.07vw;
background: #000000;
box-shadow: 1.07vw 1.07vw 2.13vw .13vw rgba(0, 0, 0, 0.32);
border-radius: 1.07vw;
}
.shareBtn {
width: 32.27vw;
height: 9.07vw;
background: #2F54EB;
box-shadow: 1.07vw 1.07vw 2.13vw .13vw rgba(47, 84, 235, 0.32);
border-radius: 1.07vw;
}
</style>
src/views/Index.vue 0 → 100644
View file @ 5ff86e01
<template>
<Header></Header>
<Loading :showLoading="showLoading" />
<div>
<!-- 页面内容 -->
<div class="container">
<img class="banner" src="../assets/images/banner.png" mode=""></img>
<div class="uni-form-item uni-column">
<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>
<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"
:after-read="afterRead">
<div class="upload upload-before">
<img class="uploadIcon" src="../assets/icons/uploadImg.png" mode=""></img>
<text>limit 30MB per file</text>
</div>
</van-uploader>
</div>
</div>
<div class="uni-form-item uni-column">
<div class="title">Customize your clothing logo</div>
<div class="content">
<input v-model="logoText" name="input" placeholder="Please enter the logo text on your clothes" />
</div>
</div>
<div class="uni-form-item error-text" v-if="showError">
<div class="content">Please Upload your photos</div>
</div>
<div class="bottom_btn">
<div class="spendCount">
<img class="icon" src="../assets/icons/money.png" mode=""></img>
<text>-8</text>
</div>
<button class="submitBtn" @click="formSubmit">
<text>Generate img</text>
</button>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { showToast } from 'vant';
import { useRouter } from 'vue-router'
import { AI } from '../lib/aonweb/aon-web.es'
import 'vant/lib/index.css';
import Header from '../components/Header.vue';
import Loading from '../components/Loading.vue';
const router = useRouter()
const showLoading = ref(false);
const showError = ref(false);
const logoText = ref('');
const imgUrl = ref('');
const submitImgUrl = ref('');
const maxSize = 30 * 1024 * 1024;
function goToComplete(url) {
const query = { url: url }
router.push({
path: '/created',
query
})
}
const onOversize = (file) => {
console.log(file);
showToast('文件大小不能超过 30MB');
};
function afterRead(file) {
const formData = new FormData();
formData.append('file', file.file);
console.log(formData, file.file)
// 调用上传接口
uploadFile(formData).then(res => {
console.log(res);
if (res.code == 200 && res.data && res.data.length) {
submitImgUrl.value = res.data
}
}).catch(err => {
showToast('image upload failed');
console.log(err);
});
imgUrl.value = URL.createObjectURL(file.file);
}
// 上传接口
const uploadFile = async (formData) => {
const response = await fetch('https://tmp-file.aigic.ai/api/v1/upload?expires=1800&type=image/png', {
method: 'POST',
body: formData
});
const data = await response.json();
console.log(data);
return data;
};
function deleteImg() {
if (imgUrl.value) {
const formData = new FormData();
formData.append('file', imgUrl.value);
// 删除文件
formData.delete('file');
imgUrl.value = null;
submitImgUrl.value = null
console.log('File deleted:', formData.get('file'));
} else {
console.log('No file to delete')
}
}
const formSubmit = async () => {
if (!logoText.value || !imgUrl.value || !submitImgUrl.value) {
showError.value = true
setTimeout(() => {
showError.value = false
}, 3000)
return
}
showLoading.value = true
try {
// AI 使用方法
const ai_options = {
//Please replace with your own API key or jwt token.
auth: "Rbhpcp0FKNrYNA1nZkrwrIbD0YSSRlVG",
// host: "http://localhost:8080"
}
const aonet = new AI(ai_options)
const data = {
input: {
"image": submitImgUrl.value,
"style": "3D",
"prompt": logoText.value,
"negative_prompt": "",
"prompt_strength": 4.5,
"denoising_strength": 1,
"instant_id_strength": 0.8
}
}
console.log("formSubmit data", data)
let response = await aonet.prediction("/predictions/ai/face-to-many", data)
console.log("test", response)
if (response.task.exec_code == 200 && response.task.is_success) {
showLoading.value = false
let url = response.output
if (Array.isArray(response.output)) {
url = response.output && response.output.length && response.output[0]
}
if (typeof url == 'object' || typeof url == 'Object') {
return
}
goToComplete(url)
} else {
showLoading.value = false
showToast('AI processing failed')
}
} catch (error) {
showLoading.value = false
showToast('AI processing failed')
}
}
</script>
<style scoped>
.banner {
width: 100%;
height: 27.73vw;
margin-top: 8.53vw;
margin-bottom: 8.53vw;
}
.uni-form-item .title {
font-family: Roboto-Bold;
font-weight: bold;
font-size: 3.73vw;
color: #000000;
text-align: left;
font-style: normal;
text-transform: none;
margin-bottom: 2.13vw;
}
.uni-form-item {
margin-bottom: 8.53vw;
}
.uni-form-item .content {
width: 100%;
height: 14.93vw;
background: #F1F1F1;
border-radius: 1.07vw;
display: flex;
align-items: center;
padding: 0 3.2vw;
box-sizing: border-box;
}
.error-text .content {
background-color: #F3A32B;
font-size: 3.2vw;
color: #fff;
}
.uni-form-item .content input {
width: 100%;
font-size: 3.2vw;
font-family: Roboto-Regular;
border: none;
outline: none;
background-color: #F1F1F1;
}
.upload {
width: 100%;
display: flex;
align-items: center;
}
.upload-before text {
color: #575757;
font-size: 3.2vw;
font-family: Roboto-Regular;
}
.upload-done {
justify-content: space-between;
}
.uploadIcon {
width: 6.4vw;
height: 6.4vw;
margin-right: 2.13vw;
}
.upload-res {
width: auto;
max-height: 8.53vw;
}
.deleteIcon {
height: 5.07vw;
width: 5.07vw;
}
.bottom_btn .spendCount {
width: 19.2vw;
height: 9.07vw;
background: #F1F1F1;
border-radius: 1.07vw;
display: flex;
justify-content: center;
align-items: center;
}
.bottom_btn .spendCount .icon {
height: 6.4vw;
width: 6.4vw;
margin-right: 1.07vw;
}
.bottom_btn .submitBtn {
width: 64.8vw;
height: 9.07vw;
background: #000000;
box-shadow: 1.07vw 1.07vw 2.13vw .13vw rgba(0, 0, 0, 0.32);
border-radius: 1.07vw;
display: flex;
justify-content: center;
align-items: center;
}
.bottom_btn .submitBtn text {
font-size: 3.73vw;
font-weight: bold;
background: linear-gradient(182deg, #2F54EB 0%, #FF26A8 100%);
-webkit-background-clip: text;
color: transparent;
background-clip: text;
}
</style>
src/views/User.vue 0 → 100644
View file @ 5ff86e01
<template>
<Header></Header>
<div class="user">
<div class="container">
<div class="ava-con">
<img class="ava" src="../assets/icons/user.png" mode=""></img>
<div class="ava-con-r">
<text class="userId">user-125482</text>
<text class="address">
{{ account }}
<img class="copy" src="../assets/icons/copy.png" @click="handleCopy" mode="" />
</text>
</div>
</div>
<img @click="goToComplete" class="person-banner" src="../assets/images/personBanner.png" mode=""></img>
<!-- <div class="myWork">
<text>My work</text>
<div class="waterfall">
<div class="waterfall-column" v-for="(column, index) in columns" :key="index">
<img v-for="item in column" :key="item.id" :src="item.src" class="waterfall-item" />
</div>
</div>
</div> -->
<div class="bottom_btn">
<button @click="goToCreate">
Go To Create
</button>
</div>
</div>
</div>
</template>
<script setup>
import {
ref,
onMounted
} from 'vue';
import { useRouter } from 'vue-router'
import { Options, User } from '../lib/aonweb/aon-web.es'
import { showToast } from 'vant';
import Header from '../components/Header.vue';
const router = useRouter()
const account = ref('')
const handleCopy = async () => {
try {
await navigator.clipboard.writeText(account.value);
showToast('复制成功');
} catch (err) {
showToast('复制失败');
}
};
function goToCreate() {
router.push({
path: '/'
})
}
function goToComplete() {
router.push({
path: '/complete'
})
}
// https://app.aonet.ai/api
// https://app.aonet.ai/kvapi
async function getAccount() {
const options = new Options({
type: Options.LoginTypes.TYPE_FP,
server: 'https://app.aonet.ai',
storeage_url: 'https://app.aonet.ai'
});
console.log(options)
//User 的使用方法
let user = new User(options)
let addr = await user.login()
console.log("getWeb3 account", addr)
account.value = addr[0]
// //detectEthereumProvider 的使用方法
// let ethereum = await detectEthereumProvider(options)
// if (ethereum) {
// // console.log(ethereum)
// const web3 = new Web3(ethereum);
// try {
// let account = await ethereum.request({ method: 'eth_requestAccounts' })
// console.log('getWeb3 account', account)
// account = account[0]
// return web3;
// } catch (error) {
// // User denied account access...
// return null;
// }
// }
// // AI 使用方法
// const ai_options = {
// //Please replace with your own API key or jwt token.
// auth: "$API_KEY"
// }
// const aonet = new AI(ai_options)
// let response = await aonet.prediction("/predictions/ai/face-to-many",
// {
// input: {
// "image": "https://aonet.ai/pbxt/KW7CdCusXMkkOs9bbCGYsInC8EUxlj3yBLxvfW9Fs9FFMZUL/MTk4MTczMTkzNzI1Mjg5NjYy.webp",
// "style": "3D",
// "prompt": "a zombie in a fire, burning flames behind him",
// "negative_prompt": "boring",
// "prompt_strength": 4.5,
// "denoising_strength": 1,
// "instant_id_strength": 0.8
// }
// })
// console.log("test", response)
}
onMounted(() => {
getAccount()
})
</script>
<style scoped>
.ava-con {
width: 100%;
margin-top: 8.53vw;
display: flex;
flex-direction: row;
box-sizing: border-box;
}
.ava-con .ava {
height: 22.93vw;
width: 22.93vw;
margin-right: 4.27vw;
}
.ava-con-r {
width: 60vw;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.ava-con-r text {
word-wrap: break-word;
font-family: Roboto-Regular;
font-weight: 400;
font-size: 3.73vw;
color: #000000;
line-height: 5.6vw;
text-align: left;
font-style: normal;
text-transform: none;
}
.ava-con-r .userId {
font-weight: bold;
font-size: 4.27vw;
line-height: 4.27vw;
margin-bottom: 3.2vw;
margin-top: 3.73vw;
text-transform: uppercase;
}
.copy {
height: 3.2vw;
width: 3.2vw;
}
.ava-con-r text {
width: 100%;
}
.person-banner {
width: 100%;
height: 36.27vw;
margin: 6.4vw 0;
}
.myWork text {
font-family: Roboto-Bold;
font-weight: bold;
font-size: 3.73vw;
color: #000000;
text-align: left;
font-style: normal;
text-transform: none;
margin-bottom: 4.27vw;
}
button {
width: 100%;
height: 9.07vw;
background: #000000;
box-shadow: 1.07vw 1.07vw 2.13vw .13vw rgba(0, 0, 0, 0.32);
border-radius: 1.07vw;
font-family: Roboto-Black;
font-weight: 900;
font-size: 3.73vw;
color: #FFFFFF;
text-align: center;
font-style: normal;
text-transform: none;
}
</style>
tsconfig.app.json 0 → 100644
View file @ 5ff86e01
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"composite": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
tsconfig.json 0 → 100644
View file @ 5ff86e01
{
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
}
],
"compilerOptions": {
"allowJs": true,
"esModuleInterop": true,
}
}
tsconfig.node.json 0 → 100644
View file @ 5ff86e01
{
"extends": "@tsconfig/node20/tsconfig.json",
"include": [
"vite.config.*",
"vitest.config.*",
"cypress.config.*",
"nightwatch.conf.*",
"playwright.config.*"
],
"compilerOptions": {
"composite": true,
"noEmit": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"module": "ESNext",
"moduleResolution": "Bundler",
"types": ["node"]
}
}
vercel.json 0 → 100644
View file @ 5ff86e01
{
"rewrites": [
{
"source": "/(.*)",
"destination": "/index.html"
}
]
}
\ No newline at end of file
vite.config.ts 0 → 100644
View file @ 5ff86e01
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import VueDevTools from 'vite-plugin-vue-devtools'
import commonjs from 'vite-plugin-commonjs';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
commonjs(),
vue(),
vueJsx(),
VueDevTools(),
],
base: '/',
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
server: {
host: '0.0.0.0',
port: 8080,
proxy: {
'/api': {
target: 'https://api.aonet.ai/',
changeOrigin: true,
},
},
}
})
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