An Introduction to Using Generative AI with ChatGPT

AI, Deep Learning, Tools & Gadgets, Trending / By /
using generative AI

AI is already here and transforming the way businesses work. ChatGPT – and other generative AIs like Google Gemini – are helping marketers, programmers, designers, and other professionals quickly complete deliverables while raising the productivity bar.

To use generative AI, you need to master the use of prompts, but what is an AI prompt? Let’s know.

What is an AI Prompt?

Any instruction or set of instructions fed to the ChatGPT, or any other image-/video-/text-based generative AI, is a prompt. Prompts can vary from simple (one-liners) to complex (several lines or even paragraphs).

Simple Prompts vs Complex Prompts

For instance, this is a simple prompt:

simple chatgpt prompt

To begin, we will provide a detailed description of a video ad script that we can use to run ads on YouTube and Instagram. For doing so, we will use an advanced prompt:

advanced chatgpt prompt

advanced chatgpt prompt generation

We can either end the prompt here or continue adding additional instructions to produce further refined revisions of the video ad script generated by ChatGPT. For instance, we want to trim the ad length to 90 seconds:

advanced chatgpt prompting

So, here we saw how AI is advantageous for marketing. Note that this is not the final version that you should use for your marketing endeavors. That’d be a disaster!

Thus, you need to check it yourself or get it checked by a professional digital marketer for accuracy and correctness.

Generative AI Prompts for (Learning) Programming

ChatGPT and other generative AIs can not only help you accomplish marketing efforts but they can also help you learn programming and even accomplish tasks. How? Continue reading.

This is a React code snippet to develop a ToDo app using the class component:

import React, {Component} from 'react';

// reference: https://medium.com/codex/to-do-list-app-with-reactjs-class-and-functional-components-3822f261e994

// Using the class component

class App extends Component {
  constructor() {
    super();
    this.state = ({
      todos: [],
      value: "",
      editing: false,
      currentId: "",
      currentValue: ""
    });
  }

  onChange = (event) => {                                     // displays the entered input.
    this.setState({ value: event.target.value })
    console.log(event);
  };

  onAddTask = (event) => {                                   // adds a task to the todo list.
    event.preventDefault();
    console.log(event, "Event");

    const obj = {
      name: this.state.value,
      id: Date.now()
  };

    if (this.state.value !== "") {
      this.setState({ todos: this.state.todos.concat(obj) })
      // this.state.todos.push(obj)                       // using the push method.
      this.setState({ value: ""})
    }
  };

  onDeleteTask = (itemId) => {                            // deletes a task from the todo list.
    this.setState({
      todos: [...this.state.todos].filter((item) => item.id !== itemId)
   // todos: this.state.todos.filter((item) => item.id !== itemId)
// this also works but is less preferable

    });
  };

  onEditTodo = (id, newValue) => {                     // makes a task editable.
    this.state.todos.map(item => {
      if (item.id === id) {
         item.name = newValue;
      }
    });
  };

  onSubmitEditTodo = (e) => {                        // finalizes an editable task.
    e.preventDefault();

    this.onEditTodo(this.state.currentId, this.state.currentValue);
    this.setState({ editing: false });
  };

  onToggleEdit = (todo) => {                            // makes a task editable.
    this.setState({ editing: true });
    this.setState({ currentId: todo.id });
    this.setState({ currentValue: todo.name });
  };

  onEditInputChange = (e) => {                         // displays the changed task.
    this.setState({ currentValue: e.target.value });
  };

  render() {
    const mylist = this.state.todos.map((todo, index) => (
      <li className="todo_item" key={index}>{todo.name}
        <button onClick={() => this.onToggleEdit(todo)}>Edit</button>
        <button onClick={() => this.onDeleteTask(todo.id)}>Remove</button>
      </li>
    ));

    console.log(this.state.todos);
    return (

      <div className="App">
        {this.state.editing === false ?
        (<form onSubmit={this.onAddTask}>
          <input
          placeholder="Enter Your Task"
          value={this.state.value}
          onChange={this.onChange}/>
          <button>Add Item</button>
        </form>)
        :
        (<form onSubmit={this.onSubmitEditTodo}>
          <input
          placeholder="Enter Your Task"
          value={this.state.currentValue}
          name={this.state.currentValue}
          onChange={this.onEditInputChange}/>
          <button onClick={this.onSubmitEditTodo}>Update Item</button></form>)}
          <ul className='todo_wrapper'>{mylist}</ul>
      </div>
    )
  }
}

export default App;

Whereas, this is a React code snippet to develop a ToDo app using the functional component:

import React, { useState } from 'react';
function ToDoAppFunction() {
    const [todos, setTodos] = useState([]);
    const [value, setValue] = useState("");
    const [editing, setEditing] = useState(false);
    const [currentId, setCurrentId] = useState("");
    const [currentValue, setCurrentValue] = useState("");

    const onChange = (event) => {                            // displays the input.
        setValue(event.target.value);
        console.log(event);
        console.log(todos);
    };

    const onAddTask = (event) => {    // adds a task to the todo list.
        event.preventDefault();
        console.log(event, "Event");

        const obj = {
            name: value,
            id: Date.now()
        };

        if (value !== "") {
            setTodos([...todos, obj]);
            // todos.push(obj);                             // this also works but isn't preferred
            setValue("");
        }
    };

    const onDeleteTask = (itemId) => {                       // deletes a task from the todo list.
        setTodos(todos.filter((item) => item.id !== itemId));
        console.log(todos);
    };

    const onEditTodo = (id, newValue) => {  
        console.log("onEditTodo function is working")                    // makes a task editable.
        setTodos(todos.map((item) => {
            if (item.id === id) {
                item.name = newValue;
            }
            return item;
        }));
    };

    const onSubmitEditTodo = (event) => {                              // finalizes an editable task.
        event.preventDefault();

        onEditTodo(currentId, currentValue);
        setEditing(false);
    };

    const onToggleEdit = (todo) => {                                  // makes a task editable.
        setEditing(true);
        setCurrentId(todo.id);
        setCurrentValue(todo.name);
    };

    const onEditInputChange = (event) => {                           // displays the changed task.
        setCurrentValue(event.target.value);
        console.log(event);
        console.log(todos);
    };

    const mylist = todos.map((todo) => (
        <li className='todo_item' key={todo.id}>{todo.name}
          <button onClick={() => onToggleEdit(todo)}>Edit</button>
          <button onClick={() => onDeleteTask(todo.id)}>Remove</button>
        </li>
    ));

    return(
        <div className="App">
            {editing === false ?
            (<form onSubmit={onAddTask}>
                <input
                placeholder = "Enter Your Task"
                value = {value}
                onChange = {onChange}/>
                <button>Add Item</button>
            </form>)
            :
            (<form onSubmit={onSubmitEditTodo}>
                <input
                // placeholder = "Enter the Edited Task"  // redundant
                value = {currentValue}
                name = {currentValue}
                onChange = {onEditInputChange}
                />
                <button>Edit Item</button>
            </form>)
            }
            <ul className="todo_wrapper">{mylist}</ul>
        </div>
    )
}

export default ToDoAppFunction;

Now, you can use ChatGPT to compare the two approaches and learn the differences:

chatgpt code prompt

Add code snippet 1 and code snippet 2, respectively, and hit enter. Here is the result generated by ChatGPT:

chatgpt code prompting

chatgpt code prompting

As you can see, ChatGPT highlighted all the differences (and similarities) between the two code snippets. You can also ask ChatGPT to generate code for you.

For example, you can ask it to generate a functional equivalent of a React code implemented using the class component.

Conclusion

How well you can leverage ChatGPT or some other generative AI depends on how good you get with your prompts. Thus, you need to experiment with ChatGPT to better understand how it will react (generate answers).

Moreover, working with ChatGPT is also like training an ML model. As you will continue feeding it with prompts, it will better understand your preferences for subsequent tasks.

FAQs

Q: What is generative AI?

A: Generative AI is a form of artificial intelligence that is capable of creating content based on inputs provided called prompts. The content can be text, video, images, code, and so on.

Q: What is ChatGPT?

A: ChatGPT is a text-based generative AI tool developed and published by OpenAI. The free version of the tool uses GPT3.5, which is a text-generating ML model, whereas the paid version leverages GPT4, which, in addition to text, also generates images and graphics.

Q: What are some popular generative AI platforms?

A: ChatGPT, Google Gemini, GitHub Copilot, Dall-E, and Synthesia are some popular generative AI platforms.

Want to share something? Use this form:

Share Your Thoughts, Queries and Suggestions!