DEV Community: Anderson Ribeiro

Forwarding port 3000 to 80 on ubuntu.

Anderson Ribeiro — Wed, 16 Aug 2023 17:12:24 +0000

sudo iptables -A INPUT -i eth0 -p tcp --dport 80 -j ACCEPT
sudo iptables -A INPUT -i eth0 -p tcp --dport 3000 -j ACCEPT
sudo iptables -A PREROUTING -t nat -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 3000

That works.

Creating (or attempting) to create an autocomplete with OpenAI ChatGPT.

Anderson Ribeiro — Wed, 22 Mar 2023 16:04:33 +0000

Ok, I had this idea in mind, of how can I create an autocomplete like when we are typing something on Gmail. And since I am kinda obsessed with ChatGPT I thought to myself why not?

So the first thing I needed to create is the textarea. And since I need to show the autocomplete text I needed to add as well a container for the autocompleted text. So here we go.

const Autocomplete = (): ReactElement => {
  return (
    <div className='container-autocomplete'>
      <div className='autocomplete'></div>
      <textarea />
    </div>
  );
}

Ok so now we need to add styles to that

* {
  box-sizing: border-box;
}

.container-autocomplete {
  width: 400px;
  height: 200px;
  border: 1px solid #ccc;
  margin: 10px;
  position: relative;
}

textarea {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  padding: 10px;
  box-sizing: border-box;
  position: absolute;
  resize: none;
  z-index: 1;
  background: transparent;
  font-family: sans-serif;
  font-size: 13px;
}

.autocomplete {
  top: 0;
  left: 0;
  opacity: 0.5;
  position: absolute;
  padding: 10px;
  width: 100%;
  height: 100%;
  overflow: auto;
  font-family: sans-serif;
  font-size: 13px;
}

Next step: create the autocomplete hook. The biggest problem I had to solve is for the ChatGPT 3.5 to behave correctly since it's known to just ignore what the system has to say and add something completely irrelevant as an answer.

So I came with this prompt

You are an autocomplete assistant. Use the user text as a reference for the autocomplete.

Examples:
User: Hello,
Assistant: how are you doing?
User: I wanted to let you know
Assistant: we just arrived

I'm sure it needs more context for something more "powerful" but for now I think it's great. Now we just need to create the hook.

import { 
  ChatCompletionRequestMessage, 
  ChatCompletionRequestMessageRoleEnum, 
  Configuration, 
  OpenAIApi 
} from 'openai';

export const API_KEY_OPEN_AI = 'YOUR_OPEN_AI_SK_KEY';

const configuration = new Configuration({
  apiKey: API_KEY_OPEN_AI,
});

const openai = new OpenAIApi(configuration);

const useAutoComplete = (text: string): [string, () => void] => {
  const [suggestion, setSuggestion] = React.useState<string>('');

  const fetchSuggestion = useCallback(async (text: string): Promise<string> => {
    const messages: ChatCompletionRequestMessage[] = [
      {
        role: ChatCompletionRequestMessageRoleEnum.System,
        content: `You are an autocomplete assistant. Use the user text as a reference for the autocomplete.

Examples:
User: Hello,
Assistant: how are you doing?
User: I wanted to let you know
Assistant: we just arrived`
      },
      {
        role: ChatCompletionRequestMessageRoleEnum.User,
        content: text
      }
    ];

    const response = await openai.createChatCompletion({
      model: 'gpt-3.5-turbo',
      messages
    });

    const data = response.data.choices[0]?.message?.content.trim();

    return data || '';
  }, []);

  useEffect(() => {
    let doNotUpdate = false;

    if (text.length > 10) {
      fetchSuggestion(text)
        .then(suggestion => {
          if (!doNotUpdate) setSuggestion(suggestion);
        });
    }

    return () => {
      doNotUpdate = true;
    };
  }, [text, fetchSuggestion]);

  const clear = useCallback(() => {
    setSuggestion('');
  }, []);

  return [suggestion, clear];
}

Now we need to fix a few things on the autocomplete function

const Autocomplete = (): ReactElement => {
  const [text, setText] = React.useState<string>('');

  const [suggestion, clear] = useAutoComplete(text);

  const handleTextChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setText(e.target.value);
    clear();
  }, [clear]);

  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === 'Tab') {
      e.preventDefault();
      if (suggestion) {
        setText(text + ' ' + suggestion);
        clear()
      }
    }
  }, [suggestion, text, clear]);

  return (
    <div className='container-autocomplete'>
      <div className='autocomplete'>{text + ' ' + suggestion}</div>
      <textarea 
        value={text} 
        onChange={handleTextChange} 
        onKeyDown={handleKeyDown}
      />
    </div>
  );
}

Ok, so how does it work? Everytime the user type something we will send to the autocomplete hook and it will create an autocomplete sentence for us.
The handleTextChange clears the old autocomplete and also sets the new text for the autocompletion.

And finally when the user press Tab it will autocomplete with the new text from the user plus the suggestion.

It was a fun project overall. Now I know it's doable, although it needs some changes so the autocompletion can be reliable and also relevant to what the user is writing.

Everyone is talking about how to create prompts for ChatGPT

Anderson Ribeiro — Sun, 12 Mar 2023 13:33:31 +0000

Yup everyone is talking about the best prompts ever for ChatGPT. And I agree it's one of the most important things for this tool to work as you want.

I was looking at how I should create the prompts for ChatGPT. Sometimes you need it to be more inventive and sometimes you need it to be more strict.

The first thing to know for us as developers: ChatGPT (gpt-3.5-turbo) is different from text-davinci-003 (that one that you can access on the playground from OpenAi)

I also used this tweet as a reference which helped a lot.

Kevin Liu

@kliu128

The entire prompt of Microsoft Bing Chat?! (Hi, Sydney.)

00:04 AM - 09 Feb 2023

With that being said here comes my two cents on how to create assertive prompts for both. The only thing I should say is that text-davinci is a bit stubborn and you need to be more assertive about it.

Always create a persona
Tell the persona which languages you want it to understand
Make the persona differentiate what is the user input and what is the persona output.

And how would that be inputed on the playground?

Create a persona called Lily;
Lily recognizes tasks and generates tasks from texts that are given to her;
Lily uses the text as base and it should get actionable items from it;
Lily does not repeat tasks;
Lily does not disclose her identity;
Lily's answers should be objective;

User: [put the user text here]

From the user text which tasks Lily think it should be created? Separated by a line break
Lily:

Two things you need to understand using "User" and "Lily" you make sure to separate what is the input from each. And as I said text-davinci is pretty stubborn and sometimes it wants to deviate from the prompt you created so you must force it to answer the way you want.

And if you want to use that on ChatGPT you just need to separate between "System", "Assistant" and "User".

System is where you add information about how the assistant should answer
User is the user input
Assistant is the output from the prompt you just created.

Merging and pulling from git as you were used to

Anderson Ribeiro — Thu, 06 Oct 2022 15:42:31 +0000

Okay, we've been using git pull for a long time, and also for a long time we have been receiving a warning telling us that the behavior was going to change and the time has come.

But if you are like me you are used to the old times. And no worries you can go back in time and still have the same behavior.

git pull --no-ff

And

git merge --no-ff

You can also make it as default but I don't recommend that :)

Compress images from a folder

Anderson Ribeiro — Tue, 20 Sep 2022 18:40:46 +0000

Yes, another one.

Sometimes you have to use a few tools that you just forget about them. And then you have to search for them all over again.

This one compresses all images from a folder.

Follow this magic link:

https://gist.github.com/JesseRWeigel/756cc507cbe59084d66e376eaf05c6e9

Deleting node modules folders from projects you are not working

Anderson Ribeiro — Tue, 20 Sep 2022 18:31:01 +0000

Sometimes you have to use a few tools that you just forget about them. And then you have to search for them all over again.

This is what brought me here today. I will start sharing a few tools that I use not that often but it helps me sometimes.

The first one can be a lifesaver or I should say a space saver.

To run it you just need to go to your folder where your projects are and then run it.

$ npx npkill