How to turn off the NSFW filter in Stable Diffusion

When the Stable Diffusion AI image generator creates pictures, it sometimes flags ordinary outputs as Not Safe For Work (NSFW). If you use the software at home on your personal computer you may disable the NSFW filter.

  • Open the scripts/ file in a text editor
  • Add a new first line to the check_safety function to immediately return the original image and an empty string without checking. Leave the rest of the code as is, as it will not be executed.
    def check_safety(x_image):
        return x_image, ' '

ImportError: cannot import name ‘CLIPTextModelWithProjection’ from ‘transformers’

When Stable Diffusion throws the following error


ImportError: cannot import name ‘CLIPTextModelWithProjection’ from ‘transformers’

  • Open the environment.yaml
  • Change the version number of the transformers to
    - transformers==4.31.0
  • Update the environment with
    conda env update -f environment.yaml

Installing Stable Diffusion AI image generator

Install the Git client

Install Miniconda 3

Clone the Stable Diffusion GitHub repository

  • Cerate another directory on the same level: stable-diffusioncd

Download the latest Stable Diffusion checkpoint

Configure the Python environment with Miniconda

  • Start Miniconda from the Start Menu
  • In the Miniconda terminal execute the following lines
    • Create the ldm Python environment
      conda env create -f environment.yaml
      • this will cerate the Conda environment files at C:\Users\MY_USER_NAME\.conda\envs
        If anything goes wrong during the environment creation, delete the ldm folder and run this command again.
    • Activate the just created environment
      conda activate ldm

Copy the checkpoint file into the models directory

  • Open a terminal in the stable-diffusion directory
  • Create a directory for the model
    mkdir models\ldm\stable-diffusion-v1
  • Step into the new directory
    cd models\ldm\stable-diffusion-v1
  • Copy the downloaded .ckpt file into the models\ldm\stable-diffusion-v1 directory and rename it to model.ckpt
    copy C:\Users\MY_USER_NAME\Downloads\sd-v1-4-full-ema.ckpt model.ckpt

To use Stable Diffusion

Activate the Python environment

  • Start Miniconda 3 from the start menu
  • In the terminal navigate to the stable-diffusion directory
  • Activate the ldm Anaconda environment
    conda activate ldm

Generate the image

We will call a Python script with the –prompt argument and type the English description of the image

python scripts/ --prompt "a close-up portrait of a cat by pablo picasso, vivid, abstract art, colorful, vibrant" --plms --n_iter 5 --n_samples 1

The image will be created in the stable-diffusion\outputs\txt2img-samples\samples directory


To get help on using Stable Diffusion execute
python scripts/ --help

  • –plms specifies how images are sampled
  • –n_iter 5 sets the number of iterations
  • –n_samples 1 – the nmber of samples generated

For more information see

Creating Remix (React.js) web applications

Remix has an HTML first, simple data access philosophy. Most Remix web applications work without JavScript code in the browser. It is possible to create a complete dynamic data driven Remix web application with only server side JavaScript code with pure HTML in the browser.

About Remix

This back to the roots approach makes Remix applications easy to understand, extend, and troubleshoot. A single TypeScript file contains the database access (backend) and the browser side (frontend) code. The data transfer API setup between the server and the browser is handled entirely by the Remix framework, only a few lines of code is needed to access the data in the browser.

The loader() function reads the data from the database and exposes it in JSON format to the browser. We can even expose environment variables to the browser, but make not to send secret values, as those are accessible to the user.

In the browser side code we use “|| {}” to avoid TypeError: Cannot destructure property ‘incidents’ of ‘useLoaderData(…)’ as it is null.

// /app/routes/_index.tsx file

import { useLoaderData } from '@remix-run/react';
import { LoaderArgs, json } from "@remix-run/node";

// --------------------------------------

// The server side code
export async function loader({ request }: LoaderArgs) {

  const data = await GET_THE_DATA_FROM_THE_DATABASE();
  // Expose the data to the browser
  return json({ environment: process.env.ENVIRONMENT, data: data });


// --------------------------------------

// The browser side code
export default function Index() {

  const { environment, data } = useLoaderData<typeof loader>() || {} ;

  return (
      Environment: {environment.environment}


To create a new Remix web application

The official instructions are at Remix Quickstart

To start the development of a new Remix React.js web application

  • Create a new directory for the project
  • Create the .gitignore file
  • Open a terminal in the project directory and initialize a new Remix project. To learn about the Remix templates visit Remix Stacks. We will use the basic structure without any template.
    npx create-remix@latest MY_PROJECT_NAME
    • Answer y to the question
      Need to install the following packages:
      Ok to proceed? (y)
    • Select Just the basics and hit enter for the question
      What type of app do you want to create?
    • Select Remix App Server for the question
      Where do you want to deploy?
    • Select TypeScript and press enter for the question
      TypeScript or JavaScript?
    • Answer Y for the question
      Do you want me to run npm install?

Test the Remix web application

  • Open a terminal and navigate into the web application directory
  • Start the web server
    npm run dev
  • In the web browser navigate to http://localhost:3000/


There are multiple ways to reference style sheets in React, we will combine them to be able to use a global style sheet for the overall look and feel of the site and load additional page specific sheets.

  • Create the /app/styles directory for the style sheets
    mkdir app/styles
  • Create the /app/styles/global.css style sheet file
/* /app/styles/global.css file */

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;

body {
  max-width: 100vw; 
  font-family: Roboto, Helvetica, Arial, sans-serif;

a {
  color: inherit;
  text-decoration: none;

/* =========================================================== */

/* BEGIN Loading indicator fade in */

.fade-in-image {
  background-color: white;
  animation: fadeIn 5s;
  -webkit-animation: fadeIn 5s;
  -moz-animation: fadeIn 5s;
  -o-animation: fadeIn 5s;
  -ms-animation: fadeIn 5s;

@media (prefers-color-scheme: dark) {
  .fade-in-image {
    filter: invert(100%);
  .fade-in-image h1 {
    color: black;

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
@-o-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
@-ms-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }

/* END Loading indicator fade in */

/* =========================================================== */

/* BEGIN Menu */

.navlink {
  margin: 7px;
  margin-left: 20px;
  float: left;
  color: #f0f0f0;

#navbar a.pending {
  color: gray;

#navbar {
  color: white;
  font-weight: bold;

/* END Menu */

/* =========================================================== */

/* BEGIN Page content */

.pagecontent {
  margin-left: 20px;
  margin-right: 20px;

/* END Page content */
  • Update the /app/root.tsx file to load the global and page specific style sheets for every page. We also define the common title and favicon values for the entire site.
// /app/root.tsx file

import {
} from "@remix-run/react";

// ========================================

// Import the global style sheet
import styles from "~/styles/global.css";

// Import the LinksFunction
import type { LinksFunction } from "@remix-run/node";

// Expose the imported stylesheet to the <Links /> module
export const links: LinksFunction = () => {
  return [
      rel: "stylesheet",
      href: styles,

// ========================================

// The <Links /> component will create the <link ... HTML instruction in the <head> of all pages to load the style sheet
export default function App() {
  return (
    <html lang="en">
        <meta charSet="utf-8" />
        <title>MY APPLICATION NAME</title>
        <meta name="description" content="MY APPLCIATION DESCRIPTION" />
        <link rel="icon" href="/favicon.ico" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <Meta />
        <Links />
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />


To be able to navigate between pages we will create a menu system. To code it only once and use it in every page, we will create the Header component in its own file, and call it from every page of the application. In this example we will use Material UI and React components. After the </AppBar> instruction we will also add a loading indicator which automatically fades in when the page load takes a longer time.

  • Install the React and MaterialUI Node.js libraries. In the terminal execute
    npm install @mui/material @emotion/react @emotion/styled
  • Download or create an animated loading indicator gif image and save it in the /public directory and name it Loading_icon.gif
  • Create the _header.tsx file in the /app/routes directory
// /app/routes/_header.tsx file

// Remix imports
import { NavLink, useNavigation } from '@remix-run/react';

// Material UI imports
import AppBar from '@mui/material/AppBar';

// Cascading menu
import * as React from 'react';
import Button from '@mui/material/Button';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';

// Export the function to make it available to other modules
export default function Header(environment:any) {
  // ----------------------------------------------------
  // Loading indicator
  const navigation = useNavigation();
  const isLoading = Boolean(navigation.state === 'loading');

  // ----------------------------------------------------
  // Cascading menu

  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
  const handleClose = () => {

  // ----------------------------------------------------

  return (
      <div style={{width: '100%', backgroundColor: '#6ba4ab'}}>
          <img src="MY_HEADER_IMAGE.png" style={{width: '100%'}} />
      <AppBar id="navbar" position="static" style={{ display: 'inline-block', backgroundColor: '#6ba4ab'}} >

        <div className="navlink">
            to="/" end
            className={({ isActive, isPending }) =>
              isPending ? "pending" : isActive ? "active" : ""

        {environment.environment != 'production' ?
          <div className="navlink" style={{margin: '0', marginTop: '6px', marginLeft: '12px'}}>
            aria-controls={open ? 'basic-menu' : undefined}
            aria-expanded={open ? 'true' : undefined}
            sx={{color: '#f0f0f0', textTransform: 'none', fontFamily: 'Roboto, Helvetica, Arial, sans-serif', fontSize: '1rem', lineHeight: '1', letterSpacing: '0em'}}
                'aria-labelledby': 'basic-button',

              <MenuItem onClick={handleClose}>
                  className={({ isActive, isPending }) =>
                    isPending ? "pending" : isActive ? "active" : ""


        <div className="navlink">
            className={({ isActive, isPending }) =>
              isPending ? "pending" : isActive ? "active" : ""
            About this site


      { isLoading ? <div className="fade-in-image" style={{position: 'absolute', zIndex: '100', width: '100vw', height: '100vw'}}><h1 style={{position: 'absolute', top: '20px', left: '100px'}}>Loading data ...</h1><img src="Loading_icon.gif"/></div>


Add the menu to the home page

  • Update the /app/routes/_index.tsx file to call the header and display the menu and remove the sample links:
// /app/routes/_index.tsx file

import type { V2_MetaFunction } from "@remix-run/node";
import Header from "./_header";

export const meta: V2_MetaFunction = () => {
  return [
    { title: "New Remix App" },
    { name: "description", content: "Welcome to Remix!" },

export default function Index() {
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>

      {/* Display the Header component */}
      <Header />

      <div className="pagecontent">



In the next post we will display the version and the name of the envionment in the footer, so let’s create it with that in mind.

  • Create the /app/routes/_footer.tsx file
// /app/routes/_footer.tsx

// Pass the environment variable as 
// <Footer environment={environment} />

// Export the function to make it available to other modules
export default function Footer(props:any) {

  // React uses camelCase for CSS properties
  return (
    <div className="footer" style={{marginLeft: '20px'}} >
      Version: 2023-09-07_01 {props.environment}

ERROR: relation “…_seq” does not exist

PostgreSQL has three auto increment column types:


The pdAdmin 4 user interface unfortunately generates the wrong CREATE script for existing tables:

    id integer NOT NULL DEFAULT nextval('test_id_seq'::regclass)

If we execute it, we get the error message:

ERROR: relation “test_id_seq” does not exist
LINE 3: id integer NOT NULL DEFAULT nextval(‘test_id_seq’::regcl…

The correct syntax which auto generates the sequence too, is:

CREATE TABLE public.test (

For more information see Creating tables with PostgreSQL

How to center a DIV with CSS

To center a DIV horizontally

  • Make sure the parent element is as wide as the page (width: 100%)
  • Set the margin to auto

React example

<div style={{width: '100%'}}>
  <div style={{width: '800px', height: '600px', margin: 'auto', position: 'relative'}}>

To center a DIV only vertically

  • Set the position to absolute to take it out of the normal document flow
  • Set the top to 50% to line up the top edge of the DIV with the center of the page vertically
  • set the transform property to translate(0, 50%)

React example:

<div style={{width: '640px', height: '480px', top:'50%', transform: 'translate(0, -50%)', position: 'absolute'}}>

To center a DIV horizontally and vertically

  • Use similar steps as above for vertical centering, but
    • set both the left and top properties to 50%
    • set the transform property to translate(-50%, -50%)

React example

<div style={{width: '640px', height: '480px', left: '50%', top:'50%', transform: 'translate(-50%, -50%)', position: 'absolute'}}>

For more information

There is a great article by Jamie Juviler at 11 Ways to Center Div or Text in Div in CSS

Update Google Sheet with typescript

To be able to programmatically update Google Sheets, we need to enable the APIs and Service in Google Cloud Platform.

Create a new Google Cloud project

  • Log into the Google Cloud Console at
  • Click the down arrow of the project list
  • On the Select a project pop-up click the NEW PROJECT button

Enable the Google Sheet API

  • In the upper left corner click the “hamburger” menu icon and select APIs & Services
  • On the APIs & Services page click the + ENABLE APIS AND SERVICES button
  • Enter google sheet api into the search box and select the Google Sheets API tile
  • Click the Enable button

Apply Imported Fill Color is not available in Lucid Charts

To display dynamic data on Lucid Charts. we can link Google Sheets to Lucid Chart objects. The Pull fill color from Google Sheets section of the Lucid documents explain how to set the color of an object based on the cell color, but does not mention one important step. To be able to select the Apply Imported Fill Color option, first, we have to change the background color of the Google Sheet cell to any color.

In the Google Sheet

  • Select the header of the status column,
  • Set the background of the entire column to any color.

In Lucid Charts

  • Assign the cell to an object.
  • Click the three dots next to the column name.
  • Select Apply Imported Fill Color.

When we change the background color of the cell in Google Sheets the color of the object will change too.

Configure Epson ET-3850 scanning on Windows 11

Install the Epson ET-3850 scanner driver and scanning utility

  • Download the Scanner Driver and Epson Scan Utility from the Driver section.
    • for Epson ET-3850 – Scanner Driver and Epson Scan 2 Utility v6.5.28.0 (or later)
  • Double-click the downloaded file and install the application

Connect to the Epson ET-3850 scanner

  • Start the Epson Scan 2 Utility
  • On the Scanner Settings window click the Enable Editing button
  • Click the Yes button on the Access Control popup to allow changes to your device
  • Click the Add button
  • On the Add Network Scanner window enter a name for the scanner, click the the IP address, and click the Add button
  • On the Scanner Settings window click the OK button
  • Close the Epson Scan 2 Utility window with the X in the upper right corner

Scan with the Epson ET-3850 scanner

  • Start the Epson Scan 2 application