DEV Community: FlyNestor

Create a video with auto-generated voice-overs with an API call

FlyNestor — Thu, 28 Apr 2022 13:52:06 +0000

If you want to generate videos with voice-overs and to skip the repetitive tasks of video creation, follow this tutorial.

In this tutorial we are going to call an API with Python.

On the website Rollideo, you can launch the video generation directly from the home page, or use the APIs for more automation.

To use the Rollideo APIs:

Step 1: Create an account to get a free API key
Step 2: put your API key in the following code.

import requests, json, time

APIKEY = 'YOUR SECRET KEY HERE'
voice1 = "Joanna"

text1 = "A super easy tool to automatically create videos with auto-generated voice-overs and the exact subtitles. Example of a video sequence with " + voice1 +"'s voice."

picture1 = 'https://i.postimg.cc/3r4RL5YX/ocean1.jpg'

data = {
    'text_segments': [
   {
    'api_source_type': 'picture',
    'picture': picture1,
    'textforvideo': text1,  
    'voice_id': voice1  
   }
  ]
}

headers = {'x-api-key': f"{APIKEY}"}
response = requests.post('https://rollideo.com/create/video', headers=headers, json=data)
data2 = response.json()
print(data2)
launched = data2.get("launched", "ko")

if launched == "ok":
    # Use the Polling API endpoint to find out the status the above request /create/video.
    for i in range(1000):
        time.sleep(10)
        print(i)
        response2 = requests.post('https://rollideo.com/task/video', headers=headers, json=data2)
        success = response2.json().get("success", "not yet")
        if success == "ok" or success == "ko":
            print(response2.json())
            break
else:
    print("The launch of the task has failed")
    print(data2.get("message"))

With a free account, you can create a video with one sequence.

You can upgrade your account to create longer videos with many sequences.

Crop a picture automatically with a fixed ratio - Python example

FlyNestor — Sun, 27 Feb 2022 11:21:55 +0000

There is a large number of occasions where you have to crop a picture selected by the user of a website.

I have already made an article on how to manually crop a picture with JavaScript.

In this article I will show how to automatically crop a picture with Python in the back-end. This code allows automatic video creation from a text and a picture on my website rollideo.com.

In this example the cropped picture will have a fixed ratio of 16:9. The user can choose a picture of any ratio as an input. The output will always be 16:9.

I have decided to offer a centered crop as a first option because usually the most interesting part of a picture is in the center. A more sophisticated code can detect faces or other parts in a picture. You can also add the option to crop on one specific corner or other crop possibilities.

#This code will automatically crop the picture to a ratio of 16:9.
from PIL import Image

with Image.open(path_file_temp) as image:
    width, height = image.size
    if width/height == 16/9:
        if width != 1280:
            image_crop = image.resize((1280, 720))
        else:
            image_crop = image
    elif width/height > 16/9:
        offset  = int(abs(width-16/9*height)/2)
        image_crop1 = image.crop([offset,0,width-offset,height])
        image_crop = image_crop1.resize((1280, 720))
    else:
        offset  = int(abs(9/16*width-height)/2)
        image_crop1 = image.crop([0,offset,width,height-offset])
        image_crop = image_crop1.resize((1280, 720))

    file_source = random_id + '.png'
    path_file_crop = os.path.join(UPLOAD_FOLDER, file_source)              
    image_crop.save(path_file_crop, format="png")

A warning about Pillow
Pillow is using External Libraries to process the different format of images (.jpg .png .webp etc).

To test the image processing code, you have to make a test with all the format of image that you want to allow. If Image.open failed it's probably because there is some missing external libraries.

For more details, see the Pillow installation guide.

Once the tests are done with the different formats allowed, you should list the allowed image format in the user guide, and also add warning messages "The image format X is not supported".

Display a sticky feedback box with Vue.js

FlyNestor — Tue, 02 Nov 2021 08:55:51 +0000

One of the first thing to implement with a MVP (minimum viable product) is a feedback form to know which feature the users are interested in.

The feedback form is also useful if a user has found a bug.

At first I have just made the contact form. The link to the contact form is in the footer of the Home page. I have got some feedbacks with that form but I want to get more. Not all the users are scrolling all the way to the footer section.

What are sticky elements?
Sticky elements are the features that appear to follow you down the page as you scroll. You can see an example on the bottom right corner of my website Rollideo.

You can put a text like “Feedback” or “Need help?” on the sticky element.

To display a sticky element with Vue.js, you need to install vue-sticky-directive.

In the template, you can include the container element sticky-container at the beginning.

<template>
<div>
<div sticky-container>

If you want the sticky element to be displayed at the bottom of the webpage you can put the sticky element after the footer section.

In the sticky element I have included a link to the contact page.

<div v-sticky sticky-side="bottom">
<div align="right" class="row-full">
<span> 
<a v-bind:href="apiUrl + '/contact'">Feedback</a>  
</span>
</div>
</div>

In my particular case I want the sticky element to be displayed in the bottom right corner of the webpage, so I have added a CSS class row-full with a width of 100vw (100% width of the viewport).

To make the element looks like a box, we can add a span section with a background color and a border. In the CSS it’s defined as .row-full span:first-child.

.row-full{
font-size: 0.75rem;
padding-bottom: 1rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
width: 100vw;
position: relative;
margin-left: -50vw;
height: 25px;
margin-top: 100px;
left: 50%;
}

.row-full span:first-child {
padding: 0.5rem;
background-color: rgb(250, 255, 151);
border-radius:5px;
border:2px solid #c6c2be;
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border-bottom:0;
}

Crop a picture and upload it to the server with Vue.js

FlyNestor — Sun, 31 Oct 2021 07:18:36 +0000

There is a large number of occasions when you have to implement a “select a picture and crop it” feature: for example when a user is uploading a picture of him to customize his profile on a website.

First you need to install vue-cropperjs , a wrapper component for cropperjs.

We will use the method getCroppedCanvas to upload the cropped image to the server. The full documentation about the cropperjs methods is available here.

In the template you can indicate which type of cropper you need. In the example below the cropper has a fixed ratio of 16/9.

<VueCropper 
v-show="selectedFile" ref="cropper" :src="selectedFile" 
:aspectRatio="16/9" :initialAspectRatio="16/9" :autoCropArea="1"
:zoomable="false"
>
</VueCropper>

The replace method is used to rebuild the cropper when you select a file and crop it.

this.$refs.cropper.replace(vm.file);

The getCroppedCanvas method gets a canvas drawn from the cropped image. After you can use HTMLCanvasElement.toBlob to get a blob and upload it to the server with FormData.

Explanation of the terms above:
Blob:
A binary large object (BLOB) is a collection of binary data stored as a single entity. Blobs are typically images, audio or other multimedia objects.

FormData:
To send multipart form data with Axios, you need to use the FormData class.

// Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob`
this.$refs.cropper.getCroppedCanvas({width: 1280, height: 720}).toBlob((blob) => {

              var data = new FormData();
              data.append('cropped_picture', blob, 'cropped.png')
              ...
              axios.post(load_url,data, {
                      headers: {
                     'Content-Type': 'multipart/form-data'
                     }}
                  ).then(response => {
                  …
                 }).catch(error => {
                 console.log(error)
                 })
      /* second parameter mime_type toBlob set image/png as default */
      } /*, 'image/png' */)

You can see an example on my website Rollideo: video generation from a text. This feature allows the user to choose his own picture to generate a video.

Display an animated loading icon with Vue.js

FlyNestor — Sat, 30 Oct 2021 07:36:52 +0000

A throbber, also known as a loading icon, is an animated icon used to show that a software is performing an action in the background (such as downloading content or conducting intensive calculations).

To indicate to the user that the software is working in the background, you can easily put a throbber on a webpage.

With Font Awesome icons you can use the fa-spin class to make an icon rotates as a throbber.

Example of usage from my website Rollideo: On the home page the user can click on a button to generate a video from a text, then a throbber is displayed to indicate that a process is running in the back-end.

In the code bellow the throbber will be displayed if wait_video_generation equals true. On a side note, if you can evaluate the total duration of the the process it’s a good practice to display it to the user.

<div class="box" v-if="wait_video_generation">      
<font-awesome-icon icon="spinner" class="fa-spin" size="3x"  />
</div>

wait_video_generation is set to false when the front-end gets the response from the back-end. Then the throbber is not displayed anymore.

axios.post(load_url,data, {
headers: {
'Content-Type': 'multipart/form-data'
}}
).then(response => {
...
this.wait_video_generation = false
}).catch(error => {
console.log(error)
})

Sometimes you need to disable an element when a process is running in the background, for example to avoid that the user clicks 10 times on the video generation button.

<button :disabled="wait_video_generation" class="button is-info" @click="createvideo">
Launch the video generation
</button>

Lazy loading of a YouTube video with Vue.js

FlyNestor — Wed, 27 Oct 2021 14:05:39 +0000

When you embed a YouTube video on a webpage, you have to think that many users will not click to play the video, some of them want to do something else like reading the contents on the page or whatever features the website is providing.

That’s why it’s a good idea to implement lazy loading on the video. Lazy loading is the practice of delaying the load of resources until they’re actually needed.

By reducing the initial load time, you can offer a better experience to the users and you are also doing SEO since Google takes into account the initial load time.

How to implement this lazy loading on Vue.js?

Example of usage:

<LazyYoutube
max-width="414px"
aspect-ratio="16:9"
thumbnail-quality="standard"
src="https://www.youtube.com/watch?v=CCBpeKLaX3o"
/>

The 'LazyYoutubeVideo' component renders only thumbnail images on pager renders. On clicking the play button the YouTube video gets downloaded.

You can see the behavior on my website where a YouTube video is embedded on the home page: https://rollideo.com/

For more details about the installation, check the github documentation:
https://github.com/andrewvasilchuk/vue-lazy-youtube-video