A blog about my internship at Sympl

Aron @ Sympl


### Mon 15 - Wed 17 May:

#### Final Week

This is my last blogpost for my internship since it ends on the 17th of this week.

#### FFmpeg & Laravel

I wasn't quite ready with the integration of the code into the Laravel project. Most of it was there but videos weren't saved to the database itself yet.

#### Displaying Stats with Raspberry Pi

I did however succeed to boot the small computer by logging into it through SSL. I also succeeded in finding out how it could cycle through several displays containing important sympl data about for example sales.

The Raspberry Pi is now connected to a monitor in the coffee and is cycling through the displays so my colleages can see important info while waiting for their coffee.


Intership @ Sympl Week 15


### Mon 8 - Fri 12 May:

#### Implementation into the Laravel Backend

After taking some time getting familiar with Laravel I started moving my code I had into a smaller separate project intro the Laravel backend project. A big difference was the way the data came in.

In my own small project I had put the images and audio into local folders and then used the path to the files. In the backend the files are stored in a database. The database also contained the file for every client.
This meant I had to make sure that clients could only access their data and not the data from another client. I also had to make sure the data was correctly loaded from the database.

The project also ran on Docker containers. This meant I had to get familiar with Docker as well since I had never used it thourougly before.

#### Sandbox environment

The Laravel project luckily had a sandbox environment in which I could test out my code. This was very useful because I could test out my code without having to worry about breaking the project.

#### Raspberry Pi

At the end of the week I was also told a small project was coming up with a Rasperri Pi. This is a small but powerful computer that can be used for all kind of things. I thought the project was really interesting since I was looking into buying a Raspberry Pi computer to experiment with myself.


Intership @ Sympl Week 14


### Mon 2 - Fri 5 May:

#### The Final Hiccup

There was one more small issue with the video. If a phrase on the video exceeded the width of the video it would just be cut off. I had to come up with a way to detect the width of the video and put the text on a new line if the width was exceeded. I also needed the solution to take the font type into account because not all font types are created equally. Some are more wide than others.

#### The Final Solution

After some research I wrote following code that would take the font type, font size, text and maximal width as parameters and return the text with new lines if the width was exceeded.

```javascript
function wrapText($text, $maxWidth, $fontSize, $fontPath) {
        $words = explode(' ', $text);
        $lineWidth = 0;
        $wrappedText = "";

        foreach ($words as $word) {
            $box = imagettfbbox($fontSize, 0, $fontPath, $word);
            $wordWidth = $box[2] - $box[0];

            if ($lineWidth + $wordWidth < $maxWidth) {
                $wrappedText .= " " . $word;
                $lineWidth += $wordWidth;
            } else {
                $wrappedText .= "\n" . $word;
                $lineWidth = $wordWidth;
            }
        }

        return $wrappedText;
    }
```

#### The Next Step

Now that I had a working program with all bugs fixed I gave a demo to the full sympl team. All of them really like the software I wrote and agreed to implement it into the sympl software.

The sympl backend was mainly in PHP Laravel, which I had never worked with before. I was given a week to learn the basics of PHP Laravel and explore the sympl backend to get familiar with it.


Intership @ Sympl Week 13


### Mon 24 - Fri 28 April:

#### Finetuning the FFmpeg script

While doing research into training a model and implementing it I stumbled upon a solution in the Cloudinary documentation. The Cloudinary service also had a way to let a powerful AI scan the image and find out the most interesting parts of the image.

When the AI had found the most interesting aprts of the pictures I could use the coordinates as parameters for the image cropping. Once it was implemented I was happy with the result. It needed some more funetuning but it was a good start.

#### Close to finished product

I was very close to having a finished product. Below is a copy of the command that is built after taking into account all the parameters that the user has set.

```bash
ffmpeg -loop 1 -t 8 -i https://res.cloudinary.com/dvf9otlzi/image/upload/v1687117667/szanlcdnidmmd5qitsst.jpg -loop 1 -t 8 -i https://res.cloudinary.com/dvf9otlzi/image/upload/v1687117669/uio1befhlwemn1lokfa5.jpg -loop 1 -t 8 -i https://res.cloudinary.com/dvf9otlzi/image/upload/v1687117671/wcgteqrjcayjxfltcrvp.jpg -loop 1 -t 8 -i https://res.cloudinary.com/dvf9otlzi/image/upload/v1687117673/l9g8y28kko0fg12vvez3.png -loop 1 -t 8 -i https://res.cloudinary.com/dvf9otlzi/image/upload/v1687117675/a6afipmlwn3htw59iohj.png -i logo/logo.png -i audio/track.mp3 -filter_complex "[0]scale=540*10:960*10:force_original_aspect_ratio=decrease,pad=540*10:960*10:(ow-iw)/2:(oh-ih)/2,
            zoompan=z=pzoom+0.001:x=iw/2-iw/zoom/2:y=ih/2-ih/zoom/2:d=1:s=540x960,
            drawbox= x=0:y=0:w=iw:h=82:color=#007156@1:t=fill,
            drawbox= x=0:y=ih-82:w=iw:h=82:color=#007156@1:t=fill,
            drawbox= x=0:y=0:w=iw:h=ih:color=#007156@1,
            drawtext=text=WANTED:x=(w-text_w)/2:y=32:fontsize=38:fontcolor=white:fontfile=fonts/droid-sans-bold.ttf,
            drawtext=text='Inspecteur Autokeuring':x=(w-text_w)/2:y=(h-text_h)-32:fontsize=30:fontcolor=white:fontfile=fonts/droid-sans-bold.ttf[v0]; [5]scale=100:100[logo_scaled]; [v0][logo_scaled]overlay=25:100[v0]; [1]scale=540*10:960*10:force_original_aspect_ratio=decrease,pad=540*10:960*10:(ow-iw)/2:(oh-ih)/2,
            zoompan=z=pzoom+0.003:d=1:s=540x960,
            drawbox= x=0:y=0:w=iw:h=ih:color=#007156@1,
            drawtext=text=' Deze tekst is
normaal veeeel te
lang':x=(w-text_w)/2:y=(h-text_h)*0.75:fontsize=35:fontcolor=white:box=1:boxcolor=#007156@1:boxborderw=10:fontfile=fonts/droid-sans-bold.ttf[v1]; [5]scale=100:100[logo_scaled]; [v1][logo_scaled]overlay=25:25[v1]; [2]scale=540*10:960*10:force_original_aspect_ratio=decrease,pad=540*10:960*10:(ow-iw)/2:(oh-ih)/2,
            zoompan=z=pzoom+0.001:x=iw/2-iw/zoom/2:y=ih/2-ih/zoom/2:d=1:s=540x960,
            drawbox= x=0:y=0:w=iw:h=ih:color=#007156@1,
            drawtext=text=' Aantrekkelijk
salaris':x=(w-text_w)/2:y=(h-text_h)*0.75:fontsize=35:fontcolor=white:box=1:boxcolor=#007156@1:boxborderw=10:fontfile=fonts/droid-sans-bold.ttf[v2]; [5]scale=100:100[logo_scaled]; [v2][logo_scaled]overlay=25:25[v2]; [3]scale=540*10:960*10:force_original_aspect_ratio=decrease,pad=540*10:960*10:(ow-iw)/2:(oh-ih)/2,
            zoompan=z=pzoom+0.003:y=7200:d=1:s=540x960,
            drawbox= x=0:y=0:w=iw:h=ih:color=#007156@1,
            drawtext=text=' Mooie
werkomgeving':x=(w-text_w)/2:y=(h-text_h)*0.75:fontsize=35:fontcolor=white:box=1:boxcolor=#007156@1:boxborderw=10:fontfile=fonts/droid-sans-bold.ttf[v3]; [5]scale=100:100[logo_scaled]; [v3][logo_scaled]overlay=25:25[v3]; [4]scale=540:960:force_original_aspect_ratio=decrease,pad=540:960:(ow-iw)/2:(oh-ih)/2,
            drawtext=text=Solliciteer nu!:x=(w-text_w)/2:y=(h-text_h)/2+150:fontsize=38:fontcolor=#007156:fontfile=fonts/droid-sans-bold.ttf[v4]; [5]scale=250:250[logo_scaled]; [v4][logo_scaled]overlay=(main_w-overlay_w)/2:(main_h-overlay_h)/2[v4]; [v0][v1]xfade=transition=smoothright:duration=0.5:offset=2.5[f0]; [f0][v2]xfade=transition=distance:duration=0.5:offset=5[f1]; [f1][v3]xfade=transition=smoothright:duration=0.5:offset=7.5[f2]; [f2][v4]xfade=transition=pixelize:duration=0.5:offset=10[f3]" -y -map "[f3]" -r 25 -pix_fmt yuv420p -vcodec libx264 output-no-audio.mp4
```

And here is the output video created with the command above:

<iframe
  width="404"
  height="719"
  src="https://www.youtube.com/embed/HRAEknEjzh8"
  title="Sympl Generated Add Video"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowfullscreen
></iframe>


Intership @ Sympl Week 12


### Mon 17 - Fri 21 April:

#### Finetuning the FFmpeg script

The project was now producing a video with a correct aspect ratio. The only problem was that when images were used that didn't have the correct dimensions, the video would still be stretched. FFmpeg had a way to crop pictures but this didn't end up working the way I wanted to.

#### More research and a solution

I did some more research and ended up stumbling on Cloudinary. Cloudinary is a service that allows you to upload images and videos and then manipulate them with a simple URL. This sounded like a perfect solution for my problem.

I started reading documentation on Cloudinary and how to implement in intro PHP. After a few tries I managed to get it working and I was able to crop images to the correct dimensions.

#### Another problem arises

The cropping worked perfectly but also created another issue. The images were cropped to the center. Which meant that if a person was present in the image, they could be cropped out. I looked into training a model to detect faces in images.


Intership @ Sympl Week 11


### Mon 3 - Fri 21 April:

#### Getting Started With the Project

The FFmpeg project was difficult to get started with. Since both PHP and FFmpeg were completely new to me, a lot of errors came up and I did not always find a way to fix them. I had to do a lot of research, trial and error. The code had to be rewritten several times since I kept finding ways to improve it.

This took me a lot more time than I expected. I wanted to include randomized transitions between pictures and much more other features which cost me a lot of time as well.


Intership @ Sympl Week 9 - 10


### Mon 27 - Fri 31 March:

#### Learning FFmpeg

To learn FFmpeg I started by visiting the official FFmpeg website to access documentation. I familiarized myself with the basic concepts and components, such as codecs, formats, and filters.

I explored the command-line interface (CLI) and experimented with various commands in a sandbox environment I created for converting and processing multimedia files. I browsed online forums, tutorials, and Stack Overflow discussions for practical examples and troubleshooting tips. I experimented with various FFmpeg features and options to gain hands-on experience and a deeper understanding.

#### Learning PHP

I did not have much experience with PHP. I had only used it once in the past so this language was quite new for me. Luckily I quickly realized that PHP is very similar to JavaScript. I was able to pick up the basics of the language quite quickly. I started by reading the official PHP documentation and then I explored the PHP language reference. I also watched a few YouTube tutorials to get a better understanding of the language.

#### Combining FFmpeg & PHP

After learning the basics of both technologies I started experimenting learning to combine both. Initially I started by creating a simple PHP script that would execute a FFmpeg command. I then started to add more functionality to the script. I added a form that would allow the user to put images in a directory and then execute a FFmpeg command on those images.


Intership @ Sympl Week 8


### Mon 20 - Fri 25 March:

#### Automating Video Ad Creation Intro

This week, I was tasked with finding a way to automate the process of creating video ads for our customers. Previously, video ads were made by external video editors, but we wanted to streamline the process and enable customers to generate their own videos using code alone. In the following blog posts, I will share my journey in achieving this goal.

#### Understanding the Problem

Before diving into the solution, it was crucial to understand the problem and the requirements. I had a meeting with my mentor, who explained the current process and the desired outcome. We needed a solution that would:

- Allow customers to generate video ads without involving third parties
- Be customizable according to the customers' preferences
- Be easy to use and integrate with our existing platform

#### Researching Existing Solutions

With a clear understanding of the problem, I began researching possible solutions. I explored several video editing libraries and APIs that could be used to create a video generation tool. After evaluating several options, I stumbled upon FFmpeg, a widely-used video processing library, in combination with PHP to create a customizable and efficient video generation service.

#### What is FFmpeg?

As mentioned before, I decided to try to use FFmpeg. FFmpeg is an open-source software project consisting of a vast suite of libraries and programs for handling video, audio, and other multimedia files and streams. It is widely used for various tasks, including video transcoding, format conversion, basic editing, and streaming. FFmpeg is highly extensible and customizable, making it an ideal choice for a wide range of multimedia processing tasks.


Intership @ Sympl Week 7


### Mon 13 - Thu 16 March:

#### Implementing a Country Prefix Dropdown

The following task assigned to me was to add a feature that would enable new users to select their country prefix for phone numbers from a dropdown menu when registering a new account. This was meant to enhance the user experience and make it more convenient for them to input their phone numbers. In this post, I will walk you through the the beginning of the process of how I achieved this, showcasing a visually appealing dropdown with flags representing each country.

#### Step 1: Gathering Data on Country Prefixes and Flags

Before diving into the code, I spent a considerable amount of time researching phone prefixes for every country and the format they are typically written in. For instance, a Belgian phone number appears in the following format: +32 479 47 26 63. I also collected flag images for each country to make the dropdown visually appealing.

#### Step 2: Creating a Data Structure for Country Prefixes and Flags

To store the gathered data, I created a TypeScript interface and an array of objects containing the country name, prefix, and flag.

```typescript
interface Country {
  name: string;
  prefix: string;
  flag: string;
  mask: string;
}

const countries: Country[] = [
  {
    name: 'Belgium',
    prefix: '+32',
    flagUrl: '🇧🇪',
    mask: 'xxx xx xx xx',
  },
  // ... other countries
];
```

#### Step 3: Implementing the Dropdown Component and Phone Number Input Mask

Next, I created a dropdown component. I also had to make sure that when a client changed the country prefix in the dropdown, the prefix and the mask would be reflected in the input field. To achieve this, I used a `useState` hook to store the selected country prefix and passed it to the input field as a prop.

#### Step 4: Integrating the Dropdown Component with the Phone Number Input

Finally, I integrated the CountryDropdown component with the phone number input field in the form, updating the phone number's input mask based on the selected country.

### Fri 17 March:

#### Step 4: DDeducting Phone Prefixes from Timezone

When the dropdown was finally implemented, we thought it would be even more user friendly to have the country prefix automatically selected based on the user's location. I was given the freedom to implent it however I wanted.
I started doing some research on how to deduce the users prefix from their location.

First things first, let me explain the existing code. We have a function getCountryForTimezone from a library called ct (Country and Timezone) which returns the country information based on the time zone. Here's the code snippet:

```typescript
const locationInfo = ct.getCountryForTimezone(
  Intl.DateTimeFormat().resolvedOptions().timeZone
);
```

Now, with the user's timezone, I needed to find the corresponding country and deduce its phone prefix. I used the useEffect hook from React to handle this task:

```typescript
import { useState, useEffect } from 'react';
import { COUNTRIES } from './country-data'; // Import the COUNTRIES array from the respective file

// ...

const [country, setCountry] = useState(null);

useEffect(() => {
  if (locationInfo !== null) {
    COUNTRIES.find((country) => {
      if (country.key === locationInfo.id) {
        setCountry(country);
        console.log(country);
        console.log(locationInfo);
      }
    });
  }
}, []);
```

Here, I imported the COUNTRIES array, which should contain the information about the countries and their respective phone prefixes. Then, I used the find method to iterate through the COUNTRIES array and find the country that matches the locationInfo.id. Once found, I updated the country state using the setCountry method, and logged the information to the console for debugging purposes.


Intership @ Sympl Week 6


### Mon 6 March:

#### Finishing up the ad variants page

Today I finished the last few details for the Instagram and Facebook ads (correct icons, getting the aspect ratio right, etc.).

### Tue 7 - Fri 10 March:

#### Sorting Candidate Applications with scalability

After getting my pull request approved. I was assigned another task by my mentor: to sort through the applications of candidates who had applied for our clients vacancy. The objective was to efficiently manage the applications and streamline the hiring process. With a strong inclination towards learning and optimizing workflows, I decided to write code that would sort these applications by date. And to make sure the system would be adaptable to future requirements, I took scalability into account, giving myself the option to add more sorting methods as needed.

To tackle this challenge, I started by designing the data structure for candidate applications. I used an array of objects, where each object represented a single candidate's application with relevant information like their name, email, resume, and the date they applied.

Next, I implemented a sorting function to arrange the candidate applications by date. By default, the function sorted the applications in descending order, ensuring that the most recent applications appeared first. This allowed the hiring team to prioritize reviewing newer applications.

```ts
function sortByDate(applications: Application[]): Application[] {
  return applications.sort((a, b) => {
    const dateA = new Date(a.date);
    const dateB = new Date(b.date);
    return dateB.getTime() - dateA.getTime();
  });
}
```

With the basic sorting function in place, I then focused on making the solution scalable. I wanted to provide the ability to add more sorting methods in the future, like sorting by candidate's name, skills, or other relevant criteria.

To achieve this, I created a higher-order function that would take a sorting method as an argument and return a new function that sorted the applications accordingly. This approach made it easy to add new sorting methods without modifying the existing codebase.

Here's a simplified version of the higher-order function:

```ts
type SortMethod = (a: Application, b: Application) => number;

function createSortFunction(
  sortMethod: SortMethod
): (applications: Application[]) => Application[] {
  return (applications: Application[]) => {
    return applications.sort(sortMethod);
  };
}

const sortByDateFunction = createSortFunction((a, b) => {
  const dateA = new Date(a.date);
  const dateB = new Date(b.date);
  return dateB.getTime() - dateA.getTime();
});
```

This approach allowed me to easily add more sorting methods while maintaining a clean and modular codebase.

#### Application demos

During this week a few demos were given to the rest of the Sympl team. Mainly the AI enchancements were highlighted. Which were received with a lot of enthousiasm by the team.


Intership @ Sympl Week 5


### Mon 27 Feb:

#### Implementing the prompt in the targeting page

The goal today was to implement the prompt in the targeting page so that the type of the function could be set.

### Tue 28 Feb:

#### Ad variants for Instagram and Facebook reels

I also worked on the ad variants for Instagram and Facebook reels. I had to create a new ad variant for reels. For this I based myself on the
already existing ad template for TikTok.

### Remainder of this week:

#### Backend Fix

A problem arose the next day. The type I had chosen for the Facebook and Instagram reel ad variants was not recognized, this made it so that the new ad variants couldn't be saved.
This was fixed by implementing the correct types in the backend which allowed the new ad variants to be saved.

#### Styling the new ad variants

The new ad variants were based on the TikTok add template. The problem with this was that Reels look more like Instagram stories than TikTok videos.
This meant that the styling of the new ad variants had to be changed to make them look more like Instagram stories.


Intership @ Sympl Week 4


### Invoicing issues

Users can view their invoices in the Sympl app. However, users were only able to see their 20 most recent invoices.
A pagination feature had to be added. Easier said than done. At first I had to do some more comprehensive reading of the code base. I had to understand how the pagination was implemented in the other parts of the app.
After that, I had to figure out how to implement it in the invoices section.

### Blog

#### Next.js

At the end of this week I took some time to work on my blog. At this moment this blog is written using next.js and is automatically deployed to production every time my main branch is updated.


Intership @ Sympl Week 3


### Prompt Engineering (first half of the week)

First, a little bit of background on prompt engineering. Prompt engineering is the process of creating a prompt that will be used to generate the output.
The first step in the process is to define the prompt. The prompt is the input that the model will use to generate the output.
The prompt is a string of text that is fed to the model. The prompt can be as simple as a single word or as complex as a paragraph.
The prompt can be a question, a statement, or a combination of both.

I was given the assignment to create a prompt that would deduce information from function titles.

An example of a prompt I used to deduce certain information from a function title is:

```js
const { Configuration, OpenAIApi } = require('openai');

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

const response = await openai.createCompletion({
  model: 'text-davinci-003',
  prompt:
    'The following is a job title and the language it is written in, if uncertain of the language the fallback is english:\n\n{funtionTitle}\nLanguage:',
  temperature: 0,
  max_tokens: 6,
  top_p: 1,
  frequency_penalty: 0,
  presence_penalty: 0,
  stop: ['\n'],
});
```

The process of getting the prompt just right is a bit of a trial and error process. I had to try different prompts to see which one would give me the best results.

### Automatic Mail Templates (second half of the week)

Sympl has a system that when an applicant responds to a vacancy the system will automatically send a mail to the applicant.
Default mail templates are provided by Sympl, but these templates are not always the best fit for the vacancy and/or situation (e.g. applicants don't always include a resume).
I had to implement a way for users to create their own mail templates and make it possible for a user to select a custom template when responding to a vacancy.

I did this in cooperation with the backend team who provided me with an endpoint that I could use to get the custom templates from the database.


Intership @ Sympl Week 2


### The Team

In this first week I got to meet the Sympl team, learned to work with their amazing coffee machine
and got to know the office. I also got to know the team's culture and how they work.

### Atlassian, Jira and Bitbucket

The main tools used by de devs at Sympl are Atlassian, Jira and Bitbucket. I got to know
these tools and how they work. I also got to know the team's workflow and how they work with
these tools.

### SaaS

I also got to know the company's SaaS. I got to know how it works and how it is built. The front end
of the app is built using react, data is fetched from the API using GraphQL.

### The first tasks

The first tasks I got to work on were related to the company's website. I got to work on the
company's website, designed 2 new templates for vacancies. The content for those vacancies can be
automatically generateed using AI.

Beside that I also had some documentation reading to do on next.js for example. I was also given some material on recruitment.
