---
title: Running Local LLMs with Web Search Using Ollama and Open WebUI
---

![3D illustration of a llama playfully interacting with a wooden Pinocchio in a vibrant, tech-themed environment.](https://res.cloudinary.com/di41jhirl/image/upload/v1724640953/llama-interacting-with-wooden-pinocchio.webp)

Running large language models (LLMs) on your local machine can be pretty cool. Not only do you get more control, but you also avoid the privacy concerns and potential lags that come with cloud-based solutions. If you're ready to take the plunge into local LLMs, I'll walk you through how to set up and run models like Gemma2, Llama3.1, and Phi 3.5 using [Ollama](https://ollama.com), and then spice things up with web search capabilities via [Open WebUI](https://github.com/open-webui/open-webui) and [Pinokio](https://pinokio.computer).

### Prerequisites

Before we dive in, here’s what you’ll need:

- **A capable machine**: You’ll need some serious horsepower—a modern GPU with at least 8 GB of VRAM will do, but more is always better.
- **[Ollama](https://ollama.com)**: This is your go-to command-line tool for running LLMs. You can grab it from the Ollama website.
- **[Pinokio](https://pinokio.computer)**: A nifty platform that helps manage AI models and tools, including Open WebUI.

### Step 1: Setting Up Ollama

Ollama makes running local LLMs super easy. Here’s how you get started:

1. **Install Ollama**: Head over to the [Ollama website](https://ollama.com), download the tool, and follow the installation instructions.

2. **Download the Model**: You can download your chosen model (Llama3.1, Phi 3.5, or Gemma2) from the respective official sources. Make sure you stash the model files in a directory that Ollama can access.

3. **Run the Model**: After downloading, fire up your terminal and run one of the following commands, depending on the model you want to use:

```bash
ollama run phi3.5
```

```bash
ollama run llama3.1
```

```bash
ollama run gemma2
```

Boom! You’re now running the selected model locally, and you can interact with it right from your terminal.

### Step 2: Installing and Using Pinokio with Open WebUI

Now, let’s get [Pinokio](https://pinokio.computer) and [Open WebUI](https://github.com/open-webui/open-webui) in the mix. Pinokio is a robust platform that makes managing and running AI models straightforward, and it includes Open WebUI as part of its toolkit.

1. **Download Pinokio**: Visit the [Pinokio website](https://pinokio.computer) and download the app. Pinokio is your all-in-one platform for managing AI models, and it makes things super simple.

2. **Install Open WebUI through Pinokio**: After you’ve got Pinokio installed, use it to set up [Open WebUI](https://github.com/open-webui/open-webui):

   - Open Pinokio, find Open WebUI in the interface, and install it by following the on-screen instructions.

3. **Run Pinokio with Open WebUI**: Once everything’s set up, launch Open WebUI directly from Pinokio. It’ll provide you with a web-based interface where you can interact with your local models. Just head over to `http://127.0.0.1:42000/` in your browser, and you’re good to go.

### Step 3: Enabling and Using Web Search in Open WebUI

To fully unlock the potential of your local models, enabling web search will allow them to pull in real-time data from the web, enhancing their responses with up-to-date information.

#### 1. Enable Web Search:

- **Navigate to the Admin Panel**:

  - In Open WebUI, go to the `Admin Panel` -> `Settings` -> `Web Search`.

- **Activate Web Search**:

  - Toggle the `Enable Web Search` option to activate this feature for your models.

- **Choose Your Search Provider**:
  - For simplicity and privacy, I recommend selecting DuckDuckGo from the `Web Search Engine` dropdown menu. DuckDuckGo is known for its privacy-focused approach, making it a great choice for maintaining data privacy while fetching live web results.

![Admin Settings Web Search](https://res.cloudinary.com/di41jhirl/image/upload/v1724730002/openwebui_admin_settings.png "800×658")

#### 2. Using Web Search:

With web search enabled, your models can now perform live searches using DuckDuckGo. This means when you ask a query that requires current information, the model will automatically retrieve relevant data from the web, making your interactions much more informed and powerful.

- **Access the Web Search Toggle**:

  - In your chat interface, click on the `+` icon next to the message input field.

- **Toggle Web Search On/Off**:
  - Enable or disable Web Search as needed for your current session. Note that this feature is session-specific, meaning it will turn off if you reload the page or switch to another chat.

![Web Search UI Toggle](https://res.cloudinary.com/di41jhirl/image/upload/v1724730197/openwebui_chat_web_search.png "384×189")

You can further customize your settings or choose different search providers based on your needs. Open WebUI offers great flexibility in how it handles web searches, making it easy to tailor the experience to your preferences. For more detailed instructions and options, you can refer to the [Open WebUI Web Search configuration guide](https://docs.openwebui.com/tutorial/web_search).

### Step 4: Interacting with Your Models

With everything set up, it’s time to start playing around with your models.

1. **Querying the Models**: Enter your queries as you normally would. If the model needs extra info, it’ll use the enabled DuckDuckGo search to give you more accurate and up-to-date responses.

### Conclusion

And there you have it! You’ve set up a powerful local LLM environment using [Ollama](https://ollama.com), with enhanced functionality thanks to [Open WebUI](https://github.com/open-webui/open-webui) and [Pinokio](https://pinokio.computer). This setup is not just simple and easy to use, but it also offers significant benefits like enhanced privacy, control, and reduced latency. Whether you're concerned about data privacy, looking to minimize latency, or just want a cloud-independent solution, this setup gives you a solid foundation to work from. Happy experimenting!


---
title: "Building a Window Resizer with AutoHotkey, React, and Electron"
---

![A modern, glowing square device with a central gradient circle, featuring neon blue and pink edges on a dark background](https://res.cloudinary.com/di41jhirl/image/upload/v1724630662/window-center-resizer-thumbnail.png)

### Introduction

Managing multiple windows across different monitors can be challenging, especially when precision is required. This is particularly true for developers, power users, and anyone who needs to organize their workspace efficiently. To address this issue, I developed the "Window Center & Resizer" application. This tool, which has been featured on prominent sites like [Softpedia](https://www.softpedia.com/get/Desktop-Enhancements/Other-Desktop-Enhancements/Window-Center-Resizer.shtml) and [MajorGeeks](https://www.majorgeeks.com/files/details/window_center_resizer.html), empowers users to quickly center and resize their windows using custom keyboard shortcuts. In this blog post, I’ll walk you through how I built this app, starting with the core AutoHotkey (AHK) script that drives its functionality, and then exploring how it integrates with modern web technologies like React and Electron.

### Core Technologies

The "Window Center & Resizer" application is built using a combination of the following technologies:

- **AutoHotkey (AHK)**: Known for its powerful scripting capabilities, AHK is ideal for precise window management tasks. It enables the automation of tasks like window positioning and resizing through simple scripts.
- **React**: A popular JavaScript library for building user interfaces, React was chosen for its component-based architecture, which makes it easy to manage and update the UI as the application grows.
- **Electron**: This framework allows the app to run as a cross-platform desktop application, making it possible to integrate web technologies with native desktop functionalities seamlessly.

These technologies were chosen for their specific strengths and the way they complement each other in creating a robust and flexible desktop application.

### Understanding the AHK Script

At the heart of the "Window Center & Resizer" application is an AutoHotkey script that manages the core functionality of window centering and resizing. The script reads user-defined settings from a JSON file and sets up the hotkeys that trigger these actions.

#### Loading User Settings & Hotkey Setup

The script starts by loading user settings from a JSON file and converting the keybindings into a format that AutoHotkey can understand. This conversion is handled by the `convertHotkeysJsToHotHotkeys` function.

```ahk
hotkeysJsToHotHotkeys := Map("shift", "+", "ctrl", "^", "alt", "!", "meta", "#")

convertHotkeysJsToHotHotkeys(key) {
  keys := StrSplit(key, "+")  ; Split key by "+"
  hotkeys := []
  for each, k in keys {
    k := StrLower(Trim(k))
    if (hotkeysJsToHotHotkeys.Has(k))
      hotkeys.push(hotkeysJsToHotHotkeys.Get(k))
    else
      hotkeys.push(StrUpper(k))
  }
  return Join("", hotkeys*)
}

jsonContent := Fileread(A_AppData . "\\window-center-resize\\settings.json")
json := jxon_load(&jsonContent)

centerWindowKey := convertHotkeysJsToHotHotkeys(json["centerWindow"]["keybinding"])
resizeWindowKey := convertHotkeysJsToHotHotkeys(json["resizeWindow"]["keybinding"])

if (centerWindowKey != "")
  Hotkey(centerWindowKey, CenterWindow, "On")
if (resizeWindowKey != "")
  Hotkey(resizeWindowKey, ResizeWindow, "On")
```

**Explanation**:

- **Loading User Settings**: The script reads user settings from a JSON file, which includes the keybindings and window sizes defined in the app’s UI.
- **Hotkey Definitions**: The script dynamically sets up hotkeys based on the user’s preferences. It defines functions for centering and resizing windows when the hotkeys are pressed.
- **Keybinding Conversion**: The `convertHotkeysJsToHotHotkeys` function converts keybindings from a user-friendly format (e.g., "Ctrl+Shift+C") into a format recognized by AutoHotkey (e.g., `^+C`). This ensures that user-defined hotkeys are correctly interpreted and executed by AutoHotkey.

#### Window Management Logic

The core functionality for managing windows is implemented in the `CenterWindow` and `ResizeWindow` functions, which handle the actual positioning and resizing of windows.

```ahk
CenterWindow() {
  hwnd := WinExist("A")
  if (hwnd) {
    WinGetPos(&WinX, &WinY, &Width, &Height, hwnd)
    NewX := mon.WALeft + (mon.WAWidth - Width) / 2
    NewY := mon.WATop + (mon.WAHeight - Height) / 2
    WinMove(NewX, NewY, Width, Height, hwnd)
  }
}

ResizeWindow(WinTitle) {
  static size := 1
  global toggleSizes
  size++

  if (size > toggleSizes.Length) size := 1 ; Reset size to 1 if it exceeds array length

  hwnd := WinExist("A")  ; Get handle to active window
  if (hwnd) CenterAndResizeWindow("A", toggleSizes[size]["width"], toggleSizes[size]["height"])
}
```

**Explanation**:

- **Window Management Logic**: The `CenterWindow` and `ResizeWindow` functions contain the logic for positioning and resizing windows based on the current monitor’s dimensions and user-defined presets. The `ResizeWindow` function also rotates through different size presets, allowing for dynamic resizing.

### Integrating AHK with Electron

To integrate the AHK script with the broader application, I used a portable AHK executable that runs seamlessly in the background, handling the window centering and resizing tasks. This integration is managed by the `autohotkey.ts` file within the Electron main process.

```ts
import * as child from "child_process";
import { app } from "electron";
import path from "path";

async function startAutoHotkeyProcess() {
  const resourcesPath = app.isPackaged
    ? path.join(process.resourcesPath, "assets", "autohotkey")
    : path.join(__dirname, "../../assets", "autohotkey");

  const autohotkeyPath = path.join(resourcesPath, "AutoHotkey32.exe");
  const scriptPath = path.join(resourcesPath, "center-window-resize.ahk");

  try {
    child.spawn(autohotkeyPath, [scriptPath]);
  } catch (error) {
    console.error("Unexpected error spawning AutoHotkey:", error);
  }
}
```

**Explanation**:

- **Spawning the AHK Process**: The `startAutoHotkeyProcess` function spawns the AHK executable and runs the specified script. This allows the AHK script to handle window management tasks in the background. Using a portable executable avoids the need for users to install AHK separately, streamlining the setup process and making the application more accessible.

### Managing Settings with `settings.ts`

To make the application flexible and user-friendly, I implemented a settings management system that allows users to customize their keybindings and window size presets. The `settings.ts` file is responsible for handling these settings, ensuring that any changes are saved and reflected in the AHK script.

#### Loading and Saving Settings

The settings are stored in a JSON file and are loaded when the application starts. If the settings file doesn’t exist, it’s created with default values.

```ts
import { promises as fs, existsSync, watch } from "fs";
import { join } from "path";
import { app } from "electron";
import defaultSettings from "../constants/defaultSettings.json";
import { reloadAutoHotkey } from "./autohotkey";

const settingsPath = join(app.getPath("userData"), "settings.json");

export async function loadSettings() {
  if (!existsSync(settingsPath)) {
    await fs.writeFile(settingsPath, JSON.stringify(defaultSettings, null, 2));
  }
  reloadAutoHotkey();
}
```

#### Real-Time Settings Update

Whenever settings are updated, the AHK script is reloaded to apply the changes immediately.

```ts
export async function saveCenterSettings(centerKeybind: string) {
  const rawSettings = await fs.readFile(settingsPath, "utf8");
  const settings = JSON.parse(rawSettings);
  settings.centerWindow.keybinding = centerKeybind;
  await fs.writeFile(settingsPath, JSON.stringify(settings, null, 2));
  reloadAutoHotkey();
}
```

**Explanation**:

- **Settings Management**: This file handles reading, writing, and monitoring changes to the settings. It ensures that any updates to the keybindings are persisted and that the AHK script is reloaded to reflect these changes.
- **Integration with AHK**: The `reloadAutoHotkey` function is called whenever the settings are loaded or updated, ensuring that the AHK script is always running with the latest configuration.

### Visual Demonstration

To give you a better idea of how the application works, here are some screenshots:

![Center Window Tab](https://res.cloudinary.com/di41jhirl/image/upload/v1722415826/mb3jp3gaherwkgme6vi4.png '561×629 | The "Center Window" tab allows users to set a custom keybinding for centering the currently active window')

![Resize Window Tab](https://res.cloudinary.com/di41jhirl/image/upload/v1722415826/fpcyvkh9llcwvrexelbz.png '558×988 | The "Resize Window" tab enables users to define custom size presets and associate them with a keybinding for easy resizing')

### Conclusion

The "Window Center & Resizer" application exemplifies how traditional scripting languages like AutoHotkey can be seamlessly integrated with modern web technologies to create an intuitive and powerful user experience. By combining AHK with React and Electron, this application offers a robust solution for managing windows across multiple monitors, delivering the flexibility and precision that users need.

I encourage you to try out the application and share your feedback or even contribute to its development on [GitHub](https://github.com/Devail1/window-center-resize). Your contributions and insights can help make this tool even better!

### Additional Links to Full Files

- **Full AHK Script**: [`center-window-resize.ahk`](https://github.com/Devail1/window-center-resize/blob/main/assets/autohotkey/center-window-resize.ahk)
- **AutoHotkey Process Management**: [`autohotkey.ts`](https://github.com/Devail1/window-center-resize/blob/main/src/main/autohotkey.ts)
- **Settings Management**: [`settings.ts`](https://github.com/Devail1/window-center-resize/blob/main/src/main/settings.ts)


---
title: 'Boost Your Next.js Images with Slick Skeleton Loaders'
---
![Next.js image optimization code snippet](https://res.cloudinary.com/di41jhirl/image/upload/v1712148760/nextjs-img-loader-snippet.png ' <span> Source: <a href="https://github.com/vercel/next.js/discussions/35675#discussioncomment-8519222">@michalhonc</a> </span>')

Ever feel like you're staring at a blank canvas while your Next.js images lumber in? Skeleton loaders are your secret weapon to banish boredom and keep users engaged. These lightweight placeholders act as a visual cue, letting users know awesome content is on its way.

**The Beauty? You can achieve this with Tailwind CSS and a sprinkle of JavaScript, without needing fancy state management. 🪄**

**Why Skeleton Loaders?**

This approach offers several advantages:

- **Superior User Experience:** Bridge the gap between blank screens and loaded images, keeping users from bouncing.
- **First Impressions Matter:** A polished initial load makes a great first impression, setting the tone for a positive user experience.
- **Simplicity is Key:** This approach leverages the power of Tailwind CSS for a clean and straightforward implementation..

We'll create a placeholder effect using CSS while images load in the background. This keeps users engaged with a lightweight solution powered by CSS and data attributes.

```jsx
<Image
  // other props
  data-loaded="false"
  onLoad={(event) => {
    event.currentTarget.setAttribute("data-loaded", "true");
  }}
  className="data-[loaded=false]:animate-pulse data-[loaded=false]:bg-gray-100/10"
/>
```

**Decoding Michalhonc's Code Snippet**

Let's dissect the code snippet from Next.js community member michalhonc to understand how it works:

- `data-loaded='false'`: This sets a custom data attribute named "loaded" with an initial value of "false," indicating the image hasn't loaded yet.
- `onLoad` event handler: This defines a function that triggers when the image finishes loading.
- `onLoad` inner function: This function updates the value of the "loaded" data attribute to "true" once the image has loaded.
- **Tailwind CSS Classes in Action:** These classes leverage Tailwind CSS to apply a cool "pulse" animation effect and a light gray background only when the "loaded" data attribute is "false," providing a basic placeholder effect.

**The Perks**

This approach offers several benefits:

- **Less JavaScript, More Speed**: By relying on CSS and data attributes, we avoid the need for extensive JavaScript tracking logic using useState or similar methods. This results in cleaner and potentially faster code.
- **Performance Boost**: Eliminating unnecessary JavaScript execution for basic loading states can have a positive impact on website performance, especially for users on mobile devices or slower connections.
- **Code Clarity**: Separating loading state logic into CSS and data attributes keeps the image component code concise and easier to maintain.

**Additional Considerations**

While this technique is a valuable solution for basic scenarios, it's important to consider its limitations:

- **Customization Constraints:** Compared to custom JavaScript solutions, this approach offers less flexibility for complex loading state animations or interactions.
- **Browser Compatibility:** While data attributes are widely supported, older browsers might not handle them as efficiently.

For situations requiring advanced loading state features or extensive customization, libraries specifically designed for image loading with advanced functionalities might be a better choice.

**In Conclusion**

By leveraging the power of CSS and data attributes, we can achieve a clean and efficient way to manage loading states for Next.js image components. This approach reduces JavaScript usage, potentially improves performance, and keeps the code cleaner. While it has limitations for complex scenarios, it's a valuable technique for optimizing basic image loading experiences in your Next.js applications.

**Inspired By**

This blog post was inspired by a valuable code snippet shared by michalhonc on the Next.js discussion forum. You can find the original discussion thread [here](https://github.com/vercel/next.js/discussions/35675#discussioncomment-8519222).


Boost Your Next.js Images with Slick Skeleton Loaders

---
title: 'Simplify Your App Development with PocketBase: A One-File BaaS Solution'
---

![A brown and white gopher with glasses peeking out of a pocket](https://res.cloudinary.com/di41jhirl/image/upload/v1711416613/pocketbase-realistic_luww7u.png "Artwork inspired by \<a href=\"https://github.com/marcusolsson/gophers\">[marcusolsson/gophers]\</a>")

Building applications should be a creative process, not a wrestling match with complex databases and server setups. Enter PocketBase, your open-source backend hero, similar to solutions like Firebase or Supabase, that simplifies development with its powerful features packed into a single, lightweight file. This focus on a single-file architecture, built with Go and leveraging SQLite, contributes to PocketBase's efficiency and speed.

**Get Up and Running in Minutes**

PocketBase offers a refreshingly simple setup process. Here's how to get started quickly:

1. **Download the Prebuilt App**: Visit the [PocketBase website](https://pocketbase.io/) and download the prebuilt app for your operating system (Linux, Windows, or macOS).
2. **Run the Application**: Extract the downloaded archive, navigate to the extracted directory, and execute the `./pocketbase serve` command to launch PocketBase.

## Welcome to Your New Backend!

PocketBase provides a web server with fantastic features:

* **Effortless Static Content Serving**: Place your static content (HTML, CSS, images, etc.) in the `pb_public` directory within the extracted folder, and PocketBase will serve it at [`http://127.0.0.1:8090`.](http://127.0.0.1:8090.)
* **Intuitive Admin Dashboard**: Manage your data, users, and settings easily through the user-friendly Admin UI at [`http://127.0.0.1:8090/_/`.](http://127.0.0.1:8090/_/.)
* **RESTful API Power**: Interact programmatically with your data using the powerful RESTful API at [`http://127.0.0.1:8090/api/`.](http://127.0.0.1:8090/api/.)

## Securing Your Backend Fortress

Create an admin account (email and password) upon your first visit to the Admin UI to manage your PocketBase instance and control access.

## Data Management Made Simple

PocketBase utilizes an embedded SQLite database for data storage, ensuring efficiency and a lightweight footprint. It automatically creates two directories alongside the executable:

* `pb_data`: Stores your application data and uploaded files. Add this directory to your `.gitignore` file to prevent accidental inclusion in version control.
* `pb_migrations`: Contains JavaScript migration files that track changes to your data collections. These files can be safely committed to your version control repository.

## Beyond Simplicity: Customization and Control

While PocketBase offers a fantastic developer experience out of the box, it also empowers you with customization options.

## Deployment Options: Take Your App to the Cloud

While this post focuses on local development, PocketBase offers seamless deployment to the cloud. Explore services like Fly.io or PocketHost.io for effortless deployment of your PocketBase-powered applications.

## Ready to Streamline Your Backend Development?

PocketBase offers a compelling solution for developers of all experience levels. With its straightforward setup, intuitive interface, and powerful features, PocketBase can transform your backend development workflow. So, ditch the database drama and download PocketBase today! Experience the freedom of a developer-friendly backend that gets you coding, not configuring.

> PocketBase is under active development, and full backward compatibility is not guaranteed until version 1.0.0. While it's a fantastic tool for development and prototyping, it's currently not recommended for production-critical applications unless you're comfortable managing potential migration steps.

Simplify Your App Development with PocketBase: A One-File BaaS Solution

---
title: 'Deploying an Express API to Vercel: A Step by Step Guide'
---

***This blog post is based on a video by Coding Garden and explores how to deploy an Express API to Vercel.***

![A stack of colorful shipping containers at a port facility](https://images.pexels.com/photos/1427541/pexels-photo-1427541.jpeg)

While Vercel is known for its ease of deploying serverless functions and Next.js applications, it can also be used for Express APIs, albeit with some caveats. This tutorial will walk you through the process of deploying your Express API to Vercel, ensuring you're aware of the considerations involved.

## Why Deploy an Express API to Vercel?

While not the typical use case, deploying an Express API to Vercel might be appealing if you already have an existing API and want to leverage Vercel's deployment features. However, it's important to be aware of limitations. Vercel is not ideal for applications requiring long-lived connections like websockets or server-sent events.

## Prerequisites

Before we dive in, make sure you have the following:

* An existing Express API project
* Node.js and npm installed on your machine
* Basic understanding of Express and deploying applications

## Step 1: Create an Express API (if needed)

If you don't have an Express API yet, you can easily create one using a starter template. Here's an example using create-express-api with TypeScript:

```bash
npx create-express-api my-express-api --typescript
```

This creates a directory named `my-express-api` with a basic Express API setup.

## Step 2: Configure Your Project for Deployment

### Create a public Folder

Even if your Express API doesn't serve static files, Vercel expects a public folder. Create an empty one with a `.gitkeep` file inside:

```bash
mkdir public
touch public/.gitkeep
```

### Create a vercel.json File

This file defines rewrite rules for Vercel to handle requests appropriately. Create a versal.json file at your project's root and add rewrite rules. Here's an example:

```javascript
{ "version": 2, "rewrites": [{ "source": "/(.*)", "destination": "/api" }] }
```

This rule rewrites all incoming requests to your Express API. Adjust the source and destination based on your project structure.

### Override the Build Command

Vercel manages the build process, so you don't need a separate build command. Override the default build command in your package.json:

```javascript
 "scripts": {
    "build": "echo 'Hello, Vercel!'"
  }
```

## Step 3: Deploy Your Express API to Vercel

With your project configured, it's time to deploy! Run the following command from your project's root:

```bash
vercel --prod
```

Follow the prompts to create a new project (if needed), choose your Vercel account, and deploy. Vercel will handle the deployment, and you'll receive a URL for your deployed Express API.

## Conclusion

This guide has shown you how to deploy an Express API to Vercel. Remember that Vercel is not primarily designed for Express APIs, so consider the limitations discussed earlier. Refer to Vercel's documentation for further details on deployment and best practices.

**Additional Resources:**

* [Video Link](https://youtu.be/B-T69_VP2Ls)
* [Coding Garden](https://www.youtube.com/c/CodingGarden)
* [Vercel guide on deploying Express APIs](https://vercel.com/guides/using-express-with-vercel)

Deploying an Express API to Vercel: A Step-by-Step Guide

---
title: 'Hello and welcome to my MDX page!'
---

## A Detailed Exploration Welcome to my first blog post using MDX!

This is a simple example showcasing the basic structure. Here's some **bold** text and some *italicized* text. You can also add links like this: [link text](https://www.example.com).

![A colorful bar chart with different sized bars representing different categories](https://images.pexels.com/photos/262508/pexels-photo-262508.jpeg)

Let's explore some additional features!

**1. Syntax Highlighting:**

MDX supports syntax highlighting for various programming languages. This allows you to showcase code snippets with proper formatting and coloring, making them easier to read and understand. Here's an example of JavaScript code:

```javascript
function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("John");
```

**Explanation:**

* We've added the `style` attribute to the image tag.
* Within the `style` attribute, we've defined `border-radius: 50px;`. This sets a circular border radius to the image. You can adjust the value (e.g., `10px` for a softer curve) to achieve your desired effect.

**2. Using a CSS Class (Optional):**

This approach involves creating a CSS class for styling and applying it to the image:

**a) Create a CSS class (assuming a CSS file named** `styles.css`**):**

```css
.rounded-image {
  border-radius: 50px; /* Adjust the value for desired radius */
}
```

# GFM

## Autolink literals

[www.example.com](https://www.example.com), [https://example.com](https://example.com), and [contact@example.com](mailto:contact@example.com).

## Footnote

A note\[^1]

\[^1]: Big note.

## Strikethrough

\~one~ or ~~two~~ tildes.

## Table

| a   | b   |   c |  d  |
| --- | :-- | --: | :-: |

## Tasklist

* [ ] to do
* [x] done

---
title: 'Unleash Your Creativity: Free Image Generation with Fooocus'
---
**_Generate stunning visuals from your imagination with Fooocus, a free and user-friendly image generation tool._**

![A close-up of a human eye with a black pupil and a blue iris. Raindrops are visible on the flower petals and the eye.](https://res.cloudinary.com/di41jhirl/image/upload/v1711423353/creative-focus_xcywmc.png 'Made in Fooocus with "creative focus" prompt')

Imagine describing a fantastical landscape and seeing it come to life exactly as you envisioned it. Fooocus, a free and user-friendly image generation tool, makes it possible.

Transform your imagination into stunning visuals with Fooocus. Forget expensive subscriptions or limited access – Fooocus is open-source, giving you complete control over the process, and ensures your creations remain confidential on your machine.

**Inspired by Stable Diffusion and Midjourney, Made for Everyone**

Fooocus takes the best of both worlds:

- **Offline, Open-Source, and Free:** Just like Stable Diffusion, Fooocus empowers you with complete control and privacy. No hidden fees or internet connection required.
- **Focus on the Creative, Not the Technical:** Inspired by Midjourney's user-friendly approach, Fooocus minimizes technical complexities. Simply provide prompts and images, and let Fooocus handle the rest.

The developers of Fooocus have streamlined the experience. Between download and generating your first image, there are just a few clicks involved! Plus, Fooocus requires minimal GPU memory (4GB Nvidia minimum), making it accessible to a wider range of creators.

## Getting Started with Fooocus

Ready to unleash your creativity? Here's a quick guide to get you started with Fooocus:

**1. Download and Installation:**

Head over to the [Fooocus GitHub page](https://github.com/lllyasviel/Fooocus) to download the software. The download itself is manageable (around 2GB), but keep in mind the extracted folder and models will require more space (up to 24GB).

- Choose a download location. Creating a dedicated "Fooocus" folder is recommended.
- Extract the downloaded file.
- Double-click the "run.bat" file. The first time you run a model's .bat file, it will download and install the model itself (takes a few minutes). Subsequent launches will be much faster.

**2. User Interface:**

Upon installation completion, a local browser tab will open, serving as your Fooocus interface. Now you're ready to create!

## A World of Possibilities Awaits

Fooocus goes beyond simplicity. It boasts "lots of inner optimizations and quality improvements," ensuring exceptional results. Forget about fiddling with technical parameters; Fooocus empowers you to explore the depths of your imagination and create stunning visuals with ease.


Hey, I'm Liav 👋

Senior software engineer building AI-native and agentic systems.

Writing

Projects

Experience