Forem: JakovGlavac

Creating Style Previews with Stable Diffusion

JakovGlavac — Wed, 20 Sep 2023 02:29:35 +0000

Enhancing Your Shopping Experience with AI and LORA

While wisiting a cloating e-commerce shop, I had a random thought: "Wouldn't it be cool to preview clothes on myself while shopping?" As a developer by trade, and having prior experience with stable diffusion using Dream Booth, I decided to build an MVP to do just that.

Exploring LORA

First, I attempted to use Dream Booth to learn my face. However, I stumbled upon something even cooler: LORA (Low-Rank Adaptation). LORA proved to be faster and easier to train and had the potential for combining different aspects. For instance, you could combine a LORA model of a user's face with a LORA model of the clothes you want that user to wear.

I started by creating a LORA model of my face and had some fun with it, generating cool images like this one:

Then, I created a LORA model of jackets from images found on an e-commerce website:

Next, I combined these LORA models in a prompt and achieved pretty decent results:

However, I noticed that the images weren't perfect, especially when it came to small details of the jacket and my face. I ran more prompts and tried to improve the LORA model, but my face was consistently off.

Troubleshooting the LORA Model

I experimented with several solutions:

I attempted to label a person in the jacket dataset as a model and included this as a negative prompt, but it didn't yield significant improvements.
I refined the prompts and used WD4 to annotate images, but the results remained suboptimal.

After trying numerous approaches without groundbreaking success, I decided to explore using a control net to correct the person's pose and apply masks to allow LORA to work on each part of the image independently. Here's what it looked like:

The results were better, though my face was still not quite right. At first glance, everything seemed to be working okay:

Encouraged by these results, I attempted to add another piece of clothing to see if it would work with three LORA models. Here are the original images from the shop:

And the results:

This time, the jacket and jeans looked really good, but the face was worse than in the last batch. Unfortunately, I couldn't pinpoint the exact reason for this.

I'm still working on solving this issue, and when I do, I hope to share it with the community. If anyone has any insights or solutions, I would be incredibly grateful.

How to use react three fiber in grafana

JakovGlavac — Thu, 12 Jan 2023 17:35:28 +0000

Introduction to Grafana and React Three Fiber

Grafana is an open-source platform for data visualization and monitoring. It allows developers to create interactive and customizable dashboards, using a variety of data sources, including InfluxDB, Prometheus, and Elasticsearch. Grafana also provides a rich set of features, such as alerting, plugins, and an API, which makes it a powerful tool for monitoring and troubleshooting applications.

React Three Fiber is a high-performance 3D library for React. It allows developers to create 3D graphics and animations using the familiar React syntax. React Three Fiber is built on top of Three.js, a powerful JavaScript library for creating 3D graphics, and it provides a set of hooks and components that make it easy to integrate 3D graphics into a React application.

Mistakes That I've Encountered

React version specified in the package.json file may not match the version used by Grafana. To resolve this, it may be necessary to either upgrade Grafana or build a custom version with the desired React version.

When using React Three Fiber, it is important to remember to change the mode in webpack to production to avoid freezing the browser, which is a known issue.

I'm writing this to save people a lot of time because this took me couple of days to figure out, maybe it looks simple but I've tried so many things that didn't work.

I hope this will help someone.

Deploy Meilisearch on Fly.io

JakovGlavac — Wed, 19 Oct 2022 23:08:19 +0000

Introduction

This guide explains how to deploy a ready-to-use Meilisearch instance on Fly.io.
First time I tried this I've had some problems that wasted me a lot of time, so to save you the time I'll create step-by-step instructions.

Just do it

So if you want to deploy it to fly io as fast as possible, this is the way.

In any folder create fly.toml, and copy the content

app = "my-meilisearch"
kill_signal = "SIGINT"
kill_timeout = 5
processes = []

[build]
  image = "getmeili/meilisearch"

[env]

[experimental]
  allowed_public_ports = []
  auto_rollback = true

[[mounts]]
  source = "disc1"
  destination = "/meili_data"

[[services]]
  http_checks = []
  internal_port = 7700
  processes = ["app"]
  protocol = "tcp"
  script_checks = []
  [services.concurrency]
    hard_limit = 25
    soft_limit = 20
    type = "connections"

  [[services.ports]]
    force_https = true
    handlers = ["http"]
    port = 80

  [[services.ports]]
    handlers = ["tls", "http"]
    port = 443

  [[services.tcp_checks]]
    grace_period = "1s"
    interval = "15s"
    restart_limit = 0
    timeout = "2s"

then login in fly io!

flyctl login

and then deploy it!

flyctl deploy

Theory

persistent storage

So, the "hard" part of deploying is to create persistent storage.
Fly.io has a guide on that here, but in short you need to add this part to your toml.

[[mounts]]
  source = "disc1"
  destination = "/meili_data"

This creates disc, that is mapped to this folder meili_data.

Why use /meili_data, because there is where melisearch stores your data.

docker image

If you want fly io to use docker image from docker hub you need to specify image in build step like this:

[build]
  image = "getmeili/meilisearch"

port

Meilisearch is by default on port 7700, so you need to tell fly io to listen to internal 7700 port.

[[services]]
  internal_port = 7700

Everything else is pretty much default.

And that's it 🎉!

How to translate HTML for free using google translate.

JakovGlavac — Sat, 20 Aug 2022 07:51:10 +0000

Introduction

While working on a new feature for my side project eduo instrukcije, I needed to translate HTML to other languages which was challenging to do for free. Google translate api has parameter "format" that when set to "html" ignores all tags and translates only real text, but it's not free. There are couple of reversed engineered google translate apis that are totally free, but none of them had the format option available. Then I found out that you can use Google Translate api inside google sheets, and you can create real apis with google sheets, and I think that's pretty cool.

How to do it?

First open google sheets and open a new app script

Then paste this doGet function

function doGet(e){
  var params = e.parameter;
  var translation = LanguageApp.translate(params.text, params.froml, params.to, {contentType: 'html'});

  return ContentService.createTextOutput(translation).setMimeType(ContentService.MimeType.TEXT);
}

Then go and deploy your api

Make sure that type is Web app and that everyone has access to it

Then copy your url

Testing

Go to your url and add query parameters

And that's it!

One more thing

If you want to use this inside sheets, just modify the script:

function translation(text, froml, tol) {
  return LanguageApp.translate(text, froml, tol, {contentType: 'html'});
}

Like this:

Press "run", and return on sheets.
Then you can use it like this: