Authors:
Welcome to the Prompt Engineering Hands-on Lab! This guide is designed to assist you in understanding and utilizing Microsoftâs AI companion, Copilot, in a practical and engaging manner.
Welcome to the Prompt Engineering Hands-on Lab!
This guide is designed to assist you in understanding and utilizing Microsoftâs AI companion, Copilot, in a practical and engaging manner.
Throughout this lab, we will delve into the world of AI-powered chat, explore various types of prompts, and learn how to guide an AI language model to generate desired content. The exercises are designed to be hands-on, allowing you to learn by doing and apply your newfound skills in real-time.
Write the following prompt in the âAsk me anythingâŚâ textbox:
The space is
The space is +
This is the most basic prompt and is called a seed text prompt. A seed text prompt is a simple, open-ended statement or question that serves as a starting point for AI-generated content.
Usually, Large Language Model (LLM) chat apps use a System Message and some templates to set the rules of the generation. We cannot change the system message for Copilot, but we can provide our own context for the session as a first message.
In this exercise, we want you to be the CEO of a new spaceship startup, so Copilot will be your executive assistant that will help you shape your ideas. Write a prompt like this to set the context: +In this exercise, we want you to be the CEO of a new spaceship startup, so Copilot will be your executive assistant that will help you shape your ideas. Write a prompt like this to set the context, but remember to tailor it to your own preferences (i.e.: you donât need to be an awarded cook đ): -You are an executive assistant to an awarded cook that now is the CEO of a cutting-edge spaceship startup; your role is multifaceted and pivotal. You possess a deep understanding of aerospace engineering, which allows you to contribute significantly to the design and logistics of human spaceships bound for Mars. Your strategic planning skills enable you to assist in setting long-term goals, allocating resources effectively, and ensuring that every project milestone aligns with the companyâs ambitious vision. +You are an executive assistant to an awarded cook that now is the CEO of a cutting-edge spaceship startup; your role is multifaceted and pivotal. You possess a deep understanding of aerospace engineering, which allows you to contribute significantly to the design and logistics of human spaceships bound for Mars. Your strategic planning skills enable you to assist in setting long-term goals, allocating resources effectively, and ensuring that every project milestone aligns with the companyâs ambitious vision. Your creative input is crucial in ideating innovative solutions and designing a corporate image that encapsulates the startupâs spirit. Youâre adept at translating complex engineering concepts into comprehensive strategies, facilitating effective communication across departments. Your project management expertise ensures that all initiatives are executed flawlessly, reflecting the companyâs commitment to pioneering space exploration. @@ -418,6 +429,37 @@ Some more example prompts // Add the link to the sidebar index $('#sidebar-index').append(link); }); + + $('pre code').each(function() { + var button = $('').attr('type', 'button').attr('title','Copy').addClass('copy-button').text('đ'); + $(this).parent().prepend(button); + }); + + var message = $('').attr('id', 'copy-message').text('Text copied to clipboard').hide(); + $('body').append(message); + + $('.copy-button').click(function() { + var code = $(this).siblings('code').text(); + var position = $(this).offset(); + + navigator.clipboard.writeText(code).then(function() { + // Get the position of the button + + // Set the position of the message + $('#copy-message').css({ + top: position.top + 'px', + left: (position.left - $('#copy-message').width()) + 'px' + }); + // Show the message + $('#copy-message').fadeIn('slow', function() { + // Hide the message after 800 ms + $(this).delay(800).fadeOut('slow'); + }); + }, function() { + // failure + alert('Failed to copy text'); + }); + }); }); @@ -442,7 +484,7 @@ Demos and labs diff --git a/web/assets/css/code.css b/web/assets/css/code.css new file mode 100644 index 0000000..4cfea2d --- /dev/null +++ b/web/assets/css/code.css @@ -0,0 +1,33 @@ +pre { + position: relative; + white-space: pre-wrap; /* Since CSS 2.1 */ + white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ + white-space: -pre-wrap; /* Opera 4-6 */ + white-space: -o-pre-wrap; /* Opera 7 */ + word-wrap: break-word; /* Internet Explorer 5.5+ */ + overflow: auto; + } + + pre code { + overflow: visible; + white-space: pre-wrap; + word-wrap: break-word; + } + + pre .copy-button { + position: absolute; + top: 0; + right: 0; + padding: 5px 10px; + background-color: #f9f9f9; + border: 1px solid #ccc; + cursor: pointer; + } + + #copy-message { + position: absolute; + padding: 10px; + background-color: #f9f9f9; + border: 1px solid #ccc; + font-size: 12px; + } \ No newline at end of file diff --git a/web/assets/css/sidebar.css b/web/assets/css/sidebar.css index 3112cbf..380f05d 100644 --- a/web/assets/css/sidebar.css +++ b/web/assets/css/sidebar.css @@ -13,4 +13,10 @@ #sidebar-index a { display: block; margin-bottom: 0.5em; + } + + @media screen and (max-width: 1200px) { + #sidebar-index { + display: none; + } } \ No newline at end of file
In this exercise, we want you to be the CEO of a new spaceship startup, so Copilot will be your executive assistant that will help you shape your ideas. Write a prompt like this to set the context, but remember to tailor it to your own preferences (i.e.: you donât need to be an awarded cook đ):
You are an executive assistant to an awarded cook that now is the CEO of a cutting-edge spaceship startup; your role is multifaceted and pivotal. You possess a deep understanding of aerospace engineering, which allows you to contribute significantly to the design and logistics of human spaceships bound for Mars. Your strategic planning skills enable you to assist in setting long-term goals, allocating resources effectively, and ensuring that every project milestone aligns with the companyâs ambitious vision. Your creative input is crucial in ideating innovative solutions and designing a corporate image that encapsulates the startupâs spirit. Youâre adept at translating complex engineering concepts into comprehensive strategies, facilitating effective communication across departments. Your project management expertise ensures that all initiatives are executed flawlessly, reflecting the companyâs commitment to pioneering space exploration. @@ -418,6 +429,37 @@ Some more example prompts // Add the link to the sidebar index $('#sidebar-index').append(link); }); + + $('pre code').each(function() { + var button = $('').attr('type', 'button').attr('title','Copy').addClass('copy-button').text('đ'); + $(this).parent().prepend(button); + }); + + var message = $('').attr('id', 'copy-message').text('Text copied to clipboard').hide(); + $('body').append(message); + + $('.copy-button').click(function() { + var code = $(this).siblings('code').text(); + var position = $(this).offset(); + + navigator.clipboard.writeText(code).then(function() { + // Get the position of the button + + // Set the position of the message + $('#copy-message').css({ + top: position.top + 'px', + left: (position.left - $('#copy-message').width()) + 'px' + }); + // Show the message + $('#copy-message').fadeIn('slow', function() { + // Hide the message after 800 ms + $(this).delay(800).fadeOut('slow'); + }); + }, function() { + // failure + alert('Failed to copy text'); + }); + }); }); @@ -442,7 +484,7 @@ Demos and labs diff --git a/web/assets/css/code.css b/web/assets/css/code.css new file mode 100644 index 0000000..4cfea2d --- /dev/null +++ b/web/assets/css/code.css @@ -0,0 +1,33 @@ +pre { + position: relative; + white-space: pre-wrap; /* Since CSS 2.1 */ + white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ + white-space: -pre-wrap; /* Opera 4-6 */ + white-space: -o-pre-wrap; /* Opera 7 */ + word-wrap: break-word; /* Internet Explorer 5.5+ */ + overflow: auto; + } + + pre code { + overflow: visible; + white-space: pre-wrap; + word-wrap: break-word; + } + + pre .copy-button { + position: absolute; + top: 0; + right: 0; + padding: 5px 10px; + background-color: #f9f9f9; + border: 1px solid #ccc; + cursor: pointer; + } + + #copy-message { + position: absolute; + padding: 10px; + background-color: #f9f9f9; + border: 1px solid #ccc; + font-size: 12px; + } \ No newline at end of file diff --git a/web/assets/css/sidebar.css b/web/assets/css/sidebar.css index 3112cbf..380f05d 100644 --- a/web/assets/css/sidebar.css +++ b/web/assets/css/sidebar.css @@ -13,4 +13,10 @@ #sidebar-index a { display: block; margin-bottom: 0.5em; + } + + @media screen and (max-width: 1200px) { + #sidebar-index { + display: none; + } } \ No newline at end of file