Forem: Adam

DYI AI Text "Cleaner"

Adam — Sat, 03 Feb 2024 05:45:52 +0000

I was looking through hacker news an saw this post about some app. The App will take any highlighted text and "enhance" it using chatgpt after the user does some keybinding. And then lower someone said that they just created a script it do it for them and save $$ a month.

So I said screw it, I'll do it myself as well and started chatting with my personal E2 engineer, ChatGPT.

(I'm clicking a keyboard shortcut to make this generate)

Setting up the bash script

First off if you don't have jq installed make sure you have it.

brew install jq

Create a folder somewhere easy to access and store your script. For the past of this guide it will be ~/ai_text_cleaner.

mkdir ~/ai_text_cleaner

Now download my script to that folder.

wget -O ~/ai_text_cleaner/ai_text_cleaner https://raw.githubusercontent.com/nrgapple/scripts/main/ai_text_cleaner/ai_text_cleaner

The repo is here

Next add a .env file in the directory and add your OpenAI key to it.

OPENAI_API_KEY=[your-key-here]

Last we need to make the script executable.

chmod +x ~/ai_text_cleaner/ai_text_cleaner

Lets test if it works.

~/ai_text_cleaner/ai_text_cleaner "ths is sme text that i wrot poorly and rlly fast to show if you can cln up stuff well."

I get this as a response:

This is some text that I wrote poorly and really fast to see if you can clean up stuff well.

Nice! Lets move on.

Set up Automator on Mac

Run this command to pull down repo, pull out the automator action folder and remove the repo. (I recommend doing this in your ~/Downloads directory.

git clone https://github.com/nrgapple/scripts.git && mv scripts/ai_text_cleaner/automator/AI\ Text\ Clean\ Up.workflow ./ && rm -rf scripts

Open up the file ai_text_cleaner/automator/AI Text Clean Up.workflow/Contents/document.wflow. ctr+f for ai_text_cleaner. You should see a line like so:

<string>$HOME/git/scripts/ai_text_cleaner/ai_text_cleaner "$@"</string>

Change it to where you saved your script from above. If you saved it to where I said it would be:

<string>$HOME/ai_text_cleaner/ai_text_cleaner "$@"</string>

Save and Lets move on.

Copy the whole directory (AI Text Clean Up.workflow) to your services folder in automator:

cp -r AI\ Text\ Clean\ Up.workflow ~/Library/Services/AI\ Text\ Clean\ Up.workflow

Nice. Now last is to create a keybinding for running it.

Set up the keybindings

Go to Settings on Mac and search for Keyboard. Click Keyboard Shortcuts.

Click Services and look for it under the different categories. Mine was under Text

Double click it and set your keybinding.

Nice. You're ready to test it out!

Test it out!

Open a text document and type some sentence or paragraph. Highlight all the text and do your keybinding. It will take a second or two and bam! You should see your highlighted text be replaced by Chatgpt's enhanced cleaning!

Modify the prompt

If you think what Chatgpt gave you sucked, you can try to change the prompt.

In our bash script from above look for this line:

# Define the prompt in a variable
PROMPT="You are a helpful assistant. Your task is to correct any grammatical errors, improve sentence structure, and fix spelling mistakes in the following text."

You can try and change this to your hearts desire to get better results!

Conclusion

We have created a tool worth $6.90 a month! You'll only have to pay for what you use on OpenAI's api rates.

Let me know if something doesn't work for you and I'll make some edits. Let me know if you would like me to do some more DYI AI tools in the future. I have already adapted with flow to create a command line command generator is well (Can be found in the same repo).

Thanks! 👋

Let's Use a Hiding Header Hook

Adam — Thu, 11 Jun 2020 18:29:59 +0000

Recently our team at the PWA Store decided to upgrade our header to a hiding header. A hiding header allows for more screen space on mobile and over all makes our react app feel more responsive. This is a huge bonus if your app has a lot of data to show, but minimal space to show it.

Third Party Solutions

The PWA Store was created with React Ionic. Ionic does a lot of the heavy lifting for the developer. And wouldn't you know it, their own documentation already has a hiding header on it. So adding that functionality should be ez pz, right? Wrong.

After diving deep into the header component documentation it was clear that hiding the header was not possible through Ionic. There is a function called collapse, but this only works on iOS. Also, it just hides to reveal another smaller header.

Our second thought was to search npm for something that was already implemented. We ran across React Headroom and it seemed to be everything we were looking for and just an npm install away.

After installing and adding it to our app, Headroom was broken. It didn't work nicely with our app. Actually it didn't work at all. Bummer.

Build a `HidingHeader` Component

At this point we realized it was time to create it on our own. Since the header would be on many of the app listing pages it would need to be reusable. The first idea was to make a HidingHeader component. The logic for checking the scroll distance of the content would reside inside the component making adding the header to a page a simple import.

<HidingHeader scrollY={scrollY} />

But this created too many unnecessary rerenders to the DOM as every change in the scroll y position of the content was causing the HidingHeader component to rerender. The only time that the HidingHeader needs to update is when its position should change. So how do we hold that state and only update the header when it is actually needed?

Introducing the `useHidingHeader` Hook 👏👏👏

const [hideDecimal, setScrollY] = useHidingHeader(threshold: number)

useHidingHeader hook updates a decimal value called hideDecimal between 0-1 to let the HidingHeader component know how much of the header should be hidden. 0 means not hidden at all and 1 fully hidden. Our page's content component sends a callback when scrolling in the y direction updates. This value is then set in the setScrollY(position: number) state. Finally we pass a threshold value into the hook to tell it how much of a change in scroll it takes to completely hide the header. Handling the state of the Header this way ensures that the HidingHeader component will not update for state change unless there is an actual change in how it is displayed.

`HidingHeader.tsx`

import { IonHeader, IonToolbar } from "@ionic/react"
import React, { memo, useMemo, useRef } from "react"

interface ContainerProps {
  children: any
  // number between 0 and 1
  hideDecimal: number
}

const HidingHeader: React.FC<ContainerProps> = ({ hideDecimal, children }) => {
  const header = useRef<any>(null)
  const styles = useMemo(
    () => ({
      marginTop: `${-hideDecimal * 100}px`,
      marginBottom: `${hideDecimal * 100}px`,
    }),
    [hideDecimal]
  )

  return useMemo(
    () => (
      <IonHeader
        ref={header}
        style={styles}
        className="ion-no-border bottom-line-border"
      >
        <IonToolbar>{children}</IonToolbar>
      </IonHeader>
    ),
    [children, styles]
  )
}

export default memo(HidingHeader)

We update the margins of our Header component when the hideDecimal changes. This moves the Header up and away from view in the window.

`useHidingHeader.ts`

import { useState, useEffect } from "react"

type NumberDispatchType = (
  threshold: number
) => [number, React.Dispatch<React.SetStateAction<number>>]

export const useHidingHeader: NumberDispatchType = (threshold: number) => {
  const [initialChange, setInitialChange] = useState<number>(0)
  const [scrollYCurrent, setScrollYCurrent] = useState<number>(0)
  // number between 0 and 1
  const [hideDecimal, setHideDecimal] = useState<number>(0)
  const [scrollYPrevious, setScrollYPrevious] = useState<number>(0)

  useEffect(() => {
    // at the top or scrolled backwards => reset
    if (scrollYCurrent <= 0 || scrollYPrevious > scrollYCurrent) {
      setHideDecimal(0)
      setInitialChange(scrollYCurrent)
    } else {
      if (scrollYCurrent > initialChange) {
        // start hiding
        if (scrollYCurrent < initialChange + threshold)
          setHideDecimal((scrollYCurrent - initialChange) / threshold)
        // fulling hidden
        else if (hideDecimal !== 1) setHideDecimal(1)
      }
    }
    setScrollYPrevious(scrollYCurrent)
  }, [scrollYCurrent])

  return [hideDecimal, setScrollYCurrent]
}

Typing the Hook

type NumberDispatchType = (
  threshold: number
) => [number, React.Dispatch<React.SetStateAction<number>>]

One of the most annoying, but rewarding parts of using Typescript is typing your objects. So in this instance, how do you type a hook? First we must understand what our hook really is.

useHidingHeader takes in a number and returns an array. The array's order is important, so we must take that into consideration when typing. Inside our array we have a number and the setter. The setter is a dispatch function defined inside the body of our hook. This setter is actually a React Dispatch that dispatches an action for setting a useState's value.

The Logic

// at the top or scrolled backwards => reset
if (scrollYCurrent <= 0 || scrollYPrevious > scrollYCurrent) {
  setHideDecimal(0)
  setInitialChange(scrollYCurrent)
} else {
  if (scrollYCurrent > initialChange) {
    // start hiding
    if (scrollYCurrent < initialChange + threshold)
      setHideDecimal((scrollYCurrent - initialChange) / threshold)
    // fulling hidden
    else if (hideDecimal !== 1) setHideDecimal(1)
  }
}
setScrollYPrevious(scrollYCurrent)

The actual logic behind the hook can be found within the useEffect. We must store the initialChange value of the scroll. This is the value that the scroll y is compared to. Next, we need to store the scrollYPrevious value of the scroll. This is the value that the scroll bar was at the previous time the scroll was updated.

Every time scrollYCurrent is set we execute the function in the useEffect.

If the scroll bar is at the top or its value is less than the previous value we reset the header's position by updating hideDecimal to 0.

When scrolling down two things can happen: we are in between the initialChange value and the threshold or we have passed that state and are continuing to scroll down.

Usage

const Home: React.FC = () => {
  const [hideDecimal, setScrollYCurrent] = useHidingHeader(50)
  return (
    <IonPage>
      <HidingHeader hideDecimal={hideDecimal}>
        <div className="HomeHeader">
          <div>
            <h1>PWA Store</h1>
            <IonNote>Progressive Web App Discovery</IonNote>
          </div>
        </div>
      </HidingHeader>
      <IonContent
        fullscreen={true}
        scrollEvents={true}
        onIonScroll={(e) => setScrollYCurrent(e.detail.scrollTop)}
      >
        <div>
          Things and stuff.
        </div>
      </IonContent>
    </IonPage>
  )
}

Wrapping Up

When some state changes every frame, it can be very beneficial to update the side effects to that change only when necessary. This limits the amount of rerenders to the DOM and our application's overall performance. By using a hook to control the state of our header's margins, we are able to update our header only when it really matters.

Here we see the DOM update only happening when the header is changing its size.

Thanks for reading and please let me know if you can come up with an even better way to do this!