Update the Dependencies and readme to make it easy to run it locally in a docker container

Author: leamsigc

.env.example

@@ -9,7 +9,7 @@ TIKTOK_SESSION_ID=""
 
 # ImageMagick Binary Path
 # Download ImageMagick from https://imagemagick.org/script/download.php
-IMAGEMAGICK_BINARY=""
+IMAGEMAGICK_BINARY="/usr/bin/convert"
 
 # Pexels API Key
 # Register at https://www.pexels.com/api/ to get your API key.

Backend/utils.py

@@ -104,7 +104,7 @@ def check_env_vars() -> None:
         SystemExit: If any required environment variables are missing.
     """
     try:
-        required_vars = ["PEXELS_API_KEY", "TIKTOK_SESSION_ID", "IMAGEMAGICK_BINARY"]
+        required_vars = ["PEXELS_API_KEY", "IMAGEMAGICK_BINARY"]
         missing_vars = [var + os.getenv(var)  for var in required_vars if os.getenv(var) is None or (len(os.getenv(var)) == 0)]  
 
         if missing_vars:

Dockerfile

@@ -37,8 +37,6 @@ COPY Backend/ Backend/
 RUN pip install --no-cache-dir --upgrade pip && \
     pip install --no-cache-dir -r requirements.txt
 
-# Create necessary directories
-RUN mkdir -p Backend/static/assets/{temp,subtitles,music,fonts} Backend/static/generated_videos
 
 WORKDIR /home/app/Backend
 # copy the .env file

Dockerfile.FE.Nuxt

@@ -15,13 +15,13 @@ RUN corepack enable && corepack prepare pnpm@latest --activate
 WORKDIR /app
 
 # Copy package files first for better caching
-COPY ./UI/package.json ./UI/pnpm-lock.yaml ./
+COPY ./UI/package.json ./
 
 # Set npm registry and install dependencies
 RUN npm config set registry https://registry.npmjs.org/
 
 # Install dependencies with pnpm
-RUN pnpm install --frozen-lockfile
+RUN pnpm i
 
 # Copy the rest of the application
 COPY ./UI .

README.md

@@ -1,8 +1,37 @@
 ## ShortsGenerator
 ![ShortGenerator](/logo.jpeg)
+### How to run locally 🚀 Docker is required
+---
+
+2. Clone the repository
+
+```sh
+git clone git@github.com:leamsigc/ShortsGenerator.git video Generator
+
+```
+
+
+
+3. Go to the folder:"
+
+```sh
+cd videoGenerator
+
+```
+
+4. Copy the `.env-example`  to `.env`
+5. Update the Pexel API key if you want to use Video from Pexel
+6. The TikTok key is not needed anymore
+7. `docker compose up -d `
+8. Go to 'http://localhost:5000/generate' to start generating videos
+9. Click on the Setting  `...` to get images and videos to use in the video
+---
+
 
 Automate the creation of YouTube Shorts locally with a couple of simple steps.
 
+
+
 1. Give a video subject
     1. Add extra prompt information if needed
 2. Review the script

UI/components/HeaderLayout.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { useFullscreen } from '@vueuse/core'
 /**
  *
  * Component Description:Desc
@@ -29,11 +30,8 @@ const { toggle: toggleFullScreen } = useFullscreen();
         <SearchTrigger />
         <div class="flex items-center justify-center">
           <NSpace>
-            <ActionIcon
-              :tooltip-text="t('layouts.header.toggleFullScreen')"
-              icon="i-tabler-maximize"
-              @click="toggleFullScreen"
-            />
+            <ActionIcon :tooltip-text="t('layouts.header.toggleFullScreen')" icon="i-tabler-maximize"
+              @click="toggleFullScreen" />
             <NaiveColorModeSwitch size="large" class="pt-1" />
           </NSpace>
         </div>

UI/components/SearchDialog.vue

@@ -10,7 +10,7 @@
  * @todo [ ] Integration test.
  * @todo [✔] Update the typescript.
  */
-
+import { useFullscreen } from '@vueuse/core'
 import type { ScrollbarInst } from "naive-ui";
 import { isWindows } from "~/utils/PlatformUtils";
 import type {
@@ -254,74 +254,33 @@ onMounted(() => {
 
 <template>
   <NModal v-model:show="isDialogVisible" class="search-dialog">
-    <NCard
-      class="w-[650px]"
-      content-style="padding: 0;"
-      :bordered="false"
-      size="huge"
-      role="dialog"
-      aria-modal="true"
-    >
-      <div
-        class="search-dialog-action-bar rounded-2xl"
-        @keydown.up="movePrevItem()"
-        @keydown.down="moveNextItem()"
-      >
+    <NCard class="w-[650px]" content-style="padding: 0;" :bordered="false" size="huge" role="dialog" aria-modal="true">
+      <div class="search-dialog-action-bar rounded-2xl" @keydown.up="movePrevItem()" @keydown.down="moveNextItem()">
         <div class="search-input flex items-center gap-5 px-5 h-12">
           <Icon :name="SearchIcon" size="16" />
-          <input
-            v-model="search"
-            :placeholder="t('searchDialog.searchPlaceholder')"
-            class="grow bg-transparent outline-none border-none"
-          />
+          <input v-model="search" :placeholder="t('searchDialog.searchPlaceholder')"
+            class="grow bg-transparent outline-none border-none" />
           <NText code> ESC </NText>
-          <Icon
-            :name="CloseIcon"
-            size="20"
-            class="cursor-pointer"
-            @click="closeDialog()"
-          />
+          <Icon :name="CloseIcon" size="20" class="cursor-pointer" @click="closeDialog()" />
         </div>
         <NDivider />
         <NScrollbar ref="scrollContent" style="height: 400px">
           <div class="content-wrap">
-            <div
-              v-for="group of filteredGroups"
-              :key="group.name"
-              class="group"
-            >
+            <div v-for="group of filteredGroups" :key="group.name" class="group">
               <div class="group-title">
                 {{ group.name }}
               </div>
               <NEl class="group-list">
-                <div
-                  v-for="item of group.items"
-                  :id="item.key.toString()"
-                  :key="item.key"
-                  class="item flex items-center my-2"
-                  :class="{ active: item.key === activeItem }"
-                  @click="executeAction(item.action)"
-                >
+                <div v-for="item of group.items" :id="item.key.toString()" :key="item.key"
+                  class="item flex items-center my-2" :class="{ active: item.key === activeItem }"
+                  @click="executeAction(item.action)">
                   <NEl class="icon">
-                    <NAvatar
-                      v-if="item.iconImage"
-                      round
-                      :size="28"
-                      :src="item.iconImage"
-                    />
-                    <Icon
-                      v-if="item.iconName"
-                      :name="item.iconName"
-                      size="18"
-                    />
+                    <NAvatar v-if="item.iconImage" round :size="28" :src="item.iconImage" />
+                    <Icon v-if="item.iconName" :name="item.iconName" size="18" />
                   </NEl>
                   <div class="title grow">
-                    <Highlighter
-                      highlight-class-name="highlight"
-                      :search-words="keywords"
-                      :auto-escape="true"
-                      :text-to-highlight="item.title"
-                    />
+                    <Highlighter highlight-class-name="highlight" :search-words="keywords" :auto-escape="true"
+                      :text-to-highlight="item.title" />
                   </div>
                   <div class="label">
                     {{ item.label }}
@@ -362,45 +321,41 @@ onMounted(() => {
 .search-dialog .search-dialog-action-bar .search-input .ca-text--code {
   white-space: nowrap;
 }
+
 .search-dialog .search-dialog-action-bar .ca-divider {
   margin-top: 0;
   margin-bottom: 0;
 }
+
 .search-dialog .search-dialog-action-bar .content-wrap {
   padding-bottom: 30px;
 }
+
 .search-dialog .search-dialog-action-bar .content-wrap .group-empty {
   text-align: center;
   padding: 30px 0 40px 0;
 }
+
 .search-dialog .search-dialog-action-bar .content-wrap .group {
   padding: 0 10px;
 }
+
 .search-dialog .search-dialog-action-bar .content-wrap .group .group-title {
   opacity: 0.6;
   margin-bottom: 5px;
   padding: 20px 10px 5px;
 }
-.search-dialog
-  .search-dialog-action-bar
-  .content-wrap
-  .group
-  .group-list
-  .item {
+
+.search-dialog .search-dialog-action-bar .content-wrap .group .group-list .item {
   padding: 7px 10px;
   gap: 10px;
   cursor: pointer;
   border-radius: 10px;
   width: 100%;
   text-align: left;
 }
-.search-dialog
-  .search-dialog-action-bar
-  .content-wrap
-  .group
-  .group-list
-  .item
-  .icon {
+
+.search-dialog .search-dialog-action-bar .content-wrap .group .group-list .item .icon {
   width: 28px;
   height: 28px;
   border-radius: 50%;
@@ -409,39 +364,21 @@ onMounted(() => {
   justify-content: center;
   align-items: center;
 }
-.search-dialog
-  .search-dialog-action-bar
-  .content-wrap
-  .group
-  .group-list
-  .item
-  .title {
+
+.search-dialog .search-dialog-action-bar .content-wrap .group .group-list .item .title {
   font-weight: bold;
 }
-.search-dialog
-  .search-dialog-action-bar
-  .content-wrap
-  .group
-  .group-list
-  .item
-  .label {
+
+.search-dialog .search-dialog-action-bar .content-wrap .group .group-list .item .label {
   opacity: 0.8;
   font-size: 0.9em;
 }
-.search-dialog
-  .search-dialog-action-bar
-  .content-wrap
-  .group
-  .group-list
-  .item.active {
+
+.search-dialog .search-dialog-action-bar .content-wrap .group .group-list .item.active {
   background-color: var(--hover-color);
 }
-.search-dialog
-  .search-dialog-action-bar
-  .content-wrap
-  .group
-  .group-list
-  .item:hover {
+
+.search-dialog .search-dialog-action-bar .content-wrap .group .group-list .item:hover {
   box-shadow: 0 0 0 1px var(--primary-color-hover) inset;
 }
 </style>

UI/composables/useGlobalSettings.ts

@@ -1,14 +1,16 @@
+import { useStorage } from "@vueuse/core";
+
 
 export const useApiSettings = () => {
-    const API_SETTINGS = useLocalStorage("API_SETTINGS", {
-        URL:"http://localhost:8080",
+    const API_SETTINGS = useStorage("API_SETTINGS", {
+        URL: "http://localhost:8080",
     })
     return {
         API_SETTINGS
     }
 }
 export const useGlobalSettings = () => {
-    const globalSettings = useLocalStorage("globalSettings", {
+    const globalSettings = useStorage("globalSettings", {
         font: "Roboto",
         color: "#000",
         subtitles_position: "center,bottom",

UI/composables/useVideoSetings.ts

@@ -1,3 +1,6 @@
+import { useStorage } from '@vueuse/core'
+
+
 export interface VideoResultFormat {
   url: string;
   image: string;
@@ -10,7 +13,7 @@ export interface VideoResultFormat {
 }
 
 export const useVideoSettings = () => {
-  const video = useLocalStorage<{
+  const video = useStorage<{
     script: string;
     voice: string;
     videoSubject: string;

UI/locales/en-US.json UI/i18n/locales/en-US.json

@@ -3,35 +3,32 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "nuxt build",
+    "build": "nuxt build --dotenv .env ",
     "dev": "nuxt dev --dotenv ../.env ",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
     "start": "node .output/server/index.mjs"
   },
   "dependencies": {
-    "@pinia/nuxt": "^0.5.1",
-    "@unocss/nuxt": "^0.58.5",
-    "nuxt": "^3.10.1",
-    "tabulator-tables": "^5.6.0",
-    "vue": "^3.4.15",
-    "vue-router": "^4.2.5"
+    "@pinia/nuxt": "^0.9.0",
+    "@unocss/nuxt": "^0.65.2",
+    "nuxt": "^3.14.1592",
+    "tabulator-tables": "^6.3.0",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@bg-dev/nuxt-naiveui": "^1.10.1",
-    "@nuxt/content": "^2.12.0",
-    "@nuxt/devtools": "^1.0.8",
-    "@nuxtjs/i18n": "^8.1.1",
-    "@nuxtjs/tailwindcss": "^6.11.3",
-    "@tailwindcss/typography": "^0.5.10",
-    "@types/tabulator-tables": "^5.5.9",
-    "@vueuse/nuxt": "^10.7.2",
-    "nuxt-icon": "^0.6.8",
+    "@bg-dev/nuxt-naiveui": "^1.14.0",
+    "@nuxt/content": "^2.13.4",
+    "@nuxt/devtools": "^1.6.4",
+    "@nuxtjs/i18n": "^9.1.1",
+    "@nuxtjs/tailwindcss": "^6.12.2",
+    "@tailwindcss/typography": "^0.5.15",
+    "@types/tabulator-tables": "^6.2.3",
+    "@vueuse/nuxt": "^12.0.0",
+    "nuxt-icon": "^0.6.10",
     "nuxt-lodash": "^2.5.3",
     "sass": "^1.71.0"
-  },
-  "resolutions": {
-    "vue": "3.3.13"
   }
 }