Adds captions modal with visibility controlled by featureflag

contentcuration/contentcuration/frontend/channelEdit/components/CaptionsEditor/CaptionsEditor.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+      <h1>{{ message }}</h1>
+    </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        message: "Caption editor!",
+      };
+    },
+  };
+</script>
+
+<style>
+  /* styles */
+</style>

contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue

@@ -62,6 +62,16 @@
                 {{ relatedResourcesCount }}
               </VChip>
             </VTab>
+
+            <!-- Captions editing tab -->
+            <VTab
+              v-if="showCaptions"
+              ref="caption-tab"
+              :href="`#${tabs.CAPTIONS}`"
+              @click="trackTab('Captions')"
+            >
+            {{ $tr(tabs.CAPTIONS) }}
+            </VTab>
           </Tabs>
         </ToolBar>
         <VContainer fluid>
@@ -82,13 +92,19 @@
             <VTabItem :key="tabs.QUESTIONS" ref="questionwindow" :value="tabs.QUESTIONS" lazy>
               <AssessmentTab :nodeId="nodeIds[0]" />
             </VTabItem>
+
             <VTabItem
               :key="tabs.RELATED"
               :value="tabs.RELATED"
               lazy
             >
               <RelatedResourcesTab :nodeId="nodeIds[0]" />
             </VTabItem>
+
+            <VTabItem
+              :key="tabs.CAPTIONS" ref="captionswindow" :value="tabs.CAPTIONS" lazy>
+              <CaptionsEditor />
+            </VTabItem>
           </VTabsItems>
         </VContainer>
       </VFlex>
@@ -104,6 +120,7 @@
 
   import { TabNames } from '../../constants';
   import AssessmentTab from '../../components/AssessmentTab/AssessmentTab';
+  import CaptionsEditor from '../../components/CaptionsEditor/CaptionsEditor'
   import RelatedResourcesTab from '../../components/RelatedResourcesTab/RelatedResourcesTab';
   import DetailsTabView from './DetailsTabView';
   import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
@@ -113,11 +130,12 @@
   export default {
     name: 'EditView',
     components: {
-      DetailsTabView,
-      AssessmentTab,
-      RelatedResourcesTab,
-      Tabs,
-      ToolBar,
+        AssessmentTab,
+        CaptionsEditor,
+        DetailsTabView,
+        RelatedResourcesTab,
+        Tabs,
+        ToolBar,
     },
     props: {
       nodeIds: {
@@ -143,6 +161,7 @@
         'getImmediateRelatedResourcesCount',
       ]),
       ...mapGetters('assessmentItem', ['getAssessmentItemsAreValid', 'getAssessmentItemsCount']),
+      ...mapGetters('currentChannel', ['isAIFeatureEnabled']),
       firstNode() {
         return this.nodes.length ? this.nodes[0] : null;
       },
@@ -167,6 +186,14 @@
       showRelatedResourcesTab() {
         return this.oneSelected && this.firstNode && this.firstNode.kind !== 'topic';
       },
+      showCaptions() {
+        return (
+          this.oneSelected && 
+          this.firstNode && 
+          (this.firstNode.kind === 'video' || this.firstNode.kind === 'audio') &&
+          this.isAIFeatureEnabled
+        )
+      },
       countText() {
         const totals = reduce(
           this.nodes,
@@ -260,6 +287,8 @@
       questions: 'Questions',
       /** @see TabNames.RELATED */
       related: 'Related',
+      /** @see TabNames.CAPTIONS */
+      captions: 'Captions',
       /* eslint-enable kolibri/vue-no-unused-translations */
       noItemsToEditText: 'Please select resources or folders to edit',
       invalidFieldsToolTip: 'Some required information is missing',

contentcuration/contentcuration/frontend/channelEdit/constants.js

@@ -55,6 +55,7 @@ export const TabNames = {
   PREVIEW: 'preview',
   QUESTIONS: 'questions',
   RELATED: 'related',
+  CAPTIONS: 'captions'
 };
 
 export const modes = {

contentcuration/contentcuration/frontend/channelEdit/vuex/currentChannel/getters.js

@@ -14,6 +14,10 @@ export function canEdit(state, getters, rootState, rootGetters) {
   );
 }
 
+export function isAIFeatureEnabled(state, getters, rootState, rootGetters) {
+  return rootGetters.featureFlags.ai_feature || false;
+}
+
 // Allow some extra actions for ricecooker channels
 export function canManage(state, getters, rootState, rootGetters) {
   return getters.currentChannel && (getters.currentChannel.edit || rootGetters.isAdmin);

contentcuration/contentcuration/frontend/shared/data/constants.js

@@ -39,6 +39,7 @@ export const TABLE_NAMES = {
   TASK: 'task',
   CHANGES_TABLE,
   BOOKMARK: 'bookmark',
+  CAPTION: 'caption'
 };
 
 export const APP_ID = 'KolibriStudio';

contentcuration/contentcuration/frontend/shared/data/resources.js

@@ -998,6 +998,10 @@ export const Bookmark = new Resource({
   },
 });
 
+export const Caption = new Resource({
+  // TODO
+})
+
 export const Channel = new Resource({
   tableName: TABLE_NAMES.CHANNEL,
   urlName: 'channel',

contentcuration/contentcuration/migrations/0143_generatedcaptions.py → contentcuration/contentcuration/migrations/0143_caption.py

@@ -1,6 +1,8 @@
-# Generated by Django 3.2.14 on 2023-05-23 11:00
+# Generated by Django 3.2.14 on 2023-06-15 06:13
 
+import contentcuration.models
 from django.db import migrations, models
+import uuid
 
 
 class Migration(migrations.Migration):
@@ -11,10 +13,10 @@ class Migration(migrations.Migration):
 
     operations = [
         migrations.CreateModel(
-            name='GeneratedCaptions',
+            name='Caption',
             fields=[
-                ('id', models.AutoField(primary_key=True, serialize=False)),
-                ('generated_captions', models.JSONField()),
+                ('id', contentcuration.models.UUIDField(default=uuid.uuid4, max_length=32, primary_key=True, serialize=False)),
+                ('caption', models.JSONField()),
                 ('language', models.CharField(max_length=10)),
             ],
         ),

contentcuration/contentcuration/models.py

@@ -2057,10 +2057,14 @@ def __str__(self):
         return self.ietf_name()
 
 
-class GeneratedCaptions(models.Model):
-    id = models.AutoField(primary_key=True)
-    generated_captions = models.JSONField()
+class Caption(models.Model):
+    """
+    Model to store captions and support intermediary changes
+    """
+    id = UUIDField(primary_key=True, default=uuid.uuid4)
+    caption = models.JSONField()
     language = models.CharField(max_length=10)
+    # file_id = models.CharField(unique=True, max_length=32)
 
 
 ASSESSMENT_ID_INDEX_NAME = "assessment_id_idx"

contentcuration/contentcuration/urls.py

@@ -32,8 +32,8 @@
 import contentcuration.views.zip as zip_views
 from contentcuration.views import pwa
 from contentcuration.viewsets.assessmentitem import AssessmentItemViewSet
-from contentcuration.viewsets.captions import CaptionViewSet
 from contentcuration.viewsets.bookmark import BookmarkViewSet
+from contentcuration.viewsets.caption import CaptionViewSet
 from contentcuration.viewsets.channel import AdminChannelViewSet
 from contentcuration.viewsets.channel import CatalogViewSet
 from contentcuration.viewsets.channel import ChannelViewSet
@@ -56,7 +56,7 @@ def get_redirect_url(self, *args, **kwargs):
 
 router = routers.DefaultRouter(trailing_slash=False)
 router.register(r'bookmark', BookmarkViewSet, basename="bookmark")
-router.register(r'captions', CaptionViewSet)
+router.register(r'caption', CaptionViewSet)
 router.register(r'channel', ChannelViewSet)
 router.register(r'channelset', ChannelSetViewSet)
 router.register(r'catalog', CatalogViewSet, basename='catalog')

contentcuration/contentcuration/viewsets/caption.py

@@ -0,0 +1,40 @@
+from rest_framework import serializers, status
+from rest_framework.response import Response
+from rest_framework.viewsets import ModelViewSet
+from contentcuration.models import Caption
+
+
+class CaptionSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Caption
+        fields = ["id", "caption", "language"]
+
+
+class CaptionViewSet(ModelViewSet):
+    queryset = Caption.objects.all()
+    serializer_class = CaptionSerializer
+
+    def create(self, request):
+        serializer = self.get_serializer(data=request.data)
+        if not serializer.is_valid():
+            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+        else:
+            self.perform_create(serializer=serializer)
+            headers = self.get_success_headers(serializer.data)
+            return Response(
+                serializer.data, headers=headers, status=status.HTTP_201_CREATED
+            )
+
+    def update(self, request, pk=None):
+        instance = self.get_object()
+        serializer = self.get_serializer(instance, data=request.data, partial=True)
+        if not serializer.is_valid(raise_exception=True):
+            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+        else:
+            serializer.save()
+            return Response(serializer.data, status=status.HTTP_200_OK)
+
+    def destroy(self, request):
+        instance = self.get_object()
+        self.perform_destroy(instance)
+        return Response(status=status.HTTP_204_NO_CONTENT)

contentcuration/contentcuration/viewsets/sync/base.py

@@ -5,7 +5,7 @@
 from contentcuration.decorators import delay_user_storage_calculation
 from contentcuration.viewsets.assessmentitem import AssessmentItemViewSet
 from contentcuration.viewsets.bookmark import BookmarkViewSet
-from contentcuration.viewsets.captions import CaptionViewSet
+from contentcuration.viewsets.caption import CaptionViewSet
 from contentcuration.viewsets.channel import ChannelViewSet
 from contentcuration.viewsets.channelset import ChannelSetViewSet
 from contentcuration.viewsets.clipboard import ClipboardViewSet

contentcuration/contentcuration/viewsets/sync/constants.py

@@ -22,7 +22,7 @@
 
 # Client-side table constants
 BOOKMARK = "bookmark"
-CAPTION = "captions"
+CAPTION = "caption"
 CHANNEL = "channel"
 CONTENTNODE = "contentnode"
 CONTENTNODE_PREREQUISITE = "contentnode_prerequisite"