Last active
May 26, 2022 16:27
-
-
Save MoeRayo/abc7055812a1939a7ad4df6e4cff5782 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="bg-washed-green vh-100 ph3 ph5-ns"> | |
<header class="tc pv3"> | |
<h1 class="tl tc tl-ns mt2 mb0 calisto fw5 f2-ns f3 mid-gray">Music art covers using neural style transfer</h1> | |
</header> | |
<section class="flex flex-wrap justify-between"> | |
<div class="w-100 w-50-ns tc tl-ns br b--black-50"> | |
<h2 class="calisto fw1 f4-ns f3">Create image</h2> | |
<h3 class="calisto fw1 f6 black-80">Select an image</h3> | |
<div v-for="image in images" :key="image.id" class="fl-ns db tc pa1 grow aspect-ratio--4x6 mb3" :class="image.id === imageId ? 'ba bw2 b--purple ' : ''" @click="selectImage(image.id, image.publicId)"> | |
<cld-image :public-id="image.publicId" crop="scale" width="130" height="100"></cld-image> | |
</div> | |
<p v-if="error" class="cb red fw3 i f7">Please fill the required fields</p> | |
<div class="mv4 cb"> | |
<div class="mb3"> | |
<label class="mb1 ttc f7 db b" for="image-text">Text</label> | |
<input id="image-text" v-model="text" type="text" name="image-text" class="dib w-100 w-40-l w-70-m pv3 ph2 br2 ba b--black-40 f7 bg-washed-blue" required> | |
<button class="f6 link dim br2 pv3 ph2 mb2 dib white bg-navy ba b--navy pointer mt3 mt0-l" @click="upload">Generate image</button> | |
</div> | |
<div> | |
<h2 class="calisto fw1 f5 underline">Generated Image Result</h2> | |
</div> | |
</div> | |
</div> | |
<div class="w-100 w-50-ns tc tl-ns pl4"> | |
<h2 class="calisto fw1 f4-ns f3 ">Apply neural style transfer</h2> | |
<h3 class="calisto fw1 f6 black-80">Select an Album</h3> | |
<div v-for="album in albums" :key="album.id" class="fl-ns db tc pa1 grow aspect-ratio--4x6 mb3" :class="album.id === albumId ? 'ba bw2 b--green ' : ''" @click="selectAlbum(album.id, album.publicId)"> | |
<cld-image :public-id="album.publicId" crop="scale" width="130" height="100"></cld-image> | |
</div> | |
<button class="cb f6 link dim br2 pv3 ph2 mb2 db white bg-navy ba b--navy pointer mt4" @click="applyStyle">Apply neural style transfer</button> | |
</div> | |
</section> | |
</div> | |
</template> | |
<script> | |
import images from "~/utils/image-covers.json"; | |
import albums from "~/utils/album-covers.json"; | |
export default { | |
data() { | |
return { | |
images, | |
albums, | |
imageId: null, | |
albumId:null, | |
cloudName: "***", | |
publicId: null, | |
text: '', | |
error: false | |
} | |
}, | |
methods: { | |
selectImage(imageId, publicId) { | |
this.imageId = imageId | |
this.publicId = publicId | |
this.error = false | |
}, | |
selectAlbum(albumId, publicId) { | |
this.albumId = albumId | |
this.publicId = publicId | |
} | |
} | |
} | |
</script> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment