DEV Community: Ramiro - Ramgen

From Diffusion Models to All Generative Networks: The Power of ControlNet

Ramiro - Ramgen — Sat, 11 Mar 2023 22:16:00 +0000

Introduction

Neural networks have become increasingly popular in recent years due to their ability to learn complex patterns from data. However, designing and training neural networks can be a challenging task, especially when it comes to controlling their behavior. Fortunately, a new architecture called ControlNet has been developed to help control the overall behavior of neural networks. In this blog post, we'll discuss what ControlNet is, how it works, and its potential to be used in other generative models.

A spaceship, hd, artstation, realistic, dramatic light, galactic sky, dark, spaceship, digital art, 4k, trending on artstation

What is ControlNet?

ControlNet is an architecture that involves connecting two copies of any network, one locked and one free for training. The locked copy preserves the original capabilities of the network, while the trainable copy manipulates the inputs conditions of neural network blocks to control the overall behavior of the network. The two networks are connected with zero convolutions, and the convolution weight and bias are initialized at zero, referred to as zero convolutions or 1x1 convolution.

During the training phase, the locked copy preserves the original capabilities of the network, while the trainable copy manipulates the inputs conditions of neural network blocks. If the input of the trainable copy condition is non-zero, the network's gradients are calculated correctly. This ensures that the weights of the convolution increase from zero to successfully control the locked network.

How Does ControlNet Work?

The architecture of ControlNet involves having two copies of the network: one locked and one free for training. The locked copy preserves the original capabilities of the network, while the free copy can be trained and has the capability of modifying the output of the original. The two networks are connected with zero convolutions.

ControlNet manipulates the inputs conditions of neural network blocks so as to further control the overall behavior of an entire neural network. During the initial training steps, the copy control net network does not modify anything in the output of the original. This approach ensures good results right from the beginning of the training. If the results are poor, this may indicate that the training has failed.

ControlNet and Stable Diffusion

When training stable diffusion control net, a small network is employed to capture the latent features of the images with the same convolution shapes. Note that this small network is trained alongside the main, trainable network. As shown in the figure, when using ControlNet with diffusion models, only the encoder blocks are duplicated. With this architecture, we can use ControlNet with almost all stable diffusion versions.

There are a couple of methods to speed up the training process. One is to initially connect only the middle block of the diffusion model. This will speed up the training time. Once reasonable results are achieved, the rest of the decoder layers can be connected. In practice, we can use one of the pre-trained ControlNet networks and fine-tune it for a specific control that we need.

Advantages of ControlNet

The main advantage of ControlNet is that it provides a way to control the behavior of neural networks, which can be extremely useful in a variety of applications, such as image and speech recognition, natural language processing, and autonomous vehicles. By manipulating the inputs conditions of neural network blocks, we can specify the requirements of the network, which can result in more accurate and efficient models.

Another advantage of ControlNet is that it can be used on any model, not just diffusion models. This means that we can explore other potential uses for ControlNet and apply it to other generative models.

Conclusion

ControlNet is an architecture that provides a way to control the input conditions of neural network blocks and control the overall behavior of the network. This architecture can be used to speed up the training process and specify the requirements of the network. ControlNet has the potential to be more than just a way of taming diffusion models; it could be a good general idea for controlling all generative networks. By exploring other potential uses for ControlNet and refining the architecture, we can expect to see it become a standard tool for machine learning practitioners.

What do you think about ControlNet? Do you see any potential limitations or drawbacks to this architecture? Let's discuss in the comments below!

Paper: https://arxiv.org/abs/2302.05543

The Magic of Style Transfer: How it Works and Why it Matters

Ramiro - Ramgen — Wed, 01 Feb 2023 02:37:36 +0000

Welcome to this overview on style transfer, a technique that uses machine learning to transform the style of one image onto another.

You might have seen examples of this before - for example, turning a photograph to look like a painting. But have you ever stopped to think about how it's done?

Why it matters?

At its core, style transfer is all about combining the content of one image with the style of another. But how do we this ? Well, first let me interest you on why it's important to understand style transfer beyond transforming an image into a painting.

One of the key concepts behind style transfer is something called perceptual loss, which is often used in generative adversarial networks and other compute vision problems (such as classification, clustering), this loss is a good approximation on what (us humans) we would see comparing two images.

How it works

First, we pass our images through a classifier network that has been trained on millions of images, like the VGG16 model. Then, we extract the intermediate values of the network in order to calculate two main losses: the content loss and the style loss.

The content loss is the mean squared error loss between the input image features and the content target's features. This preserves the spatial information of the image but doesn't compare style representations. By calculating the content loss, we ensure that the produced image retains the content of the target image.

The style loss is a measure of how similar the features of the style image and the target image are. In order to calculate the style loss, we first need to extract the intermediate values (also known as feature maps) of the classifier network (such as the VGG16 model) for both the style image and the target image. These feature maps can be thought of as representing different "layers" of the image, with the features of early layers (e.g., conv2, conv4) representing finer details and those of later layers (e.g., conv7) representing more abstract patterns.

Once we have extracted the feature maps, we flatten them into vectors and calculate a matrix called the gram matrix. The gram matrix is calculated by taking the dot product of the flattened feature maps with their transpose. This gives us a measure of the correlation or similarity between each feature map. The more similar the feature maps are, the larger the dot product will be, and the more different they are, the smaller the dot product will be. In this way, the gram matrix captures information about the style and texture of the image, but not much about its spatial structure (since we have flattened the feature maps).

Finally, we calculate the style loss by taking the mean squared error between the gram matrix of the style image and the gram matrix of the target image. This gives us a measure of how similar the style of the two images is. By minimizing the style loss during the optimization process (using gradient descent), we can adjust the pixels of the target image to better match the style of the style image.

Want to try out style transfer for yourself? Check out this YouTube video for a tutorial on how to do it!

Transform Your Latent Vector Results: The Power of Slerp Interpolation - Stable Diffusion

Ramiro - Ramgen — Sat, 22 Oct 2022 18:49:46 +0000

Let's do some experimentation with latent vectors in stable diffusion, there is a lot to do in this area so I think this can be a multi part series of articles.

The big change that Stable diffusion introduced or as the original paper puts it Latent diffusion is doing the diffusion over the latents of a VAE and not over the pixels of the image, this makes it very fast, but also allows the manipulation of these vectors to get very interesting results.

I'm using the diffusers Hugging face library to do all of this, so if you want a complete guide on how to use stable diffusion I recommend you start at their docs or some of their excellent notebooks I recommend this one HG diffusers

Dreambooth fine-tuning

I thought it would be more interesting to finetune the diffusion with me and do testings with that rather than a random prompt

If you want to do the same I leave you this video where I show you how to do Dream Booth fine-tuning, plus how inpatining can be used to put your face into any image.

I essentially did the same as the video with more images and more iterations in the training.

Also I changed the gray background for a transparent png, if im not wrong this becomes black when you load the images since transparency gets mapped to 0.

I removed the background of each image with the rembg library, you can also use photoshop or other editing tool.

Using latent embeddings with Hugging face Diffusers
To generate latents we are going to use this function, that essentially generates a tensor of shape (1, pipe.unet.in_channels, height // 8, width // 8) with gaussian noise.

This is the starting latent vector that the Denoising U-Net will iteratively predict the noise to remove and get the final result.



def get_random_latent():
    generator = torch.Generator(device="cuda")
    seed = generator.seed()
    seeds.append(seed)
    generator = generator.manual_seed(seed)

    image_latents = torch.randn(
        (1, pipe.unet.in_channels, height // 8, width // 8),
        generator = generator,
        device = "cuda"
    )
    return image_latents

Then in the pipe function we set this random vector in latents, remember to keep it into a separated variable so you don't generate a new one each time.

Guidance walk, computer do what I want!

Let's start with how we make the diffusion to listen to us, basically what is called guidance, since there is a version of diffusion that is unconditional meaning whatever random vector you give is what you get we need some how tell the computer to do as we wish so we add a component into the noise.

The formula for the guidance is noise_pred = noise_pred_uncond + guidance_scale * (noise_pred_text - noise_pred_uncond) , we are adding a component in predicted loss that comes from the prompt that we add, and we weight that to the unconditional predicted noise.

I purposely leave this a little vague because I don't want this to be a math class and I don't fully understand it yet xD

So to summarise low guidance is computer do whatever you want and high guidance is computer do what I want! Lets test if this is true!

Iterating from 0 to 24 in single steps, and with fixed 50 iterations:

Results are quite interesting, it seems that it becomes more extreme, and follows the prompt more closely, but notice that we add more noise to the image, this makes sense since in the formula we are increasing the weight of one of the predicted noises, and this can throw the balance of the two.

That's quite amazing isn't it, I wonder what happens if you give high guidance and more of iterations lets see it in the next section, I have the suspicion that with more iterations the results of high guidance will improve.

The two forces: guidance scale vs num inference steps

Alright let's generate 50 images, using guidance scale from 1 to 20 and only the pairs, and steps from 100 to 500 in steps of 100

The ranges are chosen for time and with some prior test that I did, if I have more time will do more, but I think with these we'll have enough to get some conclusions.

The code for this part is:



for i in tqdm(range(1, 21, 2)):
    for j in range(1,6):
        with autocast("cuda"):
            images = pipe([prompt], num_inference_steps=j*100, guidance_scale=i,  latents =latents_save['face_to_the_left'] ).images
        grid = image_grid(images, 1, 1)
        grid.save(f'variable_gc_iter_test/results_gs_{i}_it{j*100}.png')

Columns are iteration, and rows are guidance scale

Alright! I think my theory was right, more iterations and a corresponding amount guidance doesn't make a noisy mess and you actually get something really good and somewhat extreme.

This is a very interesting experiment, the iterations where the main driver of change in the resulting images, being 400 one of the more interesting ones, and the guidance made the features of the image more extreme but maintained the overall structure, starting from guidance 3. Seems like below that the networks does whatever it wants.

A voyage through diffusion: Walking the iterations

Now that saw that the primary force of change in the diffusion is the number of steps, lets try lots of different number of steps and see what we get.

I sort of know that all of this is governed by the scheduler but I didn't spend enough time understanding that piece of the puzzle and doing it experimentally is more fun in the next part I gonna try to pay more attention to this and try different schedulers and see how much they impact.

First we gonna walk from 10 to 99 in single steps but instead of looking at an grid with 99 images, lets separate between even and odd ( guidance is set to 7.5 )

The odd ones

The even ones

Is incredibly how much the result change with only the iterations, but at the same time they keep the overall structure in this set of lower iterations, also there are iterations that don't change the result at all and they are not adjacent to each other.

I think that I consistently see better result with even iterations, but it can be subjective, what do you think?

Now let's see bigger numbers! lets walk from 100 to 1000 in steps of of 50

Notice how 500 and 1000 are the same result, maybe we don't need to go that higher to get a good result.

Wow no idea what happens in iterations 500 to 750, maybe with more guidance this improves?

Mhh don't think so it gets more detail but still a very different result from the rest.

With guidance 20 we get a very interesting result, and with full of small details maybe there is something here, iteration 550 write it down xD

I don't think is a magic number but very interesting that we can get this sort of small detail with only changing the iterations.

Let's try another one and see how much the guidance impact on the final result

Wow lots of details, I'm amazed by the things in the shirt with higher guidance, towards the end you can see a little noise showing, guidance 25 I think is the best but super interesting result after that one.

Interesting that even small change in the iteration we get vastly different results and even we can get something completely crazy like in iteration 550, I really need to dig deeper and understand the scheduler if you have more understanding on this reach out would love to chat!

Slerping two latent vectors

I wanted to interpolate between two vectors but couldn't make something to work then I found this gist from karpathy and he was using a function to interpolate two latent vectors and it was just what I needed.

First lets see what is slerp, this is similar to linear interpolation, meaning the generation of points between two other point points, but in a spherical space, more info here on wikipedia xD



# This is the function if you want to use it
def slerp(t, v0, v1, DOT_THRESHOLD=0.9995):
    """ helper function to spherically interpolate two arrays v1 v2 """

    if not isinstance(v0, np.ndarray):
        inputs_are_torch = True
        input_device = v0.device
        v0 = v0.cpu().numpy()
        v1 = v1.cpu().numpy()

    dot = np.sum(v0 * v1 / (np.linalg.norm(v0) * np.linalg.norm(v1)))
    if np.abs(dot) > DOT_THRESHOLD:
        v2 = (1 - t) * v0 + t * v1
    else:
        theta_0 = np.arccos(dot)
        sin_theta_0 = np.sin(theta_0)
        theta_t = theta_0 * t
        sin_theta_t = np.sin(theta_t)
        s0 = np.sin(theta_0 - theta_t) / sin_theta_0
        s1 = sin_theta_t / sin_theta_0
        v2 = s0 * v0 + s1 * v1

    if inputs_are_torch:
        v2 = torch.from_numpy(v2).to(input_device)

    return v2

So grabbing two random latent vectors, interpolating or slerping between the two we get a bunch of intermediary results then with some video editing magic we get this awesome animation!



# how to use the function to generate frames for the animation

num_steps=30

for i, t in enumerate(tqdm(np.linspace(0, 1, num_steps))):
    latents= slerp(t, latents_save['face_to_the_left'], latents_save['head_shot_paint'])

    with autocast("cuda"):
        images = pipe([prompt], num_inference_steps=50, guidance_scale=7.5,  latents = latents).images
    images[0].save(f'slerp_between_latents/{i}.png')

latents_save['face_to_the_left'] and latents_save['head_shot_paint'] are two latents that I previously tested and saved into this dict.

https://imgur.com/CU6Vkfq

I created a gist with the compacted version of this check it out here
I'm amazed with how good it looks, I want to do a longer animation but it takes 10 minute per second of animation maybe next time xD

If you like this you can subscribe to the newsletter I will post content similar to this, Machine Learning, Deep Learning, news and cool projects.

Also subscribe to my YT channel k bye!

Use Isolates to prevent UI Jank | Flutter multiprocessing

Ramiro - Ramgen — Sun, 21 Aug 2022 18:38:00 +0000

As you might know flutter runs asynchronously on a single thread often called the main thread and also where the UI is running, now when you need to run heavy computational function you find that you app freezes and janks because is busy with that function.

Here is where Isolates come into action, this is a way to spawn threads in dart/flutter and prevent the main thread to halt.

Isolates are a little finicky but they are useful when the situation comes and this was the perfect situation, I needed to load an image and send it to an API for processing, this was janking the main thread but it can be done on an isolate and prevent that.

Let's see one of the easiest ways of using isolates with the compute function

Function to run

First we need a function to execute, this function loads the image and sends it with http to the API.

Future<Uint8List?> requestImg(RequestInputs reqInputs) async {
  File file = File(reqInputs.filePath!);

  final http.MultipartRequest request = http.MultipartRequest(
    'POST',
    Uri.parse('server:uri'),
  );
  final Map<String, String> headers = <String, String>{'Content-type': 'multipart/form-data'};

  final img_proc.Image tmp = img_proc.decodeImage(await file.readAsBytes())!;
  final List<int> tosend = img_proc.encodeJpg(tmp);

  request.files.add(http.MultipartFile.fromBytes(
    'file',
    tosend,
    filename: 'aism_source',
    contentType: MediaType('image', 'jpeg'),
  ));

  request.headers.addAll(headers);
  request.fields.addAll(reqInputs.settings);
  final http.StreamedResponse res = await request.send();
  debugPrint('Request settings sent');

  Uint8List responseImage = await res.stream.toBytes();
  return responseImage;
}

Now my function needed more than one argument but the compute function only accepts functions with one, to solve this I use a custom class to pass all of the data.

class RequestInputs {
  final String? filePath;
  final Map<String, String> settings;

  RequestInputs(this.filePath, this.externalPath, this.settings);
}

Compute function

Great we have the function and the custom class let's see how to use compute to run it on an isolate.

// #1
compute<StickerRequestInputs, Uint8List?>(
  requestImg,
  StickerRequestInputs(
    imgPath,
    storage,
    settings,
  ),
// #2
).then((value) => setState(() {
      loading = false;
      if (value != null) {
        imgBytes = value;
        saveImage(value);
      } else {
        debugPrint('Error!');
      }
    }));

We first need to declare the function input and output types in the compute statement #1 compute<Q,R> Q is the input type and R is the return type.

Then we pass the function and the input to run, in this case we instantiate the custom class that we declared.

The compute is a future of the return type R #2, we can use either async or .then to do something after it finishes, in this case we update the state with the new data or we print an error if it fails.

Watch the video for a walkthrough of all the code, subscribe to see the progress of the app :D

Alright and that's it, I will continue working with isolates and see what we can do with them, but as i said the are a little tricky to work with regardless they are a good option when you need them.

Simple overview on using cubits for state management

Ramiro - Ramgen — Sun, 31 Jul 2022 22:26:00 +0000

Alright so I'm making a revamp of my AiStickerMaker app and I have a functionality where you select an image from the gallery or the camera and a SliverAppBar widget will update with that image.

For this i was using a singleton to manage the state and passing that around, but as you can guess it wasn't a great option, it turns out changing the data in the singleton wasn't updating the state of the child widget.

So I decided to give blocs/cubits a shot, a decided this instead of provider because I thought that in the long run will be a better option.

Let's first see the implementation of the cubit I used, for what I gathered a cubit is a simple form of a bloc as it extends BlocBase, but it only holds one type of data, this can be a complex class with multiple fields or just a String.

class ImageSelectedCubit extends Cubit<String?> {
  // 1
  ImageSelectedCubit() : super('');
  // 2
  void getNewImage(ImageSource fileSource) async {
    final ImagePicker picker = ImagePicker();
    final XFile? pickedFile = await picker.pickImage(source: fileSource);
    emit(pickedFile?.path);
  }
  // 3
  void resetImage() {
    emit('');
  }
  // 4
  @override
  void onChange(Change<String?> change) {
    super.onChange(change);
    debugPrint(change.currentState);
    debugPrint(change.nextState);
  }
}

First we create the cubit class extending cubit and declaring that it holds a String?

We call the super of the class; with this we set the initial state
This one is the function that updates the state with the selected image, here we call the pickImage function and with the result we call emit to update the value of the cubit
A function to reset the state
Then with this we can debug the change of state.

Alright awesome right? we have a cubit now what?
Well we need to provide this bloc in the right places, and use a consumer to listen to the bloc.

MaterialApp( //...
home: MultiBlocProvider(providers: [
        BlocProvider(
          create: (context) => ImageSelectedCubit(),
        ),
      ], child: const HomePage()),
);

Now the best way I saw how to do this is to wrap the home in the MateralApp widget with a MultiBlocProvider, then we can state all of our providers inside of this widget and use them inside any children that follows this context.

Let's see how to actually use it and update a widget
For this we need to use the BlocConsumer widget, as said before a cubit is just a simpler Bloc so we can use any Bloc widget with it.

BlocConsumer<ImageSelectedCubit, String?>(
  listener: (context, state) {
    final imgCubit = context.read<ImageSelectedCubit>();
    if (state == null) {
      showSnack('Error!', context);
      imgCubit.resetImage();
    }
  },
  builder: (context, state) {
    final imgCubit = context.read<ImageSelectedCubit>();
    return Image(image: FileImage(File(imgCubit.state!)));
})

Here we create a BlocConsumer with the type of the cubit that we want and the type of data it holds here <ImageSelectedCubit, String?>
Then this is optional but we can do data validation before we build the widget, here we check if the image selected is null and we reset the value to an empty string.

Now in the builder function we can access the instance of the cubit using context.read<T>() ( T is the class of your cubit ) then reading .state we access the value of the cubit.

And that's it, I really liked the simplicity of cubits, but I'm sure I'll be diving deeper into Blocs for the rest of the app, if you want to follow the development check out de YT vid! 😁

Let's create a face dataset with unsplash dataset

Ramiro - Ramgen — Fri, 18 Feb 2022 01:55:48 +0000

I want to get more into dataset creation and exploration and when unsplash released a dataset a while back i knew that it was a good excuse to start.

Then thought seeing other dataset like FFHQ and similar face datasets that it would be interesting to make a pipeline to make a sub-dataset of faces from the unsplash dataset.

Alright so we are going to use the test dataset that unsplash provides but everything works with the full dataset if you are able to access that one, you can get more information in the github repo.

This articles is the summarized version of this video where i go more in depth in each part and we do a walkthrough of why and how we do things, hope you can check it out!

Awesome! We are going to use jupyter notebooks and python scripts, so let's go!

First we need the dataset

Here if you have the link to the full dataset change the download link to that and also the file output name.

mkdir ds
curl -L "https://unsplash-datasets.s3.amazonaws.com/lite/latest/unsplash-research-dataset-lite-latest.zip" -s --output "./ds/unsplash-research-dataset-lite-latest.zip"
tar -xf "./ds/unsplash-research-dataset-lite-latest.zip" --directory ./ds/

Here we make the ds folder, then download and uncompress the dataset, you should have 5 tab separated values files and 3 markdowns, we are going to focus on the photos file.

Loading the images

Now let's see how to load the images from the url of the dataset and have it ready for processing.

image_bytes = requests.get('https://images.unsplash.com/photo-1525785939540-8a33240e4946?width=1024')
print(image_bytes.status_code)
image_bytes = image_bytes.content
image_stream = BytesIO(image_bytes)
img_open=Image.open(image_stream)

img_open

We use requests to get the image and then with BytesIO we read the stream of bytes then we can use the open method from the PIL library to load that image into the img_open variable, we can leave the variable in the last line and the notebook will display it.

Computing the face box

Awesome now let's see how to get the face box and then display it with matplotlib, first we need the haarcascade model to get the face box coordinates.

This will create the models folder and download the file of the classifier.

mkdir models
curl -L "https://github.com/opencv/opencv/raw/master/data/haarcascades/haarcascade_frontalface_alt_tree.xml" -s --output ./models/haarcascade_frontalface_alt_tree.xml

Great now let's load the model with CascadeClassfier, then we need to get the gray version of the image for the classifier, we do this by first getting the numpy array of the PIL imagen and then with cvtColor we get the gray image.

Then we feed this gray image to the classifier, getting a list of face cords that the classifier detects.
Then we can loop through the box cords and draw rectangles to a copy of our image.
The cords of the box have this format: [x,y,w,h]

image_draw = np.array(img_open).copy()
detector = cv2.CascadeClassifier('./models/haarcascade_frontalface_alt_tree.xml')
image_gray = cv2.cvtColor(np.array(img_open), cv2.COLOR_RGB2GRAY)

faces = detector.detectMultiScale(image_gray)

for cords in faces:
  cv2.rectangle(image_draw,
                (cords[0],cords[1]),
                (cords[0]+cords[2],cords[1]+cords[3]),
                (0,255,0),2)

plt.figure(figsize = (10,10))
plt.imshow(image_draw)

We can also get the face landmarks using the lbfmodel

curl -L "https://github.com/kurnianggoro/GSOC2017/raw/master/data/lbfmodel.yaml" -s  --output ./models/lbfmodel.yaml

This models requires the box cords for each face, so we loop through each of them and we calculate the face landmarks.

landmark_detector = cv2.face.createFacemarkLBF()
landmark_detector.loadModel('./models/lbfmodel.yaml')

for cords in faces:
  _, landmarks = landmark_detector.fit(image_gray, faces)

  for landmark in landmarks:
    for i,(x,y) in enumerate(landmark[0]):
      cv2.circle(image_draw, (int(x),int(y)),2,(255,255,255),1)
      image_draw = cv2.putText(image_draw, f"{i}", (int(x-5),int(y-5)), cv2.FONT_HERSHEY_SIMPLEX,  
                  0.4, (50, 255, 50) , 1, cv2.LINE_AA)

plt.figure(figsize = (40,40))  
plt.imshow(image_draw)
```
{% endraw %}

![Woman with face landmarks plotted and a green face box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78s8exl639ly5s2kk5xc.png)

## Crop the face and recalculate the facebox to the full size
So as you can see we compute the face box cords with a rescale of the original image let's see how to get the box for the original image.

First let's see a function that given the box face cords, the shape of the original image and the shape of the rescale, computes the new box.

So here what we basically have to do is calculate a ratio and then multiply the box for that ratio, we loop through all the boxes and we multiply the new x,y, and the new height and width.
{% raw %}


```python
def recal_box(box_cords, old_shape, new_shape):
    recal_boxes=[]

    for box in box_cords:
        Ry, Rx=new_shape[0]/old_shape[0], new_shape[1]/old_shape[1]

        x,y,w,h = box
        new_y, new_x = int(Ry*y), int(Rx*x)

        new_h, new_w = int(Ry*h), int(Rx*w)

        recal_boxes.append((new_x, new_y, new_w, new_h))

    return recal_boxes
```
{% endraw %}


Now let's overview the process of using the function, here we load the images to get the shape or rather the height and width of the original image we have the width of the rescale but not the height so we also get that.
Then we calculate the ration that we need and we give that to function recal_box.
{% raw %}


```python
test_recal='https://images.unsplash.com/photo-1475500842347-db0561997c00?width=1024'
image_bytes_s = requests.get(test_recal)

image_bytes_s = image_bytes_s.content
image_stream_s = BytesIO(image_bytes_s)
img_open_s = np.array(Image.open(image_stream_s))

image_bytes = requests.get(test_recal.split('?')[0])
image_bytes = image_bytes.content
image_stream = BytesIO(image_bytes)
img_open = np.array(Image.open(image_stream))

og_shape=img_open_s.shape
new_shape=img_open.shape

new_box=recal_box([[411, 268, 149, 149]],og_shape, new_shape)
```


And we have our result!
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f9obbwelwse01c65lzg6.png)

We can do this for all the images that we encountered in the dataset and have the face box for the original image!

## Downloading images!
Alright last thing is downloading all the faces! 
Let's say that we computed all the images and we have a csv with the link of the original image and the face boxes for that image.
{% raw %}


```python
import numpy as np
import pandas as pd
import os
from io import BytesIO
import requests
from PIL import Image
import cv2
import numpy as np
from pathlib import Path
import argparse

def cropface(image, box, fill=.5, ratios=(1,1)):
    h_img,w_img = image.shape[:2]

    Ry, Rx = ratios
    x,y,w,h = box

    new_y,new_x = Ry*y, Rx*x
    y_fill = max(0, new_y-h*fill)
    x_fill = max(0, new_x-w*fill)

    new_h, new_w = Ry*(h+y), Rx*(w+x)

    h_fill = min(h_img, new_h+h*fill)
    w_fill = min(w_img, new_w+w*fill)

    return image[int(y_fill):int(h_fill),
               int(x_fill):int(w_fill)]


def get_opt():
    parser = argparse.ArgumentParser()
    parser.add_argument('--source', type=str, required=True)
    parser.add_argument('--output', type=str, default='./unsplash_faces')

    opt = parser.parse_args()
    return opt

if __name__ == '__main__':
  opt:dict = get_opt()
  Path(opt.output).mkdir(exist_ok=True, parents=True)

  print('Loading photos df')
  photos_df=pd.read_csv(opt.source, sep=';', header=0)
  print('Finish photos df')

  for j, r in photos_df.iterrows():

    cur_cords = eval(r['face_box_cords'])
    cur_img = r['photo_image_url']

    image_bytes = requests.get(cur_img.split('?')[0])

    image_bytes = image_bytes.content
    image_stream = BytesIO(image_bytes)
    img_open = np.array(Image.open(image_stream))

    name = cur_img.split('/')[-1]
    for i, cords in enumerate(cur_cords):
      cur_crop = cropface(img_open, cords, fill=0, ratios=(1,1))
      try:
        cv2.imwrite(os.path.join(opt.output,f'{name}_{i}.jpg'), cur_crop[:,:,::-1])
      except:
        print(f'Error with {cur_img}')

    print(f'{j}/{len(photos_df)}')

```
{% endraw %}

Now here we first declare the cropface function that given an image, and a box crops the image and returns that crop.
This function can also recalculate the rations and give a fill to the box if we want.
We slice the image using the face cords, and we use max and min to ensure the fill doesn't go over the edges, we don't want a out of index error :D

We use argparse for the options of the script, then we iterate over the csv of our data and we do the same process as before, but here we only need to crop the face and save it.

Wonderful that's it! Hope you like it, follow me and also check my [YT](https://www.youtube.com/c/ramgendeploy)!

---
creds:
1:_Photo by <a href="https://unsplash.com/@gift_habeshaw?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Gift Habeshaw</a>_
2:_Original Photo by <a href="https://unsplash.com/@freestocks?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">freestocks</a>_

Mastering Native Code in Flutter: A Step-by-Step Guide

Ramiro - Ramgen — Sat, 29 Jan 2022 01:46:00 +0000

In this post, we'll take a look at how to run native code in Flutter and provide a quick template to get you started.

Running native code with Flutter is done through the use of a defined platform channel, specifically the MethodChannel. This channel allows the Flutter app to send and receive messages from the host platform (iOS or Android).
The messages are encoded into binary before being sent and binary results received are decoded into Dart values. The data sent through the channel is converted as shown in the following table:

It's important to note that messages and responses are passed asynchronously, but the channel's method needs to be invoked on the main thread. This means that the main thread can experience jank if the method takes too long to compute. However, this can be mitigated by sending messages in different threads on the backend.

Another important characteristic to keep in mind is that Method Channels cannot be used in isolates because the main isolate is the only one running on the main thread.

Now that you have a basic understanding of how to run native code in Flutter, let's take a look at a quick template to get you started.

How to create a methodchannel

Define the methodchannel in the state of the app. The name needs to match.

You can use this as a template for whatever you want to do.



import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
...
class _MyHomePageState extends State<MyHomePage> {
  static const platform = const MethodChannel('com.dev.app/channel_name');


}

Platform specific code, creating the 'backend', in the MainActivity.kt or .java create the method channel.



import androidx.annotation.NonNull
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel

class MainActivity: FlutterActivity() {
  private val CHANNEL = "com.dev.app/channel_name"
  private fun doSomethingFunction(): Int {
    return 10   
  }

    return batteryLevel
  }
  override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
    super.configureFlutterEngine(flutterEngine)
    MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler {
      call, result ->
      // Note: this method is invoked on the main thread.
      if (call.method == "doSomething") {
        val funValue = doSomethingFunction()

        if (funValue != -1) {
          result.success(funValue)
        } else {
          result.error("UNAVAILABLE", "Error message.", null)
        }
      } else {
        result.notImplemented()
      }
    }
  }
}

Call method channel in the flutter app, function in the state:



String _valueReceivied= 'default value';
  Future<void> _getBatteryLevel() async {
    String tempValue;
    try {
      final int result = await platform.invokeMethod('doSomething');
      batteryLevel = 'New data $result';
    } on PlatformException catch (e) {
      batteryLevel = "Failed to get new data: '${e.message}'.";
    }

    setState(() {
      _valueReceivied = tempValue;
    });
  }

Then execute the function as you see fit.

You can also use invokeListMethod and invokeMapMethod that are an implementation of invokeMethod however they expect to receive a List or Map. More info.

This way of communicating and executing code with the backend of the platform is not typesafe as it requires the definition of the same datatype in the backend as in the flutter app.

Another way of doing this is using code generation with Pigeon. More info in the pub.dev page. I will try to make a post about this if i find it interesting.

You can make Packages to separate the platform-specific code for the UI and also publish the package to the Flutter ecosystem. Developing, Publishing.

Threading

The main thread and where the method channels are executed is also the UI thread so if some computation takes too long to finish the UI might suffer from this.

So one thing to keep in mind is...

When your app performs intensive work in response to user interaction, this single thread model can yield poor performance unless you implement your application properly. Specifically, if everything is happening in the UI thread, performing long operations such as network access or database queries will block the whole UI. When the thread is blocked, no events can be dispatched, including drawing events. From the user's perspective, the application appears to hang. Even worse, if the UI thread is blocked for more than a few seconds (about 5 seconds currently) the user is presented with the infamous "application not responding" (ANR) dialog. The user might then decide to quit your application and uninstall it if they are unhappy.

You can jump from a background thread to the UI thread by doing this

on Kotlin:



Handler(Looper.getMainLooper()).post {
  // Call the desired channel message here.
}

on Java:



new Handler(Looper.getMainLooper()).post(new Runnable() {
  @Override
  public void run() {
    // Call the desired channel message here.
  }
});

Not sure what the docs meant by this, but this might be a way of running the native code in a different thread, although I've tested something similar and I've experienced erros, so more testing needs to be done here, if you have any info let me know.

This is awesome to execute native code or libraries that don't have support in dart, in my example this is awesome for ML libraries and get models to run on the device.

One thing that I've experience is that when running ML models the UI threads struggles so I will make test on running these models on different threads, or making plugins as they run in different threads.

I did a quick introduction on how to use Pytorch mobile on flutter, I'm planning on doing a more comprehensive one. I going to talk about the use of threads for making things faster and without lag if i find that they work properly.

Sources:

Platform channels

Docs MethodChannel

Python environments with Conda and virtualenv fast and easy

Ramiro - Ramgen — Sun, 23 Jan 2022 23:46:33 +0000

What's the point in using Virtual environments well the main benefits is that you can have the same package installed with different versions in the same computer/server.

That's helpful if you have a bunch of projects that have the same packages but works with different versions of them.

Also a venv can be in any folder you want, to use python env we need any python 3 version.

First of all we are going to separate the windows command from the linux commands using (W) for windows and (L) for Linux.

Now we need to make sure we have the virtualenv package install: pip3 install virtualenv

Creating the venv

Go to your terminal

Change dir to the folder of your env cd name_of_env

(W): python -m venv name_of_env

(L): virtualenv name_of_env

This will create venv in the selected folder

Now to access the venv or rather to activate it:

(W): execute name_of_env/Scripts/activate.bat

(L): source name_of_env/bin/activate

To make sure we are in the venv we can see the terminal that we have the name of the env at the beginning of the line or doing:

(W): where python

(L): which python

This will show where python is executing and it should we in our env.

Now if you execute pip list you will see that we don't have much installed in our environment but that was the point of all of this 😄

If you want the current packages that you have in your env you can execute pip freeze and if you are wild, you can do pip freeze > requirements.txt that will save the output of the terminal into that file so you can have the same version of the packages

To install the packages in other env or machine you can grab that file and do

pip install -r requirements.txt

It's not a good practice to put files in your venv, so when you use one you should make the folder of the project and then a dedicated venv folder, so the virtual env will be in project_name/venv

Deactivating and removing the env

To Deactivate the venv

(W): execute deactivate

(L): deactivate

To remove the env we only need to delete the folder that the env it's in:

(W): rmdir folder_name /s

(L): rm -rf folder_name

Bonus creating anaconda env

Conda it's a bundle of frameworks and libraries that we can also use to create env

Creating a conda environment

conda create -n name_of_env python=3.6

As you can see one of the advantages that conda gives is the ability to choose the version of python

To activate the env:

conda activate name_of_env

To see all the env:

conda env list

To deactivate:

conda deactivate name_of_env

To remove a conda env:

conda env remove -n name_of_env

That's it! if you have question or found an error talk to me on twitter @ramgendeploy

Make a Custom Right Click Menu with Javascript

Ramiro - Ramgen — Thu, 14 Oct 2021 16:57:36 +0000

Video version if you want to see it.
Give it a like 😁

Alright let's see how to make a custom menu.
We are going to use vanilla javascript, but you can easily use this to make it on react or vue or other framework of your choosing.

This one is going to be short and sweet for those that just wants the result 😁

First we'll have the menu itself.

<body>
  <div class="app" id="app">
    <ul class="menu hide" id="menu">
      <li class="menuItem"><span>🎵</span>Play</li>
      <li class="Separator"></li>
      <li class="menuItem"><span>⏭</span>Next</li>
      <li class="menuItem"><span>⏹</span>Stop</li>
      <li class="menuItem"><span>⏮</span>Last</li>
      <li class="Separator"></li>
      <li class="menuItem"><span>⏺</span>Record</li>
      <li class="menuItem"><span>🔄</span>Reload</li>
      <li class="Separator"></li>
      <li class="menuItem"><span>🗑️</span>Discard</li>
    </ul>
  </div>
</body>

Then we define some helper functions and we select some elements in the DOM.

el = (e) => document.querySelector(e)

const app = el('#app')
const menu = el('#menu')

let menuActive = false
menu.classList.add('hide')

const showMenu = () => {
  menu.classList.remove('hide')
  menu.classList.add('show')
}

const hideMenu = () => {
  menu.classList.add('hide')
  menu.classList.remove('show')
}

We have a function to select elements, a flag for the state, then two functions one to show the menu and one to hide it, (we can do this with a toggle function but I wanted to make things more clear, so feel free to implement that)

Now lets see where the important stuff is:

const moveMenu = (event) => {
  event.preventDefault()
  console.log(event)

  menuActive = true
  showMenu()

  let wHeight = window.innerHeight

  let scrPosX = event.clientX + window.scrollX
  let scrPosY = event.clientY + window.scrollY

  let Y_window_offset = event.clientY + menu.clientHeight - wHeight

  if (Y_window_offset > 0) {
    scrPosY -= menu.clientHeight
  }

  menu.style.left = `${scrPosX}px`
  menu.style.top = `${scrPosY}px`

  return false
}

So what we are doing here:

First we prevent the default operating system menu
We set the menu state menuActive to active
We retrieve the windows inner height, this one is the height of the viewport
Now we calculate the coordinates of the menu click and we offset them with the scroll from both Y and X axis

  let scrPosX = event.clientX + window.scrollX
  let scrPosY = event.clientY + window.scrollY

Now this one let Y_window_offset = event.clientY + menu.clientHeight - wHeight is the difference between the bottom of the menu and the bottom of the screen, we'll use this to know if the menu is going offscreen at the bottom and we can shift it up
We do that when that offset is positive and we substract that offset with the height of the menu.
Finally we set the left and top CSS positions of the menu elemnt to those coordinates, since the element is in position absolute it will move to those coordinates, note that the parent is in position relative.

Then we give this functions to the contextmenu event listener and whoala:

app.addEventListener('contextmenu', moveMenu)
app.addEventListener('click', (event) => {
  if (menuActive) {
    hideMenu()
    menuActive = false
  }
})

We also add a event listener for a click in the app for hiding the menu.

So if you want to make this even better you can do the same shift we do for the bottom of the screen but at the right side too, because now the menu will go offscreen 😅

I will be making better content now that I have some better equipment, going to make Machine Learning, app development, Data science and General programming stuff content 😁
I'll appreciate if you give me a follow, also if you have time check out my youtube channel ramgendeploy drop a sub if you like there 😄

CSS for the braves (jk)

@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
* {
  box-sizing: content-box;
}

body {
  margin: 0;
  font-family: "Open Sans", sans-serif;
  position: relative;
  background: #151515;
}

.app {
  background: #202020;
  width: 80%;
  margin: 0 auto;
  height: fit-content;
  color: white;
  padding: 15px;
  line-height: 30px;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.menu {
  margin: 0;
  color: black;
  border: solid black 1px;
  position: absolute;
  width: 250px;
  background: white;
  padding: 10px 0px;
  border-radius: 4px;
}

.Separator {
  display: block;
  height: 1px;
  background: #7e7b7b;
  margin: 5px 10px;
  user-select: none;
}

.menuItem {
  display: grid;
  grid-template-columns: 30px auto;
  align-items: center;
  padding: 7px 15px 7px 8px;
  user-select: none;
  cursor: pointer;
}

.menuItem:hover {
  background: lightblue;
  transition: 500ms;
}

.menuItem:active {
  background: cadetblue;
  transition: 500ms;
}

.imgL {
  float: left;
  padding: 10px;
}

.imgR {
  float: right;
  padding: 10px;
}

.slime {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: #202020;
  padding: 10px;
  border-bottom: 3px solid #303030;
}

Master the Javascript Array Reduce Method with 10 Examples

Ramiro - Ramgen — Mon, 20 Sep 2021 17:03:06 +0000

The Javascript reduce method is a powerful tool that allows developers to iterate over an array and accumulate a single value or object. In this tutorial, we will learn how to use the reduce method to solve real-world problems, from simple summations and multiplications to advanced tasks such as removing duplicates from an array and validating parenthesis.

By the end of this tutorial, you will have a solid understanding of how to use the reduce method and will be able to apply it to your own projects with confidence.

1. Summation and Multiplication:

The reduce is perfect for performing simple mathematical operations on an array. For example, we can use the reduce method to find the sum or product of all the elements in an array.

$\sum and \prod$

// Summation
[3, 5, 4, 3, 6, 2, 3, 4].reduce((a, i) => a + i);

// Without initial value
[3, 5, 4, 3, 6, 2, 3, 4].reduce((a, i) => a + i, 5 );

// For clarity the above code is the same as 
[3, 5, 4, 3, 6, 2, 3, 4].reduce(function(a, i){return (a + i)}, 0 );

// Multiplication
[3, 5, 4, 3, 6, 2, 3, 4].reduce((a, i) => a * i);

In this example we can leave the initial value out, as it will grab the first item in the array, but you can also specify one to have an offset.

2. Find the maximum in an array:

Another common use case for the reduce method is finding the maximum value in an array. By specifying an initial value of -Infinity, we can compare each element in the array to the accumulator and return the maximum value.

[3, 5, 4, 3, 6, 2, 3, 4].reduce((a, i) => Math.max(a, i), -Infinity);

As an alternative you could use the spread operator and Math.max built-in method as well.

Math.max(...[3, 5, 4, 3, 6, 2, 3, 4]);

3. Concatenating uneven arrays

The reduce method can also be used to concatenate arrays, even if they are of different lengths. In this example, we use the map method to iterate over each sub-array, and then use the reduce method to combine all the elements into a single string.

let data = [
  ["The","red", "horse"],
  ["Plane","over","the","ocean"],
  ["Chocolate","ice","cream","is","awesome"], 
  ["this","is","a","long","sentence"]
]
let dataConcat = data.map(item=>item.reduce((a,i)=>`${a} ${i}`))

// Result
['The red horse', 
'Plane over the ocean', 
'Chocolate ice cream is awesome', 
'this is a long sentence']

4. Removing duplicates in an array:

The reduce method can also be used to remove duplicates from an array. In this example, we check if the current value has an index in the accumulator array. If not, we add it to the array.

let dupes = [1,2,3,'a','a','f',3,4,2,'d','d']
let withOutDupes = dupes.reduce((noDupes, curVal) => {
  if (noDupes.indexOf(curVal) === -1) { noDupes.push(curVal) }
  return noDupes
}, [])

It's important to note that this method can also be achieved by using javascript set, which by default store only unique values.

5. Validating parenthesis

The reduce method can also be used to validate parenthesis in a string. In this example, we use the spread operator to convert the string into an array, and then use the reduce method to iterate over each character. If the character is an opening parenthesis, we increment the accumulator, and if it's a closing parenthesis, we decrement it. In the end if the status is 0, the parenthesis are balanced.

[..."(())()(()())"].reduce((a,i)=> i==='('?a+1:a-1,0);

// using a for loop
status=0
for i in string:
  if(i=="("):
    status=status+1
  elif(i==")"):
    status=status-1     
  if(status<0):
    return False

6. Filtering and Counting:

The reduce method can also be used to filter and count elements in an array. In this example, we use the reduce method to filter out all elements that are not a number, and then count the number of remaining elements.

let data = [1, 2, "a", "b", 3, "c", 4, "d"];
let filteredData = data.reduce((acc, curr) => {
  if (typeof curr === "number") {
    acc.push(curr);
  }
  return acc;
}, []);
console.log(filteredData); // [1, 2, 3, 4]
console.log(filteredData.length); // 4

7. Group by property

The reduce method can also be used to group elements in an array by a specific property. In this example, we use the reduce method to group an array of objects by their "type" property. In each iteration, we check if the key exist if not we create an array, then we add the current type to that and we return the group array.

let data = [
  { type: "A", value: 1 },
  { type: "B", value: 2 },
  { type: "A", value: 3 },
  { type: "B", value: 4 },
  { type: "A", value: 5 },
];
let groupedData = data.reduce((acc, curr) => {
  if (!acc[curr.type]) {
    acc[curr.type] = [];
  }
  acc[curr.type].push(curr);
  return acc;
}, {});
console.log(groupedData); // { A: [ { type: 'A', value: 1 }, { type: 'A', value: 3 }, { type: 'A', value: 5 } ], B: [ { type: 'B', value: 2 }, { type: 'B', value: 4 } ] }

8. Flattening a Nested Array:

The reduce method can also be used to flatten a nested array. In this example, we use the reduce method to flatten an array of arrays into a single array.

let data = [[1, 2], [3, 4], [5, 6]];
let flattenedData = data.reduce((acc, curr) => acc.concat(curr), []);
console.log(flattenedData); // [1, 2, 3, 4, 5, 6]

An intended way of doing this is just to use the .flat method.

[ [3, 4, 5],
  [2, 5, 3],
  [4, 5, 6]
].flat();

9. Counting Occurrences of Elements:

In this example, we use the reduce method to count the occurrences of each element in an array.

let data = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4];
let countedData = data.reduce((acc, curr) => {
  if (!acc[curr]) {
    acc[curr] = 0;
  }
  acc[curr]++;
  return acc;
}, {});
console.log(countedData); // { 1: 1, 2: 2, 3: 3, 4: 4 }

This one is like doing a map and a filter at the same time, we filter the negative numbers and we rise the positive.

10. Reverse a string

Here we use the reduce method to reverse a string, this will work with any object not only strings.

const reverseStr = str=>[...str].reduce((a,v)=>v+a)

Bonus

11. Binary to decimal

In this example we can use it to convert a binary number to decimal.
Here we convert the string into an array, and we square in order the array until we have the decimal number.

const bin2dec = str=>[...String(str)].reduce((acc,cur)=>+cur+acc*2,0)

// Long format for readability
const bin2dec = (str) => {
  return [...String(str)].reduce((acc,cur)=>{
    return +cur+acc*2
  },0)
}

To Illustrate this one let's see an example:
(10111)->1+(1+(1+(0+(1+0*2)*2)*2)*2)*2

And we reach the end, the reduce method is a versatile and powerful tool that can be used to solve a wide range of problems.

Check out my youtube channel ramgendeploy drop a sub if you like there 😄

How to do Data Scraping with chrome - Data Science

Ramiro - Ramgen — Sat, 11 Sep 2021 15:34:51 +0000

Alright let's see a simple way of doing data web scrapping using the console of the browser, here we use chrome but any will do since we are not using anything specific.

This article is the follow up to this video, consider checking it out as we go a little more in depth in some parts.

Check out the video for this post:

If you like follow for more and consider subscribing to the YT channel ramgendeploy 😁

I think this is a great video for people starting with javascript to learn more about array manipulation and also data extraction.

Great! so we are going to use the browser inspector to extract data and put it into useful formats like JSON or CSV files.

Content:

Document Element Selection
Data Processing with Javascript, array methods
- map
- reducer
- filter
Javascript optional chaining example

Nice let's go over some snippets:

First if you are using chrome, when you select an element, you can then reference that element in the console tab with $0 this is useful to see the childrens and extract a "route" to the data you want.

There is a handful of methods to select elements, here we use the more general one, that is the querySelectorAll. We define it into the selEl variable so it's more convenient.

let selEl = document.querySelectorAll('selector')

Selector can be:

Element name
class
id
css syntax like: .container > .btn

I don't know if there is more but those are the most useful :D

Using our selEl function we can give a Selector, a class for example and it will give us all the elements that have that class.

Then after you select all the elements that you need, you going to have a nodelist, so to use array methods on it you need to convert it to an array.

How we do this? There is a bunch of ways to convert novelists to an array, but here we are going to use some the spread operator to create a new array from our nodelist.

let selEleArray = [...selEle]

With that now we can use the array methods and process our data:

let parsedData = selEleArray.map(
  (item)=>[item.children[0].innerText,item.src, item.innerHTML]
)

Here for example we map the data into a new array, with the innerText, the source attribute and the innerHTML of the element, here is the part that we actually construct the data we need.
So it's up to you, for example if we are scraping images the src might be of interest.
In the video we go more in depth on this part 😄

Now Having this object with an array of arrays, is not enough to do console.log(parsedDate) to be able to copy the data and have it elsewhere, sometimes the browser says nope I won't display 1500 lines.

To solve this we are going to call our friend JSON, and using stringify we convert the object into a string to then display it into the console

JSON.stringify(parsedData)

You don't need to actually log here, the inspector does it implicitly.

Now with our object as a JSON string, we can grab this and use it elsewhere that supports JSON.

But what if you want a CSV file, well .reduce to the rescue.
We are going to grab that array and reduce it to a single string with a csv format.

let data_cvs = parsedData.reduce(
(accumulator,current)=>{
  return accumulator+`\n${item[0]},${item[1]},${item[2]}`
},
  'header_1,header_2,header_3')

To explain this a little bit more, reduce needs two parameters, a reduce function that will run with each item in the array and a starter value, in this case our started value is the headers of the csv file.

You can also use a for loop but I think using reduce is more neat 😅

Then in each iteration, we add to the string a return escape and our comma separated values, notice that we use the `` quotes to have variable interpretation inside the string.

Like, Follow and stuff 😁

And consider subscribing to the YT channel ramgendeploy

Creating an Image Slideshow with Javascript: A Step-by-Step Guide

Ramiro - Ramgen — Mon, 06 Sep 2021 03:26:38 +0000

In this post, we will be learning how to create an image slideshow using only Javascript. We will be covering topics such as DOM manipulation, ES6 syntax, and higher-order functions. By the end of this tutorial, you will have a working image slideshow that you can customize to fit your needs.

Before we begin, check out the following video for a demonstration of the final product:

Don't forget to subscribe to the YT channel ramgendeploy for more tutorials like this.

We will be using two helper functions to create and select elements in the DOM. These functions will be used to create "react-like" components that will create and return document elements.

const el = (id) => document.getElementById(id)
const newEl = (tag) => document.createElement(tag);

The first function is for creating a single slide of the slideshow:

const ImageContiner = (id, src, txt) => {
  let ctr = newEl('div')
  let img = newEl('img')
  let txtSpan = newEl('span')

  ctr.id = id;

  ctr.classList.add('frame', 'hide')

  img.src = src;
  img.classList.add('image')

  txtSpan.innerText = txt;
  txtSpan.classList.add('text')

  ctr.append(img)
  ctr.append(txtSpan)
  return ctr;
}

The second function is for creating the action buttons. In this example, we are using a higher-order function to demonstrate its use.

const actionbtn = (txt, action) => {
  let btn = newEl('button')
  btn.innerText = txt

  btn.addEventListener('click', action)
  return btn;
}

Now, we will create the main function that will handle the creation of the image slideshow. This function takes the id of the root element and an array of objects containing the source image and a description.

Here's what the function does:

Selects the root element and appends an imageContainer for each item in the data array.
Creates the previous and next buttons.
Finally, it appends the buttons to the actionctr div and then to the root.

const slideshow = (id, data) => {

  const root = el(id)
  const len = data.length;
  let current = 0;

  data.forEach((frame, id) => {
    ({ src, txt } = frame);
    let imgCtr = ImageContiner(id, src, txt);
    root.append(imgCtr)
  });

  imgslt = el(current);
  imgslt.classList.remove('hide')

  // Next and prev btn
  let actionctr = newEl('div')
  actionctr.classList.add('actionctr')

  let prev = actionbtn('👈', () => {
    if (current === 0) {
      imgslt.classList.add('hide')

      current = len - 1
      imgslt = el(current);
      imgslt.classList.remove('hide')
    } else {

      imgslt.classList.add('hide')

      current = current - 1
      imgslt = el(current);


      imgslt.classList.remove('hide')
    }
  });
  let next = actionbtn('👉', () => {
    if (current === len - 1) {
      imgslt.classList.add('hide')

      current = 0
      imgslt = el(current);
      imgslt.classList.remove('hide')
    } else {

      imgslt.classList.add('hide')

      current = current + 1
      imgslt = el(current);


      imgslt.classList.remove('hide')
    }
  });
  // let next = actionbtn('next');
  actionctr.append(prev, next)

  root.append(actionctr)
}

The HTML for this project is simple, we only need to have a root element and a script tag:

...
<body>
  <div id="sls">

  </div>
<script>
  slideshow('sls',
    [
      {
        src: 'https://images.unsplash.com/photo-1585255318859-f5c15f4cffe9?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixlib=rb-1.2.1&q=80&w=500',
        txt: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. '
      },
      {
        src: 'https://images.unsplash.com/photo-1584226761916-3fd67ab5ac3a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixlib=rb-1.2.1&q=80&w=500',
        txt: 'Animi voluptatum natus eligendi minima earum ratione eos, fuga voluptas excepturi est.'
      },
      {
        src: 'https://images.unsplash.com/photo-1585179292338-45ba1f62f082?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixlib=rb-1.2.1&q=80&w=500',
        txt: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. '
      },
      {
        src: 'https://images.unsplash.com/photo-1584753987666-ead137ec0614?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixlib=rb-1.2.1&q=80&w=500',
        txt: 'Animi voluptatum natus eligendi minima earum ratione eos, fuga voluptas excepturi est.'
      }
    ]);
</script>
</body>
...

Lastly, we have the CSS, which is also straightforward. We are using some basic positioning and display flex to center elements and position the buttons correctly.

@import url('https://fonts.googleapis.com/css2?family=Baloo+Thambi+2&display=swap');
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  display: flex;
  justify-content: center;
}

#sls {
  position: relative;
  height: 500px;
  width: 500px;
}

.hide {
  display: none;
}

.frame {
  position: absolute;
  transition: 500ms all ease;
}

.text {
  font-family: 'Baloo Thambi 2', cursive;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #535353b5;
  width: 100%;
  height: 53px;
  color: white;
  text-align: center;
}

.show {
  opacity: 1;
}

.actionctr {
  position: absolute;
  height: 350px;
  top: 73px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.actionctr button {
  background: #0000;
  border: none;
  height: 75%;
  width: 50px;
}

.actionctr button:hover {
  background: rgba(0, 0, 0, 0.25);
}

.actionctr button:active {
  background: rgba(0, 0, 0, 0.5);
}

That's it! You now have a working image slideshow that you can customize to fit your needs. If you have any questions or want to connect, feel free to reach out to me on Twitter @ramgendeploy