🎉 Waifu minter

components/base/SubmitButton.vue

@@ -1,26 +1,34 @@
 <template>
   <b-field>
     <b-button
-      type="is-primary"
-      icon-left="paper-plane"
-      @click="$emit('click')"
+      :type="type"
+      :icon-left="icon"
       :disabled="disabled"
       :loading="loading"
-      outlined>
+      :expanded="expanded"
+      outlined
+      @click="$emit('click')">
       <slot>
         {{ $t(label) }}
       </slot>
     </b-button>
   </b-field>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'nuxt-property-decorator'
-
-@Component({})
-export default class SubmitButton extends Vue {
-  @Prop(Boolean) public disabled!: boolean
-  @Prop(Boolean) public loading!: boolean
-  @Prop(String) public label!: string
+<script setup lang="ts">
+export interface Props {
+  disabled?: boolean
+  expanded?: boolean
+  icon?: string
+  label: string
+  loading?: boolean
+  type?: string
 }
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false,
+  disabled: false,
+  type: 'is-primary',
+  icon: 'paper-plane',
+})
 </script>

components/bsx/Create/GenerativeMint.vue

@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <Loader v-model="isLoading" :status="status" />
+    <b-steps
+      v-model="currentStep"
+      :rounded="false"
+      mobile-mode="minimalist"
+      :has-navigation="false">
+      <b-step-item step="1" label="Mint" :clickable="isStepsClickable">
+        <GenerativeMint @select="handlePrediction" @submit="handleBuilder" />
+      </b-step-item>
+
+      <b-step-item step="2" label="Select" :clickable="isStepsClickable">
+        <ImageSelectGrid
+          :predicion="predicion"
+          :selected="image"
+          @select="handleImageSelect" />
+      </b-step-item>
+
+      <b-step-item step="3" label="Contact" :clickable="isStepsClickable">
+        <ContactForm @select="handleMailSubmit" />
+      </b-step-item>
+
+      <b-step-item
+        step="4"
+        label="Finish"
+        :clickable="isStepsClickable"
+        :type="{ 'is-success': true }">
+        <CongratsView @select="clearAll" />
+      </b-step-item>
+    </b-steps>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PredictionStatus } from '@/services/replicate'
+import { sendWaifu } from '@/services/waifu'
+import { emptyObject } from '@/utils/empty'
+import { notificationTypes, showNotification } from '@/utils/notification'
+import { Options, buildMetadata } from '@/components/generative/promptBuilder'
+
+const Loader = defineAsyncComponent(
+  () => import('@/components/shared/Loader.vue')
+)
+
+const GenerativeMint = defineAsyncComponent(
+  () => import('@/components/generative/GenerativeMintForm.vue')
+)
+
+const ImageSelectGrid = defineAsyncComponent(
+  () => import('@/components/generative/ImageSelectGrid.vue')
+)
+
+const ContactForm = defineAsyncComponent(
+  () => import('@/components/generative/ContactForm.vue')
+)
+
+const CongratsView = defineAsyncComponent(
+  () => import('@/components/generative/CongratsView.vue')
+)
+
+const isStepsClickable = ref(true)
+const currentStep = ref<number>(0)
+const predicion = ref<PredictionStatus>(emptyObject<PredictionStatus>())
+const builder = ref<Options>(emptyObject<Options>())
+const image = ref<string>('')
+const email = ref('')
+const isLoading = ref(false)
+const status = ref('')
+
+const handlePrediction = (generation: PredictionStatus) => {
+  predicion.value = generation
+  goToStep(1)
+}
+
+const handleImageSelect = (imageURI: string) => {
+  image.value = imageURI
+  goToStep(2)
+}
+
+const handleMailSubmit = (mail: string) => {
+  email.value = mail
+  submitAll()
+  goToStep(3)
+}
+
+const handleBuilder = (options: Options) => {
+  builder.value = options
+}
+
+const submitAll = async () => {
+  try {
+    isLoading.value = true
+    status.value = 'loader.ipfs'
+    const metadata = await buildMetadata(
+      image.value,
+      builder.value,
+      predicion.value
+    )
+    status.value = 'loader.generative.send'
+    await sendWaifu(email.value, metadata, image.value)
+    goToStep(4)
+  } catch (error) {
+    showNotification(
+      'Error: ' + (error as Error).message,
+      notificationTypes.danger
+    )
+  } finally {
+    isLoading.value = false
+    status.value = ''
+  }
+  console.log('submitAll', predicion.value, image.value, email.value)
+}
+
+const clearAll = () => {
+  predicion.value = emptyObject<PredictionStatus>()
+  image.value = ''
+  email.value = ''
+  goToStep(0)
+}
+
+const goToStep = (step: number) => {
+  currentStep.value = step
+}
+</script>

components/generative/CongratsView.vue

@@ -0,0 +1,30 @@
+<template>
+  <section>
+    <br />
+    <p class="title is-size-3">Waii you made it! ✨</p>
+    <p class="title is-size-4">Our interns will process it soon!</p>
+    <b-image
+      ratio="1by1"
+      src="https://pbs.twimg.com/media/FhZZxxwXwAAkvKI?format=jpg" />
+    <br />
+
+    <SubmitButton
+      icon="sync"
+      type="is-success"
+      label="Start over"
+      expanded
+      @click="submit" />
+  </section>
+</template>
+
+<script setup lang="ts">
+const SubmitButton = defineAsyncComponent(
+  () => import('@/components/base/SubmitButton.vue')
+)
+
+const emit = defineEmits(['select'])
+
+const submit = () => {
+  emit('select')
+}
+</script>

components/generative/ContactForm.vue

@@ -0,0 +1,40 @@
+<template>
+  <section>
+    <br />
+    <p class="title is-size-3">Enter your email</p>
+
+    <BasicInput
+      v-model="email"
+      required
+      :label="$t('mint.nft.email.label')"
+      :message="$t('mint.nft.email.message')"
+      :placeholder="$t('mint.nft.email.placeholder')"
+      expanded
+      type="email"
+      spellcheck="true"
+      data-cy="input-name" />
+
+    <SubmitButton
+      label="submit"
+      type="is-info"
+      icon="envelope"
+      expanded
+      @click="submit" />
+  </section>
+</template>
+
+<script setup lang="ts">
+const BasicInput = defineAsyncComponent(
+  () => import('@/components/shared/form/BasicInput.vue')
+)
+const SubmitButton = defineAsyncComponent(
+  () => import('@/components/base/SubmitButton.vue')
+)
+
+const email = ref('')
+const emit = defineEmits(['select'])
+
+const submit = async () => {
+  emit('select', email.value)
+}
+</script>

components/generative/GenerativeMintForm.vue

@@ -0,0 +1,144 @@
+<template>
+  <section>
+    <br />
+    <Loader v-model="isLoading" :status="status" />
+    <p class="title is-size-3">Mint your sub0 POAP</p>
+
+    <p class="title is-size-4">I want to be</p>
+    <RadioSelect v-model="form.gender" :options="gender" />
+
+    <p class="title is-size-5">on</p>
+    <RadioSelect v-model="form.art" :options="art" />
+
+    <p class="title is-size-5">using</p>
+    <RadioSelect
+      v-model="form.style"
+      :options="isPhoto ? filmTypes : styles"
+      separated
+      show-empty />
+
+    <p class="title is-size-5">displaying</p>
+    <RadioSelect
+      v-model="form.framing"
+      :options="framing"
+      separated
+      show-empty />
+
+    <p class="title is-size-5">having</p>
+    <RadioSelect
+      v-model="form.having"
+      :options="accessories"
+      separated
+      show-empty />
+
+    <p class="title is-size-5">wearing</p>
+    <RadioSelect
+      v-model="form.wearing"
+      :options="clothes"
+      separated
+      show-empty />
+
+    <p class="title is-size-5">in light</p>
+    <RadioSelect
+      v-model="form.lighting"
+      :options="lights"
+      separated
+      show-empty />
+
+    <p class="title is-size-5">art inspired by</p>
+    <RadioSelect
+      v-model="form.inspiredBy"
+      :options="inspirations"
+      separated
+      show-empty />
+
+    <SubmitButton
+      icon="plus"
+      label="generate"
+      :loading="isLoading"
+      expanded
+      @click="submit" />
+  </section>
+</template>
+
+<script setup lang="ts">
+import { PredictionStatus, getPrediction, predict } from '@/services/replicate'
+import { logPrediction } from '@/services/supabase'
+import { emptyObject } from '@/utils/empty'
+import {
+  accessories,
+  art,
+  clothes,
+  filmTypes,
+  framing,
+  gender,
+  inspirations,
+  lights,
+  styles,
+} from './options'
+import { Options, buildPrompt } from './promptBuilder'
+
+const Loader = defineAsyncComponent(
+  () => import('@/components/shared/Loader.vue')
+)
+// const BasicInput = defineAsyncComponent(
+//   () => import('@/components/shared/form/BasicInput.vue')
+// )
+const SubmitButton = defineAsyncComponent(
+  () => import('@/components/base/SubmitButton.vue')
+)
+
+const RadioSelect = defineAsyncComponent(
+  () => import('@/components/shared/input/selectable/RadioSelect.vue')
+)
+
+const form = reactive<Options>({
+  gender: 'waifu',
+  art: 'painting',
+  vibe: '',
+  framing: 'close-up',
+  filmType: '',
+  style: '',
+  inspiredBy: '',
+  having: '',
+  wearing: '',
+  lighting: '',
+})
+
+const isLoading = ref(false)
+const status = ref('')
+const predictionId = ref('')
+const predicion = ref<PredictionStatus>(emptyObject<PredictionStatus>())
+const emit = defineEmits(['select', 'submit'])
+const isPhoto = computed(() => form.art === 'photo')
+
+// change form.style when form.art changes
+watch(isPhoto, () => (form.style = ''))
+
+const submit = async () => {
+  isLoading.value = true
+  status.value = 'predicting'
+  const prompt = buildPrompt(form)
+  console.log('prompt', prompt)
+  const predictRequest = await predict(prompt)
+  emit('submit', form)
+
+  const timeout = setInterval(async () => {
+    const generation = await getPrediction(predictRequest.id)
+    console.log('status', status)
+    predicion.value = generation
+    status.value = 'loader.generative.' + generation.status
+    if (generation.status === 'failed' || generation.status === 'succeeded') {
+      isLoading.value = false
+      status.value = ''
+      clearInterval(timeout)
+      if (generation.status === 'succeeded') {
+        emit('select', generation)
+        logPrediction(predictRequest.id, prompt).catch(console.error)
+      }
+    }
+  }, 2500)
+
+  predictionId.value = predictRequest.id
+}
+</script>