Add tags page (#4549)

Signed-off-by: Olga Bulat <[email protected]>

frontend/src/components/VMediaInfo/VMediaTags.vue

@@ -13,7 +13,7 @@
     <div v-if="hasGeneratedTags">
       <div class="label-regular mb-2 flex gap-2">
         <h3>{{ $t("mediaDetails.tags.generated.heading") }}</h3>
-        <VLink :href="generatedTagsPath">{{
+        <VLink :href="tagsPagePath">{{
           $t("mediaDetails.tags.generated.pageTitle")
         }}</VLink>
       </div>
@@ -76,9 +76,9 @@ export default defineComponent({
 
     const { app } = useContext()
 
-    const generatedTagsPath = computed(() => app.localePath("/generated-tags"))
+    const tagsPagePath = computed(() => app.localePath("/tags"))
 
-    return { generatedTagsPath, tagsByType, hasSourceTags, hasGeneratedTags }
+    return { tagsPagePath, tagsByType, hasSourceTags, hasGeneratedTags }
   },
 })
 </script>

frontend/src/locales/scripts/en.json5

@@ -467,10 +467,30 @@
       },
     },
   },
-  generatedTags: {
-    title: "About Generated Tags",
+  tags: {
+    title: "Understanding Tags in {openverse}",
+    /** generatedTags.intro.a-b are parts of a single section explaining how tags work in Openverse. */
     intro: {
-      content: "Generated tags are automatically assigned to media items based on the content of the media item itself. These tags are generated using machine learning models trained on a large dataset of images and audio tracks.",
+      a: "Each creative work in {openverse} may have tags, an optional set of keywords used to describe the work and make it easier for users to find relevant media for their searches.",
+      b: "These tags fall into two main categories: source tags and generated tags. Understanding the difference between them can enhance your search experience and improve the accuracy of your results.",
+    },
+    sourceTags: {
+      title: "Source Tags",
+      /** sourceTags.content.a-b are parts of a single section explaining how source tags work in Openverse. */
+      content: {
+        a: "Source tags are tags that originate from the original source of the creative work. These tags may be added by different contributors, for example a photographer who uploaded their image to Flickr and added descriptive tags.",
+        b: "The original platform itself may assign additional tags from community members, automation, or other sources.",
+      },
+    },
+    generatedTags: {
+      title: "Generated Tags",
+      /** generatedTags.content.a-d are parts of a single section explaining how generated tags work in Openverse. */
+      content: {
+        a: "Generated tags are created through automated machine analysis of creative works, most commonly images. This process involves advanced technologies like AWS Rekognition, Clarifai, and other image recognition services that analyze the content and generate descriptive tags. ",
+        b: "While generally reliable, automated systems can sometimes misinterpret or miss elements in an image.",
+        c: "Openverse makes efforts to exclude any generated tags that make inferences about the identities or affiliations of human subjects. ",
+        d: 'If you encounter any images with generated tags making assumptions about, for example, gender, religion, or political affiliation, please report the images using the "Report" button on our single result pages.',
+      },
     },
   },
   error: {

frontend/src/pages/tags.vue

@@ -0,0 +1,45 @@
+<template>
+  <VContentPage>
+    <h1>{{ $t("tags.title", { openverse: "Openverse" }) }}</h1>
+    <p>{{ $t("tags.intro.a", { openverse: "Openverse" }) }}</p>
+    <p>{{ $t("tags.intro.b") }}</p>
+    <h2>{{ $t("tags.sourceTags.title") }}</h2>
+    <p>
+      {{ $t("tags.sourceTags.content.a") }}{{ $t("tags.sourceTags.content.b") }}
+    </p>
+    <h2>{{ $t("tags.generatedTags.title") }}</h2>
+    <p>
+      {{ $t("tags.generatedTags.content.a")
+      }}{{ $t("tags.generatedTags.content.b") }}
+    </p>
+    <p>
+      {{ $t("tags.generatedTags.content.c")
+      }}{{ $t("tags.generatedTags.content.d") }}
+    </p>
+  </VContentPage>
+</template>
+
+<script lang="ts">
+import { defineComponent, useMeta } from "@nuxtjs/composition-api"
+
+import { useI18n } from "~/composables/use-i18n"
+
+import VContentPage from "~/components/VContentPage.vue"
+
+export default defineComponent({
+  name: "VTagsPage",
+  components: { VContentPage },
+  layout: "content-layout",
+  setup() {
+    const i18n = useI18n()
+
+    useMeta({
+      title: `${i18n.t("tags.title")} | Openverse`,
+      meta: [{ hid: "robots", name: "robots", content: "all" }],
+    })
+
+    return {}
+  },
+  head: {},
+})
+</script>