Add Vuetify and update UI components

aniketmaurya · Feb 16, 2024 · 7ec30db · 7ec30db
1 parent 6820cad
commit 7ec30db
Show file tree

Hide file tree

Showing 11 changed files with 102 additions and 32 deletions.
diff --git a/src/ui/dist/assets/index-6-S8NhO-.css b/src/ui/dist/assets/index-6-S8NhO-.css
diff --git a/src/ui/dist/assets/index-BWQ9B7__.js b/src/ui/dist/assets/index-BWQ9B7__.js
diff --git a/src/ui/dist/assets/index-BcUHOKSf.js b/src/ui/dist/assets/index-BcUHOKSf.js
diff --git a/src/ui/dist/assets/index-BvPN69uT.css b/src/ui/dist/assets/index-BvPN69uT.css
diff --git a/src/ui/dist/index.html b/src/ui/dist/index.html
@@ -4,9 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="https://raw.githubusercontent.com/aniketmaurya/blog/main/assets/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">
     <title>FastServe 🧡</title>
-    <script type="module" crossorigin src="/assets/index-BcUHOKSf.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BvPN69uT.css">
+    <script type="module" crossorigin src="/assets/index-BWQ9B7__.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-6-S8NhO-.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/ui/index.html b/src/ui/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="https://raw.githubusercontent.com/aniketmaurya/blog/main/assets/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">
     <title>FastServe 🧡</title>
   </head>
   <body>

diff --git a/src/ui/package-lock.json b/src/ui/package-lock.json
diff --git a/src/ui/package.json b/src/ui/package.json
@@ -9,7 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.3.11"
+    "vue": "^3.3.11",
+    "vuetify": "^3.5.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.2",

diff --git a/src/ui/src/App.vue b/src/ui/src/App.vue
@@ -5,7 +5,7 @@ import ImageCard from './components/ImageCard.vue';
 
 <template>
   <h1 class="flex justify-center text-3xl font-bold underline">
-    SDXL Turbo
+    Image Generation
   </h1>
   <ImageCard/>
 </template>

diff --git a/src/ui/src/components/ImageCard.vue b/src/ui/src/components/ImageCard.vue
@@ -9,10 +9,10 @@
                         type="text" placeholder="Image prompt"/>
                 </div>
 
-                <button type="button" @click="generateImage()"
-                    class="mt-4 w-full rounded-sm bg-black px-2 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-black/80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black">
+                <v-btn color="purple" block :loading="loading" @click="generateImage()"
+                    class="mt-4">
                     Generate
-                </button>
+                </v-btn>
             </div>
         </div>
     </div>
@@ -27,7 +27,8 @@ export default {
     data() {
         return {
             imagePath: sampleImageSrc,
-            inputPrompt: "dog in a frosty background, puppy eyes, cute, full of lights, 8K"
+            inputPrompt: "dog in a frosty background, puppy eyes, cute, full of lights, 8K",
+            loading: false,
         }
     },
     methods: {
@@ -37,6 +38,7 @@ export default {
             }
         },
         async postRequest(newPrompt) {
+            this.loading = true;
             try {
                 const response = await fetch('/endpoint', {
                     method: 'POST',
@@ -61,11 +63,14 @@ export default {
                 );
 
                 this.imagePath = responseDataUrl;
-                return responseDataUrl
+                this.loading = false;
+                return true;
             } catch (error) {
                 console.error('Error fetching data:', error);
+                this.loading = false;
                 // Handle error appropriately (e.g., show an error message to the user)
             }
+            return false;
         }
     }
 }

diff --git a/src/ui/src/main.js b/src/ui/src/main.js
@@ -1,5 +1,25 @@
-import { createApp } from 'vue'
+// import { createApp } from 'vue'
+// import './style.css'
+// import App from './App.vue'
+// createApp(App).mount('#app')
+
+
 import './style.css'
+import { createApp } from 'vue'
 import App from './App.vue'
 
-createApp(App).mount('#app')
+// Vuetify
+import 'vuetify/styles'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+
+const vuetify = createVuetify({
+  components,
+  directives,
+  theme: {
+    defaultTheme: 'dark'
+  }
+})
+
+createApp(App).use(vuetify).mount('#app')