Improving old 3D renders with AI and SD

@racascou — Sat, 10 Dec 2022 15:38:31 +0000

There are some really good images produced with Stable Diffusion and the "new" methods that take in an image and/or a text prompt input. Since I've been dreaming with the day that we will have AI doing post rendering in games like in some 'state of the art' videos I've seen on youtube, I decided to try out this techniques on my old architectural 3D renders from college.

So here's the image I've chosen, I've cropped it to a 512px square since most interfaces restrict the resolution.

In order to generate the images I've used the following text prompt:

bathroom photo, Canon EOS R3, f/1.4, ISO 200, 1/160s, 8K, RAW, unedited, balance, in-frame

I've found the keywords to improve the results in this repository along with a lot of usefull info.

I've used the following implementations to generate the images, all of them are hosted on huggingface.co:

Manjushri/SD-2.1-Img2Img
Manjushri/SD-IMG2IMG-CPU * faster

I've also tried this other image generation implementation called Marco:

AkiKagura/Marco-Generation-Img2img

Here are the parameters values I've used:

Guidence Scale: 9 - 11
Number of Iterations: 25
Strength: 0.7 - 0.9

And here are some of the results of the SD img2img implementations:

And here are the results for the Marco img2img generator, it's worth noting that this ones took about 3 times longer:

As you can see in the first image, it's not rare to encounter watermark stamps on the generated images, certainlly a result of marked images on the training dataset.

Also pretty common to get weird toilets and other types of 'impossible designs'.

Considering that the time it took me to generate those images was close to the time it took to render the original images (in the old days, rendering reflection like this was a real pain), I think this is an amazing tool to quickly create "close to real" pictures to illustrate any kind of project.

What makes it amazing is that it accepts as input pretty raw images and the results can be as good if you calibrate the parameters correctly. (And it's free!)

Making the web a better place

@racascou — Wed, 08 Jan 2020 21:33:12 +0000

What you need to know? Some basic CSS
What you need to have? A Github account
What we gonna do? A dark theme for ladybug.dev

Hi there, have you ever entered a website and thought that you could improve the design? Maybe you saw a link called "fix our website" but you had no courage to try it? Or maybe you just wish that great site had a dark theme?

Here you will learn how to begin being a part of the web development.
We will take a look at this amazing podcast website and we're gonna build a dark theme for it. The code you will see here is the one current working at the site and all links to the real thing will be available for you check every step.

Our to do list:

Find the website code (github repository)
Find the file to edit
Write some CSS
Test our changes
Fork the repository (create a copy to edit)
Create a branch (optional)
Make a Commit (save our work in git)
Make a Pull Request (upload our work)

So let's begin, the first thing we need is the website code. Since most websites today use a lot of back-end services we can't do like in the 90's and just "right click" and "view source". That will show us just the HTML and we won't have a nice way to send it, can you imagine uploading a zip file in an email for every change in the site, it just won't work on the long run.

✅ 1. Find the website code

Thankfully the site we are going to work on has a public repository and you can find it on the footer clicking the "fix our site" link. Before starting to work, you should send a DM or create a issue in Github to notify the site owner of your intentions and make sure it will be well received.

✅ 2. Find the file to edit

Now let's find where in the rep we should make our changes. There are lot's of files in the repository and we just want to change the styles. To find the file we need, let's make a search in the Github repository for "extension:css". The results show us a few style-sheets but only one of them (src/pages/pages.css) is not under the components folder. So this gotta be the one we need in order to change all the website's pages.

✅ 3. Write some CSS

Since we don't want to impose the dark theme to every user, we are going to use the CSS media query "prefers-color-scheme: dark". This will apply our new styles only for users that have selected dark mode in their system options.

Let's do some coding shall we? Nothing complicated, just a dark background and white text color:

@media (prefers-color-scheme: dark) {
  html body {
    background-color: #12171c; 
    color: #fff;
  }
}

✅ 4. Test our changes

If you wanna test it out, you have a few options. The most basic is to use devtools (F12), but I won't go in details about it because I love devtools so much that this article would become a book. If you wanna learn about it there are lots of great resources and I strongly recommend you doing it.

But for those who want a faster solution I suggest the Stylus extension. It will inject custom CSS to any website, so if the webmaster don't accept your changes you can still have them on your computer.

After testing you will already see some nice results, but there are a few details to fix. The links are too dark and we don't want poor contrast, it's uncomfortable to read and against all accessibility rules. To fix them we will use a new color for the font and the bottom border. Also let's give them a highlight color for when the link is focused:

  ul a, p a, a.highlight {
    color: #f05657;
    border-bottom: 2px solid #f05657;
  }
  ul a:hover, p a:hover, a.highlight:hover {
    color: #f25ea2;
    border-bottom: 2px solid #f25ea2;
  }

Finally we have some images that have transparent background that are also losing contrast, we can fix that by adding a white background with some opacity (alpha channel) using rgba:

  ul img, p img {
    background: rgba(255,255,255,0.3);
  }

✅ 5. Fork the repository

✅ 6. Create a branch

Nice, it's looking great! We are ready to send our code to the Github repository. First let's fork the repository (with the "Fork" button). Next let's create a branch for our changes, this is not required but it makes things in the long run. To create a branch just click the drop-down menu that says "Branch: master" and type the new branch name and then click in "Create branch".

Let's open pages.css and click the pen icon (next to the garbage icon) to edit the file. On the bottom of the code let's paste all our CSS snippet:

@media (prefers-color-scheme: dark) {
  html body {
    background-color: #12171c; 
    color: #fff;
  }
  ul a, p a, a.highlight {
    color: #f05657;
    border-bottom: 2px solid #f05657;
  }
  ul a:hover, p a:hover, a.highlight:hover {
    color: #f25ea2;
    border-bottom: 2px solid #f25ea2;
  }
  ul img, p img {
    background: rgba(255,255,255,0.3);
  }
}

✅ 7. Make a Commit

Now let's save our changes by clicking "Commit changes", the green button on the bottom. You can add a title and some brief explanation to remind yourself of what you changed. Now our changes are saved in our fork repository, we can check if it's all good and fix any silly mistakes before making our "Pull request" or just PR. That's just fancy git term for "Send code to original repository".

You can check the "git-diff" of each commit to get a list of all files that were changed and be extra sure that your code is just as you intended.

✅ 8. Make a Pull Request

You will find the "Pull request" button right under the green "Clone or download" button in the fork repository first page. You can add a title and some explanation to your pull request to facilitate the analysis of your request. It's also good to have a nice description if you ever need to undo some old change.

All your commits will be listed in the PR link and it's great to discuss further improvements or just to understand how the code was developed.

Conclusion

That's all ✨, you've done your part. Now you just gotta wait for the repository owner to merge your request and the whole world will be able to enjoy you contribution, ain't that great?

Remember, you can change anything in the site, not only the style. So what you are waiting for? Go out there and make the web a better place for everyone!!!

And don't forget to share the knowledge ❤ 🦄 🌈

DEV Community: @racascou