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.
Table of Contents
ToggleAMPAny 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).
For instance, this is a simple 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:
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:
So, here we saw how AI is advantageous for marketingAMP. 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.
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{() => this.onToggleEdit(todo)}>Edit</button> <button{() => this.onDeleteTask(todo.id)}>Remove</button> </li> )); console.log(this.state.todos); return ( <div className="App"> {this.state.editing === false ? (<form{this.onAddTask}> <input placeholder="Enter Your Task" value={this.state.value} onChange={this.onChange}/> <button>Add Item</button> </form>) : (<form{this.onSubmitEditTodo}> <input placeholder="Enter Your Task" value={this.state.currentValue} name={this.state.currentValue} onChange={this.onEditInputChange}/> <button{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(event) => { // displays the input. setValue(event.target.value); console.log(event); console.log(todos); }; const(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(itemId) => { // deletes a task from the todo list. setTodos(todos.filter((item) => item.id !== itemId)); console.log(todos); }; const(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(event) => { // finalizes an editable task. event.preventDefault(); onEditTodo(currentId, currentValue); setEditing(false); }; const(todo) => { // makes a task editable. setEditing(true); setCurrentId(todo.id); setCurrentValue(todo.name); }; const(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{() => onToggleEdit(todo)}>Edit</button> <button{() => onDeleteTask(todo.id)}>Remove</button> </li> )); return( <div className="App"> {editing === false ? (<form{onAddTask}> <input placeholder = "Enter Your Task" value = {value} onChange = {onChange}/> <button>Add Item</button> </form>) : (<form{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:
Add code snippet 1 and code snippet 2, respectively, and hit enter. Here is the result generated by ChatGPT:
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.
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.
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.
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.
A: ChatGPT, Google Gemini, GitHub Copilot, Dall-E, and Synthesia are some popular generative AI platforms.
Want to share something? Use this form:
I have 9+ years of experience in writing content in both full-time and freelance capacities and 1.5+ years of experience in content editing and management. I’m well-versed in handling teams of 25+ professionals in on-site, remote, and mixed settings. I have worked for leading blogs like hackr.io, InterviewBit, Intellipaat, and KnowledgeHut.