Prompt Engineering
Prompt Engineer, Satyanarayan Mishra, ChatGPT

Prompt Engineering

Satyanarayan Mishra Satyanarayan Mishra

Satyanarayan Mishra

Frontend Architect | Engineering Leader | Author | AI Innovator – Driving Solutions from Concept to Reality

发布日期: 2023年8月18日
+ 关注

I tried Prompt Engineering today. Where I provided a prompt to Chat GPT to create a game using a JavaScript library called PixiJS.

At first I was able to generate the basic structure of a simple 15 number puzzle game.

Then I started curating the prompt step by step by simply applying the concepts used in PixiJS library. Finally I have the game https://codepen.io/satya4satyanm/pen/GRPRxvX?editors=0010

Lets see what all I tried

in chatGPT following commands I tried

  1. pixijs 4x4 number puzzle - Resulted with text output
  2. generate code - it gave me some code
  3. add background rectangle from 2,2 to width-4 height-4 - it added rectangles to each tile
  4. generate a pixijs 4x4 number puzzle game code with rectangles and text centered with containers for each tile - This created proper game
  5. ...
  6. ...
  7. ...
  8. generate a pixijs 4x4 number puzzle game code with rectangles and text wrapped in containers for each tile, check for victory, last tile with alpha 0.03, add a button to restart, onclick of restart click the tile adjacent to emptyTile 20 times - This is my last input to chatGPT. This generated below code 


<!DOCTYPE html
<html>
<head>
? <title>Number Puzzle</title>
? <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js"></script>
</head>
<body>
? <script>
? ? // Initialize PixiJS
? ? const app = new PIXI.Application({ width: 400, height: 400 });
? ? document.body.appendChild(app.view);


? ? // Create a background rectangle
? ? const background = new PIXI.Graphics();
? ? background.beginFill(0xAAAAAA);
? ? background.drawRect(2, 2, app.view.width - 4, app.view.height - 4);
? ? background.endFill();
? ? app.stage.addChild(background);


? ? // Puzzle variables
? ? const gridSize = 4;
? ? const tileSize = (app.view.width - 4) / gridSize;
? ? const numbers = Array.from({ length: gridSize * gridSize - 1 }, (_, index) => index + 1);
? ? let pieces = [];
? ? let emptyRow = gridSize - 1;
? ? let emptyCol = gridSize - 1;
? ? let restartButton;


? ? // Shuffle the numbers
? ? for (let i = numbers.length - 1; i > 0; i--) {
? ? ? const j = Math.floor(Math.random() * (i + 1));
? ? ? [numbers[i], numbers[j]] = [numbers[j], numbers[i]];
? ? }


? ? // Create puzzle pieces
? ? for (let row = 0; row < gridSize; row++) {
? ? ? for (let col = 0; col < gridSize; col++) {
? ? ? ? const number = numbers[row * gridSize + col];
? ? ? ? if (number !== undefined) {
? ? ? ? ? const container = new PIXI.Container();
? ? ? ? ? container.position.set(col * tileSize + 2, row * tileSize + 2);


? ? ? ? ? const rectangle = new PIXI.Graphics();
? ? ? ? ? rectangle.beginFill(0xFFFFFF);
? ? ? ? ? rectangle.drawRect(0, 0, tileSize - 4, tileSize - 4);
? ? ? ? ? rectangle.endFill();


? ? ? ? ? const text = new PIXI.Text(number.toString(), { fontSize: 48, fill: 0x000000 });
? ? ? ? ? text.anchor.set(0.5);
? ? ? ? ? text.position.set(tileSize / 2 - 2, tileSize / 2 - 2);


? ? ? ? ? container.addChild(rectangle, text);
? ? ? ? ? app.stage.addChild(container);
? ? ? ? ? pieces.push(container);
? ? ? ? }
? ? ? }
? ? }


? ? // Set alpha for the last piece
? ? pieces[pieces.length - 1].alpha = 0.03;


? ? // Move puzzle piece if valid
? ? function movePiece(row, col) {
? ? ? const rowDiff = Math.abs(row - emptyRow);
? ? ? const colDiff = Math.abs(col - emptyCol);


? ? ? if ((rowDiff === 1 && colDiff === 0) || (rowDiff === 0 && colDiff === 1)) {
? ? ? ? const piece = pieces[row * gridSize + col];
? ? ? ? const emptyPiece = pieces[emptyRow * gridSize + emptyCol];


? ? ? ? const tempPosition = piece.position.clone();
? ? ? ? piece.position.set(emptyPiece.position.x, emptyPiece.position.y);
? ? ? ? emptyPiece.position.set(tempPosition.x, tempPosition.y);


? ? ? ? [pieces[row * gridSize + col], pieces[emptyRow * gridSize + emptyCol]] =
? ? ? ? ? [pieces[emptyRow * gridSize + emptyCol], pieces[row * gridSize + col]];


? ? ? ? emptyRow = row;
? ? ? ? emptyCol = col;


? ? ? ? if (checkVictory()) {
? ? ? ? ? alert('Congratulations! You solved the puzzle.');
? ? ? ? }
? ? ? }
? ? }


? ? // Check for victory
? ? function checkVictory() {
? ? ? for (let i = 0; i < pieces.length; i++) {
? ? ? ? const row = Math.floor(i / gridSize);
? ? ? ? const col = i % gridSize;
? ? ? ? const text = pieces[i].getChildAt(1);


? ? ? ? if (parseInt(text.text) !== row * gridSize + col + 1) {
? ? ? ? ? return false;
? ? ? ? }
? ? ? }


? ? ? return true;
? ? }


? ? // Enable events for containers
? ? pieces.forEach(container => {
? ? ? container.interactive = true;
? ? ? container.buttonMode = true;
? ? ? container.on('pointerdown', () => {
? ? ? ? const row = Math.floor(pieces.indexOf(container) / gridSize);
? ? ? ? const col = pieces.indexOf(container) % gridSize;
? ? ? ? movePiece(row, col);
? ? ? });
? ? });


? ? // Create restart button
? ? restartButton = new PIXI.Text('Restart', { fontSize: 24, fill: 0xFFFFFF });
? ? restartButton.position.set(app.view.width / 2 - restartButton.width / 2, app.view.height - 40);
? ? restartButton.interactive = true;
? ? restartButton.buttonMode = true;
? ? restartButton.on('pointerdown', restartGame);
? ? app.stage.addChild(restartButton);


? ? // Restart game
? ? function restartGame() {
? ? ? for (let i = 0; i < 20; i++) {
? ? ? ? const adjacentTiles = getAdjacentTiles(emptyRow, emptyCol);
? ? ? ? const randomTile = adjacentTiles[Math.floor(Math.random() * adjacentTiles.length)];
? ? ? ? movePiece(randomTile[0], randomTile[1]);
? ? ? }
? ? }


? ? // Get adjacent tiles
? ? function getAdjacentTiles(row, col) {
? ? ? const adjacentTiles = [];
? ? ? if (row > 0) adjacentTiles.push([row - 1, col]);
? ? ? if (row < gridSize - 1) adjacentTiles.push([row + 1, col]);
? ? ? if (col > 0) adjacentTiles.push([row, col - 1]);
? ? ? if (col < gridSize - 1) adjacentTiles.push([row, col + 1]);
? ? ? return adjacentTiles;
? ? }


? </script>
</body>
</html>

I commented randomizing tiles at the beginning. And I reached https://codepen.io/satya4satyanm/pen/GRPRxvX?editors=0010

领英推荐

This is the first time I worked with PixiJs framework, I have no experience with it. But I know how a number game is composed of. Based on the game need, I prompted the chatGPT and it generated almost 99% code, of course it took few tries.

So what I learned from this exercise is chatGPT has lots of potential and this is the future. Companies can save huge amounts on application and product development. Developers can use chatGPT to generate code snippets of complete application very easily and can utilize the maximum potential of any framework.

Now I know why the Prompt Engineers are paid high.

One drawback with ChatGPT is that it understands things till the year 2021 and ignores anything available after that.

As per ChatGPT, Prompt engineering refers to the practice of crafting effective and specific prompts for AI language models like GPT-3.5. It involves formulating instructions or queries in a way that elicits the desired type of response from the model. Effective prompt engineering can help improve the quality and relevance of the generated outputs.

Here are some key points and strategies related to prompt engineering:

  1. Clarity and Specificity: Clearly define what you want the AI to do. Be specific in your instructions to avoid ambiguity. The more precise your instructions, the better the chances of getting the desired output.
  2. Format and Structure: Structure your prompt in a way that guides the AI's response. You can start with context, provide background information, or even give an example of the expected answer.
  3. Contextual Prompts: When using the AI for conversation or dialogue, provide context about the previous messages or the conversation's theme. This helps the AI generate more coherent and contextually relevant responses.
  4. Prompt Variations: Experiment with different variations of prompts to see which one yields the best results. Small changes in wording can lead to different responses, so iterating on your prompts can be helpful.
  5. Positive and Negative Reinforcement: If the AI isn't providing the desired output, you can use positive and negative reinforcement by specifying what you like or dislike about previous responses. This can help guide the AI's understanding of your expectations.
  6. Anaphora and References: Use references to previous parts of the prompt or external information to create more context for the AI. This can help with generating more coherent and relevant responses.
  7. Temperature and Max Tokens: Adjust the "temperature" and "max tokens" settings when making API calls to control the randomness of the generated responses and their length.
  8. Fine-Tuning: For specific tasks, you might consider fine-tuning the model on custom data to better align its behavior with your requirements.
  9. Ethical Considerations: Be cautious when crafting prompts to avoid generating inappropriate, biased, or harmful content. The model might generate outputs based on the input provided, so it's important to be responsible and thoughtful in your prompt engineering.
  10. Iterative Process: Prompt engineering is often an iterative process. Continuously refine and experiment with your prompts to achieve the best results.

Finally we are moving towards a new world of opportunities where repeated tasks will be taken care by these bots and we will concentrate on business. :)

要查看或添加评论，请登录

Satyanarayan Mishra的更多文章

社区洞察

其他会员也浏览了