diff --git a/examples/demos/discogs-autotagging/views/package-lock.json b/examples/demos/discogs-autotagging/views/package-lock.json
index c07c393..8624dad 100644
--- a/examples/demos/discogs-autotagging/views/package-lock.json
+++ b/examples/demos/discogs-autotagging/views/package-lock.json
@@ -297,6 +297,11 @@
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
"dev": true
},
+ "bootstrap": {
+ "version": "4.6.1",
+ "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.1.tgz",
+ "integrity": "sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og=="
+ },
"braces": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
diff --git a/examples/demos/discogs-autotagging/views/package.json b/examples/demos/discogs-autotagging/views/package.json
index 72188d8..4753e2d 100644
--- a/examples/demos/discogs-autotagging/views/package.json
+++ b/examples/demos/discogs-autotagging/views/package.json
@@ -8,6 +8,7 @@
},
"dependencies": {
"@tensorflow/tfjs": "^3.11.0",
+ "bootstrap": "^4.6.1",
"d3": "^7.1.1",
"d3-cloud": "^1.2.5",
"essentia.js": "^0.1.3",
diff --git a/examples/demos/discogs-autotagging/views/src/App.vue b/examples/demos/discogs-autotagging/views/src/App.vue
index 8cc928a..035c3ec 100644
--- a/examples/demos/discogs-autotagging/views/src/App.vue
+++ b/examples/demos/discogs-autotagging/views/src/App.vue
@@ -1,16 +1,20 @@
-
-
-
-
+
@@ -45,5 +49,6 @@ main {
body {
background-color: rgb(var(--color-bg));
color: white;
+ margin: 0;
}
diff --git a/examples/demos/discogs-autotagging/views/src/assets/styles/globals.scss b/examples/demos/discogs-autotagging/views/src/assets/styles/globals.scss
new file mode 100644
index 0000000..6e0ec03
--- /dev/null
+++ b/examples/demos/discogs-autotagging/views/src/assets/styles/globals.scss
@@ -0,0 +1,9 @@
+$primary: #E4454A;
+$dark: rgb(25, 25, 25);
+$carousel-control-color: #000;
+
+@import 'bootstrap/scss/bootstrap.scss';
+
+body {
+ overflow: hidden;
+}
\ No newline at end of file
diff --git a/examples/demos/discogs-autotagging/views/src/components/DemosFooter.vue b/examples/demos/discogs-autotagging/views/src/components/DemosFooter.vue
new file mode 100644
index 0000000..ef17df7
--- /dev/null
+++ b/examples/demos/discogs-autotagging/views/src/components/DemosFooter.vue
@@ -0,0 +1,80 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/demos/discogs-autotagging/views/src/components/EssentiaLogo.vue b/examples/demos/discogs-autotagging/views/src/components/EssentiaLogo.vue
new file mode 100644
index 0000000..72b35ed
--- /dev/null
+++ b/examples/demos/discogs-autotagging/views/src/components/EssentiaLogo.vue
@@ -0,0 +1,92 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/demos/discogs-autotagging/views/src/components/EssentiajsLogo.vue b/examples/demos/discogs-autotagging/views/src/components/EssentiajsLogo.vue
new file mode 100644
index 0000000..16694bf
--- /dev/null
+++ b/examples/demos/discogs-autotagging/views/src/components/EssentiajsLogo.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/demos/discogs-autotagging/views/src/components/MTGLogo.vue b/examples/demos/discogs-autotagging/views/src/components/MTGLogo.vue
new file mode 100644
index 0000000..2bb80bf
--- /dev/null
+++ b/examples/demos/discogs-autotagging/views/src/components/MTGLogo.vue
@@ -0,0 +1,369 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file