Spaces:

jbilcke-hf
/

ai-tube-clap-exporter

Running on CPU Upgrade

App Files Files Community

jbilcke-hf HF staff commited on Apr 29, 2024

Commit

deff001

1 Parent(s): d381f5a

improve text overlay generation

Browse files

Files changed (3) hide show

src/core/ffmpeg/addTextToVideo.mts +9 -4
src/core/ffmpeg/createTextOverlayImage.mts +42 -2
src/core/utils/getCssStyle.mts +25 -4

src/core/ffmpeg/addTextToVideo.mts CHANGED Viewed

@@ -18,14 +18,19 @@ export async function addTextToVideo({
   const { filePath: temporaryImageOverlayFilePath } = await createTextOverlayImage({
     text,
     width,
     height,
-    fontSize: 5
   })
-  console.log("addTextToVideo: temporaryImageOverlayFilePath:", temporaryImageOverlayFilePath)
-  const pathToVideo = await addImageToVideo({
     inputVideoPath,
     inputImagePath: temporaryImageOverlayFilePath,
     outputVideoPath,
@@ -33,6 +38,6 @@ export async function addTextToVideo({
   await deleteFile(temporaryImageOverlayFilePath)
-  console.log("addTextToVideo: outputVideoPath:", outputVideoPath)
   return outputVideoPath
 }

   const { filePath: temporaryImageOverlayFilePath } = await createTextOverlayImage({
     text,
+    textStyle: "outline", // or "highlight"
+    fontSize: 4.5,
+    horizontalPosition: "center",
+    verticalPosition: "end",
+    px: 4,
+    py: 8,
     width,
     height,
   })
+  // console.log("addTextToVideo: temporaryImageOverlayFilePath:", temporaryImageOverlayFilePath)
+  await addImageToVideo({
     inputVideoPath,
     inputImagePath: temporaryImageOverlayFilePath,
     outputVideoPath,
   await deleteFile(temporaryImageOverlayFilePath)
+  // console.log("addTextToVideo: outputVideoPath:", outputVideoPath)
   return outputVideoPath
 }

src/core/ffmpeg/createTextOverlayImage.mts CHANGED Viewed

@@ -1,25 +1,61 @@
-import { TextOverlayFont, TextOverlayFontWeight, TextOverlayStyle, getCssStyle } from "../utils/getCssStyle.mts"
 import { htmlToBase64Png } from "../converters/htmlToBase64Png.mts"
 // generate a PNG overlay using HTML
 export async function createTextOverlayImage({
   text = "",
   textStyle = "outline",
   fontFamily = "Montserrat",
-  fontSize = 10,
   fontWeight = 600,
   rotation = 0,
   width = 1024,
   height = 576
 }: {
   text?: string
   textStyle?: TextOverlayStyle
   fontFamily?: TextOverlayFont
   fontSize?: number
   fontWeight?: TextOverlayFontWeight
   rotation?: number
   width?: number
   height?: number
 }): Promise<{
   filePath: string
@@ -32,6 +68,10 @@ export async function createTextOverlayImage({
     fontFamily,
     fontSize,
     fontWeight: 600,
   })}</head>
   <body>

+import { TextOverlayFont, TextOverlayFontWeight, TextOverlayPosition, TextOverlayStyle, getCssStyle } from "../utils/getCssStyle.mts"
 import { htmlToBase64Png } from "../converters/htmlToBase64Png.mts"
 // generate a PNG overlay using HTML
+// most sizes are in percentage of the image height
 export async function createTextOverlayImage({
   text = "",
   textStyle = "outline",
   fontFamily = "Montserrat",
+  // the unit is vh (so `fontSize: 4` = 4% of the window height)
+  fontSize = 3,
   fontWeight = 600,
+  horizontalPosition = "center",
+  verticalPosition = "end",
   rotation = 0,
+  px = 10,
+  py = 10,
   width = 1024,
   height = 576
 }: {
   text?: string
+  // pre-defined text styling, can be: outline or highlight
   textStyle?: TextOverlayStyle
   fontFamily?: TextOverlayFont
+  // font size, in % of the video height
   fontSize?: number
+  // font weight, can be one of: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
   fontWeight?: TextOverlayFontWeight
+  // start, center or end
+  horizontalPosition?: TextOverlayPosition
+  // start, center or end
+  verticalPosition?: TextOverlayPosition
   rotation?: number
+  // horizontal padding - yes the unit is in vh, *not* vw (so `px: 8` = 8% of the window height)
+  px?: number
+  // vertical padding - the unit is in vh (so `py: 8` = 8% of the window height)
+  py?: number
   width?: number
   height?: number
 }): Promise<{
   filePath: string
     fontFamily,
     fontSize,
     fontWeight: 600,
+    horizontalPosition,
+    verticalPosition,
+    px,
+    py,
   })}</head>
   <body>

src/core/utils/getCssStyle.mts CHANGED Viewed

@@ -18,18 +18,31 @@ export type TextOverlayFontWeight =
   | 800
   | 900
 export function getCssStyle({
   width,
   height,
   fontSize,
   fontFamily,
   fontWeight,
 }: {
   width?: number | string
   height?: number | string
   fontSize: number
   fontFamily: TextOverlayFont
   fontWeight: TextOverlayFontWeight
 }) {
   return `
@@ -52,8 +65,13 @@ export function getCssStyle({
   .content {
     width: 100%;
     display: flex;
-    align-items: center;
-    justify-content: center;
   }
   p {
@@ -61,8 +79,11 @@ export function getCssStyle({
     font-size: ${fontSize}vh;
     font-weight: ${fontWeight};
     border-radius: 2vh;
-    padding: 5vh;
-    text-align: center;
     /*
     normally we should use those webkit features:

   | 800
   | 900
+export type TextOverlayPosition =
+  | "start"
+  | "center"
+  | "end"
 export function getCssStyle({
   width,
   height,
   fontSize,
   fontFamily,
   fontWeight,
+  horizontalPosition,
+  verticalPosition,
+  px,
+  py,
 }: {
   width?: number | string
   height?: number | string
   fontSize: number
   fontFamily: TextOverlayFont
   fontWeight: TextOverlayFontWeight
+  horizontalPosition: TextOverlayPosition
+  verticalPosition: TextOverlayPosition
+  px: number
+  py: number
 }) {
   return `
   .content {
     width: 100%;
     display: flex;
+    flex-direction: column;
+    align-items: ${
+      horizontalPosition
+    };
+    justify-content: ${
+      verticalPosition
+    };
   }
   p {
     font-size: ${fontSize}vh;
     font-weight: ${fontWeight};
     border-radius: 2vh;
+    padding-top: ${py}vh;
+    padding-right: ${px}vh;
+    padding-bottom: ${py}vh;
+    padding-left: ${px}vh;
+    text-align: ${horizontalPosition};
     /*
     normally we should use those webkit features: