create apis client

packages/components/src/apis/client.ts

@@ -1,19 +1,17 @@
 import axios, { type AxiosError } from 'axios'
 import { type AxiosCacheInstance, type CacheAxiosResponse, type InternalCacheRequestConfig, setupCache } from 'axios-cache-interceptor'
+import { ENDPOINTS } from '../constants/endpoints'
 
 type ObjectValue<T> = T[keyof T]
-type Endpoint = ObjectValue<any>
+type Endpoint = ObjectValue<typeof ENDPOINTS>
 
 export class BaseClient {
   private api: AxiosCacheInstance
 
   constructor() {
     this.api = setupCache(
       axios.create({
-        baseURL: 'https://jsonplaceholder.typicode.com',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        baseURL: 'http://localhost:8080/api/v1',
       })
     )
 
@@ -32,7 +30,19 @@ export class BaseClient {
     return (await this.api.get<T>(`${endpoint}/${identifier || identifier === 0 ? identifier : ''}`)).data
   }
 
+  protected async getResources<T>(endpoint: string, params: object = {}): Promise<T[]> {
+    return (
+      await this.api.get<T[]>(endpoint, {
+        params: { ...params },
+      })
+    ).data
+  }
+
   protected async getListResource(endpoint: Endpoint, offset = 0, limit = 20): Promise<any> {
+    if (offset < 0 || limit < 0) {
+      return (await this.api.get<any>(`${endpoint}`)).data
+    }
+
     return (await this.api.get<any>(`${endpoint}?offset=${offset}&limit=${limit}`)).data
   }
 }

packages/components/src/apis/recommendations.ts

@@ -0,0 +1,15 @@
+import { BaseClient } from './client'
+import { ENDPOINTS } from '../constants/endpoints'
+
+export class RecommendationsAPI extends BaseClient {
+  public async listTags(): Promise<any> {
+    return this.getListResource(`${ENDPOINTS.RECOMMENDATIONS}/tags`, -1, -1)
+  }
+
+  public async listKeywords(): Promise<any> {
+    return this.getListResource(`${ENDPOINTS.RECOMMENDATIONS}/keywords`, -1, -1)
+  }
+}
+const recommendationsAPI = new RecommendationsAPI()
+
+export default recommendationsAPI

packages/components/src/apis/videos.ts

@@ -1,8 +1,20 @@
 import { BaseClient } from './client'
+import { ENDPOINTS } from '../constants/endpoints'
 
 export class VideosAPI extends BaseClient {
-  public async listPosts(offset?: number, limit?: number): Promise<any> {
-    return this.getListResource('/posts', offset, limit)
+  public async searchVideos(keywords: string, count: number): Promise<any[]> {
+    return this.getResources(`${ENDPOINTS.VIDEOS}/search`, {
+      keywords,
+      count,
+    })
+  }
+
+  public async getVideoById(id: string): Promise<any> {
+    return this.getResource(ENDPOINTS.VIDEOS, id)
+  }
+
+  public async getStreamVideoById(id: string): Promise<any> {
+    return this.getResource(`${ENDPOINTS.VIDEOS}/stream`, id)
   }
 }
 const videosAPI = new VideosAPI()

packages/components/src/components/social-wall/SocialWallVideos.vue

@@ -1,90 +1,29 @@
-<template>
-  <div :id="props.id ? props.id : ''" class="max-w-md mx-auto overflow-y-auto h-screen">
-    <div v-for="(video, index) in videos" :key="index" class="bg-white rounded-lg shadow-md overflow-hidden" @click="openModal(video)">
-      <v-lazy-image
-        :src="video.thumbnail"
-        src-placeholder="https://cdn-images-1.medium.com/max/80/1*xjGrvQSXvj72W4zD6IWzfg.jpeg"
-        :alt="video.title"
-        class="w-full h-48 object-cover"
-      />
-      <div class="p-4">
-        <h2 class="text-lg font-semibold">{{ video.title }}</h2>
-        <p class="text-gray-600 text-sm">{{ video.description }}</p>
-      </div>
-    </div>
-  </div>
-
-  <SocialWallVideoView :is-open="isModalOpen" @update:isOpen="isModalOpen = $event" />
-</template>
-
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import VLazyImage from 'v-lazy-image'
+
 import SocialWallVideoView from '@components/social-wall/SocialWallVideoView.vue'
 import videosAPI from '@apis/videos'
 
 const props = defineProps<{
   id?: string
-  // Sets the maximum number of videos to fetch and display at a time.
   maxVideos: number
-  // Defines the layout of the videos (e.g., grid, masonry, or carousel).
   gridLayout: 'grid' | 'masonry' | 'carousel'
-  // Boolean to show or hide playback controls like play, pause, and volume.
   controls?: boolean
-  // Callback for custom handling of video play events.
   onPlay?: (videoId: string) => void
-  // Callback for custom handling of video pause events.
   onPause?: (videoId: string) => void
-  // Enables or disables autoplay on scroll into view for each video.
   autoplay?: boolean
 }>()
 
 const isModalOpen = ref(false)
 
 function openModal(video: any) {
-  console.log('video', video)
   isModalOpen.value = true
 }
 
-// Sample data for videos
-const videos = ref([
-  {
-    title: 'Vue.js Basics',
-    description: 'Learn the basics of Vue.js in this introductory video.',
-    thumbnail: 'https://cdn-images-1.medium.com/max/1600/1*xjGrvQSXvj72W4zD6IWzfg.jpeg',
-  },
-  {
-    title: 'Advanced Vue Techniques',
-    description: 'Explore advanced techniques in Vue.js development.',
-    thumbnail: 'https://cdn-images-1.medium.com/max/1600/1*xjGrvQSXvj72W4zD6IWzfg.jpeg',
-  },
-  {
-    title: 'Building a Vue App',
-    description: 'Step-by-step guide to building a Vue.js application.',
-    thumbnail: 'https://cdn-images-1.medium.com/max/1600/1*xjGrvQSXvj72W4zD6IWzfg.jpeg',
-  },
-  {
-    title: 'State Management with Vuex',
-    description: 'Manage state in your Vue.js apps using Vuex.',
-    thumbnail: 'https://cdn-images-1.medium.com/max/1600/1*xjGrvQSXvj72W4zD6IWzfg.jpeg',
-  },
-  {
-    title: 'Vue Router for Navigation',
-    description: 'Implement navigation in your Vue.js apps with Vue Router.',
-    thumbnail: 'https://cdn-images-1.medium.com/max/1600/1*xjGrvQSXvj72W4zD6IWzfg.jpeg',
-  },
-  {
-    title: 'Deploying Vue Apps',
-    description: 'Learn how to deploy your Vue.js applications.',
-    thumbnail: 'https://cdn-images-1.medium.com/max/1600/1*xjGrvQSXvj72W4zD6IWzfg.jpeg',
-  },
-])
-
-const posts = ref([])
-
 const fetchPosts = async () => {
   try {
-    const response = await videosAPI.listPosts()
+    const response = await videosAPI.searchVideos('obama', 2)
     console.log(response)
   } catch (error) {
     console.error('Error fetching posts:', error)
@@ -93,6 +32,25 @@ const fetchPosts = async () => {
 onMounted(fetchPosts)
 </script>
 
+<template>
+  <div :id="props.id ? props.id : ''" class="max-w-md mx-auto overflow-y-auto h-screen">
+    <div v-for="(video, index) in videos" :key="index" class="bg-white rounded-lg shadow-md overflow-hidden" @click="openModal(video)">
+      <v-lazy-image
+        :src="video.thumbnail"
+        src-placeholder="https://cdn-images-1.medium.com/max/80/1*xjGrvQSXvj72W4zD6IWzfg.jpeg"
+        :alt="video.title"
+        class="w-full h-48 object-cover"
+      />
+      <div class="p-4">
+        <h2 class="text-lg font-semibold">{{ video.title }}</h2>
+        <p class="text-gray-600 text-sm">{{ video.description }}</p>
+      </div>
+    </div>
+  </div>
+
+  <SocialWallVideoView :is-open="isModalOpen" @update:isOpen="isModalOpen = $event" />
+</template>
+
 <style>
 @import url('@/style.css');
 

packages/components/src/constants/endpoints.ts

@@ -0,0 +1,4 @@
+export const ENDPOINTS = {
+  VIDEOS: '/feeds',
+  RECOMMENDATIONS: '/recommendations',
+}

server/internal/user_interests_embedding/features/create_user_interest_embedding/v1/create_user_interest_embedding_handler.go

@@ -28,7 +28,7 @@ func NewCreateUserInterestEmbeddingHandler(r repositories.UserInterestsEmbedding
 const (
 	// If dev true, embeddings will load from local (sample/)
 	// Otherwise, generated from LLM
-	__DEV__ = false
+	__DEV__ = true
 )
 
 func (c *CreateUserInterestEmbeddingHandler) Handle(

server/pkg/http/http.go

@@ -77,6 +77,7 @@ func (s *echoHttpServer) SetupDefaultMiddlewares() {
 	s.echo.Use(customMiddleware.LogMiddleware())
 	s.echo.Use(middleware.BodyLimit("2M"))
 	s.echo.Use(middleware.RequestID())
+	s.echo.Use(middleware.CORS())
 }
 
 func (s *echoHttpServer) GetEchoInstance() *echo.Echo {