DEV Community: Josh Alphonse

BMF: Frame extraction acceleration- video similarity search with Pinecone

Josh Alphonse — Fri, 10 May 2024 17:42:44 +0000

TL;DR: This is a tutorial on how to create a video similarity search with BMF and Pinecone from scratch. View this project's code on github and test it out in a notebook like colab.

So you might have seen in my last blog post that I showed you how to accelerate video frame extraction using GPU's and Babit multimedia framework. In this blog we are going to improve upon our video frame extractor and create a video similarity search(Reverse video search) utlizing different RAG(Retrival Augemented Gerneation) concepts with Pinecone, the vector database that will help us build knowledgeable AI. Pinecone is designed to perform vector searches effectively. You'll see throughout this blog how we extrapulate vectors from videos to make our search work like a charm. With Pinecone, you can quickly find items in a dataset that are most similar to a query vector, making it handy for tasks like recommendation engines, similar item search, or even detecting duplicate content. It's particularly well-suited for machine learning applications where you deal with high-dimensional data and need fast, accurate similarity search capabilities.
Reverse video search works like reverse image search but uses a video to find other videos that are alike. Essentially, you use a video to look for matching ones. While handling videos is generally more complex and the accuracy might not be as good as with other models, the use of AI for video tasks is growing. Reverse video search is really good at finding videos that are connected and can make other video applications better.
So why would you want to create a video similarity search app?

Here are some reasons:

Content Discovery: It enables users to find videos that are visually or contextually similar to what they're interested in, enhancing content discoverability on platforms like streaming services or stock footage libraries.
Recommendation Systems: Enhances recommendation engines by suggesting content that is similar to a user's viewing history, thus improving user engagement and retention.
Duplicate or Near-duplicate Detection: Helps in identifying copies or slight variations of the same video, which is useful for copyright enforcement or content management.
Categorization and Tagging: Assists in automatically categorizing and tagging videos based on content, which can simplify content management and improve searchability.
User-generated Content Moderation: Useful in moderating platforms where vector similarity can help identify potentially problematic content by comparing new uploads with known flagged videos.
Video Analysis: In fields like surveillance, sports, or medical imaging, it can help in analyzing and identifying specific moments or objects in video sequences.

Oh yeah and of course a similarity search like what we'll do in this blog! I've taken inspiration by reading the Milvus video reserve video search notebook and decided to recreate it using technologies I prefer.
Babit Multimedia framework brings forth all the great things we know and love about FFMPEG and amplifies it all with its multi-language support and GPU acceleration capabilities.
Now you might be familiar with other frame extraction methods using OpenCV, FFmpeg,or GStreamer. These are all great options. However, I'm choosing to use BMF for a few reasons:

Multi-language support- BMF supports the use of Python, GO and C++
Full compatiblity with FFmpeg- BMF is fully compatible with FFmpeg’s processing capabilities and indicators, such as demuxing, decoding, filter, encoding, and muxing capabilities. The configuration of these processing capabilities and the results consistent with FFmpeg’s pts, duration, bitrate, fps and other indicators can be obtained. Very good It satisfies the need to quickly integrate FFmpeg capabilities into projects.
Enhanced Support for NVIDIA GPUs to create enterprise ready GPU accelerated video pipelines
- NVENC/NVDEC/GPU filters work out-of-box by inheriting abilities from FFmpeg.
- High performance frame processing is enabled by integration of CV-CUDA and customized CUDA kernels.
- AI inferencing can be easily integrated into video pipelines using TensorRT.
- Data moving between CPU and GPU can be done by a simple call. Alright, so that's more than just a few reasons, but you get the point! Now let's build a video similarity search/

### The Architecture

Required Python packages to install:

Python 3.9-3.10
pinecone-client
BabitMF-GPU
torch
torchvision>=0.12.0
python-dotenv
av Grab a video. I had a short video stored on a github repo. You can use a video stored on your system or elsewhere. BMF can handle any video format(FFmpeg compatibility!)

Inserting the dataset into a Pinecone index

Let's start with inserting videos from our dataset into our Pinecone index. We do this so that our vector database has knowledge of the videos we will be comparing to the end user's video. This is a necessary starting point for our application.
First, I'm going to create an account on Pinecone and create my first index using Pinecone serverless. Pinecone is a fully managed vector database. You can use the CLI or the dashboard when you log in. Here's to learn how to set it up: https://docs.pinecone.io/guides/getting-started/quickstart.

git clone https://github.com/Joshalphonse/Bmf-Huggingface.git

Install BMF with GPU capabilities

!pip install -qU \
  pinecone-client \
  BabitMF-GPU \
  torch \
  torchvision>=0.12.0 \
  python-dotenv \
  av

Install this video dataset or use your own
The data is organized as follows:

train: candidate videos, 20 classes, 10 videos per class (200 in total)
test: query videos, same 20 classes as train data, 1 video per class (20 in total)
reverse_video_search.csv: a csv file containing an id, path, and label for each video in train data

! curl -L https://github.com/towhee-io/examples/releases/download/data/reverse_video_search.zip -O
! unzip -q -o reverse_video_search.zip

Put the files in a dataframe and convert them to a list

import pandas as pd

df = pd.read_csv('./reverse_video_search.csv', nrows=3) #put the files in the dataframe
video_paths = df['path'].tolist() #convert df to python list

print(video_paths) #check if the video paths

Make sure to import all of the necessary packages. Then create environment variables to manage your configurations. They will make your life a lot easier.
Afterwards, load the CSV file from the data set folder I'm also limiting the list to 3 rows just to speed things up for demo purposes.
We'll also load the ResNet Pretrained model because in the next steps we will use it to generate the vector embeddings.
Lastly, in this code snippet, configure a preprocessing pipeline for images using PyTorch's transforms module, which is often used in deep learning for preparing data before feeding it into a neural network.

import os
import cv2
import av
from pinecone import Pinecone, ServerlessSpec
import numpy as np
import pandas as pd
import torch
import torchvision.transforms as transforms
import torchvision.models as models

PINECONE_API_KEY = os.environ["PINECONE_API_KEY"]
PINECONE_ENVIRONMENT = os.environ["PINECONE_ENVIRONMENT"]
PINECONE_DATABASE = os.environ["PINECONE_DATABASE"]

# Replace 'your_pinecone_api_key' with your actual Pinecone API key or use environment variables like I am here
pc = Pinecone(api_key=PINECONE_API_KEY, environment=PINECONE_ENVIRONMENT)
index = pc.Index(PINECONE_DATABASE)

#load the CSV file
csv_file = './reverse_video_search.csv'
df = pd.read_csv(csv_file, nrows=3)
video_paths = df['path'].tolist()
print(video_paths) #check if the video paths

#load a pretrained ResNet model
model = models.resnet18(pretrained = True)
model.eval()

#remove the last fully connectected layer
model = torch.nn.Sequential(*list(model.children())[:-1])

# Define the preprocessing transforms
preprocess = transforms.Compose([
    transforms.ToTensor(),
    transforms.Resize((224, 224)),
    transforms.Normalize(mean=[0.485, 0.456, 0.406], std=[0.229, 0.224, 0.225])
])

Since we have our dataset and our files ready to go, we will iterate over each video path and generate an embedding. I'm also using the av package to handle the video file, so we can open it and do the extraction.
We then iterate over the frames of the video, preprocessing each frame (using a preprocess function that is not shown) and generating an embedding for the frame using a pre-trained ResNet model. These frame embeddings are stored in a list.
Once all the frame embeddings have been collected, then we calculate the average of the embeddings to get a single embedding that represents the entire video.
Now all we have to do is use the Pinecone package to upsert (insert or update) the average video embedding to a Pinecone index, under the namespace 'video_embeddings'. The video path is used as the unique identifier for the embedding

# Iterate over each video path and generate embeddings
for video_path in video_paths:
    # Open the video file
    video = av.open(video_path)

    # Get the first video stream
    video_stream = next(s for s in video.streams if s.type == 'video')

    # Initialize variables for storing embeddings
    embeddings = []

    # Iterate over the video frames
    for frame in video.decode(video=0):
        # Convert the frame to a numpy array
        img = frame.to_ndarray(format='rgb24')

        # Preprocess the frame
        img = preprocess(img)
        img = img.unsqueeze(0)  # Add batch dimension

        # Generate embeddings using the ResNet model
        with torch.no_grad():
            embedding = model(img)
            embedding = embedding.squeeze().numpy()

        # Append the embedding to the list
        embeddings.append(embedding)

    # Convert the list of embeddings to a numpy array
    embeddings = np.array(embeddings)

    # Calculate the average embedding for the video
    avg_embedding = np.mean(embeddings, axis=0)
    print(avg_embedding)

    # Upsert the embedding to Pinecone
    index.upsert(
        vectors=[
            (video_path, avg_embedding.tolist())
        ],
        namespace='video_embeddings'
    )

    print(f"Upserted embedding for video: {video_path}")

Now you can either use the Pinecone CLI or the dashboard to view what in your index we just updated the data to. Check out the picture below.

Searching For A Similar Video

Install ffmpeg and related libraries. For this demo, we don't have to do this step, because ffmpeg libraries are already installed in the Google Colab environment.

sudo apt install ffmpeg

List the ffmpeg libraries. It is expected that the related libraries such libavcodec, libavformat are installed. The output should be shown below:

sudo apt install libdw1

dpkg -l | grep -i ffmpeg

ffmpeg -version

Install the following package to show the BMF C++ logs in the colab console, otherwise only python logs are printed. This step is not necessary if you're not in a Colab or iPython notebook environment.

pip install wurlitzer
%load_ext wurlitzer

Now import all of these dependencies listed and the beginning of our process is the same as our data upsert from above. Use your Pinecone credentials that we stored in a .env file and work with the ResNet18 pretrained model.
The difference here is that we are finally using BMF for frame extraction.

import os
import glob
import numpy as np
import torch
import torchvision.transforms as transforms
import torchvision.models as models
from pinecone import Pinecone
import bmf
import cv2
from IPython import display
from PIL import Image

PINECONE_API_KEY = os.environ["PINECONE_API_KEY"]
PINECONE_ENVIRONMENT = os.environ["PINECONE_ENVIRONMENT"]
PINECONE_DATABASE = os.environ["PINECONE_DATABASE"]

# Replace 'your_pinecone_api_key' with your actual Pinecone API key or use environment variables like I am here
pc = Pinecone(api_key=PINECONE_API_KEY, environment=PINECONE_ENVIRONMENT)
index = pc.Index(PINECONE_DATABASE)

model = models.resnet18(pretrained=True)
model.eval()
#remove the last fully connectected layer
model = torch.nn.Sequential(*list(model.children())[:-1])

preprocess = transforms.Compose([
    transforms.ToTensor(),
    transforms.Resize((224, 224)),
    transforms.Normalize(mean=[0.485, 0.456, 0.406], std=[0.229, 0.224, 0.225])
])

input_video_path = "/content/linedancing.mp4"
output_path = "./extracted-images/simple_%03d.jpg"

graph = bmf.graph({'dump_graph':1})
video = graph.decode({
    "input_path": input_video_path,
}).fps(2)

try:
    (
        bmf.encode(
            video['video'],
            None,
            {
                "output_path": output_path,
                "format": "image2",
                "video_params": {"codec": "jpg"},
            }
        ).run()
    )
    print("Frame extraction completed successfully.")
except Exception as e:
    print(f"Error during frame extraction: {str(e)}")

Next, we will load the extracted query frames and generate the embeddings for our video that we will compare to the ones stored in our Pinecone index.

Let me break it down for you:

Load the extracted query frames: I used the glob module to find all the file paths of the extracted query frames, which are stored in the query_frame_paths variable. These are individual frames extracted from the original video.
Generate embeddings for each query frame: We then iterate over each query frame path, load the image using cv2.imread, preprocess it (using a preprocess function that is not shown), and generate an embedding for the frame using the pre-trained model.
Store the embeddings: The generated embeddings for each frame are stored in the query_embeddings list.
Calculate the average embedding: Once all the frame embeddings have been collected, then we calculate the average of the embeddings to get a single embedding that represents the entire set of query frames. By generating an average embedding for the query frames, we are able to capture the overall visual content of the query, which is a main component of how our similarity search will work.

# Load the extracted query frames and generate embeddings
query_frame_paths = glob.glob(output_path.replace("%03d", "*"))
query_embeddings = []

for frame_path in query_frame_paths:
    frame = cv2.imread(frame_path)
    frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)

    frame = preprocess(frame)
    frame = frame.unsqueeze(0)  # Add batch dimension

    with torch.no_grad():
        embedding = model(frame)
        embedding = embedding.squeeze().numpy()

    query_embeddings.append(embedding)

query_embeddings = np.array(query_embeddings)
avg_query_embedding = np.mean(query_embeddings, axis=0)

Lastly, let's perform our similarity search with Pinecone.
The query method from Pinecone will be used to search for the most similar vectors to the avg_query_embedding we created. The top_k parameter is set to 5, which means that the code will retrieve the 5 closest matching vectors to the query(choose whatever number you'd like depending on how many items were upserted into your database. The include_metadata parameter is set to True, which means that we will retrieve the metadata (in this case, the video file paths) associated with the matching vectors.
This step is really straight forward. Pinecone has great documentation and a really easy to use package.

# Perform similarity search using Pinecone
num_results = 5  # Number of similar videos to retrieve
results = index.query(
    vector=avg_query_embedding.tolist(),
    top_k=num_results,
    include_metadata=True,
    namespace='video_embeddings'
)

# Print the most similar video paths
for match in results['matches']:
    video_path = match['id']
    print(f"Similar video: {video_path}")

And our result is....

Bonus

Since I'm using a notebook and I don't want to use up a ton of memory, I also converted all the videos to gifs to view them easier. So here is some bonus code for ya!

def video_to_gif(video_path):
    gif_path = os.path.join(tmp_dir, video_path.split('/')[-1][:-4] + '.gif')
    frames = []
    cap = cv2.VideoCapture(video_path)
    while cap.isOpened():
        ret, frame = cap.read()
        if not ret:
            break
        frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
        frames.append(Image.fromarray(frame))
    cap.release()
    frames[0].save(fp=gif_path, format='GIF', append_images=frames[1:], save_all=True, loop=0)
    return gif_path

# Display the input video as a GIF
html = 'Query video "{}": <br/>'.format(input_video_path.split('/')[-1])
query_gif = video_to_gif(input_video_path)
html_line = '<img src="{}"> <br/>'.format(query_gif)
html += html_line
html += 'Top {} search results: <br/>'.format(num_results)

# Display the similar videos as GIFs
for path in [match['id'] for match in results['matches']]:
    gif_path = video_to_gif(path)
    html_line = '<img src="{}" style="display:inline;margin:1px"/>'.format(gif_path)
    html += html_line

display.HTML(html)

You can do it too

What I've showed you is a niche use case for BMF. Video frame extraction has a lot of use cases outside of our example. There are a ton of features with this framework, especially when it comes to building video processing pipelines. Make sure you check out the BMF documentation and try out some other example apps on the quick experience page for more.

Why Your Web Bundler Matters For Optimized WebGPU-Powered 3D Game Development

Josh Alphonse — Fri, 10 May 2024 16:50:33 +0000

Browser games have had quite the transformation throughout the years. From Flash to webGL we've seen gaming on the web be taken to new heights. Yet, with each step we take to advance, we seem to hit the same issues and deal with the bottleneck of creating the next big game that anyone can play no matter if they have a console or an expensive PC. The allure of browser-based games is expanding rapidly, not just among casual gamers but also within the AAA space. In this blog I want to share my experience of experimenting with different bundlers and how they affect my usage with WebGPU.
Performance will continue to be one of the most vital specs for game developers. Thats really why we haven't really seen too many AAA games on the web. Usually these games require a lot of GPU/CPU resources that are difficult to generate games on the DOM. This is where WebGPU comes in.

WebGPU

WebGPU is an emerging standard that aims to provide modern 3D graphics and computation capabilities on the web. Unlike WebGL, which is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins, WebGPU is designed from the ground up to provide an efficient, low-level interface to the graphics processing unit (GPU).

Key features of WebGPU include:

Low-level Access: WebGPU offers fine-grained control over GPU operations, which means developers can perform more sophisticated rendering and data manipulation. This access allows for more optimized graphics rendering and general computation on the web.
Modern API Design: WebGPU is designed to interface with modern GPU features directly, similar to Vulkan, Metal, or DirectX 12. This means it can leverage capabilities that might not be available in older graphics APIs, enabling developers to create more graphically advanced and computationally intensive applications.
Cross-Platform Compatibility: As a web standard, WebGPU is intended to work across multiple platforms and devices, abstracting away the platform-specific graphics APIs while providing unified access to GPU capabilities.
Security: WebGPU is designed with modern web security standards in mind. It provides a more secure environment for executing GPU tasks, mitigating potential security risks that can arise from allowing web content to interact directly with the system's hardware resources.
Efficiency: Better performance and efficiency are key goals of WebGPU. The API allows for pre-compilation and efficient management of GPU resources, minimizing overhead, and maximizing throughput.
Compute Shaders: WebGPU supports compute shaders, which are programs that use the GPU for general computation tasks, not just graphics rendering. This expands the possible use cases to include scientific computing, machine learning, and other GPU-accelerated applications.
Concurrency and Async: The API is designed to fully take advantage of the GPU's ability to perform parallel operations, with support for asynchronous operations to ensure a smoother experience by not blocking the main thread in complex computations and rendering tasks.

Choosing a web bundler

WebGPU presents an exciting opportunity to harness the power of modern graphics and computation capabilities directly within web browsers. In tandem, the emergence of Rsbuild, based upon Rspack as a build tool, facilitates an effortless and efficient developmental workflow for web projects.
RSBuild is designed to supercharge the development process, offering out-of-the-box functionality, semantic build configuration, and an array of official plugins that terrace the path for effortless adoption and immediate productivity gains. With RSBuild's emphasis on easy configuration, performance orientation, and a lightweight plugin system, developers can focus more on the creative aspects of their projects and less on the intricacies of the build process.
Leveraging Rsbuild's zero-configuration setup and Rspack's fast Rust-based bundler, we detail how developers can establish an efficient pipeline for developing, bundling, and deploying WebGPU applications.
Rsbuild can manage WebGPU's modularity and the benefits it brings to the table in terms of developer experience. The examples encompass a range of WebGPU functionalities such as rendering pipelines, compute operations, and asset management while capitalizing on the rapid build times and optimized output of Rsbuild.

High-Performance Builds: RSBuild integrates high-performance Rust-based tools such as Rspack and SWC, vital for WebGPU projects where build speed and efficiency are crucial for iterative testing and complex shader compilation.
Universal Framework Support: RSBuild's framework agnostic nature allows developers to integrate with various UI frameworks, making it easier to adopt WebGPU across diverse tech stacks.
Consistent Artifacts: Stability of building artifacts is paramount for WebGPU applications, where a small change can have a significant visual impact. RSBuild ensures that developers have consistent results between development and production environments.
Simplified Configuration: The zero-config start-up and semantic configuration approach streamlines the set-up for Orillusion projects, meaning developers can spend more time leveraging WebGPU's capabilities instead of dealing with build issues. Leveraging RSBuild Plugins: The RSBuild plugin system is a game-changer, offering developers a chance to customize their build process according to the specific needs of their WebGPU project. Notable plugins can include:
Asset Optimization: Essential for WebGPU projects with large textures or models, asset optimization plugins can automatically compress and manage assets to ensure optimal loading times and runtime performance. You can use plugins like the
The Asset Retry Plugin or the Image Compress Plugin
Code Security: Protect your intellectual property with obfuscation plugins that add an extra layer of security, particularly important when deploying high-value WebGPU projects.
Enhanced Development Workflow: Streamline development with plugins that support hot module reloading(HMR), code splitting, and live previews, all of which are crucial for teams working on sophisticated WebGPU experiences.
Cross-Platform Compatibility: Ensure that your WebGPU application runs smoothly across all supported browsers and platforms with plugins designed to handle the nuances of different environments.

Use Cases:
Web LLM- run LLM's on the web powered by WebGPU

Building 3D worlds:

Orillusion: The Illusion of Complexity Simplified
Orillusion is a comprehensive library leveraging WebGPU to offer a high-level abstraction for intricate 3D graphics rendering. It simplifies the development of immersive web experiences, making the power of WebGPU accessible without demanding a deep dive into the lower-level intricacies.
Imagine developing a web application that features an interactive 3D model showcase, designed to be as performant as it is breathtaking. By integrating WebGPU for rendering, Rspack for bundling, and Orillusion for graphics abstraction, we can create an application that is both cutting-edge and efficient.

Orillusion is a comprehensive library leveraging WebGPU to offer a high-level abstraction for intricate 3D graphics rendering. It simplifies the development of immersive web experiences, making the power of WebGPU accessible without demanding a deep dive into the lower-level intricacies.
Imagine developing a web application that features an interactive 3D model showcase, designed to be as performant as it is breathtaking. By integrating WebGPU for rendering, Rspack for bundling, and Orillusion for graphics abstraction, we can create an application that is both cutting-edge and efficient.

npm create rsbuild@latest

Next Install orillusion

npm install @orillusion/core --save

Step 2: Incorporating Orillusion for WebGPU Abstraction

With your project scaffolded, import Orillusion to provide a high-level interface to WebGPU. Orillusion makes it easy to create, manipulate, and render 3D models without delving deep into WebGPU's API details.

// Import Orillusion
import { Scene, Engine, MeshBuilder } from 'orillusion';

// Initialize the Orillusion Engine
const engine = new Engine('renderCanvas');

// Create a simple 3D scene
const scene = new Scene(engine);
const box = MeshBuilder.createBox('box', { size: 1 }, scene);

Step 3: Crafting the 3D Experience

Next let's take it up a notch

import { Object3D, Scene3D, Engine3D, AtmosphericComponent, CameraUtil, webGPUContext, HoverCameraController, View3D, LitMaterial, MeshRenderer, BoxGeometry, DirectLight, KelvinUtil, Object3DUtil } from '@orillusion/core';
import { Stats } from '@orillusion/stats';

class Sample_Skeleton {
    lightObj3D: Object3D;
    scene: Scene3D;
    private Ori: dat.GUI | undefined;
    async run() {
        Engine3D.setting.shadow.autoUpdate = true;
        Engine3D.setting.shadow.updateFrameRate = 1;
        Engine3D.setting.shadow.shadowBound = 100;

        await Engine3D.init();

        this.scene = new Scene3D();
        this.scene.addComponent(Stats);
        let sky = this.scene.addComponent(AtmosphericComponent);

        let camera = CameraUtil.createCamera3DObject(this.scene);
        camera.perspective(60, Engine3D.aspect, 0.01, 5000.0);

        let ctrl = camera.object3D.addComponent(HoverCameraController);
        ctrl.setCamera(-30, -45, 100);
        ctrl.maxDistance = 1000;

        let view = new View3D();
        view.scene = this.scene;
        view.camera = camera;

        Engine3D.startRenderView(view);

        await this.initScene(this.scene);
        sky.relativeTransform = this.lightObj3D.transform;
    }

    async initScene(scene: Scene3D) {
        {
            // load model with skeleton animation
            let man = await Engine3D.res.loadGltf('https://cdn.orillusion.com/gltfs/CesiumMan/CesiumMan_compress.gltf');
            man.scaleX = 30;
            man.scaleY = 30;
            man.scaleZ = 30;
            scene.addChild(man);
        }
        {
            // load model with skeleton animation
            let man = await Engine3D.res.loadGltf('https://cdn.orillusion.com/gltfs/CesiumMan/CesiumMan_compress.gltf');
            man.scaleX = 30;
            man.scaleY = 30;
            man.scaleZ = 30;
            scene.addChild(man);
        }

        /******** floor *******/
        this.scene.addChild(Object3DUtil.GetSingleCube(3000, 1, 3000, .400, .355, .255));

        /******** light *******/
        {
            this.lightObj3D = new Object3D();
            this.lightObj3D.x = 0;
            this.lightObj3D.y = 30;
            this.lightObj3D.z = -40;
            this.lightObj3D.rotationX = 144;
            this.lightObj3D.rotationY = 0;
            this.lightObj3D.rotationZ = 0;
            let directLight = this.lightObj3D.addComponent(DirectLight);
            directLight.lightColor = KelvinUtil.color_temperature_to_rgb(5355);
            directLight.castShadow = true;
            directLight.intensity = 25;
            scene.addChild(this.lightObj3D);
        }
    }
}

new Sample_Skeleton().run();

You will get something like this:

Bringing together WebGPU, Rspack, and Orillusion creates an ecosystem that is more than the sum of its parts. Developers can forge web applications exhibiting both stunning visual richness and unparalleled performance. This potent combination caters to the evolving demands of users and paves the way for the next generation of immersive web experiences. As the web continues to evolve, these tools will undoubtedly be at the forefront, powering experiences we've yet to imagine.

Monorepos with Rspack Just Makes Things Easier

Josh Alphonse — Tue, 06 Feb 2024 23:17:00 +0000

Introduction

When it comes to web dev, it's hard to keep up with all the latest trends. I also can't come up with many examples of ecosystems that move faster than JavaScript's. It feels as if a new version of the iPhone is released every month. However, just because things are moving fast, doesn't mean you have to be left in the dust.

Monorepos are one of the hottest additions to the scene especially for web developers. One of the biggest challenges when building a full stack app is managing complexity. The larger your application becomes, the more complex it gets and it doesn't matter how big your organization or team may be. You've probably experienced this kind of struggle if you're building a product that has many different front-end code bases that share backend's and interfaces.

The way orgs are solving this issue now is with the use of monorepos. Monorepos help mitigate the confusion that comes along with having to manage multiple repositories for multiple distinct projects/products. A monorepo can consolidate your projects all into one repository. Contrary to the name, monorepos are technically not monolithic. A common misconception is that if you use a monorepo, every project in the repository have to be released on the same day. This acutally isn't the case. Just because we are developing our code in the same place doesn't mean we have to deploy everything at the same time nor to the same place. Since your code bases can exist in one repository, it makes common tasks like code sharing and refactoring way easier. This leads to significantly lowering the cost that comes with creating libs, microservices and microfronents. If you want true development flexibility, then you have to give this approach a try. This is why some of the biggest companies are implementing monorepos.

Rspack

So, where does Rspack come into play here?

As you may know, Rspack is a high performance web bundler that offers interoperability with the webpack ecosystem but also build systems like Nx to build smart monorepos! Rspack can bring several key benefits when used in conjunction with NX, primarily by enhancing the performance aspects of the development and build processes. Here are a few ways Rspack can positively impact an NX-powered project :

Speeding up builds:Rspack is known for its quick bundling capabilities. In complex NX workspaces with multiple applications and libraries, faster bundling translates to quicker build times. This is especially beneficial when you're dealing with large-scale projects where build times can significantly impact developer productivity and continuous integration/deployment pipelines.
Reducing setup time:Rspack has a reputation for requiring less configuration out of the box compared to other bundlers, which can simplify the setup process. In an NX workspace, this means you can get applications up and running more quickly, and you can spend less time adjusting bundler configurations and more time developing features for the e-commerce store.
Efficient code splitting: Rspack can facilitate code splitting, which means that each page or feature can have its bundle. This ensures that users are only downloading the code necessary for the page they're visiting, improving load times and enhancing the user experience.
Providing Hot Module Replacement (HMR)While NX manages the overall structure and dependencies in your monorepo, Rspack can provide Hot Module Replacement for a smoother development experience. HMR allows changes to be applied to a running application without needing a full reload, preserving the application state and speeding up the development process.

Although monorepos can solve a bunch of problems for applications of any size, there is one feature in particular that I'm going to highlight in this blog post. That feature being the ability to manage aliases with Rspack and Nx.

Defining aliases with rspack in an NX monorepo provides multiple benefits and solves several issues commonly faced in large-scale projects. Let's take a look before we dive into the tutorial:

Simplified Imports: With aliases, you can avoid long and complicated relative paths that are hard to read and maintain. Aliases provide a clear, concise way to import modules.

// Without alias... How do you even know where your functinos are?! Half the time in guesssing.
import utility from '../../../../libs/utils/src/utility';

// With alias
import utility from '@utils/utility';

Easier Refactoring: When you decide to rearrange your project's folder structure, you won't need to update every import statement. Instead, you only update the alias paths in the rspack configuration.
Code Readability: Aliases can help signify the intent or the origin of the imported module more clearly than relative paths.
Consistency Across Apps and Libs: In a monorepo, you typically have multiple apps and libraries. Aliases ensure that every part of your project refers to shared libs in the same way.
Namespace Clarity: By using aliases that represent features or shared libraries (like @feature-a or @shared), you provide a clear namespace. This indicates that the import is from a shared source and not a local module.
Avoid File Path Errors: As projects grow, relative paths become more prone to errors when files are moved or when the developer is unsure of the current file's depth in the directory structure.
Enhanced Autocompletion: Many IDEs can provide improved autocompletion for imports when aliases are set up properly, making development faster and reducing typos.
Collaboration Enhancement: When working with a team, aliases ensure that everyone is using the same paths to common resources, reducing the cognitive load of understanding where a file is located within the project hierarchy.
Integration with Build Tools: Tools like rspack can understand these aliases and use them to resolve the actual bundle paths during the build process, ensuring the generated bundles reflect the same structure and readability of the source code.
Decoupling the Code: Aliases can help in abstracting the actual file system paths, which means developers can think more about architecture and less about the file system.

Tutorial

Alright, so now that we have some base knowledge of what monorepos are, let's jump into a tutorial. This time around, we're going to set up a monorepo for an e-commerce store using NX and Rspack. We'll configure aliases to simplify module resolution, keeping our import statements clean and readable.

Before we get started

Prerequisites

At the minimum, a basic understanding of Javascript/Typescript and react
Node.js, yarn, or pnpm
Install Nx globally depending on your package manager. I'm using npm add --global nx@latest
Create a project with npx create-nx-workspace myrspackapp --preset=@nx/rspack

Step 1: Creating an NX Workspace

First, we need to create a new NX workspace by running the following command:

npx create-nx-workspace monrepo-example --preset=@nx/rspack

Choose empty as the preset for full customization. Once the setup is complete, navigate into your new workspace directory:

cd monorepo-example

Step 2: Adding Applications and Libraries

With NX, you can have multiple apps and libraries co-existing in a single monorepo. Since we installed Nx globally, we can use the nx command to generate our libraries.

For this example, let's add an application and two libraries:

nx generate @nrwl/react:application store-front
nx generate @nrwl/react:library ui-shared --directory=shared
nx generate @nrwl/react:library product-data --directory=shared

This will set up a React application (store-front) and two shared libraries (ui-shared and product-data) under the libs/shared/ directory.

Step 3: Configuring Aliases in rspack.config.js

Create a rspack.config.js file at the root of your workspace if it doesn't exist, and define your aliases:

const path = require('path');

module.exports = (config) => {
  config.resolve.alias = {
    ...config.resolve.alias,

    // For that beautiful UI:
    '@ui-elements': path.resolve(__dirname, 'libs/shared/ui-elements/src'),

    // For the business logic behind products:
    '@product-services': path.resolve(__dirname, 'libs/shared/product-services/src'),

    // Continue as your project grows...
  };
  return config;
};

Step 4: Using Aliases in Your Code

Now that we have our aliases, we can use them within our applications and libraries. For example, in our store-front app, we can now import from our shared libraries like so:

import { CheckoutButton, StoreBanner } from '@ui-elements';
import { fetchAllProducts } from '@product-services';

Step 5: Building the Application

To build your application with the new alias configurations, simply use the NX build command:

nx build store-front

NX will invoke Rspack with your custom configuration including the aliases, and you should see a successful build output.

Conclusion

By using aliases with rspack in an NX monorepo, you're essentially laying down a scalable, maintainable foundation that streamlines development workflows and helps manage complexity as your project grows. Keep an eye out for more content and if you have any questions and want to join the community find us on Github and Join us on our ByteDance Open Source Discord Server!

BMF 📹 + Hugging Face🤗, The New Video Processing BFFs

Josh Alphonse — Thu, 01 Feb 2024 01:27:15 +0000

TL;DRif you want to test this tutorial before we start, try it out here

Hugging Face has created a major shift in the AI community. It fuels cutting-edge open source machine learning/AI models and datasets. The Hugging Face community is thriving with great ideas and innovations to the point where the possibilities seem endless.

Hugging Face is revolutionizing Natural Language Processing (NLP) with state-of-the-art solutions for tasks like translation, summarization, sentiment analysis, and contextual understanding. Its arsenal of pre-trained models makes it a robust platform for diverse NLP tasks, streamlining the integration of machine learning functionalities. Hugging Face simplifies the training, evaluation, and deployment of models with a user-friendly interface. The more I used Hugging Face in my own personal projects, the more I felt inspired to combine it with Babit Multimedia Framework (BMF).

If you're reading this and are not familiar with BMF, it's a cross-platform multimedia processing framework by ByteDance Open Source. Currently, BMF is used to process over 2 billion videos a day across multiple social media apps. Can this get complex? Yes, it sure can. However, in this article, I'll break it all down, so you know how to create unique experiences across any type of media platform.

Why BMF?

BMF stands out with its multilingual support, putting it ahead in the video processing game. BMF excels in various scenarios like video transcoding, editing, videography, and analysis. The integration of advanced technologies like Hugging Face with BMF is a game-changer for complex multimedia processing challenges.

Before we get started with the tutorial, let me share with you some ideas I envision coming to life with BMF + Hugging Face:

Multimedia Content Analysis: Leveraging Hugging Face's NLP models, BMF can delve deep into textual data associated with multimedia content, like subtitles or comments, for richer insights.
Accessibility: NLP models can automatically generate video captions, enhancing accessibility for the hard-of-hearing or deaf community.
Content Categorization and Recommendation: These models can sort multimedia content based on textual descriptions, paving the way for sophisticated recommendation systems.
Enhanced User Interaction: Sentiment analysis on user comments can offer valuable insights into user engagement and feedback for content improvement.

What now?

Open Source AI is creating the building blocks of the future. Generative AI impacts all industries, and this leads me to think about how generative AI can impact the future of broadcasting and video processing. I experimented with BMF and Hugging Face to create the building blocks for a broadcasting service that uses AI to create unique experiences for viewers. So, enough about the background, let's get it going!

What we'll build

Follow along, as we'll build a video processing pipeline with BMF that uses the runwayml/stable-diffusion-v1-5 model to generate an image to display as an overlayed image ontop of an encoded video. If that didn't make sense, don't worry, here's a picture for reference:

So why is this significant? The image of the panda is AI generated and combined with BMF , we can put it down a processing pipeline to put it on top of our video. Think about! There could be a scenario where you are creating a video broadcasting service and during live streams, you'd like to display images quickly and display them for your audience with a simple prompt. There can also be a scenario where you are using BMF to edit your videos and you'd like to add some AI-generated art. This tutorial is just one example. BMF combined with models created by the Hugging Face community opens up a whole new world of possibilities.

Let's Get Started

Prerequisites:

A GPU(I'm using google Colab A100 GPU. You can also use v100 or TP4 GPUs but they will just run a bit slower)
Install BMFGPU
Python 3.9-3.10 (strictly required to work with bmf)
FFMPEG

You can find all the BMF installation docs here. The docs will highlight more system requirements if you decide to run things locally.

Getting Started

Begin by ensuring that essential toolkits like Hugging Face Transformers and BMF are installed in your Python environment. Use pip for installation:

Initial Setup

First, we'll clone the following repository to get our video that we want to process(If you are coding along and want to use your own video, create your own repo and simply add a video file, preferably a short video and add to easily clone just like I did. You can also just save the video to the directory you're coding in.)

git clone https://github.com/Joshalphonse/Bmf-Huggingface.git

Install BabitMF-GPU to accelerate your video processing pipeline with BMF's GPU capablities

pip install BabitMF-GPU

Install the following dependencies

pip install requests diffusers transformers torch accelerate scipy safetensors moviepy Pillow tqdm numpy modelscope==1.4.2 open_clip_torch pytorch-lightning

Install ffmpeg.BMF framework utilizes the FFmpeg video decoders and encoders as the built-in modules for video decoding and encoding. It's necessary for users to install supported FFmpeg libraries before using BMF.

sudo apt install ffmpeg

dpkg -l | grep -i ffmpeg

ffmpeg -version

This package below is installed to show the BMF C++ logs in the colab console, otherwise only python logs are printed. This step is not necessary if you're not in a Colab or iPython notebook environment.

pip install wurlitzer
%load_ext wurlitzer

Create a new folder in the directory for the github repository we cloned. We'll need this path later on.

import sys
sys.path.insert(0, '/content/Bmf-Huggingface')
print(sys.path)

Creating the Module

Now it's time for the fun part. We'll create a module to process the video.Here's the module I created and I'll break it down for you below.

import bmf
from bmf import bmf_sync, Packet
from bmf import SubGraph
from diffusers import StableDiffusionPipeline
import torch

model_id = "runwayml/stable-diffusion-v1-5"
pipe = StableDiffusionPipeline.from_pretrained(model_id, torch_dtype=torch.float16)
pipe = pipe.to("cuda")

prompt = "a photo of a panda eating waffles"
image = pipe(prompt).images[0]

image.save("panda_photo.png")

class video_overlay(SubGraph):

    def create_graph(self, option=None):
        # create source stream
        self.inputs.append('source')
        source_stream = self.graph.input_stream('source')
        # create overlay stream
        overlay_streams = []
        for (i, _) in enumerate(option['overlays']):
            self.inputs.append('overlay_' + str(i))
            overlay_streams.append(self.graph.input_stream('overlay_' + str(i)))

        # pre-processing for source layer
        info = option['source']
        output_stream = (
            source_stream.scale(info['width'], info['height'])
                .trim(start=info['start'], duration=info['duration'])
                .setpts('PTS-STARTPTS')
        )

        # overlay processing
        for (i, overlay_stream) in enumerate(overlay_streams):
            overlay_info = option['overlays'][i]

            # overlay layer pre-processing
            p_overlay_stream = (
                overlay_stream.scale(overlay_info['width'], overlay_info['height'])
                    .loop(loop=overlay_info['loop'], size=10000)
                    .setpts('PTS+%f/TB' % (overlay_info['start']))
            )

            # calculate overlay parameter
            x = 'if(between(t,%f,%f),%s,NAN)' % (overlay_info['start'],
                                                 overlay_info['start'] + overlay_info['duration'],
                                                 str(overlay_info['pox_x']))
            y = 'if(between(t,%f,%f),%s,NAN)' % (overlay_info['start'],
                                                 overlay_info['start'] + overlay_info['duration'],
                                                 str(overlay_info['pox_y']))
            if overlay_info['loop'] == -1:
                repeat_last = 0
                shortest = 1
            else:
                repeat_last = overlay_info['repeat_last']
                shortest = 1

            # do overlay
            output_stream = (
                output_stream.overlay(p_overlay_stream, x=x, y=y,
                                      repeatlast=repeat_last)
            )

        # finish creating graph
        self.output_streams = self.finish_create_graph([output_stream])

Code Breakdown:

Importing Required Modules:

import bmf
from bmf import bmf_sync, Packet
from bmf import SubGraph
from diffusers import StableDiffusionPipeline
import torch

bmf and its components are imported to harness the functionalities of the Babit Multimedia Framework for video processing tasks.
SubGraph is a class in BMF, used to create a customizable processing node.
StableDiffusionPipeline is imported from the diffusers library that allows the generation of images using text prompts.
torch is the PyTorch library used for machine learning applications, which Stable Diffusion relies on.

Configuring the Stable Diffusion Model:

model_id = "runwayml/stable-diffusion-v1-5"
pipe = StableDiffusionPipeline.from_pretrained(model_id, torch_dtype=torch.float16)
pipe = pipe.to("cuda")

The Stable Diffusion model is loaded with the specified model_id.
The torch_dtype parameter ensures the model uses lower precision to reduce memory usage.
.to("cuda") moves the model to GPU for faster computation if CUDA is available.

Generating an Image Using Stable Diffusion:

prompt = "a photo of a panda eating waffles"
image = pipe(prompt).images[0]
image.save("panda_photo.png")

We then set a text prompt to generate an image of "a photo of a panda eating waffles".
The image is created and saved to "panda_photo.png".

Defining a Custom BMF SubGraph for Video Overlay:

class video_overlay(SubGraph):

video_overlay class is derived from SubGraph. This class will define a custom graph for video overlay operations.

Creating the Graph:

def create_graph(self, option=None):

create_graph method is where the actual graph (workflow) of the video and overlays are constructed.

Processing Source and Overlay Streams:

self.inputs.append('source')
source_stream = self.graph.input_stream('source')
overlay_streams = []

Registers input streams for the source and prepares a list of overlay input streams.

Scaling and Trimming Source Video:

info = option['source']
output_stream = (
    source_stream.scale(info['width'], info['height']).trim(start=info['start'], duration=info['duration']).setpts('PTS-STARTPTS'))

The source video is scaled and trimmed according to the specified option. Adjustments are made for the timeline placement.

Scaling and Looping Overlay Streams:

p_overlay_stream = (
    overlay_stream.scale(overlay_info['width'], overlay_info['height']).loop(loop=overlay_info['loop'], size=10000).setpts('PTS+%f/TB' % (overlay_info['start'])))

Each overlay is scaled and looped as needed, providing a dynamic and flexible overlay process.

Overlaying on the Source Stream:

output_stream = (
    output_stream.overlay(p_overlay_stream, x=x, y=y,
                          repeatlast=repeat_last))

Overlays are added to the source stream at the calculated position and with the proper configuration. This allows multiple overlays to exist within the same timeframe without conflicts.

Finalizing the Graph:

self.output_streams = self.finish_create_graph([output_stream])

Final output streams are set, which concludes the creation of the graph. Now, after this, it's time for us to encode the video and display it how we want to.

Applying Hugging Face Model

Let's add our image as an overlay to the video file. Let's break down each section of the code to explain how it

input_video_path = "/content/Bmf-Huggingface/black_and_white.mp4"
logo_path = "/content/panda_photo.png"
output_path = "./complex_edit.mp4"
dump_graph = 0

duration = 10

overlay_option = {
    "dump_graph": dump_graph,
    "source": {
        "start": 0,
        "duration": duration,
        "width": 1280,
        "height": 720
    },
    "overlays": [
        {
            "start": 0,
            "duration": duration,
            "width": 300,
            "height": 200,
            "pox_x": 0,
            "pox_y": 0,
            "loop": 0,
            "repeat_last": 1
        }
    ]
}

my_graph = bmf.graph({
    "dump_graph": dump_graph
})

logo_1 = my_graph.decode({'input_path': logo_path})['video']

video1 = my_graph.decode({'input_path': input_video_path})

overlay_streams = list()
overlay_streams.append(bmf.module([video1['video'], logo_1], 'video_overlay', overlay_option, entry='__main__.video_overlay')[0])

bmf.encode(
    overlay_streams[0],
    video1['audio'],
    {"output_path": output_path}
    ).run()

Let's break this down too

Defining Paths and Options:

input_video_path = "/content/Bmf-Huggingface/black_and_white.mp4"
logo_path = "/content/panda_photo.png"
output_path = "./complex_edit.mp4"
dump_graph = 0
duration = 10

input_video_path: Specifies the file path to the input video.
logo_path: File path to the image (logo) you want to overlay on the video.
output_path: The file path where the edited video will be saved.
dump_graph: A debugging tool in BMF that can be set to 1 to visualize the graph but is set to 0 here, meaning no graph will be dumped.
duration: The duration in seconds for the overlay to be visible in the video.

Overlay Configuration:

overlay_option = {
    "dump_graph": dump_graph,
    "source": {
        "start": 0,
        "duration": duration,
        "width": 1280,
        "height": 720
    },
    "overlays": [
        {
            "start": 0,
            "duration": duration,
            "width": 300,
            "height": 200,
            "pox_x": 0,
            "pox_y": 0,
            "loop": 0,
            "repeat_last": 1
        }
    ]
}

overlay_option: A dictionary that defines the settings for the source video and the overlay.
For the source, the width and height you want to scale the video to, and when the overlay should start and end are specified.
For the overlays, detailed options such as position, size, and behavior (like loop and repeat_last) are defined.

Creating a BMF Graph:

my_graph = bmf.graph({"dump_graph": dump_graph
})

my_graph is an instance of BMF graph which sets up the processing graph (pipeline), with dump_graph passed as an option.

Decoding the Logo and Video Streams:

logo_1 = my_graph.decode({'input_path': logo_path})['video']
video1 = my_graph.decode({'input_path': input_video_path})

The video and logo are loaded and decoded to be processed. This decoding extracts the video streams to be used in subsequent steps.

Creating Overlay Streams:

overlay_streams = list()
overlay_streams.append(bmf.module([video1['video'], logo_1], 'video_overlay', overlay_option, entry='__main__.video_overlay')[0])

An empty list overlay_streams is created to hold the video layers.
The bmf.module function is used to create an overlay module, where the source video and logo are processed using the video_overlay class defined previously with the corresponding options.

Encoding the Final Output:

bmf.encode(
    overlay_streams[0],
    video1['audio'],{"output_path": output_path}).run()

The final video stream, with the overlay applied, and the original audio from the input video are encoded together into a new output file specified by output_path.
The .run() method is called to execute the encoding process.

Our final output should look something like this:

Thats it! We've explored a practical example of utilizing Babit Multimedia Framework (BMF) a video editing task using AI to create an image we can overlay on a video. Now you know how to set up a BMF graph, decode the input streams, create overlay modules, and finally encode the edited video with the overlay in place. In the future, I will consider adding more AI models, like one to improve the resolution, or even a model that creates a video from text. Through the power of BMF and Hugging Face open source models, users can create complex video editing workflows with overlays that can dynamically change over time, offering vast creative possibilities.

Try it out on CoLab and tell us what you think:

https://colab.research.google.com/drive/1eQxiZc2vZeyOggMoFle_b0xnblupbiXd?usp=sharing

Join us on our ByteDance Open Source Discord Server!

Leveraging GPU Acceleration in BMF for High-Performance Video Processing

Josh Alphonse — Thu, 25 Jan 2024 01:26:05 +0000

Introduction

Multimedia processing and GPU acceleration have become a cornerstone for achieving high performance. Babit Multimedia Framework (BMF) harnesses this power, offering unparalleled speed and efficiency for video processing tasks. In this blog post, we'll explore how BMF utilizes GPU acceleration and provide practical examples to help you integrate this capability into your projects.

Understanding GPU Acceleration in BMF

BMF's architecture is designed to exploit the parallel processing capabilities of GPUs. This is crucial for tasks like video transcoding, real-time rendering, and applying complex filters or effects, where the computational intensity can be staggering.

GPU acceleration is like a turbocharged engine in a sports car, propelling you forward at unimaginable speeds. It's all about doing more in less time. Imagine you're editing a video for your youtube channel or streaming a live esports tournament; every millisecond counts. This is where BMF's GPU prowess shines, slicing through processing times like a hot knife through butter.

BMF has carried out Performance optimization in CPU and GPU heterogeneous scenarios that many FFmpeg existing solutions do not have, and enriched the Pipeline. Taking compression and super resolution scenarios as examples, after statistics, the total throughput of BMF has increased by 15%.

BMF's GPU codec is inherited from FFmpeg, using GPU NVENC, NVDEC and other proprietary hardware to accelerate video codec, and using FFmpeg's CUDA filters to accelerate image preprocessing, which is no barrier for users familiar with FFmpeg. At this stage, BMF supports GPU decoding, encoding and one-to-many transcoding.

Key Benefits of GPU Acceleration:

Speed: GPUs can process multiple operations simultaneously, drastically reducing processing time.
Efficiency: Offloading intensive tasks to the GPU frees up the CPU for other operations, improving overall system performance.
Scalability: As video resolutions and processing demands increase, GPUs can scale to meet these challenges.

Setting Up GPU Acceleration in BMF

Before diving into coding, ensure your environment is set up to leverage GPU capabilities. This typically involves installing the necessary GPU drivers and libraries, like CUDA for NVIDIA GPUs. BMF documentation provides detailed setup instructions. You can use tools like co-lab or your own hardware. BMF also has the capability to run on Windows, Mac OS and Linux.

Code Example: Basic GPU-Accelerated Video Processing

Let's start with a simple example of GPU-accelerated video processing in BMF. This example assumes you have BMF and all necessary GPU libraries installed. If you haven't installed it yet, click this link and you can install BMF based on your system set up. You can also use tools like Colab as well. If you're using GPU just make sure you meet the hardware requirements to do so.

Prerequsites:

Python 3.9
Cmake
ffmpeg4
Python, C++, or Go experience

Python code

===========

In this example , BMF implements a call to the GPU codec function for video transcoding. BMF basically follows the parameters of FFmpeg, and the lines of code you'll see that are written in red are where true magic happens.

First create a BMF Graph and Decode model, specify the incoming Hardware Accelerator parameter as cuda, and then you can decode the GPU.

import bmf

def test_gpu_transcode():
    print ("Testing gpu transcoding......")
    input_video_path = "input.flv"
    output_video_path = "output.mp4"

    graph = bmf.graph()

    video = graph.decode({
        "input_path": input_video_path,
        "video_params": {
            "hwaccel": "cuda",
        }
    })

Next, use the CUDA filter for the decoded video stream. In BMF, CUDA filters can be used serially at the same time. In this case, we used Scale cuda and Yadif cuda. Then we passed in the audio & video stream to build an Encode model, specifying Codec as h264_nvenc and Pix format as cuda. Once the entire pipeline is complete, call RUN to start execution.

(bmf.encode(
        video["video"].ff_filter("scale_cuda", w=1280, h=720).ff_filter("yadif_cuda"),
        video["audio"], {
            "output_path": output_video_path,
            "video_params": {
                "codec": "h264_nvenc",
                "pix_fmt": "cuda"
            },
        }
    ).run())

Full Code

import bmf

def test_gpu_transcode():
    print ("Testing gpu transcoding......")
    input_video_path = "input.flv"
    output_video_path = "output.mp4"

    graph = bmf.graph()

    video = graph.decode({
        "input_path": input_video_path,
        "video_params": {
            "hwaccel": "cuda",
        }
    })
    (bmf.encode(
        video["video"].ff_filter("scale_cuda", w=1280, h=720).ff_filter("yadif_cuda"),
        video["audio"], {
            "output_path": output_video_path,
            "video_params": {
                "codec": "h264_nvenc",
                "pix_fmt": "cuda"
            },
        }
    ).run())

Advanced GPU-Accelerated Video Processing

For more complex scenarios, BMF allows fine-tuning of GPU settings and integration with other GPU-accelerated libraries.

we introduce CV-CUDA accelerated image preprocessing. In order to fully mobilize the computing power of CUDA, we introduced CV-CUDA in BMF, which is the acceleration operator base specially developed by Nvidia for Computer Vision applications. At this stage, it provides about 45 common high-performance operators.It provides rich API interfaces such as C/C++/Python API, supports batch input of images of different sizes at the same time, and can realize zero-copy data conversion with other deep learning frameworks, and also provides a variety of scene application examples.

Cuda Operators you can use:

Blur
Crop
Flip
Gamma
Rotate
Scale

def test_gpu_transcode():  # Start of function named 'test_gpu_transcode'
    print("Testing GPU transcoding...")    # Print out a string "Testing GPU transcoding..." in the console

    # Variables containing the paths of the input video and the path to save the output video (transcoded one)
    input_video_path = "input.flv"    # Path to the video file we want to transcode
    output_video_path = "output.mp4"  # Path to save the output video

    # Create a BMF graph to represent a series of processing operations
    graph = bmf.graph()

    # Call the 'decode' function of the created BMF graph. Input is the video file pointed by 'input_video_path'.
    # Use hardware acceleration on the GPU to decode the video (hwaccel means hardware accelerator)
    video = graph.decode({
        "input_path": input_video_path,
        "video_params": {
            "hwaccel": "cuda",    # Use NVIDIA CUDA technology for hardware accelerated decoding
        }
    })

    # Call the 'encode' function to encode the video and audio streams.
    # The input video stream is first processed by a GPU scale module to resize it to 1280x720 pixels.
    # The encoded video will be saved to the path pointed by 'output_video_path'.
    # Use NVIDIA NVENC technology for GPU accelerated encoding,
    # and 'pix_fmt' is set to 'cuda' to let the GPU to read in the processed frames directly from its own memory.
    bmf.encode(
        video["video"].module("scale_gpu", {"size": "1280x720"}),    # Scaling the video to dimension of 1280x720 pixels using GPU
        video["audio"],    # Including the audio stream in the processed video
        {
            "output_path": output_video_path,    # Path to save the output video
            "video_params": {
                "codec": "h264_nvenc",    # Use H.264 codec for video encoding with NVENC technology
                "pix_fmt": "cuda"    # The input video frames are in GPU memory
            }
        }
    ).run()    # Execute the graph operations

# Now Call the above defined function
test_gpu_transcode()    # Call the 'test_gpu_transcode' function to start the whole process

Example: Integrating AI Models for Video Enhancement

BMF's flexibility enables the integration of AI models for tasks like super-resolution or frame interpolation. Here's an example of how you might integrate an AI model for super-resolution. Check out this example

Real-World Sorcery with BMF and GPU Acceleration

Let's list up some real-world scenarios where GPU-accelerated BMF works its magic:

The Live Sports Event: Picture a live sports broadcast. With BMF's GPU acceleration, you can stream high-definition, slow-motion replays almost instantaneously. It's like having the ability to freeze time and zoom in on that crucial game-winning goal.
Hollywood films: In film editing, BMF with GPU acceleration is your special effects wizard. Render stunning visual effects in a fraction of the time, bringing dragons to life or creating epic space battles that look breathtakingly real.
The Viral Video Sensation: For content creators, time is of the essence. GPU-accelerated BMF is like having a superpower to edit and render viral-worthy videos in record time, ensuring you hit the trends before they fade.
The Gaming Livestream: In the gaming world, live streaming with real-time effects is key. With BMF's GPU acceleration, you can stream your gameplay with high-quality graphics and overlays, keeping your audience glued to their screens.
The AI-Powered Masterpiece: Dive into the future with AI-enhanced video processing. From upscaling vintage film footage to crystal-clear quality to applying real-time face filters in a video chat, BMF's GPU acceleration makes it all possible, and at lightning speeds.

GPU acceleration in BMF opens up a world of possibilities for high-performance video processing. By leveraging the power of GPUs, developers can achieve remarkable speed and efficiency in multimedia applications. The examples provided are just a starting point -- the real potential lies in how you apply these capabilities to your unique projects.

Remember, the key to successful implementation is understanding your specific processing requirements and how best to utilize BMF's GPU acceleration features to meet those needs.

The fastest way to use code splitting

Josh Alphonse — Thu, 25 Jan 2024 01:20:30 +0000

Performance and Code Splitting with Rspack

Performance can be a big deal. For every optimization there is a sacrifice being made. As applications grow in complexity, the need for efficient resource loading becomes increasingly vital. Enter code splitting - a technique that may not be so new to you but it's revolutionized content delivery on the web. At the forefront of this revolution is Rspack, my web bundler of choice that excels at optimizing and packaging web applications.

What is Code Splitting?

Code splitting is the process of breaking down a JavaScript bundle into smaller chunks that can be loaded on demand. This is crucial for improving load times, particularly in large-scale applications. Instead of downloading the entire JavaScript bundle upfront, users only download the necessary code for their current page or feature, significantly reducing the initial load time.

In the context of Rspack, code splitting can be implemented using dynamic imports. Dynamic imports enable you to load JavaScript modules dynamically at runtime, rather than including them in the main bundle.

Code Splitting with Rspack

Efficient Performance: Rspack is a highly performant tool. Utilizing concepts like Code Splitting and Tree Shaking, it ensures that your web application loads faster and only what's needed. Supporting HTTP/2, it has the ability to split your code into many pieces that can be loaded in parallel, drastically improving loading times.
Loaders and Plugins: Rspack boasts of a variety of loaders and plugins to make the development process smooth. Loaders preprocess files, allowing you to bundle any static resource, while plugins provide a wide range of solutions such as bundle optimization, environment variable injection, and HTML generation.
Import Magic Comments: Rspack takes advantage of Webpack’s import syntax to provide the developer with succinct control over the chunk names, which can be useful in debugging and provides a way to control caching via customized chunk names.
Webpack Compatibility: Rspack aims to maintain a high level of compatibility with Webpack's plugin and loader ecosystem. Developers familiar with Webpack's configuration can easily set up and configure Rspack. Many of Webpack’s features, such as code splitting, dynamic imports, module federation, hot module replacement, among others, are supported by Rspack as well.

Implementing Code Splitting in Rspack

There are three primary methods for code splitting in Rspack:

Entry Points: Manually split code using the entry configuration.
SplitChunksPlugin: Use this plugin to deduplicate and split chunks, extracting shared modules into a new chunk.
Dynamic Imports: Using the import() syntax for dynamic imports to split code within modules.

Each method has its own configuration approach and use case, providing flexibility and control over how your assets are generated and managed. In this blog post, we are going to use the dynamic imports method.

For detailed code examples and further explanation, you can refer to Rspack's code splitting official documentation.

Setting Up Rspack/Rsbuild

Prerequisites

Node.Js
JavaScript/Framework of choice knowledge

Before diving into code splitting techniques, ensure you have Rspack installed. Rspack supports frameworks like Svelte, React, Vue, SolidJS, NestJS, and Modern.JS:

npm create rsbuild@latest

When you run this command, let it load and choose a framework you want to work with. For this example, I'll be using React. Rspack and React work well together and have they both have some built-in features we'll discuss later in this article.

Exploring Code Splitting Techniques in Rspack

Project Structure

Here's a breakdown of some of the files in our project:

pages/ : This directory contains different pages of your app, such as Home.tsx, and ProductList.jsx.
- App.jsx: Where you define your primary routes and wrappers around your app.
package.json: It contains metadata about the project, like the project name, version, dependencies, etc.
rsbuild.config.mjs: The configuration file for configuring rsbuild settings.

Let's Begin

Code splitting is a feature supported by Modern.js and it works alongside Rspack by splitting code into different "chunks". This is a crucial optimization technique which is used when bundling large applications. It works a bit differently than other frameworks.

Define Routes

The App.jsx will define the routing for your application:

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

const Home = lazy(() => import('./Components/Home'));
const ProductList = lazy(() => import('./Components/ProductList'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/products">Products</Link></li>
          </ul>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/products" element={<ProductList />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

export default App;

React's lazy function is combined with Suspense to dynamically import the component for each route. When the Route is rendered, React will automatically load the chunk containing the corresponding component.

Home Component

In the Home.jsx file, import another chunk using React.lazy. It will be automatically split into its own chunk by webpack.

// Components/Home.js
import React from 'react';

const Home = () => {
  return <h1>Welcome to Our Online Store!</h1>;
};

export default Home;

ProductList Component

// /Components/ProductList
import React from 'react';
import { Link } from 'react-router-dom';

const products = [
  // Dummy products data
  { id: 1, name: 'Product 1' },
  { id: 2, name: 'Product 2' },
  { id: 3, name: 'Product 3' },
];

const ProductList = () => {
  return (
    <div>
      <h1>Product List</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            <Link to={`/product/${product.id}`}>{product.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ProductList;

index.js

Your index.js file is the starting point of your application:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import Home from './Components/Home';

console.log('index.js')

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
    <Home/>
  </React.StrictMode>,
);

rsbuild.confic.mjs

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
  plugins: [pluginReact()],
  mode: 'development',
  entry: {
    index: './src/index.jsx',
  },
  output: {
    filename: '[name].bundle.js',
  },

});
module.exports.defineConfig = defineConfig;

In this configuration React with Rspack will automatically split each page component (Home.jsx and ProductList.jsx) into its own chunk that gets loaded only when the corresponding route is navigated to using dynamic imports.

You can see this behavior in the Network tab of your browser's developer tools when you navigate between the different pages of your app. When you switch from / to /products, for example, you will notice the browser loading a new JavaScript file for that page.

Code splitting in React with Rspack enhances application performance by loading only necessary code chunks on demand. This way of splitting code ensures that the user only downloads the necessary code for the current page rather than all the code at once, substantially improving the load time of your application. Code splitting is just one piece of the optimization puzzle, but it's a significant one.

Be sure to join us on our ByteDance Open Source Discord Server!

Deploying ByConity with Kubernetes: A Step-by-Step Guide

Josh Alphonse — Tue, 03 Oct 2023 19:39:24 +0000

Introduction:

ByConity is a powerful open-source data warehouse developed by ByteDance. It's designed for high-performance computing and utilizes a computing-storage separation architecture. For those who don't know, ByConity's origin can be traced back to ClickHouse DB. Initially, ByteDance was implementing ClickHouse as their main Data warehouse. As the business grew and enhanced performance was needed, the team decided to fork ClickHouse to start ByConity as we know it today.
If you want to harness its capabilities within your Kubernetes cluster, this step-by-step guide will walk you through the deployment process. Whether you want to set up a local environment for testing or deploy it in your self-built Kubernetes cluster, we've got you covered.

Why Kubernetes?
Deploying ByConity with Kubernetes offers several advantages. Most tech enterprises require agility, cost-effectiveness, and superior performance to harness real-time data. Kubernetes applications exhibit versatility, capable of running seamlessly across diverse environments, from public clouds to isolated on-premise setups. The Kubernetes operator pattern simplifies intricate analytic infrastructure management, transforming it into easily controllable assets.
I like to think of Kubernetes as if it's an orchestra to understand how it works...
Imagine Kubernetes as the conductor of the orchestra, responsible for managing and coordinating various musical instruments (containers) to produce a harmonious symphony (your application). Let's break it down:

Conductor (Kubernetes Master): Kubernetes has a conductor, which is like the conductor of an orchestra. This conductor is the brain behind the operation, making high-level decisions and coordinating the entire performance.
Musicians (Containers): Each musician in the orchestra corresponds to a container within Kubernetes. Each musician (container) has a specific role and plays a part in the overall composition.
Sheet Music (Pods): Kubernetes groups containers together in units called "Pods." A Pod is like a piece of sheet music that defines which instruments (containers) should play together in harmony. The conductor (Kubernetes) ensures that the right combinations of instruments (containers) are playing together.
Stage (Nodes): The stage represents the physical or virtual machines where the musicians (containers) perform. Kubernetes manages these stages (nodes) and assigns musicians (containers) to them based on availability and resource requirements.
Instruments (Images): Musicians use instruments to create music. In Kubernetes, these instruments are represented by container images. Each musician (container) uses a specific instrument (image) to perform its part. The Kubernetes orchestra ensures efficient resource allocation, scalability, and high availability for your data warehouse. It allows you to easily manage and scale your data infrastructure, optimizing resource utilization and reducing operational complexity. This approach aligns well with modern DevOps practices, streamlining deployment, automation, and monitoring. By using Kubernetes, you can build a robust, flexible, and cost-effective data warehouse with ByConity. If you'd like to learn more about Kubernetes visit https://kubernetes.io

What Can I use it for?
Here are some use cases for deploying ByConity with Kubernetes

Live data statistics dashboard
System link monitoring
ETL calculation
Real-time data access
Behavior log analysis And much more! Now, let's start our deployment method. For this post, we're going to assume you have some kind of experience with Kubernetes. There are a few things we need to have ready first before we begin. How to Deploy ByConity Locally Before diving into the full deployment process, have all your prereqs ready to go. Prerequisites:
A managed Kubernetes Service like Azure, Google, or Digital Ocean. I'll be using an AWS EKS cluster in this example. Choose the one that fits your or your team/organization's needs.
Install and set up kubectl in your local environment.
- a command-line utility used for interacting with Kubernetes clusters.
Install Helm in your local environment. a package manager for Kubernetes that simplifies the deployment and management of containerized applications, services, and resources in Kubernetes clusters.
Install Kind and Docker. Steps:
Navigate to the ByConity Deployment Documentation and head over to Deploy ByConity in Kubernetes. In this post, we're going to be using the local deployment demo version. If you have your own self-built Kubernetes cluster, you'll find those instructions on the same doc.

Start by cloning the ByConity deployment code from GitHub: git clone git@github.com:ByConity/byconity-deploy.git cd byconity-deploy

git clone git@github.com:ByConity/byconity-deploy.git
cd byconity-deploy

Open up your IDE and let's check out the .yaml file we'll be working with. In this example, we'll use values.yaml in the k8s folder(examples -> k8s -> values.yaml). This YAML-formatted file already has default values for ByConity. If you decide to deploy your own self-built cluster, you can declare variables to be passed into your templates. Afterwards, replace the storageClassName.

Use Kind to configure a local Kubernetes cluster. Note that Kind is not intended for production use.

kind create cluster --config examples/kind/kind-byconity.yaml

Test to ensure the local Kind cluster is ready:

kubectl cluster-info

Initialize the ByConity demo cluster:

# Install with fdb CRD first
helm upgrade --install --create-namespace --namespace byconity -f ./examples/k8s/values.yaml byconity ./chart/byconity --set fdb.enabled=false

Then install the FBD Cluster

# Install with fdb cluster
helm upgrade --install --create-namespace --namespace byconity -f ./examples/k8s/values.yaml byconity ./chart/byconity

Wait until all the pods are ready:

kubectl -n byconity get po

Now you can try it out:

kubectl -n byconity exec -it sts/byconity-server -- bash
root@byconity-server-0:/# clickhouse client
172.16.1.1 :)

Let's test out a query

To delete or stop ByConity from your Kubernetes cluster, you can use the following command:

helm uninstall --namespace byconity byconity

By following these steps, you can deploy ByConity with Kubernetes and harness its powerful data warehousing capabilities within your own environment.
Join our community on Discord to meet developers and stay updated with the latest releases.

WFH: Automated plant monitor! Part 1

Josh Alphonse — Fri, 14 Aug 2020 20:47:37 +0000

So I've been working from home for the last few months and I've been looking to get into a new space in tech. To start this off I crawled my way into IOT. I was amazed with all of the new IOT products coming out and they inspired me to create my own!

I remember back when I was in college a professor of mine introduced the Raspberry pi to my class. We built simple web servers and I honestly didn't revisit the device till now and that was years ago! So here we are, now in 2020! I've always wanted to grow my own herbs but I'm also lazy when it comes to maintaining plants. So I decided to build a plant monitor with a Raspberry pi 4 to help.

To get started with part 1 I collected a few items:

Raspberry Pi 4
DH11 Humidity Sensor
Mouse -Keyboard -Monitor -Power Supply -Python version 2.7 and up

Cool so now that we have our supplies lets boot on our raspberry Pi and use the text editor of our liking. I'm using VS Code!

First step is to connect your DH11 sensors to the correct pins on your rapsberry pi. In our case choose pin 1,4 and 6.

Next lets add some code!

import RPi.GPIO as GPIO
import Adafruit_DHT
import time 

dht_sensor = Adafruit_DHT.DHT11
dht_pin = 14

y1_channel = 21
GPIO.setmode(GPIO.BCM)
GPIO.setup(y1_channel, GPIO.IN)

while True:
    humidity, temperature = Adafruit_DHT.read_retry(dht_sensor, dht_pin)
    moisture_reading = GPIO.input(y1_channel)
    if moisture_reading == GPIO.LOW:
        moisture = "Sufficient Moisture."
        moisture_db = 1
    else:
        moisture = "Low moisture, irrigation needed"


    print("Sensor data: Humidity = {0:0.2f} % Temp = {1:0.2f} deg C moisture: {2}".format(humidity, temperature, moisture))



    time.sleep(10)

I installed packages to read the GPIO sensors. Keep in mind that these are digital sensors. If you do have an analog sensor then you need an additional part to convert to digital.

The code is pretty straight forward but as we go to step two things will start to pick up.

Till next time!

WFH DAW STYLE

Josh Alphonse — Thu, 09 Apr 2020 20:34:20 +0000

It's been about a mont since we've been sent to work from home because of the global pandemic caused by Covid-19. Businesses have shut down, developers have been laid off and it's hard to get certain supplies. Although these are not the best circumstances, there are always things we can do to have fun while we're at home! Music is one of the best tools you can use to improve your mood while we're in these gloomy times. This week I decided to take things a bit further with my passion for music and decided to start to working on my own DAW.

A Digital Audio Workstation or DAW for short, is commonly used by musicians, mix engineers and producers to create their projects. There are a number of great softwares like protool, logic, ableton. I use theses all but they all cost hundreds of dollars. Some of us are inside forced out of work and can't afford to buy a DAW. Kids also can't go to school, so why not help them exercise a new hobby? This lead me to build my own web app called Algorhythm, a DAW for the web browser.

For this project I'm using React.js, Redux, Rails and some NPM Packages(midi-sounds-react is where the instruments are from). Most DAWs come with stock instruments, MIDI Capabilities, a BPM Counter as those are some basic tools to get started.

So we have a drum machine that works off a grid and a keyboard. Algorhythm comes packed with over 1,500 sounds thanks to Midi-react-sounds.

import React, { Component } from "react";
import Pads from "../Components/Pads";
import Controls from "../Components/controls";
// import Bpm from "../Components/Bpm";

import "../App.css";
import MIDISounds from "midi-sounds-react";

class Sequncer extends Component {
  state = {
    drumSnare: 15,
    drumBass: 5,
    drumHiHat: 35,
    drumClap: 24,
    pads: [
      [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0],
      [0, 0, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0]
    ],
    bpm: 108,
    start: 1 / 16,
    numPads: 4,
    playing: false,
    position: 0,
    selectedDrum: [5, 46, 145, 35],
    volume: [0.5, 0.5, 0.5, 0.5],
    mute: false,
    open1: false,
    open2: false,
    userPads: [],
    loaded: true
  };
}

The sequencer has a few rows on the grid and we can initialize what 'pads' we need active within state. I also initialized some other parameters like volume and BPM to start the user with some default settings.

The next features I want to add is the ability for users to join different rooms or sessions with one another. It would be great for collaborations especially during the quarantine. A record and export feature will be in the works as well. I'm having a lot of fun with this project and excited to see where it goes.

A Few Lessons I've Learned As A Developer Advocate (So Far...)

Josh Alphonse — Mon, 24 Feb 2020 20:44:35 +0000

I don't think a year ago I knew what developer relations was or how one even gets into this role. Although I haven't been in the role for a long time, so much has happened that has allowed me to learn quickly.

To Start

My official role is a developer advocate! For those reading this that don't know what developer advocacy entails I'll fill you in. As a developer advocate I have the privilege of building relationships and engaging with the dev community. This isn't a traditional engineering role, but trust me developer advocates are engineers. You need a strong technical background, relevant experience or even shipped an application to prod.

I went to college and got a degree in computer science but at that time I didn't feel a sense of community. I started to feel the community I wanted to be apart of when I attended a bootcamp for a few months. Developers come in all different shapes and sizes and come from unique backgrounds. Day by day the tech industry is getting more diverse and with that so are our engineering need and wants! Having a developer relations team is one of the hottest trends right now because the value in having one is blatant. Companies realize that it's going to take more than just documentation, forums or blogs to communicate with their consumers. They need dedicated engineers that can be on the ground level to engage with consumers directly. Word of mouth is a powerful tool and the way advocates communicate will shape a community.

Developer advocates act as the bridge that connects the people to the product+ and vice versa. In theory, a developer advocate practices three main disciplines.

Those are:
-engineering
-marketing
-community

These three disciplines are used to fill any gaps the technical consumer may have with the product. So with that being said lets jump into the three lessons I've learned!

Build Something Real!

Anyone that works in tech from product managers to engineers, know that this career will always require you to learn something new. Same goes for developer advocates. Just having an understanding of why your product works isn't enough. You have to advocate for the developers so you must gain an understanding of their experience. Keep building example applications but make them interesting and make them related to yourself! I'm a musician and I've built a number of applications themed around my passion. Your engineering skills come into play as you must think outside the box and build something meaningful and engaging for your users! Build applications that have a purpose. Your developers will build accordingly

Community Is KEY!

Advocates shape, educate and facilitate the community. When you're done making an example application, you can take off your engineering hat and put on your community cap. Make a blog post and share how you built the example application. Post the code, explain why you implemented certain functions and try to use best practices! You can take it a step further by creating video content or putting together a presentation. All the content you create is valid to use as material for your meetups and conferences. The way you interact with your community effects the marketing of the product you are representing. With this role you become the face of your product's community and you have the ability to brand yourself!

Be Visible!

It's really convenient to just go straight home after work, or crawl to your apartment after a day at a conference. It's your job to be seen, and theres no better places than meetups, conferences and happy hours. Loosen up and go to a variety of meetups with different topics and audiences. You'll be around like minded people, gain exposure and make friends that can shift your perspective. Being with other developers can spark conversations that will help your journey.

Dont Be An A-Hole!

Just be a good person! Simple as that. Although this role is very technical you are definitely required to use more of your soft skills throughout your journey. Become that go to person for your product and brand yourself!

I haven't had this role for long but I am adjusting to wearing many hats and I'm grateful to be where I am!